/* tablet - min */
@media(min-width: 768px) {
    /* sub - banner */
    .sub_banner {height: 300px;}

    /* tab_box */
    .tab_box {padding: 70px 20px;}
    .tab_box > h2 {font-size: 36px;}
    .tab_box > h2 > span {padding-right: 13px;}
    .tab_box > h2 > span::after {
        width: 7px;
        height: 7px;
    }

    /* tab - sub */
    .tab_sub > li > a {padding: 15px 0;}

    /* content */
    .content_box {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .content_box.reverse .txt_box {grid-column: 2;}
    .content_box.reverse > img {
        grid-row: 1;
        grid-column: 1;
    }

    /* greeting */
    .greeting_box {
        grid-template-columns: repeat(2, 1fr);
        border-bottom: 0;
    }
    .greeting_box .txt_box {padding: 40px;}
    .greeting_box .txt_box:nth-of-type(1),
    .greeting_box .txt_box:nth-of-type(2) {
        border-top: 0;
    }
    .greeting_box .txt_box:nth-of-type(1),
    .greeting_box .txt_box:nth-of-type(3) {
        border-right: 1px solid #D9DBE0;
    }

    /* history */
    .history_box {
        grid-template-columns: auto 1fr;
        align-items: start;
        column-gap: 40px;
    }
    .history_box > h3 {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 14px;
    }

    /* organization */
    .organization_box {row-gap: 70px;}
    .organization_box > strong::after {height: 48px;}
    .organization_box > span {
        display: block;
        top: 156px;
    }
    .organization_box > ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
    .organization_box > ul > li::after {
        display: block;
        height: 40px;
        top: -40px;
    }

    /* brand */
    .brand_box > ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .brand_box:last-of-type .logo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    .brand_box:last-of-type .logo > li {width: -webkit-calc(33% - 20px);}

    /* map */
    .map_info .item > li {grid-template-columns: 100px 1fr;}
    .map_box #map {height: 380px;}

    /* ieum */
    .ieum_service {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .ieum_other {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .ieum_price {gap: 20px;}
    .ieum_price > li {grid-template-columns: 170px 1fr;}
    .ieum_price > li > h3 {
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        grid-row: span 4;
        padding: 30px 0;
        border-radius: 4px 0 0 4px;
    }
    .ieum_price > li > div {
        padding: 10px 20px;
        border-top: 1px solid #D9DBE0;
    }
    .ieum_price > li > div:nth-of-type(1) {border-top: 0;}
    .ieum_price > li > div > p {
        display: inline-block;
        padding: 0;
        border-top: 0;
    }

    /* wizsign */
    .wiz_step {
        grid-template-columns: repeat(3, 1fr);
        gap: 0 24px;
    }
    .wiz_step > li::after {
        left: initial;
        right: -24px;
        bottom: 0;
        width: 24px;
        height: 100%;
        background-image: url(../img/icon/arrow_right_bk.svg);
    }
    .wiz_step > li > p {font-size: 14px;}

    /* candy */
    .candy_swiper.swiper .swiper-slide {
        display: grid;
        grid-template-columns: 1fr 400px;
        align-items: center;
    }
    .candy_swiper.swiper .swiper-slide .txt_box {
        justify-self: end;
        text-align: left;
    }
    .candy_service > li {
        width: -webkit-calc(20% - 12px);
        padding-bottom: -webkit-calc(20% - 12px);
        background-position-y: 28%;
    }
    .candy_service > li.ieum {background-position-y: 30%;}

    /* gsp */
    .gsp_banner > span {
        position: absolute;
        left: 50%;
        top: 0;
        -webkit-transform: translateX(-50%);
        width: 420px;
        height: 45px;
        border-top: 0;
        background-color: transparent;
    }
    .gsp_banner .box_item {
        grid-template-columns: 1fr auto;
        row-gap: 30px;
        padding-top: 115px;
    }
    .gsp_banner .txt_box {
        align-self: end;
        text-align: left;
    }
    .gsp_banner .txt_box + img {
        width: 240px;
        grid-row: span 2;
    }
    .gsp_banner > h3 {padding: 34px 0;}
    .gsp_banner.stmk .txt_box {align-self: initial;}
    .gsp_banner.stmk .txt_box + img {grid-row: initial;}
    .gsp_banner.clsp > span {
        top: -3px;
        width: 480px;
        background-size: 100%;
    }
    .gsp_banner.clsp .txt_box + img {width: 300px;}
    .gsp_banner .btn_box {justify-content: start;}
    .gsp_info {grid-template-columns: repeat(3, 1fr);}
    .gsp_step > ul {display: none;}
    .gsp_step > img {display: block;}
    .gsp_price {
        grid-template-columns: repeat(2, 1fr);
        gap: 0 20px;
    }
    .gsp_price > li {padding-bottom: 24px;}
    .gsp_price > li > h3 {padding: 30px 0;}
    .gsp_price > li > h4 > span {padding-bottom: 0;}
    .gsp_price > li > div {padding: 24px 60px 0;}
    .gsp_club {gap: 0;}
    .gsp_club > li {width: 12.5%;}
    .gsp_club.col_6 > li {width: 16.6%;}

    /* news */
    .news_box {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 20px;
    }
    .news_box > li > a > div {height: 140px;}

    /* clients */
    .clients_box .item {grid-template-columns: repeat(3, 1fr);}

    /* faq */
    .faq_box > li {
        grid-template-columns: 180px 1fr;
        row-gap: 0;
        padding: 20px 0;
    }
    .faq_box > li > strong {text-align: center;}
    .faq_box > li > pre {
        grid-column: span 2;
        padding: 20px 0 10px 180px;
    }
}

/* tablet - max */
@media(min-width: 1024px) {}

/* desktop */
@media(min-width: 1200px) {
    /* sub - banner */
    .sub_banner {height: 350px;}

    /* sub - contact */
    .sub_contact {padding: 90px 0;}
    .sub_contact .box_item {grid-template-columns: 1fr auto;}
    .sub_contact .txt_box {text-align: left;}

    /* fill */
    .fill_box {
        height: 350px;
        padding: 0;
    }
    .fill_box > p {
        font-size: 26px;
        line-height: 42px;
    }
    .fill_box > p > span {padding-top: 10px;}

    /* button */
    .btn {font-size: 16px;}
    .btn.lg {width: 240px;}
    .btn:not(.off):not(.no_hv):hover {
        border-color: #1A1C21;
        color: #FFF;
        background-color: #1A1C21;
    }
    .btn.line_wh:not(.off):not(.no_hv):hover  {
        border-color: #FFF;
        color: #009DFF;
        background-color: #FFF;
    }
    .btn.line_be:not(.off):not(.no_hv):hover {
        border-color: #009DFF;
        color: #009DFF;
        background-color: #FFF;
    }
    .btn.line_be2:not(.off):not(.no_hv):hover {
        border-color: #0975ED;
        color: #0975ED;
        background-color: #FFF;
    }
    .btn.line_pl:not(.off):not(.no_hv):hover {
        border-color: #4F4DCC;
        color: #4F4DCC;
        background-color: #FFF;
    }
    .btn.fill_be:not(.off):not(.no_hv):hover {
        border-color: #009DFF;
        background-color: #009DFF;
    }
    .btn.fill_be2:not(.off):not(.no_hv):hover {
        border-color: #0975ED;
        background-color: #0975ED;
    }
    .btn.fill_pl:not(.off):not(.no_hv):hover {
        border-color: #4F4DCC;
        background-color: #4F4DCC;
    }
    .btn.txt_rd:not(.off):not(.no_hv):hover {
        border-color: #E72E46;
        background-color: #E72E46;
    }

    /* tab_box */
    .tab_box {
        row-gap: 32px;
        padding: 100px 0;
    }
    .tab_box .item > ul {column-gap: 20px;}
    .tab_box .item > ul > li > a {
        padding-bottom: 8px;
        font-size: 18px;
    }
    .tab_box .item > ul > li > a:hover {color: #009DFF;}
    .tab_box > h2 {
        font-size: 56px;
        font-weight: 800;
        letter-spacing: -1px;
    }
    .tab_box > h2 > span {padding-right: 16px;}
    .tab_box > h2 > span::after {
        bottom: 8px;
        width: 9px;
        height: 9px;
    }

    /* tab - sub */
    .tab_sub {
        border-left: 1px solid #D9DBE0;
        border-right: 1px solid #D9DBE0;
        border-radius: 4px;
    }
    .tab_sub > li > a {
        border-left: 0;
        border-right: 0;
        font-size: 16px;
    }
    .tab_sub > li > a:not(.on)::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        width: 1px;
        height: 50%;
        background-color: #D9DBE0;
    }
    .tab_sub > li > a:not(.on):hover {
        color: #069FFF;
        background-color: #F2F9FF;
    }
    .tab_sub > li:first-of-type > a {border-radius: 4px 0 0 4px;}
    .tab_sub > li:last-of-type > a {border-radius: 0 4px 4px 0;}
    .tab_sub > li:last-of-type > a::after {display: none;}
    .tab_sub.faq {margin-bottom: 24px;}
    .tab_sub.faq > li {
        flex: 1;
        width: auto;
    }

    /* content */
    .content_box {gap: 60px;}

    /* text */
    .txt_box {row-gap: 16px;}
    .txt_box > h2 {
        font-size: 32px;
        line-height: 44px;
    }
    .txt_box > h2.lg {
        font-size: 38px;
        line-height: 52px;
    }
    .txt_box > h3 {
        font-size: 26px;
        letter-spacing: -.6px;
        line-height: 40px;
    }
    .txt_box > h4 {
        font-size: 24px;
        line-height: 34px;
    }
    .txt_box > h5 {
        font-size: 22px;
        line-height: 32px;
    }

    /* page */
    .page_box > li > a:not(.active):hover {
        border-color: #F7F8F9;
        background-color: #F7F8F9;
    }

    /* greeting */
    .greeting_box .txt_box {padding: 48px;}

    /* history */
    .history_box {
        column-gap: 140px;
        margin-bottom: 60px;
    }
    .history_box:nth-of-type(2) {
        padding-bottom: 100px;
        margin-bottom: 20px;
        border-bottom: 1px solid #D9DBE0;
    }
    .history_box > h3 {row-gap: 20px;}
    .history_box > h3 > span {font-size: 32px;}
    .history_box > h3 > span.choice:hover {color: #1A1C21;}
    .history_box .item {row-gap: 50px;}
    .history_box .item > li {row-gap: 20px;}
    .history_box .item > li > h4 {font-size: 26px;}
    .history_box .item > li > a:hover {
        padding-left: 16px;
        font-weight: 600;
        color: #009DFF;
    }
    .history_box .item > li > a:hover > span {background-image: url(../img/icon/arrow_right_line_py.svg);}

    /* organization */
    .organization_box {row-gap: 136px;}
    .organization_box > strong {
        width: 176px;
        height: 176px;
        font-size: 26px;
        line-height: 134px;
        border: 24px solid #D8F0FF;
    }
    .organization_box > strong::after {height: 80px;}
    .organization_box > span {
        display: block;
        top: 231px;
        width: -webkit-calc(75% + 20px);
    }
    .organization_box > ul {
        grid-template-columns: repeat(4, 1fr);
        gap: 0 24px;
    }
    .organization_box > ul > li::after {
        height: 80px;
        top: -80px;
    }
    .organization_box .item {padding: 32px 24px;}
    .organization_box .item > h3 {
        font-size: 20px;
        padding-bottom: 20px;
    }
    .organization_box .item > p {padding-top: 20px;}
    .organization_box .item:hover {
        border-color: #3AB3FF;
        background-color: #3AB3FF;
    }
    .organization_box .item:hover > h3 {
        border-color: #FFF;
        color: #FFF;
    }
    .organization_box .item:hover > p {color: #FFF;}

    /* brand */
    .brand_box .txt_box {row-gap: 12px;}
    .brand_box > ul {
        gap: 16px;
        padding-top: 32px;
    }
    .brand_box .color > li {
        padding: 28px 32px;
        text-align: left;
    }
    .brand_box .logo > li {height: 300px;}
    .brand_box .logo > li > img {height: 42px;}
    .brand_box:last-of-type .logo > li {
        width: -webkit-calc(20% - 16px);
        height: 180px;
    }
    .brand_box:last-of-type .logo > li > img {height: 38px;}
    .brand_box + .btn_box {
        display: grid;
        padding-top: 15px;
    }

    /* map */
    .map_info {row-gap: 40px;}
    .map_info > h3 {font-size: 26px;}
    .map_info .item > li {grid-template-columns: 100px 1fr;}
    .map_box #map {height: 500px;}

    /* ieum */
    .ieum_banner {padding: 120px 0 0;}
    .ieum_banner .imita_swiper {margin-bottom: 120px;}
    .ieum_banner .item {grid-row: 3;}
    .ieum_banner .item > img {position: absolute;}
    .ieum_banner .item > img:nth-of-type(1) {
        position: relative;
        margin: 0 auto;
    }
    .ieum_banner.imsn .item > img:nth-of-type(1) {width: 840px;}
    .ieum_banner.imsn .item > img:nth-of-type(2) {
        left: 50px;
        top: 120px;
        width: 260px;
    }
    .ieum_banner.imsn .item > img:nth-of-type(3) {
        left: 100px;
        bottom: 70px;
        width: 450px;
    }
    .ieum_banner.imsn .item > img:nth-of-type(4) {
        right: 50px;
        bottom: -26px;
        width: 300px;
    }
    .ieum_banner.icdy .item > img:nth-of-type(1) {width: 580px;}
    .ieum_banner.icdy .item > img:nth-of-type(2) {
        left: 28%;
        bottom: 40px;
        width: 520px;
    }
    .ieum_banner.imitw .item > img:nth-of-type(1) {width: 800px;}
    .ieum_banner.imitw .item > img:nth-of-type(2) {
        left: 40px;
        bottom: 40px;
        width: 380px;
    }
    .ieum_banner.imbu .item > img:nth-of-type(1) {width: 840px;}
    .ieum_banner.imbu .item > img:nth-of-type(2) {
        left: 60px;
        bottom: 20px;
        width: 260px
    }
    .ieum_banner.imbu .item > img:nth-of-type(3) {
        right: 80px;
        top: 40px;
        width: 220px;
    }
    .ieum_banner .btn_box {
        grid-row: 2;
        margin-bottom: 60px;
    }
    .ieum_banner .btn_box .btn {
        width: 100%;
        min-width: 170px;
        font-size: 14px;
        line-height: 42px;
    }
    .ieum_service {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .ieum_service.col_2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
    .ieum_service > li {
        padding: 40px 32px;
        border-radius: 16px;
    }
    .ieum_service > li > i {
        width: 48px;
        height: 48px;
    }
    .ieum_service > li >  h3 {
        padding: 40px 0 12px;
        font-size: 20px;
    }
    .ieum_couns .item {
        align-content: center;
        row-gap: 40px;
        height: 420px;
        padding: 0;
        border-radius: 16px;
    }
    .ieum_couns:not(.no_bf)::before {display: block;}
    .ieum_couns .item > h2 {
        font-size: 32px;
        letter-spacing: -.6px;
        line-height: 44px;
    }
    .ieum_couns .item .btn {width: 200px;}
    .ieum_other {
        max-width: 800px;
        gap: 24px;
    }
    .ieum_other > li > a {
        height: 200px;
        padding: 40px;
        border-radius: 16px;
        background-position: -webkit-calc(100% - 24px) -webkit-calc(100% - 24px);
        background-size: 48px;
    }
    .ieum_other > li > a > p {padding-top: 12px;}
    .ieum_other > li > a:hover {
        border-color: #3AB2FD;
        background-image: url(../img/icon/arrow_right_line_wh.svg);
        background-color: #3AB2FD;
    }
    .ieum_other > li > a:hover > h3,
    .ieum_other > li > a:hover > p {
        color: #FFF;
    }
    .ieum_price {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .ieum_price > li {
        grid-template-columns: 1fr;
        border-radius: 6px;
    }
    .ieum_price > li > h3 {
        grid-row: initial;
        padding: 28px 0;
        border-radius: 6px 6px 0 0;
        font-size: 26px;
    }
    .ieum_price > li > h3 > small {
        padding-top: 10px;
        font-size: 20px;
    }
    .ieum_price > li > div {
        padding: 0 24px;
        border-top: 0;
    }
    .ieum_price > li > div > p {
        display: block;
        padding: 16px 0;
        border-top: 1px solid #D9DBE0;
    }
    .ieum_price > li > div:nth-of-type(1) > p:first-of-type {border-top: 0;}
    .ieum_price > li > strong {
        padding: 30px 0;
        margin: 0 24px;
        font-size: 20px;
    }

    /* wizsign */
    .wiz_work {
        grid-template-columns: repeat(3, 120px);
        justify-content: end;
        gap: 16px;
    }
    .wiz_work > li {font-size: 14px;}
    .wiz_step {
        gap: 0 48px;
        max-width: 1100px;
    }
    .wiz_step > li {padding: 32px 0;}
    .wiz_step > li::after {
        right: -48px;
        width: 48px;
    }
    .wiz_step > li > h3 {padding-bottom: 10px;}
    .wiz_step > li > p {font-size: 20px;}

    /* candy */
    .candy_swiper.swiper {
        margin-top: 120px;
        border-radius: 16px;
    }
    .candy_swiper.swiper .swiper-slide {
        grid-template-columns: 1fr 450px;
        padding: 120px 120px 0;
    }
    .candy_swiper.swiper .swiper-slide .txt_box {justify-self: start;}
    .candy_swiper.swiper .swiper-pagination {top: 40px;}

    /* gsp */
    .gsp_banner .box_item {padding: 140px 0 100px;}
    .gsp_banner .txt_box {row-gap: 10px;}
    .gsp_banner .txt_box > small {font-size: 18px;}
    .gsp_banner > h3 {
        padding: 44px 0;
        font-size: 26px;
    }
    .gsp_banner .btn_box .btn {
        padding: 0;
        width: 140px;
        font-size: 14px;
        line-height: 42px;
    }
    .gsp_banner.clsp .txt_box + img {width: 368px;}
    .gsp_banner.clsp ~ .tab_sub {margin-top: 60px;}
    .gsp_info {gap: 24px;}
    .gsp_info > li {padding: 40px;}
    .gsp_info .txt_box {row-gap: 12px;}
    .gsp_info .txt_box > h5 {font-size: 20px;}
    .gsp_step > ul {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        gap: 0 12px;
        padding: 0 0 60px 0;
        background: url(../img/sub/gsp_stmk_line.png) no-repeat center bottom;
        background-size: 100%;
    }
    .gsp_step > ul > li {
        padding: 26px 0;
        border: 0;
    }
    .gsp_step > ul > li > span {
        display: block;
        padding: 52px 0 0;
        line-height: normal;
        background: no-repeat center top;
        background-size: 40px;
    }
    .gsp_step > img {display: none;}
    .gsp_club {gap: 12px;}
    .gsp_club > li,
    .gsp_club.col_6 > li {
        width: 120px;
    }

    /* news */
    .news_box {
        gap: 55px 24px;
        margin-bottom: 15px;
    }
    .news_box > li > a > div {height: 220px;}
    .news_box > li > a > strong {
        padding: 16px 0 8px;
        font-size: 16px;
    }
    .news_box > li > a > p {
        font-size: 18px;
        line-height: 28px;
    }
    .news_box > li > a:hover > div > img {-webkit-transform: translate(-50%, -50%) scale(1.2);}
    .news_box > li > a:hover > p {
        font-weight: 600;
        letter-spacing: 0;
    }
    .news_detail {
        row-gap: 60px;
        padding: 100px 0 120px;
    }
    .news_detail > h2 {
        font-size: 32px;
        line-height: 44px;
        text-align: center;
    }
    .news_detail > h2 > span {font-size: 20px;}
    .news_detail .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        column-gap: 40px;
    }
    .news_detail .list > a {
        column-gap: 16px;
        padding: 20px 0 20px 32px;
        border-bottom: 0;
        background: url(../img/icon/arrow_left_bk.svg) no-repeat left center;
        background-size: 22px;
    }
    .news_detail .list > a > span {
        width: 108px;
        height: 60px;
        border: 1px solid #D9DBE0;
        border-radius: 4px;
        text-indent: -9999px;
        overflow: hidden;
    }
    .news_detail .list > a > span > img {display: block;}
    .news_detail .list > a > p {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .news_detail .list > a.next {
        grid-template-columns: 1fr auto;
        padding: 20px 32px 20px 0;
        background-image: url(../img/icon/arrow_right_bk.svg);
        background-position-x: right;
    }
    .news_detail .list > a.next > span {grid-column: 2;}
    .news_detail .list > a.next > p {
        grid-row: 1;
        grid-column: 1;
        text-align: right;
    }
    .news_detail .list > a:hover > span > img {-webkit-transform: translate(-50%, -50%) scale(1.3);}
    .news_detail .list > a:hover > p {text-decoration: underline;}

    /* clients */
    .clients_box {margin-bottom: 15px;}
    .clients_box .item {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px 24px;
    }

    /* faq */
    .faq_box {cursor: pointer;}
    .faq_box > li {padding: 22px 0;}
    .faq_box > li::after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 70px;
        height: 70px;
        background: url(../img/icon/arrow_down_bk.svg) no-repeat center;
        background-size: 24px;
        -webkit-transition: all .3s ease;
    }
    .faq_box > li.on::after {-webkit-transform: rotate(180deg);}

    /* form */
    form > .txt_box {
        row-gap: 2px;
        padding-bottom: 24px;
    }
    form > .txt_box > p {
        padding-left: 16px;
        font-size: 16px;
    }
    form > .txt_box > p::after {
        width: 6px;
        height: 6px;
    }
    .form_content {
        grid-template-columns: 200px 1fr;
        align-items: start;
    }
    .form_content > h3 {margin-top: 12px;}
    .form_box .item {grid-template-columns: 150px 1fr;}
    .form_box .item > input {
        grid-row: 1;
        grid-column: 2;
    }
    .form_box .item > textarea {grid-column: span 2;}
    .form_box .item > label {
        grid-row: 1;
        grid-column: 1;
        line-height: 49px;
        border-bottom: 1px solid #D9DBE0;
    }
    .form_box .item > input:focus + label {border-color: #009DFF;}
    .form_box .item.err > label {border-color: #FF0021 !important;}
    .form_box .item .selectBox {top: 49px;}
    .form_box .item .selectBox > p:hover {
        color: #FFF;
        background-color: #009DFF;
        cursor: pointer;
    }
    .form_content .errTxt {
        grid-column: 2;
        padding-top: 10px;
    }
    .form_submit {
        justify-self: center;
        width: 240px;
    }

    /* privac policy */
    .policy_box > div > table {width: 100%;}
}