@charset "utf-8";
.icon{
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: var(--transition);
}
.icon.lg{
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}
.icon.sm{
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
}
.icon.xs{
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
}

.icon-global-grey{
    background-image: url(../../images/portal/icon/icon-global-grey.svg);
}
.icon-minus-white{
    background-image: url(../../images/portal/icon/icon-minus-white.svg);
}
.icon-plus-rounded-white{
    background-image: url(../../images/portal/icon/icon-plus-rounded-white.svg);
}
.icon-plus-white{
    background-image: url(../../images/portal/icon/icon-plus-white.svg);
}
.icon-plus-circle{
    background-image: url(../../images/portal/icon/icon-plus-circle.svg);
}
.icon-plus2-white{
    background-image: url(../../images/portal/icon/icon-plus2-white.svg);
}
.icon-plus2-primary-dark{
    background-image: url(../../images/portal/icon/icon-plus2-primary-dark.svg);
}
.icon-user-white{
    background-image: url(../../images/portal/icon/icon-user-white.svg);
}
.icon-user{
    background-image: url(../../images/portal/icon/icon-user.svg);
}
.icon-login-white{
    background-image: url(../../images/portal/icon/icon-login-white.svg);
}
.icon-logout-white{
    background-image: url(../../images/portal/icon/icon-logout-white.svg);
}
.icon-scrolltop-white{
    background-image: url(../../images/portal/icon/icon-scrolltop-white.svg);
}
.icon-outlink-white{
    background-image: url(../../images/portal/icon/icon-outlink-white.svg);
}
.icon-lock-white{
    background-image: url(../../images/portal/icon/icon-lock-white.svg);
}
.icon-lock-grey{
    background-image: url(../../images/portal/icon/icon-lock-grey.svg);
}
.icon-file-primary{
    background-image: url(../../images/portal/icon/icon-file-primary.svg);
}
.icon-info-grey{
    background-image: url(../../images/portal/icon/icon-info-grey.svg);
}
.icon-info-primary{
    background-image: url(../../images/portal/icon/icon-info-primary.svg);
}
.icon-info-danger{
    background-image: url(../../images/portal/icon/icon-info-danger.svg);
}
.icon-arrow-white{
    background-image: url(../../images/portal/icon/icon-arrow-white.svg);
}
.icon-chevron-white{
    background-image: url(../../images/portal/icon/icon-chevron-white.svg);
}
.icon-chevron-left-white{
    background-image: url(../../images/portal/icon/icon-chevron-left-white.svg);
}
.icon-chevron-up-primary{
    background-image: url(../../images/portal/icon/icon-chevron-up-primary.svg);
}
.icon-chevron-down-primary{
    background-image: url(../../images/portal/icon/icon-chevron-down-primary.svg);
}
.icon-chevron-primary-dark{
    background-image: url(../../images/portal/icon/icon-chevron-primary-dark.svg);
}
.icon-chevron-left-primary-dark{
    background-image: url(../../images/portal/icon/icon-chevron-left-primary-dark.svg);
}
.icon-file-search{
    background-image: url(../../images/portal/icon/icon-file-search.svg);
}
.icon-download-white{
    background-image: url(../../images/portal/icon/icon-download-white.svg);
}
.icon-search-white{
    background-image: url(../../images/portal/icon/icon-search-white.svg);
}
.icon-global-frame-primary{
    background-image: url(../../images/portal/icon/icon-global-frame-primary.svg);
}
.icon-tel-frame-primary{
    background-image: url(../../images/portal/icon/icon-tel-frame-primary.svg);
}
.icon-location-frame-primary-light{
    background-image: url(../../images/portal/icon/icon-location-frame-primary-light.svg);
}
.icon-date-frame-primary-light{
    background-image: url(../../images/portal/icon/icon-date-frame-primary-light.svg);
}
.icon-prev{
    background-image: url(../../images/portal/icon/icon-prev.svg);
}
.icon-next{
    background-image: url(../../images/portal/icon/icon-next.svg);
}
.icon-pause{
    background-image: url(../../images/portal/icon/icon-pause.svg);
}
.icon-play{
    background-image: url(../../images/portal/icon/icon-play.svg);
}
.icon-reset-primary{
    background-image: url(../../images/portal/icon/icon-reset-primary.svg);
}
.icon-comment{
    background-image: url(../../images/portal/icon/icon-comment.svg);
}

.icon-quick{
    width: clamp(24px, 4rem, 4rem);
    height: clamp(24px, 4rem, 4rem);
}
.icon-quick1{
    background-image: url(../../images/portal/icon/icon-quick1.svg);
}
.icon-quick2{
    background-image: url(../../images/portal/icon/icon-quick2.svg);
}
.icon-quick3{
    background-image: url(../../images/portal/icon/icon-quick3.svg);
}

.icon-main-quick{
    width: clamp(32px, 4.8rem, 4.8rem);
    min-width: clamp(32px, 4.8rem, 4.8rem);
    height: clamp(32px, 4.8rem, 4.8rem);
}
.icon-main-quick1{
    background-image: url(../../images/portal/icon/icon-main-quick1.svg);
}
.icon-main-quick2{
    background-image: url(../../images/portal/icon/icon-main-quick2.svg);
}
.icon-main-quick3{
    background-image: url(../../images/portal/icon/icon-main-quick3.svg);
}
.icon-main-quick4{
    background-image: url(../../images/portal/icon/icon-main-quick4.svg);
}

.icon-join{
    width: clamp(24px, 4rem, 4rem);
    height: clamp(24px, 4rem, 4rem);
}
.icon-join1{
    background-image: url(../../images/portal/icon/icon-join1.svg);
}
.icon-join2{
    background-image: url(../../images/portal/icon/icon-join2.svg);
}
.icon-join3{
    background-image: url(../../images/portal/icon/icon-join3.svg);
}
.icon-join4{
    background-image: url(../../images/portal/icon/icon-join4.svg);
}
.join-step>li.active .icon-join1{
    background-image: url(../../images/portal/icon/icon-join1-active.svg);
}
.join-step>li.active .icon-join2{
    background-image: url(../../images/portal/icon/icon-join2-active.svg);
}
.join-step>li.active .icon-join3{
    background-image: url(../../images/portal/icon/icon-join3-active.svg);
}
.join-step>li.active .icon-join4{
    background-image: url(../../images/portal/icon/icon-join4-active.svg);
}
.join-step>li.done .icon-join{
    background-image: url(../../images/portal/icon/icon-join-check.svg) !important;
}

.icon-survey1{
    background-image: url(../../images/portal/icon/icon-survey1.svg);
}
.icon-survey2{
    background-image: url(../../images/portal/icon/icon-survey2.svg);
}
.icon-survey3{
    background-image: url(../../images/portal/icon/icon-survey3.svg);
}
.icon-survey4{
    background-image: url(../../images/portal/icon/icon-survey4.svg);
}
.icon-survey5{
    background-image: url(../../images/portal/icon/icon-survey5.svg);
}
.control-primary input[type="radio"]:checked + label .icon-survey1{
    background-image: url(../../images/portal/icon/icon-survey1-active.svg);
}
.control-primary input[type="radio"]:checked + label .icon-survey2{
    background-image: url(../../images/portal/icon/icon-survey2-active.svg);
}
.control-primary input[type="radio"]:checked + label .icon-survey3{
    background-image: url(../../images/portal/icon/icon-survey3-active.svg);
}
.control-primary input[type="radio"]:checked + label .icon-survey4{
    background-image: url(../../images/portal/icon/icon-survey4-active.svg);
}
.control-primary input[type="radio"]:checked + label .icon-survey5{
    background-image: url(../../images/portal/icon/icon-survey5-active.svg);
}

.icon-chat-ai{
    width: clamp(32px, 4.8rem, 4.8rem);
    height: clamp(32px, 4.8rem, 4.8rem);
    background-image: url(../../images/portal/icon/icon-chat-ai.svg);
}

.icon-scroll-arrow{
    position: relative;
}
.icon-scroll-arrow::before,
.icon-scroll-arrow::after,
.icon-scroll-arrow>span{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .1;
    animation: scrollArrow 1.2s ease-in-out infinite;
}
.icon-scroll-arrow::before,
.icon-scroll-arrow::after{
    content: "";
}
.icon-scroll-arrow::before{
    background-image: url(../../images/portal/icon/icon-scroll-arrow1.svg);
}
.icon-scroll-arrow::after{
    background-image: url(../../images/portal/icon/icon-scroll-arrow2.svg);
    animation-delay: .4s;
}
.icon-scroll-arrow>span{
    background-image: url(../../images/portal/icon/icon-scroll-arrow3.svg);
    animation-delay: .8s;
}
@keyframes scrollArrow{
    0%{
        opacity: .1;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: .1;
    }
}
@media screen and (min-width: 1201px){    
    .main-quick-btn:hover .icon-main-quick1{
        background-image: url(../../images/portal/icon/icon-main-quick1-active.svg);
    }
    .main-quick-btn:hover .icon-main-quick2{
        background-image: url(../../images/portal/icon/icon-main-quick2-active.svg);
    }
    .main-quick-btn:hover .icon-main-quick3{
        background-image: url(../../images/portal/icon/icon-main-quick3-active.svg);
    }
    .main-quick-btn:hover .icon-main-quick4{
        background-image: url(../../images/portal/icon/icon-main-quick4-active.svg);
    }
}
@media screen and (max-width: 1028px){
    .icon-quick{
        width: var(--icon-size);
        height: var(--icon-size);
    }
    .icon-quick3 {
        background-image: url(../../images/portal/icon/icon-quick3-white.svg);
    }
}