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


/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:calc(900px - var(--header-height)); /* padding-right: 10rem; */ /* height:100vh; height:calc(100vh - var(--header-height)); */ position:relative; box-sizing:border-box;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
/* .main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
} */
.main-visual-item {position: relative; height: 100%; max-height:550px;}
.main-visual-con{z-index:1; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{	
	/* width: calc(100% - 10rem); */
	/* width: 0; */
	width: 95.639%;
	height:100%;
	/* max-height: 550px; */
	background-size:cover !important;
	/* position:absolute;
	bottom:0; */
	/* transform: translateX(-100%); */
	transition:var(--transition-custom2);
	transition-delay:1s;
}
.main-visual-item .main-visual-img:before{
	display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition:var(--transition-custom2);
    transition-delay:1s;
}
.main-visual-item .main-visual-txt-box {position:absolute; top: 0; height: 100%; width: 100%;}
.main-visual-item .main-visual-txt-box .area-box {width: 100%;}

.active-item.main-visual-item .main-visual-img {/* transform: translateX(0); */ width: calc(100% - 10rem);} 

.main-visual-item .main-visual-m-img{display:none;}
.active-item .main-visual-img {/* width: calc(100% - 10rem); */}
.active-item .main-visual-img:before {width: 0;}
/* .main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;} */
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position: relative;
	top: 13.625%;
	/* position:absolute;
	left:0px; top:0;
	width:100%; 
	height:100%; */
	z-index:1;
}
.main-visual-txt-box{
	display:flex;
	/* align-items:center; */
	/* height:calc(100% - 10.9rem);
	margin-top: 10.9rem; */
	/* font-family: var(--font-family2); */
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:9.8rem; font-weight:800; letter-spacing:-0.025em; color:#000; line-height:1.1; /* margin-bottom:0.66em; */ }
.main-visual-txt-box .main-visual-txt1 > span {color: #202193;}
.main-visual-txt-box .main-visual-txt2{font-size:2.2rem; letter-spacing:-0.025em; color:#fff; /* margin-bottom:1.25em; */ line-height:1.545em; margin-top: 8.8rem; padding-left: 3rem;}
.main-visual-txt-box .main-visual-txt2-wrap {position: relative;}
.main-visual-txt-box .main-visual-txt2-wrap:before {display: block; content:""; width: 3px; height: 0; /* height: 80.92%; */ background: #fff; position:absolute; left: 0; top: 5px; transition:height 0.5s ease; transition-delay:1.8s;}
.active-item .main-visual-txt-box .main-visual-txt2-wrap:before {height: 80.92%;}
.main-visual-txt-box .main-visual-txt2-wrap.on:before {height: 80.92%;}

.main-visual-txt-box .main-visual-txt3{font-size:1.8rem; letter-spacing:-0.025em; color:rgba(255,255,255,0.7); line-height:1.5; margin-bottom:1.66em; }
.main-visual-txt-box .main-visual-more-btn{
	display:flex; position: relative; width: 100px; height: 100px; position:absolute; bottom: 6rem; transition: all 0.4s ease;
}
.main-visual-txt-box .main-visual-more-btn:hover {background: var(--main-color);}
.main-visual-txt-box .main-visual-more-btn:before {    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0; width: 100%;
    height: 100%;
    border: 3px solid rgba(255,255,255,0.3);
    box-sizing: border-box;
    z-index: -1;}
.main-visual-more-btn svg {stroke-dasharray:500; stroke-dashoffset: 500; transition:all 3s linear; transition-delay:1.8s;}
.main-visual-more-btn svg * {fill:transparent; stroke:#fff; stroke-width:3px; transition:stroke 0.8s ease-in-out;}
.main-visual-more-btn i {color: #fff;
    font-size: 4.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
.main-active .main-visual-more-btn svg {stroke-dashoffset:0;}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3,
.active-item .main-visual-more-btn{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.2s;}
.active-item .main-visual-txt2{animation-delay:2s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-more-btn{animation-delay:1.5s;}
.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-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: 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: translateX(-5rem); 
		transform: translateX(-5rem); */
		-webkit-transform: translateX(-3rem); 
		transform: translateX(-3rem);
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0);
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:20px; width:100%; text-align:left; z-index:11; }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; }
.main-visual-con .slick-dots li{float:left; margin-left:5px; }
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:12px; height:12px; background-color:#fff; font-size:0; opacity:0.8;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.main-visual-con .slick-dots li.slick-active button{background-color:#000; opacity:1.0; }

/* 메인 비주얼 :: pause,play */
.main-visual-con .slick-control-btns{display:inline-block; vertical-align:top; margin-left:5px; }
.main-visual-con .slick-control-btns button{color:#fff; vertical-align:top;}
.main-visual-con .slick-control-btns button i{vertical-align:top; font-size:14px; position:relative; top:-1px;}
.main-visual-con .slick-control-btns .slick-play-btn{display:none;}

/* 메인 비주얼 :: 화살표 */
.main-visual-con .slick-arrow{	position:absolute; width:50px; top:50%;transform:translateY(-50%); border:0; cursor:pointer; z-index:9; font-size:50px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
.main-visual-con .slick-arrow.slick-prev{left:10px;}
.main-visual-con .slick-arrow.slick-next{right:10px;}

/* 메인 비주얼 :: 카운터 */
.main-visual-conuter{position:absolute; bottom:55px; left:0; width:100%; z-index:11; font-size:14px; color:#fff; letter-spacing:-0.5px; }
.main-visual-conuter span,
.main-visual-conuter .middle{display:inline-block; vertical-align:middle;}
.main-visual-conuter .middle{margin:0 10px}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-box{position:absolute; bottom:0; /* right: 0; */ margin-left:-40px; text-align:center; z-index:9; right: -5%; transition-delay: 0.5s; transition: var(--transition-custom2);}
.main-scroll-icon {animation: upDown 1.5s ease-in-out infinite; padding-bottom: 30px;}
.main-scroll-icon .scroll-txt {display:block; color:#555; letter-spacing:-0.5px; font-weight:600; transform: rotate(90deg); font-size: 12px; height: 7.3rem; display:flex; align-items:center; }
.main-scroll-box .line{position:relative; display:inline-block; width: 3px; height: 70px; background: #ccc;}
.main-scroll-box .line em {background: #000; width: 100%; position: absolute; left: 0; animation: scrollbarAni 1.5s ease-in-out infinite;}
.main-active .main-scroll-box {right: 0;}

@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}

@keyframes scrollbarAni {
	0%{
		height: 0;
	}
	100% {
		height: 100%;	
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:55px; letter-spacing:-0.75px; text-align:left;}
.main-tit-box .main-tit{color:#040404; font-size:7rem; line-height:1.257em; font-weight:500; color:var(--main-color); letter-spacing:-0.025em;}
.main-tit-box .main-tit .tit01{position: relative; font-weight:700; color: #000; display:inline-block;}
.main-tit-box .main-tit .tit01:before {display: block;
    content: "";
    position: absolute;
    /* left: 50%; */
    left: 0;
    bottom: 10px;
    background: rgba(32, 33, 147, 0.15);
    height: 2.2rem;
    /* width: 105.72%; */
    width: 0;
    transform: translateX(-50%); transition: all 0.7s ease; transition-delay:0.5s;}
.main-tit-box.animated .tit01:before {width: 105.72%; left: 50%;}
.main-tit-box .main-sub-tit{display:block; margin-top:2.7rem; color:#555; font-size:1.8rem; letter-spacing:-0.025em; font-weight:400; line-height:1.666em; transform:translateX(-5%); transition:var(--transition-custom2); opacity: 0; transition-delay:0.5s; margin-bottom: 5.2rem;}
.main-tit-box .main-tit.splitting .char{
	opacity:0;
	transform:translateY(100%);
	transition:var(--transition-custom2);
	transition-property:opacity, transform;
}
.main-tit-box.animated .main-sub-tit {transform:translateX(0); opacity: 1;}
 /* animation일때 */ 
/* .aos-animate .main-tit-box .main-tit.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;
} */
 /* transition일때 */ 
.active-section .main-tit.splitting .char,
.animated .main-tit.splitting .char{
	opacity:1.0;
	transform:translateY(0);
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainContent1{padding:145px 0 85px; }
#mainContent1 .contents-container {display:flex;}
.con-more-btn {display:flex; align-items:center; justify-content:center; width: 6rem; height: 6rem; box-sizing:border-box; border:3px solid rgba(32,33,147,0.15); transition:all 0.4s ease;}
#mainContent1 .con-more-btn-box {transform:translateX(-10%); transition:var(--transition-custom2); transition-delay:0.8s; opacity: 0;}
.con-more-btn i {font-size:3.7rem; color: var(--main-color); transition:all 0.4s ease;}
.con-more-btn:hover {background: var(--main-color);}
.con-more-btn:hover i {color: #fff;}
#mainContent1 .main-tit-box.animated .con-more-btn-box {transform:translateX(0); opacity: 1;}
#mainContent1 .main-tit-box {width: 50%; margin-bottom: 0; padding-right: 11.628%; box-sizing:border-box;}
.about-count-list {width: 50%; padding-left: 3rem; box-sizing:border-box; display:flex; flex-wrap:wrap;}
.about-count-list .num {width: calc(100% / 3); transform:translateY(20%); opacity: 0; transition:var(--transition-custom2);}
.about-count-list.animated .num {transform:translateY(0); opacity: 1;}
.about-count-list .unit {font-weight: 500; color: #000;}
.about-count-list > li {display:flex; /* transform:translateY(20%); opacity: 0; transition:var(--transition-custom2); */ margin-top: 6.5rem;}
/* .about-count-list.animated > li {transform:translateY(0); opacity: 1;} */

/* .about-count-list > li:first-child {transition-delay:0.8s; margin-top: 0;}
.about-count-list > li:nth-child(2) {transition-delay:1.5s;}
.about-count-list > li:last-child { transition-delay:2.2s;} */
.about-count-list .num:nth-child(1), .about-count-list .num:nth-child(2), .about-count-list .num:nth-child(3) {transition-delay:0.8s; margin-top: 0;}
.about-count-list .num:nth-child(4), .about-count-list .num:nth-child(5), .about-count-list .num:nth-child(6) {transition-delay:1.5s;}
.about-count-list .num:nth-child(7), .about-count-list .num:nth-child(8), .about-count-list .num:nth-child(9) { transition-delay:2.2s;}

/* .about-count-list > li .num {width: calc(100% / 3);} */
.about-count-list .count-tit {position: relative; margin-top: 2rem;}
.about-count-list .count-tit:before {display: block; content:""; background: #000; width: 3px; /* height: 80%; */ height: 0; position:absolute; left:0; top:5px; transition:var(--transition-custom); transition-delay:1.2s;}
/* .about-count-list li:first-of-type .count-tit:before {height: 0;}
.about-count-list li:nth-of-type(3) .count-tit:before {transition-delay:2.8s;}
.about-count-list li:nth-of-type(2) .count-tit:before {transition-delay:2.2s;} */

.about-count-list .num:nth-child(1) .count-tit:before, .about-count-list .num:nth-child(2) .count-tit:before, .about-count-list .num:nth-child(3) .count-tit:before {/* height: 0; */}
.about-count-list .num:nth-child(4) .count-tit:before, .about-count-list .num:nth-child(5) .count-tit:before, .about-count-list .num:nth-child(6) .count-tit:before {transition-delay:2.2s;}
.about-count-list .num:nth-child(7) .count-tit:before, .about-count-list .num:nth-child(8) .count-tit:before, .about-count-list .num:nth-child(9) .count-tit:before {transition-delay:2.8s;}

.about-count-list.animated .count-tit:before {/* height: 80%; */ height: 15px;}
.about-count-list.animated li:first-of-type .count-tit:before {height: 15px;}

.about-count-list .count-tit p {position: relative; font-size:16px; letter-spacing:-0.025em; color: #555; font-weight: 600; line-height:1.5em; padding-left: 1.3rem; opacity: 0; transition:var(--transition-custom); transform:translateX(-7%); transition-delay:1.6s;}
/* .about-count-list .count-tit p:before {display: block; content:""; background: #000; width: 3px; height: 80%; position:absolute; left:0; top:5px;} */
/* .about-count-list li:first-of-type .count-tit p:before {height: 62.5%; top: 4px;} */
.about-count-list li:nth-of-type(2) .count-tit p {transition-delay:2.5s;}
.about-count-list li:last-of-type .count-tit p {transition-delay:3s;}

.about-count-list .num:nth-child(4) .count-tit p, .about-count-list .num:nth-child(5) .count-tit p, .about-count-list .num:nth-child(6) .count-tit p {
	transition-delay:2.5s;
}
.about-count-list .num:nth-child(7) .count-tit p, .about-count-list .num:nth-child(8) .count-tit p, .about-count-list .num:nth-child(9) .count-tit p {
	transition-delay:3s;
}

.about-count-list .count-tit span {display: block; font-weight: 400; font-size: 1.6rem; letter-spacing: -0.025em; color: #555; /* padding-left: 1rem; */}
.about-count-list.animated .count-tit p {opacity: 1; transform:translateX(0);}

/* 카운트 */
.count-num-box{display:flex; align-items:center; font-size:6.2rem}
.count-num-item-wrap{height:1em; overflow:hidden; }
.count-num-item-wrap:not(.num01) {margin-left: -3px;}
.count-num-item-wrap .count-num-item-box{height:10em; text-align:right;}
.count-num-item-wrap .count-num-item-box .count-num-item {line-height: 1em; color:#000; font-weight:500;}
 
/* active */
.about-count-list.animated .count-num-item-box{animation:count-up-ani 3s forwards; animation-delay:0.5s;}
.about-count-list.animated .count-num-item-box.down {animation:count-down-ani 3s forwards; animation-delay:0.5s;}

.about-count-list.animated .last-count .count-num-item-box {animation-delay:1.5s;}
.about-count-list.animated .last-count .count-num-item-box.down {animation-delay:1.5s;}

@keyframes count-up-ani {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -90%, 0);
    }
}
@keyframes count-down-ani {
    0% {
        transform: translate3d(0, -90%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
} 

/* -------- 메인 컨텐츠 :: 컨텐츠2(갤러리) -------- */
#mainContent2{padding:8.5rem 0 24.6rem;/*  background-color:#f2f2f2; */}
#mainContent2 .main-tit-box {position: relative; margin-bottom: 0;}
#mainContent2 .main-tit-box .main-sub-tit {margin-bottom: 3.9rem;}
.main-pro-list {display:flex; /* opacity: 0; transition:var(--transition-custom2); transform:translateY(10%); transition-delay:0.5s; */ overflow:hidden;}
.main-pro-list .slick-slide {margin: 0 3.25rem; opacity: 0; transition:var(--transition-custom2); transform:translateY(10%); /* transition-delay:0.2s; */}
.main-pro-list .slick-slide.slick-current {/* transition-delay:0.2s; */}
.main-pro-list .slick-slide.slick-current + .slick-slide {transition-delay:0.3s;}
.main-pro-list .slick-slide.slick-current + .slick-slide + .slick-slide {transition-delay:0.6s;} 
/* .main-pro-list .slick-slide:nth-of-type(3) {transition-delay:1.8s;} */
.main-pro-list .slick-list {margin: 0 -3.25rem;}
.main-pro-list > li {width: calc((100% - 13rem) / 3); margin-right: 6.5rem;}
.main-pro-list > li:last-of-type {margin-right: 0;}
.main-pro-list .pro-tit {display:inline-block; font-size:2.6rem; letter-spacing:-0.025em; color: #000; font-weight: 600; margin-bottom: 2rem;}
.main-pro-list .pro-txt {position: relative; margin-top: 3rem; padding-left: 2.2rem;}
.main-pro-list .pro-txt:before {display: block; content:""; position:absolute; left: 0; width: 3px; height: 100%; background: #000; }
.main-pro-list .pro-img {overflow:hidden;}
.main-pro-list .pro-img span {    display: block;
    width: 100%;
    position: relative;
    height: 0;
    padding-top: 66.04%;}
.main-pro-list .pro-img a img {transition:all 0.4s ease;}
.main-pro-list .pro-img a:hover img {transform:scale(1.08);}
.pro-category-list {display:flex; flex-wrap:wrap; margin-top: -6px;}
.pro-category-list li {display:flex; align-items: center; height: 3rem; box-sizing:border-box; font-size:1.3rem; letter-spacing:-0.025em; color: #888; line-height:1.571em; border:1px solid #ddd; border-radius:1.5rem; padding: 0 1.3rem; margin: 6px 5px 0 0;}
.pro-category-list li:last-child {margin-right: 0;}
.pro-control-box {position:absolute; right: 0; bottom: 0; display:flex; transition: var(--transition-custom2); opacity: 0; transition-delay: 0.5s; transform:translateY(30%);}
.main-tit-box.animated .pro-control-box {opacity: 1; transform:translateY(0);}
.pro-arrow-wrap {display:flex; margin-right: 1rem;}
.pro-arrow-wrap .slick-arrow {width: 6rem; height: 6rem; border:3px solid #e5e5e5; box-sizing:border-box; display:flex; justify-content:center; align-items:center;}
.pro-arrow-wrap .slick-arrow:first-of-type {margin-right: -3px;}
.pro-arrow-wrap .slick-arrow i {font-size:3.7rem; color: #666; }
#mainContent2 .con-more-btn {background: var(--main-color); border:0;}
#mainContent2 .con-more-btn i {color: #fff;}
/* .animated .main-pro-list .slick-slide.slick-active {transform:translateY(0); opacity: 1;} */
.animated .main-pro-list .slick-slide {transform:translateY(0); opacity: 1;}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (갤러리 슬라이드) -------- */
#mainContent3{padding:14rem 0 6rem; position: relative;}
#mainContent3:before {display: block; content:""; position:absolute; left: 0; top: 0; /* width: 100%; */width: 0; height: 100%; background: rgba(102,102,102,0.05); transition:var(--transition-custom2); transition-delay:0.5s;}
/* .global-bg {background: rgba(102,102,102,0.05); width: 100%;} */
#mainContent3.animated:before {width: 100%;}
#mainContent3 .global-map-con {position: relative; top: -12rem;}
#mainContent3 .global-map-con > img {position: relative; width: 100%; opacity: 0; transform:translateY(10%); transition:var(--transition-custom2); transition-delay:0.8s; /* z-index: 10; */}
#mainContent3.animated .global-map-con > img {opacity: 1; transform:translateY(0);}
.global-txt-con {position: absolute; top: 50%; right: 28%; opacity: 0; transform:translateY(20%); transition:var(--transition-custom2); transition-delay:1.5s;}
#mainContent3.animated .global-txt-con {opacity: 1; transform:translateY(0);}
.global-txt-con .global-tit {font-size:2.8rem; letter-spacing:-0.025em; font-weight: 700; color: #222; line-height:1.214em;}
.global-txt-con .global-txt {font-size:1.6rem; letter-spacing:-0.025em; color: #555; line-height:1.5em; margin-top: 1.9rem;} 
.global-txt-con .con-more-btn {margin-top: 3.4rem;}

/* -------- 메인 컨텐츠 :: 컨텐츠4(갤러리 + 설명 슬라이드) -------- */
#mainContent4{padding:60px 0; background: rgba(102,102,102,0.05);}
#mainContent4 .main-tit .tit02 {font-weight: 500; color: #000;}
.main-content-wrap {display:flex;}
.main-content-wrap .main-tit-box, .main-content-wrap .main-contact-box {width: 50%;}
.main-content-wrap .main-contact-box {width: calc(50% - 3rem); margin-left: 3rem;}
.main-contact-box .main-contact-list {display:flex;}
.main-contact-box .main-contact-list li {opacity: 0; transform:translateY(20%); transition:var(--transition-custom2); transition-delay:0.5s;}
.main-contact-box .main-contact-list li:nth-child(2) {transition-delay:0.8s;}
.main-contact-box .main-contact-list li:nth-child(3) {transition-delay:1.1s;}
.main-contact-box.animated .main-contact-list li {transform:translateY(0); opacity: 1;}

.main-contact-list li {width: calc((100% - 3rem) / 2); /* width: calc((100% - 6rem) /3); */ margin-right: 3rem; }
.main-contact-list li:last-of-type {margin-right: 0;}
.main-contact-list li a {position: relative; display:flex; height: 0; padding-top: 64.15%; /* padding-top: 100%; */ background: #fff; /* border:3px solid #ddd; */ transition:all 0.4s ease;}
.main-contact-list li a:before {display: block; content: ""; position: absolute; left: 0; top: 0; border: 3px solid #ddd; width: 100%; height: 100%; box-sizing: border-box; transition:all 0.4s ease; }
.main-contact-box .inner-box {display: flex; width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; align-items: center; justify-content: center; flex-direction: column; padding: 0 2rem; box-sizing: border-box; text-align: center;}
.main-contact-box .inner-box > i {font-size:3.2rem; color: var(--main-color); display:inline-block; height: 3.2rem; transition:all 0.4s ease;}
.main-contact-box .tit-box {margin-top: 3.5rem; height: 6rem; transition:var(--transition-custom);}
.main-contact-box .tit-box p {font-size:2.6rem; letter-spacing:-0.025em; font-weight: 600; line-height:1.363em; color: rgba(51,51,51,0.8); height: 6rem; transition:all 0.4s ease;}
.main-contact-box .tit-box i {opacity: 0; font-size:3.7rem; color: #fff; transition:all 0.4s ease; margin-top: 2rem;}

.main-contact-list li.active a {background: var(--main-color); -webkit-box-shadow: 8px 13px 45px -1px rgba(46, 47, 130, 0.5);
-moz-box-shadow: 8px 13px 45px -1px rgba(46, 47, 130, 0.5);
box-shadow: 8px 13px 45px -1px rgba(46, 47, 130, 0.5);}
.main-contact-list li.active a:before {border-color: var(--main-color);}
.main-contact-list li.active .inner-box > i {color: rgba(255,255,255,0.3);}
.main-contact-list li.active .tit-box {height: 11rem;}
.main-contact-list li.active .tit-box p {color: #fff;}
.main-contact-list li.active .tit-box i {opacity: 1;}

/* -------- 메인 컨텐츠 :: 컨텐츠5(FIXED 배너) -------- */
#mainContent5{padding:110px 0 120px; background:url(/images/main/main_visual_01.jpg) no-repeat 50% 50%; background-size:cover; }
body:not(.ie-browser) #mainContent5{background-attachment:fixed}
.main-fixed-con{text-align:center; padding:0 15px; font-size:13px; letter-spacing:-0.55px;}
.main-fixed-con .main-fixed-sub-tit{color:#fff; font-size:1.923em; padding-bottom:1.6em}
.main-fixed-con .main-fixed-tit{color:#fff; font-size:2.923em; font-weight:300; letter-spacing:-1px; padding-bottom:1.0em;}
.main-fixed-con .main-fixed-txt{color:#fff; font-size:1.154em; letter-spacing:-0.75px; line-height:2; opacity:0.7;filter:Alpha(opacity=70); padding-bottom:1.0em; word-break:keep-all}
.main-fixed-con .main-fixed-more-btn{display:block; width:200px; height:48px; line-height:48px; color:#fff; font-size:1.231em; font-weight:400; margin:0px auto; border:1px solid #fff; border-color:rgba(255,255,255,0.2); background-color:rgba(0,0,0,0.2)}
.main-fixed-con .main-fixed-more-btn:hover{background-color:#333;}

/* -------- 메인 컨텐츠 :: 컨텐츠6(사각, 원 배너들) -------- */
/* 배너 :: 사각배너 */
.main-banner-list-con{overflow:hidden; margin:0 -2%;}
.main-banner-list-con li{float:left; width:46%; margin:2%;}
.main-banner-list-con li a{display:block; position:relative; height:0; padding-top:47%; background-color:#111;}
.main-banner-list-con li .banner-thumb{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-banner-list-con li .banner-thumb img{width:100%; height:100%;}
.main-banner-list-con li .banner-inner-box{position:absolute; bottom:10%; left:20px; font-size:16px; letter-spacing:-0.55px; color:#fff;}
.main-banner-list-con li .banner-inner-box .banner-tit{font-size:1.563em; padding-bottom:0.7em}
.main-banner-list-con li .banner-inner-box .banner-sub-tit{display:block; font-size:1.125em; padding-bottom:0.7em}
.main-banner-list-con li .banner-inner-box .banner-sub-txt{display:block; font-size:0.813em; opacity:0.5;filter:Alpha(opacity=50);}

/* -------- 메인 컨텐츠 :: 컨텐츠7(100% 풀배너) -------- */
#mainContent7{padding:60px 0;}
.main-full-banner-box{position:relative; width:100%; overflow:hidden; background-color:#3c3c3c;}
.main-full-banner-box .main-full-banner-left{}
.main-full-banner-box .main-full-banner-right{position:absolute; top:0px; left:50%; width:100%; height:100%; background:#080808;}
.main-full-banner-box .full-banner-inner{width:100%; max-width:600px; padding:100px 0; text-align:center; color:#fff; letter-spacing:-0.25px;}
.main-full-banner-box .full-banner-inner strong{display:block; font-weight:400; font-size:24px; padding-bottom:25px;}
.main-full-banner-box .full-banner-inner p{font-size:15px; line-height:26px; letter-spacing:-0.75px; opacity:0.4;filter:Alpha(opacity=40);}


/* -------- 메인 컨텐츠 :: 컨텐츠8(Global Network) -------- */
#mainContent8{padding:60px 0; background-color:#2f2f2f;}
#mainContent8 .main-tit strong{color:#fff;}
.global-map-con{position:relative;}
.global-map-con-m{display:none;}
.global-nation-box{position:absolute; top:0px; left:0px; width:100%; height:100%; }
@keyframes nation-circle {
 0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 1; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(0.8);
		opacity: 0; 
	}
}

@keyframes nation-circle2 {
 0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(5);
		opacity: 0; 
	}
}
.nation-circle{position:absolute; left:50%; top:0; display:inline-block; width:70px; height:70px; /* opacity: 0; transition:var(--transition-custom2); transition-delay:1.5s; */}
/* #mainContent3.animated .nation-circle {opacity: 1;} */
.nation-circle.korea {transform: translateY(20%); opacity: 0; transition:all 0.5s ease; transition-delay:1s; width: 7.042%; height: 15.376%;}
#mainContent3.animated .nation-circle.korea {opacity: 1; transform: translateY(0);}
/* #mainContent3.animated .nation-circle.korea .wave-group {opacity: 1;} */
.nation-circle:not(.korea) {/* z-index: 10; */ transition-delay:2s;}
.nation-circle .circle-box {opacity: 0; transition:var(--transition-custom2); transition-delay:2.3s;}
#mainContent3.animated .nation-circle .circle-box {opacity: 1;}
.nation-circle .circle-box > span:nth-child(2) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s; 
}
.nation-circle .circle-box > span:nth-child(3) {
	-webkit-animation-delay: 1.8s;
		animation-delay: 1.8s;
}
.nation-circle .circle-box > span:nth-child(4) {
	-webkit-animation-delay: 2s;
		animation-delay:2s;
}
.nation-circle .circle-box > span:nth-child(5) {
	-webkit-animation-delay: 2.5s;
		animation-delay:2.5s;
}
.nation-circle .circle-box > span:nth-child(6) {
	-webkit-animation-delay: 4s;
		animation-delay:4s;
}
.nation-circle .circle-box > span {
	border:1px solid rgba(32, 33, 147, 0.25) ;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-animation: nation-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
			animation: nation-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; 
	}
.nation-circle .circle-box i{
	display:block; position:absolute; top:50%; left:50%; margin:-3px 0 0 -3px; width:8px; height:8px; background-color:#555; 
	-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;
	opacity:0.7;filter:Alpha(opacity=70);
}
.nation-circle p{position:absolute; font-size:14px; top:80%; left:50%; /* width:300px; */width: 120px; height:30px; margin:-8px 0 0 0; color:#555; font-weight: 600; opacity:0.7;filter:Alpha(opacity=70); transform: translateX(-50%) translateY(20%); font-family: var(--font-family2); text-align:center; opacity: 0; transition:var(--transition-custom2); transition-delay:1.8s;}
#mainContent3.animated .nation-circle p {transform: translateX(-50%) translateY(0); opacity: 1;} 

.nation-circle.korea img {position: absolute; top: 50%; left: 50%; margin-left: -62%; margin-top: -105%; transform: translateY(20%); transition:var(--transition-custom2); z-index: 10; opacity: 0; transition-delay:1.3s; max-width:100%;}
#mainContent3.animated .nation-circle.korea img {opacity: 1; transform: translateY(0);}
/* .nation-circle.korea .wave-group {transition: opacity 1.2s ease-in-out; opacity: 0; transition-delay:1.5s;} */
.wave-group {position: absolute; left: 50%; top: 0; display: inline-block; width: 80px; height: 80px; opacity: 0; transition: var(--transition-custom2); transition-delay: 2.3s; z-index: -1;}
#mainContent3.animated .wave-group {opacity: 1;}
.wave-group span {background:rgba(28, 29, 180, 0.1);
    border-radius: 50%;
    animation-fill-mode: both;
    position: absolute;
    left: 0;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* box-shadow: 0.5rem 0.5rem 2rem -0.25rem rgba(0, 0, 0, 0.2); */
    animation: nation-circle2 4s cubic-bezier(1, 2, 0.66, 3) infinite; z-index: -1;}
.wave-group span:nth-child(2){-webkit-animation-delay: 1s;
    animation-delay: 1s;}
.wave-group span:nth-child(3){-webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;}
.wave-group span:nth-child(4){-webkit-animation-delay: 2s;
    animation-delay: 2s;}
/* .nation-circle.korea .wave-group span {
    	background:rgba(28, 29, 180, 0.3);
    border-radius: 50%;
    animation-fill-mode: both;
    position: absolute;
    left: 0;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0.5rem 0.5rem 2rem -0.25rem rgba(0, 0, 0, 0.2);
    animation: nation-circle2 4s cubic-bezier(1, 2, 0.66, 3) infinite; z-index: -1;}
    .nation-circle.korea .wave-group span:nth-child(2){-webkit-animation-delay: 1s;
    animation-delay: 1s;}
    .nation-circle.korea .wave-group span:nth-child(3){-webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;}
    .nation-circle.korea .wave-group span:nth-child(4){    -webkit-animation-delay: 2s;
    animation-delay: 2s;} */

/* -------- 메인 컨텐츠 :: 컨텐츠9(공지사항 게시판 + 배너) -------- */
#mainContent9{padding:60px 0; }
/* 컨텐츠 9 :: 공지사항 */
.main-board-box{position:relative; float:left; width:47%}
.main-board-box .main-board-tit{color:#17100c; font-size:24px; letter-spacing:-0.1px; font-weight:500; padding-bottom:25px; border-bottom:2px solid #333;}
.main-board-con{padding-top:25px;}
.main-board-con li{overflow:hidden; position:relative; padding-left:15px; margin-top:20px;}
.main-board-con li:first-child{margin-top:0;}
.main-board-con li:before{display:block; content:""; width:3px; height:3px; background-color:#2a2a2a; position:absolute; top:7px; left:0px;}
.main-board-con li .bbs-tit{display:block; float:left; width:80%; color:#727272; font-size:15px; letter-spacing:-0.75px; height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-board-con li .bbs-date{float:right; width:20%; color:#727272; letter-spacing:-0.5px; text-align:right;}
.main-board-box .board-more-btn{position:absolute; top:0px; right:0px; color:#000;  }
.main-board-box .board-more-btn i{font-size:30px}
/* 컨텐츠 9 :: 배너 */
.main-board-banner-con{float:right; width:47%;}
.main-board-banner-con ul{overflow:hidden; margin:0 -2%;}
.main-board-banner-con ul li{float:left; width:46%; margin:0 2%;}
.main-board-banner-con ul li a{display:block; position:relative; }
.main-board-banner-con ul li a .main-board-banner-thumb{display:block; overflow:hidden; position:relative; height:0; padding-top:100%; background:#333;}
.main-board-banner-con ul li a .main-board-banner-thumb img{position:absolute; top:0px; left:0px; width:100%; height:100%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.main-board-banner-con ul li a:hover .main-board-banner-thumb img{transform:scale(1.06);}
.main-board-banner-con ul li a .main-board-thumb-cover{position:absolute; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.5)}
.main-board-banner-con ul li a .main-board-thumb-cover p{display:table; width:100%; height:100%; }
.main-board-banner-con ul li a .main-board-thumb-cover p strong{display:table-cell; width:100%; height:100%; vertical-align:middle; text-align:center; color:#fff; font-size:16px; font-weight:400;}


/* -------- 메인 컨텐츠 :: 컨텐츠10(Swiper 예제) -------- */
#mainContent10{padding:60px 0; background-color:#f2f2f2;}
.main-gallery-rolling-con2 .bbs-basic-gallery-con{overflow:visible;}
.main-gallery-rolling-con2 .bbs-basic-gallery-con,
.main-gallery-rolling-con2 .bbs-basic-gallery-con li {margin:0}
.main-gallery-rolling-con2 .bbs-basic-gallery-con li a .gallery-txt-con{background-color:#fff;}
/* 메인 갤러리 :: Swiper Controls */
.main-news-swiper-controls {display:flex; justify-content:space-between; align-items:center; margin-top:30px;}
.main-news-swiper-controls .swiper-scrollbar {position:relative; width:calc(100% - 100px); height:1px; background-color:#d5d5d5; margin-right:30px;}
.main-news-swiper-controls .swiper-scrollbar-drag {height:5px; background-color:#505050; margin-top:-1.5px; cursor:pointer;}
.main-news-swiper-controls i {font-size:30px; color: #5a5a5a;}
.main-news-swiper-controls .swiper-button-disabled{opacity:0.5; cursor:default;}

/* -------- 메인 컨텐츠 :: 컨텐츠11(배경애니메이션) -------- */
#mainContent11:not(.section){height:100vh; display:flex; align-items:center;}
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; }
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; 
	top:55%; right:2%; 
	z-index:99; 
	margin-top:-142px;
	opacity:0;
	visibility:hidden;
	transition:var(--transition-custom2);
}
#rightBar.fixed{visibility:visible; opacity:1.0; top:50%;}
#rightBar > ul {width:56px;}
#rightBar > ul > li{border-top:1px solid #7f7f7f;}
#rightBar > ul > li:first-child{border-top:0;}
#rightBar > ul > li > a{display:block; width:56px; height:56px; background-color:#000; text-align:center; line-height:56px; color:#fff; transition:var(--transition-custom);}
#rightBar > ul > li > a:hover{background-color:#7f7f7f}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:50px;
    opacity: 1;
    transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:20px; margin:10px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:20px; box-sizing:border-box; padding:5px; }
#fp-nav ul li a span{display:block; width:10px; height:10px; background-color:#fff; border-radius:50%; opacity:0.2;filter:Alpha(opacity=20);}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	right:20px; top:0; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:12px; 
	color:#fff; 
	margin-right:5px; 
	text-align:right; 
	transition:var(--transition-custom);
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip{opacity:1.0;}
#fp-nav ul li a.active + .fp-tooltip span{transform:translateX(0%)}

/* Black Style */
#fp-nav.black ul li a span{background-color:#000}
#fp-nav.black ul li .fp-tooltip{color:#222;}