@charset "utf-8";

/* ******************  메인 레이아웃(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;}
}
@media all and (min-width:1281px){
	.main-page #header{top:calc(-1 * (var(--header-height) + var(--header-top)));}
	.main-visual-control-box,
	.cm-scroll-icon{bottom:-100px;}

	.main-page.main-active #header{top:var(--header-top);}
	.main-active .main-visual-control-box,
	.main-active .cm-scroll-icon{bottom:6rem;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#000; z-index:9; }
.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-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	/* transform: scale(1.08,1.08); */
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{/* animation: image-zoom-out 8s 0s forwards; */}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.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{font-size:5.4rem; color:#fff; font-weight:400; line-height:1.2; margin-bottom:3rem; font-family:var(--font-family2);}
.main-visual-txt-box .main-visual-txt2{font-size:1.8rem; font-weight:300; line-height:1.5; color:rgba(255,255,255,0.6);}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.3s;}
.active-item .main-visual-txt2{animation-delay:0.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: translateY(-50px); 
		transform: translateX(-50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(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; top:50%; transform:translateY(-50%); margin-top:15rem; width:100%; text-align:left; z-index:11; }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; margin-left:1rem;}
.main-visual-con .slick-dots li{float:left; margin-left:3rem; }
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{position: relative; cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:1rem; height:1rem; background-color:var(--main-color); font-size:0; border-radius:50%; transition:var(--transition-custom)}
.main-visual-con .slick-dots li button:before{position: absolute; content:''; width:3rem; height:3rem; border:1px solid var(--main-color); box-sizing:border-box; top:50%; left:50%; transform:translate(-50%, -50%);  transition:var(--transition-custom); border-radius:50%; opacity:0;}
.main-visual-con .slick-dots li.slick-active button{background-color:var(--main-color);}
.main-visual-con .slick-dots li.slick-active button:before{opacity:1;}



/* active */
.main-active .cm-scroll-icon .scroll-box svg{stroke-dashoffset: 0;}
/* black */



/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1780px){
	.cm-scroll-icon{left:var(--area-padding); transform:none;}
}
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
	/* 메인 비주얼 :: 스크롤 */
	.cm-scroll-icon{position: absolute; top:calc(100vh - 20rem); bottom:auto; left:50%; transform:translate(-50%, -100%); }
	.cm-scroll-icon .scroll-txt{display: none;}
	/* 메인 비주얼 :: 화살포 + 버튼 */
	.main-visual-control-box .area-wide{justify-content: space-between; width:100%; box-sizing: border-box;}
}
@media all and ( max-width: 800px ){
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{margin-bottom:0px;}
	.main-visual-txt-box .main-visual-txt1{font-size:4rem;}
	/* 메인 비주얼 :: 화살포 + 버튼 */
	.cm-left-arrow,
	.cm-right-arrow{width:60px;}

}



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-category{display:block; color:var(--main-color); font-size:2rem; font-weight:600; line-height:1.5; margin-bottom:2rem;}
.main-tit-box .main-tit{color:#000; font-size:4.5rem; font-weight:400; line-height:1.2; margin-bottom:2rem; font-family:var(--font-family2);}
.main-tit-box .main-tit_bg{display: inline;  background-color: #79ab44;  font-size:4.5rem;  color: #ffffff;  line-height: 1.2;  box-decoration-break: clone;  -webkit-box-decoration-break: clone;
  padding: 0 4px;margin-bottom:4rem; font-family:var(--font-family2); font-weight:300;}
.main-tit-box .main-tit02{color:#000; font-size:4rem; font-weight:600; line-height:1.55;}
.main-tit-box .main-txt{color:#58595B; font-size:2rem; font-weight:400; line-height:1.7;}

.main-tit-box .main-category,
.main-tit-box .main-tit,
.main-tit-box .main-tit02,
.main-tit-box .main-txt{letter-spacing:0.05em; filter:blur(20px); transition:var(--transition-custom2);}

.animated .main-tit-box .main-category{letter-spacing:-0.05em; filter:blur(0px);}
.animated .main-tit-box .main-tit{letter-spacing:-0.025em; filter:blur(0px);}
.animated .main-tit-box .main-tit02{letter-spacing:0em; filter:blur(0px);}
.animated .main-tit-box .main-txt{letter-spacing:-0.05em; filter:blur(0px);}

/* 공통 :: 타이틀 :: white */
.main-tit-box.white .main-tit,
.main-tit-box.white .main-tit02{color:#fff;}
.main-tit-box.white .main-txt{color:rgba(255,255,255,0.5);}

/* 공통 :: 버튼 */
.main-visual-more-btn{display:inline-flex; align-items: center; padding:1rem 3rem 1rem 1rem; border-radius:5rem; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(20px); overflow:hidden; margin-top: 6rem;}
.main-visual-more-btn .arrow-circle {display:inline-flex; align-items: center; justify-content:center; width: 4rem; height: 4rem; background: var(--main-color); border-radius:100%; /* line-height:4rem; */ margin-right: 2rem; position: relative; z-index:1; text-align:center;}
.main-visual-more-btn .arrow-circle > i {color: #fff; font-size:2.4rem;}
.main-visual-more-btn em {font-size:1.5rem; color:#fff; letter-spacing:-0.3px; font-weight: 400; position: relative; z-index:1; transition:var(--transition-custom);}
.btn-effect .cm-fill {position:absolute; display: block; width: 0; height: 0; transform:translate(-50%,-50%); border-radius:50%; background:#fff; transition:width 0.7s, height 0.7s; z-index:0;}
.btn-effect:hover .cm-fill {width: 40rem; height: 40rem;}
.btn-effect:hover em{color:#58595B}

/* 공통 :: 화살표 */
.cm-left-arrow{position: relative; display: flex; align-items:center; width:80px; /* height:2rem; */ }
.cm-left-arrow em{position: absolute; width:100%; height:2px; background:#fff;}
.cm-left-arrow i{color:#fff; font-size:20px; transform: translateX(-32%);}
.cm-right-arrow{position: relative; display: flex; align-items:center; justify-content: flex-end; width:80px; height:20px; text-align:right; margin-left:30px;}
.cm-right-arrow em{position: absolute; width:100%; height:2px; background:#fff;}
.cm-right-arrow i{color:#fff; font-size:20px; transform: translateX(32%);}

/* 공통 :: 화살표(black) */
.cm-left-arrow.black em{background:#222;}
.cm-left-arrow.black i{color:#222;}
.cm-right-arrow.black em{background:#222;}
.cm-right-arrow.black i{color:#222;}

/* -------- 메인 컨텐츠 :: 공통 슬라이드 -------- */
/* 메인 비주얼 :: Dots */

.main-slide-dots .slick-dots li{float:left; margin-left:3rem; }
.main-slide-dots .slick-dots li:first-child{margin-left:0}
.main-slide-dots .slick-dots li button{position: relative; cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:1rem; height:1rem; background-color:var(--main-color); font-size:0; border-radius:50%; transition:var(--transition-custom)}
.main-slide-dots .slick-dots li button:before{position: absolute; content:''; width:3rem; height:3rem; border:1px solid var(--main-color); box-sizing:border-box; top:50%; left:50%; transform:translate(-50%, -50%);  transition:var(--transition-custom); border-radius:50%; opacity:0;}
.main-slide-dots .slick-dots li.slick-active button{background-color:var(--main-color);}
.main-slide-dots .slick-dots li.slick-active button:before{opacity:1;}


/* black */
.main-slide-dots.black .slick-dots li button{border-color:var(--main-color);}
.main-slide-dots.black .slick-dots li.slick-active button{background:var(--main-color)}
.main-slide-arrows.black .slick-arrow{color:#000;}


/* -------- 메인 컨텐츠 :: 컨텐츠1  -------- */
#mainContent1{position: relative;}
#mainContent1:before{position: absolute; content:''; width:33.33%; height:100%; top:0; right:0; background:#f5f5f5; transform:translateX(100%); transition:var(--transition-custom2);}
.main-part-con{display: flex;}
.main-part-con .left-box{position: relative; width:50%; z-index:9}

.main-part-control-box{display: flex; align-items:center; margin-top:6rem; filter:blur(10px); transition:var(--transition-custom2);}
.main-part-control-box .main-slide-arrows{margin-right:6rem;}

.main-part-con .right-box{width:50%;}
.main-part-con .right-box .main-part-slide-list{width:100%; max-width:calc(480px + 6rem); transform:translateX(200%); transition:var(--transition-custom2);}
.main-part-slide-list .list-item{position: relative; width:100%; margin-right:6rem; transition:var(--transition-custom); transform-origin: center center;}
.main-part-slide-list .list-item a{position: relative; display: block; width:100%; height:0; padding-top:100%;}
.main-part-slide-list .list-item a .inner-item{position: absolute; top:0; left:0; width:100%; height:100%; padding:6rem 3rem; box-sizing:border-box; display: flex; flex-direction:column; justify-content: space-between;}
.main-part-slide-list .list-item a .inner-item .txt-box{position:absolute; bottom:6rem;}
.main-part-slide-list .list-item a .inner-item .txt-box .tit{font-size:3.5rem; line-height:1; letter-spacing:-0.05em; font-weight:600; color:#fff; font-family:var(--font-family2); margin-bottom:2rem;}
.main-part-slide-list .list-item a .inner-item .txt-box .txt{font-size:1.6rem; line-height:1.5; letter-spacing:-0.05em; font-weight:300; color:#fff}

.main-part-slide-list .slick-list{overflow:visible;}
.main-part-slide-list .slick-list .slick-track{display: flex; transition: var(--transition-custom);}

/* 슬라이드 효과 */
.main-part-slide-list .list-item.item-effect{transform: perspective(960px) rotateY(-90deg) scale(0.8);}

/* animated */
.animated .main-part-control-box{filter:blur(0px);}
.active#mainContent1:before{transform:translateX(0);}
.animated.main-part-con .right-box .main-part-slide-list{transform:translateX(0); transition-delay:0.2s}


/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-category{font-size:1.6rem;}
	.main-tit-box .main-tit,
	.main-tit-box .main-tit_bg{font-size:3.5rem;}
	.main-tit-box .main-tit02{font-size:3rem;}
	.main-tit-box .main-txt{font-size:1.6rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
@media all and (max-width:1280px){
	#mainContent1{padding:10rem 0 20rem;}
	.main-part-con{position: relative; display: block;}
	.main-part-con .left-box{position: static; margin-bottom:5rem; width:100%;}
	.main-part-control-box{position: absolute; bottom:-10rem; width:100%; justify-content:space-between;}
	.main-part-slide-list .list-item a .inner-item{padding:4rem 3rem;}
}
@media all and (max-width:800px){
	#mainContent1:before{width:24.75%;}
	.main-part-con .right-box{width:100%;}
	.main-part-con .right-box .main-part-slide-list{max-width:calc(480px + 3rem)}
	.main-part-slide-list .list-item{margin-right:3rem;}
	.main-part-slide-list .list-item a .inner-item .icon{height:6rem;}
	.main-part-slide-list .list-item a .inner-item .txt-box .tit{font-size:3rem;}
	.main-part-slide-list .list-item a .inner-item .txt-box .txt{font-size:1.6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2  -------- */
#mainContent2{  background:#dfdfd7; background:url('../images/main/main_img03_l.jpg') no-repeat left center ; background-size:cover}
.main-solution-con{position: relative; }
.main-solution-con .left-box{width:50%  }

.main-solution-right-box{position: absolute; width:50%; top:0; right:0; background:#dfdfd7; }
.main-solution-right-box .main-solution-list{position: relative;}
.main-solution-right-box .main-solution-list .list-item{position: absolute; width:100%; height:100vh; top:0; left:0;  transition:var(--transition-custom);}
.main-solution-right-box .main-solution-list .list-item .img-box{height:100%; width:100%; background:#dfdfd7;}
.main-solution-right-box .main-solution-list .list-item .img-box img{height:100%;}


/* animated */
.animated .main-solution-control{filter:blur(0);}


@media all and (max-width:1280px){
	#mainContent2{padding:10rem 0 0; background:#dfdfd7 url('../images/main/main_img03_l.jpg') no-repeat center top; }
	.main-solution-con .left-box{width:100%; padding:0 var(--area-padding); margin-bottom:4rem;}
	.main-solution-right-box{position: relative; width:100%; padding-top:70rem; top:auto; right:auto;}
	.main-solution-right-box .main-solution-list{position: absolute; width:100%; height:100%; top:0; left:0;}
	.main-solution-right-box .main-solution-list .list-item{height:0; padding-top:70rem; overflow:hidden;}
	.main-solution-right-box .main-solution-list .list-item .img-box{width:100%; height:100%;}
	.main-solution-right-box .main-solution-list .list-item .img-box img{width: 100%; height:auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
}
@media all and (max-width:800px){
	.main-solution-control{margin-top:3rem;}
	.main-solution-control .list-item{height:8rem; padding: 0 0.5rem; box-sizing: border-box;}
	.main-solution-control .list-item .btn{font-size:1.4rem;}
	.main-solution-right-box,
	.main-solution-right-box .main-solution-list .list-item{padding-top: 97.9vw;}
	.main-solution-right-box .main-solution-list .list-item .txt-box{bottom:4rem;}
	.main-solution-right-box .main-solution-list .list-item .txt-box .tit{font-size:1.6rem;}
	.main-solution-right-box .main-solution-list .list-item .txt-box .txt{font-size:3rem;}
}



/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
#mainContent3{ margin-top:70px;}

#mainContent3 .main-tit-box { position:relative;  float: left;}

/* tab menu */
#mainContent3 .tab_wrapper{width: 100%;}
#mainContent3 .tab_wrapper .tab_menu{height: 100%;}
#mainContent3 .tab_wrapper .tab{padding: 0.9rem 0.8rem; background: #fff; color: #c3c3c3; cursor: pointer;}
#mainContent3 .tab_wrapper .tab.active{background: var(--main-color); color: #fff;}

#mainContent3  .tab_menu_container{ float:right; margin-top:50px; margin-right:30px;}
#mainContent3  .tab_menu_container .tab_menu ul{}
#mainContent3  .tab_menu_container .tab_menu li{float:left; width: 180px;  background: #fff; color: #c3c3c3; cursor: pointer; padding:15px 20px; border-style:solid; border-width:1px 1px 1px 0; border-color:#e4e4e4; font-size:16px}
#mainContent3  .tab_menu_container .tab_menu li:first-child {border-left: 1px solid #e4e4e4;}
#mainContent3  .tab_menu_container .tab_menu li{display:block; text-align:center;}
#mainContent3  .tab_menu_container .tab_menu li.on {background: var(--main-color); color:#fff; cursor: pointer;}
#mainContent3  .tab_menu_container .tab_menu li.on h6{font-weight:600;}

.bbs-basic-gallery {position:relative; z-index:999; margin-top:50px;  display: block; clear:both}
.bbs-basic-gallery > ul{margin:0 -1%; word-break:keep-all;}
.bbs-basic-gallery .gallery-over-list-item {float:left; width:31%; margin:0 1% 2%; box-shadow:1rem 1rem 1rem 0px rgba(0, 0, 0, 0.06); padding:20px 20px; border-radius:10px; border:1px solid #e4e4e4}
.bbs-basic-gallery .gallery-over-list-item a {display:block;}
.bbs-basic-gallery .gallery-img-box {position:relative; text-align:center; }
.bbs-basic-gallery .gallery-img-box .img-wrap {display:block; height:0; padding-top:64%;}
.bbs-basic-gallery .gallery-img-box .img-wrap img{position:absolute; top:0px; /* right:0px; bottom:0px; */ left:0px; width:100%; height:100%; /*transition: all 5s ease;*/}
.bbs-basic-gallery .gallery-img-box .category {position:absolute; left:0; top:0; display:inline-block; min-width:50px; padding:0 5px; height:30px; line-height: 30px; font-size:13px; letter-spacing: -0.5px; color:#fff; background-color:rgb(0,0,0,0.5)}
.bbs-basic-gallery .gallery-img-box .broad-bg {position:absolute; width:100%; height:100%; left:0; top:0; overflow:hidden;}
.bbs-basic-gallery .gallery-img-box .broad-bg span{position:relative; display:block; width:0; height:0; transform:translate(-50%, -50%); left:50%; top:50%; /*transition:all 0.3s;*/ border-radius:100%; background-color:rgb(0,0,0,0.5)}

.bbs-basic-gallery .gallery-info {padding: 30px 0 0; }
.bbs-basic-gallery .gallery-info .gallery-info-tit {font-size:18px; letter-spacing: -0.5px; color:#000; font-weight: 600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:20px;}
.bbs-basic-gallery .gallery-info p {overflow:hidden; height:2.8em; font-size:15px; line-height: 1.4; letter-spacing: -0.25px; font-weight:400; color:#666; margin-bottom:20px; display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.bbs-basic-gallery .gallery-info .gallery-date {font-size:13px; letter-spacing: -0.5px; color:#aaa; }

.gallery_info_txt {font-size:14px; text-align:left; word-break:keep-all; position:relative; z-index:9; font-weight:300; color:#999; line-height:1.5; margin-top:50px;}
.gallery_info_txt em { color:var(--main-color); font-weight:500}


 @media all and ( min-width: 801px ){
	
    /* .bbs-basic-gallery .gallery-over-list-item a:hover .gallery-btn {background-color:transparent; right:50%; bottom:50%; transform:translate(50%,50%); box-shadow:none;} */
    .bbs-basic-gallery .gallery-over-list-item a:hover .broad-bg span {width:150%; height:230%; left:50%; top:50%; opacity:0.4; transition-delay:0.2s;}
	/* .bbs-basic-gallery .gallery-over-list-item a:hover .gallery-img-box .gallery-btn:before{transform:rotate(360deg); font-size:34px} */
}
@media all and ( max-width: 800px ){
	#mainContent3{ margin-top:0px;}
	#mainContent3  .tab_menu_container{ float:none; margin-top:20px; margin-right:0px;}
	#mainContent3  .tab_menu_container .tab_menu ul{}
	#mainContent3  .tab_menu_container .tab_menu li{float:left; width:49%;  background: #fff; color: #c3c3c3; cursor: pointer; padding:15px 0; border-style:solid; border-width:1px 1px; border-color:#e4e4e4; font-size:16px; margin-left:-1px;}
	#mainContent3  .tab_menu_container .tab_menu li:nth-child(3),
	#mainContent3  .tab_menu_container .tab_menu li:nth-child(4)  { margin-top:-1px;}
	#mainContent3  .tab_menu_container .tab_menu li{display:block; text-align:center;}
	#mainContent3  .tab_menu_container .tab_menu li.on {background: var(--main-color); color:#fff; cursor: pointer;}
	#mainContent3  .tab_menu_container .tab_menu li.on h6{font-weight:600;}

	 #mainContent3{ margin:100px 0}
    .bbs-basic-gallery .gallery-over-list-item{width:48%; margin-bottom:3%;  box-shadow: 0 0 0  rgba(0, 0, 0, 0.06); padding:0; border-radius:0px; border:0px }
	.bbs-basic-gallery .gallery-info p{display:none; font-size:13px;}
	.bbs-basic-gallery ul li:nth-child(3) {display:none; }
	
	.gallery_info_txt {font-size:12px;} 

}
@media all and ( max-width: 480px ){

	.bbs-basic-gallery .gallery-info{padding:20px 0;}
    .bbs-basic-gallery .gallery-info .gallery-info-tit{font-size:15px; margin-bottom:10px;}
    .bbs-basic-gallery .gallery-info p{font-size:12px; margin-bottom:10px}
	.bbs-basic-gallery .gallery-info .gallery-date{font-size:11px;}
}