:root {
    --visual-text-box-top: calc( var(--header-height) + clamp(16px, 17.5dvh, 188px) );
}

#hd_wrapper.hd-hover .hd-group {color: var(--white); background: transparent;}
#hd_wrapper.hd-hover #logo .text,
#hd_wrapper.hd-hover .gnb-menu-btn rect {fill: #FFF;}
#hd_wrapper.hd-hover .language-box .btn-language {color: var(--white);}
#hd_wrapper.hd-hover .svg-arr path,
#hd_wrapper.hd-hover .svg-language path {stroke: #FFF;}
#hd_wrapper.hd-hover .gnb-menu-btn-area::before {background: var(--white);}

#hd.black #hd_wrapper.hd-hover .hd-group {background: rgba(0, 0, 0, 0.55);}

.se01 {position: relative;}
.se01 .video-box {position: relative; width: 100%; height: 100dvh; overflow: hidden;}
.se01 .video-box::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55) 100%;}
.se01 .video-box video {width: 100%; height: 100%; object-fit: cover;}
.se01 .text-box {position: absolute; top: var(--visual-text-box-top); left: clamp(20px, calc( 200 / var(--inner) * 100vw ), 200px); color: var(--white); z-index: 1;}
.se01 .text-box h2 {font-family: 'Outfit'; text-shadow: 0 0 8px rgba(0, 0, 0, 0.08); font-size: clamp(36px, calc( 68 / var(--inner) * 100vw ), 68px); font-weight: 710; line-height: 140%; letter-spacing: 0;}
.se01 .text-box > p {text-shadow: 0 0 8px rgba(0, 0, 0, 0.08); font-size: clamp(17px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 450; line-height: 150%; letter-spacing: var(--ls); margin-top: clamp(24px, calc( 45 / var(--inner) * 100vw ), 45px); overflow: hidden;}
.se01 .text-box > p span {display: inline-block; transform: translateX(-100%);}
.se01 .swiper-slide-active .text-box > p span {animation: fade-right 0.5s cubic-bezier(.175,.885,.32,1.275) forwards 1s;}
.se01 .text-box h2 p {overflow: hidden;}
.se01 .text-box h2 span {display: inline-block; transform: translateY(100%);}

.se01 .swiper-slide-active .text-box h2 span {animation: fade-up 0.5s cubic-bezier(.175,.885,.32,1.275) forwards;}
.se01 .swiper-slide-active .text-box h2 p:nth-child(2) span {animation-delay: 0.5s;}
@keyframes fade-up {
    0% {transform: translateY(100%);}
    80% {transform: translateY(-10%);}
    100% {transform: translateY(0%);}
}
@keyframes fade-right {
    0% {transform: translateX(-100%);}
    80% {transform: translateX(10%);}
    100% {transform: translateX(0%);}
}

.se01 .swiper-pagination {top: 649px; left: clamp(20px, calc( 200 / var(--inner) * 100vw ), 200px); bottom: auto; z-index: 2; width: auto; display: flex; gap: 10px;}
.se01 .swiper-pagination .swiper-pagination-bullet {position: relative; margin: 0 !important; display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; background: none; font-family: 'Outfit'; font-size: 20px; font-weight: 500; line-height: 100%; letter-spacing: 0; color: var(--white); opacity: 1 !important;}
.se01 .swiper-pagination .swiper-pagination-bullet svg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: rotate(-90deg);}
.se01 .swiper-pagination-bullet .gauge-circle {stroke-dashoffset: 282.74; transition: none;}
.se01 .swiper-pagination-bullet-active .gauge-circle {transition: stroke-dashoffset 5s linear; stroke-dashoffset: 0;}

.se01 .scroll-d-box {position: absolute; bottom: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px); left: 50%; transform: translateX(-50%); z-index: 2; width: 40px; height: 60px; border-radius: 1000px; border: 2px solid #FFF;}
.se01 .scroll-d-box i {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: block; width: 3px; height: 12px; border-radius: 50px; background: #fff; animation: scroll-d 1.3s ease-in-out infinite;}

@keyframes scroll-d {
    0% {top: 10px; opacity: 1;}
    46.15% {top: 39px; opacity: 0;}
    92.3% {top: 10px; opacity: 0;}
    100% {top: 10px; opacity: 0;}
}

.se02,.se03,.se04,.se05 {position: relative; min-height: 100dvh; display: flex; justify-content: center; align-items: center; color: var(--white); text-align: center; overflow: hidden;}
.se02 .bg {background: url(../img/main/se02-bg.jpg)no-repeat center; background-size: cover;}
.se03 .bg {background: url(../img/main/se03-bg.png)no-repeat center; background-size: cover;}
.se05 .bg {background: url(../img/main/se05-bg.jpg)no-repeat center; background-size: cover;}
.se02 .bg::after,.se03 .bg::after,.se05 .bg::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.55) ;}


section:not(.se04) .bg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.3); width: 102%; height: 102%; z-index: -1; transition: 2s; object-fit: cover;}
section:not(.se04).eff .bg {transform: translate(-50%, -50%) scale(1);}

.se04 {color: var(--gray900);}



.main-common-text > span {color: var(--green400); font-size: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 780; line-height: 130%; letter-spacing: var(--ls);}
.main-common-text > h3 {margin: 40px 0 30px; font-family: inherit; font-size: clamp(32px, calc( 52 / var(--inner) * 100vw ), 52px); font-weight: 800; line-height: 130%; letter-spacing: var(--ls);}
.main-common-text > p {font-size: clamp(17px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: 450; line-height: 150%; letter-spacing: var(--ls); margin-bottom: clamp(40px, calc( 120 / var(--inner) * 100vw ), 120px);}
.main-common-text > a {margin: 0 auto; padding: 24px 36px; border-radius: 999px; border: 1.333px solid #FFF; display: flex; justify-content: center; align-items: center; gap: 8px; width: fit-content; font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: -0.03em;}
.main-common-text > a i {position: relative; width: 18px; height: 18px; transition: all 0.3s ease-in-out; overflow: hidden;}
.main-common-text > a:hover i {width: 46px;}
.main-common-text > a i svg {width: auto; max-width: unset; height: 100%; aspect-ratio: 46/18; position: absolute; top: 0; bottom: 0; right: 0;}
.main-common-text > a i svg path {transition: all 0.3s ease-in-out;}
.main-common-text > a i svg .path-line {d: path("M43.5 9L30 9");}
.main-common-text > a:hover i svg .path-line {d: path("M43.5 9L2.25 9");}



.se03 .serv-list {display: flex; justify-content: center; align-items: center; gap: clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px);}
.se03 .serv-list li {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: clamp(180px, calc( 200 / var(--inner) * 100vw ), 200px); height: auto; aspect-ratio: 1/1; border: 1.667px solid #ffffff; border-radius: 50%; gap: 5px; font-size: clamp(18px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 700; line-height: 150%; letter-spacing: var(--ls); transition: all 0.3s ease-in-out;}
.se03 .serv-list li svg {width: 100px; height: auto; aspect-ratio: 1/1;}
.se03 .serv-list li:hover {transform: scale(1.1);}



.se04 {background: #F0F6FF; align-items: start; padding-top: 100px;}
.se04 .main-common-text > p {margin-bottom: clamp(40px, calc(80 / var(--inner) * 100vw ),80px);}
.se04 .main-common-text > a {border-color: var(--gray900); background: #ffffff;}


.se04 .bg {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1500px; height: auto;}
.se04 .bg svg {width: 100%; height: fit-content;}
.se04 .main-common-text {position: relative; z-index: 2; pointer-events: none;}
.se04 .main-common-text a {pointer-events: auto;}
.se04 .eff path {transition: 0.3s;}
.se04 .eff:hover path:not(.path-continent) {fill:#BED8FF}


/* 영문 */
html:lang(en) .se01 .text-box > p {display: none;}
/* //영문 */





@media (max-width:1500px){
    .se04 .bg {width: 100%;}
}
@media (max-width:1024px){
    .main-common-text > a {padding: 15px 25px;}
    .main-common-text > h3 {margin: 20px 10px;}
    .se03 .serv-list {gap: 20px; flex-wrap: wrap; row-gap: 0;}
    .se03 .serv-list li {font-size: 16px; gap: 0;}
    .se03 .serv-list li svg {width: 80px; height: 80px;}
}
@media (max-width:768px){
    .se03 .serv-list li {width: 150px; height: 150px;}
    .se04 .bg {bottom: 15%;}
}
@media (max-width:600px){
    .se01 .swiper-pagination {top: 550px;}
}
@media (max-width:480px){
    .se01 .text-box, .se01 .swiper-pagination {left: 20px;}
    .se01 .swiper-pagination {top: 450px;}
    .se01 .swiper-pagination .swiper-pagination-bullet {width: 36px; height: 36px; font-size: 15px;}
    .se01 .scroll-d-box {transform: translateX(-50%) scale(0.75);}
    .se03 .serv-list li {width: 120px; height: 120px;}
    .se03 .serv-list li svg {width: 50px; height: 50px;}
}

@media (max-height:800px){
    .se01 .swiper-pagination {top: 500px;}
    .se04 {padding-top: 40px;}
    .se04 .bg {bottom: 2%;}
    .main-common-text > h3 {margin: 20px 10px;}
    .main-common-text > p {margin-bottom: 11dvh;}
}
@media (max-height:650px){
    .se01 .swiper-pagination {top: 350px;}
    .se03 .serv-list {gap: 10px;}
    .se03 .serv-list li:last-child {margin-top: -20px;}
}
@media (max-width:400px) and (max-height:650px){
    .se01 .swiper-pagination {top: 450px;}
}
@media (max-width:400px) and (max-height:550px){
    .se01 .swiper-pagination {top: 400px;}
}