/* visual-section */
.visual-section {
    padding: 50px 0 0;
}

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

.visual-left-group {
    width: auto;
    height: 460px;
    border-radius: var(--borderRadiusSm);
    background: linear-gradient(131deg, #FEECAF 17.16%, #FCE28C 54.83%, #FFD95D 90.32%);
    padding: 60px 10px 66px 60px;
    box-sizing: border-box;
    position: relative;
}

.visual-left-group>img {
    position: absolute;
    bottom: 30px;
    right: 10px;
}

.visual-title-group {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
}

.visual-title-group .title-group {
    gap: 14px 0;
}

.visual-title-group .title-group>span {
    font-size: var(--fontSizeMd);
    line-height: var(--lineHeightMd);
    font-weight: var(--fontWeightBold);
}

.visual-right-group {
    width: auto;
    height: 460px;
    background-color: var(--colorPrimary100);
    border-radius: var(--borderRadiusSm);
    padding: 40px 30px;
    box-sizing: border-box;
}

.login-group {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
}

.login-group .group-title {
    width: 100%;
    font-size: var(--fontSizeXl);
    line-height: var(--lineHeightXl);
    display: flex;
    align-items: center;
    gap: 0 10px;
}

.login-inner-group {
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

.login-group .btn-group {
    width: 100%;
}

.login-group.hide {
    display: none;
}

.login-info-group{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid var(--colorPrimary);
    border-radius: var(--borderRadiusXs);
    background-color: var(--colorWhite);
    word-break: break-all;
}

.user-id{
    width: 100%;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorGray200);
    color: var(--colorGray400);
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightBase);
}

.user-id span{
    font-size: var(--fontSizeLg);
    line-height: var(--lineHeightLg);
}

.user-point{
    width: 100%;
    padding-top: 14px;
    display: flex;
    align-items: center;
    gap: 0 6px;
    color: var(--colorGray400);
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightBase);
}
/* visual-section */


/* first-section */
.first-section {
    padding: 60px 0 0;
}

.service-box {
    width: 100%;
}

.service-box ul {
    width: 100%;
    display: grid;
    align-items: flex-start;
    justify-content: center;
    grid-template-columns: 120px 120px 120px 120px 120px 120px;
    gap: 0 30px;
}

.service-box ul li a {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px 0;
    font-size: var(--fontSizeBase);
    line-height: var(--lineHeightBase);
    font-weight: var(--fontWeightBold);
}
/* first-section */


/* second-section */
.second-section {
    padding: 100px 0 0;
}

.second-section .content-inner {
    display: grid;
    align-items: flex-start;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0 40px;
}

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

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

.main-list-top .group-title {
    font-size: var(--fontSizeMd);
    line-height: var(--lineHeightMd);
    font-weight: var(--fontWeightBold);
}

.main-list-top a {
    display: flex;
    align-items: center;
    gap: 0 2px;
    font-size: var(--fontSizeSm);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightSm);
    color: var(--colorGray400);
}
/* second-section */


/* third-section */
.third-section {
    padding: 80px 0 0;
}

.third-section .content-inner {
    height: 140px;
    background-color: var(--colorPrimary100);
    border-radius: var(--borderRadiusSm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 30px;
}

.third-section .content-inner>p {
    font-size: var(--fontSizeMd);
    font-weight: var(--fontWeightBold);
    line-height: var(--lineHeightMd);
}

.ip-search-group {
    width: 360px;
    height: 56px;
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 0 10px;
    padding: 7px 12px 7px 8px;
    box-sizing: border-box;
    background-color: var(--colorWhite);
    border-radius: var(--borderRadiusLg);
    border: 2px solid var(--colorPrimary);
}

.ip-search-group .input-label {
    width: auto;
    height: 100%;
}

.ip-search-group .input-label input {
    border: 0;
    font-size: var(--fontSizeMd);
    font-weight: var(--fontWeightBold);
}

.ip-search-group .input-label input:focus {
    border: 0;
}

.ip-search-group .read-only{
    width: auto;
    height: 100%;
    background-color: var(--colorTransparent);
    border: 0;
    font-size: var(--fontSizeMd);
    font-weight: var(--fontWeightBold);
    color: var(--colorBlack);
}
/* third-section */


/* fourth-section */
.fourth-section {
    padding: 80px 0 140px;
}

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

.vpn-service-box {
    width: auto;
}

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

.vpn-service-box ul li {
    width: auto;
    background-color: var(--colorGray100);
    border-radius: var(--borderRadiusSm);
    transition: background-color .5s;
}

.vpn-service-box ul li a {
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px 0;
}

.vpn-service-box .title-group {
    text-align: center;
}
/* fourth-section */





@media (hover: hover) and (pointer: fine) {
    .service-box ul li a:hover {
        color: var(--colorPrimary);
    }

    .static a:hover img {
        content: url(/images/main/main-static-hover.svg);
    }

    .dynamic a:hover img {
        content: url(/images/main/main-dynamic-hover.svg);
    }

    .ticket a:hover img {
        content: url(/images/main/main-ticket-hover.svg);
    }

    .use a:hover img {
        content: url(/images/main/main-use-hover.svg);
    }

    .notice a:hover img {
        content: url(/images/main/main-notice-hover.svg);
    }

    .remote a:hover img {
        content: url(/images/main/main-remote-hover.svg);
    }

    .main-list-top a:hover {
        color: var(--colorPrimary);
    }

    .main-list-top a:hover img {
        content: url(/images/common/all-view-hover.svg);
    }

    .vpn-service-box ul li:hover {
        background-color: var(--colorPrimary);
    }

    .vpn-service-box ul li:hover .group-title,
    .vpn-service-box ul li:hover .desc {
        color: var(--colorWhite);
    }
}





/* responsive css */
@media screen and (min-width: 768px) and (max-width: 1279px) {

    /* visual-section */
    .visual-section {
        padding: 0;
    }

    .visual-section .content-inner {
        width: 100%;
        display: block;
        gap: 0 60px;
    }

    .visual-left-group {
        width: 100%;
        height: 380px;
        border-radius: 0;
        padding: 0 40px;
    }

    .visual-left-group>img {
        width: 320px;
        bottom: 0;
        right: 40px;
    }

    .visual-title-group {
        justify-content: center;
        gap: 120px 0;
    }

    .visual-title-group .title-group>span {
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .visual-right-group {
        display: none;
    }

    /* visual-section */


    /* first-section */
    .first-section {
        padding: 50px 0 0;
    }

    .service-box ul {
        justify-content: space-between;
        grid-template-columns: 100px 100px 100px 100px 100px 100px;
        gap: 0;
    }

    .service-box ul li a {
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .service-box ul li a img {
        width: 44px;
    }

    /* first-section */


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

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

    /* second-section */


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

    .third-section .content-inner {
        height: 120px;
    }

    .third-section .content-inner>p {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightBase);
    }

    .ip-search-group {
        width: 330px;
        height: 48px;
        grid-template-columns: 1fr 32px;
        padding: 7px 10px 7px 4px;
    }

    .ip-search-group>img {
        width: auto;
    }

    .ip-search-group .input-label input {
        font-size: var(--fontSizeBase);
    }

    .ip-search-group .read-only{
        font-size: var(--fontSizeBase);
    }
    /* third-section */


    /* fourth-section */
    .fourth-section {
        padding: 60px 0 100px;
    }

    .vpn-service-box ul {
        gap: 0 10px;
    }

    .vpn-service-box ul li a {
        padding: 60px 30px 40px;
    }

    .vpn-service-box ul li a>img {
        width: 60px;
    }

    .vpn-service-box .group-title{
        font-size: var(--fontSizeLg);
        line-height: var(--lineHeightLg);
    }
    /* fourth-section */
}

@media screen and (max-width: 767px) {

    /* visual-section */
    .visual-section {
        padding: 0;
    }

    .visual-section .content-inner {
        width: 100%;
        display: block;
        gap: 0;
    }

    .visual-left-group {
        width: 100%;
        height: auto;
        border-radius: 0;
        padding: 40px 15px 0;
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        gap: 18px 0;
    }

    .visual-left-group>img {
        width: 250px;
        position: relative;
        bottom: auto;
        right: auto;
    }

    .visual-title-group {
        width: 100%;
        height: auto;
        gap: 30px 0;
    }

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

    .visual-title-group .title-group>span {
        font-size: var(--fontSizeSm);
        line-height: var(--lineHeightSm);
    }

    .visual-right-group {
        display: none;
    }

    /* visual-section */


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

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

    .service-box ul li a {
        gap: 8px 0;
        text-align: center;
        font-size: var(--fontSizeXs);
        line-height: var(--lineHeightXs);
    }

    .service-box ul li a img {
        width: 44px;
    }

    /* first-section */


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

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

    .main-list-top .group-title {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightBase);
    }

    /* second-section */


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

    .third-section .content-inner {
        width: 100%;
        height: auto;
        padding: 30px 0 40px;
        border-radius: 0;
        gap: 16px;
        flex-direction: column;
    }

    .third-section .content-inner>p {
        font-size: var(--fontSizeBase);
        line-height: var(--lineHeightBase);
    }

    .ip-search-group {
        width: calc(100% - 30px);
        height: 48px;
        grid-template-columns: 1fr 32px;
        padding: 7px 10px 7px 4px;
    }

    .ip-search-group>img {
        width: auto;
    }

    .ip-search-group .input-label input {
        font-size: var(--fontSizeBase);
    }

    .ip-search-group .read-only{
        font-size: var(--fontSizeBase);
    }
    /* third-section */


    /* fourth-section */
    .fourth-section {
        padding: 60px 0 80px;
    }

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

    .vpn-service-box ul li a {
        padding: 40px 20px 30px;
    }

    .vpn-service-box ul li a>img {
        width: 60px;
    }

    .vpn-service-box .btn {
        min-width: 100%;
    }
    /* fourth-section */
}