.visual-section {
    padding: 140px 0 60px;
}

.visual-section .content-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px 0;
}

.visual-slide-wrap {
    width: 100%;
    position: relative;
}

.visual-slide {
    width: 100%;
    height: 480px;
    overflow: hidden;
}

.slick-list,
.slick-track {
    height: 100%;
}

.slide-group {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: var(--borderRadiusMd);
    overflow: hidden;
    display: grid !important;
    grid-template-columns: 580px 700px;
}

.slide-text {
    width: auto;
    padding: 70px 50px 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 40px 0;
}

.first-slide-group .slide-text {
    background-color: #220445;
}

.second-slide-group .slide-text {
    background-color: #131313;
}

.third-slide-group .slide-text {
    background-color: #050E3D;
}

.slide-text .title-group {
    gap: 12px 0;
}

.slide-text .section-title {
    color: var(--colorWhite);
}

.slide-text .desc {
    color: var(--colorGray400);
}

.slide-text .btn {
    border: 1px solid var(--colorWhite);
    color: var(--colorWhite);
    background-color: var(--colorTransparent);
}

.slide-img {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.first-slide-group .slide-img {
    background-image: url(/images/main/slide-first-img.png);
}

.second-slide-group .slide-img {
    background-image: url(/images/main/slide-second-img.png);
}

.third-slide-group .slide-img {
    background-image: url(/images/main/slide-third-img.png);
}

.visual-slide-control {
    position: absolute;
    left: 50px;
    bottom: 50px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0 16px;
}

.slide-page {
    display: flex;
    align-items: center;
    gap: 0 3px;
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    color: var(--colorWhite);
    font-weight: var(--fontWeightExtrabold);
}

.slide-page .slash,
.slide-page .total {
    color: rgba(255, 255, 255, 0.60);
    font-weight: var(--fontWeightMedium);
}

.slide-page .current {
    margin-right: 1px;
}

.visual-menu-box {
    width: 100%;
}

.visual-menu-box ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0 12px;
}

.visual-menu-box ul li {
    width: auto;
    box-sizing: border-box;
    border: 1px solid var(--colorGray300);
    border-radius: var(--borderRadiusSm);
    background-color: var(--colorWhite);
    transition: box-shadow .3s, border .3s;
}

.visual-menu-box ul li a {
    width: 100%;
    padding: 18px 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 8px;
}

.visual-menu-box ul li a p {
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    font-weight: var(--fontWeightBold);
}

.first-section {
    padding: 60px 0;
    background-color: var(--colorGray100);
}

.first-section .content-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px 0;
}

.section-title-text {
    font-size: var(--fontSize3Xl);
    line-height: var(--lineHeight4Xl);
    font-weight: var(--fontWeightExtrabold);
}

.service-box {
    width: 100%;
}

.service-box ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0 12px;
}

.service-box ul li {
    width: 100%;
    background-color: var(--colorWhite);
    border: 1px solid var(--colorGray300);
    box-sizing: border-box;
    border-radius: var(--borderRadiusMd);
    transition: box-shadow .3s, border .3s;
}

.service-box ul li a {
    width: 100%;
    height: 320px;
    padding: 50px 35px 25px 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 40px 0;
}

.service-box .title-group {
    gap: 12px 0;
}

.service-box .title-group p {
    font-size: var(--fontSize4Xl);
    line-height: var(--lineHeight5Xl);
    font-weight: var(--fontWeightExtrabold);
}

.service-box .title-group .desc {
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    color: var(--colorGray700);
}

.service-box ul li a>p {
    display: flex;
    align-items: center;
    gap: 0 2px;
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    color: var(--colorGray700);
}

.service-box ul li a>img {
    position: absolute;
    bottom: 25px;
    right: 35px;
}

.current-ip {
    width: 100%;
    padding: 18px 0;
    border: 2px solid var(--colorPrimary);
    box-sizing: border-box;
    border-radius: var(--borderRadiusSm);
    background-color: var(--colorWhite);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
    font-size: var(--fontSizeXl);
    line-height: var(--lineHeight2Xl);
    color: var(--colorGray700);
    box-shadow: 0 3px 8px 0 rgba(109, 99, 255, 0.12);
}

.current-ip span {
    font-size: var(--fontSize2Xl);
    line-height: var(--lineHeight3Xl);
    font-weight: var(--fontWeightExtrabold);
    color: var(--colorPrimary);
}

.second-section {
    padding: 60px 0 0 0;
}

.second-section .content-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.necessary-group {
    width: 100%;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0 30px;
}

.necessary-box {
    width: auto;
}

.necessary-box ul {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 12px 0;
}

.necessary-box ul li {
    width: auto;
    padding: 24px 28px;
    border: 1px solid var(--colorGray300);
    background-color: var(--colorWhite);
    border-radius: var(--borderRadiusSm);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0 24px;
}

.necessary-box .title-group {
    gap: 6px 0;
}

.necessary-box .title-group p {
    font-size: var(--fontSizeXl);
    line-height: var(--lineHeight2Xl);
    font-weight: var(--fontWeightBold);
}

.necessary-box .title-group span {
    font-size: var(--fontSizeMd);
    line-height: var(--lineHeightLg);
    color: var(--colorGray600);
}

.download-banner-group {
    width: 100%;
    border-radius: 12px;
    padding: 42px 50px;
    box-sizing: border-box;
    background: linear-gradient(91deg, #A011FF -6.45%, #6D63FF 125.71%);
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.banner-text-group {
    display: flex;
    align-items: center;
    gap: 0 16px;
}

.banner-text-group p {
    display: flex;
    align-items: center;
    gap: 0 16px;
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    color: var(--colorGray200);
}

.banner-text-group p span {
    font-size: var(--fontSize3Xl);
    line-height: var(--lineHeight4Xl);
    color: var(--colorWhite);
    font-weight: var(--fontWeightExtrabold);
}

.download-banner-group>a {
    display: flex;
    align-items: center;
    gap: 0 6px;
    padding: 14px 20px 14px 24px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.40);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    color: var(--colorWhite);
    font-weight: var(--fontWeightBold);
}

.third-section {
    padding: 60px 0 0 0;
}

.third-section .content-inner {
    display: grid;
    align-items: flex-end;
    justify-content: space-between;
    grid-template-columns: 1fr 620px;
    gap: 0 30px;
}

.main-support-group {
    width: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 30px 0;
}

.main-support-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-support-top>a {
    display: flex;
    align-items: center;
    gap: 0 2px;
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    color: var(--colorGray700);
}

.main-support-list {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    border: 1px solid var(--colorGray300);
    border-radius: var(--borderRadiusMd);
    background-color: var(--colorWhite);
}

.main-support-list ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px 0;
}

.main-support-list ul li {
    width: auto;
}

.main-support-list ul li a {
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: auto auto;
    gap: 0 8px;
}

.list-title-area {
    width: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px 0;
}

.list-title {
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: flex-start;
    grid-template-columns: auto 1fr;
}

.list-title p {
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    font-weight: var(--fontWeightBold);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.list-title>img {
    margin-right: 10px;
}

.list-date {
    font-size: var(--fontSizeMd);
    line-height: var(--lineHeightLg);
    color: var(--colorGray600);
}

.more-menu-box {
    width: auto;
}

.more-menu-box ul {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.more-menu-box ul li {
    width: auto;
    background-color: var(--colorWhite);
    border: 1px solid var(--colorGray300);
    box-sizing: border-box;
    border-radius: var(--borderRadiusSm);
    transition: box-shadow .3s, border .3s;
}

.more-menu-box ul li a {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 28px;
    display: flex;
    align-items: center;
    gap: 0 18px;
}

.more-menu-box .title-group {
    gap: 4px 0;
}

.more-menu-box .title-group p {
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    font-weight: var(--fontWeightBold);
}

.more-menu-box .title-group span {
    font-size: var(--fontSizeMd);
    line-height: var(--lineHeightLg);
    color: var(--colorGray600);
}

.fourth-section {
    padding: 60px 0 140px 0;
}

.fourth-section .content-inner {
    display: grid;
    align-items: flex-end;
    justify-content: space-between;
    grid-template-columns: 1fr 620px;
    gap: 0 30px;
}

.fourth-section .main-support-list ul {
    gap: 22px 0;
}

.customer-group {
    width: auto;
    height: 300px;
    padding: 40px;
    border-radius: var(--borderRadiusMd);
    background-color: var(--colorGray100);
    border: 1px solid var(--colorGray300);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 20px 0;
}

.customer-group .title-group {
    gap: 10px 0;
}

.customer-group .title-group>p {
    display: flex;
    align-items: center;
    gap: 0 10px;
    font-size: var(--fontSizeXl);
    line-height: var(--lineHeight2Xl);
    font-weight: var(--fontWeightBold);
    color: var(--colorPrimary);
}

.cs-number {
    font-size: var(--fontSize6Xl);
    line-height: var(--lineHeight7Xl);
    color: var(--colorPrimary);
    font-weight: var(--fontWeightExtrabold);
}

.cs-time {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px 0;
}

.cs-time p {
    display: flex;
    align-items: center;
    gap: 0 12px;
}

.cs-time p span {
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightXl);
    color: var(--colorGray700);
}





@media (hover: hover) and (pointer: fine) {
    .visual-menu-box ul li:hover {
        box-shadow:
                0 0 0 1px var(--colorPrimary),
                0 3px 12px 0 rgba(109, 99, 255, 0.12);
        border: 1px solid var(--colorPrimary);
    }

    .service-box ul li:hover {
        border-color: var(--colorPrimary);
        box-shadow:
                0 0 0 1px var(--colorPrimary),
                0 3px 12px 0 rgba(109, 99, 255, 0.12);
    }

    .service-box ul li:hover a>p {
        color: var(--colorPrimary);
    }

    .service-box ul li:hover a>p img {
        content: url(/images/main/apply-arrow-hover.svg);
    }

    .main-support-top>a:hover {
        color: var(--colorBlack);
    }

    .main-support-top>a:hover img {
        content: url(/images/main/detail-icon-hover.svg);
    }

    .main-support-list ul li:hover .list-title p {
        color: var(--colorPrimary);
    }

    .main-support-list ul li:hover a>img {
        content: url(/images/main/list-arrow-hover.svg);
    }

    .more-menu-box ul li:hover {
        border: 1px solid var(--colorPrimary);
        box-shadow:
                0 0 0 1px var(--colorPrimary),
                0 3px 12px 0 rgba(109, 99, 255, 0.12);
    }
}





/* responsive css */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .visual-section {
        padding: 120px 0 60px;
    }

    .visual-slide {
        height: auto;
    }

    .slide-group {
        grid-template-columns: 1fr;
    }

    .slide-text {
        height: 400px;
        padding: 50px 40px;
        gap: 30px 0;
    }

    .slide-img {
        height: 300px;
    }

    .visual-slide-control {
        top: 325px;
        bottom: auto;
        left: 40px;
    }

    .visual-menu-box ul {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .service-box ul {
        grid-template-columns: 1fr;
        gap: 12px 0;
    }

    .current-ip {
        margin-top: -8px;
    }

    .necessary-group {
        margin-top: 20px;
        gap: 0 20px;
    }

    .necessary-box {
        width: auto;
    }

    .necessary-box ul li {
        gap: 0 19px;
    }

    .necessary-box .title-group {
        gap: 6px 0;
    }

    .download-banner-group {
        padding: 36px 40px;
        margin-top: 40px;
    }

    .banner-text-group {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px 0;
    }

    .banner-text-group p {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px 0;
    }

    .third-section {
        padding: 40px 0 0 0;
    }

    .third-section .content-inner {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

    .main-support-group {
        gap: 20px 0;
    }

    .fourth-section {
        padding: 40px 0 80px 0;
    }

    .fourth-section .content-inner {
        grid-template-columns: 1fr;
        gap: 20px 0;
    }

    .customer-group {
        height: auto;
    }
}





@media screen and (max-width: 767px) {
    .visual-section {
        padding: 76px 0 40px;
    }

    .visual-slide {
        height: auto;
    }

    .slide-group {
        grid-template-columns: 1fr;
    }

    .slide-text {
        height: 320px;
        padding: 30px 24px;
        gap: 30px 0;
    }

    .slide-text .title-group {
        gap: 10px 0;
    }

    .slide-img {
        height: 200px;
    }

    .visual-slide-control {
        left: 24px;
        top: 268px;
        bottom: auto;
        gap: 0 10px;
    }

    .visual-slide-control button {
        width: 16px;
    }

    .visual-slide-control button img {
        width: 100%;
    }

    .slide-page {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightMd);
    }

    .visual-menu-box ul {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .visual-menu-box ul li {
        border-radius: 8px;
    }

    .visual-menu-box ul li a {
        padding: 16px;
        gap: 0 6px;
    }

    .visual-menu-box ul li a img {
        width: 20px;
    }

    .visual-menu-box ul li a p {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .first-section {
        padding: 40px 0;
    }

    .first-section .content-inner {
        gap: 10px 0;
    }

    .section-title-text {
        font-size: var(--fontSizeLg);
        line-height: var(--lineHeightXl);
    }

    .service-box ul {
        grid-template-columns: 1fr;
        gap: 12px 0;
    }

    .service-box ul li a {
        height: 278px;
        padding: 30px 24px 20px;
        gap: 30px 0;
    }

    .service-box .title-group {
        gap: 10px 0;
    }

    .service-box .title-group p {
        font-size: var(--fontSize2Xl);
        line-height: var(--lineHeight3Xl);
    }

    .service-box .title-group .desc {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .service-box ul li a>p {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .service-box ul li a>img {
        width: 100px;
        bottom: 20px;
        right: 24px;
    }

    .current-ip {
        margin-top: 2px;
        padding: 16px 0;
        gap: 0 8px;
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .current-ip span {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .second-section {
        padding: 40px 0 0 0;
    }

    .necessary-group {
        margin-top: 12px;
        grid-template-columns: 1fr;
        gap: 8px 0;
    }

    .necessary-box ul {
        gap: 8px 0;
    }

    .necessary-box ul li {
        padding: 20px 18px;
        gap: 0 16px;
    }

    .necessary-box ul li img {
        width: 36px;
    }

    .necessary-box .title-group {
        gap: 2px 0;
    }

    .necessary-box .title-group p {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .necessary-box .title-group span {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightMd);
    }

    .download-banner-group {
        padding: 30px 24px;
        margin-top: 30px;
        align-items: flex-start;
        flex-direction: column;
        gap: 20px 0;
    }

    .banner-text-group {
        gap: 14px 0;
        align-items: flex-start;
        flex-direction: column;
    }

    .banner-text-group>img {
        width: 32px;
    }

    .banner-text-group p {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px 0;
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightMd);
    }

    .banner-text-group p span {
        font-size: var(--fontSizeLg);
        line-height: var(--lineHeightXl);
    }

    .download-banner-group>a {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .third-section {
        padding: 30px 0 0 0;
    }

    .third-section .content-inner {
        grid-template-columns: 1fr;
        gap: 12px 0;
    }

    .main-support-group {
        gap: 12px 0;
    }

    .main-support-top>a {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .main-support-list {
        padding: 30px 24px;
    }

    .main-support-list ul {
        gap: 16px 0;
    }

    .main-support-list ul li a>img{
        width: 16px;
    }

    .list-title{
        grid-template-columns: 1fr;
        gap: 8px 0;
    }

    .list-title p {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .list-title>img {
        margin-right: 0;
    }

    .list-date {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightMd);
    }

    .more-menu-box ul {
        gap: 8px;
    }

    .more-menu-box ul li a {
        padding: 11px 14px;
        gap: 0 8px;
    }

    .more-menu-box ul li a>img{
        width: 40px;
    }

    .more-menu-box .title-group p {
        font-size: var(--fontSizeMd);
        line-height: var(--lineHeightLg);
    }

    .more-menu-box .title-group span {
        display: none;
    }

    .fourth-section {
        padding: 30px 0 60px 0;
    }

    .fourth-section .content-inner {
        grid-template-columns: 1fr;
        gap: 12px 0;
    }

    .fourth-section .main-support-list ul {
        gap: 16px 0;
    }

    .customer-group {
        height: auto;
        padding: 30px 24px;
        gap: 12px 0;
    }

    .customer-group .title-group {
        gap: 8px 0;
    }

    .customer-group .title-group>p {
        gap: 0 6px;
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightMd);
    }

    .customer-group .title-group>p img{
        width: 18px;
    }

    .cs-number {
        font-size: var(--fontSize4Xl);
        line-height: var(--lineHeight5Xl);
    }

    .cs-time {
        gap: 4px 0;
    }

    .cs-time p span {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightMd);
    }
}