@charset "utf-8";


.main-wrap {
    .section1 {
        position: relative;
        height: 919px;
        overflow: hidden;

        .container {
            position:absolute;
            width:100%;
            left:50%;
            transform: translate(-50%, -50%);
            top:50%;


            .text-wrap {
                position:relative;
                z-index: 1;

                transition: opacity .4s ease;
            }

            .text-box, .text-box2 {
                display:flex;
                align-items:center;
                justify-content:end;


                & h2 {
                    color:#fff;
                    font-size:72px;
                    font-weight:700;
                    line-height:130%;
                    margin-bottom:35px;

                    & span {
                        color:#3F97FF;
                    }
                }

                & p {
                    color:#fff;
                    font-size:20px;
                    font-weight:500;
                    line-height:100%;
                    margin-bottom:0;
                }
            }

            .text-box2 {
                display:block;
                text-align:right;
                margin-right:130px;
            }
        }

        &:before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('/theme/basic/img/main/main-1.png') no-repeat center center;
            background-size: cover;
            transform-origin: center center;
            transform: scale(1.15);
            animation: sectionZoomOut 6s ease-out forwards;
        }

        &.is-typing-ready .text-wrap {
            opacity: 1;
        }

        .scroll-box {
            position: absolute;
            left:50%;
            transform: translate(-50%, -50%);
            bottom:3%;
            text-align:center;
            z-index: 1;

            & p {
                color:#fff;
                font-size:14px;
                font-weight: 600;
                animation: fadeDown 1.5s ease-in-out infinite;
                margin-bottom:20px;
            }

            & img {
                animation: fadeDown 1.5s ease-in-out infinite;
            }


        }
    }



    .modify-section1 {
        background: #EEF6FF;
        padding: 120px 0;

        & h1 {
            font-size:75px;
            font-weight:900;
            letter-spacing: -0.5px;
            line-height: 100%;
            background: linear-gradient(90deg, #1D7DEF, #5A42BD);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
    }


    .section2 {
        padding:137px 0;

        .info-box {

            .img-box {
                position:relative;
                overflow:hidden;
                border-radius:20px;
                & img {
                    display:block;
                    width:100%;
                    height:100%;
                    object-fit:cover;
                    transform:scale(1);
                    transition:transform 0.4s ease;
                }
            }
            &:hover {
                .img-box {
                    border-radius:20px;
                    & img {
                        transform: scale(1.3);
                    }
                }
            }
        }

        .row {
            margin-top:80px;
            row-gap:40px;

            & p {
                text-align:center;
                font-size:26px;
                font-weight:700;
                color:#222;
                line-height:130%;
                letter-spacing:-0.2px;
                margin-bottom:0;
                margin-top:30px;
            }
        }
    }

    .section3 {
        padding:120px 0;
        background:#EEF6FF;

        .section-top {
            .top-p {
                margin-top:33px;
            }

            .middle-p {
                margin:40px 0;
            }

            .end-p {
                margin-top:40px;
            }
        }

        .section-bottom {
            text-align:center;
            margin-top:50px;

            .left-img, .center-img, .right-img {
                display:inline-block;
                will-change:transform;
            }

            .left-img {
                animation: float-left 3s ease-in-out infinite;

            }
            .center-img {
                animation: float-updown 3.5s ease-in-out infinite;
            }
            .right-img {
                animation: float-right 3s ease-in-out infinite;
            }
        }
    }

    .section4 {
        padding:133px 0;

        .row {
            margin-top:80px;

            .info-box {
                background:#EEF6FF;
                border-radius:30px;
                padding:50px;
                min-height:432px;

                .img-box {
                    margin-bottom:17px;

                    & img {
                        display:block;
                        will-change:transform
                    }
                }

                .text-box {
                    & dl {
                        & dt {
                            font-size:24px;
                            font-weight:700;
                            color:#222;
                            letter-spacing:-0.7px;
                            margin-bottom:17px;
                        }

                        & dd {
                            font-size:20px;
                            font-weight:500;
                            color:#555;
                            line-height:150%;
                            letter-spacing:-0.7px;
                        }
                    }
                }

                &:hover {
                    .img-box {
                        & img {
                            animation: float-updown-hover 1.3s ease-in-out infinite;
                        }
                    }
                }
            }
        }
    }

    .section5 {
        background:#EEF6FF;
        padding:127px 0;

        .row {
            margin-top:80px;
            row-gap:80px;
            align-items:center;

            .text-box {

                & h4 {
                    margin-top:20px;
                }

                .tag-box {
                    display:flex;
                    align-items:center;
                    column-gap:10px;
                    margin-top:40px;

                    & span {
                        padding:6px 16px;
                        font-size:20px;
                        font-weight:600;
                        letter-spacing:-0.5px;
                        line-height:150%;
                        color:#0b0b0b;
                        border-radius:50px;
                        border:solid 1px #E0EFFF;
                        box-shadow:0px 3px 6px 0px #0000000D;
                        background:#fff;
                        cursor:pointer;
                        transition: background 0.3s ease-in-out;
                    }
                    .blue-span {
                        box-shadow:none;
                        background:#006DEE;
                        color:#fff;
                    }
                }
            }

            .left-text-box {
                padding-left:135px;
            }

            .img-text-box {
                background:#fff;
                box-shadow:0px 20px 48px 4px #0000000F;
                border-radius:40px;
                padding:48px;

                .img-box {
                    text-align:right;
                    margin-bottom:30px;
                }

                .info-box {
                    & p {
                        font-size:20px;
                        font-weight:500;
                        color:#555;
                        line-height:150%;
                        letter-spacing:-0.7px;
                    }
                }
            }
        }

        .bottom-box {
            margin-top:123px;
            background:#fff;
            border-radius:30px;
            box-shadow:0px 20px 48px 4px #0000000F;
            padding:40px 0;

            .bottom-inner {
                display:flex;
                align-items:center;
                justify-content:center;
                column-gap:60px;

                .item-box {
                    display:flex;
                    align-items:center;
                    column-gap:15px;

                    & strong {
                        color:#222;
                        font-size:24px;
                        font-weight:700;
                        line-height:150%;
                        letter-spacing:-0.7px;
                    }

                    & span {
                        font-size:20px;
                        font-weight:500;
                        color:#555;
                        letter-spacing:-0.7px;

                        & img {
                            position:relative;
                            top:-2px;
                        }
                    }
                }
            }
        }
    }

    .section6 {
        padding:106px 0;

        .top-img-box {
            text-align:center;
            margin-top:70px;
        }

        .top-box {


            .row {
                .info-box {
                    .img-text-box {
                        text-align:center;
                        background:#EEF6FF;
                        border-radius:50px;
                        padding:33px 50px;
                        & strong {
                            display:block;
                            font-size:25px;
                            font-weight:600;
                            letter-spacing:-1px;
                            color:#222;
                            margin-bottom:15px;
                        }
                    }

                    .text-box {
                        margin-top:40px;
                        text-align:center;
                        & h6 {
                            font-size:21px;
                            font-weight:700;
                            color:#222;
                        }

                        & p {
                            color:#555;
                            font-size:15px;
                            font-weight:500;
                            line-height:150%;
                        }
                    }
                }
            }
        }

        .bottom-box {

            .row {
                row-gap:90px;
                align-items:center;
            }

            .text-box {
                & h4 {
                    margin-top:20px;
                    margin-bottom:20px;
                }

                & p {
                    color:#545454;
                    font-size:20px;
                    font-weight:500;
                    line-height:150%;
                    letter-spacing:-0.5px;
                }
            }

            .left-img-box {
                & img {
                    position:relative;
                    left: -70px;
                }
            }

            .right-box {
                padding-left:120px;
            }

            .img-text-box {
                background:#fff;
                box-shadow:0px 20px 48px 4px #0000000F;
                text-align:center;
                padding:40px;
                border-radius:25px;

                .simbol {
                    margin-bottom:15px;
                }

                .input-group {
                    border:solid 10px #EDF5FF;
                    border-radius:5px;
                    position: relative;

                    & input[type="text"] {
                        border:solid 1px #C9C9C9;
                    }

                    & button {
                        border-top:solid 1px #c9c9c9;
                        border-right:solid 1px #c9c9c9;
                        border-bottom:solid 1px #c9c9c9;
                        height:auto;
                    }
                }

            }
        }
    }

    .section7 {
        background:url('/theme/basic/img/main/main-32.png') no-repeat;
        height:1371px;
        background-size:cover;
        padding:140px 0;
        position:relative;

        .text-box {
            & h3 {
                font-size:50px;
                font-weight:700;
                line-height:130%;
                letter-spacing:-0.5px;
                margin-bottom:30px;
            }

            & p {
                font-size:20px;
                font-weight:500;
                line-height:164%;
                letter-spacing:-0.2px;
                color:#fff;
            }
        }

        .img-box {
            text-align:right;
            padding-inline-end:80px;
            position:absolute;
            right:-30px;
            bottom:0;

            & img {
                display:block;
                will-change:transform;
                backface-visibility:hidden;
                transform-origin:center center;
            }

            &:hover {
                & img {
                    animation:flip-y 0.4s ease-in-out forwards;
                }
            }

        }

        .flex-box {
            display:flex;
            column-gap:60px;

            .item {
                & img {
                    display:block;
                    will-change:transform;
                    backface-visibility:hidden;
                    transform-origin:center center;
                }

                &:hover {
                    & img {
                        animation:flip-y 0.4s ease-in-out forwards;
                    }
                }
            }
        }
        .box1 {
            .item2 {
                margin-top:147px;
            }
        }

        .box2 {
            .item1 {
                margin-top:-50px;
            }
            .item2 {
                margin-top:90px;
            }
        }
    }

    .section8 {
        padding:134px 0;
        text-align:center;

        & h3 {
            line-height:180%;
            margin-bottom:0;
        }

        .img-box {
            margin-top:85px;
            text-align:center;
            & img {
                display: inline-block;
                will-change: transform;
            }

            &:hover {
                & img {
                    animation: float-updown-hover 1s ease-in-out infinite;
                }
            }
        }

        .more-box {
            margin-top:50px;

            & a {
                background:#016DEE;
                border-radius:50px;
                padding:30px 40px;
                display:flex;
                align-items:center;
                column-gap:7px;
                width:325px;
                justify-content:center;
                margin:0 auto;

                & span {
                    color:#fff;
                    font-size:16px;
                    font-weight:700;
                }
            }
        }
    }

    .section9 {
        background:url('/theme/basic/img/main/main-38.png') no-repeat;
        height:1059px;
        background-size:cover;
        padding:130px 0;

        .img-box {
            margin-top:70px;
        }

        .more-box {
            margin-top:40px;

            & a {
                background:#016DEE;
                border-radius:50px;
                padding:30px 40px;
                display:flex;
                align-items:center;
                column-gap:7px;
                width:280px;
                margin: 0 auto;

                & span {
                    color:#fff;
                    font-size:16px;
                    font-weight:700;
                }
            }
        }
    }

    .section10 {

        padding:120px 0;

        .contact-box {
            margin-top:35px;
            border-top:solid 2px #000;
            padding-top:30px;

            .row {
                row-gap:35px;

                & label {
                    font-size:21px;
                    font-weight:600;
                    line-height:150%;
                    color:#000;
                    margin-bottom:10px;
                }

                & input[type="text"], input[type="email"], select {
                    border:solid 1px #d9d9d9;
                    height:68px;
                    border-radius:8px;
                    font-size:21px;
                    font-weight:400;


                }

                & input[type="text"]::placeholder, input[type="email"]::placeholder {
                    color:#757575;
                }
            }

            .aggre-box {
                margin-top:35px;
                & p {
                    font-size:22px;
                    font-weight:400;
                    line-height:160%;
                    color:#000;

                    & span {
                        font-weight:600;
                    }
                }

                .check-box {
                    margin-top:15px;

                    .form-check-box {
                        display:flex;
                        align-items:center;
                        column-gap:20px;

                        .form-check {
                            display:flex;
                            align-items:center;
                            column-gap:8px;

                            & input[type="checkbox"] {
                                width:24px;
                                height:24px;
                                border-radius:6px;
                                position:relative;
                                top:-2px;
                            }

                            & label {
                                font-size:22px;
                                font-weight:400;
                                color:#000;
                            }
                        }
                    }
                }
            }

            .submit-box {
                margin-top:40px;
                text-align:center;
                display:flex;
                align-items:center;
                justify-content:center;

                & button {
                    background:#000;
                    color:#fff;
                    padding:18px 20px;
                    border-radius:5px;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    height:60px;
                    min-width:163px;
                    font-size:16px;
                    font-weight:700;
                }
            }
        }
    }

    .section11 {
        padding:115px 0;
        background:#EEF6FF;
        .section-bottom {
            margin-top:60px;

            .nav {
                column-gap:5px;
                border-bottom:solid 1px #d9d9d9;
                & li {
                    flex:1;
                    & button {
                        width:100%;
                        background:#fff;
                        text-align:center;
                        font-size:16px;
                        font-weight:700;
                        border-radius: 15px 15px 0 0;
                        height:55px;
                        color:#000;
                    }

                    .active {
                        background:#006DEE;
                        color:#fff;
                    }
                }
            }

            .tab-content-box {
                margin-top:50px;


                .img-box {
                    & img {
                        background:#fff;
                        border-radius:500px;
                    }
                }
            }
        }
    }

    .modify-section3 {
        background:#EEF6FF;
        padding:120px 0;

        .section-bottom {
            margin-top:80px;

            #tab-nav-1 {
                justify-content:center;
                column-gap:8px;

                & li {
                    & button {
                        border:solid 1px #d9d9d9;
                        border-radius:30px;
                        background:#fff;
                        padding:10px 20px;
                        color:#000;
                        font-size:16px;
                        font-weight:400;
                    }

                    .active {
                        border:0;
                        background:#006DEE;
                        color:#fff;
                    }
                }
            }

            .tab-content-box {
                margin-top:70px;

                .row {
                    align-items:center;

                    & h6 {
                        color:#006DEE;
                        font-size:35px;
                        font-weight:700;
                        letter-spacing:-0.5px;
                        margin-bottom:20px;
                    }

                    & p {
                        color:#545454;
                        font-size:20px;
                        font-weight:600;
                        letter-spacing:-0.5px;
                    }

                    & ul {
                        margin-top:45px;
                        & li {
                            display:flex;
                            align-items:start;
                            column-gap:12px;
                            margin-bottom:10px;

                            & span {
                                color:#222;
                                font-size:22px;
                                font-weight:500;
                                letter-spacing:-0.5px;

                                & img {
                                    position:relative;
                                    top:-3px;
                                }
                            }

                            &:last-child {
                                margin-bottom:0;
                            }
                        }
                    }

                    .left-text-box {
                        padding-left:170px;
                    }
                }
            }
        }


    }

    .step-span {
        text-align:center;
        border:solid 2px #006DEE;
        border-radius:50px;
        padding:6px 23px;
        font-size:30px;
        font-weight:700;
        line-height:150%;
        letter-spacing:-0.5px;
        color:#006DEE;

    }

    .title-h4 {
        font-size:48px;
        font-weight:700;
        color:#222;
        line-height:135%;
        letter-spacing:-0.5px;

        & span {
            color:#006DEE;
        }
    }

    .section-top {
        text-align:center;

        .title-h3 {
            font-size:50px;
            font-weight:700;
            margin-bottom:0;
            color:#222;
            letter-spacing:-0.5px;

            & span {
                color:#3F97FF;
            }
        }

        & p {
            margin-bottom:0;
            font-size:20px;
            font-weight:600;
            color:#545454;
            margin-top:15px;

            & span {
                color:#000;
            }
        }
    }


}


.subpage-wrap {
    background: #F6F8F9;
    padding-block: 84px;

    & h2 {
        font-size:40px;
        font-weight: 700;
        color:#000;
        line-height: 100%;
        margin-block-end: 30px;
        text-align: center;
    }

    .form-inner {
        padding-inline: 50px;
    }
    & input[type="text"]::placeholder, input[type="email"]::placeholder {
        color:#757575;
    }
    & input[type="text"], input[type="email"] {
        border:solid 1px #d9d9d9;
        border-radius:8px;
        height: 48px;
        font-size:16px;
        font-weight:400;
        color:#000;

    }

    .service-wrap {
        .form-box {
            background: #fff;
            padding-block: 70px;
            max-width: 840px;
            margin: 0 auto;

            & h3 {
                font-size:32px;
                font-weight:700;
                color:#000;
                line-height:130%;
                margin-block-end:40px;
            }

            & label {
                font-size:16px;
                font-weight: 700;
                color:#757575;
                line-height: 160%;
                margin-block-end: 13px;

                & span {
                    color:#FF0000;
                    margin-inline-start: 5px;
                }
            }

            & button {
                background: #006DEE;
                color: #fff;
                font-size:15px;
                font-weight: 700;
                min-width:180px;
                height:48px;
                border-radius:8px;
                border:0 !important;
            }

            .form-info-box {
                display: flex;
                align-items: center;
                column-gap: 10px;
            }

            & a {
                color:#006DEE !important;
            }

            .login-a {
                font-size:16px;
                font-weight: 400;
                line-height: 160%;
                display: block;
                margin-block-start: 20px;
                text-align: center;
            }

            & p {
                margin-block-start: 50px;
                color:#A6A6A6;
                font-size:16px;
                font-weight: 400;
                line-height: 160%;
                text-align: center;
            }

            .alert {
                background: #EEF6FF;
                margin-block-start: 50px;
                border-radius:0;

                & span {
                    color:#666;
                    font-size:18px;
                    font-weight:18px;
                    line-height:160%;
                }
            }
        }
    }

    .accession-wrap {


        .form-box {
            background: #fff;
            padding-block: 70px;
            max-width: 840px;
            margin: 0 auto;

            .form-top {
                border-bottom:solid 1px #F5F5F5;
                padding-block-end: 40px;
                margin-block-end: 40px;
            }

            .form-bottom {
                margin-block-end: 40px;
                padding-block-end: 60px;
                border-bottom:solid 1px #F5F5F5;
            }

            .row {
                row-gap: 20px;
            }

            & h3 {
                font-size:32px;
                font-weight:700;
                color:#000;
                line-height:130%;
                margin-block-end:40px;
            }

            & label {
                font-size:16px;
                font-weight: 700;
                color:#757575;
                line-height: 160%;
                margin-block-end: 13px;

                & span {
                    color:#FF0000;
                    margin-inline-start: 5px;
                }
            }






            .aggre-box {
                margin-block-start: 20px;

                & p {
                    font-size:16px;
                    font-weight: 400;
                    line-height: 162%;
                    color:#000;

                    & span {
                        font-weight: 600;
                    }
                }

                .check-box {
                    margin-block-start: 10px;
                    .form-check-box {
                        display: flex;
                        align-items: center;
                        column-gap: 20px;

                        & label {
                            color:#000;
                            font-weight: 400;
                        }

                        & input[type="checkbox"] {
                            width: 20px;
                            height: 20px;
                            border-radius: 6px;
                            position: relative;
                            top: -2px;
                        }
                    }
                }
            }

            .submit-box {
                display: flex;
                align-items: center;
                justify-content: center;
                column-gap: 10px;

                & button {
                    border-radius: 50px;
                    width:180px;
                    height: 48px;
                    font-size:15px;
                    font-weight: 400;
                }

                .cancle-button {
                    border:solid 1px #ccc;
                    color:#000;
                }
                .submit-button {
                    background:#006DEE;
                    color:#fff;
                }
            }
        }

    }
}


@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes sectionZoomOut {
    0% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes float-left {
    0% {
        transform: translateX(-6px) rotate(-2deg);
    }
    50% {
        transform: translateX(0) rotate(0deg);
    }
    100% {
        transform: translateX(-6px) rotate(-2deg);
    }
}

@keyframes float-updown {
    0% {
        transform: translateY(-6px);
    }
    50% {
        transform: translateY(4px);
    }
    100% {
        transform: translateY(-6px);
    }
}

@keyframes float-right {
    0% {
        transform: translateX(6px) rotate(2deg);
    }
    50% {
        transform: translateX(0) rotate(0deg);
    }
    100% {
        transform: translateX(6px) rotate(2deg);
    }
}


@keyframes float-updown-hover {
    0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-6px);
    }
    50% {
        transform: translateY(3px);
    }
    75% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
    }
}


@keyframes flip-y {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}