@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

body { font-family: 'Noto Sans KR','맑은고딕',MalgunGothic,'돋움',Dotum,Helvetica,sans-serif !important; word-wrap: break-word;word-break: keep-all; color:#222; letter-spacing: -1px; line-height: 1.6;}
strong { font-weight: bold;}

.wrap { position: relative; height: 100vh; padding: 80px 0 0; margin: 0; }

.hide {position: absolute;left: 0;top: 0;width: 0;height: 0;overflow: hidden;}
.tl_left { text-align: left !important;}
.one_btn { width: 40% !important;}
.btn { width: 100%; border:1px solid #222; border-radius: 5px; background: #222; color:#fff; padding: 12px 20px; font-size: 18px; text-align: center; line-height: 22px;}
.btn_main { border:1px solid #ed1c91; background:#ed1c91 !important;}
.btn_line { border: 1px solid #fedff0 !important; background:#fcedf5 !important; color:#ed1c91 !important; }

/* **************************************** *
 * SKIP
 * **************************************** */
 .skip_navigation {position:absolute; left:0; top:0; width:100%; z-index:999;}
 .skip_navigation dt {height:0; overflow:hidden;}
 .skip_navigation a {position:absolute; left:0; top:-50px; display:block; width:100%; height:50px; text-align:center; font-size:0.875rem; line-height:50px; background: #fff;}
 .skip_navigation a:focus {top:0;}


/* **************************************** *
 * HEADER
 * **************************************** */
#header {position:fixed; top:0; left:0; width: 100%; height: 80px; border-bottom: 1px solid #ddd; box-sizing: border-box; background: #fff; z-index: 100;}
.header_pc {max-width:1280px; width: 100%; height: 100%;margin: 0 auto; position: relative; overflow: hidden;}
.header_pc h1 { line-height: 67px;}
.header_pc h1 a { position:relative; font-size: 18px; font-weight: 900; z-index: 99; padding: 20px 5px 20px 15px; cursor: pointer;}

.header_pc.head_v2 { position: relative;}
.header_pc.head_v2 a.btn_back,
.header_pc.head_v2 button.btn_back { position: relative; margin-right: 15px;}
.header_pc.head_v2 a.btn_back:before,
.header_pc.head_v2 button.btn_back:before { content: "\27F5"; position: absolute; top:0;}

.top_unit { position: absolute; top:8px; right:15px}
.mo_schbx { display: none;}
.schbx,
.buy { display: inline-block;}
.buy a { border-radius: 50%; background: #66cfd3; color:#fff; font-size: 12px; padding:5px 8px; display:block; margin: 10px 0 0 15px; width: 45px; height: 45px; text-align: center; line-height: 16px;}
.schbx .sch { position: relative;}
.schbx .sch input { position: relative; text-align:left; height:40px; line-height: 1.2; margin: 0; display:block; border-bottom: 2px solid #222; padding:10px; color:#999; font-weight: normal; font-size: 12px; width: 215px; font-family:'Noto Sans KR',sans-serif;
    -webkit-appearance: none;
    outline: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    line-height: 40px;
    background: #fff;}

.schbx .sch .sch_button { position: absolute; overflow: hidden; top:5px; right:6px; padding: 12px 10px 7px; background-color: #fff; width: 24px; height: 24px;}
.schbx .sch .sch_button .ico_txt { display: block; overflow: hidden; font-size: 0px; line-height: 0;}
.ico_sch { display: block; content: ""; position: absolute; top:2px; right:2px; background:url(/assets/res/app_barcode/img/ico_sch.gif) no-repeat 0 0; width: 24px; height: 24px; background-size: 100%;}

#top_wrap { position: relative; height: auto; max-height: 520px; width: 100%; background: #fff;/* padding-top: 80px; */overflow: hidden;}
.inner {position: relative; max-width: 1280px; width: 100%; margin: 0 auto;}
.top_banner { position: relative;}
.top_banner img { width: 100%;}
/*.top_banner button { z-index: 10; position: absolute; left:65px; bottom:45px; width: 152px !important; text-align: left;}
.top_banner button i { margin-left: 10px; background: url(../img/ico_arrow.png) no-repeat 0 0; width:31px; height:15px; display: inline-block; background-size: 100%; vertical-align: middle;}*/

/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {width:100%; clear:both; position:relative; padding:0 0 45px; z-index:0; border-top:1px solid #ddd; background:#fafafa; overflow: hidden; font-size: 14px; /*letter-spacing: 0;*/}
.footer_menu { overflow: hidden; border-bottom: 1px solid #ddd; background: #fff;}
.footer_menu>div { max-width:1280px; width:100%;height:auto; overflow:hidden; position:relative; margin:0 auto; }
.footer_menu>div a { float:left; margin-right:5%; line-height: 3.2;}
 
.footer_info { max-width:1280px; width:100%;height:auto; overflow:hidden;position:relative;margin:0 auto 40px;color:#666;}
.footer_info .foot_logo { position: absolute; top:20px; left:0; width: 150px;}
.footer_info .foot_logo img { width: 100%;}
 
.foot_column {clear:both; margin-top:20px; z-index:0; display: inline-block; width:30%; vertical-align: top; position: relative;}
.foot_column span { position: relative; padding-right: 20px;}
.foot_column span:after { content: ""; width: 1px; height: 10px; background: #999; display: block; position: absolute; top:6px; right:9px;}
.foot_column span:last-child:after { display: none;}
.foot_column.wd50 { /*margin-left: 18%;*/ width: 50%;}
.foot_column dl dt,
.foot_column dl dd { display: inline-block; font-size: 28px; color:#222; line-height: 0; font-weight: 500;}
.foot_column dl dt { font-weight: bold; font-size: 14px;}
.foot_column p { padding-top: 15px;}
.foot_link { margin-left:3px; display: inline-block; overflow: hidden; height: 22x; padding: 0 9px 0 8px; border-radius: 2px; border: 1px solid #b7bfc8; background: #fff; font-size: 0.75rem; text-align: center; vertical-align: top;}

/* 코드입력레이어팝업 */
.layercode {z-index:9999;/*padding-top:100px;*/position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.code_inner { width: 50%; background: #fff; border:1px solid #2a2a2a; padding:15px; position: relative; margin: 10% auto 0; /*position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);*/}
.code_inner h3 { font-size: 24px; font-weight: normal; text-align: center;}
.codeTable { margin: 10px auto 15px; border-radius: 10px; background: #f8f8f8;}
.codeTable caption { font-size: 0;}
.codeTable input[type="text"],
.codeTable input[type="tel"] { width: 100%; height: 40px; border-radius: 5px; border: 1px solid #ddd; padding: 10px;}
.codeTable table { width: 100%;  text-align: left; line-height: 1.2;}
.codeTable table tbody th { padding: 10px 15px; font-weight: 500;}
.codeTable table tbody td { word-break: break-all; padding: 10px 15px; color:#666; text-align: left;}
.codeBtn { overflow:hidden; padding: 15px 0; clear: both; margin: 0 auto; text-align: center;}
.codeBtn>div { float: left; width: 49%; margin: 0 0.5%;}
.codeBtn>div>button { display: block; width: 100%;}

@media (max-width: 1280px) {

    .footer_menu>div,
    .footer_info { padding: 0 15px; }

}

@media (max-width: 1024px) {

    .wrap { height: 100%; padding:0; margin: 0;}

    #header {position:relative;}
    .mo_schbx { display: block; z-index: 999;}
    .mo_sch { z-index: 999; position: absolute; overflow: hidden; top:19px; right:15px; background-color: #fff; width: 45px; height: 45px; border-radius: 50%; border: 1px solid #ddd; box-sizing: border-box; padding: 0 10px;}
    .mo_sch .mo_ico_txt { display: block; overflow: hidden; font-size: 0px; line-height: 0;}
    .mo_sch .mo_ico_sch { display: block; content: ""; background:url(/assets/res/app_barcode/img/ico_sch.gif) no-repeat 0 0; width: 24px; height: 24px; background-size: 100%; text-align: center;}
    
    .mo_schbx.head_v2 .mo_sch { right:60px;}

    .mo_input.dis_on { display: block !important;}
    .mo_input { display: none; z-index: 999; position: absolute; background: #fff; top: 80px; left:0; right:0; width: 100%; height: 64px; padding: 12px 15px;  -webkit-box-shadow: 0px 2px 3px #ddd; box-shadow: 0px 2px 3px #ddd;}
    .mo_input input { position: relative; width: 100%; text-align:left; height:40px; line-height: 1.2; margin: 0; display:block; border-bottom: 2px solid #222; padding:10px; color:#999; font-weight: normal; font-size: 12px; font-family:'Noto Sans KR',sans-serif;
        -webkit-appearance: none;
        outline: 0;
        border-radius: 0;
        -webkit-border-radius: 0;
        line-height: 40px;
        background: #fff;}

    .mo_input .sch_button { position: absolute; overflow: hidden; top:15px; right:20px; padding: 12px 10px 7px; background-color: #fff; width: 24px; height: 24px;}
    .mo_input .sch_button .ico_txt { display: block; overflow: hidden; font-size: 0px; line-height: 0;}
    .mo_input .sch_button .ico_sch { display: block; content: ""; position: absolute; top:2px; right:2px; background:url(/assets/res/app_barcode/img/ico_sch.gif) no-repeat 0 0; width: 24px; height: 24px; background-size: 100%;}

    .schbx { display: none;}

    #top_wrap {padding-top: 0;}
}

@media (max-width: 870px) {    

    .btn {font-size: 14px;}

    .foot_column,
    .foot_column.wd50 { display: block; width: 100%;}

}

@media (max-width: 420px) {

    
    .one_btn { width: 100% !important;}

    .schbx { position: relative; top:0; right:0; padding: 10px 15px;}
    .schbx .sch input { width: 100%;}

    /* 코드입력레이어팝업 */
    .code_inner { width: 90%;}
}

/* 이용약관 css */
.footer_pop{z-index:1000;display:none;position:fixed;left:0;top:0;width:100%;height:100vh;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}

.footer_layer_area { max-width: 960px; width: 100%; background: #fff; border:1px solid #2a2a2a; padding:20px 30px; position: relative; margin: 6rem auto; height: calc(100vh - 12rem);}
.footer_layer_area h2 { font-size: 1.125rem; font-weight: bold; line-height: 2; border-bottom: 2px solid #2a2a2a;}
.footer_layer_area .btn_close { overflow: hidden; position: absolute; top: 12px; right: 24px; width: 44px; height: 44px; padding: 15px; line-height: 99em; vertical-align: top; background: inherit; cursor: pointer;}
.footer_layer_area .btn_close:before { display: block; width: 23px; height: 23px; background: url(/assets/res/app_barcode/img/ico-common.png) -300px 0 no-repeat; content: ''; }

.etc { height: 96%; overflow-y: scroll; font-size: 0.875rem; color: #666;}
.etc .policy { padding: 8px 10px;}
.etc .policy h3 { margin: 10px 0;font-size: 1rem; color:#2a2a2a; font-weight: 900;}
.etc .policy h4 { margin: 20px 0 6px; font-size: 0.875rem; font-weight: 700; color:#222; position: relative; display: inline-block;}
.etc .policy h4.s_h4 { color:#3366cc;}
.etc .policy h5 { margin: 20px 0 6px; font-size: 0.875rem; font-weight: 700; color:#3366cc;}
.etc .policy sup { font-size: 0.75rem; vertical-align: top; line-height: 0.6; color:#3366cc;}
.etc .policy table { margin: 12px 0 0 0; border-bottom: 1px solid #ddd; border-top: 2px solid #171717; table-layout: fixed; width: 100%;}
.etc .policy table caption {position: absolute;left: 0;top: 0;width: 0;height: 0;overflow: hidden;}
.etc .policy table thead th { height: 38px; font-size: 0.875rem; padding: 0 10px; color: #000; text-align: center; vertical-align: middle; border-bottom: 1px solid #ddd;}
.etc .policy table tbody th { font-size: 0.875rem; font-weight: 700; padding: 10px; color: #000; text-align: center; vertical-align: middle; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background: #eee;}
.etc .policy table tbody tr td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; word-break: break-all; vertical-align: middle; padding: 10px; position: relative;}
.etc .policy h4 a,
.etc .policy table tbody tr td a,
.etc .policy table tbody tr td a:hover,
.etc .policy table tbody tr td a:active,
.etc .policy table tbody tr td button { border-radius: 3px; background: #3f78eb; color:#fff; border: 1px solid #3366cc; text-align: center; font-size: 0.75rem; padding: 4px 8px; line-height: 1.4; display: inline-block; font-weight: 300;}
.etc .policy table tbody th:last-child,
.etc .policy table tbody tr td:last-child { border-right: none;}
	.policy>ul>li,
	.policy>p { padding: 0 0 8px 0; line-height: 1.6;}
	.policy>ul>li>a,
	.policy>ul>li>a:active { text-decoration: underline; color:#3366cc;}
	.policy p.p_indent { text-indent: 12px;}
	.policy>ul>li>ul { margin-bottom: 8px;}
	.policy>ul>li>ul>li { padding: 8px 0 0 0; margin-left: 15px;}
	.policy>ul>li>ul>li>p,
	.policy>ul>li>ul>li>ol>li { margin-left: 15px;}
	.policy>ol>li { font-size: 0.75rem; padding: 0 0 8px 0;}

.list_box { display: none; z-index: 999; position: absolute; left:50%; margin-left: -90px; width: 180px; height: 180px; background: #fff; border:1px solid #ccc}
.list_box>div { padding:0  10px; height: 156px; overflow-y: scroll;}
.list_box>div>p {margin: 10px 0 6px; font-size: 0.875rem; font-weight: 700; color:#3366cc;}
.list_box>div>ul>li { position: relative; padding: 0 0 8px 8px; line-height: 1; font-weight: 300;}
.list_box>div>ul>li:before { content: ""; position: absolute; width: 2px; height: 2px; background: #2a2a2a; display: block; top:6px; left:0;}
.list_box span { position: absolute; bottom:0; width: 100%; background: #ddd; color:#666; text-align: center; font-size: 0.75rem; padding: 4px 8px; line-height: 1.4; cursor: pointer; z-index: 1; font-weight: 300; }

    @media (max-width: 980px) {

        .footer_layer_area {width: 90%;}
        .etc { height: 90%;}

    }
	@media (max-width: 680px) {

		.footer_layer_area { padding: 10px 20px;}
		.footer_layer_area h2 { line-height:40px;}
        .footer_layer_area .btn_close { top: 5px; right: 14px;}
		.etc .policy { padding: 8px 0;}

		.list_box { margin-left: 0; left:10px}
	 }