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

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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; height:100vh; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual:before {content:""; position:absolute; width:100%; height:102px; bottom:0; background:url("/images/main/main_visual_wave.png") top no-repeat; z-index:99;}
.main-visual-container,
.main-visual-wrapper{
    width: 100%;
    height: 100%;
    position: relative
}
.main-visual-item,
.main-visual-item-inner{
    width: 100%;
    height: 100%;
    overflow: hidden
}
/* 메인 비주얼 :: 이미지 */
.main-visual-item .main-visual-img{
    display:block;
    width:100%;
    height:100%;
    background-size:cover !important;
    transform:scale(1.1);
}
.main-visual-con{z-index:1;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
}
.main-visual-item .main-visual-txt-box{
	display:flex; max-width:1440px; margin:auto;
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-visual-btn{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:118px; letter-spacing:-0.35px; color:#fff; margin-bottom:28px; line-height:0.889}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:27px; line-height:1.55; letter-spacing:-0.5px; color:rgba(255,255,255,0.9); margin-left: 97px;}
.main-visual-item .main-visual-txt-con .main-visual-txt2.txt-en {font-size: 38px; font-weight:600;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.swiper-slide-active .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
.main-visual-item.swiper-slide-active .main-visual-txt1,
.main-visual-item.swiper-slide-active .main-visual-txt2,
.main-visual-item.swiper-slide-active .main-visual-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;
}
.main-visual-item.swiper-slide-active .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.main-visual-item.swiper-slide-active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
.main-visual-item.swiper-slide-active .main-visual-txt-con .main-visual-btn{ -webkit-animation-delay:0.7s; animation-delay:0.7s;}
.main-visual-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.swiper-slide-active .main-visual-txt1.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;
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(-50px); 
		transform: translateX(-50px); 
	}
	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 */
#mainVisual .main-visual-container .main-visual-paging {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); bottom:auto;  text-align:center; z-index:11; color:#fff; max-width:1680px; } 
#mainVisual .main-visual-container .main-visual-paging .swiper-pagination-bullet {display:block; width:15px; height:21px; background:url("/images/main/main_visual_dots.png") no-repeat; opacity:1; border-radius:0; margin:30px 0;}
#mainVisual .main-visual-container .main-visual-paging .swiper-pagination-bullet-active {background-image:url("/images/main/main_visual_dots_on.png");}


/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:100px; left:50%; margin-left:-40px; text-align:center; z-index:9; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span {display:block; position:relative; color:rgba(255,255,255,0.8); font-size:14px; padding-bottom:47px; letter-spacing:-0.1px; font-weight:600; }
.main-scroll-icon span:before {content:""; width:3px; height:31px; background-color:#fff; position:absolute; bottom:0; left:50%; margin-left:-1.5px;}
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}

/* 메인 :: 브로슈어 버튼 */
.main-brochures-btn {position: fixed; top: 135px; right: 80px; width: 260px; height: 50px; border-radius: 25px; background: #e4142e; z-index: 1000; 
	display: flex; align-items: center; justify-content: center; }
.main-brochures-btn .txt { color: #fff; font-size: 14px; letter-spacing: -0.025em;}
.main-brochures-btn ul {display: flex;}
.main-brochures-btn ul li {margin-left: 10px;}
.main-brochures-btn ul li a {display: block; width: 100%; height: 100%; color: #fff;}



/* ******************  메인 컨텐츠 :: 공통 ********************** */
/* 공통 :: 타이틀 */
.main-tit-box{ }
.main-tit-box .main-tit { color:#111; font-size:90px; letter-spacing: -0.02777em; }
.main-tit-box .main-sub-tit{display:block; color:#333; font-size:24px; line-height:1.583; }
.main-tit-box .main-tit.point {position:relative; display:inline-block;}
.main-tit-box .main-tit.point:before {content:""; position:absolute; right:100%; margin-right:-16px; top:-55px; width:87px; height:85px; background:url("/images/main/main_circle.png") no-repeat; }

/* 꾸밈요소 */
.main-deco-box {position:absolute; width:100%; bottom:40px; text-align:right; z-index:-1; }
.main-deco-box span {display:block;}


/* ******************  메인 컨텐츠 :: Business ********************** */
#mainBusinessCon {position:relative; padding:159px 0 176px;}
#mainBusinessCon .main-tit-box {display:flex; align-items: center;}
#mainBusinessCon .main-tit-box .main-sub-tit {margin-left: 60px; }
.main-business-con {margin-top:27px;}
/* 아코디언 */
.accordion-list-box{max-width:1695px; margin:0 auto;  }
.accordion-list .accordion-item {position:relative; overflow:hidden; }
.accordion-list .accordion-item:not(.active) {cursor:pointer;}
.accordion-list .accordion-item .accordion-inner {display:block; position:relative; height:100%; margin:0; background-size:cover !important; transition: all 0.4s;}
.accordion-list .accordion-item .accordion-inner:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); opacity:1; transition: opacity 0.3s;}
.accordion-list .accordion-item.active .accordion-inner:before {opacity:0;}

/* 아코디언  :: 타이틀 및 내용 */
.accordion-item .accordion-inner .accordion-tit{
	position:absolute; top:50%; 
	color:#fff; font-size:31px; line-height:1.35; font-weight:600; 
	width:100%; 
	text-align:center; 
	z-index:1;
	opacity:1.0;filter:Alpha(opacity=100);
	transition:all 0.3s;
	transform: translateY(-50%);
}
.accordion-item .accordion-info-box{position:absolute; left:0; right:168px; bottom:0px;  pointer-events: none;} 
.accordion-item.active .accordion-info-box {pointer-events:auto;}
.accordion-item .accordion-info-box:before{
	position:absolute; 
	bottom:0px; left:0px; 
	width:0; height:183px; 
	background-color:#fff;
	content:""; 
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	-ms-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out; 
	z-index:1;
}
.accordion-item .accordion-info-box dl{
	position:relative; z-index:1; 
	padding:0 40px 6px; 
	opacity:0;filter:Alpha(opacity=0); 
	color:#111; 
	-webkit-transition-delay:0s; 
	-moz-transition-delay:0s; 
	-o-transition-delay:0s; 
	-ms-transition-delay:0s; 
	transition-delay:0s; 
	z-index:1;
}
.accordion-item .accordion-info-box .inner-box {position:relative; display:table; width:100%; height:183px;}
.accordion-item .accordion-info-box dl {display:table-cell; vertical-align:bottom;}
.accordion-item .accordion-info-box dl dt{font-size:46px; line-height:1.3; font-weight:600; letter-spacing:-0.25px; margin-bottom:22px; white-space:normal;}
.accordion-item .accordion-info-box .btn-box {margin-top:35px; display:flex; min-width:190px;}
.accordion-item .accordion-info-box .btn-box a {display:flex; justify-content: space-between; align-items:center; position:relative; min-width:190px; font-size: 20px; color: #333; padding:0 8px 15px; border-bottom:3px solid #000; margin-right: 8px; font-weight:600; transition: color 0.3s; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.accordion-item .accordion-info-box .btn-box a:before {content:""; width:0; height:3px; background-color: #e10730; position:absolute; left:0; bottom:-3px; transition: width 0.3s; }
.accordion-item .accordion-info-box .btn-box a i {font-size:18px;  font-weight:600; margin-left:5px;}

.accordion-item .accordion-inner .more-btn{
	position:absolute; right:0px; top:50%; margin-top:-61px; margin-right:-61px;
	width:122px; height:122px; line-height:122px; font-size: 24px;
	text-align:center; border-radius:50%;
	background-color:rgba(225,7,48,0.9);
	z-index:1; 
	-webkit-transition:opacity 0.2s 0s;
	-moz-transition:opacity 0.2s 0s;
	-o-transition:opacity 0.2s 0s;
	-ms-transition:opacity 0.2s 0s;
	transition:opacity 0.2s 0s;  
	opacity:0;filter:Alpha(opacity=0);
}
.accordion-item .accordion-inner .more-btn i{line-height:24px; color:#fff;}

/* 아코디언 :: 타이틀 및 내용 Active */
.accordion-item.active .accordion-inner:after{opacity:0;filter:Alpha(opacity=0); }
.accordion-item.active .accordion-inner .accordion-tit{
	opacity:0;filter:Alpha(opacity=0);
	transition:all 0s;
}
.accordion-item.active .accordion-info-box:before{width:100%; opacity:1.0;filter:Alpha(opacity=100);}
.accordion-item.active .accordion-inner dl{ 
	opacity:1.0;filter:Alpha(opacity=100);  
	-webkit-transition:all 0.3s 0.2s; 
	-moz-transition:all 0.3s 0.2s; 
	-o-transition:all 0.3s 0.2s; 
	-ms-transition:all 0.3s 0.2s; 
	transition:all 0.3s 0.2s; 
}
.accordion-item.active .accordion-inner .more-btn{ 
	opacity:1.0;filter:Alpha(opacity=100); 
	-webkit-transition-delay:0.3s;
	-moz-transition-delay:0.3s;
	-o-transition-delay:0.3s;
	-ms-transition-delay:0.3s;
	transition-delay:0.3s
}
	
/* ******************  메인 컨텐츠 :: History ********************** */
#mainHistoryCon {padding:146px 0 90px; background:url("/images/main/main_history_bg.jpg") center no-repeat; background-size:cover;}
#mainHistoryCon .main-tit-box .main-tit {color: #fff;}
#mainHistoryCon .main-history-slide-box {overflow:visible; height:470px; padding-bottom:90px; margin-top:27px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
/* 슬라이드 */
.main-history-slide {margin:0 -15px;}
.main-history-slide li {width:440px; height:auto; margin:0 15px; transition: all 0.4s;}
.main-history-slide li.swiper-slide-prev ,
.main-history-slide li.swiper-slide-next ,
.main-history-slide li.swiper-slide-next + li + li {margin-top:50px;}
.main-history-slide li a {display:block; height:330px; padding:50px 40px 55px; border:2px solid rgba(255,255,255,0.7); color: #fff; transition: all 0.4s, color 0.1s; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box;}
.main-history-slide li a .year-box {border-bottom:2px solid #999da1; padding-bottom:20px; transition: all 0.4s; }
.main-history-slide li a .year-box .year {font-size:42px; letter-spacing: -0.0238em;}
.main-history-slide li a .txt {position:relative; padding-left:10px; color: rgba(255,255,255,0.7); font-size:19px; line-height:1.47; margin-top:15px; transition: all 0.4s; } 
.main-history-slide li a .txt:first-child {margin-top:18px;}
.main-history-slide li a .txt:before {content:""; display:block; position:absolute; left:0; top:0.65789em; width:3px; height:3px; background:rgba(255,255,255,0.5); transition: all 0.4s; }
/* 화살표 */
.main-history-controls {display:flex; align-items:center; position:absolute; bottom: 25px; font-size:20px; color: rgba(255,255,255,0.6);}
.main-history-controls .swiper-button-play {font-size:20px; color: rgba(255,255,255,0.6); margin:0 15px;}
.main-history-controls .swiper-button-play.pause i:before {content:"\ea3e";}
.main-history-controls > * {cursor:pointer;}
/* 스크롤바 */
.main-history-slide-box.swiper-container-horizontal > .swiper-scrollbar {width:100%; height:5px; bottom:5px; left:50%; transform:translateX(-50%); background-color: #1b2634;  border-radius:0;  }
.main-history-slide-box.swiper-container-horizontal .swiper-scrollbar-drag { background-color: #bbbec2; height:5px; top:0; border-radius:0; cursor:pointer;}

@media all and (min-width:801px){
	.main-history-slide li a:hover {background:#fff; color: #111;}
	.main-history-slide li a:hover .year-box {border-bottom-color:#333;}
	.main-history-slide li a:hover .txt {color: #000;}
	.main-history-slide li a:hover .txt:before {background-color:rgba(22,22,22,0.5);}
}


/* ******************  메인 컨텐츠 :: About ********************** */
#mainAboutCon {padding:115px 0 70px;}
.main-about-con .main-tit-box {float:left; width:42.31%; margin-top:162px; padding-right: 15px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-about-con .main-tit-box .main-sub-tit {margin-top:40px;}
.main-about-con .con-box {float:left; width:57.69%;}
.main-about-con .con-box .main-about-item { float:left; position:relative; width:47.66%;}
.main-about-con .main-about-item .bg {display:block; position:relative; padding-top:116.55%; background-size:cover;}
.main-about-con .main-about-item.item01 {margin-top:98px;}
.main-about-con .main-about-item.item01 .bg {background-image:url("/images/main/main_about_img_01.jpg");}
.main-about-con .main-about-item.item02 {margin-left: 4.66%;}
.main-about-con .main-about-item.item02 .bg {background-image:url("/images/main/main_about_img_02.jpg");}
.main-about-con .main-about-item .txt-box {position:absolute; top:60px; left:45px; right:45px; bottom:60px; color: #fff;}
.main-about-con .main-about-item .txt-box .tit {font-size:32px; line-height:1.3;}
.main-about-con .main-about-item .txt-box .arrow {display:block; width:54px; height:54px; border:2px solid rgba(255,255,255,0.7); text-align:center; margin-top:30px; color: rgba(255,255,255,0.7); transition: all 0.4s;}
.main-about-con .main-about-item .txt-box .arrow i {font-size:20px; line-height:54px; }


/* ******************  메인 컨텐츠 :: News ********************** */
#mainNewsCon {position:relative; padding:152px 0 103px;}
#mainNewsCon .main-deco-box { top:0; bottom:auto; text-align:left;}
.main-news-slide-box.swiper-container-horizontal {margin-top:66px; padding-bottom: 65px;}
.main-news-con .main-tit-box .main-tit {display:block; text-align:center;}
.main-news-con .main-news-item .txt-box .new {display:block; width:48px; height:21px; text-align:center; font-size:12px; line-height:21px; color: #e41f44; border:1px solid #e41f44; transition: all 0.4s;}
.main-news-con .main-news-item .txt-box .tit {display:block; font-size:25px; color: #333; line-height:1.28; margin-top:13px; transition: color 0.4s;}
.main-news-con .main-news-item .txt-box .date {display:block; font-size:16px; color: rgba(51,51,51,0.5); margin-top:13px;}
.main-news-con .main-news-item .img-box {display:block; position:relative; padding-top:57.37%; margin-top:30px;}
/* 스크롤바 */
.main-news-slide-box.swiper-container-horizontal > .swiper-scrollbar { width:100%; height:5px; bottom:5px; left:50%;  border-radius:0;  transform:translateX(-50%); background-color: #ebebeb;  }
.main-news-slide-box.swiper-container-horizontal .swiper-scrollbar-drag { background-color: #e41f44; height:5px; top:0; border-radius:0; cursor:pointer;}


/* ******************  메인 컨텐츠 :: Banner ********************** */
#mainBannerCon {position:relative; padding-bottom:106px;}
#mainBannerCon .main-deco-box {margin-bottom:-176px;}
.main-banner-slide {margin:0 -20px;}
.main-banner-slide li {margin:0 20px;}
.main-banner-slide li .img-wrap {position:relative; padding-top:50.65%; display:block; }
.main-banner-slide .slick-arrow {position:absolute; top:50%; transform:translateY(-50%); width:74px; height:73px; background-color:#fff; font-size:20px; color: rgba(143,153,169,0.7); border-radius:20px; z-index:99; box-shadow:5px 0px 30px rgba(33, 37, 44, 0.2);}
.main-banner-slide .slick-arrow.slick-prev {left:20px; margin-left:-126px; }
.main-banner-slide .slick-arrow.slick-next {right:20px; margin-right:-126px;}


@media all and (max-width:1917px) and (min-width:1025px){
/* 	.main-banner-slide .slick-arrow.slick-prev { margin-left: -5.2083vw;}
	.main-banner-slide .slick-arrow.slick-next { margin-right: -5.2083vw;} */
	.main-banner-slide { padding:0 6.4684vw; margin:0 -1.0433vw;}
	.main-banner-slide li {margin:0 1.0433vw;}
	.main-banner-slide .slick-arrow  {width:3.8602vw; height:3.8080vw; font-size:1.0433vw; border-radius:1.0433vw}
	.main-banner-slide .slick-arrow.slick-prev {; margin-left:0; }
	.main-banner-slide .slick-arrow.slick-next { margin-right:0;}
}
@media all and (max-width:1024px){
	.main-banner-slide {margin:0 -10px;}
	.main-banner-slide li {margin:0 10px;}
	.main-banner-slide .slick-dots {text-align:center; margin-top:35px;}
	.main-banner-slide .slick-dots li {display:inline-block; margin:0 7px;}
	.main-banner-slide .slick-dots button {width:17px; height:17px; background-color: #d9d9d9; border-radius:6px; font-size:0;}
	.main-banner-slide .slick-dots li.slick-active button {background-color: #e41f44;}
	#mainBannerCon .main-deco-box  {bottom:0; margin-bottom:0;}
	#mainBannerCon .main-deco-box img {width:100px;}
}
@media all and (max-width:800px){
	#mainBannerCon {padding-bottom:72.5px;}
	.main-banner-slide {margin:0;}
	.main-banner-slide li {margin:0;}
	.main-banner-slide .slick-dots {margin-top:17.5px;}
	.main-banner-slide .slick-dots li {margin:0 5px;}
	.main-banner-slide .slick-dots button {width:8px; height:8px; border-radius:3px;}
}


/* ****************** 버튼 추가 2026-03-06 ********************** */
.cm-more-btn{position: relative; width:220px; height: 70px; font-size: 17px; font-weight: 600; color: #fff; background-color: #000; border-radius: 35px; display: flex; align-items: center;}
.cm-more-btn .txt{position: relative; z-index:9; width: 100%; padding: 0 25px 0 30px; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; transition: color 0.3s 0.3s;}
.cm-more-btn .txt i{font-size: 24px; font-weight: 400;}

.cm-fill-inner{position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px; overflow:hidden; border-radius: 30px;}
.cm-fill-btn:hover .cm-fill-inner::before{transition-duration: .5s; transform: translate3d(-50%, -50%, 0) scale(1.5);}
.cm-fill-inner .cm-fill {position: absolute; display: block; width: 0px; height: 0px; transform: translate(-50%,-50%); border-radius: 50%; opacity: 0.95; background: #fff; transition: width 0.7s, height 0.7s; }
.cm-fill-btn:hover .cm-fill-inner .cm-fill{ width: 70vw; height: 70vw; }

.main-visual-txt-inner .cm-more-btn{margin-left:97px; margin-top:20px;}

@media (hover: hover) and (min-width:801px) {
	.cm-fill-btn:hover .cm-fill{width: 40vw; height: 40vw;}
	.cm-fill-btn:hover .txt{color: #000; transition-delay:0s;}
}
@media all and (max-width:800px){
	.cm-more-btn{width:170px; height:50px; font-size:15px;}
	.cm-more-btn .txt{padding: 0 20px;}
	.cm-more-btn .txt i{font-size: 18px;}

	.main-visual-txt-inner .cm-more-btn{margin-left:37px;}
}