@import url('animation.css'); /* 애니메이션 */
@import url('font.css'); /* 폰트 */
@import url('style.css'); /* WEB&MOBILE */

/* CSS Document ************************************************/
*{margin: 0; padding: 0; font-family: 'Noto Sans'; font-weight: 400;  }

/***********************************    Reset    ***********************************/
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block}
html,body{margin:0;padding:0; height: 100%; width: 100%;}
body{font-family:'Noto Sans'; font-size:14px;line-height:20px;overflow-y:scroll; overflow-x:hidden;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:14px; font-family: 'Noto Sans'; font-weight:400; word-break:keep-all;}
p {word-break:keep-all;}
ol,ul{margin:0;padding:0;list-style:none; box-sizing:border-box;}
div,li,dl,dt,dd,form,iframe,p,a,span,blockquote,i,figure{margin:0;padding:0;box-sizing:border-box}
fieldset{margin:0;padding:0;border:0 solid transparent}
legend,hr{display:none}
label{vertical-align:middle}
img{margin:0;padding:0;border:0;vertical-align:top}
table,th,td{margin:0;padding:0; border-collapse: collapse; border-spacing: 0; border: 0;}
input,textarea,select{margin:0;padding:0;background:#fff;font-family:'Noto Sans','돋움',Dotum,Gulim,Tahoma,Verdana,AppleGothic,sans-serif;font-size:14px;color:#333;vertical-align:middle;border:0;border-radius:0;-webkit-border-radius:0;-webkit-appearance:none;box-sizing:border-box;outline:0;}
caption{visibility:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0}
a{font-family:'Noto Sans','돋움',Dotum,Gulim,Tahoma,Verdana,AppleGothic,sans-serif;font-size:14px;margin:0;padding:0;border:0;cursor:pointer;background:0}
a::-moz-focus-inner{border:0;padding:0}em{font-style:normal}
img{vertical-align:top; }
a,button{text-decoration:none;color:#333; }
a.link:hover,button.link:hover{text-decoration:underline}
a,input,button{transition:all 100ms ease-in-out;-o-transition:all 100ms ease-in-out;-ms-transition:all 100ms ease-in-out;-moz-transition:all 100ms ease-in-out;-webkit-transition:all 100ms ease-in-out}
.no-border{border:none!important}
input[type='radio'], input[type='checkbox'] {border:none !important}
select {-webkit-appearance: none;  /* 네이티브 외형 감추기 */-moz-appearance: none; appearance: none;  background-image:url(../image/common/arrow_select01.png); background-repeat:no-repeat; background-position:100% 50%; padding-left:30px; line-height:40px; height:40px; border:1px solid #DDD;}
select::-ms-expand { display: none;}/* IE 10, 11의 네이티브 화살표 숨기기 */

#wrapper { width:100%; margin:0 auto; }
@media only screen and (max-width:767px) {
#wrapper { overflow:hidden;}
}
/*HEADER************************************************/

.header { position:fixed; left:0px; top:0px; width:100%; height:100px; z-index:1000; opacity:0; transition:all 0.3s  ease-in-out; -webkit-transition:all 0.3s ease-in-out; background-color:rgba(255,255,255,1);  z-index: 10;}
.header.load { opacity:1; }
.header_con { position:relative; width:100%; max-width:1400px; height:100px; margin:0 auto; padding:0px 30px;}
.header_con .logo { position:absolute; top:35px; left:30px; width:220px; height:40px; background-image:url(../image/common/logo.png); background-size:220px 40px;}


.header.active {background-color:rgba(255,255,255,1);}
.header.flow {background-color:rgba(255,255,255,1); }

#fp-nav { display: none;}
@media only screen and (max-width:1024px) {
	.header { position:fixed; height:80px; }
	.header_con { height:80px;}
	.header_con .logo { top:50%; left:30px; transform: translateY(-50%); width:202px; height:34px; background-size:202px 34px;}
}
@media only screen and (max-width:767px) {
	.header { height:60px;}
	.header_con { height:60px; padding: 0 15px;}
	.header_con .logo { top:50%; left:15px; transform: translateY(-50%); width:166px; height:28px; background-size:166px 28px;}
}

/*WEB MENU************************************************/

.w_menu .gnb { position:absolute; top:0px; right:0px;}
.w_menu .gnb>a { position: relative; float:left; width:180px; height:100px; font-size:22px; line-height:32px; color:#b1b6c0; text-align:center; padding-top: 20px; background-color: rgba(37,55,45,.8); font-weight: 500; }
.w_menu .gnb>a>span { font-size: 14px; }
.w_menu .gnb>a:hover { color:#FFF; }

.w_menu .gnb>a.active { color:#FFF; background-color: rgba(37,55,45,1); }
.w_menu .gnb>a.active:before { position: absolute; left: 30%; bottom: 45px; width: 40%; height: 1px; background-color:#FFF; content: ""; }

@media only screen and (max-width:1024px) {
	.w_menu .gnb>a { width:160px; font-size:20px; height:80px; line-height: 22px; padding-top: 20px;}
	.w_menu .gnb>a.active:before { bottom: 37px;}
}

@media only screen and (max-width:767px) {
	.w_menu { display: none;}
}

/*MOBILE MENU************************************************/
.mobile_menu {display:none; width:34px;height:34px;position:absolute; top:50%; right:15px; transform:translateY(-50%);cursor:pointer;}
.header_con .mobile_menu span {display:block;position:absolute;width:80%;height:2px;border-radius:30px;background:#222; transition:all .2s;}

.mobile_menu span:nth-child(1) {top:20%;left:50%;transform:translateX(-50%);}
.mobile_menu span:nth-child(2) {top:50%;left:50%;transform:translate(-50%,-50%);}
.mobile_menu span:nth-child(3) {bottom:20%;left:50%;transform:translateX(-50%);}

.mobile_menu.active span:nth-child(1) {top:50%;left:50%;transform:translate(-50%,-50%) rotate(135deg);}
.mobile_menu.active span:nth-child(2) {left:50%;transform:translate(-50%,-50%) scale(2);opacity:0;}
.mobile_menu.active span:nth-child(3) {bottom:50%;left:50%;transform:translate(-50%,50%) rotate(-135deg);}

.m_menu { display:none; position:fixed; top:60px; right:-280px; width:280px; height:100%; background-color:#FFF; padding:20px 20px 80px; overflow:scroll; transition:.35s; }
.m_menu.active { right:0; }
.m_menu a { display: block; width:100%; font-size:22px; line-height:25px; color:#888; text-align:left; padding-left: 20px; padding-top: 5px; padding-bottom: 5px; margin-bottom: 30px; border-left: 2px solid #888; font-weight: 500;  }
.m_menu>a>span { font-size: 16px; font-weight: 300;  }
.m_menu a.active { color:#184327; border-left: 2px solid #184327;}

@media only screen and (max-width:767px) {
	.mobile_menu { display:block;}
	.m_menu {display:block;}
}

/*FOOTER************************************************/

.footer { width:100%; background-color:#111; padding-top:50px; padding-bottom:80px;}
.footer_con { position:relative; width:100%; max-width:1400px; margin:0 auto; padding-left:30px; padding-right:520px; }
.footer_con img { display: block; margin-bottom: 20px;}


.footer_con>p { width: 600px; font-size:0px; color:#aaa; line-height:30px; word-break:keep-all; font-weight: 300; }
.footer_con>p span {font-size:16px; position:relative; display:inline-block; margin-right:30px; color:#aaa; font-weight: 300; }
.footer_con p.copyleft {font-size:16px; color:#eee;}



@media only screen and (max-width:767px) {
	.footer { padding-bottom:40px; padding-top: 0px;}
	.footer_con {padding-left:15px; padding-right:15px; padding-top:50px; }
	.footer_con img {margin: 0 auto 10px;}
	.footer_con>p { width: 100%; text-align:center; line-height: 20px;}
	.footer_con>p span {font-size:12px; padding-right:10px; margin-right:5px;}
	.footer_con p.copyleft {font-size:12px;}
}

/* Layer_POPUP */
.layer_pop_wrapper { opacity: 0; position: fixed; left: 0px; top: 0px; width:100%; height:100%; background-color:rgba(0,0,0,0.65); z-index: 100; visibility: hidden; transition:all 0.3s  ease-in-out; -webkit-transition:all 0.3s ease -in-out;}
.layer_pop_wrapper.active { opacity: 1; visibility: visible; z-index: 100; }
.layer_pop_wrapper.active .layer_popup .pop_title .close {opacity: 1; transform:rotate(0deg);}

.layer_popup { position: relative; display: inline-flex; flex-direction: column; width: 600px; min-width: 600px; max-width: 1200px; min-height: 100px; max-height: 80%; left: 50%; top: 50%; background-color:#FFF; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); padding:40px 40px 40px; z-index: 5;}

.layer_popup .pop_title { position: relative; width: 100%; }
.layer_popup .pop_title h2 {width: 100%; font-size: 22px; font-weight: 500; line-height: 30px; padding: 11px 60px 20px 0px; text-align: left; border-bottom:solid 2px #222; word-break: keep-all; box-sizing: border-box; }
.layer_popup .pop_title h2>span { font-size: 16px; margin-left: 5px;}
.layer_popup .pop_title .close { position: absolute; top: 0px; right: 0px; display: block; width: 50px; height: 50px; background-image:url("../image/common/icon_pop_close01.png"); background-repeat: no-repeat; background-position: top center; background-size: 50px 50px; opacity: 0; transform:rotate(45deg); transition:all 0.3s  ease-in-out; -webkit-transition:all 0.3s ease -in-out; z-index: 10;}

.layer_popup .pop_content { height: calc(100% - 70px); padding-top: 0px; overflow-y: auto;}
.layer_popup .pop_content img { width: 100%;}

.layer_pop_wrapper.shopping_detail .layer_popup { max-width: 1240px;}
.layer_pop_wrapper.shopping_detail .layer_popup .pop_content { padding: 0px;} 

.layer_pop_wrapper .bg_pop_close { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; z-index: 1; }
.layer_pop_wrapper.active .bg_pop_close { display: block;}

@media only screen and (max-width: 1024px) {
	.layer_popup { min-width: auto; width: 80%; max-width: 900px; padding: 30px; }
}
@media only screen and (max-width: 767px) {
	.layer_popup { width: calc(100% - 30px); max-width: none; max-height: calc(100vh - 140px); padding: 20px;}
	.layer_popup .pop_title h2 { font-size: 18px; line-height: 26px; padding: 10px 50px 15px 0; }
	.layer_popup .pop_title .close { width: 40px; height: 40px; background-size: 40px 40px; }
}