@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2023.12.08 | 김효진 | 최초 등록
 * </pre>
 * @author 디자인팀 김효진
 * @since 2023.12.08
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */
#wrap>.container {max-width:none;}
.mainbody {position:relative;min-height:900px;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;overflow:hidden}
[id*=mainbody] .datalist .item {vertical-align:top;}
[id*=mainbody] .datalist .item img {width:100%}
[id*=mainbody] .datalist .slick-list .slick-track {margin:0}
@media screen and (max-width:1419px){
	.mainbody {padding-left:10px;padding-right:10px}
	[id*=mainbody]>.container {margin-left:10px;margin-right:10px;}
}
@media screen and (max-width:1259px){
	.mainbody {min-height:auto}
}

/* 섹션별 바로가기 */
#go1 {position:fixed;left:13.5%;bottom:40px;z-index:100;transition:all .45s ease}
#go1 #go1mainbody {display:inline-block;vertical-align:top;}
#go1 #go1mainbody li {float:left;}
#go1 #go1mainbody li a {position:relative;display:block;width:28px;height:28px;}
#go1 #go1mainbody li a:before {position:absolute;top:50%;left:50%;content:"";display:block;width:8px;height:8px;box-sizing:border-box;border:1px solid #fff;border-radius:2px;margin:-4px;background:transparent;transition:all .45s ease}
#go1 #go1mainbody li.on a:before {background:#fff;}
#go1 .mNum {display:inline-block;vertical-align:top;margin-left:20px;color:#fff;font-size:12px;line-height:1;font-weight:400;line-height:1;padding-top:8px;font-weight:600}
#go1 .mNum span:before {content:"0";display:inline;}
#go1 .mNum .on:after {content:"";display:inline-block;vertical-align:middle;width:2px;height:12px;background:#fff;transform:rotate(45deg);margin:-2px 10px 0;}
#go1.bottom {bottom:210px}
@media screen and (max-width:1699px){
	#go1 {left:5%;}
}
@media screen and (max-width:1519px){
	#go1 {left:50px;}
}
@media screen and (max-width:1259px){
	#go1 {left:20px;}
}
@media screen and (max-width:599px){
	#go1 #go1mainbody li a {width:20px;height:20px;}
	#go1 .mNum {padding-top:3px;margin-left:15px;}
}


/* 클래스에 따른 색상 정의 */
#container.half #go1 #go1mainbody li a:before {border-color:#3d54e0}
#container.half #go1 #go1mainbody li.on a:before, #container.go1.half #go1 #go1mainbody li.on a:before {background-color:#3d54e0}
#container.half #go1 .mNum {color:#3d54e0}
#container.half #go1 .mNum .on:after {background-color:#3d54e0}
#container.go1 #go1 #go1mainbody li a:before {border-color:#fff}
#container.go1 #go1 #go1mainbody li.on a:before, #container.go1.go1 #go1 #go1mainbody li.on a:before {background-color:#fff}
#container.go1 #go1 .mNum {color:#fff}
#container.go1 #go1 .mNum .on:after {background-color:#fff}

/* 마우스 스크롤 */
.mainbody .mousewheel1 {position:absolute;bottom:30px;right:13.5%;z-index:10;width:43px;height:136px;background:url(../../img/main/main_sprite.png) no-repeat 0 0;}
#container.half .mainbody .mousewheel1 {background-position:-234px 0}
.mainbody .mousewheel1.scroll1up1 {height:60px;background-position:-45px -74px;}
@media screen and (max-width:1699px){
	.mainbody .mousewheel1 {right:5%}
}
@media screen and (max-width:1519px){
	.mainbody .mousewheel1 {right:50px}
}
@media screen and (max-width:1259px){
	.mainbody .mousewheel1 {right:20px}
}
@media screen and (max-width:599px){
	.mainbody .mousewheel1 {right:10px;bottom:40px;width:35px;height:109px;background-size:800px auto;}
	#container.half .mainbody .mousewheel1 {background-position:-187px 0}
}

/* 섹션별 배경이미지 */
#mainbody1 {background-image:url(../../img/main/mbody1.jpg)}
#mainbody2 {background-image:url(../../img/main/mbody2.jpg)}
#mainbody3 {background-image:url(../../img/main/mbody3.jpg)}
#mainbody4 {background-image:url(../../img/main/mbody4.jpg)}
#mainbody5 {background-image:url(../../img/main/mbody5.jpg)}
#mainbody6 {background-image:url(../../img/main/mbody6.jpg)}
#mainbody7 {background-image:url(../../img/main/mbody7.jpg)}
#mainbody8 {background-image:url(../../img/main/mbody8.jpg)}

/* 공통 */
.mainbody .tg1 {width:100%;height:100%;text-align:center;color:#fff;}
.mainbody .tg1 .wrap1 {display:table;width:100%;height:100%;}
.mainbody .tg1 .wrap1 .in {width:100%;height:100%;display:table-cell;vertical-align:middle;}
.mainbody .tg1 .t1 {position:relative;font-family:"Tenada", sans-serif;font-size:75px;display:inline-block;vertical-align:top;line-height:75px}
.mainbody .tg1 .t1 strong {position:relative;display:inline-block;vertical-align:top;font-size:78px;font-style:italic;margin-left:20px;margin-right:80px;margin-top:-36px;line-height:78px}
.mainbody .tg1 .t1 strong:after {position:absolute;bottom:-25px;left:-26px;content:"";display:block;width:95px;height:49px;background:url(../../img/main/main_sprite.png) no-repeat -104px -82px}
.mainbody .tg1 .t1 span {display:block;margin-top:25px}
.mainbody .tg1 .t1 em {color:#fff;font-size:109px;}
.mainbody .tg1 .t2 {font-size:22px;line-height:36px;margin-top:20px}
.mainbody .tg1 .btns {margin-top:50px;}
.mainbody .tg1 .btns li {display:inline-block;vertical-align:top;margin:0 3px}
.mainbody .tg1 .btns li a {display:block;min-width:270px;height:60px;background:#131746;color:#fff;font-size:18px;font-weight:500;border-radius:30px;line-height:60px;transition:all .35s ease;padding:0 40px;box-sizing:border-box}
.mainbody .tg1 .btns li a:after {content:"";display:inline-block;vertical-align:middle;width:0;transition:width .35s ease .1s;margin-top:-6px}
.mainbody .tg1 .btns li a:hover:after, .mainbody .tg1 .btns li a:focus:after {width:17px;height:10px;background:url(../../img/main/main_sprite.png) no-repeat -321px -12px;margin-left:20px;margin-right:-20px}
.mainbody .tg1 .btns li:first-child a {background-color:#fff;color:#25283b;box-shadow:6px 6px 8px rgba(0,0,0,.15)}
.mainbody .tg1 .btns li:first-child a:hover:after, .mainbody .tg1 .btns li:first-child a:focus:after {background-position:-321px 0;}
.mainbody .tg1 .lst {position:relative;margin-top:40px;}
.mainbody .tg1 .lst ul {width:45%;}
.mainbody .tg1 .lst ul li {margin:9px 3px;text-align:center}
.mainbody .tg1 .lst ul li a {min-width:205px;padding:0 70px;}
.mainbody .tg1 .lst ul li .f1 {position:absolute;bottom:0;right:100px;width:612px;height:400px;border-radius:25px;overflow:hidden;opacity:0;visibility:hidden;transition:all .45s ease .1s}
.mainbody .tg1 .lst ul li .f1 img {width:100%;height:100%;}
.mainbody .tg1 .lst ul li.over .f1 {opacity:1;right:0;visibility:visible;}
.mainbody .tg1 .lst ul li.over a {background-color:#fff;color:#25283b}
.mainbody .tg1 .lst ul li.over a:after {width:17px;height:10px;background:url(../../img/main/main_sprite.png) no-repeat -321px 0;margin-left:20px;margin-right:-20px}
/* 흰배경 섹션 */
.mainbody.bg .tg1 .t1 {color:#3d54e0;}
.mainbody.bg .tg1 .t2 {color:#000;}
.mainbody.bg .tg1 .t1 em {color:#8898fb;}
#mainbody5.bg .tg1 .btns li a, #mainbody6.bg .tg1 .btns li a {color:#fff; background:#3c5adb; min-width:240px;}
#mainbody5.bg .tg1 .btns li a:hover:after, #mainbody5.bg .tg1 .btns li a:focus:after, #mainbody6.bg .tg1 .btns li a:hover:after, 
#mainbody6.bg .tg1 .btns li a:focus:after{width:17px;height:10px;background:url(../../img/main/main_sprite.png) no-repeat -321px -12px;margin-left:20px;margin-right:-20px}
#mainbody7.bg .tg1 .btns li {margin-bottom:3px;}
#mainbody7.bg .tg1 .btns li a {min-width:260px;}
@media screen and (max-width:1259px){
	.mainbody .tg1 .t1 {font-size:60px;line-height:60px;}
	.mainbody .tg1 .t1 strong {font-size:62px;}
	.mainbody .tg1 .t1 em {font-size:87px}
	.mainbody .tg1 .t2 {font-size:20px;}
	.mainbody .tg1 .btns {margin-top:45px;}
	.mainbody .tg1 .btns li a {min-width:216px;height:54px;line-height:54px;font-size:17px;}
	.mainbody .tg1 .lst ul li a {min-width:auto;padding:0 40px}
	#mainbody1 .tg1 .btns li a {min-width:auto;padding:0 40px}
}
@media screen and (max-width:1099px){
	.mainbody .tg1 .lst {margin-top:0}
	.mainbody .tg1 .lst ul {width:100%;text-align:center;margin-top:20px}
	.mainbody .tg1 .lst ul li .f1 {display:none}
}
@media screen and (max-width:999px){
	.mainbody .tg1 .t1 {font-size:53px;line-height:53px;}
	.mainbody .tg1 .t1 strong {font-size:55px;margin-right:56px}
	.mainbody .tg1 .t1 em {font-size:76px}
	.mainbody .tg1 .t2 {font-size:19px;margin-top:10px}
	.mainbody .tg1 .btns {margin-top:40px;}
	.mainbody .tg1 .btns li a {min-width:189px;}	
}
@media screen and (max-width:768px){
	.mainbody .tg1 .t1 {font-size:45px;line-height:45px;}
	.mainbody .tg1 .t1 strong {font-size:47px;margin-right:42px}
	.mainbody .tg1 .t1 em {font-size:65px}
	.mainbody .tg1 .t2 {font-size:18px;line-height:30px;}
	.mainbody .tg1 .btns {margin-top:25px;}
	.mainbody .tg1 .btns li a {font-size:16px}
	.mainbody .tg1 .lst ul li {display:block;float:left;width:49%;margin:2px 0 2px 1%}
	.mainbody .tg1 .lst ul li:nth-child(odd) {margin-left:0}
	.mainbody .tg1 .lst ul li a {padding:0}
	.mainbody .tg1 .lst ul li.over a:after {margin-left:10px}
	.mainbody.bg .tg1 .t2 br {display:none}
}
@media screen and (max-width: 699px){
	.mainbody .tg1 .mlst ul li {width:49.5%;margin-left:1%;margin-bottom:1%}
	.mainbody .tg1 .lst ul li {width:49.5%;margin-left:1%;margin-bottom:1%}
	.mainbody .tg1 .lst ul li:nth-child(odd) {margin-left:0}
	.mainbody .tg1 .lst ul li .f1 {max-width:612px;height:auto;width:100%}
}
@media screen and (max-width:599px){
	.mainbody .tg1 .t1 {font-size:38px;}
	.mainbody .tg1 .t1 strong {font-size:39px;margin-right:35px}
	.mainbody .tg1 .t1 strong:after {bottom:-7px;left:-18px;width:76px;height:39px;background-size:800px auto;background-position:-83px -66px}	
	.mainbody .tg1 .t1 em {font-size:55px}
	.mainbody .tg1 .t2 {font-size:17px;line-height:24px;padding-bottom:20px}
	.mainbody .tg1 .btns {margin-top:20px;}
	.mainbody .tg1 .btns li a {font-size:15px;height:50px;line-height:50px}	
	#mainbody7.bg .tg1 .btns li a {min-width:200px;}
}
@media screen and (max-width:499px){
	.mainbody .tg1 .t1 {font-size:30px;line-height:30px}
	.mainbody .tg1 .t1 strong {font-size:31px;margin-right:20px;}
	.mainbody .tg1 .t1 strong:after {bottom:2px;left:-16px;width:67px;height:34px;background-size:700px auto;background-position:-73px -57px}	
	.mainbody .tg1 .t1 span {margin-top:10px}
	.mainbody .tg1 .t1 em {font-size:44px}
	.mainbody .tg1 .t2 {font-size:16px;}
	.mainbody .tg1 .t2 br {display:none}
	.mainbody .tg1 .btns {margin-top:10px;}
	.mainbody .tg1 .btns li a {font-size:14px;min-width:auto;height:45px;line-height:45px;padding-left:20px;padding-right:20px}	
	#mainbody7.bg .tg1 .btns li a {min-width:120px;padding-left:0;padding-right:0}

}
@media screen and (max-width:399px){
	.mainbody .tg1 .t1 {font-size:26px;line-height:26px}
	.mainbody .tg1 .t1 strong {font-size:23px;margin-right:10px;}
	.mainbody .tg1 .t1 strong:after {bottom:12px;width:48px;height:25px;background-size:500px auto;background-position:-52px -41px}	
	.mainbody .tg1 .t1 em {font-size:33px}
	.mainbody .tg1 .t2 {font-size:14px;word-break:keep-all;line-height:22px}
	.mainbody .tg1 .t2 br {display:none}
	.mainbody .tg1 .btns {margin-top:10px;}
	.mainbody .tg1 .btns li {margin:2px 1px}
	.mainbody .tg1 .btns li a {min-width:auto;}	
}


/* mainbody1 */
#mainbody1 .tg1 {margin-top:-20px}
#mainbody1 .tg1 .btns li a{min-width: 235px;}

@media screen and (max-width:1259px){
	#mainbody1 .tg1 .btns li a {min-width:auto;padding:0 40px}
}
@media screen and (max-width:768px){
	#mainbody1 .tg1 .btns li {display:block;float:left;width:48%;margin:2px 0 2px 1%}
	#mainbody1 .tg1 .btns li a {padding:0}
}

/* mainbody4 */
#mainbody4 .container {max-width:1400px;height:100%;margin:auto;}
#mainbody4 .container .wrap1 {text-align:left;}
#mainbody4 .tg1 .btns li:first-child a {background-color:#131746;color:#fff}
#mainbody4 .tg1 .btns li.over a, #mainbody4 .tg1 .btns li:first-child a:hover, #mainbody4 .tg1 .btns li:first-child a:focus {background-color:#fff;color:#25283b;}
@media screen and (max-width:1099px){
	#mainbody4 .container .wrap1 {text-align:center;}
}

/* mainbody5 */
#mainbody5>.container {height:100%}
#mainbody5 .tg1 .t1 em {font-size:inherit;background-image:linear-gradient(#3d54e0 50% 0, #8898fb 0 50%);-webkit-background-clip:text;-webkit-text-fill-color: transparent;}
@media screen and (max-width:1419px){
	#mainbody5 .tg1 .wrap1, #mainbody5 .tg1 .wrap1 .in, #mainbody6 .tg1 .wrap1, #mainbody6 .tg1 .wrap1 .in {display:block;}
	#mainbody5 .tg1 .wrap1 .in, #mainbody6 .tg1 .wrap1 .in {padding-top:150px;box-sizing:border-box}
}

/* fcard 공통 */
[id*=fcard] {position:relative;max-width:1400px;margin:35px auto 0;}
[id*=fcard] .datalist .slick-list {padding-bottom:40px}
[id*=fcard] .datalist .item a:before {position:absolute;bottom:38px;right:35px;content:"";display:block;width:39px;height:39px;background:url(../../img/main/main_sprite.png) no-repeat -193px 0;z-index:1}
[id*=fcard] .slick-arrow {position:absolute;top:50%;width:70px;height:70px;background:rgba(255,255,255,.8) url(../../img/main/main_sprite.png) no-repeat;margin-top:-55px;z-index:1;border:0;text-indent:-9999px;border-radius:50%;border:1px solid #fff;box-shadow:5px 5px 7px rgba(153,153,153,.17)}
[id*=fcard] .slick-prev {left:-40px;background-position:-47px -2px;}
[id*=fcard] .slick-next {background-position:-121px -2px;}
#fcard1 .slick-next {right:486px;}

/* fcard1 */
#fcard1 .datalist {margin-right:-508px;}
#fcard1 .datalist .item a {position:relative;display:block;margin-right:38px;border-radius:25px;box-shadow:10px 10px 20px rgba(193,200,214,.65);overflow:hidden;background:#fff;transition:all .45s ease}
#fcard1 .datalist .slick-active .item a {background:#4f6cbf;}
#fcard1 .datalist .slick-current + .slick-slide + .slick-slide + .slick-slide .item a {background-color:#fff}
#fcard1 .datalist .slick-current + .slick-slide + .slick-slide + .slick-slide .item a .f1 img {opacity:.6}
#fcard1 .datalist .item a:after {position:absolute;bottom:0;left:0;content:"";display:block;width:100%;height:33%;background:linear-gradient(to top, rgba(0,0,0,.41), transparent)}
#fcard1 .datalist .item a .f1 img {display:block;opacity:1;transition:all .45s ease}
#fcard1 .datalist .item a .t3 {position:absolute;bottom:0;left:0;font-size:26px;color:#fff;padding:35px 45px;z-index:1}
#fcard1 .datalist .item a:hover .f1 img {opacity:.67;}
#fcard1 .datalist .slick-current .item a .f1 img {opacity:.67}
#fcard1 .datalist .slick-current .item a:before, [id*=fcard] .datalist .item a:hover:before, [id*=fcard] .datalist .item a:focus:before {background-position:-193px -41px}

/* fcard2 */
#fcard2 .datalist {margin-right:-20px}
#fcard2 .datalist .item a {position:relative;display:block;margin-right:20px;border-radius:25px;overflow:hidden;background-color:#1c283d;margin-top:20px;transition:all .4s ease}
#fcard2 .datalist .item a:after {position:absolute;content:"";display:block;}
#fcard2 .datalist .item a .t3 {position:absolute;bottom:45px;left:30px;font-size:26px;color:#fff;font-weight:500;line-height:1}
#fcard2 .datalist .item a:hover {margin-top:0;box-shadow:10px 10px 15px rgba(193,200,214,.65);}
#fcard2 .datalist .item a:hover .f1 {opacity:.7}
@media screen and (max-width:1599px){
	#fcard1 .datalist {margin-right:-356px;}
	#fcard1 .slick-next {right:443px}
}
@media screen and (max-width:1459px){
	#fcard1 {margin-left:30px}
	#fcard1 .datalist {margin-right:-254px;}
	#fcard1 .slick-next {right:416px}
}
@media screen and (max-width:1399px){
	#fcard1 .datalist {margin-right:-203px;}
	#fcard2 .datalist .item a .t3 {font-size:22px;}
}
@media screen and (max-width:1259px){
	#fcard1 {max-width:100%;margin-right:-38px}
	#fcard1 .datalist {margin-right:20px;}
	#fcard1 .slick-next {right:18px}
	#fcard2 .slick-next {right:-10px}
}
@media screen and (max-width:999px){
	[id*=fcard] .datalist .item a:before {bottom:20px;right:30px}
	#fcard1 .datalist .item a .t3 {font-size:22px;padding:20px 30px}
}
@media screen and (max-width:768px){
	#fcard1 {max-width:600px;margin-left:auto;margin-right:auto}
	#fcard1 .datalist {margin-right:0}
	#fcard1 .datalist .item a {margin-right:0}
	#fcard1 .datalist .item a .t3, #fcard2 .datalist .item a .t3 {font-size:20px;}
	#fcard1 .slick-next {right:-40px}
}
@media screen and (max-width:599px){
	#fcard2 {margin-top:0}
	[id*=fcard] .datalist .slick-list {padding-bottom:0}
	[id*=fcard] .datalist .item a:before {bottom:15px;right:25px}
	[id*=fcard] .slick-arrow {width:49px;height:49px;margin-top:-25px;}
	[id*=fcard] .slick-prev {left:-10px;background-position:-58px -11px}
	[id*=fcard] .slick-next {right:-10px;background-position:-131px -11px}
	#fcard2 .slick-next {right:0}
	#fcard1 .datalist .item a {box-shadow:none}
	#fcard1 .datalist .item a .t3, #fcard2 .datalist .item a .t3 {font-size:18px;padding:15px 25px;}
	#fcard2 .datalist .item a .t3 {padding:0;bottom:25px;left:20px;}
}
@media screen and (max-width:768px){
	#mainbody7 .tg1 .t2, #mainbody8 .tg1 .t2 {margin-top:20px}
}

#container.half #mainbody7 .mousewheel1 {background-position:0 0}
@media screen and (min-width:1260px){
	/* 스크롤시 애니메이션 - PC 전용 */
	.mainbody .tg1 .t1 {opacity:0;transform:translateY(70px);transition:all .7s ease .4s}
	.mainbody .tg1 .t2 {opacity:0;transform:translateY(-20px);transition:all .4s ease .5s}
	.mainbody .tg1 .btns li {opacity:0;transform:translateY(20px);transition:all .4s ease}
	.mainbody.on .tg1 .t1, .mainbody.on .tg1 .t2 {opacity:1;transform:none;}
	.mainbody.on .tg1 .btns li {opacity:1;transform:none;transition-delay:1.4s}
	.mainbody.on .tg1 .btns li:first-child {transition-delay:1.2s}
	.mainbody .mousewheel1 {animation:iacts_scroll 1s infinite;animation-timing-function:linear;}
	#mainbody4 .tg1 .btns li {opacity:1;transform:none;}
	#mainbody4 .tg1 .lst {opacity:0;transform:translateY(70px);transition:all .6s ease 1.2s}
	#mainbody4.on .tg1 .lst {opacity:1;transform:none;}
	.mainbody [id*=fcard] {opacity:0;transform:translateY(50px);transition:all .6s ease  1.2s}
	.mainbody.on [id*=fcard] {opacity:1;transform:none;} 
	@keyframes iacts_scroll {
		0% {transform:translate3d(0, -14px, 0)}
		33% {transform:translate3d(0, -4, 0)}
		66% {transform:translate3d(0, -7px, 0)}
		100% {transform:translate3d(0, -14px, 0)}
	}
}