/* :: 1.0 Import Fonts */
@import url("https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800");
@import url(/page/assets/css/bootstrap.min.css);
/* :: 2.0 Import All CSS 

@import url(css/classy-nav.css);
@import url(css/owl.carousel.min.css);
@import url(css/animate.css);
@import url(css/magnific-popup.css);
@import url(css/font-awesome.min.css);
@import url(css/elegant-icon.css);*/
/* :: 3.0 Base CSS */

* {
  margin: 0;
  padding: 0; }

body {
  font-family: 'Roboto', "noto_sans", "Noto Sans", "Apple SD Gothic Neo", "Roboto", "맑은고딕", "Malgun Gothic", "굴림", sans-serif;
  font-size: 14px;
  background:#F8FAFF;
  color: #707070; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #303030;
  line-height: 1.3;
  font-weight: 500; }

p {
  color: #707070;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300; }

a,
a:hover,
a:focus {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  text-decoration: none;
  outline: 0 solid transparent;
  font-weight: 500;
  font-size: 14px; }

ul,
ol {
  margin: 0; }
  ul li,
  ol li {
    list-style: none; }

img {
  height: auto;
  max-width: 100%; }

/* login */
  .logo-wrap{width:100%; height:120px; display:flex; align-items:flex-end; justify-content:center;
    background:linear-gradient(180deg,#F7FAFF 0%, #F6F8FC 100%);}
  .logo-wrap img{height:36px;}

  .card_login{position:fixed; left:0; right:0; bottom:0; z-index:50;
    width:100%; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;
    box-shadow:0 -6px 24px rgba(0,0,0,.08); overflow:hidden;}

  .headbar{width:100%; background:#376AED; color:#fff; padding-top:12px;}
  .tab-row{width:86%; margin:0 auto; display:flex; gap:8px;}
  .tab{flex:1; height:44px; line-height:44px; text-align:center; font-weight:700; font-size:16px; color:#fff; position:relative; text-decoration:none; border-radius:14px 14px 0 0;}
  .tab.active:after{content:""; position:absolute; left:16px; right:16px; bottom:-2px; height:3px; border-radius:2px; background:#E8ECF4;}
  .white-curve{width:100%; height:20px; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px; margin-top:12px;}

  .panel{width:86%; margin:0 auto; padding:2px 15px 18px 15px;}
  .welcome-title{font-size:24px; font-weight:800; color:#0D1B2A;}
  .welcome-sub{font-size:13px; color:#42577b; margin-bottom:30px;}
  .label{font-size:14px; color:#42577b; margin:14px 0 6px; font-weight:600;}
  .input:focus{border-color:#376AED;}
  .btn{width:100%; height:48px; border:none; border-radius:10px; background:#376AED; color:#fff; font-size:16px; font-weight:800; margin:20px 0 8px; box-shadow:0 6px 14px rgba(46,99,255,.25); cursor:pointer;}
  .helper{display:block; text-align:center; font-size:14px; color:#42577b; text-decoration:none;}
  .social-row{display:flex; gap:10px; margin-top:18px;}
  .sbtn{flex:1; height:44px; border-radius:10px; border:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; cursor:pointer; background:#fff;}
  .kakao{background:#FEE500; color:#191600; border-color:#E8D600;}
  .naver{background:#00bf18; color:#fff;}
  .apple{background:#000; color:#fff;}
  .progress-ghost{width:120px; height:6px; border-radius:10px; background:#E9EDF5; margin:30px auto 0px;}
  
  /* login 전용 인풋 스타일 – 부트스트랩 form-control 덮어쓰기 */
.wrap-login .form-control{
  border:none;
  border-bottom:1.2px solid #E3E8F0;
  border-radius:0;
  padding:12px 0;
  font-size:13px;
  outline:none;
  box-shadow:none;
  background:#fff;
}

.wrap-login .form-control:focus{
  border-color:#376AED;
}

/* 첫 디자인처럼 좌우 여백 줄이기 */
.panel{
  width:82%;
  margin:0 auto;
  padding:8px 0 24px;  /* 기존 2px 15px 18px 15px 에서 좌우 padding 제거 */
}


/* join */
.card_join{left:0; right:0; bottom:0; z-index:50;
    width:100%; background:#fff; border-top-left-radius:28px; border-top-right-radius:28px;
    /*box-shadow:0 -6px 24px rgba(0,0,0,.08);*/ overflow:hidden;}
/* ⬇️ 스크롤 컨테이너 */
  .scroll-wrap{
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    height: calc(100dvh - var(--headerH, 200px));
	background: #fff;
  }

.title{font-size:26px; font-weight:800; color:#0D1B2A; margin:8px 0;} .sub{font-size:13px; color:#6C7A92;} .label.inline{display:flex; align-items:center; justify-content:space-between;} .input{width:100%; border:none; border-bottom:1.2px solid #E3E8F0; padding:10px 5px; font-size:14px; outline:none; background:#fff;} .input:focus{border-color:#376AED;}

textarea.txtbox{width:100%; min-height:110px; border:none; background:#F2F4F7; border-radius:10px; padding:12px; font-size:13px; color:#4E5D78; resize:vertical;} .check-row{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:8px;}

/* 5열 그리드 고정 */
#catGrid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px 12px;                 /* row-gap / col-gap */
  justify-items:center;          /* 칩을 가운데 정렬 */
  align-items:start;
  padding:6px 10px;
}

/* 칩 크기 균일 + 중앙정렬 유지 */
#catGrid .chip{
  width:100%;
  max-width:92px;                /* 필요 시 조절 */
  margin:0 auto;
}

/* 카테고리 칩 전체 */
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
  cursor: pointer;
  background: transparent;
}

/* 아이콘 박스 (두겹 보더 효과) */
.chip .icon-box {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #fdfdfd;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease-in-out;
}

/* 외곽 보더 */
.chip .icon-box {
  position: relative;
  z-index: 1;
}

.chip .icon-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  border: 1px solid #AFAFAF;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  background: #eaeaea;
  z-index: -1; /* 👈 이 줄 추가! */
}


/* 내부 보더 */
.chip .icon-box::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 14px;
  border: 2px solid #ffffff;       /* 안쪽 흰색 테두리 */
}

/* 아이콘 */
.chip .ico {
  position: relative;
  z-index: 2;
  line-height: 1;
}

/* 텍스트 라벨 */
.chip .cap {
  font-size: 13px;
  font-weight: 700;
  color: #3C4A64;
  text-align: center;
  white-space: nowrap;
}

/* 선택(active) 시 */
.chip.active .icon-box::before {
  border-color: #FF7A00;                 /* 주황색 외곽 */
  box-shadow: 0 0 0 3px rgba(255,122,0,0.25);
}
.chip.active .icon-box::after {
  border-color: #ffffff;
}
.chip.active .cap {
  color: #FF7A00;
}


/* splash */ .splash-bg { position: fixed; /* viewport 고정 */ top: 0; left: 0; right: 0; bottom: 0; background-image: url('../img/splash-bg.jpg'); background-repeat: no-repeat; background-position: center center;  background-size: cover;              display: flex;                      align-items: center; justify-content: center; }

.splash-logo { max-width: 100%; height: auto; }
.color-splash { color: #D4AB7A; }

/* onboarding */
:root{
    --bg:#eef3f9;
    --card:#fff;
    --text:#1f2937;
    --muted:#6b7280;
    --accent:#3b82f6;
    --dot:#cfd8e3;
    --shadow:0 4px 6px rgba(16,24,40,.14);
    --cardH: 210px; /* 하단 고정 카드 높이 */
    --side:16px;    /* 카드 좌우 여백 */
  }
  *{box-sizing:border-box}
  /*html,body{background:#F6F9FF;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Apple SD Gothic Neo,sans-serif;color:var(--text);overflow:hidden}*/
  
  /* 상단 슬라이더: 화면 높이 - 카드 높이 */
  .slides{
    height: calc(100dvh - var(--cardH));
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    display:flex; gap:40px; /* 페이지 전체 갭/패딩 제거 */
    -webkit-overflow-scrolling:touch;
	padding: 35px;
  }
  .slides::-webkit-scrollbar{display:none}
  .slide{min-width:100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center;}

  /* 2x2 그리드: 1·4 좁게 / 2·3 넓게 */
  .grid{
    width:100%;
    padding:0 12px; /* 화면과 카드 사이 살짝 숨쉬기 */
  }
  .row{
    display:grid; gap:14px; margin-bottom:14px;
    /* 행마다 칼럼 비율을 다르게 설정 */
  }
  .row.top   { grid-template-columns: 0.88fr 1.12fr; } /* 1 좁음 / 2 넓음 */
  .row.bottom{ grid-template-columns: 1.12fr 0.88fr; } /* 3 넓음 / 4 좁음 */

  .tile{border-radius:18px; overflow:hidden; background:#e7edf5; box-shadow:0 12px 26px rgba(16,24,40,.10);}
  .tile img{width:100%; height:170px; object-fit:cover; display:block;}

  /* ===== 하단 고정 카드 ===== */
  .card {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + -13px);
  background: var(--card);
  border-radius: 10px;
  /*box-shadow: var(--shadow);*/
  display: flex;
  flex-direction: column;
  border: 1px solid #e4e7ec;
}
.title{font-size:22px; line-height:1.35; font-weight:800; margin:0 0 10px;}

.controls {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dot);
  transition: all 0.25s ease;
}

.dot.active {
  width: 22px;
  background: var(--accent);
}

/* 버튼 그룹 오른쪽 정렬 */
.btn-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.next,
.skip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.35);
}

.next {
  width: 52px;
  height: 44px;
  background: var(--accent);
  color: #fff;
  font-size: 18px;
}

.skip {
  height: 44px;
  padding: 0 18px;
  background: #e5ecfa;
  color: var(--accent);
  font-size: 15px;
  box-shadow: none;
}


  @media (min-width:420px){
    .tile img{height:190px}
    .title{font-size:24px}
  }
  
.fs-none{
	font-size: 0 !important;
}
.fs--01 {
	font-size: 0.68019rem !important;
}
.fs--1 {
	font-size: 0.75019rem !important;
}
.fs-075 {
	font-size: .825rem !important;
}

.fs-005 {
	font-size: .875rem !important;
}

.fs-15 {
	font-size: .937rem !important;
}

.fs-0 {
	font-size: 1rem !important;
}

.fs-05 {
	font-size: 1.14rem !important;
}

.fs-1 {
	font-size: 1.25rem !important;
}
.fs-105 {
	font-size: 1.5rem !important;
}
.fs-2 {
	font-size: 1.77689rem !important;
}

.fs-2-5 {
	font-size: 2rem !important;
}

.fs-3 {
	font-size: 2.36859rem !important;
}

.fs-4 {
	font-size: 3.15733rem !important;
}

.fs-5 {
	font-size: 4.20873rem !important;
}

.fs-6 {
	font-size: 5.61023rem !important;
}

.fs-7 {
	font-size: 7.47844rem !important;
}

.fs-8 {
	font-size: 9.96876rem !important;
}

@media (min-width: 36em) {
	.fs-sm--1 {
		font-size: 0.75019rem !important;
	}

	.fs-sm-0 {
		font-size: 1rem !important;
	}

	.fs-sm-1 {
		font-size: 1.333rem !important;
	}

	.fs-sm-2 {
		font-size: 1.77689rem !important;
	}

	.fs-sm-2-5 {
		font-size: 2rem !important;
	}

	.fs-sm-3 {
		font-size: 2.36859rem !important;
	}

	.fs-sm-4 {
		font-size: 3.15733rem !important;
	}

	.fs-sm-5 {
		font-size: 4.20873rem !important;
	}

	.fs-sm-6 {
		font-size: 5.61023rem !important;
	}

	.fs-sm-7 {
		font-size: 7.47844rem !important;
	}

	.fs-sm-8 {
		font-size: 9.96876rem !important;
	}
}

@media (min-width: 48em) {
	.fs-md--1 {
		font-size: 0.75019rem !important;
	}

	.fs-md-0 {
		font-size: 1rem !important;
	}

	.fs-md-1 {
		font-size: 1.333rem !important;
	}

	.fs-md-2 {
		font-size: 1.77689rem !important;
	}

	.fs-md-3 {
		font-size: 2.36859rem !important;
	}

	.fs-md-4 {
		font-size: 3.15733rem !important;
	}

	.fs-md-5 {
		font-size: 4.20873rem !important;
	}

	.fs-md-6 {
		font-size: 5.61023rem !important;
	}

	.fs-md-7 {
		font-size: 7.47844rem !important;
	}

	.fs-md-8 {
		font-size: 9.96876rem !important;
	}
}

@media (min-width: 62em) {
	.fs-lg--1 {
		font-size: 0.75019rem !important;
	}

	.fs-lg-0 {
		font-size: 1rem !important;
	}

	.fs-lg-1 {
		font-size: 1.333rem !important;
	}

	.fs-lg-2 {
		font-size: 1.77689rem !important;
	}

	.fs-lg-3 {
		font-size: 2.36859rem !important;
	}

	.fs-lg-4 {
		font-size: 3.15733rem !important;
	}

	.fs-lg-5 {
		font-size: 4.20873rem !important;
	}

	.fs-lg-6 {
		font-size: 5.61023rem !important;
	}

	.fs-lg-7 {
		font-size: 7.47844rem !important;
	}

	.fs-lg-8 {
		font-size: 9.96876rem !important;
	}
}

@media (min-width: 75em) {
	.fs-xl--1 {
		font-size: 0.75019rem !important;
	}

	.fs-xl-0 {
		font-size: 1rem !important;
	}

	.fs-xl-1 {
		font-size: 1.333rem !important;
	}

	.fs-xl-2 {
		font-size: 1.77689rem !important;
	}

	.fs-xl-3 {
		font-size: 2.36859rem !important;
	}

	.fs-xl-4 {
		font-size: 3.15733rem !important;
	}

	.fs-xl-5 {
		font-size: 4.20873rem !important;
	}

	.fs-xl-6 {
		font-size: 5.61023rem !important;
	}

	.fs-xl-7 {
		font-size: 7.47844rem !important;
	}

	.fs-xl-8 {
		font-size: 9.96876rem !important;
	}
}

.lh-0 {
	line-height: 0 !important;
}

.lh-f1 {
	line-height: 0.7 !important;
}

.lh-f2 {
	line-height: 0.85 !important;
}

.lh-1 {
	line-height: 1 !important;
}

.lh-2 {
	line-height: 1.15 !important;
}

.lh-3 {
	line-height: 1.3 !important;
}

.lh-4 {
	line-height: 1.45 !important;
}

.lh-5 {
	line-height: 1.6 !important;
}

.lh-6 {
	line-height: 1.75 !important;
}

.lh-7 {
	line-height: 1.9 !important;
}

.lh-8 {
	line-height: 2.05 !important;
}

.fw-100 {
	font-weight: 100 !important;
}

.fw-200 {
	font-weight: 200 !important;
}

.fw-300 {
	font-weight: 300 !important;
}

.fw-400 {
	font-weight: 400 !important;
}

.fw-500 {
	font-weight: 500 !important;
}

.fw-600 {
	font-weight: 600 !important;
}

.fw-700 {
	font-weight: 700 !important;
}

.fw-800 {
	font-weight: 800 !important;
}

.ls {
	letter-spacing: 2px !important;
}

.ls-0 {
	letter-spacing: 0px !important;
}

.ls--1 {
	letter-spacing: -1px !important;
}

.ls--2 {
	letter-spacing: -2px !important;
}

ul.bullet-inside {
	list-style-position: inside;
}

ul.no-style {
	list-style: none;
}

.btn-o2 {background-color:#fff; border:1px solid #ff4b4b; border-radius:20px; padding:5px 12px 5px 12px; font-size:12px; }
.btn-o3 {background-color:#fff; border:1px solid #ff4b4b; border-radius:20px; padding:3px 10px 3px 10px; font-size:11px; }

.btn.btn-xs {
	padding: 0.2rem 0.7rem;
	font-size: .65rem;
}

.btn.btn-sm {
	padding: 0.15rem 1rem;
	font-size: .8rem;
}

.btn.btn-sm2 {
	padding: 0.6rem 1.1rem;
	font-size: .8rem;
	margin: 0 5px 5px 0;
	font-weight:600;
}

.btn.btn-lg {
	padding: .9rem 5rem;
	font-size: 1.05rem;
}

.btn.active,
.btn:active {
	box-shadow: none;
}

.btn-capsule {
	border-radius: 50px;
}


.btn-primary {
	color: white;
	background-color: #0071d1;
	border-color: #0068c3;
}

.btn-primary.active,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus {
	color: white;
	background-color: #005197;
	border-color: #005197;
}

.btn-primary.disabled,
.btn-primary:disabled {
	background-color: #005197;
	border-color: #005197;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
	color: white;
	background-color: #0ea967;
	background-image: none;
	border-color: #0ea967;
	z-index: 99;
}

.btn-info {
	color: #48760e;
	background-color: #c8eda0;
	border-color: #c8eda0;
}
.btn-info2 {
	color: #7368e8;
	background-color: #eae8ff;
	border-color: #eae8ff;
}
.btn-info3 {
	color: #e8688c;
	background-color: #fed7eb;
	border-color: #fed7eb;
}
.btn-info4 {
	color: #1c9fc3;
	background-color: #b5ebfa;
	border-color: #b5ebfa;
}
.btn-info5 {
	color: #055e97;
	background-color: #88d1ff;
	border-color: #88d1ff;
}
.btn-info6 {
	color: #707101;
	background-color: #ecee44;
	border-color: #ecee44;
}
.btn-info7 {
	color: #508800;
	background-color: #afe95d;
	border-color: #afe95d;
}
.btn-info8 {
	color: #cc4d2a;
	background-color: #ffcdc0;
	border-color: #ffcdc0;
}
.btn-info9 {
	color: #707070;
	background-color: #e4e4e4;
	border-color: #e4e4e4;
}
.btn-info.active,
.btn-info:hover,
.btn-info:active,
.btn-info:focus,
.btn-info:active:focus {
	color: #578917;
	background-color: #e7f8c5;
	border-color: #e7f8c5;
}

.btn-info.disabled,
.btn-info:disabled {
	background-color: #e6eaef;
	border-color: #e6eaef;
}

/*

.btn-info:active,
.btn-info.active,
*/
.show > .btn-info.dropdown-toggle {
	color: white;
	background-color: #0ba1e5;
	background-image: none;
	border-color: #0989c3;
	z-index: 99;
}

.btn-success {
	color: white;
	background-color: #25b36e;
	border-color: #379668;
}

.btn-success.active,
.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn-success:active:focus {
	color: white;
	background-color: #25b36e;
	border-color: #379668;
}

.btn-success.disabled,
.btn-success:disabled {
	background-color: #4CD964;
	border-color: #37d552;
}

.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle {
	color: white;
	background-color: #25b36e;
	background-image: none;
	border-color: #379668;
	z-index: 99;
}

.btn-warning {
	color: white;
	background-color: #FF9500;
	border-color: #e68600;
}

.btn-warning.active,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:active:focus {
	color: white;
	background-color: #cc7700;
	border-color: #a86200;
}

.btn-warning.disabled,
.btn-warning:disabled {
	background-color: #FF9500;
	border-color: #e68600;
}

.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle {
	color: white;
	background-color: #cc7700;
	background-image: none;
	border-color: #a86200;
	z-index: 99;
}

.btn-danger {
	color: white;
	background-color: #bb3a3a;
	border-color: #bb3a3a;
}

.btn-danger.active,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:active:focus {
	color: white;
	background-color: #bb3a3a;
	border-color: #bb3a3a;
}

.btn-danger.disabled,
.btn-danger:disabled {
	background-color: #FF3B30;
	border-color: #ff2317;
}

.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle {
	color: white;
	background-color: #bb3a3a;
	background-image: none;
	border-color: #bb3a3a;
	z-index: 99;
}

.btn-outline-primary {
	color: #006bf5;
    background-image: none;
    background-color: transparent;
    border-color: #4799fe;
}

.btn-outline-primary.btn-icon span {
	border-color: #02ba6b;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out;
}

.btn-outline-primary.btn-icon:hover span,
.btn-outline-primary.btn-icon:focus span,
.btn-outline-primary.btn-icon:active span,
.btn-outline-primary.btn-icon:active:focus span {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

.btn-outline-primary:hover {
	color: white;
	background-color: #02ba6b;
	border-color: #02ba6b;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
	color: white;
	background-color: #02ba6b;
	border-color: #02ba6b;
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.open > .btn-outline-primary.dropdown-toggle {
	color: white;
	background-color: #02ba6b;
	border-color: #02ba6b;
}

.btn-outline-primary:active:hover,
.btn-outline-primary:active:focus,
.btn-outline-primary:active.focus,
.btn-outline-primary.active:hover,
.btn-outline-primary.active:focus,
.btn-outline-primary.active.focus,
.open > .btn-outline-primary.dropdown-toggle:hover,
.open > .btn-outline-primary.dropdown-toggle:focus,
.open > .btn-outline-primary.dropdown-toggle.focus {
	color: white;
	background-color: #02ba6b;
	border-color: #02ba6b;
}

.btn-outline-primary.active {
	color: white;
	background-color: #02ba6b;
	border-color: #02ba6b;
}

.btn-outline-primary.disabled:focus,
.btn-outline-primary.disabled.focus,
.btn-outline-primary:disabled:focus,
.btn-outline-primary:disabled.focus {
	border-color: #66afff;
}

.btn-outline-primary.disabled:hover,
.btn-outline-primary:disabled:hover {
	border-color: #66afff;
}

.btn-outline-info {
	color: #6fac06;
	background-image: none;
	background-color: transparent;
	border-color: #6fac06;
}

.btn-outline-info.btn-icon span {
	border-color: #6fac06;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out;
}

.btn-outline-info.btn-icon:hover span,
.btn-outline-info.btn-icon:focus span,
.btn-outline-info.btn-icon:active span,
.btn-outline-info.btn-icon:active:focus span {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

.btn-outline-info:hover {
	color: white;
	background-color: #6fac06;
	border-color: #6fac06;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
	color: white;
	background-color: #6fac06;
	border-color: #6fac06;
}

.btn-outline-info:active,
.btn-outline-info.active,
.open > .btn-outline-info.dropdown-toggle {
	color: white;
	background-color: #6fac06;
	border-color: #6fac06;
}

.btn-outline-info:active:hover,
.btn-outline-info:active:focus,
.btn-outline-info:active.focus,
.btn-outline-info.active:hover,
.btn-outline-info.active:focus,
.btn-outline-info.active.focus,
.open > .btn-outline-info.dropdown-toggle:hover,
.open > .btn-outline-info.dropdown-toggle:focus,
.open > .btn-outline-info.dropdown-toggle.focus {
	color: white;
	background-color: #6fac06;
	border-color: #6fac06;
}

.btn-outline-info.active {
	color: white;
	background-color: #6fac06;
	border-color: #6fac06;
}

.btn-outline-info.disabled:focus,
.btn-outline-info.disabled.focus,
.btn-outline-info:disabled:focus,
.btn-outline-info:disabled.focus {
	border-color: #8fd9fa;
}

.btn-outline-info.disabled:hover,
.btn-outline-info:disabled:hover {
	border-color: #8fd9fa;
}

.btn-outline-info2 {
	color: #7368e8;
	background-image: none;
	background-color: transparent;
	border-color: #c2bdff;
}

.btn-outline-success {
	color: #4CD964;
	background-image: none;
	background-color: transparent;
	border-color: #4CD964;
}

.btn-outline-success.btn-icon span {
	border-color: #4CD964;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out;
}

.btn-outline-success.btn-icon:hover span,
.btn-outline-success.btn-icon:focus span,
.btn-outline-success.btn-icon:active span,
.btn-outline-success.btn-icon:active:focus span {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

.btn-outline-success:hover {
	color: white;
	background-color: #4CD964;
	border-color: #4CD964;
}

.btn-outline-success:focus,
.btn-outline-success.focus {
	color: white;
	background-color: #4CD964;
	border-color: #4CD964;
}

.btn-outline-success:active,
.btn-outline-success.active,
.open > .btn-outline-success.dropdown-toggle {
	color: white;
	background-color: #4CD964;
	border-color: #4CD964;
}

.btn-outline-success:active:hover,
.btn-outline-success:active:focus,
.btn-outline-success:active.focus,
.btn-outline-success.active:hover,
.btn-outline-success.active:focus,
.btn-outline-success.active.focus,
.open > .btn-outline-success.dropdown-toggle:hover,
.open > .btn-outline-success.dropdown-toggle:focus,
.open > .btn-outline-success.dropdown-toggle.focus {
	color: white;
	background-color: #24aa3b;
	border-color: #1d892f;
}

.btn-outline-success.active {
	background-color: #24aa3b;
	border-color: #1d892f;
}

.btn-outline-success.disabled:focus,
.btn-outline-success.disabled.focus,
.btn-outline-success:disabled:focus,
.btn-outline-success:disabled.focus {
	border-color: #a0ebad;
}

.btn-outline-success.disabled:hover,
.btn-outline-success:disabled:hover {
	border-color: #a0ebad;
}

.btn-outline-warning {
	color: #FF9500;
	background-image: none;
	background-color: transparent;
	border-color: #FF9500;
}

.btn-outline-warning.btn-icon span {
	border-color: #FF9500;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out;
}

.btn-outline-warning.btn-icon:hover span,
.btn-outline-warning.btn-icon:focus span,
.btn-outline-warning.btn-icon:active span,
.btn-outline-warning.btn-icon:active:focus span {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

.btn-outline-warning:hover {
	color: white;
	background-color: #FF9500;
	border-color: #FF9500;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
	color: white;
	background-color: #FF9500;
	border-color: #FF9500;
}

.btn-outline-warning:active,
.btn-outline-warning.active,
.open > .btn-outline-warning.dropdown-toggle {
	color: white;
	background-color: #FF9500;
	border-color: #FF9500;
}

.btn-outline-warning:active:hover,
.btn-outline-warning:active:focus,
.btn-outline-warning:active.focus,
.btn-outline-warning.active:hover,
.btn-outline-warning.active:focus,
.btn-outline-warning.active.focus,
.open > .btn-outline-warning.dropdown-toggle:hover,
.open > .btn-outline-warning.dropdown-toggle:focus,
.open > .btn-outline-warning.dropdown-toggle.focus {
	color: white;
	background-color: #a86200;
	border-color: #804b00;
}

.btn-outline-warning.active {
	background-color: #a86200;
	border-color: #804b00;
}

.btn-outline-warning.disabled:focus,
.btn-outline-warning.disabled.focus,
.btn-outline-warning:disabled:focus,
.btn-outline-warning:disabled.focus {
	border-color: #ffbf66;
}

.btn-outline-warning.disabled:hover,
.btn-outline-warning:disabled:hover {
	border-color: #ffbf66;
}

.btn-outline-danger {
	color: #e76a6a ;
	background-image: none;
	background-color: transparent;
	border-color: #ffa9a4;
}

.btn-outline-danger.btn-icon span {
	border-color: #FF3B30;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out;
}

.btn-outline-danger.btn-icon:hover span,
.btn-outline-danger.btn-icon:focus span,
.btn-outline-danger.btn-icon:active span,
.btn-outline-danger.btn-icon:active:focus span {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

.btn-outline-danger:hover {
	color: #e76a6a ;
	background-image: none;
	background-color: transparent;
	border-color: #ffa9a4;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
	color: #e76a6a ;
	background-image: none;
	background-color: transparent;
	border-color: #ffa9a4;
}

.btn-outline-danger:active,
.btn-outline-danger.active,
.open > .btn-outline-danger.dropdown-toggle {
	color: #e76a6a ;
	background-image: none;
	background-color: transparent;
	border-color: #ffa9a4;
}

.btn-outline-danger:active:hover,
.btn-outline-danger:active:focus,
.btn-outline-danger:active.focus,
.btn-outline-danger.active:hover,
.btn-outline-danger.active:focus,
.btn-outline-danger.active.focus,
.open > .btn-outline-danger.dropdown-toggle:hover,
.open > .btn-outline-danger.dropdown-toggle:focus,
.open > .btn-outline-danger.dropdown-toggle.focus {
	color: white;
	background-color: #d80b00;
	border-color: #b00900;
}

.btn-outline-danger.active {
	background-color: #d80b00;
	border-color: #b00900;
}

.btn-outline-danger.disabled:focus,
.btn-outline-danger.disabled.focus,
.btn-outline-danger:disabled:focus,
.btn-outline-danger:disabled.focus {
	border-color: #ff9c96;
}

.btn-outline-danger.disabled:hover,
.btn-outline-danger:disabled:hover {
	border-color: #ff9c96;
}

.btn-outline-dark {
	color: #0c151a;
	background-image: none;
	background-color: transparent;
	border-color: #0c151a;
}

.btn-outline-dark.btn-icon span {
	border-color: #0c151a;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out;
}

.btn-outline-dark.btn-icon:hover span,
.btn-outline-dark.btn-icon:focus span,
.btn-outline-dark.btn-icon:active span,
.btn-outline-dark.btn-icon:active:focus span {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

.btn-outline-dark:hover {
	color: white;
	background-color: #0c151a;
	border-color: #0c151a;
}

.btn-outline-dark:focus,
.btn-outline-dark.focus {
	color: white;
	background-color: #0c151a;
	border-color: #0c151a;
}

.btn-outline-dark:active,
.btn-outline-dark.active,
.open > .btn-outline-dark.dropdown-toggle {
	color: white;
	background-color: #0c151a;
	border-color: #0c151a;
}

.btn-outline-dark:active:hover,
.btn-outline-dark:active:focus,
.btn-outline-dark:active.focus,
.btn-outline-dark.active:hover,
.btn-outline-dark.active:focus,
.btn-outline-dark.active.focus,
.open > .btn-outline-dark.dropdown-toggle:hover,
.open > .btn-outline-dark.dropdown-toggle:focus,
.open > .btn-outline-dark.dropdown-toggle.focus {
	color: white;
	background-color: black;
	border-color: black;
}

.btn-outline-dark.active {
	background-color: black;
	border-color: black;
}

.btn-outline-dark.disabled:focus,
.btn-outline-dark.disabled.focus,
.btn-outline-dark:disabled:focus,
.btn-outline-dark:disabled.focus {
	border-color: #2c4d60;
}

.btn-outline-dark.disabled:hover,
.btn-outline-dark:disabled:hover {
	border-color: #2c4d60;
}

.btn-outline-white {
	color: white;
	background-image: none;
	background-color: transparent;
	border-color: white;
}

.btn-outline-white.btn-icon span {
	border-color: white;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out;
}

.btn-outline-white.btn-icon:hover span,
.btn-outline-white.btn-icon:focus span,
.btn-outline-white.btn-icon:active span,
.btn-outline-white.btn-icon:active:focus span {
	background-color: rgba(0, 0, 0, 0.1);
	border-color: transparent;
}

.btn-outline-white:hover {
	color: white;
	background-color: white;
	border-color: white;
}

.btn-outline-white:focus,
.btn-outline-white.focus {
	color: white;
	background-color: white;
	border-color: white;
}

.btn-outline-white:active,
.btn-outline-white.active,
.open > .btn-outline-white.dropdown-toggle {
	color: white;
	background-color: white;
	border-color: white;
}

.btn-outline-white:active:hover,
.btn-outline-white:active:focus,
.btn-outline-white:active.focus,
.btn-outline-white.active:hover,
.btn-outline-white.active:focus,
.btn-outline-white.active.focus,
.open > .btn-outline-white.dropdown-toggle:hover,
.open > .btn-outline-white.dropdown-toggle:focus,
.open > .btn-outline-white.dropdown-toggle.focus {
	color: white;
	background-color: #d4d4d4;
	border-color: #bfbfbf;
}

.btn-outline-white.active {
	background-color: #d4d4d4;
	border-color: #bfbfbf;
}

.btn-outline-white.disabled:focus,
.btn-outline-white.disabled.focus,
.btn-outline-white:disabled:focus,
.btn-outline-white:disabled.focus {
	border-color: white;
}

.btn-outline-white.disabled:hover,
.btn-outline-white:disabled:hover {
	border-color: white;
}

.btn-outline-white:hover,
.btn-outline-white:active,
.btn-outline-white:focus,
.btn-outline-white:active:focus {
	color: #0c151a;
}

.btn-icon {
	padding-left: 3.6rem;
	position: relative;
}

.btn-icon.btn-icon-right {
	padding-left: 2.5rem;
	padding-right: 3.6rem;
}

.btn-icon span {
	width: 2.6rem;
	font-size: 1.3rem;
}

.btn-icon span {
	left: 0;
	top: 0;
	height: 100%;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.1);
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.btn-icon.btn-icon-left span {
	left: 0;
}

.btn-icon.btn-icon-right span {
	right: 0;
	left: auto;
}

.btn-icon.btn-capsule.btn-icon-left span {
	border-radius: 50px 0 0 50px;
}

.btn-icon.btn-capsule.btn-icon-right span {
	border-radius: 0 50px 50px 0;
}

.btn-icon.btn-xs {
	padding-left: 2.32rem;
}

.btn-icon.btn-xs.btn-icon-right {
	padding-left: 0.8rem;
	padding-right: 2.32rem;
}

.btn-icon.btn-xs span {
	width: 2rem;
	font-size: 1rem;
}

.btn-icon.btn-sm {
	padding-left: 2.98rem;
}

.btn-icon.btn-sm.btn-icon-right {
	padding-left: 1.2rem;
	padding-right: 2.98rem;
}

.btn-icon.btn-sm span {
	width: 2.5rem;
	font-size: 1.25rem;
}

.btn-icon.btn-lg {
	padding-left: 6rem;
}

.btn-icon.btn-lg.btn-icon-right {
	padding-left: 5rem;
	padding-right: 6rem;
}

.btn-icon.btn-lg span {
	width: 4rem;
	font-size: 2rem;
}

.btn-icon[class*='btn-outline-'] span {
	border-right-width: 1px;
	border-right-style: solid;
}

.btn-icon[class*='btn-outline-'].btn-icon-right span {
	border-left-width: 1px;
	border-left-style: solid;
	border-right: none;
}

.btn-white {
	color: #0c151a;
	background-color: white;
	border-color: white;
}

.btn-white.active,
.btn-white:hover,
.btn-white:active,
.btn-white:focus,
.btn-white:active:focus {
	color: #0c151a;
	background-color: #e6e6e6;
	border-color: #e0e0e0;
}

.btn-white.disabled,
.btn-white:disabled {
	background-color: white;
	border-color: white;
}

.btn-white:active,
.btn-white.active,
.show > .btn-white.dropdown-toggle {
	color: #0c151a;
	background-color: #e6e6e6;
	background-image: none;
	border-color: #e0e0e0;
	z-index: 99;
}

.btn-dark {
	color: white;
	background-color: #404040;
	border-color: #404040;
}

.btn-dark.active,
.btn-dark:hover,
.btn-dark:active,
.btn-dark:focus,
.btn-dark:active:focus {
	color: white;
	background-color: black;
	border-color: black;
}

.btn-dark.disabled,
.btn-dark:disabled {
	background-color: #0c151a;
	border-color: #040709;
}

.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
	color: white;
	background-color: black;
	background-image: none;
	border-color: black;
	z-index: 99;
}


@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@-webkit-keyframes fadeOutRight {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
	}
}

@keyframes fadeOutRight {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
	}
}

.form-control {
	font-size: 0.875rem;
	line-height: 1.5;
	border: none;
	border-bottom: 1px solid #ddd;
	border-radius: 0;
	transition: all 0.2s ease-in-out;
	height: auto;
}

.form-control:focus {
	background-color: #fff !important;
	border-color: #fff;
	box-shadow: none;
}

.form-control.input-xs {
	padding: 0.2rem;
	height: auto;
}

.form-control.input-xs + .form-control-feedback {
	bottom: 0.2rem;
}

.form-control.input-sm {
	padding: 0.4rem;
	height: auto;
}

.form-control.input-sm + .form-control-feedback {
	bottom: 0.4rem;
}

.form-control.input-lg {
	padding: .9rem;
	height: auto;
	font-size:.9rem;
}

.form-control.input-lg + .form-control-feedback {
	bottom: 1.2rem;
	font-size: 1rem;
}

.form-control.active,
.form-control:active {
	box-shadow: none;
}

label,
legend {
	font-size: 0.825rem;
	font-weight: 600;
}

input[type='file'] {
	display: none;
}

.inputfile + label svg {
	fill: currentColor;
	vertical-align: middle;
	margin-right: 8px;
}

.ios-toggle,
.ios-toggle:active {
	height: 0;
	width: 0;
	opacity: 0;
}

.ios-toggle:checked + .checkbox-label {
	box-shadow: inset 0 0 0 20px #4CD964, 0 0 0 1px #4CD964;
}

.ios-toggle:checked + .checkbox-label:before {
	left: calc(100% - 32px);
	box-shadow: 0 0 0 1px transparent, -3px 0px 3px rgba(0, 0, 0, 0.1);
}

.ios-toggle:checked + .checkbox-label:after {
	content: attr(data-on);
	left: 70px;
	width: 32px;
}

.checkbox-label {
	display: block;
	position: relative;
	padding: 10px;
	margin-bottom: 15px;
	font-size: 12px;
	line-height: 16px;
	width: 70px;
	height: 32px;
	border-radius: 50px;
	background-color: #fafafa;
	cursor: pointer;
	box-shadow: inset 0 0 0 0px #4CD964, 0 0 0 1px #e1e1e1;
	transition: box-shadow 0.2s ease-in-out;
}

.checkbox-label:before {
	content: '';
	display: block;
	position: absolute;
	height: 32px;
	width: 32px;
	top: 0px;
	left: 0px;
	right: auto;
	background-color: white;
	border-radius: 50px;
	box-shadow: 3px 0 3px rgba(0, 0, 0, 0.1), 0 0 0 1px #e1e1e1;
	transition: all 0.2s ease-in-out;
}

.checkbox-label:after {
	content: attr(data-off);
	display: block;
	position: absolute;
	top: 0;
	left: -300px;
	padding: 10px;
	height: 100%;
	width: 300px;
	text-align: right;
	color: #2b2b2b;
	white-space: nowrap;
}

.checkbox-label.radius-square {
	border-radius: 3px;
}

.checkbox-label.radius-square:before {
	border-radius: 3px;
}

.color-black {
	color: black !important;
}

.background-black {
	background-color: black !important;
}

.border-color-black {
	border-color: black !important;
}

.color-1 {
	color: #0c151a !important;
}

.background-1 {
	background-color: #0c151a !important;
}

.border-color-1 {
	border-color: #0c151a !important;
}

.color-2 {
	color: #2b2b2b !important;
}

.background-2 {
	background-color: #2b2b2b !important;
}

.border-color-2 {
	border-color: #2b2b2b !important;
}

.color-3 {
	color: #404040 !important;
}

.background-3 {
	background-color: #404040 !important;
}

.border-color-3 {
	border-color: #404040 !important;
}

.color-4 {
	color: #555555 !important;
}

.background-4 {
	background-color: #555555 !important;
}

.border-color-4 {
	border-color: #555555 !important;
}

.color-5 {
	color: #6a6a6a !important;
}

.background-5 {
	background-color: #6a6a6a !important;
}

.border-color-5 {
	border-color: #6a6a6a !important;
}

.color-6 {
	color: #7F7F7F !important;
}

.background-6 {
	background-color: #7F7F7F !important;
}

.border-color-6 {
	border-color: #7F7F7F !important;
}

.color-7 {
	color: #949494 !important;
}

.background-7 {
	background-color: #949494 !important;
}

.border-color-7 {
	border-color: #949494 !important;
}

.color-8 {
	color: #bebebe !important;
}

.background-8 {
	background-color: #bebebe !important;
}

.border-color-8 {
	border-color: #bebebe !important;
}

.color-9 {
	color: #e1e1e1 !important;
}

.background-9 {
	background-color: #e1e1e1 !important;
}

.border-color-9 {
	border-color: #e1e1e1 !important;
}

.color-10 {
	color: #f2f2f2 !important;
}

.background-10 {
	background-color: #f2f2f2 !important;
}

.border-color-10 {
	border-color: #f2f2f2 !important;
}

.color-11 {
	color: #fafafa !important;
}

.background-11 {
	background-color: #fafafa !important;
}

.border-color-11 {
	border-color: #fafafa !important;
}

.color-white {
	color: white !important;
}

.background-white {
	background-color: white !important;
}

.border-color-white {
	border-color: white !important;
}

.color-primary {
	color: #065fd4 !important;
}

.background-primary {
	background-color: #4840db !important;
}

.border-color-primary {
	border-color: #4840db !important;
}

.color-info {
	color: #669514 !important;
} 

.background-info {
	background-color: #e8f3ff !important;
}

.border-color-info {
	border-color: #e8f3ff !important;
}
 
.color-success {
	color: #1fa925 !important;
}

.background-success {
	background-color: #6ae791 !important;
}

.border-color-success {
	border-color: #6ae791 !important;
}

.color-warning {
	color: #ffd15d !important;
}

.background-warning {
	background-color: #FF9500 !important;
}

.border-color-warning {
	border-color: #FF9500 !important;
}

.color-danger {
	color: #ff186c !important;
}

.background-danger {
	background-color: #FF3B30 !important;
}

.border-color-danger {
	border-color: #FF3B30 !important;
}

.color-oxford {
	color: #002147 !important;
}

.background-oxford {
	background-color: #002147 !important;
}

.border-color-oxford {
	border-color: #002147 !important;
}

.color-facebook {
	color: #3b5998 !important;
}

.background-facebook {
	background-color: #3b5998 !important;
}

.border-color-facebook {
	border-color: #3b5998 !important;
}

.color-twitter {
	color: #1da1f2 !important;
}

.background-twitter {
	background-color: #1da1f2 !important;
}

.border-color-twitter {
	border-color: #1da1f2 !important;
}

.color-google-plus {
	color: #db4437 !important;
}

.background-google-plus {
	background-color: #db4437 !important;
}

.border-color-google-plus {
	border-color: #db4437 !important;
}

.color-secondary {
	color: #ff451d !important;
}

.background-secondary {
	background-color: #ff451d !important;
}

.border-color-secondary {
	border-color: #ff451d !important;
}

.color-secondary2 {
	color: #4347ff !important;
}

.background-secondary2 {
	background-color: #4347ff !important;
}

.border-color-secondary2 {
	border-color: #4347ff !important;
}

.color-github {
	color: #24292e !important;
}

.background-github {
	background-color: #24292e !important;
}

.border-color-github {
	border-color: #24292e !important;
}
.badge{
	padding:.25em .6em;
	margin-bottom:0
}
.badge-white {
	background-color: #ffffff;
}

.badge-primary {
	background-color: #007AFF;
}

.badge-info {
	background-color: #2eb7f5;
}

.badge-success {
	background-color: #e8f3ff;
	color: #557aea;
}

.badge-warning {
	background-color: #FF9500;
}

.badge-gray {
	background-color: #f2f2f2;
	color: #888;
}

.badge-danger {
	background-color: #000;
	color: #fff;
}

.radius-primary {
	border-radius: 5px !important;
}

.radius-secondary {
	border-radius: 10px !important;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
}

.radius-capsule {
	border-radius: 50px !important;
}

.radius-square {
	border-radius: 0 !important;
}

.radius-round {
	border-radius: 100% !important;
}
.opacity-10{
	opacity: 0.1;
}
.opacity-25{
	opacity: 0.25;
}
.opacity-50{
	opacity: 0.5;
}
.opacity-75 {
	opacity: 0.75;
}

.m-0 {
	margin: 0 !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.mx-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.m-1 {
	margin: 0.25rem !important;
}

.mt-1 {
	margin-top: 0.25rem !important;
}

.mr-1 {
	margin-right: 0.25rem !important;
}

.mb-1 {
	margin-bottom: 0.25rem !important;
}

.ml-1 {
	margin-left: 0.25rem !important;
}

.mx-1 {
	margin-left: 0.25rem !important;
	margin-right: 0.25rem !important;
}

.my-1 {
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}

.m-2 {
	margin: 0.5rem !important;
}

.mt-2 {
	margin-top: 0.5rem !important;
}

.mr-2 {
	margin-right: 0.5rem !important;
}

.mb-2 {
	margin-bottom: 0.5rem !important;
}

.ml-2 {
	margin-left: 0.5rem !important;
}

.mx-2 {
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
}

.my-2 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.m-3 {
	margin: 1rem !important;
}

.mt-3 {
	margin-top: 1rem !important;
}

.mr-3 {
	margin-right: 1rem !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.ml-3 {
	margin-left: 1rem !important;
}

.mx-3 {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

.my-3 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

.m-4 {
	margin: 1.8rem !important;
}

.mt-4 {
	margin-top: 1.8rem !important;
}

.mr-4 {
	margin-right: 1.8rem !important;
}

.mb-4 {
	margin-bottom: 1.8rem !important;
}

.ml-4 {
	margin-left: 1.8rem !important;
}

.mx-4 {
	margin-left: 1.8rem !important;
	margin-right: 1.8rem !important;
}

.my-4 {
	margin-top: 1.8rem !important;
	margin-bottom: 1.8rem !important;
}

.m-5 {
	margin: 3rem !important;
}

.mt-5 {
	margin-top: 3rem !important;
}

.mr-5 {
	margin-right: 3rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.ml-5 {
	margin-left: 3rem !important;
}

.mx-5 {
	margin-left: 3rem !important;
	margin-right: 3rem !important;
}

.my-5 {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}

.m-6 {
	margin: 4rem !important;
}

.mt-6 {
	margin-top: 4rem !important;
}

.mr-6 {
	margin-right: 4rem !important;
}

.mb-6 {
	margin-bottom: 4rem !important;
}

.ml-6 {
	margin-left: 4rem !important;
}

.mx-6 {
	margin-left: 4rem !important;
	margin-right: 4rem !important;
}

.my-6 {
	margin-top: 4rem !important;
	margin-bottom: 4rem !important;
}

.m-7 {
	margin: 5rem !important;
}

.mt-7 {
	margin-top: 5rem !important;
}

.mr-7 {
	margin-right: 5rem !important;
}

.mb-7 {
	margin-bottom: 5rem !important;
}

.ml-7 {
	margin-left: 5rem !important;
}

.mx-7 {
	margin-left: 5rem !important;
	margin-right: 5rem !important;
}

.my-7 {
	margin-top: 5rem !important;
	margin-bottom: 5rem !important;
}

.m-8 {
	margin: 7.5rem !important;
}

.mt-8 {
	margin-top: 7.5rem !important;
}

.mr-8 {
	margin-right: 7.5rem !important;
}

.mb-8 {
	margin-bottom: 7.5rem !important;
}

.ml-8 {
	margin-left: 7.5rem !important;
}

.mx-8 {
	margin-left: 7.5rem !important;
	margin-right: 7.5rem !important;
}

.my-8 {
	margin-top: 7.5rem !important;
	margin-bottom: 7.5rem !important;
}

.m-9 {
	margin: 10rem !important;
}

.mt-9 {
	margin-top: 10rem !important;
}

.mr-9 {
	margin-right: 10rem !important;
}

.mb-9 {
	margin-bottom: 10rem !important;
}

.ml-9 {
	margin-left: 10rem !important;
}

.mx-9 {
	margin-left: 10rem !important;
	margin-right: 10rem !important;
}

.my-9 {
	margin-top: 10rem !important;
	margin-bottom: 10rem !important;
}

.m-10 {
	margin: 12.5rem !important;
}

.mt-10 {
	margin-top: 12.5rem !important;
}

.mr-10 {
	margin-right: 12.5rem !important;
}

.mb-10 {
	margin-bottom: 12.5rem !important;
}

.ml-10 {
	margin-left: 12.5rem !important;
}

.mx-10 {
	margin-left: 12.5rem !important;
	margin-right: 12.5rem !important;
}

.my-10 {
	margin-top: 12.5rem !important;
	margin-bottom: 12.5rem !important;
}

.m-11 {
	margin: 15rem !important;
}

.mt-11 {
	margin-top: 15rem !important;
}

.mr-11 {
	margin-right: 15rem !important;
}

.mb-11 {
	margin-bottom: 15rem !important;
}

.ml-11 {
	margin-left: 15rem !important;
}

.mx-11 {
	margin-left: 15rem !important;
	margin-right: 15rem !important;
}

.my-11 {
	margin-top: 15rem !important;
	margin-bottom: 15rem !important;
}



.main{
  background:#F8FAFF;   /* 바깥 회색 배경 */
}
/* ===== Reset & Base ===== */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:#fff;color:#111;font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial}
  img{display:block;max-width:100%;height:auto}
  a{text-decoration:none;color:inherit}
  .container{padding:0 16px}

  /* ===== Top bar (샘플) ===== */
  .topbar{height:50px; display:flex; align-items:center; padding:0 12px; background:#fff; border-bottom:0px solid rgba(0,0,0,.06); position:sticky; top:0; z-index:5}
  .topbar .logo{display:flex; align-items:center; gap:8px; font-weight:700}
  .topbar .act{margin-left:auto; display:flex; gap:12px}
  .ic{width:22px;height:22px;border-radius:50%;background:#EFF2F7}

  /* ===== 온보딩 전용: 하단 고정 카드(이 페이지에서는 미사용) ===== */
  .onb-card{
    position:fixed; left:0; right:0;
    bottom:calc(env(safe-area-inset-bottom) + -13px);
    background:#fff; border-radius:24px; box-shadow:0 10px 30px rgba(16,24,40,.14);
    display:flex; flex-direction:column; padding:28px 30px 40px; z-index:10;
  }

  .pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:5px;background:#EEF4FF;color:#246BFF;font-weight:600}

  /* ===== 1) 메인 배너 ===== */
  .hero{padding:3px 12px 0}
  .hero-wrap{position:relative}
  .hero-track{
    display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; padding-bottom:6px;
  }
  .hero-track::-webkit-scrollbar{display:none}
  .hero-slide{flex:0 0 100%; scroll-snap-align:center; border-radius:16px; overflow:hidden;}
  .hero-slide img{width:100%; display:block}

  /* 라인형 페이지 버튼 */
  .hero-pager{position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; gap:6px; pointer-events:none}
  .hero-pager .line{width:22px; height:4px; border-radius:4px; background:rgba(255,255,255,.55); transition:.25s; box-shadow:0 1px 2px rgba(0,0,0,.15) inset}
  .hero-pager .line.active{background:#fff; width:34px}

  /* ===== 아이콘 카테고리 ===== */
  .cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:12px 12px 6px}
  .cat{background:#fff;border-radius:14px; padding:10px 6px; text-align:center; box-shadow:0 8px 24px rgba(37,45,72,.06)}
  .cat .ico{width:36px;height:36px;margin:0 auto 6px;border-radius:10px;background:#EFF2F7}
  .cat small{display:block;color:#667084}

  /* ===== 2,4) 가로 스크롤 리스트 ===== */
  .hscroll{padding:0 12px}
  .htrack{display:flex; gap:15px; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding:4px 2px 8px;}
  .htrack::-webkit-scrollbar{display:none}
  .item{flex:0 0 165px; scroll-snap-align:start}
  .item .thumb{border-radius:10px; overflow:hidden}
  .item .tit{margin:10px 10px 5px; color:#1D2433}
  .item .price{color:#FF2D2D; font-weight:700; margin: 0px 10px 10px;}

  .sec-hd{display:flex; align-items:center; justify-content:space-between; padding:14px 12px 8px}
  .sec-hd h3{margin:0; font-size:16px}
  .more{color:#98A2B3; font-weight:600}

  /* ===== 3) 수입대행 배너 ===== */
  .import-wrap{padding:10px 0 6px}
  .import-track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 12px 10px;}
  .import-track::-webkit-scrollbar{display:none}
  .import{flex:0 0 84%; scroll-snap-align:center; border-radius:10px; overflow:hidden; box-shadow: 0 2px 5px rgba(16, 24, 40, .14);}
  .import img{width:100%; display:block}

  /* ===== 5) 하단 고정 바 + 시트 ===== */
  .order-bar{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:9;
    background:#0B63FF; color:#fff; border-radius:18px; height:56px; display:flex; align-items:center; justify-content:center;
    gap:6px; box-shadow:0 10px 24px rgba(11,99,255,.28); cursor:pointer;
  }
  .order-bar .chev{margin-left:4px; width:10px; height:10px; border-right:2px solid #fff; border-top:2px solid #fff; transform:rotate(135deg);}

  .sheet-backdrop{position:fixed; inset:0; background:rgba(12,14,22,.45); opacity:0; pointer-events:none; transition:opacity .25s; z-index:18;}
  body.sheet-open .sheet-backdrop{opacity:1; pointer-events:auto}

  .sheet{position:fixed; left:0; right:0; bottom:0; background:#fff; border-radius:16px 16px 0 0; max-width:800px;   transform:translateX(-50%); transform:translateY(100%); transition:transform .28s; z-index:19; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 -10px 30px rgba(18,29,52,.2)}
  body.sheet-open .sheet{transform:translateY(0)}
  .sheet .grab{height:22px; display:flex; align-items:center; justify-content:center}
  .sheet .grab:before{content:""; width:44px; height:4px; border-radius:4px; background:#E4E7EC}
  .sheet .head{display:flex; align-items:center; justify-content:space-between; padding:0 16px 8px}
  .sheet .head h4{margin:0; font-size:16px}
  .sheet .close{border:0; background:#EFF2F7; border-radius:8px; height:28px; padding:0 10px; color:#667084; font-weight:600}
  .sheet .body{padding:8px 10px 10px; overflow:auto}
  .sheet .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .sheet .item{flex:1}
  .sheet .cta{margin:40px 16px 22px}
  .btn-primary{display:block; width:100%; background:#0B63FF; color:#fff; border:0; border-radius:10px; padding:14px 16px; font-weight:700}

  /* 드래그 스크롤(마우스) */
  .drag-wrap{cursor:grab}
  .dragging{cursor:grabbing; user-select:none}

  /* ★ 메인 페이지 전용 카드 핫픽스: 외부 .card 고정 해제 */
  .main .card{position:static; bottom:auto;}
  
  /* ===== 하단 2줄 바 ===== */
.bottom-bar{
  position:fixed;
  right:0;
  bottom:0;
  z-index:80;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:800px;
  box-sizing:border-box;
  pointer-events:auto;
}

/* 가운데 정렬용 래핑 */
.bottom-bar > *{
  max-width:480px;
  margin:0 auto;
}

/* 윗줄 : 진행중 주문 */
.order-toggle{
  width:100%;
  border:none;
  outline:none;
  background:#376AED;          /* 파란색 배경 */
  color:#fff;
  border-radius:18px 18px 0 0;  /* 위쪽만 라운드 */
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.order-toggle .chev{
  display:inline-block;
  width:8px;
  height:8px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(135deg);      /* 기본은 위 화살표 느낌 */
  margin-top:1px;
}

/* 시트가 열린 상태에서 화살표 방향 바꾸고 싶으면
   body.sheet-open .order-toggle .chev { transform:rotate(-45deg); } 같은 식으로 써도 됨 */

/* 아랫줄 : 메뉴바 */
.bottom-menu{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  background:#ffffff;
  border-radius:0 0 0px 0px;
  padding:8px 10px 10px;
  box-shadow:0 -4px 18px rgba(0,0,0,.15);
  position:relative;
}

/* 기본 메뉴 아이템 */
.menu-item{
  flex:1;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  font-size:11px;
  color:#333;
}

.menu-item i{
  font-size:18px;
  margin-bottom:2px;
}

/* 중앙 동그란 검색 버튼 */
.menu-search{
  flex:0 0 auto;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#376AED;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  margin:0 10px;
  margin-top:-28px;  /* 위로 살짝 튀어나오게 */
}

.menu-search i{
  font-size:22px;
  margin:0;
}

/* 전체 배경은 살짝 회색, 안쪽 박스는 흰색 */
body.main{
  background:#F8FAFF;
}

/* 앱 전체를 감싸는 래퍼 */
.app-wrap{
  width:100%;
  max-width:900px;
  margin:0 auto;
  min-height:100vh;
  background:#ffffff;
  position:relative;
}


/* 버튼 // 중복확인 */
.field-row{
  display:flex;
  gap:6px;
  align-items:center;
}
.field-row .input{
  flex:1 1 auto;
}
.btn-mini{
  flex:0 0 auto;
  padding:6px 10px;
  font-size:12px;
  border-radius:4px;
  border:0;
  background:#337ab7;
  color:#fff;
}
#loginToast {
    display:none;
    position:fixed;
    top:40%;
    left:50%;
    transform:translate(-50%, -50%);
    width:80%;
    max-width:400px;
    background:rgba(0,0,0,0.75);
    color:#fff;
    padding:16px 24px;
    border-radius:10px;
    font-size:15px;
    z-index:9999;
    text-align:center;
    opacity:0;
    transition: opacity 0.5s ease; /* fade 시간 */
}

#loginToast.show {
    opacity:1;   /* fade-in */
}

#loginToast.hide {
    opacity:0;   /* fade-out */
}