@charset "UTF-8";
/*-------------------------------------------------------------------
	파일정의 : Layoyt
	작성날짜 : 2020-03-30 장병주
	참고사항 : 이 파일은 설정값만 정의한다.
	분류순서 : 기본정책 > 유틸리티 > 사용자정의(컬러, 폰트, 보더, 간격 등)
	속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/


@import "reset.css";
@import "ui.css";


/*-------------------------------------------------------------------
    ## common
-------------------------------------------------------------------*/
html {font-size: calc(.6px + 3vw); letter-spacing: -.03em}
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, input, button, a, div, textarea {font-family: 'Spoqa Han Sans', 'Malgun Gothic', 'Sans-serif'; color: #1f1f1f;}
html, body {position: relative; overflow: hidden; height: 100%;}
.contents {position: absolute; top: 0; left: 0; overflow-x: hidden; background: #fff; overflow-y: auto; width: 100%; height: 100%; padding-top: 52px; box-sizing: border-box}
.contents.has_fix_bottom {padding-bottom: 30px;}
.contents iframe {position: absolute; top: 60px; left: 0; width: 100%; height: calc(100% - 60px);}
.set_inner{position: relative; z-index: 1; padding: 0 7.5%; box-sizing: border-box}
.set_inner10{position: relative; z-index: 1; padding: 0 10px; box-sizing: border-box}
.set_inner20{position: relative; z-index: 1; padding: 0 6.5%; box-sizing: border-box}
.set_inner45{position: relative; z-index: 1; padding: 0 14%; box-sizing: border-box}

/*-------------------------------------------------------------------
    ## header
-------------------------------------------------------------------*/

.header{position: fixed; top:0; left: 0; right: 0; height: 52px; z-index: 200; padding: 12px 0; text-align: center; background: #fff; box-sizing: border-box;}
.contents.bg_green{position: relative; padding-top: 0; background: transparent;}
.contents.bg_green:before{position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #336755; content: ''; z-index: 0;}

.ttl_area{margin: 0 0 25px; padding-top: 5px;}
.ttl_area h2{font-size: 2.3rem; line-height: 1.1; color: #1f1f1f; letter-spacing: -.02em}
.ttl_area h3{font-size: 1.5rem; line-height: 1.1; color: #1f1f1f; letter-spacing: -.02em}
.ttl_area h4 {font-size: 1.3rem; font-weight: 700; color: #1f1f1f;}
.ttl_area h5 {font-size: 1rem; font-weight: 700; color: #1f1f1f;}

.logo_area{text-align: center; padding: 17px 0;}
.logo_area .logo{display: inline-block; vertical-align: top;}
.logo_area a{display: block; width: 104px; height: 40px; background: url(../img/logo.png)center no-repeat; background-size: contain;}

/* main layout */
.header.main {text-align: center; padding: 12px 0; background-color: #fafafa;}
.contents.main{min-height: 100%; background: #fafafa;}
.contents.main:before{position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #fafafa; content: ''; z-index: -1;}
.header .select.input_area{position: relative; display: inline-block; padding: 0; margin: 0; z-index: 10;}
.header .select .input_box{position: relative; border-bottom: none; padding: 0;}
.header .select .input_box:before{position: absolute; right: 0; top: 9px; width: 5px; height: 5px; border: none; border-right: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; transform: rotate(45deg); margin: 0;}
.header .select .input_box:after{display: none;}
.header .select .input_box select{font-size: 1.1rem; padding: 0 10px 0 5px;}
.header .btn_area.home,
.header .btn_area.setting {display: none; position: absolute; right: calc(7% + 27px); top: 14.5px; transition: ease .2s;}
.menu {position: absolute; right: 7%; top: 15px; z-index: 10;}
.menu .menu_btn {display: block; position: relative; width: 20px; height: 20px;}
.menu .menu_btn .bar{position: absolute; width: 20px; height: 1px; top: 50%; left: 0; background: #1f1f1f; margin-top: -.5px; transition: ease .2s;}
.menu .menu_btn .bar:before, .menu .menu_btn .bar:after{position: absolute; width: 20px; height: 1px; left: 50%; background: #1f1f1f; content: ''; margin-left: -10px; transition: ease .2s;}
.menu .menu_btn .bar:before{top: 7px;}
.menu .menu_btn .bar:after{top: -7px;}

.header.is_active:before {display: block; content: ''; position: absolute; left: 50%; top: 0; z-index: 10; width: 100%; height: 100%; margin-left: -12px; background: #fff;}
.header.is_active .btn_area.home,
.header.login .btn_area.home {display: block; z-index: 20;}
.header.is_active .btn_area.setting {display: none !important;}
.menu .menu_btn.is_active .bar:before, .menu .menu_btn.is_active .bar:after {top: 0!important; width: 24px; margin-left: -12px;}
.menu .menu_btn.is_active .bar:before{transform: rotate(45deg); }
.menu .menu_btn.is_active .bar:after{transform: rotate(-45deg);}
.menu .menu_btn.is_active .bar{background: transparent}

.header.popup .btn_area,
.popup .header .btn_area{position: absolute; right: 25px; top: 14px;}
.header .btn_close{position: relative; display: block; width: 23px; height: 23px; }
.header .btn_close:before, .header .btn_close:after{position: absolute; left: 0; top: 50%; right: 0; height: 1px; background: #000; content: '';}
.header .btn_close:before{transform: rotate(45deg);}
.header .btn_close:after{transform: rotate(-45deg);}

.quick_menu{position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 0;}
.quick_menu .qnb_group .slick-list {padding: 25px 0 20px !important;} 
.quick_menu .qnb_group .qnb_item {transition: all ease .4s; -webkit-transition: all ease .4s;}
.quick_menu .qnb_group .qnb_item a {display: block; position: relative; overflow: hidden; height: 0; padding-bottom: 100%; background: #fff; border-radius: 8vw; text-align: center; box-shadow: -4px 4px 8px rgba(0,0,0,.1); box-sizing: border-box;}
.quick_menu .qnb_group .qnb_item a .ic {position: absolute; top: 50%; left: 50%; margin-left: -15px; margin-top: -30px;}
.quick_menu .qnb_group .qnb_item p{position: absolute; top: 50%; left: 0; width: 100%; margin-top: 5px; font-size: 1.3rem; color: #1f1f1f;}
.quick_menu .qnb_group .qnb_item.swiper-slide-thumb-active {transform: translateY(-20px); }
.quick_menu .qnb_group .qnb_item.swiper-slide-thumb-active a{background: #336755;}
.quick_menu .qnb_group .qnb_item.swiper-slide-thumb-active p{color: #ffffff;}


.menu_bar{display: none; position: fixed; overflow: hidden; overflow-y: auto; left: 0; right: 0; top: 0; bottom: 0; background: #fafafa; z-index: 9;}
.menu_bar>.set_inner {padding-top: 54px; background: #fff;}
.header.is_active .menu_bar {display: block;}
.header.is_active .menu_bar:before {display: block; content: ''; position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 50px; background: #fff;}
.menu_bar .user_info{padding-bottom: 20px; border-bottom: 1px solid #1f1f1f;}
.menu_bar .user_info .img_area{float: left; width: 50px; height: 50px; background: url(../img/ic_user.png)center no-repeat; background-size: contain!important;}
.menu_bar .user_info .info_area{float: left; width: 100%; margin-left: -50px; padding-left: 60px; box-sizing: border-box; text-align: left;}
.menu_bar .info_area .name{font-size: 1.8rem; font-weight: 700; line-height: 1;}
.menu_bar .info_area .coupon_btn{display: inline-block; line-height: 21px; font-size: 1.2rem; padding: 1px 12px; border-radius: 15px; border: 1px solid #1f1f1f;}
.menu_bar .info_area .coupon_btn strong{font-weight: 700;}
.menu_bar .info_area .coupon_btn strong span{font-size: 1.4rem;}
.menu_bar .info_area .name+.coupon_btn{margin-top: 10px;}
.menu_bar .info_area .name+.coupon_btn .ic {margin-top: -3px;}
.menu_area{text-align: left;}
.menu_area>ul{padding-top: 20px;}
.menu_area>ul>li {border-bottom: 1px solid #d8d8d8;}
.menu_area>ul>li:last-child{padding-bottom: 20px; border-bottom: 0 none}
.menu_area ul li a{display: block; position: relative; padding: 13px 0 13px 30px; font-size: 1.3rem;}
.menu_area ul li a i{position: absolute; left: 0; top: calc(1.6vw + 11px);}
.menu_area .depth2{padding-bottom: 10px; }
/*.menu_area .depth2 li{margin-bottom: 10px;}*/
.menu_area .depth2 li:last-child{margin-bottom: 0;}
.menu_area .depth2 li a{font-weight: 100; padding: 10px 0 10px 30px;}
.menu_bar .footer{position: relative;}

/*-------------------------------------------------------------------
    ## footer
-------------------------------------------------------------------*/
.footer{position: absolute; bottom: 0; left: 0; right: 0;padding: 20px 0 30px; background: #fafafa; text-align: left;}
/*.footer:before {display: block; content: ''; position: fixed; width: 100%; left: 0; top: 60%; bottom: 0; z-index: -1; height: 200%; background: #fafafa;}*/
.footer.noFix {position: relative; bottom: auto;}
.footer p, .footer a, .footer h4 {font-size: .9rem; color: #acacac;}
.footer h4 {margin-bottom: 8px;}
.footer .copy{}
.footer .copy+.fnb{margin-top: 14px;}
.footer .fnb li {display: inline-block; margin-left: -4px; vertical-align: top;}
.footer .fnb li:first-child {margin-left: 0;}
.footer .fnb li:after{display: inline-block; width: 1px; height: 8px; background: #acacac; margin: 0 6px 0 4px; vertical-align: 4px; content: '';}
.footer .fnb li a{vertical-align: top; line-height: 1; font-weight: 700;}
.footer .fnb li:last-child:after{display: none;}

.footer .foot_info_wrap {padding: 0;}
.footer .foot_info_wrap .label_list {display: table; margin-bottom: 4px;}
.footer .foot_info_wrap .label_list:last-child {margin-bottom: 0;}
.footer .foot_info_wrap .label_list dt,
.footer .foot_info_wrap .label_list dd {display: table-cell; font-size: .9rem; line-height: 1.4; text-align: left;  color: #acacac;}
.footer .foot_info_wrap .label_list dt {}
.footer .foot_info_wrap .label_list dd {font-weight: 300; padding-left: 5px;}
.footer .foot_info_wrap .label_list dd + dt {position: relative; padding-left: 10px;}
.footer .foot_info_wrap .label_list dd + dt:before {display: block; content: ''; position: absolute; left: 5px; top: 50%; margin-top: -3px; width: 1px; height: 8px; background: #acacac;;}

/* etc footer */
#footer {background: #fafafa; padding: 20px 0;}
#footer h4 {font-size: 1.1rem;}
#footer .foot_info_wrap {padding: 10px 0;}
#footer .foot_info_wrap .label_list {display: table; width: 100%; margin-bottom: 4px;}
#footer .foot_info_wrap .label_list:last-child {margin-bottom: 0;}
#footer .foot_info_wrap .label_list dt,
#footer .foot_info_wrap .label_list dd {display: table-cell; font-size: .9rem; line-height: 1.4; color: #1f1f1f;}
#footer .foot_info_wrap .label_list dt {width: 120px; font-weight: 300;}
#footer .foot_info_wrap .label_list dd {}
#footer .copy {font-size: .9rem; line-height: 1.4; color: #1f1f1f;}

.login .footer {background: transparent;}
.login .footer p, 
.login .footer a, 
.login .footer h4,
.login .footer .foot_info_wrap .label_list dt, 
.login .footer .foot_info_wrap .label_list dd {color: #fff;}
.login .footer h4 {opacity: .6;}
.login .footer p, 
.login .footer a,
.login .footer .foot_info_wrap .label_list dt, 
.login .footer .foot_info_wrap .label_list dd,
.login .footer .fnb li:after {opacity: .4;}
.login .footer .fnb li:after {background: #fff;}
.loading_wrap {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background: rgba(0,0,0,.3);}
.loading_wrap:before {display: block; content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin-top: -40px; margin-left: -40px; background-image: url(../img/loadingbar.png); background-size: 60px 60px; animation: load 8s linear infinite}


.company_info .header p.ttl {font-size: 1.6rem; line-height: 52px;}


.sel_head {position: relative; border-bottom: 1px solid #d8d8d8; margin-bottom: 15px; margin-top: -15px;}
.sel_head .sel_btn{display: block; position: relative; z-index: 1; width: 100%; padding: 10px 0; background: #fff; font-size: 1.2rem; text-align: left;}
.sel_head .sel_btn:before {display: block; content: ''; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-right: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; transform: rotate(45deg); margin-top: -5px; margin-right: 1px;}
.sel_head .sel_btn span {margin-right: 10px;}
.sel_head .input_area.select{position: absolute; top: 0; left: 0; z-index: 2; width: 100%;}
.sel_head .input_area.select .input_box {border-bottom: none;}
.sel_head .input_area.select .input_box:before,
.sel_head .input_area.select .input_box:after {display: none;}
.sel_head .input_area.select select {text-indent: -9999px; background: transparent;}

.terms_area {padding: 15px 0 0; margin-bottom: 30px;}
.terms_area p, 
.terms_area li, 
.terms_area h2 {font-size: 1.2rem;}
.terms_area table {margin: 10px 0;}
.terms_area table th,
.terms_area table td {padding: 5px; border: 1px solid #aeaeae; font-size: 1rem;}
.terms_area table thead th {background: #fafafa; font-weight: 600;}
.terms_area table .nowrap {white-space: nowrap}

.terms_area p,
.terms_area li:last-child {margin-bottom: 15px;}
.terms_area ol ul,
.terms_area ol ol {margin-top: 10px;}
.terms_area h2 {margin-bottom: 10px;}
.terms_area {border-top: 1px solid #1f1f1f; border-bottom: 1px solid #d8d8d8;}
.terms_area .drop_wrap + .drop_wrap, 
.terms_area .drop_wrap .drop_cnt {border-top: 1px solid #d8d8d8;}
.terms_area .drop_btn {display: block !important; padding: 10px 0; }
.terms_area .drop_btn:before {right: 6px; top: calc(1vw + 1.7em);}
.terms_area .drop_btn.is_active:before {margin-top: -3px;}
.terms_area .drop_btn span {font-size: 1.2rem;}
.terms_area .drop_btn span.date {margin-left: 15px;}

@-webkit-keyframes load {
    from {transform: rotate(0)}
    to {transform: rotate(365deg)}
}
@-o-keyframes load {
    from {transform: rotate(0)}
    to {transform: rotate(365deg)}
}
@-moz-keyframes load {
    from {transform: rotate(0)}
    to {transform: rotate(365deg)}
}
@keyframes load {
    from {transform: rotate(0)}
    to {transform: rotate(365deg)}
}
@media screen and (max-width : 360px) {
    .menu_area ul li a i {top: calc(1.6vw + 10px);}
}

@media screen and (min-width : 420px) {
    html {font-size: 12px;}
    .menu_area ul li a i {top: 16px;}
}