/*-----기본-----*/
html{font-size:20px;}
body{font-size:1rem}
.tablet{display:none;}
.mob{display:none;}
#wrap{position:relative; line-height:1.5; overflow:hidden; font-size: .9rem;}
#wrap img { border:none; }
#wrap i{vertical-align:inherit;}


/*헤더*/
#header{width:100%;  z-index:100;-webkit-transition:all .3s;transition:all .3s;position:absolute;left:0;top:0;}
#header h1 img{width:7.5rem;vertical-align: middle;}
#header h1 a{display: block;}
#header .header_inner{position:relative;height:5.75rem;display:flex;justify-content: space-between;align-items: center;width:1600px;margin:0 auto;}


/*-----네비게이션-----*/
#header .header_inner #nav {display: flex; flex-direction: row; justify-content: center; align-items: center;}
#header .header_inner #nav{}
#header .header_inner #nav ul {clear:both;  position:relative; box-sizing:border-box;height:100%;}
#header .header_inner #nav ul li { display:inline-block;width: auto; float:none; vertical-align:top;position:relative;}
#header .header_inner #nav ul li.on {background:#000;}
#header .header_inner #nav ul li {position:relative; }
#header .header_inner #nav ul li a{text-align:center; color:#fff; display:inline-block;position:relative;transition: all .2s; -webkit-transition: all .2s; font-size:0.95rem;font-weight:700;width:100%;}
#header .header_inner #nav ul li > div a {height:5.75rem;display:flex;justify-content: center; align-items: flex-end;padding-bottom:1.5rem;}
#header .header_inner #nav ul li > div{text-align:center;}
#header .header_inner #nav > ul > li{width:7.4rem; }
#header .header_inner #nav ul li.on > div{background:#000;transition-duration: 0.5s;}
#header .header_inner #nav ul li.on > div a {color:#fff;background:#FF5500;}




#header .header_inner #nav ul li ul {z-index: 10;position: absolute; width:100%;  top:5.75rem; padding:1.5rem 0 .5rem; box-sizing:border-box; text-align:center;  height:auto;   display: none;animation-fill-mode: forwards;opacity:0;transition-duration: 0.5s;}

#header .header_inner #nav ul li ul li {display:block;margin:0; margin-bottom:13px; line-height:1.5;background:#222;}
#header .header_inner #nav ul li ul li a{display:block;color:#CCCCCC; font-size:0.85rem; padding:0; height:auto; font-weight: 400; line-height:1.5; transition: all .2s; -webkit-transition: all .2s;background:#222;}
#header .header_inner #nav ul li ul li a:before{content:""; display:block; clear:both;}
#header .header_inner #nav ul li ul li a:hover{color:#fff;}

#header .header_inner #nav ul li.on ul{display:block;opacity:1;transition-duration: 0.5s;background:#222;border-radius:0 0 0.75rem 0.75rem;}

#header .header_inner #nav ul li.active > div > a{}
#header .header_inner #nav ul li.active ul li:after{display:none;}


#header .header_inner .header-right {display:flex;align-items: center;}
#header .header_inner .header-right a.mall-btn{width:4.75rem;height:2rem;border-radius:2.5rem;background:#333;color:#fff;font-family: "Urbanist";font-weight:600;display:flex;align-items: center;justify-content: center;gap:6px;font-size:0.8rem;margin-right:1.1rem;}

	/*-----회원서비스-----*/
.log_menu{position:absolute;right:8rem;top:50%;transform:translateY(-50%); color:#fff; font-size:0.75rem;}
.log_menu li{display:inline-block; margin-right:10px;}
.log_menu li a{color:#fff;}

/*-----언어별-----*/
.select_btn{width:4.5rem;height:2rem;border-radius:2rem;background:rgba(255,255,255,0.1);font-size:0.75rem;font-weight:600;color:#fff;padding:0 0.5rem;display:flex;align-items: center;font-size:0.75rem;font-weight:600;justify-content:space-between;margin-right:1rem;}
.option_list { display:none; position: absolute;  top: 4.5rem; z-index:1000; background: #fff;   padding: 15px 25px;border-radius:0.4rem;box-shadow: 0 5px 1rem rgb(0 0 0 / 10%);width:4.5rem;}
.option_list li { margin-top: 5px;}
.option_list li a { display: block;  font-size: 0.8rem;  color: #666;text-align:center;}
.option_list li:first-child { margin-top: 0;}


/*-----사이트맵 버튼-----*/
#header .btn-gnb-menu{width:1.95rem;height:1.6rem;position:relative;z-index:999;}
#header .btn-gnb-menu span{display: inline-block;width: 100%;height: 2px;background-color: #fff;-webkit-transition: all 0.25s;transition: all 0.25s;}
#header .btn-gnb-menu button{width:100%;height:100%;display:flex; flex-direction:column;justify-content: space-between}
#header.open .btn-gnb-menu span:nth-child(1) {
	transform: translateY(0.7rem) rotate(45deg);
}
#header.open .btn-gnb-menu span:nth-child(2) {
	opacity: 0;
}
#header.open .btn-gnb-menu span:nth-child(3) {
	opacity: 0;
}
#header.open .btn-gnb-menu span:nth-child(4) {
	transform: translateY(-0.7rem) rotate(-45deg);
}
@keyframes slide_down {
  from {
    transform: translateX(0px) translateY(-30px);
	opacity:0;
  }
  to {
    transform: translateX(0px) translateY(0px);
	opacity:1;
  }
}

.sub-link{display:none;}



.sub-link .option_list{}



/*사이트맵*/
#header #navi{position:fixed; top:0; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:20;overflow-y:scroll;transform: scale(0);}
#header .navi-bg{    display: block;width: 46px;height: 46px;background: rgba(0, 0, 0, 0.8);border-radius: 50%;position: absolute;right: 4%;top: 46px;transform: translate(-50%, -50%) scale(0);transition: all 0.8s ease-in-out;}
#header.open .navi-bg{transform: translate(-50%, -50%) scale(150);}

#header.open #navi{transform: scale(1);
	transition: all 0s 0.8s; }
#header #navi .mobile_top{height:100%;position:relative;}
#header #navi .site-bg{position:absolute;z-index:1;width:0;margin:0 auto;height:100%;}

#header #navi  .mbtop{width:0;transition-duration: 0.5s;padding:14rem 6.75rem 0 4.5rem;display:flex;}
#header #navi  .mbtop li a{color:#fff;}


#header #navi{
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}

#header.open #navi .site-bg.open .bg {width:30%;transition: all 0.8s cubic-bezier(.16,1,.64,1);}
#header.open #navi .mbtop{width:100%;transition-duration: 0.5s;margin-top:4.5rem;}
#header #navi  .mbtop > li { opacity: 0;transition-duration: 0.5s;width:calc(100% / 5);text-align:center;}
#header #navi  .mbtop > li > ul {margin-top:2.75rem;}
#header #navi  .mbtop > li > ul > li > a {font-size:0.85rem;    font-family: 'Urbanist', 'pretendard';position:relative;}
#header #navi  .mbtop > li > ul > li > a:after{content:'';position:absolute;bottom:0;left:0;width:0;background:#fff;height:2px;transition-duration: 0.5s;}
#header #navi  .mbtop > li > ul > li > a:hover:after{width:100%;transition-duration: 0.5s;}



#header #navi  .mbtop > li > ul > li:not(:last-child){margin-bottom:1.25rem;}
#header.open #navi  .mbtop > li  {opacity: 1;transition-duration: 0.5s;    animation-delay: .4s;}

#header #navi  .mbtop > li:first-child{padding-top:0;}
#header #navi  .mbtop > li:first-child{padding-top:0;}
#header #navi  .mbtop > li > a{font-size:2.25rem;font-weight:700;}
#header #navi  .mbtop .depth1-div{margin-top:0.75rem;}
#header #navi  .mbtop .depth1-div > ul {display:flex;}
#header #navi  .mbtop .depth1-div > ul > li:not(:last-child){margin-right:7rem;}
#header #navi  .mbtop .depth1-div > ul > li > a{font-size:0.9rem;color:rgba(255,255,255,0.7);font-weight:600;margin-top:0.75rem;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul {margin-top:0.75rem;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a{font-size:15px;color:rgba(255,255,255,0.4);position:relative;padding-left:0.5rem;display:inline-block;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:before{content:'';display:block;position:absolute;width:5px;height:1px;background:rgba(255,255,255,0.4);top:0.5rem;left:0;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:after{content:'';display:block;width:100%;height:1px;background:#fff;left:0;bottom:0;opacity:0;}

#header #navi  .mbtop .depth1-div > ul > li:hover > a {color:#fff;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:hover:after{opacity:1;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:hover{color:#fff;}
#header #navi  .mbtop .depth1-div > ul > li .depth2 > ul > li > a:hover:before{background:#fff;}


#header.open #menuAll .mobile_top > ul > li:nth-child(1){    transition-delay: .2s;transition-duration: 0.5s;padding-top:0;}
#header.open #menuAll .mobile_top > ul > li:nth-child(2){    transition-delay: .4s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(3){    transition-delay: .6s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(4){    transition-delay: .8s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(5){    transition-delay: 1.0s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(6){    transition-delay: 1.2s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(7){    transition-delay: 1.4s;transition-duration: 0.5s;}
#header.open #menuAll .mobile_top > ul > li:nth-child(8){    transition-delay: 1.6s;transition-duration: 0.5s;}


#header.open h1{z-index:111;}
#header.open .btn-gnb-menu span{background-color:#fff;}
#header.open .header_inner .header-right a.mall-btn{z-index:111;background:inherit;border:1px solid #fff;color:#fff;}
#header.open .select_btn{z-index:111;color:#fff;}
@media (max-width:1600px){
	#header #navi .mbtop{padding:10rem 2rem 0 2rem;}

}



@media (max-width:1430px){
	#header .header_inner #nav > ul > li{width:6rem;}
	#header .header_inner #nav ul li > div a{align-items: center;padding-bottom:0}


}

@media (max-width:1300px){
	#header #navi .mbtop .depth1-div > ul > li:not(:last-child){margin-right:5rem;}
	
}
@media (max-width:1185px){
	#header .header_inner #nav > ul > li{width:5rem;}
	#header .header_inner .header-right a.mall-btn{margin-right:0.5rem;}
	.select_btn{margin-right:0.5rem;}
	.option_list{right:4rem;}

}

@media (max-width:1030px){
	#header #navi .site-bg{display:none;}
	#header #navi .mbtop{padding:0;}
	#header #navi .mbtop .depth1-div > ul{display:none;}
	#header #navi:after{background:#023a73;}
	.sub-link{display:flex;padding:1.5rem 5vw 0 5vw;flex-direction: row-reverse;justify-content: space-between;align-items: center;}
	.sub-link .mall-btn{color:#fff;width:95px;height:40px;border:1px solid #fff;border-radius:50px;display:flex;align-items:center;justify-content:center;    font-family: "Urbanist";}
	.sub-link .mall-btn img {margin-right:6px;}
	#header.open #navi .mbtop{margin-top:3rem;}
	.sub-link .select_btn {font-size:18px;margin-right:0;}
	.sub-link .select_btn img {margin-right:3px;}
	#header #navi .mbtop > li:first-child > a{padding-top:0;}
}

/*푸터*/
#footer {background:#0C0805;padding:7.5rem 2.5rem  3rem 2.5rem;}
#footer .footer-inn{background:#222222; border-radius:1rem;padding:3.25rem 5.85rem 2.5rem;display:flex;gap:3rem;}
#footer .footer-inn .footer-con {}
#footer .footer-inn .footer-con ul {display:flex;gap:3rem;}
#footer .footer-inn .footer-con ul li{font-size:0.9rem;color:#9F9F9F;}
#footer .footer-inn .footer-con ul li .tit{color:#fff;font-weight:700;margin-bottom:0.5rem;}

#footer .footer-inn .footer-con p.copy {font-size:0.8rem;color:#AAAAAA;margin-top:3.75rem;}

	/*팝업 롤링 추가*/
.layerPopup {position:absolute;top:230px;left:10rem; width:450px; background:#fff;line-height:auto;z-index:99999;border:10px solid #15334F;box-shadow:0 0 4px rgba(0,0,0,0.2); padding-bottom:40px;}
.layerPopWrap{position:relative; width:100%; height:100%;}
.layerPopup ul li img{width:100%;}


.divbg {position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:10;display:none;}


/********************************************************
■ 레이아웃 변경
********************************************************/

@media (max-width:1600px) {
	#footer{padding:5rem 1rem 3rem 1rem;}
	#footer .footer-bottom .left > ul{gap:3rem;}
	#header .header_inner{width:100%;padding:0 1rem;}
	#footer .footer-inn{padding:3rem;}
}
@media (max-width:1400px) {
	#footer .footer-inn{ flex-direction:column;gap:1rem;}
	#footer .footer-inn .footer-con p.copy{margin-top:2.5rem;}

}

@media (max-width:1300px){
	/*헤더*/
	#header .header_inner{width: 100%;}
	#header .header_inner #nav ul{}
	#header .header_inner #nav ul li a {font-size: .9rem; padding: 0 1.5rem;}
	#footer .footer-bottom{display:block;}
	#footer .footer-bottom .right p.copy{margin-top:1.5rem;}
	#footer .footer-bottom .left > ul > li {width:calc(100% / 5 - 1.5rem)}
}
@media (max-width:1030px) {
	#footer .footer-inn .footer-con ul{flex-direction:column;gap:0.75rem;}
	#footer .footer-inn{padding:1.5rem;}
}



/********************************************************
■ 태블릿
********************************************************/
@media (max-width:1030px){
	html{font-size:16px;}
    body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;}


	/*헤더*/
	#header h1 img,
	#footer h3 img{vertical-align:middle; }
	#header .header_inner {height: 4rem;padding:0 1rem;}
	#header .header_inner #nav {display: none;}



	#header .header_inner .header-right a.mall-btn{display:none;}
	#header .header-right .option_list {display:none !important;}
	.sub-link .option_list{left:5vw;right:auto;}



	/*전체메뉴*/
	#header #navi{overflow-y:scroll;}



	#menuAll .mobile_top{width:100%;height:auto; background:transparent; margin-top:4rem;}
	#menuAll .mobile_top:before,
	#menuAll .mobile_top:after{display: none;}
	


    /*1차*/
	#menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0;flex-wrap:wrap; }
	#menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;}
	#header #navi .mbtop > li {width:100%;border-bottom:1px solid rgba(255,255,255,0.2);}
	#menuAll .mobile_top .mbtop > li:before{display:none;}
	#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1.1rem; padding: 20px 5vw 20px 5vw; color:#333; }
	#menuAll .mobile_top .mbtop > li > a:before{display:none;}
    #navi ul.mbtop {width:100%; margin:0; padding:0;}
    #navi ul.mbtop li{margin:0; float:none; width:100%; border-bottom:1px solid rgba(0, 0, 0, .1); position:relative;}

	#navi ul.mbtop li.nosub:after{display:none;}
	#header #navi .mbtop > li > a{font-size:28px;}



	#navi ul.mbtop > li > a {padding:0; background: none; text-align:left; display:block; width:100%; padding: 1rem;box-sizing:border-box; font-size:1.15rem;  font-weight: 700;  color:#262626;}
    #navi ul.mbtop li.open_li{position:relative;}
	#navi ul.mbtop > li.open_li > a{}

    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 2rem 5vw; margin-top:0; margin-left: 0;}
    #navi ul.mbtop li ul.on{display:block;}
	#navi ul.mbtop li ul li {float:none;border:none; box-sizing:border-box;  background: none; padding-left:0;text-align:left;}
    #navi ul.mbtop li ul li a {background:url(none);  height:auto; padding-left:0;  font-size:1rem; color:#333;}	
    #navi ul.mbtop li ul li:after,
	#navi ul.mbtop li ul li:before{display:none;}
	#header #navi .mbtop > li > ul{margin-top:0;padding-top:0;}
	#header #navi .mbtop > li.open_li > ul {display:block;}

    /*3차*/
    #navi ul.mbtop li ul li ul{display:none;border:none; height:0;background:none; margin:0; padding:0;}
    #navi ul.mbtop li ul li ul li {display:none;}
	

	/*팝업 롤링 추가*/
	.layerPopup {left:50% !important;  transform:translateX(-50%);}

	/*푸터*/
	#footer {padding:5rem 1rem 3rem 1rem;}
}


/********************************************************
■ 모바일
********************************************************/
@media (max-width:767px){
	html,body,#wrap{height:auto;}
	html{font-size:15px;}
    body{font-size:1rem; position:relative;}
	.web{display:none;}
	.mob{display:block;}


	/*팝업 롤링 추가*/
	.mobile_dim{width: 100%; height:100%; position: absolute; top: 0; left: 0; margin: 0; z-index: 1039; display: inline-block; background: rgba(0,0,0,0.5);}
	.layerPopup img{width:100% !important;}
	.layerPopup {left:5% !important;  transform:translateX(0%); width:90% !important; height:auto !important; top:130px;}
	.chkvsb{font-size:0.7rem !important;}

	#header .btn-gnb-menu{width:1.75rem;}
}

@media (max-width:620px) {

	#footer .footer-top ul {display:block;}
	#footer .footer-bottom .left > ul{gap:1.5rem;}
	#footer .footer-bottom .left > ul > li{width:calc(100% / 5 - 0.75rem);}
}


@media (max-width:767px) {
	/*언어*/
	.option_list {
		right: 3.2rem;
	}
}