/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@import url('https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css');
@font-face {
    font-family: 'Gmarket Sans';
    src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
         url('http://script.ebay.co.kr/fonts/GmarketSansBold.woff2') format('woff2'),
         url('http://script.ebay.co.kr/fonts/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: "pretendard", sans-serif;
    color: #1D1E23;
}

h1, h2, h3, h4, h5, h6, span, a {
    font-family: "pretendard", sans-serif;
    word-break: keep-all;
}

a {
    text-decoration: none;
}

a:hover {
    color: #002ED0;
    text-decoration: none;
}


/* color */
.gray-1000 {
    color: #191f28;
}

.gray-900 {
    color: #3a3b45;
}

.gray-800 {
    color: #5a5c69;
}

.gray-700 {
    color: #6e707e;
}

.gray-600 {
    color: #858796;
}

.gray-500 {
    color: #b7b9cc;
}

.gray-400 {
    color: #d1d3e2;
}

.gray-300 {
    color: #dddfeb;
}

.gray-200 {
    color: #eaecf4;
}

.gray-100 {
    color: #f8f9fc;
}

.white-100 {
    color: #fff !important;
}

.primary-800 {
    color: #002ED0;
}

.primary-600 {
    color: #1B4AF0;
}

.primary-500 {
    color: #2D5BFF;
}

.primary-400 {
    color: #6C8CFF;
}

.primary-300 {
    color: #96ADFF;
}

.primary-200 {
    color: #ECF0FF;
}

.primary-150 {
    color: #F5F6FA;
}

.primary-100 {
    color: #FBFCFF;
}

.purple-500 {
    color: #7034E4;
}

.neonGreen-500 {
    color: #7EFBF5;
}

.red-500 {
    color: #FF3030;
}

.bg-white {
    background-color: #fff;
}

.bg-gray-100 {
    background-color: #f8f9fc;
}

.bg-gray-200 {
    background-color: #EAECF4;
}

.bg-primary-100 {
    background-color: #FBFCFF;
}

.bg-primary-150 {
    background-color: #F5F6FA;
}

.bg-primary-300 {
    background-color: #ECF0FF;
}

.bg-primary-400 {
    background-color: #96ADFF;
}

.bg-primary-600 {
    background-color: #1B4AF0;
}

.bg-primary-800 {
    background-color: #002ED0;
}

.bg-gradient-1 {
    background: -webkit-linear-gradient(284.1deg, #b266ff, #002ED0);
}

.bg-purple-500 {
    background: #7034E4 !important;
}

.bg-neonGreen-100 {
    background: #E5FEFD;
}

.bg-neonGreen-200 {
    background: #D9FEFC;
}

.bd-lavender {
    background-color: #d2d2ff;
}


/* font-weight */
.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

/* Typography */
h1 {
    font-size: 54px;
    letter-spacing: -0.0rem;
}

h2 {
    font-size: 48px;
    letter-spacing: -0.02rem;
}

h3 {
    font-size: 36px;
    letter-spacing: -0.02rem;
}

h4 {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: -0.015rem;
}

h5 {
    font-size: 20px;
    line-height: 1.6;
}

h6 {
    font-size: 18px;
}

p {
    font-size: 16px;
}

.float-right {
    float: right;
}

.flex-wrap {
    flex-wrap: wrap;
}

.br-m-none br {
    display: inline;
}

/* width 고정 */

.w-90px {
    width: 90px !important;
}
.w-100px {
    width: 100px !important;
}
.w-140px {
    width: 140px !important;
}
.w-160px {
    width: 160px !important;
}
.w-180px {
    width: 180px !important;
}
.w-250px {
    width: 250px !important;
}

/* buttons */
.taxbot-btn {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.65;
    border-radius: .25rem;
}

.taxbot-btn-md {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    border-radius: .25rem;
}

.taxbot-btn-lg {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.65;
    border-radius: .25rem;
}

.taxbot-btn-xl {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
    border-radius: .25rem;
}

.taxbot-btn-100 {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
    border-radius: .25rem;
}


.btn-primary {
    background: #2D5BFF !important;
    color: #fff !important;
    border: solid 1px #2D5BFF !important;
}

.btn-primary:hover {
    background: #1B4AF0 !important;
    color: #fff !important;
    border: solid 1px #2D5BFF !important;
}

.btn-primary:active {
    background: #1B4AF0 !important;
    color: #fff !important;
    border: solid 1px #2D5BFF !important;
}

.btn-soft-primary {
    background: #6C8CFF !important;
    color: #fff !important;
    border: solid 1px #6C8CFF !important;
}

.btn-soft-primary:hover {
    background: #446CFF !important;
    color: #fff !important;
    border: solid 1px #446CFF !important;
}

.btn-soft-primary:active {
    background: #446CFF !important;
    color: #fff !important;
    border: solid 1px #446CFF !important;
}

.btn-secondary {
    background: #ECF0FF !important;
    color: #1B4AF0 !important;
    border: solid 1px #ECF0FF !important;
}

.btn-secondary:hover {
    background: #E0E6FF !important;
    color: #1B4AF0 !important;
    border: solid 1px #E0E6FF !important;
}

.btn-secondary:active {
    background: #E0E6FF !important;
    color: #1B4AF0 !important;
    border: solid 1px #E0E6FF !important;
}

.btn-gray {
    background: #EAECF4 !important;
    color: #858796 !important;
    border: solid 1px #E0E6FF !important;
}

.btn-gray:hover {
    background: #DDDFEB !important;
    color: #858796 !important;
    border: solid 1px #DDDFEB !important;
}

.btn-gray:active {
    background: #DDDFEB !important;
    color: #858796 !important;
    border: solid 1px #DDDFEB !important;
}

.btn-del {
    background: #404E67;
    color: #fff;
}

.btn-del:hover {
    background: #313c4f;
}

.btn-del:active {
    background: #2c3648;
}

.btn-outline-primary {
    border: solid 1px #2D5BFF !important;
    background: #fff !important;
    color: #2D5BFF !important;
}

.btn-outline-primary:hover {
    border: solid 1px #1B4AF0 !important;
    background: #fff !important;
    color: #1B4AF0 !important;
}

.btn-outline-primary:active {
    border: solid 1px #1B4AF0 !important;
    background: #fff !important;
    color: #1B4AF0 !important;
}

.btn-outline-gray {
    border: solid 1px #EAECF4 !important;
    background: #fff !important;
    color: #858796 !important;
}

.btn-outline-gray:hover {
    border: solid 1px #DDDFEB;
    background: #fff !important;
    color: #858796 !important;
}

.btn-outline-gray:active {
    border: solid 1px #DDDFEB;
    background: #fff !important;
    color: #858796 !important;
}


.btn-primary-1 {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 16px 32px;
    border: solid 1px #2D5BFF;
    border-radius: 40px;
    transition: 0.3s;
    color: #fff;
    background: #2D5BFF;
    box-shadow: 0 2px 2px rgba(22, 103, 223, 0.4);
}

.btn-primary-1:hover {
    color: #fff;
    background: #1B4AF0;
    box-shadow: 0 8px 18px rgba(22, 103, 223, 0.45);
    transform: translateY(-7px);
}


.btn-primary-2 {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.05rem;
    display: inline-block;
    padding: 12px 20px;
    border-radius: 16px;
    transition: 0.3s;
    color: #fff;
    background: #2D5BFF;
    box-shadow: 0 8px 18px rgba(22, 103, 223, 0.0);
}

.btn-primary-2 i {
    margin-left: 1.6rem;
}

.btn-primary-2:hover {
    color: #fff;
    background: #1B4AF0;
    box-shadow: 0 8px 18px rgba(22, 103, 223, 0.45);
    transform: translateY(-2px);
}


.btn-primary-3 {
    font-weight: 600;
    font-size: 20px;
    display: inline-block;
    padding: 18px 80px;
    border: solid 1px #2D5BFF;
    border-radius: 40px;
    transition: 0.3s;
    color: #fff;
    background: #2D5BFF;
    box-shadow: 0 2px 2px rgba(22, 103, 223, 0.4);
}

.btn-primary-3:hover {
    color: #fff;
    background: #1B4AF0;
    box-shadow: 0 8px 18px rgba(22, 103, 223, 0.45);
    transform: translateY(-7px);
}

.btn-primary-w {
    letter-spacing: 1px;
    display: inline-block;
    padding: 16px 40px;
    border-radius: 40px;
    transition: 0.4s;
    border: solid 2px #fff;
    box-shadow: 0 2px 2px rgba(0, 33, 82, 0.2);
    font-weight: 800;
    font-size: 18px;
    color: #fff;
}


.btn-primary-100 {
    font-weight: 600;
    font-size: 20px;
    display: inline-block;
    padding: 18px 80px;
    border: solid 1px #2D5BFF;
    border-radius: 40px;
    transition: 0.3s;
    color: #fff;
    background: #2D5BFF;
    box-shadow: 0 2px 2px rgba(22, 103, 223, 0.4);
    width: 100%;
}

.btn-primary-100:hover {
    color: #fff;
    background: #1B4AF0;
    box-shadow: 0 8px 18px rgba(22, 103, 223, 0.45);
    transform: translateY(-7px);
}

.btn-primary-3:hover {
    color: #fff;
    background: #1B4AF0;
    box-shadow: 0 8px 18px rgba(22, 103, 223, 0.45);
    transform: translateY(-7px);
}

.btn-primary-w:hover {
    transform: translateY(-7px);
    color: #fff;
    background-color: #0028ba70;
    border: solid 2px rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 34px #0028b980; /* middle magenta */
}

.btn-neonGreen {
    font-size: 18px;
    letter-spacing: 0px;
    display: inline-block;
    padding: 16px 24px;
    font-weight: 700;
    border: solid 1px #7EFBF5;
    border-radius: 40px;
    transition: 0.3s;
    color: #7034E4;
    background: #7EFBF5;
    box-shadow: 0 2px 2px rgba(80, 0, 183, 0.4);
}

.btn-neonGreen:hover {
    color: #7034E4;
    background: #00FFF3;
    box-shadow: 0 8px 18px rgba(70, 0, 161, 0.8);
    transform: translateY(-7px);
}

.btn-outline-neonGreen {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0px;
    display: inline-block;
    padding: 16px 32px;
    border: solid 2px #7EFBF5;
    border-radius: 40px;
    transition: 0.3s;
    color: #7EFBF5;
    background: transparent;
    box-shadow: 0 2px 2px rgba(80, 0, 183, 0.4);
}

.btn-outline-neonGreen:hover {
    color: #00FFF3;
    border: solid 2px #00FFF3;
    box-shadow: 0 8px 18px rgba(70, 0, 161, 0.8);
    transform: translateY(-7px);
}

.btn-purple-xs {
    padding: 8px 14px;
    border-radius: 24px;
    line-height: 1;
    color: #fff;
    font-size: 18px !important;
    font-weight: 600 !important;
    background-color: #6C19FF !important;
    border: 2px solid #6C19FF !important;
}

@media (min-width: 0px) and (max-width: 768px) {
    .btn-purple-xs {
        padding: 8px 8px;
        font-size: 15px !important;
    }
}

.btn-purple-80 {
    font-size: 18px;
    letter-spacing: 0px;
    display: inline-block;
    padding: 16px 50px;
    font-weight: 700;
    border: solid 1px #6C19FF;
    border-radius: 40px;
    transition: 0.3s;
    color: #7EFBF5;
    background: #6C19FF;
    box-shadow: 0 2px 2px rgba(80, 0, 183, 0.4);
}

.btn-purple-80:hover {
    color: #7EFBF5;
    background: #5400EA;
    transform: translateY(-4px);
}


.btn-modal-footer-type1 {
    border: solid 1px #DDDFEB;
    background-color: #fff;
    color: #6E707E;
    padding: 1rem;

}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    background: #96ADFF;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: #2D5BFF;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# kakao button
--------------------------------------------------------------*/
.kakao-btn {
    position: fixed;
    right: 15px;
    bottom: 75px;
    z-index: 996;
    background: #FAE100;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    transition: all 0.4s;
    /* box-shadow: 0px 2px 6px rgba(0, 22, 101, 0.2); */
}

.kakao-btn img {
    width: 24px;
}

.kakao-btn:hover {
    background: #FAE100;
    color: #fff;
}

.kakao-btn.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# prize button
--------------------------------------------------------------*/
.prize-btn {
    position: fixed;
    width: 150px;
    height: auto;
    top: 100px;
    right: 20px;
    background-color: #fff;
    border: solid 0px #f05a46;
    padding: 0;
    border-radius: 0px;
    z-index: 996;
}

.prize-btn img {
    width: 150px;
    height: 243px;
}


@media (min-width: 0px) and (max-width: 768px) {
    .prize-btn {
        position: fixed;
        width: 80px;
        height: auto;
        top: 70px;
        right: 20px;
        background-color: #fff;
        border: solid 0px #f05a46;
        padding: 0;
        border-radius: 0px;
        z-index: 996;
    }

    .prize-btn img {
        width: 80px;
        height: auto;
    }
}


/*--------------------------------------------------------------
# banner button
--------------------------------------------------------------*/

.banner {
    background: #009579;
    width: 100%;
}

.banner__content {
    padding: 16px;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.banner__text {
    flex-grow: 1;
    line-height: 1.4;
    font-family: "Quicksand", sans-serif;
}

/*--------------------------------------------------------------
# Popup Window twobutton
--------------------------------------------------------------*/

#pop_bankChange {
    position: absolute;
    top: 88px;
    right: 60.6%;
    z-index: 900;
}

.popbank {
    position: relative;
}

.popbank img {
    width: 568px;
}

.btn-white-r{
    letter-spacing: 0px;
    font-weight: 800;
    border: solid 1px #fff;
    border-radius: 40px;
    transition: 0.3s;
    color: #002ED0;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 44, 199, 0.9);
    line-height: 1;
}

.popbank .button1 {
    position: absolute;
    bottom: 26px;
    left: 40px;
    display: block;
    font-size: 18px;
    padding: 14px 32px;
    width: 234px;
}

.popbank .button2 {
    position: absolute;
    bottom: 26px;
    left: 294px;
    display: block;
    font-size: 18px;
    padding: 14px 32px;
    width: 234px;
}

.popbank .button1:hover{
    bottom: 22px;
}

.popbank .button2:hover{
    bottom: 22px;
}

#pop_bankChange .popCheck {
    width: 568px;
    position: relative;
    height: 36px;
    line-height: 36px;
    background: #f1f1f1;
    padding: 0 15px;
    text-align: right;
}

#pop_bankChange .popCheck label {
    padding-left: 28px;
    color: #686868;
    cursor: pointer;
}

#pop_bankChange .popCheck .txt_pop_bankclose {
    padding-left: 15px;
    margin-left: 10px;
    color: #686868;
    background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%
}

#pop_bankChange .popCheck .txt_pop_bankclose:hover {
    text-decoration: none;
}

/*--------------------------------------------------------------
# Popup Window twobutton end
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Popup Window 로그인 페이지 start
--------------------------------------------------------------*/

#pop_bankChange_1 {
    position: absolute;
    top: 100px;
    left: 1%;
    z-index: 900;
}

.popbank {
    position: relative;
}

.popbank img {
    width: 568px;
}

.popbank .boardLink {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -65px;
}

#pop_bankChange_1 .popCheck {
    position: relative;
    height: 36px;
    line-height: 36px;
    background: #f1f1f1;
    padding: 0 15px;
    text-align: right;
}

#pop_bankChange_1 .popCheck label {
    padding-left: 28px;
    color: #686868;
    cursor: pointer;
}

#pop_bankChange_1 .popCheck .txt_pop_bankclose_1 {
    padding-left: 15px;
    margin-left: 10px;
    color: #686868;
    background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%
}

#pop_bankChange_1 .popCheck .txt_pop_bankclose_1:hover {
    text-decoration: none;
}


@media (min-width: 0px) and (max-width: 768px) {
    #pop_bankChange {
        position: absolute;
        top: 60px;
        left: 5%;
        margin-left: 00px;
        z-index: 1000;
    }

    #pop_bankChange_1 {
        position: absolute;
        top: 70px;
        left: 5%;
        margin-left: 00px;
        z-index: 900;
    }

    .popbank img {
        width: 300px;
    }

    #pop_bankChange .popCheck {
        width: 300px;
    }

    .fs-sm-18 {
        font-size: 18px !important;
    }

    .fs-sm-16 {
        font-size: 16px !important;
    }


    .popbank .button1 {
        width: 122px;
        font-size: 13px;
        padding: 6px 8px;
        bottom: 14px;
        left: 24px;
    }
        .popbank .button2:hover{
            bottom: 18px;
        }

    .popbank .button2 {
        width: 122px;
        font-size: 13px;
        padding: 6px 8px;
        bottom: 14px;
        left: 154px;
    }
        .popbank .button2:hover{
            bottom: 18px;
        }


}

/*--------------------------------------------------------------
# Popup Window 로그인 페이지 end
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Popup Window 설명회팝업 start
--------------------------------------------------------------*/

#pop_presentation {position: absolute;top:88px;left:1149px;z-index: 900;}
.pop_presentation_content img{width: 443px;}
#pop_presentation .Check {position: relative;height: 36px;line-height: 36px;background: #f1f1f1;padding: 0 15px;text-align: right;}
#pop_presentation .Check label {padding-left: 28px;color: #686868;cursor: pointer;}
#pop_presentation .Check .close {padding-left: 15px;margin-left: 10px;color: #686868;background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%}
#pop_presentation .Check .close:hover {text-decoration: none;}
.btn-Application {
    position: absolute;
    bottom: 30px;
    left: 27%;
    border-radius: 32px;
    border: solid 1px #000;
    background: var(--bs-white);
    padding: 10px 30px 8px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    transition: .2s;
    font-family: 'Gmarket Sans' !important;
}

.btn-Application:hover{
    bottom: 34px;
}

@media (min-width: 0px) and (max-width: 768px) {
    #pop_presentation {position: absolute;top: 60px;left: 5%;margin-left: 00px;z-index: 1000;}
    .pop_presentation_content img {width: 300px;}
    #pop_presentation .Check {width: 300px;}
    .btn-Application {
        bottom: 20px;
        padding: 5px 18px;
        font-size: 12px;
    }
    .btn-Application:hover{
        bottom: 22px;
        box-shadow: 0 1px 2px #aca1e8;
    }
}



/*--------------------------------------------------------------
# Popup Window 업데이트예정팝업 start
--------------------------------------------------------------*/
#pop_ptChange {position: absolute;top: 100px;left: 75px;z-index: 900;}
.pop_pt {position: relative;}
.pop_pt img {width: 500px;}
.pop_pt .boardLink {position: absolute;bottom: 20px;left: 50%;margin-left: -65px;}
#pop_ptChange .popCheck {position: relative;height: 36px;line-height: 36px;background: #f1f1f1;padding: 0 15px;text-align: right;}
#pop_ptChange .popCheck label {padding-left: 28px;color: #686868;cursor: pointer;}
#pop_ptChange .popCheck .txt_pop_ptclose {padding-left: 15px;margin-left: 10px;color: #686868;background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%}
#pop_ptChange .popCheck .txt_pop_ptclose:hover {text-decoration: none;}

@media (min-width: 0px) and (max-width: 768px) {
    #pop_ptChange {position: absolute;top: 370px;left: 5%;margin-left: 00px;z-index: 900;}
    .pop_pt img {width: 300px;}
    #pop_ptChange .popCheck {width: 300px;}
}

/*--------------------------------------------------------------
# Popup Window 수임처사전평가 팝업 start
--------------------------------------------------------------*/
#pop_precase {position: absolute;top: 88px;left: 420px;z-index: 900;}
.precase {position: relative;}
.precase img {width: 568px;}
.precase .boardLink {position: absolute;bottom: 20px;left: 50%;margin-left: -65px;}
#pop_precase .popCheck {position: relative;height: 36px;line-height: 36px;background: #f1f1f1;padding: 0 15px;text-align: right;}
#pop_precase .popCheck label {padding-left: 28px;color: #686868;cursor: pointer;}
#pop_precase .popCheck .txt_pop_ptclose {padding-left: 15px;margin-left: 10px;color: #686868;background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%}
#pop_precase  .popCheck .txt_pop_ptclose:hover {text-decoration: none;}

.btn-Application2 {
    position: absolute;
    bottom: 58px;
    left: 24%;
    border-radius: 48px;
    background: #660DFF;
    border: solid 0px;
    padding: 18px 72px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 16px #aca1e8;
    transition: .2s;
}

.btn-Application2:hover{
    bottom: 54px;
    box-shadow: 0 1px 2px #aca1e8;
}


@media (min-width: 0px) and (max-width: 768px) {
    #pop_precase {position: absolute;top: 800px;left: 5%;margin-left: 00px;z-index: 900;}
    .precase img {width: 300px;}
    #pop_precase .popCheck {width: 300px;}
    .btn-Application2{
        bottom: 22px;
        left: 24%;
        padding: 8px 16px;
        color: #fff;
        font-size: 15px;
    }
    .btn-Application2:hover{
        bottom: 24px;
        box-shadow: 0 1px 2px #aca1e8;
    }
}


/*--------------------------------------------------------------
# Popup Window 설명회팝업 end
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Popup Window 이벤트팝업 start
--------------------------------------------------------------*/

#pop_reviewEvent {
    position: absolute;
    top: 88px;
    left: 750px;
    z-index: 900;
}

.reviewEvent {
    position: relative;
}

.reviewEvent img {
    width: 399px;
}

.reviewEvent .boardLink {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -65px;
}


#pop_reviewEvent .popCheck {
    position: relative;
    height: 36px;
    line-height: 36px;
    background: #f1f1f1;
    padding: 0 15px;
    text-align: right;
}

#pop_reviewEvent .popCheck label {
    padding-left: 28px;
    color: #686868;
    cursor: pointer;
}

#pop_reviewEvent .popCheck .txt_pop_close {
    padding-left: 15px;
    margin-left: 10px;
    color: #686868;
    background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%
}

#pop_reviewEvent .popCheck .txt_pop_close:hover {
    text-decoration: none;
}

.btn-darkPurple {
    position: absolute;
    bottom: 64px;
    left: 13%;
    border-radius: 32px;
    background: #334dff;
    border: solid 0px;
    padding: 4px 60px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.btn-twobutton-1{
    position: absolute;
    width: 272px;
    bottom: 70px;
    left: 24px;
    border-radius: 0px;
    background: #063796;
    border: solid 0px;
    padding: 8px 80px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.btn-twobutton-2{
    position: absolute;
    width: 272px;
    bottom: 24px;
    left: 24px;
    border-radius: 0px;
    background: #063796;
    border: solid 0px;
    padding: 8px 80px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

@media (min-width: 0px) and (max-width: 768px) {
    #pop_reviewEvent {
        position: absolute;
        top: 370px;
        left: 5%;
        margin-left: 00px;
        z-index: 900;
    }

    .reviewEvent img {
        width: 300px;
    }

    #pop_reviewEvent .popCheck {
        width: 300px;
    }

    .btn-darkPurple {
        position: absolute;
        bottom: 40px;
        left: 22%;
        padding: 4px 24px;
        color: #fff;
        font-size: 11px;
        font-weight: 600;
    }
}

/*--------------------------------------------------------------
# Popup Window 이벤트팝업 end
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Popup Window 2023 세무유틸리티페어 팝업 start
--------------------------------------------------------------*/

#pop_faChange {
    position: absolute;
    top: 134px;
    left: calc(50% - 221px);
    z-index: 910;
    max-width: 442px;
    border-radius: 16px !important;
}

.pop_fa {
    position: relative;
}

.carousel-item img{
    max-width: 100%;
}

.pop_fa .boardLink {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -65px;
}

#pop_faChange .popCheck {
    width: 442px;
    position: relative;
    height: 42px;
    line-height: 36px;
    padding: 0px;
}

#pop_faChange .popCheck label {
    padding-left: 28px;
    color: #686868;
    cursor: pointer;
}

#pop_faChange .popCheck .txt_pop_faclose {
    padding-left: 15px;
    margin-left: 10px;
    color: #686868;
    background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%
}

#pop_faChange .popCheck .txt_pop_faclose:hover {
    text-decoration: none;
}

@media (min-width: 0px) and (max-width: 768px) {
    #pop_faChange {
        position: absolute;
        max-width: 320px;
        top: 74px;
        left: 5%;
        z-index: 900;
    }

    .carousel-item img {
        max-width: 100%;
    }

    #pop_faChange .popCheck {
        width: 320px;
    }
}

/*--------------------------------------------------------------
# Popup Window 2023 세무유틸리티페어 팝업 end
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Popup Window 2024 비정기 팝업 start
--------------------------------------------------------------*/

#pop_Holiday {
    position: absolute;
    top: 88px;
    right: 273px;
    z-index: 910;
}

.pop_Holiday {
    position: relative;
}

.pop_Holiday img {
    width: 480px;
}

.pop_Holiday .boardLink {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -65px;
}

#pop_Holiday .popCheck {
    position: relative;
    height: 36px;
    line-height: 36px;
    background: #f1f1f1;
    padding: 0 15px;
    text-align: right;
}

#pop_Holiday .popCheck label {
    padding-left: 28px;
    color: #686868;
    cursor: pointer;
}

#pop_Holiday .popCheck .txt_pop_Holidayclose {
    padding-left: 15px;
    margin-left: 10px;
    color: #686868;
    background: url(https://imagescdn.gettyimagesbank.com/common/img/gib/popup/small/bar_popS.gif) no-repeat left 50%
}

#pop_Holiday .popCheck .txt_pop_Holidayclose:hover {
    text-decoration: none;
}

@media (min-width: 0px) and (max-width: 768px) {
    #pop_Holiday {
        position: absolute;
        top: 60px;
        left: 5%;
        margin-left: 00px;
        z-index: 900;
    }

    .pop_Holiday img {
        width: 300px;
    }

    #pop_Holiday .popCheck {
        width: 300px;
    }
}

/*--------------------------------------------------------------
# Popup Window 2023 세무유틸리티페어 팝업 end
--------------------------------------------------------------*/

.btn-donate {
    position: absolute;bottom: 62px;left: 27%;
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsl(221.6deg 98.79% 67.65%);
    --btn-bg-2: hsl(226.64deg 100% 58.63%);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;padding: 0.8em 1.4em;font-size: 18px;font-weight: 600;transition: 0.8s;
    background-size: 280% auto;background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;border-radius: 32px;color: var(--btn-bg-color);
    box-shadow: inset 4px 4px 8px rgba(175, 230, 255, 0.5),
    inset -4px -4px 8px rgba(19, 95, 216, 0.35);
}

.btn-donate:hover {
    background-position: right top;
}

@media (prefers-reduced-motion: reduce) {
    .btn-donate {
        transition: linear;
    }
}

@media (min-width: 0px) and (max-width: 768px) {
    .btn-donate {bottom: 38px;left: 21%;font-size: 13px;padding: 8px 24px;}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    background: rgba(255, 255, 255, 1);
    transition: all 0.3s;
    z-index: 997;
    padding: 20px 0;
    border-bottom: solid 1px #EAECF4;
}

#header.header-scrolled {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 2px 12px rgba(15, 0, 50, 0.1);
    padding: 12px 0;
}

#header .logo {
    font-size: 32px;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#header .logo a {
    color: #5f687b;
}

#header .logo img {
    max-height: 40px;
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
    padding: 0;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar li {
    position: relative;
}

.navbar a,
.navbar a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 500;
    color: #3A3B45;
    white-space: nowrap;
    transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
}

.navbar .nav-link:hover,
.navbar .nav-link .active,
.navbar .nav-link .active:focus,
.navbar li .nav-link:hover > a {
    color: #2D5BFF;
}

.navbar .getstarted,
.navbar .getstarted:focus {
    padding: 10px 25px;
    margin-left: 14px;
    border-radius: 24px;
    line-height: 1;
    color: #2D5BFF;
    font-size: 16px;
    font-weight: 700;
    border: 2px solid #2D5BFF;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
    background: #1B4AF0;
    color: #fff;
    border-color: #2D5BFF;
}

.btn-primary-sm {
    padding: 10px 25px;
    margin-left: 14px;
    border-radius: 24px;
    line-height: 1;
    color: #fff !important;
    font-size: 16px;
    font-weight: 700;
    background-color: #2D5BFF;
}

.btn-primary-sm:hover {
    background: #1B4AF0;
    color: #fff;
}

.btn-purple-sm {
    padding: 10px 25px;
    margin-left: 14px;
    border-radius: 24px;
    line-height: 1;
    color: #7EFBF5 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    background-color: #6C19FF !important;
    border: 2px solid #6C19FF !important;
}

.btn-purple-sm:hover {
    background: #5400EA !important;
    color: #00FFF3 !important;
    border: 2px solid #5400EA !important;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: calc(100% + 30px);
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}

.navbar .dropdown ul li {
    min-width: 180px;
}

.navbar .dropdown ul a {
    padding: 10px 20px;
    font-size: 16px;
    text-transform: none;
    font-weight: 600;
}

.navbar .dropdown ul a i {
    font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: #1B4AF0;
}

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
}

.navbar .dropdown .dropdown ul {
    top: 0;
    left: calc(100% - 30px);
    visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    top: 0;
    left: 100%;
    visibility: visible;
}


@media (max-width: 1366px) {
    .navbar .dropdown .dropdown ul {
        left: -90%;
    }

    .navbar .dropdown .dropdown:hover > ul {
        left: -100%;
    }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
    color: #5f687b;
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
    color: #fff;
}

@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    .navbar ul {
        display: none;
    }
}

.navbar-mobile {
    position: fixed;
    overflow: hidden;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(73, 80, 94, 0.9);
    transition: 0.3s;
    z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
}

.navbar-mobile ul {
    display: block;
    position: absolute;
    top: 55px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    padding: 10px 0;
    border-radius: 10px;
    background-color: #fff;
    overflow-y: auto;
    transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
    padding: 10px 20px;
    font-size: 15px;
    color: #5f687b;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
    color: #1B4AF0;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
    margin: 15px;
    padding: 10px 15px;
}

.navbar-mobile .dropdown ul {
    position: static;
    display: none;
    margin: 10px 20px;
    padding: 10px 0;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
    min-width: 200px;
}

.navbar-mobile .dropdown ul a {
    padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
    font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
    color: #1B4AF0;
}

.navbar-mobile .dropdown > .dropdown-active {
    display: block;
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
    padding: 120px 0;
    overflow: hidden;
}

.section-bg {
    background-color: #f9f9fa;
}

.section-title {
    text-align: center;
    padding: 0 0 30px;
    position: relative;
}

.section-title h2 {
    font-size: 48px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #1D1E23;
    position: relative;
    z-index: 2;
    line-height: 1.4;
}

.section-title h2 span {
    font-weight: 700;
    color: #002ED0;
}

.section-title h5 {
    color: #2D5BFF;
    font-weight: 700;
}

.section-title p {
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}


/*--------------------------------------------------------------
# Sub top
--------------------------------------------------------------*/


.sub-top-context {
    width: 100%;
    position: absolute;
    padding: 10rem 1rem 3rem;
    text-align: center;
}

.sub-top-context h2 {
    color: #fff;
    font-size: 48px;
    font-weight: 400;
    margin-bottom: 1.2rem;
}

.sub-top-context h4 {
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}

.sub-top-area {
    background: linear-gradient(284.1deg, #90a8ff 45%, #ecf1ff 360%);
    width: 100%;
    padding: 12rem;
}

@media (min-width: 300px) and (max-width: 479px) {
    .sub-top-area {
        padding: 9rem;
    }

    .sub-top-context {
        padding: 6.8rem 1rem 3rem;
    }

    .sub-top-context h2 {
        font-size: 28px;
    }

    .sub-top-context h4 {
        font-size: 18px;
    }
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    overflow: hidden;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    animation: animate 20s linear infinite;
    bottom: -180px;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}


@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    width: 100%;
    height: auto;
    background-position-x: right;
    background-repeat: no-repeat;
    background-position-y: bottom;
    /* padding-top: 170px; */
    padding: 125px 0 95px;
}

.hero-bg-main {
    background-image: linear-gradient(284.1deg, #A6B8F9 0%, #ecf1ff 82.45%);
}

.hero h2 {
    font-size: 58px;
    letter-spacing: -0.025rem;
    line-height: 1.2;
    color: #1D1E23;
}

.hero h2 span {
    font-size: 64px;
    background: -webkit-linear-gradient(284.1deg, #b266ff, #002ED0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-justify {
    justify-content: flex-start;
}

.hero .btn-watch-video {
    font-size: 18px;
    display: inline-block;
    transition: 0.5s;
    margin-left: 25px;
    color: #5f687b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hero .btn-watch-video i {
    color: #96ADFF;
    font-size: 52px;
    line-height: 0;
    margin-right: 8px;
    transition: 0.5s;
}

.hero .btn-watch-video:hover i {
    color: #2D5BFF;
}

.hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

.hero ul li{
    font-size: 21px;
    margin-bottom: 0.5rem;
    word-break: keep-all;
    letter-spacing: -0.02rem;
    font-weight: 700;
    text-align: left;
    color: #3a3b45;
}
.hero ul li span{
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.02rem;
    color: #5A5C69;
}

@media (max-width: 768px){
    .hero h3{
        font-size: 38px;
    }
    .hero h3 span{
        font-size: 42px;
    }
}

/* 메인 비주얼 변경_250421 */
.mainVisual_wrap {
    width: 100%;
    height: auto;
    background-image: url("/public/img/main_img_2504-e5ab523eb44438a3088afbd816002c31.png");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.section_bg_overlay {
    background-color:rgba(0, 0, 0, 0.7);
    zoom: 1;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.mainVisual_wrap .container {
    z-index:9;
}

.inside-text {
    gap: 2rem;
    text-align: center;
    color: #fff;
    padding-top: 5rem;
}
.inside-text h2 {
    font-size: 60px;
    margin-bottom: 8px;
    line-height: 1.45;
}
.inside-text h4 {
    letter-spacing: normal;
}

.hex-color1 {
    color: #00f0ff !important;
    font-weight: 800;
}
.hex-color2 {
    color: #2196F3 !important;
    font-weight: 800;
}

.mainVisual_wrap .btn-watch-video {
    font-size: 18px;
    display: inline-block;
    transition: 0.5s;
    margin-left: 25px;
    color: #5f687b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mainVisual_wrap .btn-watch-video i {
    color: #96ADFF;
    font-size: 52px;
    line-height: 0;
    margin-right: 8px;
    transition: 0.5s;
}

.mainVisual_wrap .btn-watch-video:hover i {
    color: #2D5BFF;
}
/* 헤더 스크롤시 로고 색상 변경
.scroll_logo,
.header-scrolled .normal_logo {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.header-scrolled .scroll_logo {
    opacity: 1;
    filter: alpha(opacity=100);
    position: static;
}
*/
@media (max-width: 768px) {
    .inside-text {
        gap: 1rem;
        padding-top: 4rem;
        text-align: left;
    }
    .inside-text h2 {
        font-size: 30px;
    }
    .inside-text h4 {
        font-size: .88rem;
    }
    .mainVisual_wrap .m-d-block {
        display: block;
    }
    .mainVisual_wrap h2 .hex-color2 {
        display: block;
    }
    .inside-btn-link {
        justify-content: flex-start !important;
    }
    .hex_wrap {
        display: block !important;
    }
    .w-d-block {
        display: inline-block !important;
    }
}
.hex_wrap {
    display: inline-block;
}
.w-d-block {
    display: block;
}
.inside-btn-link {
    justify-content: center;
}


/*--------------------------------------------------------------
# Marquee Section
--------------------------------------------------------------*/

.marquee-wrap {
    width: 100%;
    height: 60px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.marquee {
    background: -webkit-linear-gradient(284.1deg, #b266ff, #002ED0);
    color: rgba(255, 255, 255, 1);
    overflow: hidden;
    white-space: nowrap;
    width: 200vw;
    padding: 18px 0;
    /* transition: 0.5s; */
}

.marquee:hover {
    color: rgba(255, 255, 255, 1);
}

.marquee h6 {
    text-align: center;
    animation: 50s linear 0ms normal forwards infinite running marquee;
    display: inline-block;
    padding: 0 5%;
    margin-bottom: 0;
    width: auto;
    text-shadow: 0 1px 3px #2600d086;
}

.marquee h6 span {
    font-weight: 600;
    border: solid 1px #96ADFF;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 14px;
    margin-right: 6px;
    background-color: #96ADFF;
    color: #fff;
    letter-spacing: -0.01rem;
    text-shadow: 0 1px 1px #96ADFF;
}


@keyframes marquee {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    100% {
        transform: translate3d(-300%, 0px, 0px);
    }
}


/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
    display: block;
    background: linear-gradient(0deg, rgba(0, 43, 155, 0.8), rgba(0, 43, 155, 0.8)),
    url("/public/img/Intersect-0c13ae59ed8fa62d8d8bc81f1f22e8fc.jpg");

}

.counts .counters span {
    font-size: 62px;
    display: block;
    color: #fff;
    font-weight: 700;
}


/*--------------------------------------------------------------
# Price
--------------------------------------------------------------*/
.price .icon-box {
    text-align: left;
    width: 100%;
    padding: 9% 8% 6%;
    margin: 1.5rem 1rem;
    border-radius: 20px;
    transition: all ease 0.5s;
    transform: translateY(0rem);
    box-shadow: 0px 2px 2px rgba(0, 22, 101, 0.2);
}

.price .icon-box:hover {
    transform: translateY(-0.7rem);
    box-shadow: 0px 34px 42px rgba(0, 22, 101, 0.2);
}

/* .bg-primary-800:hover{
  background: -webkit-linear-gradient(284.1deg, #b266ff, #002ED0);
} */

.price .icon-box h4 {
    font-weight: 800;
    margin-bottom: 4px;
    font-size: 36px;
}

.b-b-primary-200 {
    border-bottom: solid 1px #96adff40;
}

.b-b-white-100 {
    border-bottom: solid 1px #96ADFF;
}

.price .price-unit h1 {
    font-size: 52px;
    letter-spacing: -0.05rem;
    margin-bottom: 1.2rem;
}

.price .price-unit h6 {
    padding: 4px 0 4px 12px;
    line-height: 26px;
}

.price .price-unit .fs-18 {
    font-size: 14px !important;
}

.price .icon-box .price-type {
    font-size: 16px;
    background-color: #96ADFF;
    font-weight: 500;
    color: #fff;
    padding: 0px 14px;
    border-radius: 24px;
    margin: 8px 14px;
    height: 36px;
    border: solid 1px #96ADFF;
}

.price .icon-box ul {
    padding: 0;
}

.price .icon-box li {
    line-height: 48px;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
    list-style: none;
}

.price .icon-box li i {
    font-size: 20px;
    transition: 0.3s;
    margin-right: 4px;
    padding-top: 14px;
}

.price .icon-box li .bi-check-circle-fill {
    color: #28B411;
}

.price .icon-box li .bi-x-circle-fill {
    color: #FF4545;
}


/*--------------------------------------------------------------
# Testimonials 도입사례
--------------------------------------------------------------*/
.testimonials {
    background-color: #ECF0FF;
}


.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
    overflow: hidden;
}

.testimonials .testimonial-item {
    box-sizing: content-box;
    min-height: 200px;
    border-radius: 16px;
    padding: 12% 12% 10%;
    margin: 24px 24px;
    background: #fff;
    box-shadow: 0px 2px 2px rgba(0, 46, 208, 0.20);
    transition: 0.5s;
}

.testimonials .testimonial-item:hover {
    box-shadow: 0px 32px 40px rgba(0, 46, 208, 0.15);
    transform: translateY(-12px);
}

.testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50%;
    margin: -40px 0 0 40px;
    position: relative;
    z-index: 2;
    border: 6px solid #fff;
}

.testimonials .testimonial-item h3 {
    color:#1D1E23;
    font-weight: 700;
    font-size: 26px;
    margin-bottom: 16px;
    line-height: 1.4;
}

.testimonials .testimonial-item h4 {
    color: #002ED0;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 16px;
    line-height: 1.4;
}

.testimonials .testimonial-item h5 {
    padding: 0px 0px 20px 0px;
    font-size: 20px;
    font-weight: 400;
    color: #5A5C69;
    position: relative;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    word-break: break-all;
}

.testimonials .testimonial-item h5:hover {
    color: #191f28;
}

.testimonials .testimonial-item h6 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.025rem;
    color: #5A5C69;
    position: relative;
    border-radius: 6px;
    position: relative;
    z-index: 1;
    word-break: break-all;
    margin-bottom: 32px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: #e4e6ea;
    font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
}


.testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 1;
    border: 1px solid #96ADFF;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #2D5BFF;
    border: 1px solid #2D5BFF;
}

/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
.faq {
    background-color: #ECF0FF;
}

.faq .faq-list {
    padding: 0 100px;
}

.faq .faq-list ul {
    padding: 0;
    list-style: none;
}

.faq .faq-list li + li {
    margin-top: 15px;
}

.faq .faq-list li {
    padding: 34px;
    background: #fff;
    border-radius: 16px;
    position: relative;
}

.faq .faq-list a {
    display: block;
    position: relative;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 700;
    padding: 0 38px;
    outline: none;
    cursor: pointer;
}

.faq .faq-list .bi-question-circle-fill {
    font-size: 26px;
    position: absolute;
    right: 0;
    left: 34px;
    color: #1B4AF0;
}

.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
    font-size: 24px;
    position: absolute;
    right: 0;
    top: 0;
}

.faq .faq-list h6 {
    margin-bottom: 0;
    padding: 10px 0 0 0;
    color: #5A5C69;
    line-height: 1.6;
}

.faq .faq-list .icon-show {
    display: none;
}

.faq .faq-list a.collapsed {
    color: #5A5C69;
    transition: 0.3s;
}

.faq .faq-list a.collapsed:hover {
    color: #1B4AF0;
}

.faq .faq-list a.collapsed .icon-show {
    display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
    display: none;
}


/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
    background: linear-gradient(-45deg, #1B4AF0, #7726c8, #96ADFF, #a448ff);
    background-size: 400% 400%;
    animation: gradient 8s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.cta h1 {
    font-size: 52px;
    font-weight: 900;
}

.cta h4 {
    color: #191f28;
    margin-bottom: 42px;
    font-size: 22px;
}


/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
    padding: 15px 0;
    background: #f9f9fa;
    min-height: 40px;
    margin-top: 82px;
}

.breadcrumbs h2 {
    font-size: 36px;
    font-weight: 300;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumbs ol li + li {
    padding-left: 10px;
}

.breadcrumbs ol li + li::before {
    display: inline-block;
    padding-right: 10px;
    color: #778196;
    content: "/";
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
    background-color: #fff;
    color: #3A3B45;
    position: relative;
    border-top: solid 1px #EAECF4;
}

.footer-top {
    position: relative;
    z-index: 2;
    padding: 56px 0 32px;
}

.footer-menu {
    flex-wrap: wrap;
}

.footer-info {
    padding-right: 5rem;
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 0.3rem;
    display: flex;
}

.footer-info dt {
    font-size: 15px;
    float: left;
    width: 8rem;
    color: #6e707e;
    font-weight: 500;
}

.footer-info dd {
    width: calc(100% - 5rem);
    color: #3A3B45;
}

.footer-top h6 {
    font-size: 15px;
    font-weight: 600;
    padding-right: 3rem;
    position: relative;
    padding-bottom: 0.4rem;
    margin-bottom: 0;
}

.footer-top p {
    font-size: 15px;
    font-weight: 500;
    position: relative;
    padding-bottom: 0.4rem;
    margin-bottom: 0;
}

#footer .footer-top .social-links {
    margin-top: 30px;
}

#footer .footer-bottom {
    border-top: 1px solid #d9dce2;
    z-index: 2;
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}

#footer .copyright {
    font-size: 14px;
    float: left;
}

#footer .credits {
    float: right;
    font-size: 13px;
}

#footer .display-none-pc {
    display: none;
}

#footer .display-none-m {
    display: initial;
}

/* #footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #eaecef;
  color: #5f687b;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 4px;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #16df7e;
  color: #fff;
  text-decoration: none;
} */


/*--------------------------------------------------------------
# bedge
--------------------------------------------------------------*/

.new-bedge {
    background-color: #96ADFF;
    background: linear-gradient(-45deg, #002ED0, #2D5BFF, #b266ff, #2D5BFF, #002ED0);
    background-size: 800% 100%;
    animation: gradient 5s cubic-bezier(0.6, 0.30, 0.20, 0.6) infinite;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    border: 0;
    margin: 0 auto;
    padding: 1px 8px;
}

.new-bedge-content {
    position: absolute;
    background-color: #96ADFF;
    background: linear-gradient(-45deg, #002ED0, #2D5BFF, #b266ff, #2D5BFF, #002ED0);
    background-size: 800% 100%;
    animation: gradient 5s cubic-bezier(0.6, 0.30, 0.20, 0.6) infinite;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    border: 0;
    margin: 0 auto;
    padding: 1px 8px;
    cursor: auto !important;
    margin-top: 0.2rem;
}

.soft-bedge-content {
    position: absolute;
    background-color: #96ADFF;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    border: 0;
    margin: 0 auto;
    padding: 1px 8px;
    cursor: auto !important;
    margin-top: 0.2rem;
}


/*--------------------------------------------------------------
# 비대면바우처
--------------------------------------------------------------*/

.voucher-table {
    border: 1px solid #EAECF4;
    padding: 0;
    border-radius: 16px;
    width: 1280px;
    margin: 0 auto;
}

.voucher-table caption {
    font-size: 18px;
    margin-top: 1em;
}

.voucher-table tr {
    background-color: #fff;
    border: 1px solid #EAECF4;
    padding: 1em;
}

.voucher-table th,
.voucher-table td {
    padding: 1em;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
}

.voucher-table th {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
}
.fs-13 {
    font-size: 13px !important;
}
.fs-20 {
    font-size: 20px !important;
}
.fs-22 {
    font-size: 22px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-40 {
    font-size: 40px !important;
}

.voucher-step-box {
    width: 360px;
    height: auto;
    border-radius: 48px;
    padding: 48px 40px;
}

.actual-price-title {
    font-size: 30px;
}

.actual-price {
    font-size: 36px;
}

@media screen and (max-width: 600px) {
    .voucher-table {
        width: 98%;
        border: 0;
    }

    .voucher-table th,
    .voucher-table td {
        padding: 1em 0.2rem;
        font-size: 16px;
        width: 33%;
    }

    .voucher-table th {
        font-size: 16px;
    }

    .actual-price-title {
        font-size: 16px;
    }

    .actual-price {
        font-size: 20px !important;
    }

    .voucher-table caption {
        font-size: 15px;
    }

}

/*--------------------------------------------------------------
# 회원가입
--------------------------------------------------------------*/
.sign {
    width: 100%;
    max-width: 1920px;
    min-width: 280px;
    margin: 0 auto;
}

.pageTitle {
    text-align: center;
    padding: 150px 0 50px;
}

.layout1 {
    position: relative;
    width: 100%;
    max-width: 1920px;
    min-width: 280px;
    margin: 0 auto;
}

/* ------------------------------------------------------------
회원가입 form styles
-------------------------------------------------------------*/

/* ------------------------------------------------------------
주요기능 탭
-------------------------------------------------------------*/

.main-tab > input,
.main-tab .part > div {
    display: none;
}

#tab1:checked ~ .part .tab1,
#tab2:checked ~ .part .tab2,
#tab3:checked ~ .part .tab3,
#tab4:checked ~ .part .tab4,
#tab5:checked ~ .part .tab5,
#tab6:checked ~ .part .tab6 {
    display: block;
}

.main-tab {
    width: 1280px;
    margin: 0 auto;
}

.main-tab ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.main-tab ul li label {
    float: left;
    padding: 16px 32px;
    border: 1px solid #EAECF4;
    border-radius: 14px 14px 0 0;
    border-bottom: 0;
    background-color: #6C8CFF;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.main-tab ul li label:hover {
    background-color: #6C8CFF;
}

.main-tab ul li label:active {
    background-color: #fff;
}

.main-tab ul li:not(:last-child) label {
    border-right-width: 0;
}

.main-tab .part {
    clear: both;
    border: 1px solid #EAECF4;
    border-radius: 0 14px 14px 14px;
    box-shadow: 0 24px 32px #EAECF4;
}

.main-tab .part h6 {
    font-size: 18px;
    color: #3A3B45;
    font-weight: 500;
    line-height: 1.5;
}

.main-tab .part .inner img {
    width: 100%;
}


@media screen and (max-width: 700px) {
    .main-tab ul li label {
        float: left;
        padding: 8px 16px;
        border: 1px solid #EAECF4;
        border-bottom: 1px solid #EAECF4;
        background-color: #6C8CFF;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
        width: 50%;
    }

    .main-tab {
        width: 90%;
    }

    .main-tab .part {
        border-top: 0 solid #EAECF4;
        border: 1px solid #EAECF4;
    }
}

#tab1:checked ~ nav .tab1 label,
#tab2:checked ~ nav .tab2 label,
#tab3:checked ~ nav .tab3 label,
#tab4:checked ~ nav .tab4 label,
#tab5:checked ~ nav .tab5 label,
#tab6:checked ~ nav .tab6 label {
    background-color: #fff;
    position: relative;
    text-align: center;
    color: #2D5BFF;
}

#tab1:checked ~ nav .tab1 label:after,
#tab2:checked ~ nav .tab2 label:after,
#tab3:checked ~ nav .tab3 label:after,
#tab4:checked ~ nav .tab4 label:after,
#tab5:checked ~ nav .tab5 label:after,
#tab6:checked ~ nav .tab6 label:after {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #fff;
    left: 0;
    bottom: -1px;
}

/* ------------------------------------------------------------
주요기능 탭 END
-------------------------------------------------------------*/

/** ========================
 * pricing-table
 ============================*/
ul, li {
    list-style: none;
}

ul {
    padding-left: 0;
}

blockquote, q {
    quotes: none;
}

.costInfo {
    background-color: #FBFCFF;
}

.pricing-wrapper {
    width: 1200px;
    margin: 0 auto;
    box-shadow: 0px 10px 20px rgba(159, 159, 159, 0.2);
}

.pricing-table {
    text-align: center;
    width: 400px;
    float: left;
    border: solid 1px #E9ECF2;
}

.pricing-title {
    background: #fff;
    padding: 20px 0;
    border-bottom: solid 1px #E9ECF2;
}

.event-info {
    background: #F2F6FF;
    padding: 25px 0;
    border: solid 1px #E9ECF2;
    border-bottom: solid 3px #e9ecf2;
    width: 686px;
    margin: 0 auto 40px;
    text-align: center;
    border-radius: 16px;
    background-color: #fff;
}

.event-info h4 {
    font-size: 24px;
    font-weight: 800;
    color: #00114F;
    line-height: 1.3;
    margin-top: 10px;
}

.info {
    background: #fff;
    padding: 20px 0;
    border-bottom: solid 1px #E9ECF2;
}

.bt-color-blue {
    border-top: solid 8px #1C6EFF;
}

.bt-color-purple {
    border-top: solid 8px #3C1CFF;
}

.pricing-title img {
    height: 31px;
}

.table-title-bg-basic {
    background-color: #1C6EFF;
}

.table-title-bg-pro {
    background-color: #3C1CFF;
}

.table-bg-basic {
    background-color: #f3f7ff;
}

.table-bg-basic li {
    background-color: #f3f7ff;
}

.table-bg-pro {
    background-color: #f5f3ff;
}

.table-bg-pro li {
    background-color: #f5f3ff;
}

.pricing-table .price {
    font-weight: 700;
    border-bottom: solid 1px #E9ECF2;
}

.pricing-table .price p {
    color: #191F28;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: -18px;
    letter-spacing: -0.15rem;
}

.pricing-table .price h6 {
    color: #5A5C69;
    font-size: 15px;
}

.vat_explain {
    font-size: 9px;
    text-align: center;
    padding: 16px;
}

.membership-fee {
    padding: 16px 0px;
    border-bottom: solid 1px #E9ECF2;
}

.membership-fee h5 {
    font-size: 18px;
    font-weight: 800;
    color: #3A3B45;
}

.membership-fee h5 span {
    font-weight: 500;
    color: #5A5C69;
}

.pricing-table .price sup {
    font-size: 18px;
    color: #5A5C69;
    font-weight: 500;
    padding: 5px;
    position: relative;
}

.pricing-table .explain {
    font-size: 14px;
    color: #5A5C69;
    font-weight: 500;
    padding: 12px 40px;
    border-bottom: solid 1px #E9ECF2;
    letter-spacing: -0.025rem;
}

.pricing-table .explain p {
    font-size: 14px;
}

.btn_type {
    border: solid 1px #E7EAF0;
    padding: 8px 32px;
    background-color: #fff;
    font-weight: 700;
    font-size: 16px;
    color: #5A5C69;
    border-radius: 8px;
}

.btn_type i {
    padding-left: 16px;
}

.table-list {
    background: #FFF;
    color: #403d3a;
    margin-bottom: 0;
}

.table-list-three ul {
    margin-bottom: 0;
}

.table-list-three ul li {
    border-bottom: solid 1px #E9ECF2;
    font-weight: 600;
    font-size: 18px;
}

.table-list li {
    font-size: 18px;
    font-weight: 600;
    padding: 20px;
    height: 70px;
    text-align: center;
    list-style-type: none;
}

.border-b-l-gray li {
    border-bottom: solid 1px #E9ECF2;
}

.border-b-l-blue li {
    border-bottom: solid 1px #DEEAFF;
}

.border-b-l-purple li {
    border-bottom: solid 1px #E3DEFF;
}

.p-top-1 {
    padding: 11px 20px !important;
}

.p-top-1 p {
    line-height: 31px;
    margin-bottom: 0;
    font-size: 18px;
}

.pc-none {
    display: none;
}

.m-none {
    display: block;
}

.mo-ts {
    font-size: 16px;
    margin-left: 10px;
    margin-bottom: 0;
}

.table-list li h6 {
    font-weight: 500;
    font-size: 12px;
    margin-bottom: 0;
}

.table-list li span.unlimited {
    color: #FFF;
    background: #e95846;
    font-size: 0.9em;
    padding: 5px 7px;
    display: inline-block;
    -webkit-border-radius: 38px;
    -moz-border-radius: 38px;
    border-radius: 38px;
}

.table-buy {
    background: #FFF;
    padding: 15px;
    text-align: left;
    overflow: hidden;
}

.table-buy p {
    float: left;
    color: #37353a;
    font-weight: 700;
    font-size: 2.4em;
}

.table-buy p sup {
    font-size: 0.5em;
    position: relative;
    left: 5px;
}

.table-buy .pricing-action {
    float: right;
    color: #FFF;
    background: #e95846;
    padding: 10px 16px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: 700;
    font-size: 1.4em;
}

.table-buy .pricing-action:hover {
    background: #cf4f3e;
}


/** ================
 * 툴팁 커스텀 버튼
 ===================*/

section .center {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-style: normal;
}

.trigger {
    position: relative;
    background: #fff;
    display: inline-block;
    width: 140px;
    height: 42px;
    color: #5A5C69;
    border-radius: 8px;
    border: solid 1px #E7EAF0;
    margin-top: 6px;
}

.tooltip_btn,
.tooltip_btn_before,
.tooltip_btn_after {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.tooltip_btn {
    overflow: hidden;
}

.tooltip_btn_before,
.tooltip_btn_after {
    font-style: normal;
    transition: top .3s;
}

.tooltip_btn_before {
    top: 0;
    line-height: 40px;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;

}

.tooltip_btn_before img {
    padding: 0 0 4px 10px;
}

.tooltip_btn_after {
    top: -100%;
    font-size: 16px;
    font-weight: 700;
    color: #5A5C69;
    line-height: 0;
}

.trigger:hover em {
    top: -100%;
}

.trigger:hover i {
    top: 20px;
}

.trigger::before,
.trigger::after {
    position: absolute;
    opacity: 0;
    transition: all .3s;
    visibility: hidden;
}

.trigger::before {
    content: "택스봇 설치형은 PC에 설치하여\A이용할 수 있는 서비스입니다.";
    white-space: pre;
    position: absolute;
    width: 220px;
    height: 50px;
    padding: 10px;
    background: #232C3E;
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    line-height: 1rem;
    top: -72px;
    left: calc(50% - 100px);
}

.trigger:after {
    content: '';
    width: 0;
    height: 0;
    border: 10px solid #fff;
    border-top-color: #232C3E;
    left: calc(50% - 5px);
    top: -22px;
}

.trigger:hover::before,
.trigger:hover::after {
    opacity: 1;
    visibility: visible;
}

.trigger:hover::before {
    bottom: 80px;
}

.trigger:hover::after {
    bottom: 60px;
}

.add-info {
    width: 1200px;
    margin: 0 auto;
}


.title-1 {
    padding: 22px 4px 22px !important;
    background-color: #fff;
    /*border-top: solid 8px #5A5C69;*/

}

.title-2 {
    padding: 48px 4px 47px !important;
    background-color: #fff;
}

.title-2-1 {
    padding: 17px 4px 17px !important;
    background-color: #fff;
}

.title-3 {
    padding: 53px 4px 52px !important;
    background-color: #fff;
}

@media all and (max-width: 330px) {
    .pricing-wrapper {
        width: 100%;
    }

    .pc-none {
        display: inline-block;
    }

    .m-none {
        display: none;
    }

    .table-list-three ul li {
        border-bottom: solid 1px #E9ECF2;
        font-weight: 600;
        font-size: 15px;
    }

    .table-list li {
        text-align: left;
    }

    .add-info {
        width: 90%;
    }

    .event-info {
        width: 90%;
        margin: 5%;
        padding: 16px 0;
        border-radius: 20px;
        text-align: center;
    }

    .event-info img {
        width: 100px;
    }

    .event-info h4 {
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 0;
    }

    .event-info h4 br {
        display: none;
    }

    .pricing-table {
        width: 33.3%;
        float: left;
    }

    .pricing-title {
        padding: 12px 8px;
    }

    .table-list li {
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        padding: 26px 24px;
    }

    .title-1 {
        padding: 14px 4px !important;
    }

    .title-2 {
        padding: 25px 4px 26px !important;
    }

    .title-2-1 {
        padding: 17px 4px 16px !important;
    }

    .title-3 {
        padding: 125px 4px !important;
    }

    .title-4 {
        height: 77px;
        display: flex;
        padding: 0 10px !important;
        justify-content: center;
        align-items: center;
    }

    .p-top-1 {
        height: 76px;
        display: flex;
        padding: 0 4px !important;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .p-top-1 p {
        line-height: 21px;
    }

    .pricing-table .price {
        padding: 10px 4px;
    }

    .pricing-table .price p {
        font-size: 20px;
        margin-bottom: -4px;
    }

    .pricing-table .price sup {
        font-size: 12px;
        padding: 0 5px;
        top: -1px;
    }

    .pricing-table .price h6 {
        font-size: 10px;
        padding: 0 4px;
    }

    .pricing-table .explain {
        height: 278px;
        padding: 8px;
    }

    .vat_explain {
        font-size: 8px;
        padding: 8px;
    }

    .inner_cont {
        padding-left: 0;
        padding-right: 0;
    }

    .btn_type {
        width: 100%;
        padding: 8px 30px;
        font-size: 12px;
    }

    .explain p {
        font-size: 12px;
    }

    .tooltip_btn_before {
        font-size: 12px;
    }

    .tooltip_btn_after {
        font-size: 12px;
    }

    .trigger {
        width: 90px;
    }

    .add-info {
        font-size: 12px;
        margin-bottom: 30px;
    }
}

@media all and (min-width: 300px) and (max-width: 479px) {
    .pricing-wrapper {
        width: 100%;
    }

    .pc-none {
        display: inline-block;
    }

    .m-none {
        display: none;
    }

    .table-list-three ul li {
        border-bottom: solid 1px #E9ECF2;
        font-weight: 600;
        font-size: 15px;
    }

    .table-list li {
        text-align: left;
    }

    .add-info {
        width: 90%;
    }

    .event-info {
        width: 90%;
        margin: 5%;
        padding: 16px 0;
        border-radius: 20px;
        text-align: center;
    }

    .event-info img {
        width: 100px;
    }

    .event-info h4 {
        font-size: 16px;
        margin-top: 8px;
        margin-bottom: 0;
    }

    .event-info h4 br {
        display: none;
    }

    .pricing-table {
        width: 33.3%;
        float: left;
    }

    .pricing-title {
        padding: 12px 8px;
    }

    .pricing-title img {
        height: 18px;
    }

    .table-list li {
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
        padding: 26px 24px;
    }

    .table-list li h6 {
        word-break: break-word;
    }

    .title-1 {
        padding: 12px 4px !important;
    }

    .title-2 {
        padding: 20px 4px !important;
    }

    .title-3 {
        padding: 95px 4px 94px !important;
    }

    .title-4 {
        height: 77.1px;
        display: flex;
        padding: 0 10px !important;
        justify-content: center;
        align-items: center;
    }

    .p-top-1 {
        height: 76px;
        display: flex;
        padding: 0 10px !important;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .p-top-1 p {
        font-size: 14px;
        line-height: 25px;
        letter-spacing: -0.025rem;
    }

    .pricing-table .price {
        padding: 10px 0px;
    }

    .pricing-table .price p {
        font-size: 22px;
        margin-bottom: -4px;
    }

    .pricing-table .price sup {
        font-size: 12px;
        padding: 0 5px;
        top: -1px;
    }

    .pricing-table .price h6 {
        font-size: 10px;
        padding: 0 8px;
    }

    .pricing-table .explain {
        height: auto;
        padding: 8px;
    }

    .pricing-table .explain p {
        font-size: 12px;
    }

    .membership-fee h5 {
        font-size: 15px;
    }

    .vat_explain {
        font-size: 8px;
        padding: 8px;
    }

    .inner_cont {
        padding-left: 0;
        padding-right: 0;
    }

    .btn_type {
        width: 100%;
        padding: 8px 30px;
        font-size: 12px;
    }

    .explain p {
        font-size: 12px;
    }

    .tooltip_btn_before {
        font-size: 12px;
    }

    .tooltip_btn_after {
        font-size: 12px;
    }

    .trigger {
        width: 106px;
    }

    .add-info {
        font-size: 12px;
        margin-bottom: 30px;
    }
}


/****************************
.register1
****************************/

.register_box {
    width: 50%;
    text-align: center;
    overflow: hidden;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
}

.register_box.shadow {
    filter: drop-shadow(0 0 0.75rem #555);
}

.register_box .tab {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    width: 100%;
    position: relative;
}

.register_box .tab > div > div {
    float: left;
    width: 100%;
    padding: 2px 0;
    background: #eeebeb;
    border-radius: 50px;
    color: #aeaeae;
    font-size: 16px;
    line-height: 2.5;
}

.register_box .tab > div > div.on {
    background: #96ADFF;
    color: #fff;
    border-radius: 50px;
    border-radius: 50px;
}

/*.register_box .tab > div:first-child{position: absolute;}*/
/*.register_box .tab > div:nth-child(2){position: absolute;}*/
/*.register_box .tab > div:nth-child(3){position: absolute;}*/
.register_box p {
    clear: both;
}

.register_box p.signup {
    font-size: 16px;
}

.register_box ul {
    margin-bottom: 32px;
    padding-left: 0;
}

.register_box ul li {
    width: 96%;
    text-align: left;
    padding-left: 4%;
    margin: 0 auto;
    line-height: 3.5;
    font-size: 16px;
}

.register_box ul li:nth-child(1) {
    border: 1px solid #EAECF4;
    border-radius: 8px;
    background: #F8F9FC;
}

.register_box h5 {
    text-align: left;
    color: #000000;
}

.register_box input {
    width: 100%;
    height: 47px;
    text-align: left;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding-left: 2%;
    margin: 0 auto;
    margin-bottom: 8px;
    line-height: 3.5;
    color: #000000;
}

.register_box div {
    position: relative;
}

.register_box div.accord.match::after {
    content: '비밀번호가 일치합니다.';
    color: #7cb342;
    z-index: 999;
    margin-right: 20px;
    position: absolute;
    right: 5px;
    line-height: 3;
}

.register_box div.accord.notMatch::after {
    content: '비밀번호가 일치하지 않습니다.';
    color: #b34242;
    z-index: 999;
    margin-right: 20px;
    position: absolute;
    right: 5px;
    line-height: 3;
}

.register_box .join {
    padding-top: 85px;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    background-image: url(../img/check_regi.png);
    background-repeat: no-repeat;
    background-position: center 20px;
}

.register_box .join .bt_login_blue {
    background: #4777d9;
    line-height: 45px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-bottom: 1px;
    display: inline-block;
    width: 150px;
}

.register_box .join .bt_login_grey {
    background: #666666;
    line-height: 45px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-bottom: 1px;
    display: inline-block;
    width: 150px;
}

.register_box .setup p {
    font-size: 20px;
    font-weight: bold;
    margin-top: 45px;
    line-height: 2.1;
    margin-bottom: 30px;
}

.register_box .setup p:nth-child(2) {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    padding-left: 60px;
}

.register_box .process {
    margin-bottom: 36px;
}

.register_box .w80 {
    width: 80%;
}

.register_box .w64 {
    width: 64%;
}

.register_box .w70 {
    width: 70%;
}

.register_box .w72 {
    width: 72%;
}

.register_box .certificate {
    text-align: left;
}

.register_box input[type='checkbox'] {
    height: auto;
    width: 20px;
}

.register_box .mt15 {
    margin-top: 15px;
}

.register_box .pw {
    display: inline-block;
    text-align: left;
    width: 100%;
    position: relative;
}

.register_box .pw p {
    display: inline-block;
    position: absolute;
    right: 4px;
    font-size: 15px;
}

.register_box .pw p a {
    text-decoration: none;
    color: #424242;
}

.register_box .login {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
}

.register_box .login input {
    margin-bottom: 8px;
    border-bottom: 1px solid #EAECF4;
}

.register_box .login_btnarea {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    width: 100%;
    font-weight: 600;
}

.register_box02 {
    width: 540px;
    text-align: center;
    overflow: hidden;
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
}

.register_box02 .card,
.register_box02 .card-body,
.register_box02 .card-content,
.register_box02 .tab-content {
    border: none;
    padding: 0;
}

.register_box02 .login_btnarea {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    width: 95%;
    margin-top: 15px;
}

.register_box02 {
    width: 540px;
    text-align: center;
    overflow: hidden;
    background-color: #fff;
    margin: 0 auto;
}

.register_box02 .nav {
    width: 95% !important;
    margin: 40px auto 0 auto;
}

.register_box02 .nav .nav-item {
    width: 50%;
    border-bottom: 1px solid #455a64;
}

.register_box02 .nav .nav-item .nav-link {
    margin-bottom: -1px;
    line-height: 1.7;
}

.register_box02 .nav .nav-item .nav-link.active {
    border-bottom: none !important;
    background-color: #455a64;
    color: #fff;
}

.register_box02 h3 {
    margin-top: 45px;
    margin-bottom: 15px;
}

.register_box02 input {
    width: 95%;
    height: 47px;
    text-align: left;
    border: 1px solid #e3e3e3;
    padding-left: 4%;
    margin: 0 auto;
    line-height: 3.5;
    color: #000000;
    margin-top: 40px;
}

.modal_scroll {
    height: 400px;
    overflow-y: scroll;
}

input[id='cb1'] + label,
input[id='cb2'] + label,
input[id='cb3'] + label,
input[id='cb4'] + label,
input[id='cb5'] + label,
input[id='idSave'] + label {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    border: 2px solid #D1D3E2;
    cursor: pointer;
    float: left;
    background: url("/public/img/login/check_grey-43c630486e2a56c401f54d108ec3d751.png") no-repeat center;
    margin-right: 8px;
}

input[id='cb1']:checked + label,
input[id='cb2']:checked + label,
input[id='cb3']:checked + label,
input[id='cb4']:checked + label,
input[id='cb5']:checked + label,
input[id='idSave']:checked + label {
    border: 2px solid #2D5BFF;
    color: #2D5BFF;
    background: url("/public/img/login/check-1c4969a0b2e6988d950716202d225e21.png") no-repeat center;
}


.join-content-box {
    border: solid 1px #EAECF4;
    padding: 38px 60px;
    border-radius: 24px;
}


.form3tag {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
}

.register1 {
    overflow: hidden;
    background: #fff;
    font-size: 16px;
    font-weight: 500;
    height: auto;
}

.register1 .inner_cont {
    text-align: center;
    color: #3A3B45;
}

.register1 .inner_cont .register_box {
    margin: 0 auto;
}

.register1 .desc_block {
    padding-top: 62px;
    text-align: center;
}

.register1 .tit_main {
    font-size: 24px;
    font-weight: normal;
    line-height: 1.2;
}

.register1 .tit_main strong {
    font-weight: 600;
}


@media only screen and (min-width: 1200px) {
    .register1 .inner_cont {
        width: 100%;
        height: 100vh;
        padding: 18vh 0 14vh;
        background-color: #ECF0FF;
    }

    .register1 .inner_cont .register_box {
        width: 30%;
        margin: 0 auto;
        border: 1px solid #fff;
        padding: 70px 60px;
        box-shadow: 0px 2px 2px rgba(0, 46, 208, 0.10);
    }

    .register_box {
        min-width: 460px;
        padding: 20px;
        margin-top: 0 !important;
    }

    .register_box ul li {
        width: 100%;
        list-style: none;
    }

    .register_box .process .process1 {
        width: 500px;
        height: 40px;
        background-size: 500px 40px;
    }

    .register_box .process .process2 {
        width: 500px;
        height: 40px;
        background-size: 500px 40px;
    }

    .register_box .process .process3 {
        width: 500px;
        height: 40px;
        background-size: 500px 40px;
    }
}



/*--------------------------------------------------------------
# 택스봇제작소
--------------------------------------------------------------*/

.production{
    padding: 140px 0 0;
}
.production img{
    width: fit-content;
}

@media all and ( max-width: 800px ){
    .production{
        padding: 40px 0 0;
    }
}


/* 이용요금표 삭제:: 웹형과 설치형 비교표 */
/* =================== */
/*   Pricing Wrapper   */
/* =================== */
.price-container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}
.price-container:before,
.price-container:after {
    content: " ";
    display: table;
}
@media (min-width: 768px) {
    .price-container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .price-container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .price-container {
        width: 1170px;
    }
}

.pricing_wrapper .pcol-md-1,
.pricing_wrapper .pcol-md-2,
.pricing_wrapper .pcol-md-3,
.pricing_wrapper .pcol-md-4,
.pricing_wrapper .pcol-md-5,
.pricing_wrapper .pcol-md-6,
.pricing_wrapper .pcol-md-7,
.pricing_wrapper .pcol-md-8,
.pricing_wrapper .pcol-md-9,
.pricing_wrapper .pcol-md-10,
.pricing_wrapper .pcol-md-11,
.pricing_wrapper .pcol-md-12 {
    position: relative;
    min-height: 1px;
}
@media (min-width: 992px){
    .pricing_wrapper .pcol-md-1,
    .pricing_wrapper .pcol-md-2,
    .pricing_wrapper .pcol-md-3,
    .pricing_wrapper .pcol-md-4,
    .pricing_wrapper .pcol-md-5,
    .pricing_wrapper .pcol-md-6,
    .pricing_wrapper .pcol-md-7,
    .pricing_wrapper .pcol-md-8,
    .pricing_wrapper .pcol-md-9,
    .pricing_wrapper .pcol-md-10,
    .pricing_wrapper .pcol-md-11,
    .pricing_wrapper .pcol-md-12{
        float: left;
    }
    .pricing_wrapper .pcol-md-1{ width: 8.33333%;}
    .pricing_wrapper .pcol-md-2{ width: 16.66667%;}
    .pricing_wrapper .pcol-md-3{ width: 25%;}
    .pricing_wrapper .pcol-md-4{ width: 33.33333%;}
    .pricing_wrapper .pcol-md-5{ width: 41.66667%;}
    .pricing_wrapper .pcol-md-6{ width: 50%;}
    .pricing_wrapper .pcol-md-7{ width: 58.33333%;}
    .pricing_wrapper .pcol-md-8{ width: 66.66667%;}
    .pricing_wrapper .pcol-md-9{ width: 75%;}
    .pricing_wrapper .pcol-md-10{ width: 83.33333%;}
    .pricing_wrapper .pcol-md-11{ width: 91.66667%;}
    .pricing_wrapper .pcol-md-12{ width: 100%;}
}
.row-fluid.clearfix:before,
.row-fluid.clearfix:after,
.pricing_wrapper.clearfix:before,
.pricing_wrapper.clearfix:after {
  content: " ";
  display: table;
}

.pricing_wrapper.clearfix:after {
  clear: both;
}

.pricing_wrapper:hover .current {
  top: 0;
  padding-bottom: 20px;
  padding-top: 20px;
}

.pricing_wrapper:hover .current .pricing-card {
  -webkit-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
  box-shadow: none;
}

.pricing_wrapper:hover .current .pricing-footer {
  height: 80px;
}

.pricing_wrapper:hover .current .pricing-footer a {
  bottom: 0;
  position: relative;
}
/*
.pricing_wrapper:hover .current:hover {
  top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.pricing_wrapper:hover .current:hover .pricing-card {
  box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.25);
}

.pricing_wrapper:hover .current:hover .pricing-footer {
  height: 120px;
}

.pricing_wrapper:hover .current:hover .pricing-footer a {
  bottom: -20px;
  position: relative;
}
*/
.stripped-table [class*=col-] {
  padding: 0;
  margin: -1px;
}

.stripped-table .pricing-col {
  padding: 20px 0;
}

.stripped-table.current {
  padding-left: 0;
  padding-right: 0;
}

.stripped-table .ribbon {
  left: calc(100% - 124px);
}

/* =================== */
/*   Pricing Cards     */
/* =================== */
.pricing-card {
  position: relative;
  border: 1px solid #ddd;
  width: 100%;
  top: 0;
  -webkit-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
  z-index: 99;
}

/* =================== */
/*   Pricing Header    */
/* =================== */
.pricing-header {
  background: #fff;
  position: relative;
  height: 200px;
  border-bottom: 1px solid #1976d2;
  margin: -1px;
  margin-bottom: 0;
  text-align: center;
}

.pricing-header h5 {
  background: #2196f3;
  color: #fff;
  font-size: 16px;
  line-height: normal;
  margin: 0 auto;
  padding: 15px 20px;
  text-transform: uppercase;
}

.pricing-header p {
  margin: 0 auto;
  color: #fff;
  display: inline-block;
  font-style: italic;
}

/* =================== */
/*   Pricing Box       */
/* =================== */
.price-box {
  border-radius: 100px;
  display: block;
  margin: 25px auto;
  position: relative;
  line-height: 100px;
  height: 100px;
  width: 100px;
}

.price-box:before {
  border-radius: 50%;
  box-shadow: 0 0 0 5px white inset, 0 1px 2px transparent;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.price-box .price {
  color: #fff;
  display: inline-block;
  font-family: roboto;
  font-size: 34px;
  font-weight: 600;
  position: relative;
  letter-spacing: -2px;
}

/* ============================ */
/*   Pricing Feature(Content)   */
/* ============================ */
.pricing-feature {
  position: relative;
  text-align: left;
}

.pricing-feature li {
  list-style: none;
  padding: 13px 0;
  border-bottom: 1px solid #ddd;
  background: #eee;
}

.pricing-feature li:last-child {
  border-bottom: none;
}

.pricing-feature li span {
  font-weight: bold;
}

.pricing-feature li span, .pricing-feature li i {
  float: right;
}

.pricing-feature li p {
  margin: 0;
  font-size: 18px;
  padding: 0 20px;
}

/* ============================ */
/*   Pricing Footer             */
/* ============================ */
.pricing-footer {
  border-top: 1px solid #ddd;
  padding: 0 20px;
  height: 80px;
  -webkit-transition: height 0.2s linear 0s;
          transition: height 0.2s linear 0s;
  text-align: center;
}

.pricing-footer a {
  bottom: 0;
  margin-top: 20px;
  position: relative;
}

/* =================== */
/*   Pricing Ribbons     */
/* =================== */
.ribbon {
    background: #222;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.23), 0 1px 5px rgba(0, 0, 0, 0.16);
    height: 35px;
    line-height: 35px;
    margin: 0 auto;
    position: absolute;
    left: calc(100% - 110px);
    top: 70px;
    width: 35px;
    z-index: 10;
    -webkit-transition: all 0.2s linear;
          transition: all 0.2s linear;
    border-radius: 100px;
    float: right;
    cursor: pointer;
}

.ribbon:hover {
  width: 90px;
}

.ribbon:hover span {
  visibility: visible;
  -webkit-transition: all 0.2s linear 0.18s;
          transition: all 0.2s linear 0.18s;
}

.ribbon span {
  top: 0;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  float: left;
  visibility: hidden;
}

.ribbon i {
  color: #FFC61B;
  font-weight: 800;
  font-size: 14px;
  margin: 0 10px;
  z-index: 10;
  float: left;
}

/* ======================= */
/*   Pricing Comparison    */
/* ======================= */
.comparison-table [class*=col-] {
  padding: 0;
  margin: -1px;
}

.comparison-table .pricing-col {
  padding: 20px 0;
}

.comparison-table.current {
  padding-left: 0;
  padding-right: 0;
}

.comparison-table [class*=col-]:first-child {
  margin: 0;
}

.comparison-table [class*=col-]:first-child:hover {
  top: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

.comparison-table [class*=col-]:first-child:hover .pricing-card {
  margin: 0;
  box-shadow: none;
}

.comparison-table .pricing-feature li {
    background: #fff;
    min-height: 86px;
    align-content: center;
}

.comparison-table .pricing-feature li i {
  line-height: normal;
}
.comparison-table .pricing-feature li i.bi-check-circle-fill {
    color: #28B411;
}

.comparison-table .pricing-feature li span,
.comparison-table .pricing-feature li i {
  float: none;
}

.comparison-table .pricing-feature li:nth-child(2n+1) {
  background: #eee;
}

.comparison-table .ribbon {
  left: calc(100% - 124px);
}

.list-feature {
  z-index: 0;
}

.list-feature .pricing-header {
  background: #fff !important;
  padding: 30px 15px;
  border-bottom-color: #ddd !important;
  text-align: center;
  margin-top: -2px;
}

.list-feature .pricing-header h5 {
  background: #fff !important;
  color: #424242;
  font-weight: 500;
  font-size: 39px;
  padding: 0;
  margin-top: 30px;
}

.list-feature .pricing-header p {
  color: #444;
  margin-top: 5px;
}

.list-feature .pricing-feature {
  text-align: left;
}

.pricing-col {
  -webkit-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
  padding-top: 20px;
  padding-bottom: 20px;
}
/*
.pricing-col:hover {
  padding-bottom: 0;
  padding-top: 0;
}
*/
/*
.pricing-col:hover > .pricing-card {
  top: 0px;
  box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
  z-index: 101;
}

.pricing-col:hover > .pricing-card .pricing-footer {
  height: 120px;
}

.pricing-col:hover > .pricing-card .pricing-footer a {
  bottom: -20px;
  position: relative;
}
*/
/*
.pricing-col.current {
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}
*/
.current {
  top: 0;
}
/*
.current .pricing-card {
  z-index: 100;
  -webkit-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
  box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.25);
}

.current .pricing-footer {
  height: 120px;
}

.current .pricing-footer a {
  bottom: -20px;
  position: relative;
}

.current:hover {
  -webkit-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
  top: -20px;
}

.current:hover .pricing-footer {
  height: 120px;
}

.current:hover .pricing-footer a {
  bottom: -20px;
  position: relative;
}
*/

/* ======================== */

.style-3 .pricing-card {
  border: 1px solid #ddd;
}

.style-3 .pricing-header {
  border-bottom: none;
  margin: 0;
  height: 160px;
}

.style-3 .pricing-header h5 {
  background: #fff;
  color: #424242;
  border-bottom: 1px solid #ddd;
}

.style-3 .price-box {
  border-radius: 0;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ddd;
}

.style-3 .price {
  color: #616161;
  font-size: 52px;
  font-weight: 800;
  line-height: normal;
}
.style-3 .price span {
    font-size: 18px;
    font-weight: 500;
    margin-left: .25rem;
}

.style-3 .pricing-feature li {
  background: #d9e2ef;
}

.style-3 .pricing-feature li:first-child {
  border-top: 1px solid #ddd;
}

.style-3 .pricing-feature li span,
.style-3 .pricing-feature li i {
  float: right;
}

.style-3 .pricing-feature li:nth-child(2n+1) {
  background: #f1f4f8;
}

.style-3 .ribbon {
    top: 35%;
    right: -10px;
    left: auto;
    border-radius: 3px 0 0 3px;
    background: linear-gradient(-45deg, #002ED0, #2D5BFF, #b266ff, #2D5BFF, #002ED0);
    background-size: 800% 100%;
    animation: gradient 5s cubic-bezier(0.6, 0.30, 0.20, 0.6) infinite;
}

.style-3 .ribbon:after {
  border-right: 10px solid transparent;
  border-top: 7px solid rgba(0, 0, 0, 0.5);
  bottom: -7px;
  content: "";
  position: absolute;
  right: 0;
}

.style-3 .basic .price {
  color: #002ED0;
}

.style-3 .corp .price {
  color: #4caf50;
}

.style-3 .unlim .price {
  color: #002ED0;
}

.style-3 .pricing-footer {
  background: #fff;
}

.style-3.comparison-table [class*=col-]:first-child {
  margin: -1px;
}

@media (max-width:991.98px) {
    .style-3.comparison-table [class*=col-]:first-child {
        display: none;
    }
}

.style-3.comparison-table .list-feature .pricing-header h5 {
  margin-top: 0;
  border-bottom: none;
}

.style-3.comparison-table .pricing-feature li p,
.style-3.comparison-table .pricing-feature li i,
.style-3.comparison-table .pricing-feature li span {
  float: none;
}

.style-3 .pricing-footer .btn-act.btn-line {
  background: none;
  border-color: #335eea;
  color: #335eea;
}

.style-3 .pricing-footer .btn-act.btn-line:hover {
  background: #2b50c7;
  border-color: #2b50c7;
  color: #fff;
}

.style-3 .pricing-footer .btn-act.btn-bg {
  background-color: #2196f3;
  border-color: #2196f3;
}

.style-3 .pricing-footer .btn-act.btn-bg:hover {
  background: #212121;
  border-color: #212121;
}

/* ======================== */
/*   Button Color       */
/* ======================== */
.btn-act {
  line-height: normal;
  padding: 9px 26px;
  border: 2px solid;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  color: #666;
  vertical-align: middle;
  will-change: opacity, transform;
  -webkit-transition: all 0.2s linear 0s;
          transition: all 0.2s linear 0s;
}

.btn-act.rounded {
  border-radius: 50px !important;
}

.btn-act.boxed {
  border-radius: 0;
}

.btn-act.btn-uppercase {
  text-transform: uppercase;
  font-size: 13px;
}

.btn-act.btn-capitalize {
  text-transform: capitalize;
}

.btn-act span {
  position: relative;
  left: 0;
  -webkit-transition: left 0.2s linear;
          transition: left 0.2s linear;
}

.btn-act i {
  -webkit-transition: margin-left 0.2s linear;
          transition: margin-left 0.2s linear;
  opacity: 0;
  margin-left: 0;
  position: absolute;
  line-height: inherit;
}

.btn-act:hover {
  border-color: initial;
  background: initial;
}

.btn-act:hover span {
  left: -0.5em;
}

.btn-act:hover i {
  opacity: 1;
  margin-left: 0;
}

.btn-act.btn-line {
  background: #fff;
  border-color: #616161;
  color: #616161;
}

.btn-act.btn-line:hover {
  border-color: #212121;
  background: #212121;
  color: #fff;
}

.btn-act.btn-bg {
  background: #616161;
  border-color: #616161;
  color: #fff;
}

.btn-act.btn-bg:hover {
  background: #212121;
  border-color: #212121;
}

/* 이용요금 250627 */
.cost-sub-context {
    padding-top: 10rem;
}
.stage {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: auto;
}

@media (max-width:767.98px) {
    .cost-sub-context {
        padding-top: 7rem;
    }
    .stage {
        display: block;
    }
    .stage .slide {
        background-size: 85% !important;
    }
}

.stage .slide {
  height: 60vh;
  border-radius: 12px;
  margin: 10px;
  /*cursor: pointer;*/
  color: #fff;
  flex: 1;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  position: relative;
  transition: all 500ms ease-in-out;
}
.stage .slide:first-child {
    background-color: #7B6BF1;
}
.stage .slide:nth-child(2) {
    background-color: #0CB496;
}
.stage .slide:last-child {
    background-color: #E97575;
}

.stage .active {
  flex: 10;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  background-position: bottom right;
}

.stage .slide h3 {
  position: absolute;
  letter-spacing: 2px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  padding: 45px 20px 0;
  opacity: 1;
}

.stage .slide.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}
.stage .slide h3 .t-block {
    display: block;
    max-width: 420px;
}

@media screen and (max-width: 1200px) {
  .stage .slide h3 {
    left: 0px;
    top: 20px;
    font-size: 1.1em;
    line-height: 1.4;
    font-weight: 400;
    padding: 0 10px;
  }
  .stage .slide.active {
    background-position: bottom;
  }
  .stage .slide h3 .t-block {
    display: inline;
  }
}

.variable-font {
	display: flex;
	align-items: center;
	justify-content: center;
}
.variable-font h2 {
	font-size: 48px;
	margin-left: 1.5rem;
	font-weight: 900;
}
.variable-font span {
	font-size: 48px;
	text-decoration: none;
	font-weight: 100;
	letter-spacing: -3px;
	animation: weight 2s infinite;
	animation-delay: calc(var(--char-index) * 150ms);
}

@keyframes weight {
	from {
		font-weight: 100;
	}

	50% {
		font-weight: 900;
	}

	to {
		font-weight: 100;
	}
}

@media (min-width: 300px) and (max-width: 576px) {
    /*.variable-font {
        flex-direction: column;
    }*/
    .variable-font h2 {
        margin-left: 0.5rem;
    }
    .variable-font h2,
    .variable-font span {
        font-size: 28px;
    }
    .cost-sub-context h4 {
        font-size: 18px;
    }
    .stage .slide {
        height: 48vh;
    }
}