@media(max-width:768px) {
    .font-24,
    .font-20 {font-size: 1.75rem;}
    .font-48,
    .font-40 {font-size: 3.125rem;}
    .font-30 {font-size: 2.5rem;}
}

@media(max-width:500px) {
    .font-24,
    .font-20 {font-size: 1.5rem;}
    .font-48,
    .font-40 {font-size: 3rem;}
    .font-30 {font-size: 2.25rem;}
}

.moreBtn {background: var(--subcolor); padding: .5rem 2rem; color: #fff; border-radius: 100px; display: inline-block;}
.moreBtn span {padding-left: .5rem; display: inline-block; transition: 0.3s;}
.moreBtn:hover span {animation: link .9s linear infinite;}

@keyframes link {
    0% {transform: translateX(0);}
    50% {transform: translateX(.25rem);}
    100% {transform: translateX(0);}
}

#mainBg {position: relative; color: #fff; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url("/img/main/mainBg.jpg");}
#mainBg .scroll {text-align: center; font-weight: 600;}
#mainBg .scroll > div {width: 26px; height: 42px; border: 2px solid #fff; border-radius: 100px; margin: auto; position: relative;}
#mainBg .scroll > div:after {position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 2px; height: 10px; background: #fff; content: "";}
#mainBg .scroll p {animation: arrowDown 1.6s ease-in-out infinite; margin-top: 1px; font-size: 20px;}

@keyframes arrowDown {
    0% { opacity: 0; transform: translateY(-5px); }
    40% { opacity: 1; transform: translateY(0); }
    80% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 0; transform: translateY(5px); }
}

@media(max-width:1024px) {
    #mainBg .scroll {transform: scale(0.8);}
}

@media(max-width:990px) {
    #banner {padding: 160px 0 100px;}
}

@media(max-width:768px) {
    #mainBg {background-image: url("/img/main/mainBg_m.jpg");}
    #banner {padding: 120px 0 80px;}
    #viewPoint {padding-top: 40%;}
}

@media(max-width:500px) {
    #mainBg {background-position: center 40%;}
}

@media(max-width:420px) {
    #mainBg {background-position: center top;}
    #mainBg .scroll {transform: scale(0.6) translateY(-50%);}
}

@media(max-width:380px) {
    #mainBg {background-position: center top;}
    #mainBg .scroll {transform: scale(0.6) translateY(-150%);}
    #viewPoint {padding-top: 20%;}
}

#mainBg2 {position: relative; color: #fff; border-radius: 5rem 5rem 0 0; margin-top: -6.25rem; background-color: #171717; overflow: hidden;}
#mainBg2 section {position: relative; z-index: 1;}
#mainBg2 .bg {position: absolute; left: 0; top: 0; width: 100%; opacity: .6;}
#mainBg2 .bg:after {position: absolute; left: 0; bottom: 0; height: 60%; width: 100%; background: linear-gradient(to bottom, transparent 50%, #171717 100%); content: "";}
#mainBg2 .bg img {width: 100%;}

@media(max-width:768px) {
    #mainBg2 .bg {width: 150%; left: -20%;}
}

@media(max-width:500px) {
    #mainBg2 .bg {width: 250%; left: -90%;}
}


#bridge h2 {position: relative; color: rgba(255,255,255,0.15); width: max-content; background: linear-gradient(to right, #fff, #fff) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0% 100%; transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s; display: inline; transition: .2s;}

#step .cont_box {margin-top: 3rem;}
#step .cont {display: flex; align-items: center; padding: 2.5rem 0; border-bottom: 1px solid rgba(0, 120, 255, 0.5); overflow: hidden; max-height: 12rem; height: 100%; transition: .5s ease;}
#step .cont .txt {padding-left: 8rem; position: relative; will-change: transform;  transform: translateY(2.5rem); transition: .5s ease;}
#step .cont .txt:after {position: absolute; left: 0; top: -1.25rem; content:""; font-size: 3.75rem; font-weight: 700; color: var(--pointcolor); opacity: .75;}
#step .cont:nth-child(1) .txt:after {content: "01";}
#step .cont:nth-child(2) .txt:after {content: "02";}
#step .cont:nth-child(3) .txt:after {content: "03";}

#step .cont .txt p {opacity: 0; transition: .5s ease;}
#step .cont .img {will-change: transform; transform: translateY(4rem); transition: .5s ease; filter: grayscale(1);}

#step .cont.active {max-height: 100%;}
#step .cont.active .txt {transform: translateY(0);}
#step .cont.active .txt p {opacity: 1;}
#step .cont.active .img {transform: translateY(0); filter: none;}

#step .cont:not(.active) {transition: none;}

@media(max-width:768px) {
    #step .cont {flex-direction: column; gap: 3rem; padding-bottom: 0; padding-top: 3rem; max-height: 20rem;}
    #step .cont .txt,
    #step .cont .img {width: 100% !important; }
    #step .cont .txt {padding-left: 7rem; top: 0; max-height: 4rem; height: 100%;}
    #step .cont .img {transform: translateY(2rem);}
    #step .cont .txt:after {top: -1rem;}
    
    #step .cont.active .txt {max-height: 100%;}
    #step .cont:not(.active) .txt {transition: none;}
    /* #step .cont .txt p {transform: translateY(-4rem);} */
}

@media(max-width:500px) {
    #step .cont .txt:after {font-size: 3.5rem;}
    #step .cont .txt {padding-left: 6rem;}
}

#service {--layoutwidth : 1730px; background: #171717; color: #fff;}
#service .container {height: auto; aspect-ratio: 1 / 2.5; box-sizing: border-box; position: relative;}

#service .titBox {background: rgba(0,0,0,0.65); width: 29.5rem; border-radius: .75rem; padding: 3.75rem 3rem; z-index: 2; position: sticky;  left: 10%; top: 50%; transform: translateY(-50%); opacity: 0;}
#service .serviceSwiper {width: 100%; position: sticky; top: 50%; transform: translateY(-50%);}

#service ul {display: flex; align-items: center; justify-content: flex-end; gap: .625rem; flex-wrap: wrap;}
#service li {width: fit-content; background: rgba(0, 120, 255, 0.5); border-radius: 4px; padding: .25rem 1.5rem;}
#service li span {padding-right: .5rem; display: inline-block;}

#service .swiper-slide {background-repeat: no-repeat; background-position: center top; background-size: cover; overflow: hidden; opacity: .3;  width: 52.5rem; height: 35rem; }
#service .swiper-slide-active {border-radius: 1.25rem; opacity: 1;}
#service .swiper-slide.slide01 {background-image: url("/img/main/service01.jpg");}
#service .swiper-slide.slide02 {background-image: url("/img/main/service02.jpg");}
#service .swiper-slide.slide03 {background-image: url("/img/main/service03.jpg");}
#service .swiper-slide.slide04 {background-image: url("/img/main/service04.jpg");}

#service .swiper-slide .txtbox {display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; height: 100%; padding: 2.5rem 3.5rem; opacity: 0; transition: 0.5s;}
#service .swiper-slide-active .txtbox {opacity: 1;}

#service .swiper-slide.slide02 ul li:last-child {margin-left: 10%;}
#service .swiper-slide.slide03 ul li:last-child {margin-left: 10%;}

@media(max-width:1240px) {
    #service .titBox {left: 0;}
}

@media(max-width:768px) {
    #service {padding-bottom: 80px !important;}
    #service .container {aspect-ratio: initial; width: 100%;}
    #service .titBox {top: 10%; left: 50%; transform: translateX(-50%); position: relative; width: 80%; opacity: 1;}
    #service .serviceSwiper {position: relative; transform: translateY(-7rem);}

    #service .swiper-slide {background: transparent !important; width: 100%; height: auto; opacity: 1;}
    #service .swiper-slide-active {border-radius: 0;}
    #service .swiper-slide .txtbox {height: auto; text-align: left; align-items: flex-start; padding: 0; margin-top: 3.125rem;}
    #service .swiper-slide-active .imgbox {border-radius: 1.25rem; overflow: hidden;}

    #service ul {justify-content: flex-start; align-items: flex-start;}
    #service ul li:nth-child(2) {margin-right: 10%;}
    #service .swiper-slide.slide02 ul li:last-child {margin-left: 0%;}
    #service .swiper-slide.slide03 ul li:last-child {margin-left: 0%;}
}

@media(max-width:500px) {
    #service ul li:nth-child(2) {margin-right: 0;}
}

@media(max-width:375px) {
    #service .container {width: 90%;}
    #service .titBox {width: 90%;}
}

#point {text-align: center; color: #fff;}
#point .bg-wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#point .bg-wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center top; background-size: cover; transform: translateZ(0); will-change: transform; background-image: url("/img/main/pointBg.jpg");}
#point .container {position: relative; z-index: 1;}

@media(max-width:768px) {
    #point .bg-wrap .bg {background-image: url("/img/main/pointBg_m.jpg");}
}

.main #location {background-repeat: no-repeat; background-position: center top; background-size: cover; background-image: url("/img/main/locationBg.jpg");}

#location {border-radius: 0 0 5rem 5rem; color: #fff; position: relative; background: #fff;}
#location:after {position: absolute; left: 0; bottom: -1px; width: 100%; height: 201px;background-color: #062140; z-index: -1; content: "";}
#location .tit {display: flex; align-items: center; justify-content: space-between;}

.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont {display: none;}

#location .mapCont {width: 100%; border-radius: 1.25rem; position: relative; z-index: 1;}
#location .mapCont .wrap_map {height: 31.25rem;}

#location .flexList {max-width: 77.5rem; width: 90%; margin: -6.75rem auto 0; position: relative; z-index: 2;}
#location .box {background: linear-gradient(to bottom, rgba(4, 25, 49,.9) 50%, rgba(4, 25, 49, 1) 50%); padding: 3rem; border-radius: .75rem;}
#location .box h3 {display: flex; align-items: center; gap: 1rem;}
#location .box h3 img {width: 1.5625rem;}

@media(max-width:768px) {
    #location .tit {flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2rem;}
    #location .flexList {width: 95%; margin: -7.75rem auto 0;}
    #location .box:nth-child(2) {background: rgba(4, 25, 49, 1);}
    #location .box h3 {gap: 1.25rem;}
    #location .box h3 img {width: 2rem;}
}


#serv {overflow: hidden; max-width: 1920px; width: 100%; margin: auto;}
#serv .wrap {margin-left: 5%; width: 100%; overflow: hidden;}
#serv .servSwiper {width: 90%;}
#serv .swiper-slide {display: flex; align-items: center; gap: 5%;}
#serv .swiper-slide .imgbox {overflow: hidden; border-radius: 30rem; opacity: .3; transition: .5s;}
#serv .swiper-slide-active .imgbox {border-radius: 1.25rem; opacity: 1;}
#serv .swiper-slide .line {width: 90%; height: 1px; background: var(--subcolor);}
#serv .swiper-slide li span {color: var(--subcolor); padding-right: .5rem; font-weight: 700;}


#serv .nav {display: flex; align-items: center; width: fit-content; gap: 1rem; margin-top: 5rem;}
#serv .nav.mo {display: none;}
#serv .nav .swiper-button-next, 
#serv .nav .swiper-button-prev {position: initial; width: fit-content; height: fit-content; margin-top: 0; font-size: 1.5rem; color: #111111;}
#serv .nav .swiper-button-next:after, 
#serv .nav .swiper-button-prev:after {display: none;}
#serv .nav .swiper-pagination {position: initial;}
#serv .nav .pg span.dot {padding: 0 .5rem; color: var(--subcolor); font-weight: 700;}
#serv .nav .pg span.total {opacity: 0.3;}

@media(max-width:1440px) {
    #serv .wrap {margin-left: 0; width: 90%; margin: auto;}
    #serv .servSwiper {width: 100%;}
}

@media(max-width:1240px) {
    #serv .title {font-size: 3.125rem;}
}

@media(max-width:990px) {
    #serv .wrap {width: 100%;}
    #serv .swiper-slide {flex-direction: column; gap: 3rem;}
    #serv .swiper-slide .imgbox {width: 100%; border-radius: 1.25rem; opacity: 1;}
    #serv .swiper-slide-active .imgbox:after {opacity: 0;}
    #serv .swiper-slide .txtbox {width: 100%; opacity: 0; transition: opacity .5s;}
    #serv .swiper-slide-active .txtbox {opacity: 1;}
    #serv .swiper-slide .line {width: 100%;}
    
    #serv .nav {font-size: 1.5rem; padding-left: 5%;}
    #serv .nav.pc {display: none;}
    #serv .nav.mo {display: flex;}
    #serv .nav .pg span.dot {padding: 0 1rem;}

    #serv .title {font-size: 3.75rem;}
    #serv .txtbox p.mt-30 {margin-top: 0;}
}

@media(max-width:500px) {
    #serv .wrap {width: 90%;}
    #serv .nav {padding-left: 0;}
    #serv .swiper-slide .txtbox {opacity: 1;}
    #serv .title {font-size: 3.125rem; margin-bottom: 3.75rem;}
    #serv h3.title {display: none;}
}

.main #serv {background: #171717; color: #fff;}
.main #serv .nav .swiper-button-next, 
.main #serv .nav .swiper-button-prev {color: #fff;}
.sub #serv {padding-bottom: 0 !important;}