@charset "utf-8";
/* 초기화­ css */
*{box-sizing:border-box}
body{overflow-y:scroll; background: #f0f0f0;}
body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,fieldset,legend,figure,menu{margin:0;padding:0;border:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
table,th,td{border-spacing:0/* ;border-collapse:collapse */}
ol,ul,li{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:normal}
input,textarea,select,button{margin:0;padding:0;border-radius:0;color:#333;font:normal 12px/1.2 'Nanum Barun Gothic','NanumSquare', 'Malgun Gothic','돋움', 'dotum',sans-serif;outline:0;vertical-align:middle}
body{color:#333;font:normal 12px/1.2 'Nanum Barun Gothic','Malgun Gothic','돋움', 'dotum',sans-serif}
a,a:link,a:visited,a:hover,a:active{text-decoration:none}
a,button,input[type="submit"],input[type="button"],input[type="reset"]{border:0;background:transparent;cursor:pointer}
select{cursor:default}
img{border:0;vertical-align:top}
html,body{width:100%;height:100%}

input[type="checkbox"]{width:19px;height:19px}

html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; }


/* 공통 */
.clearfix::after{display:block;content:"";clear:both}
.blind{width:0px;height:0px;opacity:0;overflow:hidden}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis}
.ts,.ts::before,.ts::after{-o-transition:all 0.5 ease;-moz-transition:all 0.5 ease;-webkit-transition:all 0.5 ease}
.layout{margin:0 auto;max-width:1080px}

.btn_tab li{cursor:pointer}


/* 컬러,폰트 공통 */

/* 헤더 시작 */
header{position:relative}



/* 헤더 */

/* PC_헤더 */
.layout{margin:0 auto; width: 100%}
#main_header{background: url(/design/img/common/mainbg.png);  position: fixed; width: 100%; height: 54px;}
.fixed_padding{padding-top:53px;}
.menu{width: 5%; float:left; padding-top: 12.5px; cursor: pointer;}
.share{width: 5%; float: left; padding-top: 13px;}


/* 모바일 헤더 */
.m_layout{margin:0 auto; width: 100%}
#m_main_header{background: #fff;  position: fixed; width: 100%; z-index: 10; height: 54px;}
.m_fixed_padding{padding-top:53px;}
.head_img{height: 54px; width:auto;}
.other_head{height: 32px !important; width:auto;}
.m_menu{width: 12%; float:left;}
.m_menu img{height: 54px}
.m_share{width: 10%; float: left;}
.m_share img{height: 54px}
.m_qr{width: 13%; float:left;}
.m_qr img{height: 54px}


/* 토글 관련 */

#copyURL{text-indent:3px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis; width:200px; height: 24px; line-height: 22px; border: 1px solid #d1d1d1;}

.login-toggle { display : none; position : fixed;  width:150px; top : 53px; left:0; padding : 10px 20px 10px 15px; right : 0; background : #fff; box-shadow : 0px 0px 10px #000; z-index: 2 }
.login-toggle ul li a { display : block; padding : 10px 0; color:black !important;}
.login-toggle ul li a span{ position : absolute;  font-weight: bold; background : #f00; color : #fff; margin: 0 0 0 3px; font-size : 10px; padding : 0px 2px; /*border-radius : 100%*/   }


/* 레이어 페이지 */

.layer-page { 
	display:none;
	position:absolute; 
	width:100%; 
	height:100%;
	left:50; 
	top:53px; 
	z-index:5;
	background:#fff;
	
	-webkit-transition:-webkit-transform ease .4s;
	-moz-transition:-moz-transform ease .4s;
	-ms-transition:-ms-transform ease .4s;
	transition:transform ease .4s;
	
	-webkit-transform:translateX(100%);
	-moz-transform:translateX(100%);
	-ms-transform:translateX(100%);
	transform:translateX(100%);
}
.layer-page.active { 
	-webkit-transform:translateX(0%);
	-moz-transform:translateX(0%);
	-ms-transform:translateX(0%);
	transform:translateX(0%); 
}

.m_layer-page { 
	/* display:none; */
	position:absolute; 
	width:100%; 
	height:100%;
	left:0; 
	top:0; 
	z-index:5;
	background:#fff;
	
	-webkit-transition:-webkit-transform ease .4s;
	-moz-transition:-moz-transform ease .4s;
	-ms-transition:-ms-transform ease .4s;
	transition:transform ease .4s;
	
	-webkit-transform:translateX(100%);
	-moz-transform:translateX(100%);
	-ms-transform:translateX(100%);
	transform:translateX(100%);
}
.m_layer-page.active { 
	animation: fadeIn .8s;
	-webkit-transform:translateX(0%);
	-moz-transform:translateX(0%);
	-ms-transform:translateX(0%);
	transform:translateX(0%); 
}

/* 레이어 */
.layer1 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer1 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=50);}
.layer1 .pop-layer {display:block;}
.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: auto; height:auto;  background-color:#fff; border: 5px solid #d1d1d1; z-index: 10;} 
.pop-layer .pop-container {padding: 20px 20px 20px 20px;}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer .btn-r {width: 100%; margin:10px 0 20px; padding-top: 0px; border-top: 0px solid #DDD; text-align:right;}
.pop-layer .btn-c {width: 100%; margin-top : 10px; text-align: center;}
a.cbtn {display:inline-block; height:25px; padding:6px 14px 6px; background-color:#d1d1d1; font-size:13px; color:#fff; line-height:25px;}
a.cbtn:hover {border: 0px solid #828282; background-color:#828282; color:#fff;}

.layer2 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer2 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=50);}
.layer2 .pop-layer {display:block;}
.layer3 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer3 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=50);}
.layer3 .pop-layer {display:block;}
.layer4 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer4 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=50);}
.layer4 .pop-layer {display:block;}
.layer5 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer5 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=50);}
.layer5 .pop-layer {display:block;}
.layer99 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer99 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=50);}
.layer99 .pop-layer {display:block;}
.layer100 {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer100 .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=50);}
.layer100 .pop-layer {display:block;}

/* 롤링 */
.swiper-container {
    width: 100%;
}
.swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}


/* FOOTER 시작 */
footer{border-top:1px solid #ccc;}
footer .logo_f{display:block;float:left;width:217px;height:128px;padding:20px 0 0 5px}
footer ul{float:left}
footer ul li{float:left;padding:27px 0 20px 0}
footer ul li a{margin:0 14px 0 0;padding:0 14px 0 0;border-right:1px solid #333;color:#333}
footer ul li:last-child a{border:none}
footer p{float:left;color:#a29c99;font-size:12px;line-height:18px}

/* 서브공통 */
.lnb{height:42px;margin-top:49px;border-bottom:1px solid #c3c3c3;line-height:42px}
.lnb p{float:right;color:#555;font-size:14px}
.menu_left{float:left;width:212px}
.menu_left h2{width:212px;height:119px;background:#b20000;color:#fff;font-size:20px;font-weight:bold;text-align:center;line-height:119px}
.menu_left ul{padding:2px 0 2px 0;background:#f3f3f3;border-bottom:1px solid #b20000}
.menu_left ul li{height:50px;line-height:50px}
.menu_left ul li a{display:block;padding:0 0 0 33px;color:#333;font-size:16px}
.menu_left ul li.act a{background:#b20000;color:#fff}
.menu_left ul li ul li a{display:block;padding:0 0 0 43px;color:#333;font-size:16px}
.menu_right{max-width:761px;width:100%;float:left;margin:0 0 0 27px}

.child_menu{display: none;}
.sub_plus{float: right; margin-right: 15px;}
.menu_depth li{display:block;padding:0 0 0 33px;color:#333;font-size:16px}
.child_menu li a:hover, .child_menu li a:active, .child_menu li a:focus,.child_menu li.current a {background:#b20000; color:#fff;}


/* .subTitle{position:relative;margin:0 0 28px 0;padding:62px 0 20px 0;color:#333;font-size:33px} */
.subTitle2{position:relative;margin:0 0 10px 0;padding:36px 0 20px 0;color:#333;font-size:26px}
.subTitle2::after{display:block;content:'';position:absolute;left:0;bottom:0;width:48px;height:2px;background:#000}
.subTitle{position:relative;margin:0 0 30px 0;padding:36px 0 20px 0;color:#333;font-size:26px}
.subTitle::after{display:block;content:'';position:absolute;left:0;bottom:0;width:48px;height:2px;background:#000}


#Progress {
     position: absolute; top:0%; left:0%;      
     width:100%; height:100%; margin: 0px 0 0 0px;
}


/* 여백관련  */
.magin_t25{margin-top: -25px;}
.magin_b35{margin-bottom: -35px;}

@media all and (max-width:768px){

}
@media all and (max-width:420px){

}