/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 비쥬얼
********************************************************/
#visual{position:relative; }
#visual .swiper-container{height:100%;}
#visual .vis-text{position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); color:#fff; z-index:1;}
#visual .vis-text p{font-size:var(--font22); margin-bottom:1.5rem;  opacity:0; transition: opacity 1s cubic-bezier(0.16, 1.08, 0.38, 0.98) 1s; -webkit-transition: opacity 1s cubic-bezier(0.16, 1.08, 0.38, 0.98) 1s;}
#visual .vis-text h2{position:relative; white-space: nowrap;}
#visual .vis-text h2:after{content:""; position:absolute; top:50%; width:0; height:1px; background:#fff; opacity:0.7; transition: width 1.5s ease-out 0.5s;}
#visual .vis-text h2 span{display:inline-block;  font-size:var(--font54); font-weight:700;  transition: clip-path 1.2s ease-out 0s;}
#visual .vis-text h2.fade-left{padding-right:8.5rem;}
#visual .vis-text h2.fade-left span{clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); transition-delay:1.2s;}
#visual .vis-text h2.fade-right span{clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%); transition-delay:1.4s;}
#visual .vis-text h2.fade-left:after{right:calc(-1*(1840/54 * 1em));}
#visual .vis-text h2.fade-right{text-align:right; margin-top:0.5rem;}
#visual .vis-text h2.fade-right:after{left:calc(-1*(1600/54 * 1em));}
#visual .vis02 .vis-text h2.fade-right:after{left:calc(-1*(1840/54 * 1em));}
#visual .vod-wrap{position: relative;  width: 100%;  height: 100%;  top: 0px;  left: 0px;  max-width: 100%; aspect-ratio: 87 / 64; transform-origin: right top; z-index:0;}
#visual .vod-wrap .vod{position:absolute; left:0px; top:-5%; width:100%; height:110%; border-radius: 0px; -webkit-border-radius:0; object-fit: cover;z-index:-1; }
#visual .vod-wrap:before{content:''; position:absolute; left:0px; top:0px; width:100%; height:100%; background: linear-gradient(0deg, #4facfe, #00f2fe );
 opacity:0.6;  mix-blend-mode: color;}
#visual .vis-bg{position: relative;  width: 100%;  height: 100%;  top: 0px;  left: 0px;  max-width: 100%; aspect-ratio: 87 / 64; transform-origin: right top; }
#visual .vis-bg img{position:absolute; left:0px; top:0; width:100%; height:100%;  object-fit: cover; z-index:-1; transform: scale(1.1); transition: all 3s ease-out 0s;}

#visual .swiper-slide-active .vis-text p{opacity:1;}
#visual .swiper-slide-active .vis-text h2:after{width:1000px;}
#visual .swiper-slide-active .vis-text h2.fade-left span{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#visual .swiper-slide-active .vis-text h2.fade-right span{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#visual .swiper-slide-active .vis-bg img{transform: scale(1);}

#visual .control{position:absolute; left:5rem; bottom:7rem; display:flex; gap:0.5rem; align-items:center; z-index: 10;  animation:botControl ease-in both 0.5s; animation-delay:0.7s;}
#visual .control .swiper-button-next,
#visual .control .swiper-button-prev{position:relative; top:auto; left:auto; right:auto; margin:0; width:2.5rem; height:2.5rem; background-size:0.4rem auto;}
#visual .control .swiper-pagination{width:8rem; position:relative; text-align:left; height: 2px; display: flex; flex-direction: column;}
#visual .control .swiper-pagination .swiper-pagination-bullet{width:100%;  height:auto; border-radius:0; background:none; opacity: 1; color:#fff;}
#visual .control .swiper-pagination .timer{display:none; position:relative; height:2px; width: 100%;  background:rgba(255,255,255,0.2);}
#visual .control .swiper-pagination .timer .timerbar{position:absolute; display:block; content:""; top:0; left:0; width:0;  height:2px; background:#ff8200; z-index:1;  transform-origin: center left; }
#visual .control .swiper-pagination .num{position:absolute; bottom:-2rem; white-space: nowrap; opacity: 0.4; font-family: "Exo 2", 'Pretendard GOV', serif;}
#visual .control .swiper-pagination .swiper-pagination-bullet:nth-of-type(1) .num{left:0}
#visual .control .swiper-pagination .swiper-pagination-bullet:nth-of-type(2) .num{left:6rem}
#visual .control .swiper-pagination .swiper-pagination-bullet:nth-of-type(3) .num{left:14rem}
#visual .control .swiper-pagination-bullet-active .num{opacity: 1; color:#ff8200; }
#visual .control .swiper-pagination-bullet-active  .timer{display:block;}
#visual .control .swiper-pagination-bullet-active .timer .timerbar{width:100%; height:3px; animation:progressAnim 5s linear; animation-play-state: running;}  
#visual .control .swiper-pagination-bullet-active:nth-child(1) .timer .timerbar{animation-duration:10s}
@keyframes progressAnim {
	0%   { transform: scaleX(0);}
	100% { transform: scaleX(1);}
}

#visual .quick    {position:absolute; right:5rem; bottom:5rem; z-index:1; width:7.5rem; height:7.5rem; background:url('/templates/gongchengshi/images/default/main/quick_bg.png')no-repeat 50% 50%; background-size:cover;  animation:botQuick ease-in both 0.5s; animation-delay:0.7s;}
#visual .quick a  {position: relative; display:flex; justify-content: center; align-items: center; width:100%; height:100%;  font-size: 0; transform:  rotate(-45deg); z-index:1; background:url('/templates/gongchengshi/images/default/main/arrow_w.svg')no-repeat 50% 50%; background-size:auto 1rem; filter: drop-shadow(0 0 14px rgba(0,0,0,0.2)); -webkit-filter: drop-shadow(0 0 14px rgba(0,0,0,0.2)); transition: transform 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s;}
#visual .quick svg{transition: all 0.3s;  fill: #fff; position: absolute;  height: auto;  width: 90%;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); animation: roll 14s infinite linear; text-transform:uppercase; font-family: "Exo 2", 'Pretendard GOV', serif;}
#visual .quick a:hover{transform:  rotate(0deg);}

@keyframes roll {
	0% {transform: translate(-50%, -50%) rotate(0deg) ;}
	100% {transform: translate(-50%, -50%) rotate(360deg);}
}

#intro{position: absolute; top:0; left:0; width:100vw; height:100vh; z-index:98; display: flex; flex-direction: column; justify-content:center;  animation:introAni ease-in both 3s; animation-delay:0.7s; }
#intro .intro-bg{background:#000403; width:100%; height:100%;}
#intro .intro-mid{display: flex; justify-content: center;}
#intro .intro-logo{flex-shrink: 0; position: relative; min-width:500px; height:0; padding-top:500px;}
#intro .intro-logo .logo-svg{display: block;position: absolute;top:0;left:0;width:100%;height:100%;}
#intro .intro-logo .logo-blur svg{display: block; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;height:100%;}

@keyframes introAni {
	0% {
		transform: scale(1);
		opacity:1;
	}
	50% {
		transform: scale(25);
		opacity:0.1;
	}
	90% {
		opacity:0;
	}
	100% {
		transform: scale(50);
		opacity:0;
	}
}

@keyframes botQuick {
	0% {
		bottom: 1rem;
		opacity:0;
	}
	100% {
		bottom: 5rem;
		opacity:1;
	}
}
@keyframes botControl {
	0% {
		bottom: 1rem;
		opacity:0;
	}
	100% {
		bottom: 7rem;
		opacity:1;
	}
}
#header{animation:topHeader ease-in both 0.5s; animation-delay:0.7s;}
@keyframes topHeader {
	0% {
		top: -7rem;
		opacity:0;
	}
	100% {
		top: 0;
		opacity:1;
	}
}

@media (max-width:1440px){ 
	#visual .control{left:1rem;}
    #visual .quick{right:1rem;}
}
@media (max-width:1024px){ 
	#visual .vis-text{width:100%; padding:0 2rem; left:0; transform: translate(0%, -50%);}
	#visual .vis-text h2{white-space: pre-wrap;  text-wrap-style: pretty;}
	#visual .vis-text h2.fade-left{padding-right: 5rem;}
	#visual .vis-text h2.fade-right{padding-left: 10rem;}
	#visual .vis-text h2.fade-right:after{left:calc(-1*(1670/54 * 1em));}
}
@media (max-width:768px){ 
	#visual .vis-text h2 span{font-size:var(--font44);}
	#visual .vis-text h2:after{top:20%;}
	#visual .vis-text h2.fade-left{padding-right: 4rem;}
	#visual .vis-text h2.fade-left:after{right:calc(-1*(2150/54 * 1em));}
	#visual .vis-text h2.fade-right{padding-left: 4rem;}
	#visual .vis-text h2.fade-right:after{left:calc(-1*(2000/54 * 1em));}
	#visual .vis02 .vis-text h2.fade-right:after{left:calc(-1*(2100/54 * 1em));}

	#intro .intro-logo{ min-width: 300px; padding-top: 300px;}
	
	#visual .control{left:0;}
	#visual .quick{width:5rem; height:5rem;}
	#visual .control .swiper-pagination .num{display:none;}
	#visual .control .swiper-button-next,
	#visual .control .swiper-button-prev{background-size:0.6rem auto;}

	@keyframes botControl {
		0% {
			bottom: 1rem;
			opacity:0;
		}
		100% {
			bottom: 3rem;
			opacity:1;
		}
	}
}


/********************************************************
■ 컨텐츠
********************************************************/
.section .inn{max-width:76rem; padding:0 1rem; margin:0 auto;}

/*타이틀*/
.title{text-align:center; margin-bottom:2.5rem; text-wrap-style: pretty; }
.title * {opacity: 0; transform: translateY(100px);}
.title span{display:block; color:var(--yellow); font-size:var(--font22); font-weight:500; }
.title h3{ font-size:var(--font44); color:#212121; font-weight:700; margin-top:1rem; }
.title p{margin-top:1rem; line-height:1.5;}

/*이미지박스*/
.img_box{position: relative;  width: 120%; clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); padding-top: 11%;     transition: clip-path 1.2s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s; }
.img_box img{position: absolute;  left: 50%; top: 50%; transform: translate(-50%, -50%);  width: 100%;  height: 100%; object-fit: cover; object-position: center;}

/*스크롤 텍스트*/
.txt_box{text-align:left; margin-top:3rem; padding-left:4.5rem;}
.txt_box .txt{font-size:var(--font30); font-weight:600; line-height: 1.4; }
.txt_box .txt + .txt{margin-top:2rem;}
.txt_box .txt .val{position: relative; display: block;  width: auto; color: rgba(0, 0, 0, 0.1);}
.txt_box .txt .val .copy{position: absolute; left: 0; top: 0; width: 0; height: 100%; font-size: 1em;  font-weight: inherit;  color: #212121;  overflow: hidden; white-space: nowrap;}


@media (max-width:1024px){ 
	.title h3{ font-size:var(--font32); }

	.img_box{padding-top:25%;}

	.txt_box{padding-left:0.5rem}
	.txt_box .txt{font-size:var(--font22);}
	.txt_box .txt .val .copy{white-space: pre-wrap;}
}
@media (max-width:768px){ 
	.txt_box .txt{ opacity: 0; transform: translateY(100px);}
	.txt_box .txt .val{color: #212121;}
	.txt_box .txt .val .copy{display:none}
}

/********************************************************
■ 애니메이션
********************************************************/

:is(.section.active, .swiper-slide-active) .word01{transition-delay: .1s;}
:is(.section.active, .swiper-slide-active) .word02{transition-delay: .2s;}
:is(.section.active, .swiper-slide-active) .word03{transition-delay: .3s;}
:is(.section.active, .swiper-slide-active) .word04{transition-delay: .4s;}
:is(.section.active, .swiper-slide-active) .word05{transition-delay: .5s;}
:is(.section.active, .swiper-slide-active) .word06{transition-delay: .6s;}
:is(.section.active, .swiper-slide-active) .word07{transition-delay: .7s;}
:is(.section.active, .swiper-slide-active) .word08{transition-delay: .8s;}
:is(.section.active, .swiper-slide-active) .word09{transition-delay: .9s;}
:is(.section.active, .swiper-slide-active) .word10{transition-delay: 1s;}
:is(.section.active, .swiper-slide-active) .word11{transition-delay: 1.1s;}
:is(.section.active, .swiper-slide-active) .word12{transition-delay: 1.2s;}
:is(.section.active, .swiper-slide-active) .word13{transition-delay: 1.3s;}
:is(.section.active, .swiper-slide-active) .word14{transition-delay: 1.4s;}
:is(.section.active, .swiper-slide-active) .word15{transition-delay: 1.5s;}



/********************************************************
■ #business
********************************************************/
#business{padding:7rem 0; background: linear-gradient(#fff 80%, #ECECEC 90%); }

.serviceInfo{position: relative;  margin-top:8.5rem;  height: 44rem; opacity: 0; transform: translateY(100px);}
.serviceInfo:before{content:""; position: absolute; left:calc(50% - 50vw); top:1rem; background:#C0C0C0; width:100vw; height:1px; }
.serviceInfo .swiper-wrapper{align-items: flex-end;}
.serviceInfo .item{display:block; flex:1; color:#000; height: 44rem;  transform-origin: left bottom; transform: translate(150px); opacity: 0; transition: opacity 0.8s , transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);}
.serviceInfo .item:nth-child(1){transition-delay: 1.1s;}
.serviceInfo .item:nth-child(2){transition-delay: 1.5s;}
.serviceInfo .item:nth-child(3){transition-delay: 2s;}
.serviceInfo.active .item{opacity: 1; transform: unset;}
.serviceInfo h4{ margin-top:1rem; font-size:var(--font30); overflow:hidden;}
.serviceInfo h4 span{display:block; font-size:var(--font20); font-weight:400;}
.serviceInfo .img .hover{position: relative; padding-top:0%; clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);}
.serviceInfo .img .hover img{position: absolute;  left: 50%; top: 50%; transform: translate(-50%, -50%);  width: 100%;  height: 100%; object-fit: cover; object-position: center;}
.serviceInfo .img .mask{position: relative; }
.serviceInfo .img .mask img{width:100%;   mask-size: 100%;  -webkit-mask-size: 100%; mask-repeat: no-repeat;}
.serviceInfo .img .mask img.imgD{mask-image: url('/templates/gongchengshi/images/default/main/biz_mask01.svg');  -webkit-mask-image: url('/templates/gongchengshi/images/default/main/biz_mask01.svg');}
.serviceInfo .img .mask img.imgS{mask-image: url('/templates/gongchengshi/images/default/main/biz_mask02.svg');  -webkit-mask-image: url('/templates/gongchengshi/images/default/main/biz_mask02.svg');}
.serviceInfo .img .mask img.imgV{mask-image: url('/templates/gongchengshi/images/default/main/biz_mask03.svg');  -webkit-mask-image: url('/templates/gongchengshi/images/default/main/biz_mask03.svg');}
.serviceInfo .img h4{text-align:left;}
.serviceInfo .img h4 p{transform: translateY(-200%);-webkit-transform: translateY(-200%); transition: transform 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s; -webkit-transition: transform 0.4s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s; }
.serviceInfo .text{background:#fff; border-top:1px solid #000; padding:2.5rem 1rem; margin-top:-1.65rem;}
.serviceInfo .text h4{ text-align:center; margin-bottom:2rem; }
.serviceInfo .text ul{padding-left:3.5rem;}
.serviceInfo .text ul li{padding-left:1.8rem; font-size:0.9rem; background:url('/templates/gongchengshi/images/default/main/mark.svg')no-repeat 0 0.4em; background-size:auto 0.8rem;}
.serviceInfo .text ul li:not(:first-child){margin-top:1rem;}


@media (min-width:1025px){ /* when supported */
	.serviceInfo .item:hover .img .hover{padding-top:125%; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: clip-path 0.5s ease-out 0s;}
	.serviceInfo .item:hover .img h4{}
	.serviceInfo .item:hover h4 p{transform: none; -webkit-transform: none;}
	.serviceInfo .item:hover .img .mask,
	.serviceInfo .item:hover .text{display:none;}
}

@media (max-width:1440px){
	.serviceInfo h4{font-size:var(--font24)}
	.serviceInfo .text ul{padding-left:1rem;}
}
@media (max-width:1024px){
	.serviceInfo{ height:auto;}
	.serviceInfo .swiper-wrapper{align-items: flex-start;}
	.serviceInfo .item{height:auto;}
	.serviceInfo .text ul{padding-left:0;}
}
@media (max-width:768px){
	.serviceInfo{}
	.serviceInfo .swiper-container{overflow: visible;}
	.serviceInfo h4{margin:0 0 1rem;}
	.serviceInfo .text{box-shadow:0 0 0.5rem rgba(0,0,0,0.1); padding:1rem;}
}


/********************************************************
■ #philosophy
********************************************************/
#philosophy{}
#philosophy .philCont{position: relative;}
#philosophy .philCont,
#philosophy .swiper-container{height:100%;}
#philosophy .inn{display:flex; justify-content: space-between; align-items: center; height:100%; padding:0 1rem 0 0;}
#philosophy .text{position: relative;  width:34rem; color:#fff; padding:7rem 4rem; font-family: "Exo 2", 'Pretendard GOV', serif;}
#philosophy .text .exo{display:block; font-size:var(--font22); }
#philosophy .text h4{font-size:var(--font44); margin:1.5rem 0; font-weight:700;  } 
#philosophy .text h4 > span{display:block; overflow:hidden;}
#philosophy .text .box{margin-top:5rem; width:calc(100% + 11rem); padding:3rem; clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%); transition: clip-path 1.2s cubic-bezier(0.16, 1.08, 0.38, 0.98) 0s; }
#philosophy .text .box h5{font-size:var(--font32); margin-bottom:2rem;}
#philosophy .text h4 > span > span,
#philosophy .text p,
#philosophy .big_tit{display:block; transform: translateY(100%); opacity: 0; transition: 0.2s opacity , 0.2s transform;}
#philosophy .big_tit{font-size:8.9rem; padding-bottom:10rem; font-weight:800; line-height:1; }

#philosophy .swiper-slide-active .text .box{clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition-delay: 0.7s;}
#philosophy .swiper-slide-active .text .exo,
#philosophy .swiper-slide-active .text h4 > span > span,
#philosophy .swiper-slide-active .text p,
#philosophy .swiper-slide-active .big_tit{transform: translateY(0); opacity: 1; }
#philosophy .swiper-slide-active .text p{transition-delay: 0.5s;}
#philosophy .swiper-slide-active .big_tit{transition-delay: 0.7s; }
#philosophy .swiper-slide-active .text h4 > span > span.word02{transition-delay: 0.2s; }
#philosophy .swiper-slide-active .text h4 > span > span.word03{transition-delay: 0.3s; }
#philosophy .swiper-slide-active .text h4 > span > span.word04{transition-delay: 0.4s; }

#philosophy .phi01{background:url('/templates/gongchengshi/images/phil_back01.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi01 .text{background:url('/templates/gongchengshi/images/phil_bg01.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi01 .text .box{background:url('/templates/gongchengshi/images/phil_img01.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi01 .big_tit{color:#013F99;}

#philosophy .phi02{background:url('/templates/gongchengshi/images/phil_back02.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi02 .text{background:url('/templates/gongchengshi/images/phil_bg02.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi02 .text .box{background:url('/templates/gongchengshi/images/phil_img02.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi02 .big_tit{color:#FF8200;}

#philosophy .phi03{background:url('/templates/gongchengshi/images/phil_back03.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi03 .text{background:url('/templates/gongchengshi/images/phil_bg03.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi03 .text .box{background:url('/templates/gongchengshi/images/phil_img03.jpg')no-repeat 50% 50%; background-size:cover;}
#philosophy .phi03 .big_tit{color:#1B0093;}

#philosophy .hover_bg{ position: absolute; top: 0; width: 50%; height: 100%; z-index: 1;}
#philosophy .hover_bg.left{left:0;}
#philosophy .hover_bg.right{right:0;}

#philosophy .pointer{position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; will-change: transform;}
#philosophy .pointer .pointer_box{display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; flex-direction: column; align-content: center; padding-top:2rem; width:9rem; height:9rem; border-radius:50%; background:#1498FD; border:1px solid #fff; box-shadow:0 0 1rem rgba(0,0,0,0.1);  opacity: 0; transition: opacity 0.3sease-out;}
#philosophy .pointer.on .pointer_box{opacity: 1;}
#philosophy .pointer .phil-prev,
#philosophy .pointer .phil-next{position:relative; top:auto; margin:0; width:2rem; height:2rem; background:url('/templates/gongchengshi/images/default/main/arrow_w.svg')no-repeat 50% 50%; background-size:1.1rem auto; cursor:pointer;}
#philosophy .pointer .phil-prev{transform: scaleX(-1); left:auto;}
#philosophy .pointer .phil-next{right:auto;}
#philosophy .pointer .phil-pagin{position:relative; bottom:auto; left:auto; display:flex; align-items:center; justify-content: center; font-family: "Exo 2", 'Pretendard GOV', serif; font-weight:600;  text-align:center; color:#fff;}
#philosophy .pointer .phil-pagin .bar{display:inline-block; height:1px; width:2rem; background:#fff; margin:0 0.5rem;}
#philosophy .pointer.left_hover .phil-prev{display:none;}
#philosophy .pointer.right_hover .phil-next{display:none;}

#philosophy .control{ position:absolute; right:calc(50% - 37rem); top:60%; display: flex; flex-wrap: wrap; align-items: center;align-content: flex-start; justify-content: center; padding-top:2rem; width:9rem; height:9rem; border-radius:50%; background:#1498FD; border:1px solid #fff; box-shadow:0 0 1rem rgba(0,0,0,0.1); z-index:1; }
#philosophy .control .phil-prev,
#philosophy .control .phil-next{width:2rem; height:2rem; background:url('/templates/gongchengshi/images/default/main/arrow_w.svg')no-repeat 50% 50%; background-size:1.1rem auto; cursor:pointer;}
#philosophy .control .phil-prev{transform: scaleX(-1);}
#philosophy .control .phil-prev.swiper-button-disabled,
#philosophy .control .phil-next.swiper-button-disabled{display:none;}
#philosophy .control .phil-pagin{display:flex; align-items:center; justify-content: center; font-family: "Exo 2", 'Pretendard GOV', serif; font-weight:600;  text-align:center; color:#fff;}
#philosophy .control .phil-pagin .bar{display:inline-block; height:1px; width:2rem; background:#fff; margin:0 0.5rem;}



@media (max-width:1440px){ 
	#philosophy .big_tit{font-size:7rem;}
	#philosophy .text{width: 50%; padding: 6rem 3rem;   height: 100%;}
	#philosophy .text .box{padding:3rem 2rem; padding-right:11rem; margin-top: 8rem;}

	#philosophy .control{right:1rem;}
}
@media (max-width:1028px){ 
	#philosophy{position:relative;}
	#philosophy .text{padding:6rem 2rem;}
	#philosophy .text p br{display:none;}
	#philosophy .text h4{font-size:var(--font32);}
	#philosophy .hover_bg{display:none;}

	#philosophy .pointer{position: absolute; top:55%; left:auto; right:1rem; transform:none !important; z-index:10; pointer-events:auto;}
	#philosophy .pointer .pointer_box{opacity: 1;}
	#philosophy .pointer .arr_btn{display:flex;}
}
@media (max-width:768px){ 
	#philosophy,
	#philosophy .swiper-slide{height:auto !important;}
	#philosophy .inn{padding:0; flex-direction: column; align-items: flex-start;  }
	#philosophy .text{width:100%; height:auto; padding:3rem 2rem;}
	#philosophy .text p{ text-wrap-style: pretty;}
	#philosophy .text .box{margin-top:3rem; width:100%; padding:2rem 1rem; padding-right:7rem; }
	#philosophy .big_tit{font-size: 5.6rem; padding:2rem; padding-top:0; margin-top:0;}
	
	#philosophy .control{top:auto; bottom:3rem; padding-top: 1rem; width: 6rem; height: 6rem;}
	#philosophy .control .phil-pagin .bar{width: 1rem; margin:0 0.25rem;}

	#philosophy .pointer{top:auto; bottom:3rem;}
	#philosophy .pointer .pointer_box{padding-top: 1rem; width: 6rem; height: 6rem;}
	#philosophy .pointer .phil-pagin .bar{width: 1rem; margin:0 0.25rem;}
}
@media (max-width:390px){ 
	#philosophy .text{padding:3rem 1rem;}
	#philosophy .text .box{padding-right:4rem;}
	#philosophy .big_tit{padding-left:1rem; font-size: 4.6rem; margin-top:2rem;}
}


/********************************************************
■ #lnb
********************************************************/
#lnb{padding:7rem 0; }
.lnb_box{margin-top:9rem; display:flex; gap:2.5rem; }
.lnb_box .item{position:relative; flex:1; overflow:hidden; transition: .5s;  aspect-ratio: 715 / 536;}
.lnb_box .item:nth-child(1){transform:translate(50%, 20%) rotate(-3deg)}
.lnb_box .item:nth-child(2){transform:translate(-50%, 20%) rotate(3deg)}
.lnb_box .item .imgWrap{ position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 100%; transition: .5s ease;}
.lnb_box .item .imgWrap:nth-child(1){ z-index:10;   clip-path: inset(0 0 0 0);}
.lnb_box .item .imgWrap img{position: relative; width: 100%; height: 100%; object-fit: cover;}
.lnb_box .item .imgWrap .text{position: absolute; bottom: 0;  left: 0; z-index: 2; width:100%;}
.lnb_box .item .imgWrap .text .text_box{display:flex;     justify-content: space-between;  height: fit-content; }
.lnb_box .item .imgWrap .text .text_box h4{font-size:var(--font22); color:#000;}
.lnb_box .item .imgWrap .text .text_box p{opacity:0.6; margin-top:0.3rem; }
.lnb_box .item .imgWrap .text .text_box .btns{display:flex; gap:1rem;}
.lnb_box .item .imgWrap .text .text_box .btns a{ width:6.5rem; height:3rem; line-height:2.9rem; color:#353535; border:1px solid #ccc; background:#f5f5f5; text-align:center;font-family: "Exo 2", 'Pretendard GOV', serif; font-weight:600; }
.lnb_box .item .imgWrap .text .text_box .btns a:hover{background:#eaeaea;}
.lnb_box .item .imgWrap .text .text_box .btns a.on{background:#0091ff; color:#fff;}
.lnb_box .item .imgWrap .text .text_box .btns a.on:hover{background:#0185e9;}
.lnb_box .item.active .imgWrap:nth-child(1){    height: 100%; clip-path: inset(0 0 17% 0); aspect-ratio: 715 / 446;}
.lnb_box.active .item:nth-child(1){transform:translate(0%, 0%)}
.lnb_box.active .item:nth-child(2){transform:translate(0%, 0%) }

@media (max-width:1024px){
	.lnb_box{margin-top:7rem;gap:1rem; }
	.lnb_box .item{overflow: visible; }
	.lnb_box .item.active .imgWrap:nth-child(1){ height: 100%; clip-path: inset(0 0 0 0); aspect-ratio: auto;}
	.lnb_box .item .imgWrap{position: relative; height:auto; bottom:auto; left:auto;}
	.lnb_box .item .imgWrap:nth-child(1){height: 100%; clip-path: inset(0 0 0 0); aspect-ratio: auto;}
	.lnb_box .item .imgWrap .text{position: relative; bottom:auto; left:auto; margin-top:1rem;}
	.lnb_box .item .imgWrap .text .text_box{ flex-direction: column;  gap:24px;}
	.lnb_box .item .imgWrap .text .text_box .btns{justify-content: flex-end; gap:0.5rem;}
	.lnb_box .item .imgWrap .text .text_box .btns a{height:2.5rem; line-height: 2.4rem;} 
}
@media (max-width:768px){
	.lnb_box{flex-direction: column;gap: 60px;}
	.lnb_box .item{aspect-ratio: auto;}
	.lnb_box .item:nth-child(1),
	.lnb_box .item:nth-child(2){transform:translate(0%, 20%) ;opacity: 0; transform: translateY(50px);}
}


/********************************************************
■ #identity
********************************************************/
#identity {/*background:#091925;*/ background:#091925; padding:7rem 0; }
#identity .title,
#identity .title h3{color:#fff;}

#identity .swiper-container{overflow: visible; margin-top:4rem;}
#identity .swiper-wrapper {transition-timing-function: linear;}
#identity .img{aspect-ratio: 1 / 1; position: relative; width:100%; height:100%; overflow:hidden;}
#identity .img img{position: relative; width: 100%; height: 100%; object-fit: cover; transition: .5s ease;}
#identity .img:hover img{transform: scale(1.1);}
#identity .txt{margin-top:1rem; text-align:center; font-size:var(--font22); font-weight:600; color:#fff;}
#identity .txt span{display:block; opacity:0.4; font-size:var(--font17); font-weight:400; margin-bottom:0.5rem;}

.ident_slide{ opacity: 0; transform: translateY(100px);}