@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : layout.css 
	Company : HanaTI
 	Author : Ryu,Keonmu & Yeon,DoHee 2020-05
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, color/font, align, backgroun etc
--------------------------------------------------------------------------------------------------------------------------------------------*/

/* SkipMenu */
#SkipMenu {
	overflow:hidden;
	position:absolute;
	left:0;
	top:0;
	z-index:500;
	width:100%;
	height:0px;
	background-color:#000000;
	box-shadow:inset 0px -2px 5px rgba(0,0,0,0.1);
}
#SkipMenu .row {min-width:320px; margin:0 auto;}
#SkipMenu .skipNav {float:left; margin-top:5px; padding:5px 0;}
#SkipMenu .skipNav ul {overflow:hidden;}
#SkipMenu .skipNav ul li {display:inline; float:left; margin-left:20px;}
#SkipMenu .skipNav ul li a {font-size:12px; font-weight:bold; line-height:normal; color:#ffffff;}
#SkipMenu .skipClose {float:right; margin:6px 20px 0 0; padding:3px; border-radius:12px; background-color:#ffffff;}
#SkipMenu a:active, visited, link, hover {font-size:12px; color:#ffffff !important;}

/*------------ Layout ------------*/
#app {width:100%; height:100%;}
#app > span {display:block; width:100%; height:100%;} /* temp */
#wrap {width:100%; height:100%; padding-top:2.8rem; font-size:0.7rem; overflow: auto;}
#wrap.bg_green {background-image:linear-gradient(164deg, #16a077 0%, rgba(22, 160, 119, 0) 93%), linear-gradient(164deg, rgba(0, 149, 145, 0) 8%, #007495 100%), linear-gradient(to bottom, #009591, #009591);}
#wrap.bg_gray {min-height:100%; height:auto !important;}
#header_wrap {position:fixed; left:0; top:0; z-index:5; width:100%; height:2.8rem; border-bottom:1px solid #eeeeee; background:#ffffff;}
#header_wrap .header {position:relative; min-height:2.75rem; padding:0.85rem 3rem 0; text-align:center;}
#header_wrap .header a.btn_back {position:absolute; display:block; left:0.9rem; top:0.6rem; z-index:1; width:1.6rem; height:1.6rem; text-indent:-9999px; background:url('../img/btn_back.png') left top no-repeat; background-size:100%;}
#header_wrap .header a.btn_back > span {position:absolute;width:1px;height:1px;overflow:hidden;}
#header_wrap .header a.btn_close {position:absolute; left:0.9rem; top:0.6rem; z-index:1; width:1.6rem; height:1.6rem; background:url('../img/btn_header_close.png') 50% 50% no-repeat; background-size:1.6rem auto;}
#header_wrap .header a.btn_close > span {position:absolute;width:1px;height:1px;overflow:hidden;}
#header_wrap .header strong.head_title {display:inline-block; max-width:100%; font-size:0.8rem; line-height:1.1rem; color:#000000; text-align:center; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#header_wrap .header strong.head_title span.sub_step {display:inline-block; padding:0 0.5rem; margin-right:0.2rem; border-radius:0.6rem; font-size:0.6rem; line-height:1.1rem; font-weight:500; color:#009591; vertical-align:text-bottom; background-color:rgba(0, 149, 145, 0.1); font-family:'Roboto';}
#header_wrap .header button.btn_lnb {position:absolute; right:1.2rem; top:0.6rem; z-index:1; width:1.6rem; height:1.6rem; text-indent:-9999px; background:url('../img/btn_lnb.png') left top no-repeat; background-size:100%;}
#header_wrap.bor_bnone {background:transparent;}
#contents {padding:2rem 0 1.2rem; margin:0 1.2rem;}
#contents.has_bottomBtn {position:relative; min-height:100%; padding-bottom:5.8rem;}
#contents.has_bottomBtn_double {position:relative; padding-bottom:8.8rem;}
#wrap.bg_green #header_wrap {border:none; background:transparent;}
#wrap.bg_green #header_wrap .header a.btn_close {background-image:url('../img/btn_header_close_white.png');}


/*----- 페이지 안쪽 레이어팝업 -----*/
/*
#layerPopup_inner {position:fixed; right:-100%; top:0; z-index:30; overflow:hidden; width:100%; height:100%; background:#ffffff;}
#layerPopup_inner .layerPopup_wrap {position:absolute; left:0; top:0; z-index:999; overflow:hidden; width:100%; height:100%; background:#ffffff;}
*/
.vm--modal {position:absolute;}
.lp_wrap {position:relative; overflow:hidden; height:100%; padding-top:2.8rem; font-size:0.7rem;}
.lp_wrap.bg_green {background-image:linear-gradient(164deg, #16a077 0%, rgba(22, 160, 119, 0) 93%), linear-gradient(164deg, rgba(0, 149, 145, 0) 8%, #007495 100%), linear-gradient(to bottom, #009591, #009591);}
.lp_header_wrap {position:absolute; left:0; top:0; z-index:5; width:100%; height:2.8rem; border-bottom:1px solid #eeeeee; background:#ffffff;}
.lp_header_wrap .header {position:relative; padding:0.85rem 0 0; text-align:center;}
.lp_header_wrap .header a.btn_back {position:absolute; left:0.9rem; top:0.6rem; z-index:1; width:1.6rem; height:1.6rem; background:url('../img/btn_back.png') left top no-repeat; background-size:100%;}
.lp_header_wrap .header a.btn_back > span {position:absolute;width:1px;height:1px;overflow:hidden;}
.lp_header_wrap .header a.btn_close {position:absolute; left:0.9rem; top:0.6rem; z-index:1; width:1.6rem; height:1.6rem; background:url('../img/btn_header_close.png') 50% 50% no-repeat; background-size:1.6rem auto;}
.lp_header_wrap .header a.btn_close > span {position:absolute;width:1px;height:1px;overflow:hidden;}
.lp_header_wrap .header strong.head_title {display:inline-block; max-width:100%; font-size:0.8rem; line-height:1.1rem; color:#000000; text-align:center; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.lp_container {position:relative; overflow-y:auto; overflow-x:hidden; height:100%; -webkit-overflow-scrolling:touch;}
.lp_contents {padding:2rem 0 1.2rem; margin:0 1.2rem;}
.lp_contents.h100p {padding:0;}
.lp_contents.has_bottomBtn {position:relative; min-height:100%; padding-bottom:5.8rem;}
.lp_contents.has_bottomBtn_double {position:relative; min-height:100%; padding-bottom:8.8rem;}
.lp_wrap .pos_fixed {position:absolute !important; padding:0 1.2rem 1.2rem;}
.lp_wrap .pos_cont {position:absolute !important; padding:0 0 1.2rem;}

.lp_wrap.type2 {padding-top:0;}
.lp_wrap.type2 .lp_header_wrap {border-bottom:0; background:transparent;}
.lp_wrap.type2 .lp_header_wrap .header {padding:0;}
.lp_wrap.type2 .lp_contents {padding-top:0;}


/*------------ popup : 전체팝업용 ------------*/
/*
.wrap {width:100%; height:100%; padding-top:2.8rem; font-size:0.7rem;}
.wrap.bg_green {background-image:linear-gradient(164deg, #16a077 0%, rgba(22, 160, 119, 0) 93%), linear-gradient(164deg, rgba(0, 149, 145, 0) 8%, #007495 100%), linear-gradient(to bottom, #009591, #009591);}
.wrap.bg_gray {min-height:100%; height:auto !important;}
.header_wrap {position:fixed; left:0; top:0; z-index:5; width:100%; height:2.8rem; border-bottom:1px solid #eeeeee; background:#ffffff;}
.header_wrap .header {position:relative; padding:0.85rem 0 0;}
.header_wrap .header a.btn_back {position:absolute; left:0.9rem; top:0.6rem; z-index:1; width:1.6rem; height:1.6rem; text-indent:-9999px; background:url('../img/btn_back.png') left top no-repeat; background-size:100%;}
.header_wrap .header a.btn_close {position:absolute; left:0.9rem; top:0.6rem; z-index:1; width:1.6rem; height:1.6rem; text-indent:-9999px; background:url('../img/btn_header_close.png') 50% 50% no-repeat; background-size:1.6rem auto;}
.header_wrap .header strong.head_title {display:block; font-size:0.8rem; line-height:1.1rem; color:#000000; text-align:center; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.contents {padding:2rem 0 1.2rem; margin:0 1.2rem;}
.contents.h100p {padding:0;}
.contents.has_bottomBtn {position:relative; padding-bottom:5.8rem;}
.contents.has_bottomBtn_double {position:relative; padding-bottom:8.8rem;}
*/

/*------------ popup ------------*/
.v--model {margin:auto;} /* 2020-05-11 추가 */
.popup_wrap {display:flex; align-items:center; justify-content:center; position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; background:rgba(0, 0, 0, 0.5);}
.popup_wrap.active {display:flex;}
.popup_wrap .popup {position:relative; overflow:hidden; width:calc(100% - 2.4rem); border-radius:1.2rem; background:#ffffff;}
.popup_wrap .popup .popup_header {padding:1.1rem 1.8rem 0; text-align:center;}
.popup_wrap .popup .popup_header h2 {font-size:0.8rem; font-weight:500; line-height:1.1rem; color:#000000;}
.popup_wrap .popup .popup_header span {display:inline-block; font-size:0.7rem; color:#009591; line-height:1rem;}
.popup_wrap .popup .popup_header p {font-size:0.7rem; color:#000000; line-height:1rem;}
.popup_wrap .popup .popup_header h2 + p {padding-top:0.8rem;}
.popup_wrap .popup .popup_header h2 + span {padding-top:0.4rem;}
.popup_wrap .popup .popup_content {padding:2.4rem 1.8rem; font-size:0.7rem; line-height:1rem; text-align:center; color:#666666;}
.popup_wrap .popup .popup_content.no_btn {padding:1rem 1.8rem;}
.popup_wrap .popup .popup_header + .popup_content {padding:0.8rem 1.8rem 1.8rem;}
.popup_wrap .popup .btn_wrap.double {}
.popup_wrap .popup .btn_wrap.double button:first-child {width:38%;}
.popup_wrap .popup .btn_wrap.double button:last-child {width:62%;}
.popup_wrap .popup .btn_wrap:after {content:''; display:block; clear:both;}
.popup_wrap .popup .btn_wrap button {height:2.6rem !important; margin-top:0; border-radius:0; font-weight:normal; line-height:2.6rem !important;}
.popup_wrap .popup .btn_wrap .btn.type1 {background:#009591;}
.popup_wrap .popup  button.btn_regipop_close {position:absolute; top:0.9rem; left:0.8rem; z-index:1; width:1.6rem; height:1.6rem; text-indent:-9999px; text-indent:-9999px; background:url('../img/btn_header_close.png') 50% 50% no-repeat; background-size:1.6rem auto;}

.popup_wrap.bottom {display:none; flex-direction:column; justify-content:flex-end;}
.popup_wrap.bottom.active {display:flex;}
.popup_wrap.bottom .popup {position:relative; width:100%; border-radius:1.2rem 1.2rem 0 0; background:#ffffff;}
.popup_wrap.bottom .popup .popup_header {height:3.4rem; padding:1.1rem 0 0; text-align:center;}
.popup_wrap.bottom .popup .popup_header h2 {display:inline-block; font-size:0.8rem; line-height:1.1rem; color:#000000; text-align:center;}
.popup_wrap.bottom .popup .popup_content {overflow-y:scroll; max-height:calc(100vh - 4.5rem); padding:2rem 2.5rem 2rem;-webkit-overflow-scrolling:touch;}
.popup_wrap.bottom .popup .popup_btn button {height:4rem !important; line-height:4rem !important;}
.popup_wrap.bottom .popup button.btn_regipop_close {position:absolute; top:0.9rem; left:0.8rem; z-index:1; width:1.6rem; height:1.6rem; text-indent:-9999px; text-indent:-9999px; background:url('../img/btn_header_close.png') 50% 50% no-repeat; background-size:1.6rem auto;}

.popup_dimm {position:fixed; left:0; top:0; z-index:40; width:100%; height:100%; background:#000000; opacity:0.5;}


/* popup list style1 */
.popup_content .list_style1 {position:relative; padding-top:0.6rem;}
.popup_content .list_style1 ul {border:0;}
.popup_content .list_style1 ul li {padding:0.4rem 0;}
.popup_content .list_style1 ul li:last-child {padding-bottom:0; border:0;}
.popup_content .list_style1 ul li.title .row .tit,
.popup_content .list_style1 ul li.title .row .con {font-weight:500; color:#000000;}


/* iOS fixed bug */
#wrap.iOS {position:relative; height:100%;}
.iOS #header_wrap {position:absolute;}
.iOS #contents {min-height:100%}
.iOS .bottom_btn_wrap {position:absolute;}

.iOS .lp_wrap {min-height:100%;}


/*------------ loading ------------*/
/* loading */
#loading_wrap {display:flex; align-items:center; position:fixed; left:0; top:0; z-index:300; width:100%; height:100%;}
#loading_wrap .loading_dimm {position:absolute; left:0; top:0; z-index:250; width:100%; height:100%; background:#ffffff; opacity:0.3;}
.spinner_wrap {position:relative; z-index:280; flex-grow:1; text-align:center;}
.spinner, .spinner:before, .spinner:after {width:4px; height:20px; background-color:#c5a143;}
.spinner {display:inline-block; position:relative;  margin:auto;}
.spinner:before, .spinner:after {content:''; display:block; position:absolute; top:0px;}
.spinner:before {left:-6px;}
.spinner:after {left:6px;}
@-webkit-keyframes bounce-bottom {
	0% {height:5px; margin-top:15px;}
	50% {height:20px; margin-top:0px;}
	100% {height:5px; margin-top:15px;}
}
@keyframes bounce-bottom {
	0% {height:5px; margin-top:15px;}
	50% {height:20px; margin-top:0px;}
	100% {height:5px; margin-top:15px;}
}
.spinner-bounce-bottom {
	-webkit-animation:bounce-bottom 0.6s ease 0.1s infinite;
	animation:bounce-bottom 0.6s ease 0.1s infinite;
}
.spinner-bounce-bottom:before, .spinner-bounce-bottom:after {top:auto; bottom:0px;}
.spinner-bounce-bottom:before {
	-webkit-animation:bounce-bottom 0.6s ease 0s infinite;
	animation:bounce-bottom 0.6s ease 0s infinite;
}
.spinner-bounce-bottom:after {
	-webkit-animation:bounce-bottom 0.6s ease 0.2s infinite;
	animation:bounce-bottom 0.6s ease 0.2s infinite;
}

#loadingHtml_wrap {display:flex; align-items:center; justify-content:center; position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; background:rgba(0, 0, 0, 0.5);}
#loadingHtml_wrap .loadingHtml_area {position:relative; overflow:hidden; width:calc(100% - 2.4rem); border-radius:1.2rem; background:rgba(0, 0, 0, 0);}
#loadingHtml_wrap .loadingHtml_area .loadingHtml_content{padding:2.4rem 1.8rem; font-size:0.7rem; line-height:1rem; text-align:center; color:#ffffff;}
#loadingHtml_wrap .loadingHtml_area .loadingHtml_content .loading_img{top:0.9rem; left:0.8rem; z-index:1; height:4rem; text-indent:-9999px; text-indent:-9999px; background:url('../img/loading/loading.gif') 50% 50% no-repeat; background-size:3.5rem auto;}

#wrap_online {width:100%; height:100%; padding-top:2.8rem; font-size:0.7rem;}