@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {background-color: #000;}
section {position: relative; width: 100% !important; height: 100vh; max-width: 100% !important; max-height: 100% !important}

/* header */
#header {position:fixed; top:0; right:0; left:0; z-index:9999; width:100%; height:60px; text-align:right; background:#fff}
#header > .logo {position:absolute; left:0; top:0; width:80px; height:60px; line-height:1; font-size:1px; color:transparent; text-indent:-9999em; vertical-align:top; background:url(../img/logo.png) 50% 50% no-repeat; background-size:50px auto}
#header > .menu {display:inline-block; margin-right:15px}
#header > .menu ul:after {content:""; display:block; clear:both}
#header > .menu ul li {float:left}
#header > .menu ul li ~ li {margin-left:25px}
#header > .menu ul li a {transition: 0.4s; display:inline-block; position:relative; height:60px; line-height:60px; font-weight:800; font-size: 0.875rem; color:#000; letter-spacing:0}
#header > .menu ul li.active a {color:#ed3b82}
#header > .menu ul li:first-child a {color: #ed3b82}
.pin-spacer { margin-top: 60px !important;}
/* intro */
#intro {background: #93CECC; overflow: hidden; height: calc(100vh - 60px) !important; transform: none !important}
#intro h1 {width: 100%; padding: 0 16px; box-sizing: border-box; position: absolute; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; height: 100%; line-height: 1.3; text-align: center; font-size: 60px; font-weight: 900; color: #529B98}
#intro .intro_box {display: flex; flex-direction: column-reverse; justify-content: center; align-items: center; height: 100%}
#intro .intro_box .box {width: 30px; height: 30px; border-radius: 50%; opacity: 1}
#intro .intro_box .box1 {background: black; position: absolute; bottom: 31%}
#intro .intro_box .box2 {width: 38px; height: 0; border-radius: 0; border-style: solid; border-width: 0 15px 197px 15px; border-color: transparent transparent #000 transparent; transform: rotate(180deg)}

/* explain */
#explain {background: #000; position: relative; overflow: hidden; height: calc(100vh - 60px) !important}
#explain .explain_txt {width: 100%; height: 100%; position: relative; padding: 100px 0; box-sizing: border-box}
#explain .explain_txt p {width: 100%; font-size: 1.875rem; color: #fff; line-height: 1.5; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); text-align: center}

/* section3 */
#section3 {background: #fff; height: calc(100vh - 60px) !important}
#section3 .name_ko {width: 100%; text-align: center; color: #fff; position: absolute; top: 50%; font-size: 8.5rem; left: 50%; transform: translate(-50%, -50%); z-index: 9; font-weight: 900; white-space: nowrap; letter-spacing: 55px}
#section3 .name_en {width: 100%; text-align: center; color: #fff; position: absolute; top: 57%; font-family: 'Lato'; font-size: 9.375rem; left: 50%; transform: translate(-50%, -50%); z-index: 9; font-weight: 900; white-space: nowrap}
#section3 .dot_wrapper {display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; height: 100%}
#section3 .dot_wrapper .dot_wrap {width: 100%; padding: 0 16px; box-sizing: border-box; display: flex; justify-content: space-around}
#section3 .dot_wrapper .dot_wrap .dot {width: 40px; height: 40px; background: #EF5106}
#section3 .dot_wrapper .dot_wrap .dot:nth-child(4n) {margin-right: 0}

/* service */
#service {background: #fff; width: 100%; height: unset}
#service .service_wrap {max-width: 1440px; width: 100%; padding: 90px 32px 170px; margin: 0 auto; height: 100%; box-sizing: border-box}
#service .service_wrap .service_tit {line-height: 1; padding-bottom: 50px; text-align: center; font-size: 28px; font-weight: 900}
#service .service_wrap .service_con {width: 100%; display: flex; flex-direction: column; justify-content: space-between}
#service .service_wrap .service_con .con {margin-bottom: 70px}
#service .service_wrap .service_con .con:last-child {margin-bottom: 0}
#service .service_wrap .service_con .con .con_b {text-align: center}
#service .service_wrap .service_con .con .con_b h3 {padding-top: 40px; padding-bottom: 30px; font-size: 34px; font-weight: bold; color: #7B7C87}
#service .service_wrap .service_con .con .con_b ul li {font-size: 20px; font-weight: 300; color: #7B7C87}

/* welfare */
.welfare_tit {position: absolute; left: 50%; transform: translateX(-50%); z-index: 9; font-size: 28px; font-weight: 900; line-height: 1}
#welfare {display: flex; height: unset; background-color: #fff}
#welfare h1 {font-size: 120px; font-weight: bold; color: #7B7C87; margin: 0; line-height: 0.8; text-align: left}
#welfare p {font-size: 20px; font-weight: 300; color: #7B7C87; line-height: 1.5; letter-spacing: -2px}
#welfare .right {width: 50%}
#welfare .left {height: 80vh; width: 50%; display: flex; flex-direction: column; justify-content: center}
#welfare .right .desktopContent {margin:auto; width:100%}
#welfare .right .desktopContent .desktopContentSection {min-height: 100vh; display: flex; flex-direction: column; justify-content: center; position: relative; text-align: end}
#welfare .right .desktopContent .desktopContentSection:first-child {top: -40px; right: 17%}
#welfare .right .desktopContent .desktopContentSection:nth-child(2) {left: -90%; top: 10px}
#welfare .right .desktopContent .desktopContentSection:last-child {top: -70px; right: 17%}
#welfare .left .desktopPhotos {width: 440px; height: 620px; position: relative; overflow: hidden; right: -100%; transform: translateX(-50%)}
#welfare .left .desktopPhoto {position: absolute; width: 100%; height: 100%}
#welfare .left .desktopPhoto img {width: 100%; height: 100%; object-fit: cover}

/* numbers */
#numbers {height: calc(100vh - 60px) !important; background: #DE4800; color: #fff; box-sizing: border-box; display: flex; justify-content: space-around; flex-direction: column; padding: 0 100px}
#numbers .numbers_tit {font-size: 50px; font-weight: 900; line-height: 1; padding-top: 100px}
#numbers .numbers_con {padding-bottom: 50px}
#numbers .numbers_con .con_wrap {width: 275vw; display: flex; column-gap: 200px; align-items: center}
#numbers .numbers_con .con_wrap .con {display: flex; flex-direction: column-reverse}
#numbers .numbers_con .con_wrap .con .txt {width: 310px; padding-top: 30px}
#numbers .numbers_con .con_wrap .con .txt span {font-size: 20px; font-weight: bold}
#numbers .numbers_con .con_wrap .con .txt p {font-size: 20px; font-weight: 300; padding-top: 15px}
#numbers .numbers_con .con_wrap .con p.num {font-size: 430px; font-weight: 100; line-height: 1; position: relative}
#numbers .numbers_con .con_wrap .con p.num1::after {content: ''; position: absolute; top: 75px; right: 0; background: url(../img/+.png) no-repeat center center; width: 16px; height: 17px}
#numbers .numbers_con .con_wrap .con p.num4::after {content: ''; position: absolute; top: 77px; right: -20px; background: url(../img/+.png) no-repeat center center; width: 16px; height: 17px}
#numbers .numbers_con .con_wrap .con p.num4 {letter-spacing: -25px}

/* gallery */
.gallery-container {background-color: #fff; padding: 120px 30px 0; box-sizing: border-box}
.gallery-container .gallery {width: 50%; margin: 0 auto}
.gallery-container .gallery h2 {font-size: 1.75rem; font-weight: 900; text-align: center; line-height: 1; padding: 90px 0 50px}
.gallery-container .gallery .galleryBlock {padding-bottom: 5px}
.gallery-container .gallery2 .galleryBlock:last-child {padding-bottom: 20px}
.gallery-container .gallery .galleryBlock img {border-radius: 10px}

/* contact */
.contact {background-color: #303136; position: relative; top: 0; left: 0; height: calc(100vh - 60px)}
.contact .contact-txt {color: #fff; width: 100%; position: absolute}
.contact .contact-txt #contact-lottie {width: 50%; position: absolute; top: 70px; left: -33px}
.contact .contact-txt .c-r {position: absolute; top: 230px; left: 16%; line-height: 1}
.contact .contact-txt .c-r .c-r-t {display: flex; flex-direction: column}
.contact .contact-txt .c-r .c-r-t p {font-size: 1.25rem; margin-bottom: 20px}
.contact .contact-txt .c-r .c-r-t span {font-weight: 100; line-height: 1.5; font-size: 1rem; -webkit-text-fill-color: #fff}
.contact .contact-txt .c-r .c-r-t .c-r-t-r {margin-top: 30px}
.contact .contact-txt .c-r .c-r-b {margin-top: 50px}
.contact .contact-txt .c-r .c-r-b p {font-size: 0.875rem; line-height: 1.5; font-weight: 100}
.contact .contact-txt .c-r .c-r-b p.email {font-size: 1.25rem; font-weight: 400; margin-top: 20px;}
.contact .contact-txt .c-r .c-r-b span {font-weight: 100; line-height: 1.5; font-size: 1rem; color: #fff}
.contact .contact-txt .c-r .c-r-b .logo-box {width: 60px; height: 24px; margin-bottom: 20px; background: url(../img/logo-wh.png) no-repeat; background-size: cover}

#header + .pin-spacer {height: 1800px !important}
#welfare + .pin-spacer {padding: 60px 0 0 0 !important; margin-top: 0 !important; background-color: #DE4800 !important}

/* TOP버튼 */
.gotop {overflow: hidden; position:fixed; right:15px; bottom:15px; width:48px; height:48px; font-size:14px; z-index:9999; background-color: #282828; color: #fff; border-radius: 0 40px 40px 0; line-height: 48px; text-align: center}
.gotop span {position: relative; z-index: 1}
.gotop::after {content: ""; position: absolute; top: 0; left: 0; height: 490%; width: 140%; background: #ed3b82; transition: all 0.5s ease-in-out; transform: translateX(-163%) translateY(2%) rotate(45deg)}
.gotop:hover::after {transform: translateX(-90%) translateY(-19%) rotate(45deg)}
.gotop:hover {animation: jelly 0.5s linear}
@keyframes jelly {
    25% {transform: scale(0.9, 1.1)}
    50% {transform: scale(1.1, 0.9)}
    75% {transform: scale(0.95, 1.05)}
}

@media screen and (max-width:976px) {#numbers .numbers_con .con_wrap {width: 286vw}}
@media screen and (max-width:925px) {#numbers .numbers_con .con_wrap {width: 302vw}}
@media screen and (max-width:900px) {
    #welfare .right .desktopContent .desktopContentSection:first-child,
    #welfare .right .desktopContent .desktopContentSection:last-child {right: 42%}
}
@media screen and (max-width:875px) {#numbers .numbers_con .con_wrap {width: 321vw}}
@media screen and (max-width:830px) {
    #intro .intro_box .box1 {bottom: 28%}
}
@media screen and (max-width:825px) {#numbers .numbers_con .con_wrap {width: 341vw}}
@media screen and (max-width:775px) {
    #intro .intro_box .box1 {bottom: 24%} 
    #numbers .numbers_con .con_wrap {width: 362vw}
}
@media screen and (max-width:750px) {
    #section3 .dot_wrapper .dot_wrap .dot {width: 12px; height: 12px}
    #section3 .name_ko {font-size: 4.687rem; letter-spacing: 20px}
    #section3 .name_en {font-size: 4.375rem; top: 66%}

    #welfare h1 {font-size: 60px; color: #fff}
    #welfare p {color: #fff; text-align: left}
    #welfare .right .desktopContent .desktopContentSection:first-child {top: -112px; right: 51%; align-items: end; row-gap: 20px}
    #welfare .right .desktopContent .desktopContentSection:nth-child(2) {left: -50%; top: -50px; row-gap: 20px} 
    #welfare .right .desktopContent .desktopContentSection:last-child {align-items: end; row-gap: 20px}
    #welfare .left .desktopPhotos {position: relative; margin: 110px 0 0}
    #welfare .left .desktopPhotos::after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5)}
    
    #numbers {padding: 0 40px}
    #numbers .numbers_tit {padding-top: 90px; font-size: 38px}
    #numbers .numbers_con .con_wrap {width: 230vw; column-gap: 105px}
    #numbers .numbers_con .con_wrap .con p.num {font-size: 220px} 
    #numbers .numbers_con .con_wrap .con p.num1::after {top: 30px; right: 66px}
    #numbers .numbers_con .con_wrap .con p.num4::after {top: 37px; right: -24px}
    #numbers .numbers_con .con_wrap .con p.num4 {letter-spacing: -10px}

    .gallery-container .gallery {width: 100%}
    .contact .contact-txt #contact-lottie {width: 77%}
    .contact .contact-txt .c-r {top: 230px; left: 25%}
}
@media screen and (max-width:715px) {#numbers .numbers_con .con_wrap {width: 245vw}}
@media screen and (max-width:670px) {#numbers .numbers_con .con_wrap {width: 260vw}}
@media screen and (max-width:635px) {#numbers .numbers_con .con_wrap {width: 276vw}}
@media screen and (max-width:595px) {#numbers .numbers_con .con_wrap {width: 260vw}}
@media screen and (max-width:615px) {#numbers .numbers_con .con_wrap {width: 295vw}}
@media screen and (max-width:560px) {#numbers .numbers_con .con_wrap {width: 313vw}}
@media screen and (max-width:550px) {
    #intro .intro_box .box1 {bottom: 15%} 
}
@media screen and (max-width:540px) {
    .contact .contact-txt .c-r {top: 190px; left: 19.5%}
}
@media screen and (max-width:525px) {#numbers .numbers_con .con_wrap {width: 335vw}}
@media screen and (max-width:500px) {
    #welfare .left .desktopPhotos {width: 330px; height: 558px}
    #welfare .right .desktopContent .desktopContentSection:first-child {top: 85px; right: 37%}
    #welfare .right .desktopContent .desktopContentSection:nth-child(2) {top: 120px; left: -57%} 
    #welfare .right .desktopContent .desktopContentSection:last-child {top: 35px; right: 37%}

    #intro .intro_box .box1 {bottom: 22%} 
    #header + .pin-spacer {height: 1150px !important}
}
@media screen and (max-width:485px) {#numbers .numbers_con .con_wrap {width: 353vw}}
@media screen and (max-width:465px) {#numbers .numbers_con .con_wrap {width: 367vw}}
@media screen and (max-width:445px) {#numbers .numbers_con .con_wrap {width: 380vw}}
@media screen and (max-width:430px) {#numbers .numbers_con .con_wrap {width: 391vw}}
@media screen and (max-width:420px) {#numbers .numbers_con .con_wrap {width: 398vw}}
@media screen and (max-width:410px) {#numbers .numbers_con .con_wrap {width: 406vw}}
@media screen and (max-width:400px) {
    #intro .intro_box .box1 {bottom: 11%} 

    #numbers .numbers_con .con_wrap {width: 414vw}

    .contact .contact-txt #contact-lottie {top: 55px}
    .contact .contact-txt .c-r {top: 145px}
}
@media screen and (max-width:395px) {#numbers .numbers_con .con_wrap {width: 425vw}}
@media screen and (max-width:385px) {
    #numbers .numbers_con .con_wrap {width: 435vw}
    #welfare .left .desktopPhotos {width: 315px}
}
@media screen and (max-width:380px) {
    #intro .intro_box .box1 {bottom: 9%} 
}
@media screen and (max-width:374px) {#numbers .numbers_con .con_wrap {width: 437vw}}