@charset "utf-8";

.main #header .main-header {top: 1.5rem;}

.main .only-mo {display: none;}
.main .maintitle {font-size: 48px; font-weight: 800; line-height: 68px; letter-spacing: -0.03em; color: var(--color-black);}
.main .maintitle-w {font-size: 48px; font-weight: 800; line-height: 68px; letter-spacing: -0.03em; color: #fff; }

.main .visual-wrapper {position: relative; height: calc(100vh - 3rem); margin: 1.5rem; overflow: hidden; border-radius: 1.5rem; background-color: #000;}
.main .visual-wrapper .visual-title {margin-top: 45px; font-family: 'Paybooc'; font-size: 60px; letter-spacing: -0.02em; color: #fff;}
.main .visual-wrapper .visual-sub-01 {font-weight: 300; font-size: 30px; letter-spacing: -0.02em; color: #fff;}
.main .visual-wrapper .visual-sub-02 {margin-top: 20px; font-weight: 400; font-size: 20px; letter-spacing: -0.02em; color: #fff;}
.main .visual-wrapper .slide-wrapper {position: relative;}
.main .visual-wrapper .slide-wrapper .slide {position: absolute; top: 0; left: 0; width: 100%; background-color: #000; opacity: 0; z-index: 0;}
.main .visual-wrapper .slide-wrapper .slide.show {opacity: 1; z-index: 1; transition: all 1.5s ease-in-out;}
.main .visual-wrapper .link-wrap {margin-top: 50px; display: flex; gap: 30px;}
.main .visual-wrapper .link-wrap a {padding: 12px 40px; font-weight: 400; font-size: 14px; letter-spacing: -0.02em; color: #fff; border: 1px solid #AFAFAF; transition: all 0.3s ease-in-out;}
.main .visual-wrapper .link-wrap a:hover {background-color: #fff; color: #323232;}

.main .main-img {position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: calc(100vh - 3rem);}
.main .main-img-01 {background: url(/resources/images/main/main_visual_01.png)no-repeat center center; background-size: cover;}
.main .main-img-02 {background: url(/resources/images/main/main_visual_02.png)no-repeat center center; background-size: cover;}
.main .main-img-03 {background: url(/resources/images/main/main_visual_03.png)no-repeat center center; background-size: cover;}
.main .main-img-04 {background: url(/resources/images/main/main_visual_04.png)no-repeat center center; background-size: cover;}

.main .indicator {width: 100%; height: 3px; position: absolute; bottom: 5%; z-index: 3; left: 50%; transform: translateX(-50%);}
.main .indicator ul {display: flex; width: 100%; height: 100%; gap: 20px;}
.main .indicator ul li {display: inline-block; width: 33.333%; height: 100%; background-color: #C8C8C8; cursor: pointer;}
.main .indicator ul li p {font-size: 18px; font-weight: 500; letter-spacing: -0.03em; color: #969696; transform: translateY(-40px);}
.main .indicator ul li span {display: block; background-color: #3D7DFF; width: 0%; height: 100%;}
.main .indicator ul li.check {transition: all 0.3s ease; background-color: #3D7DFF;}
.main .indicator ul li.on span {width: 100%; transition: width 6s linear; transform-origin: left;}
.main .indicator ul li.on p {color: #3D7DFF;}
/* .main .visual-wrapper .slide-wrapper .slide.show {z-index: 3;} */

.main .main-heading-1 {text-align: left; font-weight: 800; font-size: 48px; line-height: 68px; letter-spacing: -0.02em; color: var(--color-black); overflow: hidden;}
.main .main-heading-sub {margin-top: 0; text-align: left; font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; color: var(--color-black); overflow: hidden;}

.main .section-count {padding: 160px 0 230px; max-width: 1920px; margin: 0 auto; background: url(/resources/images/main/main_count_bg.png)no-repeat 0% 120%;}
.main .heading-sub-count-wrap {display: flex; flex-direction: row-reverse; margin-top: 50px;}
.main .count-wrap {display: flex; margin-top: 100px; justify-content: space-between;}
.main .count-wrap .num-unit-wrap {display: flex; align-items: end; gap: 10px;}
.main .count-wrap .count-num {font-size: 80px; font-weight: 800; letter-spacing: -0.04em; line-height: 60px; overflow: hidden;}
.main .count-wrap .count-num span {margin-left: 10px; font-size: 50px; font-weight: 800; letter-spacing: -0.04em; line-height: 30px; vertical-align: top;}
.main .count-wrap .count-unit {font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 20px;}
.main .count-wrap .count-desc {margin-top: 30px; text-align: center; font-size: 24px; font-weight: 400;}
.main .section-count .main-heading-wrap-mo {display: none;}
.main .section-count .main-heading-sub-wrap-mo {display: none;}

.main .section-business {padding: 350px 1.5rem 0;}
.main .section-business .main-heading-wrap {margin-bottom: 150px;}
.main .section-business .main-heading-1 {text-align: center;}

.main .section-business-box {position: relative; overflow: hidden;  height: 100vh;  width: 100%;  top: 0; margin: 0; z-index: 1;}
.main .section-business .business-item {margin: 0 auto; display: flex; flex-direction: column; justify-content: end; padding: 0 7vw 8vw; width: 100%; height: 100%; overflow: hidden; border-radius: 1.5rem; }
/* .main .section-business .business-item {display: flex; flex-direction: column; justify-content: end; padding: 0 7vw 8vw; height: calc(100vh - 4.8rem); margin: 2rem auto 3rem; overflow: hidden; border-radius: 1.5rem; } */
.main .section-business .business-item-wrap {height: 100vh; padding: 1.5rem 0;}

.main .section-business .business-item-01 {background: url(/resources/images/main/main_business_01.png)no-repeat center center; background-size: cover;}
.main .section-business .business-item-02 {background: url(/resources/images/main/main_business_02.png)no-repeat center center; background-size: cover;}
.main .section-business .business-item-03 {background: url(/resources/images/main/main_business_03.png)no-repeat center center; background-size: cover;}
.main .section-business .business-item-01 .item-text-wrap {opacity: 0;}
.main .section-business .business-item-01 .item-icon-wrap {opacity: 0;}
.main .section-business .item-title {font-family: 'Paybooc'; font-size: 60px; letter-spacing: -0.02em; color: #fff;}
.main .section-business .item-desc-wrap {margin-top: 20px;}
.main .section-business .item-desc {font-size: 24px; font-weight: 400; letter-spacing: -0.03em; color: #fff;}
.main .section-business .item-icon-wrap {margin-top: 50px; display: flex; justify-content: space-between; align-items: center; width: 40%;}
.main .section-business .item-icon {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main .section-business .item-icon-title {margin-top: 10px; font-size: 18px; font-weight: 400; letter-spacing: -0.03em; text-align: center; color: #fff;}
.main .section-business .item-icon-title > br {display: none;}
.main .section-business .business-item-03-wrap .item-title div > br {display: none;}

.main .section-client .main-heading-wrap-mo {display: none;}
.main .section-client {padding: 160px 0; margin: 0 auto; max-width: 1860px; overflow: hidden;}
.main .client-wrap {display: flex; flex-direction: column; gap: 35px; margin-top: 90px;}
.main .client-wrap .logo-box-wrap { display: flex; gap: 20px;}
.main .client-wrap .logo-box-wrap:nth-child(2) {transform: translateX(-10%);}
.main .client-wrap .logo-box {display: flex; gap: 20px; animation: bannermove 20s linear infinite;}
.main .client-wrap .logo-box div {display: flex; justify-content: center; align-items: center; width: 280px; height: 105px; border-radius: 20px; box-shadow: 2px 2px 20px rgba(0, 0, 0, .1);}
.main .section-client .more-button {margin-top: 100px; display: flex; justify-content: center;}
.main .section-client a {padding: 12px 40px; text-align: center; font-size: 16px; font-weight: 500; border: 1px solid #000; transition: all 0.3s ease-in-out;}

@keyframes bannermove {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-101%, 0);
    }
}

.main .section-client a:hover {
    background: #323232;
    color: #fff;
}

.main .section-recruit {padding: 0 1.5rem;}
.main .section-recruit .recruit-container {margin: 0 auto; padding: 211px 0 145px; width: 100%; max-width: 1860px; border-radius: 1.5rem; background: url(/resources/images/main/main_recruit_bg.png)no-repeat center center; background-size: cover;}
.main .section-recruit .main-heading-1 {text-align: center; color: #fff;}
.main .section-recruit .more-button {margin-top: 100px; display: flex; justify-content: center;}
.main .section-recruit a {padding: 12px 40px; text-align: center; font-size: 16px; font-weight: 500; color: #fff; border: 1px solid #fff; transition: all 0.3s ease-in-out;}

.main .section-recruit a:hover {
    background: #fff;
    color: #323232;
}



@media (max-width: 1440px) {
    .main .visual-wrapper .visual-title {margin-top: 30px; font-size: 50px;}
    .main .visual-wrapper .visual-sub-01 {font-size: 25px;}
    .main .visual-wrapper .visual-sub-02 {font-size: 18px;}
    .main .indicator ul li {font-size: 16px;}
    .main .main-heading-1 {font-size: 36px; line-height: 54px;}
    .main .main-heading-sub {font-size: 18px; line-height: 30px;}
    .main .count-wrap .count-num {font-size: 65px;}
    .main .count-wrap .count-unit {font-size: 20px; line-height: 28px;}
    .main .count-wrap .count-desc {margin-top: 10px; font-size: 20px;}
    .main .section-count {background: url(/resources/images/main/main_count_bg.png)no-repeat 0% 125%;}
    .main .section-business {padding: 250px 1.5rem 0;}

    .main .section-business .item-title {font-size: 50px;}
    .main .section-business .item-desc {font-size: 20px;}
    .main .section-business .item-icon-wrap {width: 40%;}
    .main .section-business .item-icon-title {font-size: 14px;}
}

@media (max-width: 1280px) {
    .main .section-business .item-icon-title > br {display: block;}
    .main .section-business .business-item-03-wrap .item-icon:nth-child(3) {margin-top: 20px;}
}

@media (max-width: 960px) {
    .main .indicator ul li p {font-size: 16px; line-height: 35px;}
    .main .section-business .item-desc {font-size: 16px;}
    .main .section-business .business-item-03-wrap .item-title > br {display: block;}
    .main .section-business .business-item-03-wrap .item-title {line-height: 68px;}
    .main .section-business .item-icon-wrap {width: 50%;}
    .main .section-business .business-item-01 {background: url(/resources/images/main/main_business_01.png)no-repeat 70% center; background-size: cover;}

}

@media (max-width: 767px) {
    #header .mobile-top {padding: 30px 20px 10px 25px;}
    .main .main-img {padding-bottom: 24.4vw; justify-content: flex-end;}
    .main .visual-wrapper {margin: 1.5rem 10px;}
    .main .visual-wrapper .visual-sub-01 {font-size: 16px;}
    .main .visual-wrapper .visual-title {margin-top: 20px; font-size: 28px;}
    .main .visual-wrapper .visual-sub-02 {margin-top: 20px; font-size: 14px; line-height: 22px;}
    .main .visual-wrapper .link-wrap {margin-top: 30px;}
    .main .visual-wrapper .link-wrap a {padding: 10px 20px; font-size: 12px;}
    /* .main .indicator {display: none;} */
    .main .indicator ul {gap: 10px; width: 85%; margin: 0 auto;}
    .main .indicator ul li p {display: none;}
    .main .main-img-01 {background: url(/resources/images/main/main_visual_01.png)no-repeat 70% center; background-size: cover;}


    .main .main-heading-1 {font-size: 28px; line-height: 42px;}
    .main .main-heading-sub {font-size: 14px; line-height: 24px;}
    .main .section-count {padding: 100px 0; background: url(/resources/images/main/main_count_bg.png)no-repeat -30% 85%; background-size: 70%;}
    .main .heading-sub-count-wrap {flex-direction: column; margin-top: 30px;}
    .main .count-wrap {margin-top: 40px; margin-right: 30px; flex-direction: column; align-items: center; gap: 40px; width: 30%; align-self: center; float: right;}
    .main .count-wrap .count-num {font-size: 40px;}
    .main .count-wrap .count-unit {line-height: 45px;}
    .main .count-wrap .count-desc {margin-top: 0;}

    .main .section-business {padding: 227px 10px 0;}
    .main .section-business .business-item {border-radius: 20px;}
    .main .section-business .item-title {font-size: 30px;}
    .main .section-business .item-desc {font-size: 14px;}
    .main .section-business .item-icon-wrap {margin-top: 40px;}
    .main .section-business .item-icon img {width: 45px; height: 45px;}
    .main .section-business .business-item-03-wrap .item-title {line-height: 38px;}
    .main .section-business .item-icon-wrap {width: 60%;}

    .main .section-client .main-heading-wrap {display: none;}
    .main .section-client .main-heading-wrap-mo {display: block;}
    .main .section-client a {padding: 10px 20px; font-size: 12px; font-weight: 700;}
    .main .section-client .more-button {margin-top: 67px;}
    .main .client-wrap {gap: 20px;}
    .main .client-wrap .logo-box div {padding: 20px; width: 190px; height: 75px; border-radius: 10px;}

    .main .section-recruit {padding: 0 10px;}
    .main .section-recruit a {padding: 8px 20px; font-size: 10px; font-weight: 700;}
    .main .section-recruit .recruit-container {border-radius: 20px;}

}
@media (max-width: 630px) {
    .main .section-count .main-heading-wrap {display: none;}
    .main .section-count .main-heading-wrap-mo {display: block;}
    .main .section-count .main-heading-sub-wrap {display: none;}
    .main .section-count .main-heading-sub-wrap-mo {display: block;}
}

@media (max-width: 590px) {
    .main .section-business .item-icon-wrap {width: 100%;}
}

.main-popup {width:100vw; height: 100vh; z-index: 99999; background:rgb(0, 0, 0, 0.25); position:fixed; display:flex; justify-content: center; align-items: center;}
.pop-wrapper {width:calc(100vw - 32px); max-width:500px; height:calc(100vh - 32px); max-height:600px;}
.pop-footer {display:flex; justify-content: space-between; padding:8px 12px; background: rgb(255, 255, 255, 0.3); color:#ffffff;}