/* tablet - min */
@media(min-width: 768px) {
    /* text */
    .txt_box.m_tct {text-align: left;}

    /* main */
    .main_banner {padding: 0 20px;}
    .main_banner >.bg {
        border-radius: 20px;
        background-size: 92%;
    }
    .main_sv .item {grid-template-columns: repeat(2, 1fr);}
    .main_skill {grid-template-columns: repeat(2, 1fr);}
    .main_contact {
        row-gap: 40px;
        background-image: url(../img/main/banner_contact.png);
        background-size: cover;
    }

    /* tax */
    .tax_step.back::after {
        height: 20px;
        border-top-right-radius: 20px;
    }
    .tax_step > video {border-radius: 20px;}
    .tax_item {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .tax_item > li.dash {
        grid-column: span 2;
        padding: 50px 50px 0;
    }
    .tax_item > li.dash > img {
        left: 0;
        width: 100%;
    }
    .tax_service {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
    .tax_solution {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px;
    }

    /* tax - outsourcing */
    .tos_history {padding: 100px 0 0;}
    .tos_history::before {
        left: 50%;
        -webkit-transform: translateX(-50%);
        height: -webkit-calc(100% - 50px);
    }
    .tos_history > li {grid-template-columns: repeat(2, 1fr);}
    .tos_history > li > p {grid-column: 2;}
    .tos_history > li > p::before {left: -10px;}
    .tos_history > li .step {
        justify-self: end;
        padding: 0 50px 40px 0;
    }
    .tos_history > li .step > p {
        padding: 0 9px 0 0;
        background: url(../img/icon/triangle_right_be.svg) no-repeat right center;
        background-size: 10px;
    }
    .tos_history > li .step.work > p {background-image: url(../img/icon/triangle_right_ny.svg);}
    .tos_history > li > strong {
        grid-column: span 2;
        padding: 40px 0 0;
        margin-top: 70px;
        text-align: center;
    }
    .tos_history > li > strong::before {
        left: 50%;
        -webkit-transform: translateX(-50%);
    }
    .tos_corporation .tos_swiper.swiper {
        height: 0;
        opacity: 0;
    }
    .tos_corporation > img {
        display: block;
        width: 600px;
    }
    .tos_corporation .item {flex-direction: row;}
    .tos_corporation .item > li {width: -webkit-calc(50% - 20px);}
    .tos_review {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* pay - outsourcing */
    .pos_service {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
    .pos_service > li > i {margin: initial;}
    .pos_service > li .txt_box {text-align: left;}
    .pos_scope {grid-template-columns: repeat(2, 1fr);}
    .pos_step .txt_box .tit,
    .pos_step .txt_box > p {
        padding: 0 0 0 34px;
    }

    /* cross */
    .cross_box {
        row-gap: 30px;
        padding: 70px 0;
        border-radius: 20px;
    }
}

/* tablet - max */
@media(min-width: 1024px) {
    /* tax */
    .tax_service {grid-template-columns: repeat(3, 1fr);}
    .tax_service.col_4 {grid-template-columns: repeat(4, 1fr);}

    /* tax - outsourcing */
    .tos_corporation .item > li {width: -webkit-calc(33.33% - 16px);}

    /* pay - outsourcing */
    .pos_scope {grid-template-columns: repeat(3, 1fr);}
}

/* desktop */
@media(min-width: 1200px) {
    /* button */
    .btn.lg {
        min-width: 300px;
        font-size: 20px;
        font-weight: 700;
        line-height: 62px;
    }
    .btn.line_gy:not(.off):not(.no_hv):hover {
        color: #1A1C21;
        background-color: #F5F6F9;
    }
    .btn.fill_wh:not(.off):not(.no_hv):hover {
        border-color: #F5F6F9;
        background-color: #F5F6F9;
    }
    .btn.fill_be:not(.off):not(.no_hv):hover {
        border-color: #0EA2FF;
        background-color: #0EA2FF;
    }
    .btn.ftg {
        margin-top: 16px;
        width: 300px;
        font-size: 20px;
        line-height: 62px;
    }

    /* tab */
    .tab_fix .tab_box.on {top: 80px;}
    .tab_box > li > a {
        font-size: 20px;
        line-height: 70px;
    }
    .tab_box > li > a:hover {color: #3AB2FD;}

    /* text */
    .txt_box {row-gap: 16px;}
    .txt_box > .tit {
        font-size: 40px;
        line-height: 54px;
    }
    .txt_box > .tit.lg {
        font-size: 48px;
        line-height: 66px;
    }
    .txt_box > .tit.md {
        font-size: 32px;
        line-height: 46px;
    }
    .txt_box > .tit.sm {font-weight: 700;}
    .txt_box > .tit.smd {
        font-size: 24px;
        font-weight: 700;
    }
    .txt_box > strong {font-size: 26px;}
    .txt_box > p {
        font-size: 20px;
        line-height: 30px;
    }
    .txt_box > p.sm {
        font-size: 18px;
        font-weight: 500;
        line-height: 30px;
    }
    .txt_box .btn_box {padding-top: 8px;}

    /* main */
    .main_banner {padding: 0 30px;}
    .main_banner >.bg {
        height: 540px;
        background-size: 900px;
    }
    .main_banner .item > h2 {font-size: 48px;}
    .main_banner .roll_swiper.swiper {
        height: 64px;
    }
    .main_banner .roll_swiper.swiper .swiper-slide > strong {font-size: 54px;}
    .main_banner .item > span:hover {
        color: #1A1C21;
        background-color: #FFF;
    }
    .main_corporation {padding: 40px 0 140px;}
    .main_sv {
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 0;
    }
    .main_sv > .txt_box {
        justify-self: center;
        text-align: left;
    }
    .main_sv .item {align-items: start;}
    .main_sv .item > ul:nth-of-type(2) {margin-top: 110px;}
    .main_skill > li {
        padding: 60px 40px 40px;
        border-radius: 20px;
    }
    .main_skill > li:hover {
        border-color: #3AB2FD;
        box-shadow: 0px 15px 20px 0px rgba(58, 178, 253, .2);
    }
    .main_skill > li > h3 {
        padding: 60px 0 40px;
        font-size: 24px;
        font-weight: 700;
        line-height: 34px;
    }
    .main_review {
        row-gap: 60px;
        padding: 200px 0 30px;
    }
    .main_review .item {
        padding: 50px 36px;
        border-radius: 20px;
    }
    .main_review .item > h3 {
        font-size: 24px;
        line-height: 34px;
    }
    .main_review .item > p {
        font-size: 18px;
        line-height: 30px;
    }
    .main_review .item > p:last-of-type {font-variant: 600;}
    .main_faq .tab {margin-bottom: 40px;}
    .main_faq .tab > li {
        width: 180px;
        padding: 0;
    }
    .main_faq .list > li {padding: 30px 0;}
    .main_faq .list > li > h3 {
        position: relative;
        font-size: 24px;
        font-weight: 700;
        line-height: normal;
    }
    .main_faq .list > li > h3::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        height: 100%;
        background: url(../img/icon/arrow_down_bk.svg) no-repeat right center;
        background-size: 100%;
        -webkit-transition: all .3s ease;
    }
    .main_faq .list > li.active > h3::after {-webkit-transform: rotate(180deg);}
    .main_faq .list > li > p {
        padding-top: 14px;
        font-size: 18px;
        line-height: 30px;
    }
    .main_contact {
        margin-bottom: 200px;
        border-radius: 20px;
        background-size: 100%;
    }

    /* tax */
    .tax_item > li {border-radius: 20px;}
    .tax_item > li.dash {padding: 60px 150px 0;}
    .tax_item > li.dash > img {padding-top: 40px;}
    .tax_item > li.code {padding: 60px 0;}
    .tax_item > li.code > img {padding-top: 68px;}
    .tax_item > li.error {padding: 60px 0 40px;}
    .tax_item > li.error > img {padding-top: 50px;}
    .tax_scBox {padding: 200px 0;}
    .tax_scBox > .txt_box {margin-bottom: 80px;}
    .tax_scBox .empty {display: block;}
    .tax_corporation {
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
    }
    .tax_service {gap: 60px 24px;}
    .tax_service > li > img {margin-bottom: 24px;}
    .tax_solution {gap: 0 24px;}
    .tax_solution > li {
        padding: 60px;
        border-width: 5px;
        border-radius: 20px;
    }
    .tax_solution > li > h3 {
        font-size: 32px;
        font-weight: 700;
        line-height: 46px;
    }
    .tax_solution > li > small {
        font-size: 18px;
        line-height: 30px;
    }
    .tax_solution > li > div {
        row-gap: 14px;
        padding-top: 30px;
    }
    .tax_solution > li > div > p {
        padding-left: 26px;
        font-size: 18px;
        background-size: 20px;
    }
    .tax_solution > li:hover {border-color: #3AB2FD;}
    .tax_solution > li:hover > h3 > span {color: #3AB2FD;}
    .tax_solution > li:hover > div > p:not(.plus) {background-image: url(../img/icon/chk_be.svg);}

    /* tax - outsourcing */
    .tos_history {
        row-gap: 40px;
        padding: 180px 0 0;
    }
    .tos_history::before {width: 5px;}
    .tos_history > li > p {
        padding-left: 30px;
        font-size: 20px;
        line-height: 30px;
    }
    .tos_history > li > p::before {left: -11px;}
    .tos_history > li .step > h3 {
        padding-left: 60px;
        margin-bottom: 0;
        font-size: 20px;
        font-weight: 600;
        line-height: 50px;
        background-size: 50px;
    }
    .tos_history > li .step > p {
        padding-right: 11px;
        margin-left: 60px;
        background-size: 12px;
    }
    .tos_history > li .step > p > span {
        padding: 14px 24px;
        border-radius: 10px;
        font-size: 20px;
        font-weight: 600;
    }
    .tos_history > li > strong {
        margin-top: 180px;
        padding-top: 70px;
        font-size: 24px;
        line-height: normal;
    }
    .tos_history > li > strong::before {
        width: 50px;
        height: 50px;
    }
    .tos_corporation > img {width: 750px;}
    .tos_corporation .item {margin: 0;}
    .tos_corporation .item > li {padding: 50px 40px;}
    .tos_corporation .item > li > span {
        margin: 40px 0 20px;
        font-size: 20px;
        font-weight: 700;
    }
    .tos_corporation .item > li > p {
        padding-bottom: 40px;
        margin-bottom: 40px;
        font-size: 20px;
        line-height: 30px;
    }
    .tos_corporation .item > li > h4 {
        margin-bottom: 20px;
    }
    .tos_corporation .item > li > div > span {font-size: 18px;}
    .tos_corporation .item > li > i {height: 78px;}
    .tos_corporation .item > li.pro {order: 2;}
    .tos_corporation .item > li:nth-of-type(2) {order: 1;}
    .tos_corporation .item > li:nth-of-type(3) {order: 3;}
    .tos_corporation .item.col_2 > li.pro {order: 1;}
    .tos_corporation .item.col_2 > li:nth-of-type(2) {order: 2;}
    .tos_corporation .item > li:hover {border-color: #3AB2FD;}
    .tos_corporation .item > li:hover > span {background-color: #3AB2FD;}
    .tos_corporation .item > li:hover > div > p {
        color: #0EA2FF;
        background-color: #E7F5FF;
    }
    .tos_corporation .item > li:hover > i {background-image: url(../img/icon/add_circle_be.svg);}

    .tos_review {gap: 24px;}
    .tos_review > li {padding: 40px;}
    .tos_review > li > strong {
        margin-bottom: 30px;
        font-size: 18px;
    }
    .tos_review > li > h3 {
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 34px;
    }
    .tos_review > li > p {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 30px;
    }
    .tos_review > li > span {
        font-size: 18px;
        font-weight: 600;
    }

    /* pay - outsourcing */
    .pos_service {
        gap: 70px;
        padding-top: 20px;
    }
    .pos_service > li {row-gap: 30px;}
    .pos_scope {gap: 24px;}
    .pos_step {row-gap: 60px;}
    .pos_step .txt_box .tit,
    .pos_step .txt_box > p {
        padding: 0 0 0 34px;
    }
    .pos_step .txt_box .tit::before {top: 3px;}

    /* cross */
    .cross_box {
        row-gap: 40px;
        padding: 100px 0;
    }

    /* outsourcing */
    .osi_box {
        margin-bottom: 200px;
        border-radius: 20px;
    }
    .osi_box .txt_box .btn_box {padding-top: 24px;}

    /* floating */
    .floating .item .btn {
        width: 300px;
        font-size: 20px;
        line-height: 62px;
    }

    /* Download Introduction */
    .did_wrap {
        row-gap: 50px;
        padding: 100px 0 166px;
    }
    .did_wrap > h2 {text-align: center;}
}