@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2020-11-25
******************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

/* ****************** LAYOUT ********************** */
body, table, th, td, button, select, input, textarea {
	font-family:'Play','NanumSquareRound','Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:16px;
	line-height:2.0rem;
	color:#333;
	-webkit-text-size-adjust:none;
	word-break:keep-all;
}
body { background-color:#fff; }
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; }
.area{ max-width:1200px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.sub-area{ max-width:1300px; margin:0px auto;}
.area-box{ max-width:1600px; margin:0px auto; }
.area-big{ max-width:1750px; margin:0px auto; }
.main-area-box{max-width:1430px; margin:0 auto}

.font-noto{font-family:'Noto Sans KR',sans-serif;}
.font-play{font-family:'Play',sans-serif;}

/* ****************** HEADER ********************** */
#header{
	position:absolute; height:90px; top:0; left:0; width:100%; z-index:9999; 
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}	/* 배경위에 헤더가있으면 absolute변경 후 headerInnerWrap 배경삭제 */
/*.fullpage-wrapper #header{
	position:fixed;
}*/
#headerInnerWrap{
	position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:9999; 
	-webkit-transition:background-color 0.3s;
	transition:background-color 0.3s
}
#headerInner{
	position:relative; height:100%; margin:0px auto;
	-webkit-transition:padding 0.3s;
	transition:padding 0.3s
}
#header .logo{position:relative; z-index:100; float:left; padding:20px 0; }	
#header .logo a{display:block; }
#header .logo img{display:block; vertical-align:top;}

/* -------- Header :: 고정 -------- */
#header,#headerInnerWrap{height:90px;}
#headerInnerWrap{position:fixed; z-index:99; background-color:#fff;}
#header.top-fixed #headerInnerWrap{background-color:#fff; border-bottom:1px solid #eee;}
#header.top-fixed #gnb > ul > li > a{color:#333}
#header.top-fixed .header-lang .lang-open-btn{border-color:#333; color:#333}
#header.top-fixed .sitemap-line-btn .line{background-color:#333}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:absolute; top:50%; right:0; margin-top:-16px; z-index:100;}
.header-tel{position:relative; float:right; z-index:100; top:0px; padding-left:50px;}
.header-tel a{display: inline-block; font-size: 30px; font-weight: bold; color: #333;} 
.header-tel a img{margin-right:7px; position:relative; top:-3px;}
@media all and ( max-width: 1024px ){
	.header-tel a{ font-size: 20px;}
	.header-tel a img{width:20px; height:auto; margin-right:5px; top:-0px;}
}

/* Header :: 언어선택 */
.header-lang {position:relative; float:left; z-index:100; top:5px}
.header-lang .lang-open-btn {overflow:hidden; position:relative; display:block; width:100%; text-align:left; height:100%; padding:0 10px; font-size:14px; letter-spacing:-0.45px; padding-bottom:8px; color:#fff; border-bottom:2px solid #fff; font-weight:400; transition:all 0.4s}
.header-lang .lang-open-btn i {display:inline-block; vertical-align: middle; font-size:20px; margin-top:-2px; }
.header-lang .lang-open-btn .arrow{display:inline-block; margin-left:15px}
.header-lang .lang-open-btn .arrow i{font-size:16px;}
.header-lang > ul {display:none; position:absolute; top:26px; left:0; z-index:10; width:100%; background-color:#fff;}
.header-lang > ul > li > a{display:block; padding:0 10px; font-size:11px; line-height: 30px; color:#333;}
.header-lang > ul > li > a:hover{background-color:#f2f2f2; }
.header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg); margin-top:-3px;}
#header.open .header-lang .lang-open-btn{border-color:#0d0c0a; color:#0d0c0a}

/* Header :: 사이트맵버튼 */
.sitemap-line-btn{float:left; margin-left:20px; box-sizing:border-box; margin-top:0px}
.sitemap-line-btn .line{display:block; width:28px; height:2px; background-color:#333; margin: 7px auto; /*-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;*/}
#header.open .sitemap-line-btn .line{background-color:#0d0c0a}
/* active */
.sitemap-open-btn.active{z-index:0;}
.sitemap-open-btn.active .line:nth-child(2), 
.sitemap-open-btn.active .line:nth-child(4){opacity: 0;}
.sitemap-open-btn.active .line:nth-child(1){
	 -webkit-transform: translateY(10px) rotate(45deg);
	  transform: translateY(10px) rotate(45deg);
}
.sitemap-open-btn.active .line:nth-child(3){
	 -webkit-transform: translateY(-10px) rotate(-45deg);
	  transform: translateY(-10px) rotate(-45deg);
}

/* -------- 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; width:100%; z-index:99;}
#gnb > ul{display:inline-block; *display:inline;*zoom:1;}
#gnb > ul > li{/*position:relative;*/ float:left; word-break:keep-all;}
#gnb > ul > li > a{ position:relative; z-index:100; display:block; height:90px; line-height:90px; padding:0 22px; text-align:center; color:#333; font-size:18px; letter-spacing:-0.45px; font-weight:500; -webkit-transition:all 0.5s; transition:all 0.5s; }
#gnb > ul > li.on > a{color:#cc0000;}
#gnb.open > ul > li > a{color:#303030}
#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color:#d8231e;}

/* GNB :: 2차 전체메뉴 */
#gnbBg{
	overflow:hidden; position:absolute; left:0; top:0px; width:100%; height:0; background:#fff; z-index:98;
	-webkit-transition:height 0.3s ease-in-out;
	transition:height 0.3s ease-in-out; 
}
#gnbBg:after{position:absolute; top:89px; width:100%; left:0; height:1px; background-color:#ddd; content:"";}
#gnbBg:before{position:absolute; content:""; width:48%; height:100%; background-color:#f6f6f6; left:0; top:90px}
#gnb.total-menu > ul > li .gnb-2dep{
	position:absolute; 
	top:90px; 
	left:0px; 
	z-index:99;
	width:100%; 
	text-align:left; 
	border-right:1px solid #ddd;
	opacity:0; filter:Alpha(opacity=0);
	height:0;
	/*-webkit-transition: all 0.3s 0s;
    transition: all 0.3s 0s;*/
	visibility:hidden;
}
#gnb.total-menu > ul > li .gnb-2dep .gnb-2dep-inner{display:table; width:100%; max-width:1300px; margin:0 auto; }
#gnb.total-menu > ul > li .gnb-2dep .gnb-2dep-inner > div{display:table-cell; vertical-align:middle;}
/* 헤더메뉴 :: 왼쪽 메뉴설명 */
#gnb.total-menu > ul > li .gnb-2dep .menu-lf-txt{text-align:right; width:47%; }
#gnb.total-menu > ul > li .gnb-2dep .menu-lf-txt .txt-inner{display:inline-block; max-width:595px; width:100%; text-align:left}
#gnb.total-menu > ul > li .gnb-2dep .menu-lf-txt .txt-inner .tit{font-weight:600; font-size:30px; letter-spacing:-0.5px; color:#303030}
#gnb.total-menu > ul > li .gnb-2dep .menu-lf-txt .txt-inner .txt{font-weight:400; font-size:16.5px; letter-spacing:-0.5px; color:#565656; opacity:0.6; line-height:1.69; margin-top:25px}
/* 헤더메뉴 :: 오른쪽 메뉴리스트 */
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list{width:352px; border-right:1px solid #e0e0e0; padding:30px 0;}
#gnb.total-menu > ul > li.gnb2 .gnb-2dep .menu-rt-list{ }
#gnb.total-menu > ul > li.gnb3 .gnb-2dep .menu-rt-list{padding:0px 0; }
#gnb.total-menu > ul > li.gnb4 .gnb-2dep .menu-rt-list{padding:0px 0; }
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list{padding:25px 0; }
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .menu-list{box-sizing:border-box; position:relative; margin-top:-15px}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .menu-list li{padding:0 35px}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .menu-list li a{display:table; width:100%; height:56px; font-weight:400; font-size:16px; letter-spacing:0; color:#757575; transition:all 0.3s; border-bottom:1px solid #e0e0e0; position:relative}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .menu-list li a:hover{font-weight:700; color:#d8231e; border-color:#d8231e}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .menu-list li a span{display:table-cell; vertical-align:middle; padding-left:12px}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .link-con{padding:30px 0; text-align:center; }
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list .link-con{padding:0px 0; }
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .link-con .link-inner{display:inline-block; width:268px; height:160px; background:url("/design/default/images/header_menulink_bg01.jpg") no-repeat 50% 0; background-size:cover; text-align:left}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .link-con .link-inner.link-02{background:url("/design/default/images/header_menulink_bg02.jpg") no-repeat 50% 0; margin-top:13px}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .link-con .link-inner a{display:table; width:100%; height:100%}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .link-con .link-inner a p{display:table-cell; vertical-align:middle; padding-left:40px; font-weight:500; font-size:16.5px; color:#fff; line-height:1.69; letter-spacing:-0.65px}
#gnb.total-menu > ul > li .gnb-2dep .menu-rt-list .link-con .link-inner a p .arrow-icon{display:block; width:19px; height:10px; background:url("/design/default/images/cm_style_arrow05.png") no-repeat; background-size:contain !important; margin-top:20px}

/* 기업정보 메뉴 :: 3차메뉴 */
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list{vertical-align:middle}
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list .menu-list{margin-top:10px}
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list .menu-list > li > a{position:relative;}
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list .menu-list > li > a:after{position:absolute; content:""; width:20px; height:20px; background:url("/images/icon/header_menu_arrow02.png") no-repeat; background-size:contain !important; right:15px; top:50%; transform:translateY(-50%); opacity:0; transition:all 0.3s}
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list .menu-list > li.on > a{color:#ed1c24; border-color:#ed1c24; font-weight:700}
#gnb.total-menu > ul > li.gnb5 .gnb-2dep .menu-rt-list .menu-list > li.on > a:after{opacity:1}
#gnb.total-menu > ul > li .gnb-2dep .gnb-3dep-con{height:330px; border-right:0}
#gnb.total-menu > ul > li .gnb-2dep .gnb-3dep{display:none; position:absolute; top:0; left:335px; height:332px; width:321px; box-sizing:border-box}
#gnb.total-menu > ul > li .gnb-2dep .gnb-3dep:after{position:absolute; content:""; width:1px; height:100%; background-color:#e0e0e0; top:-10px; right:0}
#gnb.total-menu > ul > li .gnb-2dep li.on .gnb-3dep{display:block}
#gnb.total-menu > ul > li .gnb-2dep .gnb-3dep > li > a{padding-left:10px}
#gnb.total-menu > ul > li .gnb-2dep .gnb-3dep > li > a:before{position:absolute; content:"-"; left:12px; top:20px}

/* GNB :: 2차메뉴 Over (높이변경) */
#gnb.open #gnbBg{height:370px; border-bottom:1px solid #e0e0e0; }
#gnb.menu-1.open #gnbBg,
#gnb.menu-1on.open #gnbBg{height:0px; }
#gnb.menu-2.open #gnbBg,
#gnb.menu-2on.open #gnbBg{height:0px; }
#gnb.menu-3.open #gnbBg,
#gnb.menu-3on.open #gnbBg{height:0px; }
#gnb.menu-4.open #gnbBg,
#gnb.menu-4on.open #gnbBg{height:0px; }
#gnb.menu-5.open #gnbBg,
#gnb.menu-5on.open #gnbBg{height:0px; }
#gnb.menu-6.open #gnbBg,
#gnb.menu-6on.open #gnbBg{height:0px; }
#gnb.menu-7.open #gnbBg,
#gnb.menu-7on.open #gnbBg{height:0px; }
#gnb.menu-8.open #gnbBg,
#gnb.menu-8on.open #gnbBg{height:567px; }
#gnb.menu-9.open #gnbBg,
#gnb.menu-9on.open #gnbBg{height:381px; }
#gnb.menu-10.open #gnbBg,
#gnb.menu-10on.open #gnbBg{height:567px; }

#gnb.open > ul > li.on .gnb-2dep,
#gnb.open > ul > li.over .gnb-2dep{
	height:280px; opacity:1.0;filter:Alpha(opacity=100);
	visibility:visible;
	-webkit-transition: height 0.5s ease-in-out, opacity 0.15s ease-in-out 0.2s;
    transition: height 0.5s ease-in-out, opacity 0.15s ease-in-out 0.2s;
}
#gnb.open > ul > li.gnb1.on .gnb-2dep,
#gnb.open > ul > li.gnb1.over .gnb-2dep{height:0px;}
#gnb.open > ul > li.gnb2.on .gnb-2dep,
#gnb.open > ul > li.gnb2.over .gnb-2dep{height:557px;}
#gnb.open > ul > li.gnb3.on .gnb-2dep,
#gnb.open > ul > li.gnb3.over .gnb-2dep{height:226px;}
#gnb.open > ul > li.gnb4.on .gnb-2dep,
#gnb.open > ul > li.gnb4.over .gnb-2dep{height:226px;}
#gnb.open > ul > li.gnb5.on .gnb-2dep,
#gnb.open > ul > li.gnb5.over .gnb-2dep{height:216px;}
#gnb.open > ul > li.gnb6.on .gnb-2dep,
#gnb.open > ul > li.gnb6.over .gnb-2dep{height:216px;}
#gnb.open > ul > li.gnb7.on .gnb-2dep,
#gnb.open > ul > li.gnb7.over .gnb-2dep{height:216px;}
#gnb.open > ul > li.gnb8.on .gnb-2dep,
#gnb.open > ul > li.gnb8.over .gnb-2dep{height:216px;}
#gnb.open > ul > li.gnb9.on .gnb-2dep,
#gnb.open > ul > li.gnb9.over .gnb-2dep{height:216px;}
#gnb.open > ul > li.gnb10.on .gnb-2dep,
#gnb.open > ul > li.gnb10.over .gnb-2dep{height:216px;}


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




/* ****************** SUB LAYOUT ********************** */
/*  SUB LAYOUT :: 비주얼 */
#visual{position:relative; /*overflow:hidden;*/ width:100%; height:600px; }
#visual .visual-img-con{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	-webkit-transition:transform 5000ms  ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
#visual .visual-txt-con{position:relative; z-index:1; text-align:left; display:table; width:100%; height:100%; letter-spacing:-0.5px; color:#fff; box-sizing:border-box; z-index:9}
#visual .visual-txt-container{position:relative; width:100%; }
#visual .visual-tit{
	opacity:0;filter:Alpha(opacity=0);
    -webkit-transform: translateY(-30px); 
     transform: translateY(-30px);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
#visual .visual-tit{
	font-weight:600; 
	font-size:48px; 
	letter-spacing:-0.4px;
	-webkit-transition-delay:0.2s;
	transition-delay:0.2s;
}
/* SUB LAYOUT :: 상단효과 active */
#visual.active .visual-img-con{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
#visual.active .visual-tit{
	opacity:1.0;filter:Alpha(opacity=100);
    -webkit-transform: translateY(0px); 
     transform: translateY(0px);
}


/* SUB LAYOUT :: 서브비주얼 메뉴 */
.visual-drop-open-btn-style{display:none}
.visual-menu-con{position:absolute; bottom:45px; right:0; display:none !important}
.visual-menu-con .visual-menu-list{}
.visual-menu-con .visual-menu-list li{position:relative; display:inline-block; font-weight:400; font-size:17px; letter-spacing:-0.45px; padding:0 60px}
.visual-menu-con .visual-menu-list li:after{position:absolute; content:""; width:1px; height:13px; background-color:#fff; opacity:0.3; right:0; top:2px}
.visual-menu-con .visual-menu-list li:last-child{padding-right:0}
.visual-menu-con .visual-menu-list li:last-child:after{display:none}
.visual-menu-con .visual-menu-list li a{position:relative; display:inline-block}
.visual-menu-con .visual-menu-list li a:after{position:absolute; content:""; width:calc(100% + 24px); height:2px; left:-12px; bottom:-19px; background-color:#fff; opacity:0; transition:opacity 0.3s}
.visual-menu-con .visual-menu-list li a span{color:#fff;}
.visual-menu-con .visual-menu-list li.on a:after,
.visual-menu-con .visual-menu-list li a:hover:after{opacity:1}

/*  SUB LAYOUT :: 서브메뉴(스타일3) */
#topMenu04{position:relative; width:100%;height:65px; background-color:#f7f7f7; z-index:2}
#topMenu04 .side-menu-inner{width:100%; height:64px; border-bottom:1px solid #ddd;}
#topMenu04 .side-menu-inner .cm-top-menu{max-width:1790px; margin:0 auto}
#topMenu04 .location-to-home-btn{float:left; width:69px; height:64px; text-align:center; position:relative; line-height:62px}
#topMenu04 .location-to-home-btn img{}
#topMenu04 .location-to-home-btn i{color:#5d5d5d; font-size:15px; line-height:64px; font-weight:600}
#topMenu04 .menu-location{position:relative; float:left; width:225px;}
#topMenu04 .location-to-home-btn:after,
#topMenu04 .menu-location:after{position:absolute; content:""; width:1px; height:12px; background-color:#d8d8d8; right:0; top:50%; transform:translateY(-50%); z-index:0}
#topMenu04 .menu-location > .cur-location{position:relative; display:block; width:100%; height:64px; padding:0 40px; text-align:left; z-index:99; }
#topMenu04 .menu-location > .cur-location span{display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:64px; color:#5d5d5d; font-weight:400; font-size:15px; letter-spacing:-0.25px;}
#topMenu04 .menu-location > .cur-location .arrow{position:absolute; top:50%; right:38px; width:17px; height:17px;margin-top:-10px; background:url("/images/icon/sub_menu_arrow.png") no-repeat; background-size:contain !important}
#topMenu04 .menu-location .location-menu-con{opacity:0; position:absolute; top:63px; left:-1px; width:100%; background-color:#fff; z-index:-1; padding:15px 0; transition:all 0.2s; height:0; padding:0}
#topMenu04 .menu-location .location-menu-con:after{position:absolute; content:""; width:100%; height:calc(100% + 64px); background-color:#fff; box-shadow:2px 3px 13px 0px rgba(0,0,0,0.17); transition:all 0s; top:-64px; left:0; z-index:0; border:1px solid #bababa; box-sizing:border-box}
#topMenu04 .menu-location .location-menu-con:before{position:absolute; content:""; width:calc(100% - 22px); height:1px; background-color:#d8d8d8; top:0; left:11px; z-index:9}
#topMenu04 .menu-location .location-menu-con li{position:relative; z-index:-99; text-align:center; padding:15px 0; display:none}
#topMenu04 .menu-location .location-menu-con li a{display:inline-block; font-size:15px; word-break:keep-all; line-height:1.5; color:#5d5d5d; letter-spacing:-0.25px;}
#topMenu04 .menu-location .location-menu-con li a span{position:relative; display:inline-block;}
#topMenu04 .menu-location .location-menu-con li.on a{color:#ed1c24;}
#topMenu04 .menu-location .location-menu-con li.on a span:after{position:absolute; content:""; width:calc(100% + 10px); height:1px; background-color:#ed1c24; bottom:0; left:-5px}
#topMenu04 .menu-location.open .location-menu-con{opacity:1; height:auto; padding:15px 0; z-index:9}
#topMenu04 .menu-location.open .location-menu-con li{z-index:9;  display:block}

/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */
@media all and (min-width:1025px){
	.fixed-sub-menu.top-fixed .side-menu-inner{position:fixed; top:0px; left:0px; z-index:9999;}
}

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

/*  SUB LAYOUT :: 컨텐츠 레이아웃 */
#content:not(.wide){padding:125px 0}
#content.wide{padding:125px 0 0 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); transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg);  }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; background-color:#fff; padding:50px; box-sizing:border-box}
.footer-modal-content h1{font-size:30px; font-weight:600; letter-spacing:-0.5px; color:#303030; border-bottom:1px solid #303030; padding-bottom:35px}
.modal-close-btn{position:absolute; top:43px; right:43px; color:#303030; }
.modal-close-btn i{font-size:38px;}
.footer-inner-box{padding-top:50px}
.footer-inner{height:350px; overflow-y:auto; overflow-x:hidden;}

/* ****************** 사이트맵 ********************** */
/* -------- 사이트맵 01 -------- */
/* 사이트맵 01 */
.sitemap-wrapper{padding:30px; background-color:#fff;}
.sitemap-wrapper > ul{width:100%; display:flex; flex-wrap:wrap}
.sitemap-wrapper > ul > li{text-align:center; float:left; width:33.333%}
.sitemap-wrapper > ul > li > h2{color:#fff; margin:0 2% 15px 2%; padding:15px; font-size:18px; background-color:#be2222;  letter-spacing:-1.0px; font-weight:500;}
.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5% 20px;}
.sitemap-wrapper > ul > li .sitemap-2dep a{display:block; padding:10px 0; color:#666; font-size:14px; font-weight:400; line-height:1.2em;}
.sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#000; }
.sitemap-wrapper > ul > li.has-3dep{width:66.666%}
.sitemap-wrapper > ul > li.has-3dep .sitemap-2dep > li{float:left; width:25%}
.sitemap-wrapper > ul > li.has-3dep .sitemap-2dep > li > a{font-weight:600}

/* -------- 사이트맵 02 -------- */
/* 사이트맵 02 :: Layout */
#sitemapContent{	
	position:fixed; 
	top:0; left:0; right:0; bottom:0; 
	opacity:0;filter:Alpha(opacity=0); 
	visibility:hidden;   
	z-index:-1;
	-webkit-transition:all 0.3s  0.5s;
	transition:all 0.3s  0.5s;
}
#sitemapInnerCon{position:absolute; top:0; left:0; bottom:0; right:75px; left:90px; border-right:1px solid rgba(255,255,255,0.2); border-left:1px solid rgba(255,255,255,0.2); }
#sitemapContent .sitemap-bg-box{position:absolute; top:0px; left:0px; width:100%; height:100%;}
#sitemapContent .visual-intro-item{float:left; position:relative; height:100%;}
#sitemapContent .visual-intro-item:before{
	position:absolute;  left:0; top:0px; width:1px; height:0; content:""; background-color:rgba(255,255,255,0.2); 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: #505050; 
	-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:0; right:0; width:75px; height:75px; background-color:#505050;}
#sitemapContent .sitemap-close-btn i{font-size:32px; color:#fff;}

/* 사이트맵 02 :: 메뉴리스트 */
.sitemap-wrapper-style02{height:100%; }
.sitemap-wrapper-style02 > ul{overflow:hidden; position:relative; z-index:1; top:50%; transform:translateY(-50%); margin-top:-2%}
.sitemap-wrapper-style02 > ul > li{overflow:hidden; float:left; width:20%;height:100%;}
.sitemap-wrapper-style02 > ul > li > h2{overflow:hidden; color:#fff; font-size:30px; letter-spacing:-0.5px; margin:0% 15% 0 19%; font-weight:600; line-height:1.2; display:table; height:70px}
.sitemap-wrapper-style02 > ul > li > h2 a{color:#fff;}
.sitemap-wrapper-style02 > ul > li > h2 span{display:table-cell; vertical-align:top}
.sitemap-wrapper-style02 > ul > li > h2.hide{opacity:0}

.sitemap-wrapper-style02 > ul > li .sitemap-2dep a{
	overflow:hidden; position:relative; display:inline-block;  margin:19px 15% 19px 19%; color:#c3c3c3; font-size:16.5px; letter-spacing:-0.5px; font-weight:400; line-height:1.2;
	-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-style02 > ul > li .sitemap-2dep a span{position:relative; display:inline-block; z-index:1; padding-left:9px;}
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a span:before{position:absolute; content:"-"; left:0; top:0;}
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a .gnb-icon{display:none;}
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a:hover{color:#fff; }
.sitemap-wrapper-style02 > ul > li .sitemap-2dep a:hover:after{width:100%; }
.sitemap-wrapper-style02 > ul > li .sitemap-2dep h3{margin:0 15% 0 19%; padding:19px 0; font-weight:600; font-size:20px; letter-spacing:-0.5px; color:#5e5e5e; overflow:hidden }
.sitemap-wrapper-style02 > ul > li .sitemap-2dep h3 span{display:block; }
.sitemap-wrapper-style02 > ul > li .sitemap-2dep .gnb-3dep{padding-bottom:15px}

.sitemap-wrapper-style02 ul li span,
.sitemap-wrapper-style02 > ul > li .sitemap-2dep h3 span{
	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; 
}
/* 사이트맵 open */
#sitemapContent.open{
	opacity:1.0;filter:Alpha(opacity=100); 
	visibility:visible; 
	z-index:99999; 
	background-color:#242424;
	-webkit-transition:all 0.3s  0s; 
	transition:all 0.3s 0s;
}
#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,
#sitemapContent.open .sitemap-wrapper-style02 > ul > li .sitemap-2dep h3 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); 
}


/* ************* 하단 공통 :: 문의하기 배너 *************** */
.bt-inquiry-banner{position:relative; width:100%; height:438px; overflow:hidden}
.bt-inquiry-banner .banner-bg{position:absolute; top:0; left:0; width:100%; height:100%; background:url("/design/default/images/sec05_bg.jpg") no-repeat 50% 0; background-size:cover; transition:transform 3.5s, opacity 2.5s; opacity:0}
.bt-inquiry-banner .inquiry-banner{display:table; width:100%; height:100%; text-align:center; position:relative}
.bt-inquiry-banner .inquiry-banner .banner-inner{display:table-cell; vertical-align:middle;}
.bt-inquiry-banner .inquiry-banner .banner-inner .txt{font-weight:300; font-size:24px; letter-spacing:-0.65px; color:#fff; line-height:1}
.bt-inquiry-banner .inquiry-banner .banner-inner .txt strong{font-size:38px;}
.bt-inquiry-banner .inquiry-banner .banner-inner .inquiry-btn{display:inline-block; font-weight:500; font-size:16.5px; color:#fff; margin-top:80px; opacity:0; border-bottom:2px solid #d8231e; padding-bottom:10px;}
.bt-inquiry-banner .inquiry-banner .banner-inner .inquiry-btn .arrow{display:inline-block; width:19px; height:10px; background:url("/design/default/images/cm_style_arrow05.png") no-repeat; background-size:contain !important; margin-left:15px; vertical-align:middle; position:relative; top:-2px; transition:transform 0.3s}

.cm-arrow-btn:hover .arrow{transform:translateX(6px)}

/* 효과 */
.aos-animate.bt-inquiry-banner .banner-bg{transform:skew(0.001deg, 0deg) scale(1.2, 1.2); opacity:1}
.bt-inquiry-banner .inquiry-banner .banner-inner .txt.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:opacity 0.8s, transform 0.8s;
}
.aos-animate.bt-inquiry-banner .inquiry-banner .banner-inner .txt.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
} 
.aos-animate.bt-inquiry-banner .inquiry-banner .banner-inner .inquiry-btn{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	-webkit-animation-delay:0.5s; animation-delay:0.5;
}