
/*-----기본-----*/
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;}

@media (max-width:1030px){
	html{font-size:16px;}
	body{font-size:1rem}
	#wrap{font-size:1rem;}
	.tablet{display:block;}
}

/*폰트*/
@font-face {
    font-family: 'NanumMyeongjo';
    font-weight: 700; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumMyeongjoEB.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumMyeongjo';
    font-weight: 500; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumMyeongjoB.woff2) format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'NanumMyeongjo';
    font-weight: 400; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/naver/NanumMyeongjo.woff2) format('woff2');
    font-display: swap;
}


#header {height:4rem;position:relative;}
#header .header-inner{width:1800px;margin:0 auto;position:relative;height:100%;}
#header .header-inner h1{position:absolute;top:50%;transform:translateY(-50%);height:1.9rem;}
#header .header-inner h1 a {display:inline-block;width:100%;height:100%;}



/*헤더 스타일*/
#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;vertical-align:top;position:relative;width:10rem;text-align:center;}
#header .header-inner #nav ul li a{text-align:center; color:#333; font-size:1.1rem; font-weight:600; display:inline-block; height:4rem; line-height:4rem; position:relative; padding:0 2.05rem; }
#header .header-inner #nav ul li.on > div  > a{color:#be1f3b;position:relative;}
#header .header-inner #nav ul li.on > div  > a:after{content:'';display:block;position:absolute;width:5px;height:5px;border-radius:50%;background:#be1f3b;left:50%;transform:translateX(-50%);top:0.75rem;}


#header .header-inner #nav ul li ul {z-index: 10;display:none; position: absolute; width:100%;  left:0; top:4rem; padding:1.5rem 0 .5rem; box-sizing:border-box; text-align:center; background:#fff;  height:auto;   display: none;	animation-name: slide_down;	animation-duration:0.5s;    animation-duration: linear; animation-direction: alternate; animation-fill-mode: forwards;
box-shadow: 8px 1px 15px rgb(0 0 0 / 10%);}

#header .header-inner #nav ul li ul li {display:block;margin:0; margin-bottom:13px; line-height:1.5;}
#header .header-inner #nav ul li ul li a{display:inline-block; color:#6b6b6b; font-size:1rem; padding:0; height:auto; font-weight: 400; line-height:1.5; transition: all .2s; -webkit-transition: all .2s;}
#header .header-inner #nav ul li ul li a:hover:before{content:"";position:absolute;width:100%;height:1px;background:#be1f3b;left:0;bottom:-2px;}
#header .header-inner #nav ul li ul li a:hover, #header .header-inner #nav ul li ul li a strong{color:#be1f3b;font-weight:600; }
#header .header-inner #nav ul li ul li ul {position: absolute;overflow: hidden;clip: rect(0,0,0,0);width: 1px;height: 1px;margin: -1px;}
#header .header-inner #nav ul li.active > div > a{color:#be1f3b;position:relative;}
#header .header-inner #nav ul li.active > div > a:after{content:'';display:block;position:absolute;width:5px;height:5px;border-radius:50%;background:#be1f3b;left:50%;transform:translateX(-50%);top:0.75rem;}
#header .header-inner #nav ul li.active ul li{color:#363636;}
#header .header-inner #nav ul li.active ul li:after{display:none;}
#header .header-inner #nav ul li.active ul li p {font-weight:bold;}


/*사이트맵 버튼*/

#header .btn-gnb-menu{ width:4.5rem; height:100%;position:absolute;right:0;top:0;background:#be1f3b;}
#header .btnAll {position:relative; display:block; width:1.75rem; height:1.2rem; margin:0 auto; top:50%;  transform:translateY(-50%);outline: none; z-index:9999;}
#header .btnAll span { display: inline-block; width: 100%; height: 2px; position: absolute; background-color: #fff; -webkit-transition: all 0.25s; transition: all 0.25s; }
#header .btnAll > span:nth-child(1) { top: 0; right:0;}
#header .btnAll > span:nth-child(2) { top: 50%; transform: translateY(-50%); right:0;}
#header .btnAll > span:nth-child(3) { top:100%; right:0;}

#header.open .btnAll > span{background-color: #333;}
#header.open .btnAll > span:nth-child(1) { top: 0.5rem; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 2rem;}
#header.open .btnAll > span:nth-child(2) { top: 0; opacity: 0; width: 2rem;}
#header.open .btnAll > span:nth-child(3) { top: 0.5rem; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 2rem;}
@keyframes slide_down {
  from {
    transform: translateX(0px) translateY(-30px);
	opacity:0; 
  }
  to {
    transform: translateX(0px) translateY(0px);
	opacity:1;
  }
}

@media (max-width:1800px){
	#header .header-inner {width:100%;padding:0 1rem;}

}
@media (max-width:1400px){
	#header .header-inner > ul > li{padding:0 2rem;}
	#header .header-inner h1 img{height:1.5rem;}
	
}
@media (max-width:1030px){
	#header .header-inner h1 img{height:1.8rem;}
	#header .header-inner > ul {display:none;}
	#header{height:3rem;}
	#header.open .btn-gnb-menu{right:1rem;}
	#header .btn-gnb-menu{width:3rem;}
	#header .btnAll{width:1.5rem;height:1rem;}
	#header.open .btnAll > span:nth-child(1),
	#header.open .btnAll > span:nth-child(3) { width: 1.5rem;}
}

/*사이트맵*/
#header #navi{background:#fff; position:fixed; top:-100%; left:0; width:100%; height:100%; padding-top:0; overflow:hidden;  z-index:999; transition:top 0.45s;}
#header.open #navi{transition:top 0.45s; top:0px;display:flex;}
#header #navi > div{height:100%;width:50%;}
#header #navi > div.navi-img {background:url(/images/default/main/navi-bg.jpg)no-repeat center center;background-size:cover;padding:1rem;display:flex;justify-content:center;align-items:center;}
#header #navi > div.navi-img img{max-width:100%;}
#header #navi > div.navi-list{display:flex;align-items: center;}
#header #navi > div.navi-list > ul {width:100%;padding:0 10.5rem 0 5.25rem;}
#header #navi > div.navi-list > ul > li {display:flex;padding:1.5rem 1.25rem;}
#header #navi > div.navi-list > ul > li:not(:last-child){border-bottom:1px solid #ddd;}
#header #navi > div.navi-list > ul > li > a {width:19.5rem;}
#header #navi > div.navi-list > ul > li > a{font-size:1.65rem; font-family: 'NanumMyeongjo';color:#191919;font-weight:600;}
#header #navi > div.navi-list > ul > li > ul {width:calc(100% - 19.5rem);}
#header #navi > div.navi-list > ul > li > ul > li:not(:last-child){margin-bottom:0.5rem;}
#header #navi > div.navi-list > ul > li > ul > li a{font-size:1rem;color:#555;font-weight:500;}
#header #navi > div.navi-list > ul > li > ul > li a strong{color:#be1e3b;font-weight:700;    border-bottom: 1px solid #be1e3b;}
#header #navi > div.navi-list > ul > li > ul > li a:hover{color:#be1e3b;font-weight:700;    border-bottom: 1px solid #be1e3b;}
#header.open #navi > div.navi-bg {display:none;}
@media (max-width:1600px){	

	#header.open #navi > div.navi-list > ul {padding:0 1rem;}
}

@media (max-width:1400px){
	#header.open #navi > div.navi-list > ul > li > a{font-size:1.4rem;width:10rem;}
	#header.open #navi > div.navi-list > ul > li > ul{width:calc(100% - 10rem);}
}
@media (max-width:1030px){
	
	#header .header-inner #nav{display:none;}
	#header #navi > div.navi-img{display:none;}
	#header #navi{padding-top:3rem;}

	
	/*전체메뉴*/
	#header.open .dim{background:rgba(0,0,0,0.6);position:fixed;width:100%;height:100%;z-index:10;top:0;}
	#header #navi{ background : #fff; overflow-y:scroll;width:90%;left:auto;right:0;}


	#menuAll .mobile_top{width:100%;height:auto; background:transparent;padding:0 1rem;}
	#menuAll .mobile_top:before,
	#menuAll .mobile_top:after{display: none;}

	#header.open #navi > div.navi-list > ul {padding:0;}
	#header.open #navi > div.navi-list > ul > li{display:block;padding:0;border-bottom: 1px solid #ddd;}
	#header.open #navi > div.navi-list > ul > li > ul{width:100%;}


    /*1차*/
	#menuAll .mobile_top .mbtop{border: 0; width: 100%; padding:0; }
	#menuAll .mobile_top .mbtop > li{width: 100%; margin:0 !important;}
	#menuAll .mobile_top .mbtop > li:before{display:none;}
	#menuAll .mobile_top .mbtop > li > a{border:0; border-radius: 0; font-size:1.25rem; padding: 1.25rem 0; 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 #dddddd; position:relative;}
	#navi ul.mbtop li:after{ content :"\e913"; display : block; position : absolute; right:0; font-size:1.2rem; font-family:'xeicon'; font-weight:300; color:#333;top:1rem;}
	#navi ul.mbtop li.nosub:after{display:none;}
	#navi ul.mbtop li:last-child{border-bottom:none;}


	#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;border-bottom:none !important;}
	#navi ul.mbtop > li.open_li > a{color:#223573;}
    #navi ul.mbtop li.open_li:after{ content :"\e91a";}

    /*2차*/
    #navi ul.mbtop li ul {display:none; float:none; background-color:#efefef; position:relative; left:0; top:0; width:auto; height:auto; visibility:visible; padding: 1rem; 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;margin-top:1rem;}
    #navi ul.mbtop li ul li a {background:url(none);  height:auto; padding-left:0;  font-size:1.2rem; color:#333;font-weight:400;}	
    #navi ul.mbtop li ul li:after,
	#navi ul.mbtop li ul li:before{display:none;}
    /*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;}
	
	#header.open #navi > div.navi-bg {position:fixed;left:0;top:0;height:100%;background:rgba(0,0,0,0.6);z-index:-1;width:10%;display:block;}
	#header #navi > div{width:100%;}
	#header #navi > div.navi-list{display:block;}

}

@media (max-width:767px){
	#header.open #navi{display:block;}
	#header.open #navi > div.navi-img{height:35%;width:100%;}
	#header.open #navi > div.navi-img img{max-height:100%;}
	#header.open #navi > div.navi-list {width:100%;height:65%;display:block;}
	#header.open #navi > div.navi-list > ul > li > a{width:100%;font-size:1.3rem;}
	#menuAll .mobile_top .mbtop > li > a{padding:1rem 0;}
	#header.open #navi > div.navi-list > ul > li > ul > li:first-child{margin-top:0;}
}


.footer{background:#1c1c1c;padding:3rem 0 4.5rem 0;font-size:0.9rem;}
.footer .inner{width:1800px;margin:0 auto;display:flex;}
.footer .inner ul li {color:#b2b2b2;font-weight:600;}
.footer .inner ul li b{color:#fff;}
.footer .inner ul li em{padding:0 0.85rem;}
.footer .inner > div {margin-left:3.75rem;}
.footer .inner .copy{color:#aaaaaa;font-weight:600;margin-top:2.5rem;}

@media (max-width:1800px){
	.footer .inner{width:100%;padding:0 1rem;display:block;}
	.footer .inner > div{margin-left:0;margin-top:1rem;}
	.footer .inner .copy{margin-top:2rem;}
}
@media (max-width:1030px){ 
	.footer img{height:1.8rem;}
}

.footer-top{height:5.5rem;background:#f5f5f5;border-top:1px solid #ddd;display:flex;align-items:center;}
.footer-top .inner{display:flex;align-items:center;width:1800px;margin:0 auto;}
.footer-top .inner .btn-zone {width:7.25rem;height:2.2rem;position:relative;z-index:1;}
.footer-top .inner .footer-swiper{width:calc(100% - 7.25rem);margin-left:1rem;overflow:hidden;}
.footer-top .inner .footer-swiper ul li {text-align:center;}
.footer-top .inner .footer-swiper ul li a{display:inline-block;}
.footer-top ul {display:flex;    align-items: center;}
.footer-top .inner .btn-zone .swiper-button-prev,
.footer-top .inner .btn-zone .swiper-container-rtl .swiper-button-next {background:#fff url(/images/default/main/left-arrow.svg)no-repeat center center;width:2.2rem;left:0;height:2.2rem; background-size: 0.5rem; border:solid 1px #ddd;}
.footer-top .inner .btn-zone .swiper-button-next  {background:#fff url(/images/default/main/right-arrow.svg)no-repeat center center;width:2.2rem;right:0;height:2.2rem; background-size: 0.5rem; border:solid 1px #ddd;}
.footer-top .inner .btn-zone .play{background:#fff url(/images/default/main/stop-btn.svg)no-repeat center center;width:2.2rem;height:2.2rem;position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: 0.5rem; border:solid 1px #ddd;}
.footer-top .inner .btn-zone .on{background:#fff url(/images/default/main/start-btn.svg)no-repeat center center; background-size: 0.5rem;}


@media (max-width:1800px){
	.footer-top .inner {width:100%;padding:0 1rem;}
	.footer-top .inner .footer-swiper ul li img{max-width:100%;}
}
@media (max-width:1030px){
	.footer-top .inner .btn-zone .play{TOP:39%;}
}

.top-btn{position:fixed;bottom:4rem;right:2.5rem;z-index:10;cursor:pointer;}

@media (max-width:1030px){
	.top-btn{bottom:1rem;right:1rem; width:3rem; height:3rem;}
	.top-btn img{max-width:100%;}
}