@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; /* background-color:#000 */ }
.alt-img {position:absolute; top:0; left:0; width:100%; height:100%;}
.alt-img img {width:100%; height:100%;}
/* 메인 비주얼 :: 영상 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%;/*  background-color:#000; */}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%; background:url("/images/main/main_visual_01.jpg") no-repeat center / cover; transition: all 0.4s;}
.about-page .background-video {background:none;}
.background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0.9;filter:Alpha(opacity=90);
	/* opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s; */
}
.background-video.start {background:#000;}
.background-video.start iframe{}

/* 메인 비주얼 :: 영상(비메오) */
#mainVisual .video-wrapper{
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#mainVisual .video-wrapper:after{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	content:"";
}
#mainVisual #visualVideo {
	position:absolute; 
	top:50%; 
	left:50%; 
	min-width:100%; 
	min-height:100%; 
	-ms-transform:translate(-50%,-50%); 
	-webkit-transform:translate(-50%,-50%); 
	transform:translate(-50%,-50%);
}

/* 메인 커버 */
.ms-preloader {width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #151515;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:99;
}
.main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{/* display:inline-block; */ display:block; font-size:6.2rem; font-weight:400; letter-spacing:-0.03em; color:#fff; margin-bottom:3.8rem;}
.main-visual-txt-box .main-visual-txt1 strong {font-weight: 700;}
.main-visual-txt-box .main-visual-txt2{font-size:2.3rem; letter-spacing:-0.05em; color:#fff; font-weight: 500; line-height:1.5;}
.main-visual-txt-box .visual-more {/* position: relative; */ display:flex; align-items:center; font-size:1.45rem; font-weight: 700; color:#fff; margin-top: 8rem; width: 12rem; height: 3rem;}
.main-visual-txt-box .visual-more em {padding-right: 8px;}
.main-visual-txt-box .visual-more .arrow {display:flex; align-items:center;}
.main-visual-txt-box .visual-more .arrow .bar {width: 3rem; height: 1px; transition: width 0.2s ease-out;}
.main-visual-txt-box .visual-more .arrow .head {margin-left:-5px;}
.main-visual-txt-box .visual-more:hover .arrow .bar {width:4.5rem;}

.main-visual-txt-box .visual-more .pointer {display: block; width: 6rem; height: 6rem; border-radius:50%; background:#83aff9; position:absolute; left:1rem; opacity:0.5; z-index:-1; }

.main-visual-item:last-of-type .main-visual-txt-box .visual-more {margin:8rem auto 0;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2{
	animation: text-fade-in 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.active-item.first .main-visual-txt1 {animation-delay:0.1s;}
.active-item.first .main-visual-txt2 {animation-delay:0.3s;}

.active-item .main-visual-txt1{animation-delay:0.8s;}
.active-item .main-visual-txt2{animation-delay:1s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-in 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

.main-visual-con, .main-visual-con .slick-list, .main-visual-con .slick-track, .main-visual-item {height: 100%;}
.main-visual-img {width: 100%; height: 100%; background-size:cover !important;}
.main-visual-con .main-visual-item.active-item .main-visual-img {animation:image-zoom-in 6s 0s forwards;}
.main-visual-item .main-visual-m-img {display:none;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

@keyframes text-fade-in {
	from {
		opacity:0;filter:Alpha(opacity=100);
	}
	to {
		opacity:1;filter:Alpha(opacity=0);
	}
}

@keyframes image-zoom-in {
	from {
		transform: scale(1.0,1.0)
	}
	to {
		transform: scale(1.1,1.1)
	}
}

.main-visual-item.last .main-visual-txt-box {align-items:baseline; justify-content: center; text-align: center;}
.main-visual-item.last .main-visual-txt-box .main-visual-txt1 {font-size:7.2rem; margin-bottom: 1.9rem;}
.main-visual-item.last .main-visual-txt-box .main-visual-txt2 {font-weight: 300; font-size:3.6rem;}
.main-visual-item.last .main-visual-txt-box .main-visual-txt2 strong{font-weight: 700;}
.main-visual-item.last .main-visual-txt-inner {padding-top:17.9rem;}

/* 메인 비주얼 첫번째 , 마지막 아이템 제외 공통점 */
.main-visual-item:not(.first, .last) .main-visual-txt1 {color:#111;}
.main-visual-item:not(.first, .last) .main-visual-txt2 {color:rgba(17,17,17,0.8);}
.main-visual-item:not(.first, .last) .main-visual-txt-box .visual-more {color:rgba(17,17,17,0.8);}
/* .main-visual-item:not(.first, .last) .main-visual-txt-box .visual-more .arrow {background:url(/images/content/arrow_icon.png)no-repeat; background-size:contain;} */

/* 메인 비주얼 :: 스크롤아이콘 */
/* .main-scroll-icon{position:absolute; bottom:55px; left:50%; margin-left:-9.5px; text-align:center; z-index:9; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span {display:block;text-indent:-9999px;position:relative;margin:0 auto 0;width: 19px;height: 11px;background:url("/images/main/ico_scrolldown.png") no-repeat 0 0;animation: arrow 1.6s ease-in-out infinite;}
.main-scroll-icon span:before {content:'';position:absolute;width:19px;height:11px;top:-7px;left:0;background:url("/images/main/ico_scrolldown.png") no-repeat 0 0;opacity:0.7;z-index:1;}
@keyframes arrow {
	0% {
		opacity: 1;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform:  translateY(-5px);
	}
} */
.cm-scroll-icon{display:block; position: absolute;
    bottom: 30px;
    left: 50%;
    text-align: center;
    transform: translateX(-50%); z-index:100;}
.cm-scroll-icon .scroll-txt {
    display: block;
    color: #fff;
    letter-spacing: 2px;
    font-size: 0;
    font-weight: 600;
    margin-bottom: 10px;
}
.cm-scroll-icon .scroll-txt em {
    font-size: 12px;
    display: inline-block;
    animation: scroll-down-ani 2s ease-in-out 0s infinite;
}
.cm-scroll-icon .scroll-txt em:nth-child(1) {animation-delay:1s;}
.cm-scroll-icon .scroll-txt em:nth-child(2) {animation-delay:1.04s;}
.cm-scroll-icon .scroll-txt em:nth-child(3) {animation-delay:1.08s;}
.cm-scroll-icon .scroll-txt em:nth-child(4) {animation-delay:1.12s;}
.cm-scroll-icon .scroll-txt em:nth-child(5) {animation-delay:1.16s;}
.cm-scroll-icon .scroll-txt em:nth-child(6) {animation-delay:1.2s;}
.cm-scroll-icon .scroll-txt em:nth-child(7) {animation-delay:1.24s;}
.cm-scroll-icon .scroll-txt em:nth-child(8) {animation-delay:1.28s;}
.cm-scroll-icon .scroll-txt em:nth-child(9) {animation-delay:1.32s;}
.cm-scroll-icon .scroll-txt em:nth-child(10) {animation-delay:1.36s;}
.cm-scroll-icon .scroll-txt em:nth-child(11) {animation-delay:1.4s;}

.cm-scroll-icon .arrow .arrow-icon {
    display: block;
    text-align: center;
    font-size: 24px;
    color: #111;
    height: 7px;
    /* animation: arrow-ani 2s ease-in-out 0s infinite; */
}

.cm-scroll-icon.white-ver .arrow .arrow-icon{color:#fff;}
.cm-scroll-icon .arrow .arrow-icon:nth-child(1) {animation-delay:0.1s;}
.cm-scroll-icon .arrow .arrow-icon:nth-child(2) {animation-delay:0.2s;}
.cm-scroll-icon .arrow .arrow-icon:nth-child(3) {animation-delay:0.3s;}
.cm-scroll-icon .arrow .arrow-icon:nth-child(4) {animation-delay:0.4s;}
.cm-scroll-icon .arrow .arrow-icon:nth-child(5) {animation-delay:0.5s;}

@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    15%,85% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

    100% {
        opacity: 0;
        transform: translateY(50%) rotateX(-90deg)
    }
}
@keyframes arrow-ani {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

/* 메인 비주얼 :: pagination */
.dots-list {position:absolute; bottom:9rem; left:50%; transform:translateX(-50%); z-index:10;}
.dots-list .slick-dots {display:flex;}
.dots-list .slick-dots li {position: relative; width: 8px; height: 8px; border-radius:50%; /* background:#fff; */ margin:0 12.5px; /* text-indent:-9999px; */ border:1px solid rgba(17,17,17,0.5); cursor:pointer;}
/* .dots-list .slick-dots li:before {display:none; content:""; width: 3rem; height: 3rem; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(143,186,244,0.6); z-index:-1; transition:all 0.4s;} */
.dots-list .slick-dots li .dot {position: relative; top:-4rem; left:50%; transform:translateX(-50%); display:none; font-size:1.5rem; font-weight: 500; width: 7rem; color:#fff; text-align:center;}
.dots-list .slick-dots li:not(:first-child,:nth-of-type(5)) .dot {color:#000;}
.dots-list .slick-dots li.slick-active {background:#fff;}
.dots-list .slick-dots li.slick-active:before {display:block;}
.dots-list .slick-dots li:not(:first-child,:nth-of-type(5)).slick-active {background:#000; border:1px solid #000;}
.dots-list .slick-dots li.slick-active .dot {display:block;}
.dots-list .slick-dots li a {display:inline-block; width: 100%; height: 100%; position: relative;}
.percent_circle {position: absolute; display: block; text-align: center; width: 40px; height: 40px; top: 50%; left: 50%; transform:translate(-50%,-50%);}
.percent_circle svg {opacity:0; transition:all 0.5s; transform:rotate(-90deg); transform-origin:center center 0px;}
.dots-list .slick-dots li.slick-active .percent_circle svg {opacity:1;}
.dots-list .slick-dots li.slick-active .state_bar {stroke-dasharray: 249; animation: progress 7s;}
.dots-list .slick-dots li:not(:first-child,:nth-of-type(5)).slick-active circle {stroke:rgba(0,0,0,1);}
@keyframes progress {to {stroke-dashoffset:0px;}}

/* 슬라이더 1,5번일때의 pagination*/
.dots-list.on .slick-dots li {border:1px solid #fff;}
.dots-list.on .slick-dots li:last-child {border:none;}
.dots-list.on .slick-dots li.btn-play {color:#fff;}

/* 메인 비주얼 :: 재생, 멈춤 */
.dots-list .slick-dots li.btn-play {position: relative; border:none; font-size:17px; color:#111; width: auto; height: auto; margin:-4px 1.25rem;}
.dots-list .slick-dots li.btn-play i {position:absolute; top:0; left:0;}
.dots-list .slick-dots li.btn-play .play {display:none;}

@media all and (max-width:800px){
	.dots-list .slick-dots li {margin:0 16px;}
}

/* 메인 :: 문의하기 메뉴 */
.mainVisualMenu {position:fixed; right:0; bottom:10rem; z-index:100; display:flex; flex-direction:row-reverse; width: 83rem; height: 23rem; box-sizing:border-box; transition:all 0.8s cubic-bezier(.7, .1, .2, 1);}
.main-menu-container {display:flex; width: calc(100% - 8rem);}
.main-menu-container > div {width: 15rem; height: 100%; display:flex; align-items:flex-end;}
.main-menu-container > div a {display:inline-block; width: 100%; height: 100%; padding:2.5rem; box-sizing:border-box;}
.main-menu-container em {font-size:2rem; color:#fff; letter-spacing:-0.05em; font-weight: 600;}
.main-menu-container .menu01 {background-image:url(/images/main/main_menu_01.jpg); background-repeat:no-repeat; width: 100%; background-size:cover;}
.main-menu-container .menu02 {background-image:url(/images/main/main_menu_02.jpg); width: 100%; background-repeat:no-repeat; background-size:cover;}
.main-menu-container .menu03 {background-image:url(/images/main/main_menu_03.jpg); width: 100%; background-repeat:no-repeat; background-size:cover;}
.main-menu-container .menu04 {background-image:url(/images/main/main_menu_04.jpg); width: 100%; background-repeat:no-repeat; background-size:cover;}
.main-menu-container .menu05 {background-image:url(/images/main/main_menu_05.jpg); width: 100%; background-repeat:no-repeat; background-size:cover;}
.mainVisualMenu .main-tit-box {width: 8rem; color:#fff; background:#273896; display:flex; align-items:center; cursor:pointer; background-size:cover;}
.mainVisualMenu .main-tit-box .tit-inner {transform:rotate(90deg); width: 100%; display:flex; justify-content:space-between;}
.mainVisualMenu .main-tit-box em {font-size:1.45rem; font-weight: 500; color:#fff;}
.mainVisualMenu .main-tit-box i {font-size:17px; transform:rotate(-90deg); position: relative; top:-3px;}
#mainVisual.closed .mainVisualMenu{width: 8rem;}

/* 메인 :: 문의하기 메뉴 팝업 */
.quick-menu-pop {position: fixed; top:0; left:0; width: 100%; height: 100%; background:rgba(0,0,0,0.5); z-index:9999; display:none;}
.quick-menu-pop .bbs-inquiry-agree-con {margin-top:25px; padding-top:25px; border-top:1px solid #ddd;}
.quick-menu-pop .editor div {font-size:15px;}
.quick-menu-pop .quick-pop {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; width:46.875%; padding:3rem 6rem 3rem 4rem; box-sizing:border-box; max-height:500px; overflow-y:scroll;}
.quick-menu-pop .cm-form-fieldset-box {max-width:323px;}
.quick-menu-pop .email-fieldset.cm-form-fieldset-box {max-width:500px;}
.quick-menu-pop .country.cm-form-fieldset-box select {height: 42px; width: 100%; background-color: #f2f2f2; border: 1px solid #f2f2f2; font-size: 1em; text-indent: 1em; vertical-align: middle; box-sizing: border-box;}
.quick-menu-pop .bbs-write-tbl .write-textarea {height:110px;} 
.quick-menu-pop table tr td {padding:15px 0 15px 15px;}
.quick-menu-pop table tr:last-of-type th , .quick-menu-pop table tr:last-of-type td {border-bottom:0;}
.quick-menu-pop .cm-btn-controls {margin-top:15px;}
.quick-menu-pop .close-btn {position:absolute; right:0; top:-40px;}
.quick-menu-pop .close-btn i {color:#fff; font-size:30px;}
.cm-visual-pointer {display: block; width: 6rem; height: 6rem; border-radius:50%; background:#83aff9; opacity:0.5; z-index:-1; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; position:absolute; top:0px; left:0px; pointer-events:none;}
.cm-visual-pointer.hover{opacity: 1; visibility: visible;}

/* 메인 산업군 */
.top-menu {position:fixed; bottom:3rem; right:0; width: 8rem; height: 7rem; background:#dee0e9; z-index:10;}

@media all and (max-width:800px){
	/* #mainVisual {height: 80vh !important;} */
	#mainVisual {height: 100vh !important;}
	#mainProductCon {padding:7rem 0 8rem;}
	.main-visual-txt-box .main-visual-txt1 {font-size:3.6rem;}
	.main-visual-txt-box .visual-more {display:none;}
	.main-visual-txt-box .m-tit {display:inline-block; font-size:1.6rem; letter-spacing:-0.05em; margin-bottom:1.5rem;}

	.dots-list {bottom:10.5rem;}
	.top-menu {display:none;}
	.mainVisualMenu {height: auto; bottom:3.5rem; right:2rem;}
	.mainVisualMenu .main-tit-box {width:6rem; height: 6rem; border-radius:100%; }
	.mainVisualMenu .main-tit-box .tit-inner {justify-content:center;}
	.mainVisualMenu .main-tit-box em {display:none;}
	.mainVisualMenu .main-tit-box i {top:0;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{ letter-spacing:-0.015em; }
.main-tit-box .main-tit{color:#000; font-size:6.5rem;}
.main-tit-box .main-sub-tit {display:block; color:#444; font-size:2.3rem; letter-spacing:-0.025em; line-height:1.5; }
.main-tit-box .main-sub-tit span {color: var(--main-color);}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}

 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}

@media all and (max-width:800px){
	.main-visual-item.last .main-visual-txt-inner {top:10rem;}
	.main-visual-item.last .main-visual-txt-box .main-visual-txt1 {font-size:5.2rem;}
	.main-visual-item.last .main-visual-txt-box .main-visual-txt2 {font-size:2.8rem;}
}

/* ******************  메인 컨텐츠 :: Product ********************** */
#mainProductCon {position:relative; padding:16.6rem 0 18rem; background-image:url(/images/content/industry_bg.jpg); background-size:cover;}
#mainProductCon .area {position: relative;}
/* #mainProductCon:before {content:""; position:absolute; width:100%; height:34.5rem; background-color:#f4f4f4; bottom:0; left:0;} */
#mainProductCon .main-tit-box {display:flex; align-items:flex-end; justify-content:flex-start; margin-bottom: 8rem;}
#mainProductCon .main-tit-box .main-tit {color:#fff; width: calc(100% - 83.55%);} .main-tit-box .main-tit_en {color:#fff; width: calc(100% - 50%); font-size:4em} 
#mainProductCon .main-tit-box .main-sub-txt {position: relative; top:8px; font-size:1.8rem; letter-spacing:-0.025em; line-height:1.667; color:rgba(255,255,255,0.6); }
/* 산업군 리스트 */
.industry-list {display:flex !important; flex-direction:row-reverse; justify-content:space-between; width: 100%;}
/* .industry-list .slick-track, .industry-list .slick-list {margin:0 0 0 -1rem;} */
.industry-list .slick-list {width: calc(83.55% + 2rem); margin:0 -1rem;}
/* .industry-list .slick-list {margin:0 -1rem;} */
.industry-list .slick-list .item {margin:0 1rem;}
.industry-list .slick-list .item .item-name {height: 8rem; box-sizing:border-box; display:flex; align-items:center; color:#fff; padding:0 3rem; transition:all 0.4s; justify-content:space-between;}
.industry-list .slick-list .item .item-name em {font-size:2.1rem; letter-spacing:-0.05em;}
.industry-list .slick-list .item .item-name i {font-size:17px; position: relative; top:-2px; opacity:0; visibility:hidden; transition:all 0.3s;}
.industry-list .slick-dots {width: calc(100% - 83.55%); display:flex; flex-direction:column; justify-content:center; max-height:32.5rem;}
.industry-list .slick-dots li button {font-size:1.8rem; font-weight: 500; color:rgba(255,255,255,0.5); margin-bottom: 3rem;}
.industry-list .slick-dots li.slick-active button {font-weight: 700; color:#fff;}
/* item hover 시 */
.industry-list .item:hover .item-name {background:rgba(0,0,0,0.3);}	
.industry-list .item:hover .item-name i {opacity:1; visibility:visible;}
	

#mainProductCon .arrow-list {position:absolute; top:-6rem; right:0;}
#mainProductCon .arrow-list .slick-arrow {color:#fff;}
#mainProductCon .arrow-list .slick-arrow:first-of-type {margin-right: 2rem;}
#mainProductCon .arrow-list .slick-arrow i {font-size:3rem; position: relative; left:9px;}
#mainProductCon .arrow-list .slick-arrow.slick-disabled {color:rgba(255,255,255,0.3);}

/* ******************  메인 컨텐츠 :: Process ********************** */
#mainProcessCon {padding:21rem 0 15rem; background:url("/images/main/main_process_bg.png") no-repeat right 21rem / 51.4rem auto;}
#mainProcessCon .main-tit-box {display:flex; align-items:flex-end;}
#mainProcessCon .main-tit-box .main-sub-tit {margin-left:3rem; font-weight:600; /* padding-bottom:1.5rem; */}
.main-process-con {display:flex; align-items:center; margin-top:6.6rem;}
.main-process-con .video-box {width:65.13%; box-shadow:27px 27px 65px rgba(0, 0, 0, 0.13); position:relative;z-index: 9;}
.main-process-con .txt-box {width:34.86%; position:relative;z-index: 8;}
.main-process-con .txt-box .inner {padding-left:15.09%;}
.main-process-con .txt-box .tit {font-size:4rem; letter-spacing:-0.025em; color: #222; line-height:1.35; }
.main-process-con .txt-box .txt {font-size:1.8rem; letter-spacing:-0.025em; color: #777; line-height:2; margin-top:3.7rem;}
.main-process-con .more-btn {position:relative; display:flex; align-items:center; justify-content:flex-end; width:38.8rem; height:6.5rem; background:var(--main-color); color: #fff; font-size:1.45rem; padding-right:3.6rem; box-sizing: border-box; margin-top:7.3rem;}
.main-process-con .more-btn i {font-size:1.7rem; margin-left:2.5rem;}
.main-process-con .more-btn:before {content:""; position:absolute; top:100%; left:0; right:1.5rem; height:1.6rem; background-color:#dee0e9; }
.iframe-wrapper .iframe-inner{overflow:hidden; position:relative; width:100%; height:0; padding-top:55.85%; }
.iframe-wrapper .iframe-inner iframe{position:absolute; top:50%; left:50%; width:100%; height:calc(100% + 350px); transform:translate(-50%,-50%); 	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.main-process-con .iframe-wrapper .iframe-inner iframe {background: url(/images/main/main_process_thum.jpg)no-repeat center / cover;}
.iframe-wrapper .iframe-inner.start iframe{opacity:0.9;filter:Alpha(opacity=90);}
/* .main-process-con .iframe-wrapper .iframe-inner iframe {background: #000;}  */

.main-process-con .more-btn:before {opacity:0; height:0; transform:translateX(-1.5rem); transition: all 1s 0.5s;}
.main-process-con .more-btn.animated:before {opacity:1; height:1.6rem; transform:none}


/* ******************  메인 컨텐츠 :: QuickMenu ********************** */
#mainQuickMenu {position:relative; padding-top:13rem;}
#mainQuickMenu .bg {display:block; position:absolute; top:0; left:0; width:100%; height:59.6rem; background-color:#e4e7f3; z-index: 1;}
#mainQuickMenu .bg:before {content:""; position:absolute; top:0; left:0; background-color:#fff; transition:width 0.8s; width:100%; height:100%;} 
#mainQuickMenu .bg.animated:before {width:0; }
.main-quickmenu-con {position:relative; z-index: 2;}
.main-quickmenu-con .tit-box .inner-box {position:relative;}
.main-quickmenu-con .tit-box .inner-box .inner {position:absolute; top:-2rem; left:0; }
.main-quickmenu-con .tit-box .tit {font-size:10rem; letter-spacing:-0.015em; color: #fff; line-height:1;}
.main-quickmenu-con .list-box {display:flex; margin:0px auto;}
.main-quickmenu-list {display:flex; width:172rem;/*  height:100%;   */}
.main-quickmenu-list li {height:100%;}
.main-quickmenu-list li dt {position:relative;}
.main-quickmenu-list li dd {margin-top:4rem;}
.main-quickmenu-list li .img {display:block;}
.main-quickmenu-list li img {width:100%;}
.main-quickmenu-list li .tit {font-size:3.4rem; letter-spacing:-0.025em; color: #111; }
.main-quickmenu-list li .txt {font-size:1.8rem; letter-spacing:-0.03em; color: #666; line-height:1.66; margin-top:3rem;}
.main-quickmenu-list li .more  {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: #fff; background-color:rgba(29,59,157,0.66); opacity:0; transition: opacity 0.4s;}
.main-quickmenu-list li .more span {font-size:1.3rem; }
.main-quickmenu-list li .more i {font-size:1.7rem; margin-left:1.5rem;}

/* ******************  메인 컨텐츠 :: News ********************** */
#mainNewsCon {padding:17.5rem 0 13.2rem;}
.main-news-con {display:flex;}
.main-news-con .tit-box {width:21.9%;}
.main-news-con .tit-box a {font-size:1.3rem; color: #000; display:inline-block; margin-top:3.8rem; transition: color 0.4s;}
.main-news-con .tit-box a span {display:inline-block;  vertical-align:middle;}
.main-news-con .tit-box a i {font-size:2rem; vertical-align:middle; margin-left:1.6rem;}
.main-news-con .list-box {width:78.1%;}
.main-news-list li {border-bottom:1px solid #ddd;}
.main-news-list li:first-child {border-top:2px solid #000;}
.main-news-list li a {display:flex; align-items:center; height:11.7rem;}
.main-news-list li a .category-box {width:14rem; text-align:center;}
.main-news-list li a .category {display:inline-block; width: 7.5rem; padding:0 1rem; height:3.1rem; line-height:3.1rem; font-size:1.6rem; color: #fff; letter-spacing:0.015em; width:10.42rem; box-sizing:border-box; text-align:center;}
.main-news-list li a .category.promotion {/* background-color:var(--main-color); */ background-color:#0c45a4;}
.main-news-list li a .category.notice {background-color:#0c6aa0;}
.main-news-list li a .category.social {background-color:#877676;}
.main-news-list li a .tit-box {width:calc(100% - 14rem - 21.4rem);}
.main-news-list li a .tit {font-size:2.1rem; letter-spacing:-0.025em; color: #111; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.main-news-list li a .date-box {display:flex; align-items:center; width:21.4rem; }
.main-news-list li a .date-box .date { font-size:1.5rem; letter-spacing:-0.015em; color: rgba(0,0,0,0.5);}
.main-news-list li a .date-box i {font-size:4rem; letter-spacing:-0.03em; color: #ddd; margin-left:5.5rem; margin-top:-0.5rem; transition: all 0.4s;}

/* ******************  메인 컨텐츠 :: Location ********************** */
.main-location-list-container{position: relative; width: 100%; height: 0; padding-top:31.89%;}
.accordion-wrapper{overflow:hidden; position:absolute; top:0; left:0; right:0; height:100%;}
/* 배경이미지 */
.accordion-bg-list-container{height:100%;}
.accordion-bg-list{position:relative; height:100%;}
.accordion-bg-list .accordion-bg-item{position:absolute; top:0px; width:25%; height:100%; overflow:hidden; opacity: 0; background-color: #000;}
.accordion-bg-list .accordion-bg-item:nth-child(1){left:0%;}
.accordion-bg-list .accordion-bg-item:nth-child(2){left:25%;}
.accordion-bg-list .accordion-bg-item:nth-child(3){left:50%;}
.accordion-bg-list .accordion-bg-item:nth-child(4){left:75%;}
.accordion-bg-list .accordion-bg-item .accordion-inner{display:block; position:relative; width:100%; height:100%; margin:0; background-size:cover !important; opacity: 0.35;}
.accordion-bg-list .accordion-bg-item .accordion-outer{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1; background-size:cover !important; transition:opacity 0.2s ease, transform 0.2s ease; opacity: 0;}
.accordion-bg-list .accordion-bg-item.active{z-index:1;}
.accordion-bg-list .accordion-bg-item.active .accordion-inner{opacity: 0.65; transform:scale(1.1) rotate(0.002deg); transition:transform 5s ease-in-out}
.accordion-bg-list .accordion-bg-item.active .accordion-outer{opacity:0; transform:scale(1.05) rotate(0.002deg); z-index:0;}
/* 아코디언 영역 */
.accordion-over-container{position:absolute; top:0px; left:0px; bottom:0px; right:0px; z-index:2;}
.accordion-over-list{position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
.accordion-over-item{float:left; position:relative; width:25%; height:100%;}
.accordion-over-item .accordion-inner-con{position:relative; display:block; height:100%;}
/* 실제 컨텐츠 영역 */
.main-location-new-list{}
.main-location-new-list li{}
.main-location-new-list li a{display: block;}
.main-location-new-list li a .tit {position:absolute; top:11.53%; left:11.45%; font-size:2.8rem; letter-spacing:-0.015em; color: #fff; font-weight:600;}
@media all and (min-width: 801px) {
	.accordion-over-item{background:none !important;}
	.accordion-over-container.active .accordion-over-list:before{background-color: rgba(0,0,0,0.35);}
}
@media all and (max-width: 800px) {
	.main-location-list-container{height: auto; padding-top:0;}
	.accordion-wrapper{overflow:visible; position:static; height:auto;}
	/* 배경이미지 */
	.accordion-bg-list-container{display: none;}
	/* 아코디언 영역 */
	.accordion-over-container{position:static;}
	.accordion-over-list{position:static;}
	.accordion-over-item{float:left;width: 100%; height:auto; background-size: cover !important;}
	.accordion-over-item .accordion-inner-con{position: relative; width: 100%; height: 0; padding-top:34.22%;}
	.accordion-over-item:before{display: none;}
	/* 실제 컨텐츠 영역 */
	.main-location-new-list li a .tit {top:22%; left: var(--area-padding); font-size:2.8rem;}
}