@charset "utf-8";


/* ****************** HEADER ********************** */
#header{position:fixed; height:100px; top:0; left:0; width:100%; z-index:999;
	-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-ms-transition:all 0.4s ease-out;transition:all 0.4s ease-out; }

#header:hover #gnb > ul > li > a{color:#111}
#header:hover #gnb > ul > li.on > a,
#header:hover #gnb > ul > li > a:hover{color:#ed1c24}


#headerInnerWrap{
	position:relative; top:0px; left:0px; width:100%; height:110px; z-index:9999;
	-webkit-transition:background-color 0.5s;
	-moz-transition:background-color 0.5s;
	-o-transition:background-color 0.5s;
	-ms-transition:background-color 0.5s;
	transition:background-color 0.5s
}
#headerInner{	position:relative; height:100%; margin:0px auto; padding:0 0 0 0;  }
#headerInner .logo{position:relative; z-index:100; float:left; padding:0px 0; height:100px; display:inline-block;}	
#headerInner .logo a{display:block; }
#headerInner .logo img{display:block; vertical-align:middle; padding-top:35px;}
#headerInner .logo .m-logo{display:none;}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:absolute; top:50%;  right:100px; margin-top:-15px; z-index:100;}

/* Header :: 파트너사 선택 및 언어선택 */
.header-lang {position:relative; float:left; width:68px; height:28px; border:1px solid #eee; background-color:#eee; z-index:100; margin-left:10px; }
.header-lang .lang-open-btn {overflow:hidden; position:relative; display:block; height:100%; padding:0 10px; font-size:12px; line-height: 30px; letter-spacing:-0.25px; color:#222; }
.header-lang .lang-open-btn i {display:inline-block; margin-right: 6px; vertical-align: middle; font-size:20px; margin-top:-2px; }
.header-lang .lang-open-btn .arrow{position:absolute; top:0px; right:0px;}
.header-lang .lang-open-btn .arrow i{font-size:16px;}
.header-lang > ul {display:none; position:absolute; top:28px; left:-1px; z-index:10; width:100%; background-color:#f2f2f2; border:1px solid #f2f2f2}
.header-lang > ul > li > a{display:block; padding:0 10px; font-size:12px; line-height: 30px; color:#222; font-weight:700}
.header-lang > ul > li > a:hover{background-color:rgba(255,255,255,0.2); }
.header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg); margin-top:-3px;}
/* 파트너사 */
.partners-select{width:108px; background-color:#000; margin-left:0; border-color:#000;}
.partners-select .lang-open-btn{color:#fff}
.partners-select > ul {background-color:#000; border:1px solid #000}
.partners-select > ul > li{display:table; width:100%; height:30px; }
.partners-select > ul > li > a{display:table-cell; vertical-align:middle; color:#fff; line-height:1.3}



/* ****************** HEADER ********************** */
#header{position:absolute; height:var(--header-height); top: 0px; left:0; width:100%; z-index:9999; background:#fff;}

#headerInnerWrap{position:absolute; top:0px; left:0px; width:100%; height:var(--header-height); z-index:9999; transition:var(--transition-custom); transition-property:background-color;}
#headerInner{position:relative; /*display:flex; align-items:left; justify-content:space-between;*/ height:var(--header-height); margin:0px auto; border-bottom:1px solid #ddd;}
#headerInner_in{max-width:1200px; margin:0 auto; }
#header .logo{position:relative; z-index:100; }
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}


#header .out{position:absolute; top:5px; right:40px;  z-index:999; width:200px; margin:0; padding:0;  height:35px; line-height:35px;background:none; text-align:left;}
#header .out span{color:#111; width:110px; text-align:left; padding-right:10px;}
#header .out a{color:#111; font-size:14px; font-weight:600; }
#sub #header .out a{color:#333; font-size:14px; font-weight:600; }



.utilLink {position:absolute; right:0px; top:0px;width:280px; text-align:right;color:#fff;}
.utilLink > a {display:inline-block;font-size:90%;margin:0px; padding: 0px 15px;color:#fff; line-height:1.2; background:url('../img/s_img/top_part.png') no-repeat right 3px;}
.utilLink > a.h{padding-top:9px; padding-right:0; background:none; }
.utilLink > a.last{padding-right:0; background:none;}
.utilLink > a.b_org{font-weight:600; color:#ef5f4b;}
.utilLink > a:last-child {padding-right:0; background:none;}
.utilLink > a.img {padding:0 1px 0 0;}
.utilLink > a.normal {background: #d65e12; color: #fff; height:35px; line-height:35px;}
.utilLink > a:first-child {padding-left:0; background:none;}

.utilLink > a:last-child {padding-right:0; background:none;}
.utilLink > p {float:left; display:inline-block;font-size:90%;margin:0px;padding: 0px 8px;color:#fff; line-height:32px;}
.utilLink > input {margin-right:1px;}

.utilLink span a{padding-left:10px; font-size:14px; color:#fff !important;}


.sitemap-line-btn{position:absolute; top:0px; right:18.75%; width:30px; height:100px; z-index:1111;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.sitemap-line-btn.sitemap-close-btn{position:absolute;}
.sitemap-line-btn .line{
	display:block; position:relative; z-index:1; width:30px; height:3px; background-color:#222; margin: 5px auto;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;
}
.sitemap-line-btn.active span{border-radius:3px;}
.sitemap-line-btn.active span:nth-child(1) {
	 -webkit-transform: translateY(5px) rotate(0deg);
	  -ms-transform: translateY(5px) rotate(0deg);
	  -o-transform: translateY(5px) rotate(0deg);
	  transform: translateY(5px) rotate(0deg);}
.sitemap-line-btn.active span:nth-child(2) { opacity: 0;}
.sitemap-line-btn.active span:nth-child(3) {
	 -webkit-transform: translateY(-9px) rotate(-90deg);
	  -ms-transform: translateY(-9px) rotate(-90deg);
	  -o-transform: translateY(-9px) rotate(-90deg);
	  transform: translateY(-9px)  rotate(-90deg);
}




/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%;background:rgba(0,0,0,0.5); z-index:9997;}	/* gnb overlay BG */
#gnb{position:absolute; text-align:center; top:0; left:0px; padding-left:20%; width:100%; z-index:99; background:#fff; border-bottom:1px solid #ddd;}
#gnb > ul{margin-top:0px; margin-left:auto; padding-left:20%;}
#gnb > ul > li{float:left; word-break:keep-all;}
#gnb > ul > li > a{
	position:relative; z-index:100; display:block; height:100px; line-height:100px; padding:0px 30px 0 30px; text-align:center; color:#111; font-size:18px; font-weight:500; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;
}
#gnb > ul > li:first-child > a{padding-left:0}
#gnb > ul > li > a .kr{font-weight:400;}
#gnb > ul > li > a:hover, 
#gnb > ul > li.on > a,
#gnb > ul > li.active > a{color:#278bda; font-size:20px; font-weight:500;}




/* GNB :: 2차 전체메뉴 */
#gnbBg{
	position:absolute; left:0; top:100px; width:100%; height:0;  background: url('/file/img/s_img/_bg_header.png') repeat 0 0; z-index:98;
	-webkit-transition:height 0.3s;-moz-transition:height 0.3s;-o-transition:height 0.3s;-ms-transition:height 0.3s;transition:height 0.3s;}
#gnbBg.open{height:300px; }



#gnb.total-menu > ul > li .gnb-2dep{
	visibility:hidden;opacity:0;filter:Alpha(opacity=0);
	position:absolute; 
	left:0%;
	top:100px; 
	z-index:99;
	width:100%; 
	padding:40px 0;
	text-align:left; 
	-webkit-transition:all 0s 0s;-moz-transition:all 0s 0s;-o-transition:all 0s 0s;-ms-transition:all 0s 0s;transition:all 0s 0s;
}
#gnb.total-menu > ul > li .gnb-2dep.show{
	visibility:visible; 
	opacity:1.0;filter:Alpha(opacity=100); 
	-webkit-transition:all 0.3s 0.1s;
	-moz-transition:all 0.3s 0.1s;
	-o-transition:all 0.3s 0.1s;
	-ms-transition:all 0.3s 0.1s;
	transition:all 0.3s 0.1s
}
.gnb-2dep-menu-list{width:100%;  margin:0 auto; padding-top:8px; }
.gnb-2dep-menu-list ul{padding-left:17.5%; max-width:1200px; margin:0 auto;}
.gnb-2dep-menu-list li{
	float:left; position:relative; width:50%; padding-right:30px; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;  
 }
 
.gnb1 .gnb-2dep-menu-list li{width:160px; padding-right:20px} 
.gnb2 .gnb-2dep-menu-list li{width:160px; padding-right:20px}
.gnb3 .gnb-2dep-menu-list li{width:160px; padding-right:20px}
.gnb4 .gnb-2dep-menu-list li{width:160px; padding-right:20px}
.gnb5 .gnb-2dep-menu-list li{width:160px; padding-right:20px}
.gnb-2dep-menu-list li a{display:table; position:relative; margin-bottom:20px; font-size:16px; width:100%; height:40px; color:#fff;  -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}

.gnb-2dep-menu-list li a:after {   content: "";    width: calc(100%);    display: block;    position: absolute;    left: 0;    top:39px;    background: #fff;    opacity: 0.2;    z-index: 10;    height: 1px;}



.gnb-2dep-menu-list li a:before{position:absolute; bottom:0px; left:0; width:0; height:1px; background-color:#278bda; content:""; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.gnb-2dep-menu-list li a span{display:table-cell; vertical-align:middle; padding:0 13px; font-size:15px; letter-spacing:-0.5px;}
.gnb-2dep-menu-list li a .gnb-icon{position:absolute; top:0px; right:13px; font-size:16px;}
.gnb-2dep-menu-list li a .gnb-icon i{line-height:49px;}
.gnb-2dep-menu-list li a:hover{color:#278bda;  font-weight:500;}
.gnb-2dep-menu-list li a:hover:before{width:100%;}

.gnb-2dep-menu-txt{float:left; display:table; margin-left:90px; }
.gnb-2dep-menu-txt .gnb-2dep-menu-info{display:table-cell; vertical-align:middle; width:260px; height:170px; background-color:#fff;}
.gnb-2dep-menu-txt .gnb-2dep-menu-info dl{padding:0 30px;}
.gnb-2dep-menu-txt .gnb-2dep-menu-info dl dt{color:#fff; font-size:35px; letter-spacing:-0.25px; margin-bottom:14px; font-weight:700}
.gnb-2dep-menu-txt .gnb-2dep-menu-info dl dt .kr{font-size:30px; font-weight:600;}
.gnb-2dep-menu-txt .gnb-2dep-menu-info dl dd{color:#aaa; font-size:13px; line-height:1.53; letter-spacing:-0.25px;}
.gnb-2dep-menu-txt .gnb-2dep-menu-img{display:table-cell; width:250px; height:170px; vertical-align:middle; background-size:cover !important;}




/* -------- Header :: 메인 헤더 -------- */
.index-wrapper #header{position:fixed;}
.index-wrapper #headerInnerWrap{position:relative; background-color:transparent;}
.index-wrapper #gnb > ul > li > a{color:#111;}
.index-wrapper .sitemap-line-btn{position:absolute;}
.index-wrapper .sitemap-line-btn .line{background-color:#111;}



.index-wrapper .sitemap-line-btn.active .line{background-color:#333;}
.index-wrapper .header-lang {border:1px solid #fff; background-color:transparent;}
.index-wrapper .header-lang .lang-open-btn{color:#fff;}
.index-wrapper .language-select.open{background-color:#000}
.index-wrapper .language-select > ul{background-color:#000}
.index-wrapper .language-select > ul li a{color:#fff;}
.index-wrapper .language-select > ul > li > a:hover{background-color:rgba(255,255,255,0.2); }
.index-wrapper .partners-select{background-color:#fff; border-color:#fff;}
.index-wrapper .partners-select .lang-open-btn{color:#222}
.index-wrapper .partners-select > ul{background-color:#fff; border-color:#fff}
.index-wrapper .partners-select > ul li a{color:#222;}

#header.on{border-bottom:1px solid #ddd;}
/* -------- Header :: 헤더 hover  -------- */
#header.over  #headerInnerWrap{background: url('/file/img/s_img/_bg_header.png') repeat 0 0;}
#header.over #gnb > ul > li > a{color:#111}
#header.over #gnb > ul > li.on > a,
#header.over #gnb > ul > li > a:hover{color:#278bda; font-weight:500;}
#header.over + .sitemap-line-btn .line{background-color:#222;}
#header.over .header-lang {border:1px solid #eee; background-color:#eee;}
#header.over .header-lang .lang-open-btn{color:#222;}
#header.over .partners-select{background-color:#000; border-color:#000;}
#header.over .partners-select .lang-open-btn{color:#fff}

/* -------- Header :: Sub 헤더  숨기기  -------- */
#header.sub-hidden{
	-ms-transform: translateY(-101px); 
    -o-transform: translateY(-101px); 
    -moz-transform: translateY(-101px);
    -webkit-transform: translateY(-101px); 
     transform: translateY(-101px);
}
#header.sub-hidden.up{
	-ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0); 
     transform: translateY(0);
}

/* -------- Header :: GNB(Mobile) -------- */ 
.nav-open-btn{display:none;}
#gnbM{display:none}


/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 헤더 서브메뉴 */
#headerSubMenu{position:relative; width:100%;height:50px; z-index:12; }
#headerSubMenu .side-menu-inner{width:100%; height:48px; background-color: #f5f5f5; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; z-index:11; }
#headerSubMenu .cm-top-menu{padding:0 40px;}
#headerSubMenu .location-to-home-btn{float:left; width:38px; height:100%; }
#headerSubMenu .location-to-home-btn i{color:#222; font-size:18px; line-height:48px;}
#headerSubMenu .menu-location{position:relative; float:left; min-width:180px;}
#headerSubMenu .menu-location:before{position:absolute; top:15px; bottom:15px; left:0; width:1px; background-color:#e5e5e5; content:"";}
#headerSubMenu .menu-location > .cur-location{position:relative; display:block; height:48px; padding:0 35px 0 15px; text-align:left}
#headerSubMenu .menu-location > .cur-location span{display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:48px; color:#222; font-weight:700; font-size:13px;}
#headerSubMenu .menu-location > .cur-location .arrow{position:absolute; top:50%; right:10px; width:20px; height:20px;margin-top:-8px; font-size:20px;}
#headerSubMenu .menu-location > .cur-location .arrow i{font-size:18px; color:#000}
#headerSubMenu .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-10px;}
#headerSubMenu .menu-location .location-menu-con{display:none; position:absolute; top:48px; left:-1px; width:calc(100% - 1px); border:1px solid #e5e5e5; border-top:0; background-color:#f5f5f5; z-index:11; }
#headerSubMenu .menu-location .location-menu-con li a{position:relative; display:block; padding:10px 15px; font-size:13px; word-break:keep-all; line-height:1.5; font-weight:400; color:#222;}
#headerSubMenu .menu-location .location-menu-con li a .gnb-icon{position:absolute; top:10px; right:15px;}
#headerSubMenu .menu-location .location-menu-con li.on{position:relative;}
#headerSubMenu .menu-location .location-menu-con li.on a{color:#278bda; font-weight:700 }


/*  SUB LAYOUT :: 서브메뉴 */
#topMenu01{position:absolute; width:100%; bottom:0px; left:0; height:80px; z-index:1; }
#topMenu01 .side-menu-inner{text-align:center; width:100%; height:80px; background-color: #333; background-color:rgba(0,0,0,0.7);}
#topMenu01 .side-menu-inner ul{display:inline-block; *display:inline;*zoom:1;}
#topMenu01 .side-menu-inner ul li{display:inline-block; width:170px;} /* max-width 자유롭게 수정 */
#topMenu01 .side-menu-inner ul li{margin-left:-4px}
#topMenu01 .side-menu-inner ul li:first-child{margin-left:0}
#topMenu01 .side-menu-inner ul li > a{display:block; display:table; position:relative; width:100%; height:80px; line-height:1.2; 
	color:#ccc; font-size:15px; letter-spacing:-0.5px; font-weight:400; word-break:keep-all;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;}
#topMenu01 .side-menu-inner ul li > a:before{position:absolute; top:25px; bottom:25px; left:0; width:1px; background-color:#fff; content:""; opacity:0.15;filter:Alpha(opacity=15);}
#topMenu01 .side-menu-inner ul li:first-child > a:before{display:none;}
#topMenu01 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 25px; }
#topMenu01 .side-menu-inner ul li > a .gnb-icon{display:none;}
#topMenu01 .side-menu-inner ul li > a:hover{color:#fff;}
#topMenu01 .side-menu-inner ul li.on > a{color:#000; font-weight:500; background-color:#fff;}
#topMenu01 .side-menu-inner ul li.on + li > a:before{display:none;}
#topMenu01 .side-menu-inner .sub-menu-company  li {width:150px;}


/* 2022.01.27. 스크롤 이벤트 추가 */
.scroll_elem{ opacity: 0; transition : 0.7s ease; transform: translate(0, 50px);}
.scroll_up{transform: translate(0, 0px); opacity: 1;}







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

#topMenu01 .side-menu-inner .sub-menu-company {width:100%;}
#topMenu01 .side-menu-inner .sub-menu-company  li {width:12.5%;}
#header{ height:70px; }


#header .out{ top:15px;}





} /* end */

/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */
@media all and (min-width:1221px){

	.fixed-sub-menu.fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;}


} /* end */

/* SUB LAYOUT :: 모바일메뉴(공통)  */
#topMenuM01,
#topMenuM02{display:none;}


/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#content{padding:0px 0}

/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; background-color:#fff; }
.footer-modal-content h1{height:60px; line-height:60px; font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0; background-color:#ed1c24; color:#fff;}
.modal-close-btn{position:absolute; top:11px; right:10px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }




#sitemapContent{	
	opacity:0;filter:Alpha(opacity=0); 
	visibility:hidden;   
	z-index:-1;
	-webkit-transition:all 0.3s  0.5s;
	transition:all 0.3s  0.5s;
	overflow:hidden;}
#sitemapContent:before{display:none;}


#sitemapContent{	
	position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999; opacity:0;filter:Alpha(opacity=0); visibility:hidden; z-index:-1;
	-webkit-transition:all 0.3s  0.5s;-moz-transition:all 0.3s  0.5s;-o-transition:all 0.3s  0.5s;-ms-transition:all 0.3s  0.5s; transition:all 0.3s  0.5s;}


#sitemapContent.open{
	opacity:1.0;filter:Alpha(opacity=100); visibility:visible; z-index:99999; background-color:#fff;
	-webkit-transition:all 0.3s  0s;-moz-transition:all 0.3s 0s;-o-transition:all 0.3s 0s;-ms-transition:all 0.3s 0s;transition:all 0.3s 0s;}

#sitemapInnerCon{position:absolute; top:0; left:0; bottom:0; right:0px; border-right:1px solid #ddd; }
#sitemapContent .sitemap-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100%; }
#sitemapContent .sitemap-bg-box img.gif_animation{z-index:9999;}


#sitemapContent .visual-intro-item{float:left; position:relative; width:20%; height:100%;}
#sitemapContent .visual-intro-item:first-child{width:20%;}
#sitemapContent .visual-intro-item:before{position:absolute;  left:0; width:1px; height:100%; content:""; background-color:#ddd; }


#sitemapContent .visual-intro-item:after{	
	content:""; position:absolute; right:0; top:0px; width:100%; height:100%; background: #278bda; 
	-webkit-transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s;
	transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s;}

#sitemapContent .visual-intro-item:nth-child(odd):before{bottom:0;}
#sitemapContent .visual-intro-item:nth-child(even):before{top:0;}
#sitemapContent.open .visual-intro-item:first-child:before{display:none}
#sitemapContent .visual-intro-item:after{	
	content:""; position:absolute; width:100%; height:100%; right:0; top:0px; background: #333; 
	-webkit-transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s;
	transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s; }


#sitemapContent.open .visual-intro-item:before{height:100%;}
#sitemapContent.open .visual-intro-item:after {width:0;}
#sitemapContent.open .visual-intro-item {
	-webkit-transform: scaleX(1);
	-moz-transform: scaleX(1);
	-ms-transform: scaleX(1);
	-o-transform: scaleX(1);
	transform: scaleX(1); transform-origin:right top; transition-property: transform;}
#sitemapContent.close{opacity:0;filter:Alpha(opacity=0); visibility:hidden;}
#sitemapContent.close .visual-intro-item:before{height:0;}
#sitemapContent.close .visual-intro-item:after {width:100%;}



.sitemap-wrapper{height:100%; }
.sitemap-wrapper > ul{overflow:hidden; position:relative; z-index:1; height:100%;}
.sitemap-wrapper > ul > li{overflow:hidden;  float:left; width:20%; padding-top:10%;height:100%; }
.sitemap-wrapper > ul > li:first-child{ }

#sitemapContent .visual-intro-item:nth-child(5){background: url('/file/img/s_img/sitemap_no01.jpg') no-repeat 0 0 !important; }
#sitemapContent .visual-intro-item:nth-child(7){background: url('/file/img/s_img/sitemap_no02.jpg') no-repeat 0 0 !important; }


.sitemap-wrapper > ul > li > h2{overflow:hidden; color:#191919; font-size:28px; letter-spacing:-1.0px; margin:77px 15% 40px; font-weight:600; }
.sitemap-wrapper > ul > li:hover > h2{color:#00a2e5;}
.sitemap-wrapper > ul > li .sitemap-2dep {z-index:5;}
.sitemap-wrapper > ul > li .sitemap-2dep a{
	overflow:hidden; position:relative; display:block;  padding:20px 15%; color:#555; font-size:18px; letter-spacing:-0.15px; font-weight:500; line-height:1.2em;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}


.sitemap-wrapper > ul > li .sitemap-2dep a:after{
	position:absolute; top:0; left:0; width:0; content:""; height:100%; color:#333;
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
.sitemap-wrapper > ul > li .sitemap-2dep a span{position:relative; z-index:1;}
.sitemap-wrapper > ul > li .sitemap-2dep a .gnb-icon{display:none;}
.sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#00a2e5; }

.sitemap-wrapper > ul > li .sitemap-2dep a:hover:after{width:100%; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}


.sitemap-wrapper > ul > li > h2 > span,
.sitemap-wrapper > ul > li .sitemap-2dep a span{
	display:block; opacity:0;filter:Alpha(opacity=50);
	-webkit-transform:translateX(-5%);
	transform:translateX(-50%);
	transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s, opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s;  }
.sitemap-wrapper.menu-open > ul > li > h2 > span,
.sitemap-wrapper.menu-open > ul > li .sitemap-2dep a span{
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transform:translateX(0);
	transform:translateX(0);
	transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04), opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04); }


@media all and ( max-width: 1120px ){
	#sitemapInnerCon{right:60px;}
	.sitemap-wrapper > ul > li > h2{margin:83px 15px 20px; font-size:16px;}
	.sitemap-wrapper > ul > li .sitemap-2dep a{padding:15px 5px 15px 15px; font-size:13px; line-height:1em;}

} /* end */




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

	.footer-modal-content h1{height:46px; line-height:46px; font-size:18px; text-align:left; padding:0 15px}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
	.sitemap-wrapper{padding:15px}

}/* end */



#sitemapContent.open .gif-animation{display:block;}


/*추가*/


.cm-sitemap-wrapper:not(#sitemapContent)::-webkit-scrollbar{width: 5px; height:5px;}
.cm-sitemap-wrapper:not(#sitemapContent)::-webkit-scrollbar-thumb{background-color:#333; transition:all 0.5s;}
.cm-sitemap-wrapper:not(#sitemapContent)::-webkit-scrollbar-track{background-color:#fff; background:rgba(100,100,100,0.1); border-radius:5px;}
.cm-sitemap-wrapper{font-size:2rem; }
.cm-sitemap-wrapper:not(#siteMapCon01){position:fixed; top:0px; left:0px; width:100%; height:100%; top:0px; height: 100vh; overflow-y:auto; overflow-x:hidden; }
.cm-sitemap-wrapper:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#000; content:""; opacity:0; transition:opacity 0.2s ease;}
.cm-sitemap-wrapper .cm-sitemap-bg{overflow:hidden; position:absolute; left:0; top:0px; width:0; height:100%; background:#000; transition:all 0.6s ease}
.cm-sitemap-container{position:absolute; display:table; width:100%; height:100%; overflow-y:auto; }
.cm-sitemap-inner-con{position: relative; display:table-cell; vertical-align:middle; padding: 5em 0; opacity:0; transition:opacity 0.5s ease 0s }
.cm-sitemap-inner-con .splitting,
.cm-sitemap-inner-con .splitting .word{overflow:hidden;}
.cm-sitemap-inner-con .splitting .word,
.cm-sitemap-inner-con .splitting .char{display:inline-block;}
.sitemap-wrapper-style span.num{display:none;} 


/* 怨듯넻 :: open */

.cm-sitemap-wrapper.open:before{opacity: 0.5}
.cm-sitemap-wrapper.open .cm-sitemap-inner-con{opacity:1.0; transition-delay:0.4s}
.cm-sitemap-wrapper.open .splitting .char{transform:translateY(0); transition-delay:0.3s}


#sitemapContent{overflow:hidden;}
#sitemapContent .cm-sitemap-container-01{position: relative; width: calc(100% - (var(--area-padding) * 2)); max-width:var(--area-width); margin: 50px auto; }
#sitemapContent .sitemap-tit{font-size:2em; font-weight:600; letter-spacing:-0.0208em; text-align:center; padding:0 50px 1em; color:#fff;}
#sitemapContent .sitemap-close-btn{top:-8px; right:-6px; color:#fff; font-size:1.9em; }
#sitemapContent{opacity:0;filter:Alpha(opacity=0); visibility:hidden; z-index:-1;	-webkit-transition:all 0.3s  0.5s;
	transition:all 0.3s  0.5s;overflow:hidden;}
#sitemapContent:before{display:none;}
#sitemapContent .cm-sitemap-container-02{position:absolute; top:0; left:0; bottom:0; width:auto; right:5.2083vw; border-right:1px solid #ddd; display:block; right: 0; border-right: none;}
#sitemapContent .sitemap-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100%; display:flex;}

/* ?ъ씠?몃㏊ 02 :: BG */
#sitemapContent .visual-intro-item{position:relative; height:100%;}
#sitemapContent .visual-intro-item:before{position:absolute;  left:0; top:0px; width:1px; height:0; content:""; background-color:#ddd; z-index:1; }
#sitemapContent .visual-intro-item:first-child:before{display:none}

#sitemapContent .visual-intro-item:after{	
	content:""; position:absolute; right:0; top:0px; width:100%; height:100%; background: #278bda; 
	-webkit-transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s;
	transition: width .6s cubic-bezier(0.47, 0, 0.31, 1.04) 0.2s ;}


#sitemapContent .sitemap-close-btn{position:absolute; top:0px; right:0px; width:5.2083vw; height:5.2083vw; }
#sitemapContent .sitemap-close-btn i{font-size:20px; color:#222; transition:transform 0.5s}
.sitemap-wrapper-style02{height:100%; }
.sitemap-wrapper-style02 > ul > li{overflow:hidden; float:left; width:20%; height:100%;}
.sitemap-wrapper-style02 > ul > li > h2{overflow:hidden; color:#191919; font-size:30px; letter-spacing:-0.033em; margin:0% 4rem 1.33em; font-weight:600; }
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a{
	overflow:hidden; position:relative; display:block; padding:20px 4rem; color:#555; 
	font-size:18px; letter-spacing:-0.01em; font-weight:400; line-height:1.2;-webkit-transition:all 0.3s;	transition:all 0.3s}
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a:hover{color:#fff;}
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a:after{
	position:absolute; top:0; left:0; width:0; content:""; height:100%; -webkit-transition:all 0.3s; transition:all 0.3s}
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a span{position:relative; z-index:1;}
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a .gnb-icon{display:none;}
.sitemap-wrapper-style02 ul li span{
	display:inline-block;	opacity:0;filter:Alpha(opacity=0);-webkit-transform:translateX(-50%);	transform:translateX(-50%);
	transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s, opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04) 0s;}

/* open */
#sitemapContent.open{opacity:1.0;filter:Alpha(opacity=100); visibility:visible; z-index:99999; background-color:#fff;-webkit-transition:all 0.3s  0s; 
	transition:all 0.3s 0s;}

#sitemapContent.open .gif-animation{display:block;}
#sitemapContent.open .visual-intro-item:before{height:100%;}
#sitemapContent.open .visual-intro-item:after {width:0;}
#sitemapContent.open .visual-intro-item {-webkit-transform: scaleX(1);transform: scaleX(1); transform-origin:right top; transition-property: transform;}
#sitemapContent.open .sitemap-wrapper-style02 ul li span{	opacity:1.0;filter:Alpha(opacity=100);	-webkit-transform:translateX(0);	transform:translateX(0);
	transition: transform .8s cubic-bezier(0.47, 0, 0.31, 1.04), opacity .8s cubic-bezier(0.47, 0, 0.31, 1.04); }


@media all and ( min-width: 801px ){

	.sitemap-wrapper-style02 > ul{overflow:hidden; position:relative; z-index:1; top:50%; transform:translateY(-50%);}

} /* end */



@media (hover: hover) {

	#sitemapContent .sitemap-close-btn:hover i{transform:rotate(180deg)}
	.sitemap-wrapper-style02 > ul > li:hover > h2{color:#111;}
	.sitemap-wrapper-style02 > ul > li .sitemap-2dep a:hover{color:#111; background:none;}
	.sitemap-wrapper-style02 > ul > li .sitemap-2dep a:hover:after{width:100%; }

} /* end */



@media all and ( max-width: 800px ){
	#sitemapContent .cm-sitemap-container-02{right:10vw;}
	#sitemapContent .sitemap-close-btn{width:10vw; height:10vw; top:50%; transform:translateY(-50%)}
	#sitemapContent .sitemap-bg-box{display:none;}
	.sitemap-wrapper-style02 > ul > li{float:none; width:auto !important; padding:2em 0; border-bottom:1px solid #ddd;}
	.sitemap-wrapper-style02 > ul > li > h2{margin:0 2rem 0.5em}
	.sitemap-wrapper-style02 > ul > li .sitemap-2dep a{padding:1em 2rem}


/* 2022.01.27. 스크롤 이벤트 추가 */
.scroll_elem{ opacity:1; transition : 0.7s ease; transform: translate(0, 0px);}
.scroll_up{transform: translate(0, 0px); opacity: 1;}

#header .out {
  width: 160px;    top: 12px; rignt:45px;
}

} /* end */