/********************************************************
■ 사이트 공통
********************************************************/

.section{ z-index:0;}
.inner{position: relative; z-index: 3; line-height:1.5; width:1500px; height:100%; margin:0 auto ; padding-top:5.5rem; }
.con{position: relative; z-index: 3; line-height:1.5; width:1200px; margin:0 auto ; padding:7rem 0;}

.moreBtn{display:block; width:9.15rem; height:2.5rem; line-height:2.5rem; text-align:center; color:#000;  background:#DFDFDF; transition: all 0.2s ease-out 0s;}
.moreBtn:hover{background:var(--yellow);}

.section h3{position:relative; font-size:2.4rem; font-family: 's-core-dream';  font-weight: 400; margin-bottom:2.5rem; padding-top:1.5rem; line-height:1;}
.section h3:before{content:''; position:absolute; left:0px; top:0px; width:3.25rem; height:0.3rem; background:var(--yellow);}

#fp-nav ul li:nth-of-type(5){display:none;}

@media (max-width:1500px){
	.inner{padding:5.5rem 1rem 0; width:100%;}
}
@media (max-width:1300px){
	.inner{padding:5.5rem 1.5rem 0; }
	.con{padding:7rem 1.5rem; width:100%;}
}
@media (max-width:767px){
	.inner{padding:5.5rem 2.5rem 0;}
	.con{padding:7rem 2.5rem; }

	.section h3{font-size:2rem;}

	#wrap #fullpage #page-2.section, 
	#wrap #fullpage #page-3.section, 
	#wrap #fullpage #page-4.section, 
	#wrap #fullpage #page-2 .fp-tableCell, 
	#wrap #fullpage #page-3 .fp-tableCell, 
	#wrap #fullpage #page-4 .fp-tableCell{ height: auto !important;}
	
}
/********************************************************
■ 비쥬얼
********************************************************/
#page-1{background:url('/images/default/main/visual_bg.jpg')no-repeat 0 50%; background-size:cover;}
#page-1 .visual-wrap{display:flex; align-items: center}
#page-1 .visual-text{width:50%; }
#page-1 .visual-text h2{font-size:2.4rem; font-family: 's-core-dream';  font-weight: 300; margin-bottom:2rem;}
#page-1 .visual-text h2 span{display:block; font-family:'Pretendard'; font-size:1.5rem; font-weight: 400;}
#page-1 .visual-text h2 b{font-weight: 600;}
#page-1 .visual-text p{margin-bottom:3.5rem;}
#page-1 .visual-img{position:absolute; right:0px; top:0px; width:52%; height:100%; }
#page-1 .visual-img img{position:absolute;  top:-100%; transition: all 0.7s ease-out; width:32%;}
#page-1 .visual-img .img01{left:0; animation:topimg01 1.2s 0.2s; animation-fill-mode:both; }
#page-1 .visual-img .img02{left:34%; animation:topimg02 1.2s 0.4s; animation-fill-mode:both;}
#page-1 .visual-img .img03{right:0;animation:topimg03 1.2s 0.6s; animation-fill-mode:both;}

@keyframes topimg01 {
	0% { top:-100%; opacity:0; }
	100% { top:19.5%; opacity:1; }
}
@keyframes topimg02 {
	0% { top:-100%; opacity:0; }
	100% { top:0%; opacity:1; }
}
@keyframes topimg03 {
	0% { top:-100%; opacity:0; }
	100% { top:30.5%; opacity:1; }
}

@media (max-width:1500px){
	@keyframes topimg01 {
		0% { top:-100%; opacity:0; }
		100% { top:15.5%; opacity:1; }
	}
	@keyframes topimg03 {
		0% { top:-100%; opacity:0; }
		100% { top:23.5%; opacity:1; }
	}
}
@media (max-width:1300px){
	#page-1 .visual-text h2{font-size:2rem;}

	@keyframes topimg01 {
		0% { top:-100%; opacity:0; }
		100% { top:13.5%; opacity:1; }
	}
	@keyframes topimg03 {
		0% { top:-100%; opacity:0; }
		100% { top:20.5%; opacity:1; }
	}
}
@media (max-width:1030px){
	#page-1 .visual-text{width:100%;}
	@keyframes topimg01 {
		0% { top:-100%; opacity:0; }
		100% { top:10.5%; opacity:1; }
	}
	@keyframes topimg03 {
		0% { top:-100%; opacity:0; }
		100% { top:16.5%; opacity:1; }
	}
}
@media (max-width:767px){
	#page-1{background-position:30% bottom;}
	#page-1 .visual-img{width:100%; height:40%; }
	#page-1 .visual-wrap{    padding: 110% 2.5rem 0;     align-items: flex-start;}

	#page-1 .visual-text h2{font-size:1.5rem; margin-bottom: 1rem;}
	#page-1 .visual-text h2 span{font-size:1.2rem;}
	#page-1 .visual-text p{margin-bottom: 1.5rem;}

	@keyframes topimg01 {
		0% { top:-100%; opacity:0; }
		100% { top:19.5%; opacity:1; }
	}
	@keyframes topimg03 {
		0% { top:-100%; opacity:0; }
		100% { top:30.5%; opacity:1; }
	}

}

/********************************************************
■ 컨텐츠
********************************************************/
.half-wrap{display:flex; width:100%; height:100%;}
.half-wrap > div{width:50%;}
.half-wrap .img_box{position:relative; overflow:hidden; }
.half-wrap .img_box img{position:absolute; left:50%; top:50%; width:100%; height:100%; transform: translate(-50%,-50%);  }
.half-wrap .text_box{padding-left:7rem; display:flex; align-items: center;}
.half-wrap .text_box p{margin-bottom:3rem;}


#page-2 .text_box{background:url('/images/default/main/cts1_right.jpg')no-repeat right bottom; background-size:cover;}


#page-3 .img_box{order:2}
#page-3 .text_box{order:1; background:url('/images/default/main/cts2_left.jpg')no-repeat right bottom; background-size:cover; color:#fff;}
#page-3 .text_box > div{position: absolute; width: 1500px;  left: 50%;  transform: translateX(-50%);}

#page-4 ul{display:flex; flex-wrap:wrap; gap:2rem;}
#page-4 ul li{position:relative; width:calc((100% - 2rem) / 2); aspect-ratio: 575 / 169; z-index:0;}
#page-4 ul li:before{content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.0); z-index: -1; transition: all 0.2s ease-out 0s;}
#page-4 ul li a{display:flex; align-items: flex-end; width:100%; height:100%; font-size:1.5rem; font-family: 's-core-dream';  font-weight: 400; padding:1.75rem 2rem; z-index:1; transition: all 0.3s ease-out 0s;}
#page-4 ul li.cont01{background:url('/images/default/main/cts3_01.jpg')no-repeat 50% 50%; background-size:cover;}
#page-4 ul li.cont02{background:url('/images/default/main/cts3_02.jpg')no-repeat 50% 50%; background-size:cover;}
#page-4 ul li.cont03{background:url('/images/default/main/cts3_03.jpg')no-repeat 50% 50%; background-size:cover;}
#page-4 ul li.cont04{background:url('/images/default/main/cts3_04.jpg')no-repeat 50% 50%; background-size:cover;}
#page-4 ul li:is(:hover, :focus):before{ background:rgba(0,0,0,0.7);}
#page-4 ul li:is(:hover, :focus) a{color:#fff;}


@media (max-width:1500px){
	.half-wrap .img_box img{width:auto;}
	.half-wrap .text_box{padding-left:2rem;}
	#page-3 .text_box > div{width: 100%;  left: 0;  transform: translateX(0); padding-left:2rem;} 
}
@media (max-width:1030px){
	
}
@media (max-width:767px){
	.half-wrap{flex-direction: column;}
	.half-wrap > div{width:100%;}
	.half-wrap .text_box{padding:3.5rem 2.5rem;}
	.half-wrap .img_box img{position:relative; left:0; top:0; width:100%; height:100%; transform: translate(0,0);}

	#page-2 .text_box{order:1}
	#page-2 .img_box{order:2}

	#page-3 .text_box > div{position:relative; padding-left:0;}

	#page-4 ul{gap:1rem 0;}
	#page-4 ul li{width:100%;}
	#page-4 ul li a{padding:1rem; font-size: 1.3rem;}
}