/* 팝업레이어 */
#hd_pop{z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2{position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops{position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img{max-width:100%}
.hd_pops_con{}
.hd_pops_footer{padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after{display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button{padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject{background:#000;text-align:left}
.hd_pops_footer .hd_pops_close{background:#393939;position:absolute;top:0;right:0}

a{text-decoration:none;}

html,body{overflow-x:hidden;}
/* 메인화면 */
#container{position:relative}
@media (min-width:1900px){
	#container{}
}

.section h2{font-size:1.5rem;color:var(--bs-black);line-height:1}
.section h2 b{font-weight:700}
.section h2:after{content:"";display:inline-block;width:0.5rem;height:0.5rem;margin-bottom:0.125rem;margin-left:0.5rem;border-radius:50%;background-color:#0c8dc2;vertical-align:bottom}
@media (min-width:360px){
	.section h2{font-size:1.75rem;}
}
@media (min-width:768px){
	.section h2{font-size:2rem;}
}
@media (min-width:1500px){
	.section h2{font-size:2.5rem;font-weight:500}
	.section h2 b{font-weight:800}
}
@media (min-width:1900px){
	.section h2{font-size:2.75rem;font-weight:500}
	.section h2 b{font-weight:800}
}

.animated{
  animation-fill-mode:both;
}

.side-btn{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;z-index:9999;width:50px;height:100vh;background-color:rgba(0,0,0,.8);text-decoration:none;transition:.3s;cursor:pointer;}
.side-btn a{display:block;position:relative;width:100%;height:100%;}
.side-btn a:hover{background-color:rgba(161,193,45,.8);}
.side-btn .txt{display:flex;align-items:center;gap:0.5rem;position:absolute;bottom:6%;left:0;right:0;font-size:1.125rem;font-weight:200;color:var(--bs-white);letter-spacing:0.3rem;transform:translateY(0) rotate(-90deg)}
.side-btn a:hover .txt{color:var(--bs-black);transform:translateY(-35vh) rotate(-90deg)}
.side-btn span{font-weight:700;}
html.section2-open .open-btn{display:none;}
@media (min-width:768px){
	.side-btn{width:70px}
}
@media (min-width:1500px){
	.side-btn{width:90px}
}

/* 비쥬얼이미지 */
#section1{position:relative;overflow:hidden;width:100%;height:clamp(600px, 100vh, 600px);min-height:100vh;background:#000;}
#section1 .visual-slide,#section1 .swiper-wrapper,#section1 .swiper-slide{width:100%;height:100%;}
#section1 .visual-text{display:block;position:absolute;top:10rem;z-index:5;padding:0 20% 0 1rem;}
#section1 .visual-text p{font-size:2rem;font-weight:500;color:var(--bs-white);text-shadow:0 0 5px rgba(0,0,0,.5);letter-spacing:-0.05rem;line-height:1.3}
#section1 .visual-con{display:flex;justify-content:flex-end;align-items:flex-end;position:absolute;top:0;left:0;z-index:4;width:100%;height:100%;padding-top:50px;padding-right:50px;background-position:center;background-size:cover;background-repeat:no-repeat;transition:background-image .3s ease, background-size .3s ease;}
#section1 .visual-con ul{position:relative;z-index:5;width:100%;height:200px;border-top:1px solid rgba(255, 255, 255, 0.2);}
#section1 .visual-con li{float:left;position:relative;width:calc(100% / 2);height:100px;border:1px solid rgba(255, 255, 255, 0.2);border-width:0 0 1px 1px}
#section1 .visual-con a{display:flex;flex-direction:column;gap:0.5rem;overflow:hidden;width:100%;height:100%;padding:1rem;text-decoration:none;}
#section1 .visual-con .stit{font-size:0.85rem;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:0.02rem;;line-height:1.2}
#section1 .visual-con .tit{font-size:1.125rem;font-weight:500;color:var(--bs-white);line-height:1.2}
#section1 .visual-con .bg{position:absolute;top:-1px;left:-1px;z-index:-1;width:calc(100% + 2px);height:calc(100% + 2px);background-color:rgba(0,0,0,0);}
#section1 .visual-con li:hover .bg{background-color:rgba(0,0,0,.3);backdrop-filter:blur(5px);}
#section1 .visual-con li:hover .stit{color:var(--bs-white);}
#section1 .visual-con .visual-con3{width:100%}
#section1 .visual-con3 .stit{color:var(--bs-white);}
#section1 .visual-con3 .bg{background-color:rgba(161,193,45,.8);backdrop-filter:blur(5px);}
#section1 .visual-con li.visual-con3:hover .bg{background-color:rgba(161,193,45,1);}
#section1 .visual-img{position:absolute;inset:0;opacity:0;transform:scale(1.2);transition:transform 5s ease, opacity 1s ease;background-size:cover;background-position:center;z-index:1;}
#section1 .swiper-slide-active .visual-img{opacity:1;transform:scale(1);}
#section1 .swiper-slide1 .visual-img{background-image:url(../img/main/visual1_1.png)}
#section1 .swiper-slide2 .visual-img{background-image:url(../img/main/visual1_2.png)}
#section1 .swiper-slide3 .visual-img{background-image:url(../img/main/visual1_3.png)}
#section1 .visual-img:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:#000;animation:vbg 5s forwards;opacity:0;transition:opacity 1.5s ease;}
#section1 .swiper-slide-active .visual-img:before{opacity:0.45;}
#section1 .swiper-btn{opacity:0.7;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1rem;position:relative;margin:-1rem 0 1rem}
#section1 .swiper-pagination{position:relative;top:0;width:auto;padding-right:2rem;font-size:0.75rem;font-weight:300;color:var(--bs-white);letter-spacing:0.5rem}
#section1 .swiper-button-next,#section1 .swiper-button-prev{top:revert;left:revert;right:revert;width:26px;height:20px;}
#section1 .swiper-btn-pause{position:absolute;;width:26px;height:20px}
#section1 .swiper-button-next,
#section1 .swiper-button-prev,
#section1 .swiper-btn-pause,
#section1 .swiper-pagination{display:flex;align-items:center;position:revert;margin-top:0}
#section1 .swiper-button-next svg,#section1 .swiper-button-prev svg,#section1 .swiper-btn-pause svg{width:100%;height:100%;fill:#ffffff;}
#section1 .swiper-button-prev:after,#section1 .swiper-button-next:after,#section1 .swiper-btn-pause:after{display:none}
@keyframes vbg{
	0%{opacity:0;}
	10%{opacity:0.05;}
	100%{opacity:0.05;}
}
@media (min-width:360px){
	#section1 .visual-con .stit br,#section1 .visual-con .tit br{display:none}
}
@media (min-width:768px){
	#section1{	height:clamp(600px, 100vh, 600px);}
	#section1 .visual-text{top:calc((100% - 70px) / 3 * 2 + 70px);padding:0 calc(30% + 70px) 0 5%;}
	#section1 .visual-text p{font-size:3rem;}
	#section1 .visual-con{padding-top:70px;padding-right:70px}
	#section1 .visual-con ul{width:clamp(250px, 20vw, 300px);height:100%;border-top:0;}
	#section1 .visual-con li{float:none;width:100%;height:calc(100% / 2);}
	#section1 .visual-con a{justify-content:flex-end;gap:1rem;padding:2rem;}
	#section1 .visual-con .stit{font-size:1rem}
	#section1 .visual-con .tit{font-size:1.25rem}
	#section1 .swiper-btn{margin:-3rem 0 3rem}
	#section1 .swiper-pagination{top:-0.75rem;font-size:1.125rem}
	#section1 .swiper-button-next,#section1 .swiper-button-prev{top:0.25rem;width:40px;height:30px;}
	#section1 .swiper-btn-pause{width:40px;height:30px}
}
@media (min-width:1025px){
	#section1{	height:clamp(600px, 100vh, 700px);}
}
@media (min-width:1280px){
	#section1 .visual-text p br:nth-child(2){display:none}
}
@media (min-width:1500px){
	#section1{	height:clamp(800px, 100vh, 1000px);}
	#section1 .visual-text{top:calc((100% - 90px) / 3 * 2  + 90px);padding:0 10%;}
	#section1 .visual-text p{font-size:4rem;}
	#section1 .visual-con{padding-top:90px;padding-right:90px}
	#section1 .visual-con ul{width:400px}
	#section1 .visual-con a{padding:3rem;}
}

#section2{position:absolute;top:0;left:100%;overflow:hidden;width:100%;height:100vh;min-height:600px;z-index:1000;overflow-y:hidden;background-image:url(../img/main/visual2.png);background-size:cover;background-position:center;transition:left .6s ease;}
html.section2-open #section2{left:0;}
html:not(.section2-open) #section2 .side-btn{right:-100%}

#section2 .side-btn{right:0}
#section2{height:clamp(800px, 100vh, 1000px);min-height:100vh}
#section2 .inner{padding-right:0;padding-left:0}
#section2 .service-con{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;position:absolute;top:50px;width:100%;height:calc(100vh - 50px);padding-right:50px;}
#section2 .service-con ul{display:flex;flex-wrap:wrap;width:100%;height:100%;}
#section2 .service-con li{position:relative;border-right:1px solid rgba(255, 255, 255, 0.2);}
#section2 .service-con li a{display:flex;flex-direction:column;justify-content:flex-end;gap:0.5rem;width:100%;height:100%;padding:1rem;text-decoration:none;}
#section2 .service-con .stit{font-size:0.85rem;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:0.02rem;;line-height:1.2}
#section2 .service-con .tit{font-size:1.125rem;font-weight:600;color:var(--bs-white);line-height:1.2}
#section2 .service-con .bg{position:absolute;top:-1px;left:-1px;z-index:-1;width:calc(100% + 2px);height:calc(100% + 2px);background-color:rgba(0,0,0,0);}
#section2 .service-text{display:flex;height:calc(100% / 3);min-height:150px}
#section2 .service-text p{display:flex;justify-content:center;align-items:flex-end;width:100%;height:100%;padding:3rem 0;border:1px solid rgba(255, 255, 255, 0.2);border-width:0 1px;font-size:2rem;font-weight:500;color:var(--bs-white);text-shadow:0 0 5px rgba(0,0,0,.5);letter-spacing:-0.05rem;line-height:1.2;text-align:center}
#section2 .service-con1{width:100%;height:calc(100% / 3);min-height:200px;border-top:1px solid rgba(255, 255, 255, 0.2);}
#section2 .service-con1 li{width:calc(100% / 2);}
#section2 .service-con1 li:nth-child(n+3){border-top:1px solid rgba(255, 255, 255, 0.2)}
#section2 .service-con1 li:nth-child(2n+1) a{justify-content:flex-start}
#section2 .service-con1 li .img{position:absolute;right:1rem;width:2rem;height:2rem}
#section2 .service-con1 li:nth-child(2n) .img{top:1rem;}
#section2 .service-con1 li:nth-child(2n+1) .img{bottom:1rem;}
#section2 .service-con1 li .bg{background-color:rgba(100,100,100,.3);backdrop-filter:blur(5px);}
#section2 .service-con1 li:hover .bg{background-color:rgba(0,0,0,.8);}
#section2 .service-con1 li:hover .stit{color:var(--bs-white);}
#section2 .service-con2{width:100%;height:calc(100% / 3);min-height:200px;border-top:1px solid rgba(255, 255, 255, 0.2);}
#section2 .service-con2 .stit{color:var(--bs-white);}
#section2 .service-con2 li{width:calc(100% / 2);}
#section2 .service-con2 li.service-con2-1{width:100%;}
#section2 .service-con2 li.service-con2-1 .bg{background-color:rgba(161,193,45,.8);}
#section2 .service-con2 li.service-con2-2 .bg{background-color:rgba(17,85,168,.8);}
#section2 .service-con2 li.service-con2-3 .bg{background-color:rgba(0,0,0,.8);}
#section2 .service-con2 li.service-con2-1:hover .bg{background-color:rgba(161,193,45,1);}
#section2 .service-con2 li.service-con2-2:hover .bg{background-color:rgba(17,85,168,1);}
#section2 .service-con2 li.service-con2-3:hover .bg{background-color:rgba(0,0,0,1);}
@media (min-width:360px){
	#section2 .service-con .stit br{display:none}
	#section2 .service-con1 li .img{width:3rem;height:3rem}
}
@media (min-width:768px){
	#section2{height:clamp(600px, 100vh, 600px);}
	#section2 .service-con{top:70px;height:calc(100vh - 70px);padding-right:70px;}
	#section2 .service-text p{font-size:2.5rem;}
	#section2 .service-con li a{gap:1rem;padding:2rem;}
	#section2 .service-con .stit{font-size:1rem}
	#section2 .service-con .tit{font-size:1.25rem}
	#section2 .service-con1 li{width:calc(100% / 4);}
	#section2 .service-con1 li .img{right:2rem;width:4rem;height:4rem}
	#section2 .service-con1 li:nth-child(2n) .img{top:2rem;}
	#section2 .service-con1 li:nth-child(2n+1) .img{bottom:2rem;}

	#section2 .service-con2 li{width:calc(100% / 4);}
	#section2 .service-con2 li.service-con2-1{width:calc(100% / 4 * 2);}
}
@media (min-width:1025px){
	#section2{	height:clamp(600px, 100vh, 700px);}
}
@media (min-width:1500px){
	#section2{	height:clamp(800px, 100vh, 1000px);}
	#section2 .inner{padding-right:clamp(40px, 5vw, 80px);padding-left:clamp(40px, 5vw, 80px);}
	#section2 .service-con{top:90px;height:calc(100vh - 90px);padding-right:90px;}
	#section2 .service-text p{justify-content:flex-start;font-size:3rem;text-align:left;}
	#section2 .service-con li a{padding:3rem;}
	#section2 .service-con li:nth-child(1){border-left:1px solid rgba(255, 255, 255, 0.2);}
	#section2 .service-con .tit{font-size:1.5rem}
	#section2 .service-con1 li .img{right:3rem;}
	#section2 .service-con1 li:nth-child(2n) .img{top:3rem;}
	#section2 .service-con1 li:nth-child(2n+1) .img{bottom:3rem;}
}