html{height: 100%; overflow-x: hidden; width:100%; font-size: 2.6666666667vw;}
body{color:#222; margin-left:auto; margin-right:auto; background-color: #fff; font-size:16px; height: 100%; line-height: 1.4;}

/* 공통 */

.bg-g{background-color: #f9f9f9 !important;}
.bg-g02{background-color: #f8f8fb;}
.bg-g03{background-color: #eef0f3;}
.bg-g04{background-color: #f9f9f9 !important;}
.bg-g05{background-color: #999;}
.bg-g06{background-color: #f5f5f5 !important;}
.bg-g07{background-color: #f2f2f2 !important;}

.bg-k{background-color: #111 !important;}

.bg-w{background-color: #fff !important;}

.bg-o{background-color: #FF6C0F !important;}
.bg-y{background-color: #FFCC4A !important;}
.bg-r{background-color: #FD4D35 !important;}
.bg-r2{background-color: #E55D5D !important;}

.bg-p{background-color: #FF859E !important;}
.bg-p2{background-color: rgba(255,133,158,0.05) !important;}
.bg-b{background-color: #32C4DE !important;}
.bg-gr{background-color: #008C43 !important;}

.border{border: 1px solid #d9d9d9;}
.border-gr{border: 1px solid #008C43 !important;}


.fc-gr{color: #008C43;}
.fc-o{color: #FF6C0F !important;}
.fc-y{color: #FFCC4A;}
.fc-r{color: #FF5E5E;}
.fc-r2{color: #E55D5D;}

.fc-p{color: #FF859E !important;}
.fc-b{color: #32C4DE;}
.fc-y2{color: #FBFF4E;}
.fc-w{color: #fff;}
.fc-g{color: #999 !important;}
.fc-g2{color: #666 !important;}
.fc-g3{color: #888 !important;}
.fc-g4{color: #bbb !important;}
.fc-k{color: #111 !important;}

.f-small{font-size: 0.85em !important;}

.pt-120{padding-top: 120px;}
.pb-120{padding-bottom: 120px;}
.pt-100{padding-top: 100px;}
.pb-100{padding-bottom: 100px;}
.pt-80{padding-top: 80px;}
.pb-80{padding-bottom: 80px !important;}
.pt-32{padding-top: 32px !important;}
.pb-32{padding-bottom: 32px !important;}

.mt-100{margin-top: 100px;}
.mt-170{margin-top: 170px;}
.mt-85{margin-top: 85px;}
.mt-70{margin-top: 70px;}


.mt-base{margin-top:50px;}
.pt-base{padding-top: 20px;}
.pb-base{padding-bottom: 80px;}

.mt-base04{margin-top: 194px;}

.pb-base02{padding-bottom: 56px;}


.cursor{cursor: pointer;}

.bold{font-weight: 600 !important;}
* b{word-break: keep-all;}
* h2{word-break: keep-all;}

.dis-b{display: block;}
.dis-f{display: flex;}
.flex-c{flex-direction: column !important;}
.flex-wrap{flex-wrap: wrap;}
.justi-s-b{justify-content: space-between;}
.justi-f-s{justify-content: flex-start !important;}
.justi-f-e{justify-content: flex-end !important;}
.justi-c{justify-content: center !important;}
.align-i-c{align-items: center;}
.align-f-s{align-items: flex-start !important;}
.align-f-e{align-items: flex-end !important;}
.posi-r{position: relative;}
.text-a-l{text-align: left !important;}
.text-a-c{text-align: center !important;}
.flex-d-c{flex-direction: column;}
.gap32{gap: 32px;}
.gap24{gap: 24px;}
.gap16{gap: 16px;}
.gap12{gap: 12px;}
.gap8{gap: 8px;}
.gap4{gap: 4px;}
.flex1{flex: 1;}
.flex05{flex: 0.5;}
.flex2{flex: 2;}

.w-100{width: 100% !important;}
.w-20{width: 20%;}
.w-50{width: calc(50% - 0.4em);}

.border-t{border-top: 1px solid #d9d9d9 !important;}
.border-b{border-bottom: 1px solid #d9d9d9 !important;}
.border-l{border-left: 1px solid #d9d9d9 !important;}
.border-r{border-right: 1px solid #d9d9d9 !important;}
.border-none{border: 0 !important;}

.opa07{opacity: 0.7 !important;}
.opa04{opacity: 0.4 !important;}
.btn-type02{border: 1px solid #d9d9d9; background-color: #fff;}

.border-r-05{border-radius: 0.5em;}
.border-r-08{border-radius: 0.8em;}
.border-r-1{border-radius: 1em;}

.pointer{cursor: pointer;}

.dis-none{display: none;}

.pt{padding-top:1.5em;}
.pb{padding-bottom:1.5em;}

.mb-08{margin-bottom: 0.8em !important;}
.mt-04{margin-top: 0.4em !important;}


/* 스와이퍼 */

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
  }




/* header */
.header{position: fixed; width:100%; z-index: 99; top:0; z-index: 100; }
.header .main_nav{position: relative; height: 50px; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.header_flip{background-color:#f4f0ef; position: fixed; top:4em; width: 100%; padding:.5em 0; z-index: 11;}
.header_flip .bd{display: flex; align-items: center; justify-content: space-between;}

.header .prev{text-align: center; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 16px;}
/* .header .prev img{height:1.5em;} */
.header .sub_nav .CategoryList{height:40px; overflow-x: auto; max-width: 100%; overflow-y: hidden; white-space: nowrap; line-height: 36px;}

.header .sub_nav .CategoryList::-webkit-scrollbar {height:4px;}
.header .sub_nav .CategoryList::-webkit-scrollbar-thumb {background: #ded7c7;  border-radius: 4px;}
.header .sub_nav .CategoryList ul li.list_con{vertical-align: middle; display: inline-block; margin:0 12px; height:40px;}
.header .sub_nav .CategoryList ul li.list_con:last-child{margin-right:20px;}
.header .sub_nav .CategoryList ul li.list_con > a{color:#818181;}
.header .sub_nav .CategoryList ul li.list_con.active > a{font-weight:bold; color:#26ae5f; padding-bottom:4px; border-bottom:2px solid #26ae5f;}

.nav_inner{display:inline-block; position: absolute;}
/* right */
.nav_inner .count{background-color:#008C43; color:#fff; position: absolute; right: -0.8em; top: -0.6em; 
    width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; padding: 0.1em; font-size: 0.7em; 

}
.mypage_header .nav_inner.right{top: 1.2em;}
.daily_header .nav_inner.right{top: 1.7em;}
.nav_inner.right .count{right: 1px; top:1px; width: 18px; height: 18px; font-size:12px;}
.nav_inner.right{position: absolute; right:14px; z-index: 10; top:50%; transform: translateY(-50%);}
.nav_inner > span{float:left; position: relative; margin-right:0.5em; cursor: pointer; }

.nav_inner.right > span{display: flex; align-items: center; justify-content: center;}
.nav_inner.right > span:last-child{margin-right:0;}
.nav_inner span.img{width: 30px; height: 30px; padding: 4px; box-sizing: content-box;}


.nav_inner.right .kas{border-radius: 50%; display: inline-flex; overflow: hidden; margin-top: 1px;} 

/* center */
.nav_inner.center{left:50%; top:50%; transform: translate(-50%, -50%);}
.nav_inner.center select{font-weight: 600; text-align: center;  font-family: 'SUIT', sans-serif !important; font-size: 1.15em; padding-right: 1.2em; background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/MATHER_PICK/166172294350072.png)no-repeat right center /0.8em;} 
.nav_inner.center select option{display: flex; align-items: center; justify-content: center; padding: 1em;}
.nav_inner.center select:focus{outline: none;}
.nav_inner.center select option{padding: 1.2em; text-align: center;}
.nav_inner h1{font-weight: 600; font-size:18px;}
.nav_inner h1 i{font-weight: bold;}
.nav_inner h1.logo{background-image: url('/PROJECT/HKSG/page/app/img/logo.jpg'); width: 130px; height: 32px;
    background-repeat: no-repeat; background-position: center; background-size: cover;}
.nav_inner h1.logo > a{text-indent: -9999px; opacity: 0;}

.nav_inner.center h2{font-size:1.125em; font-weight: bold;}

/* left */
.nav_inner.left{z-index: 11; left:0;
    position: absolute; top:50%; transform:translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

/* 메인헤더 */
.mainheader .nav_inner.left{left: 16px;}


/* 23.05.22  고담*/
.menubar > img:nth-child(1){display: block; width: 22px; height: 15px; position: relative; top: 5px;}

.nav_inner.center .select {position: relative;}
.nav_inner.center .select p{font-weight: 700; font-size: 1.1em;}
.nav_inner.center .select img{width:0.8em;}
.nav_inner.center .select ul{display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 2em; width: 110%; background-color: #fff; padding: 0.7em; box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}
.nav_inner.center .select ul li + li{margin-top: 0.5em;}


.chk_box {display: block; position: relative;cursor: pointer; font-size: 16px; font-weight: 500; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* 기본 체크박스 숨기기 */
.chk_box input[type="checkbox"] { display: none; }

/* 선택되지 않은 체크박스 스타일 꾸미기 */
.on03 { width: 20px; height: 20px; background: transparent; border-radius: 50%;  }

/* 선택된 체크박스 스타일 꾸미기 */
.chk_box input[type="checkbox"]:checked ~ img{}
.on03:after { content: ""; position: absolute;   }
.chk_box input[type="checkbox"]:checked + .on03:after { display: block; }
.on03:after { width: 7px; height: 10px; border-radius: 1px;  border: solid #333; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; left: 6px; top: 3px; }
.chk_box input[type="checkbox"]:checked + .on03::after{border-color: #008C43; }



.chk_box.type01 .on03:after{ width: 8px; height: 12px;}
.chk_box.type02 .on03:after{border-color:#bbb; width: 8px; height: 12px;}


.chk_box.type03 .on03{background-color: #ddd; border-radius: 4px;  }
.chk_box.type03 .on03::after{border-color: #fff; left: 6px;}
.chk_box.type03 input[type="checkbox"]:checked + .on03{background-color: #008C43;}
.chk_box.type03 input[type="checkbox"]:checked + .on03::after{border-color: #fff;}

/* 공통2 */
div, span, p, b, h2, h1{word-break: keep-all;}


/* 하단 픽스 네비 */
.nav_btm {position: fixed; z-index: 105; bottom: 0; width: 100%; left: 0; 
   height: 60px;
    background-color: #ffff;
    padding: 0.6em 0;
    display: flex; align-items: center; justify-content: center;
    border-top: 1px solid #eee;
}
.nav_btm ul{display: flex; justify-content: center; align-items: center; width: 100%;}
.nav_btm ul li{flex: 1; width: 25%;}
.nav_btm ul li p{font-size: 14px; margin-top: 2px; font-weight: 500; color: #777; }
.nav_btm ul li .con_wrap{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.nav_btm ul li .con_wrap .icon_wrap{display: flex; align-items: center; justify-content: center;}
.nav_btm ul li img.select{display: none;}
.nav_btm ul li .con_wrap .icon_wrap img{width: 22px;}
.nav_btm ul li.center{flex: 1.2; margin-top: -2.8em; }
.nav_btm ul li.center .con_wrap{width: 5em; height: 5em;margin: 0 auto; background-color: #008C43; color: #fff; border-radius: 50%; padding: 0em;}

.nav_btm ul li.page_on .no_select{display: none;}
.nav_btm ul li.page_on .select{display: block;}
.nav_btm ul li.page_on p{color: #008C43; font-weight: 500;}



/* no_content */
.no_content{ margin-top: 20vh; display: flex; justify-content: center; align-items: center;}
.no_content p{font-size: 16px; color: #666; margin-top: 24px;}
.no_content em{width: 71px; height: 69px; margin: 0 auto;}
.no_content em img{width: 100%;}



/* 헤더 > 기간 내 검색 인풋 */

.mt-base02{margin-top: 156px;}
.mt-base03{margin-top: 106px;}

/* 기간선택 */
header.search_header{padding-bottom: 16px; background-color: #fff; border-bottom: 1px solid #eee;}
header.search_header .main_nav{border-bottom: none; height: 50px;}

.period_date{gap: 6px;}

header .searchdate{height: 40px; border: 1px solid #ddd; position: relative; border-radius: 8px; width: 100%; background-color: #fff;}


input[type=date]::-webkit-calendar-picker-indicator{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; }

/* input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
} */



header input[type=date]::-webkit-calendar-picker-indicator{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent; }
header input[type=date]{position: relative; background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/HKSG/168945146020892.png) no-repeat right 12px top 45% ; background-size: 19px; color: #222; height: 100%; width: 100%; padding: 7px 12px; font-size: 15px;}

header input[type=date]::before{content: attr(data-placeholder) !important; position: absolute; display: inline-block; transform: translateY(-50%); top: 50%; color: #81818B;}
header input[type=date]:focus::before, header input[type=date]:valid::before { display: none;}

/* 검색창 */
header .search{margin-top: 10px;height: 40px; position: relative;}
header .search input[type=text]{background-color: #f5f5f5; border-radius: 8px; padding: 6px 12px; width: 100%; height: 100%; font-size: 15px;}
header .search input[type=text]::placeholder{color: #888;}

header .search_btn{padding: 20px; position: absolute; top:50%; right: 0; transform: translateY(-50%); background: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/HKSG/168945311617099.png) no-repeat center center; background-size: 16px; } 


.agree_area.on{background-color: #DFF9EA !important; color: #008C43;}