/* button */
.btn_box {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
}
.btn {
    display: block;
    min-width: 180px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
    -webkit-transition: all .3s ease;
    cursor: pointer;
}
.btn.sm {
    min-width: auto;
    padding: 0 12px;
    font-size: 14px;
    line-height: 32px;
}
.btn.line_gy {
    border-color: #D0D3D9;
    color: #687283;
}
.btn.fill_wh {
    border-color: #FFF;
    background-color: #FFF;
}
.btn.fill_be {
    border-color: #3AB2FD;
    color: #FFF;
    background-color: #3AB2FD;
}
.btn.off {
    border-color: #D0D3D9;
    color: #FFF;
    background-color: #D0D3D9;
    cursor: no-drop;
}

/* tab */
.tab_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #D0D3D9;
}
.tab_fix .tab_box.on {
    position: fixed;
    left: 0;
    top: 70px;
    z-index: 9990;
    width: 100%;
    background-color: #FFF;
}
.tab_box > li {
    flex: 1;
    width: 100%;
    max-width: 600px;
}
.tab_box > li > a {
    display: block;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    line-height: 60px;
    text-align: center;
    color: #687283;
    -webkit-transition: all .3s ease;
}
.tab_box > li > a.on {color: #3AB2FD;}
.tab_box > li > a.on::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background-color: #3AB2FD;
}

/* text */
.txt_box {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
}
.txt_box.m_tct {text-align: center;}
.txt_box > .tit,
.txt_box > .tit.md {
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
}
.txt_box > .tit.sm,
.txt_box > .tit.smd {
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
}
.txt_box > .tit > span {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: #3AB2FD;
}
.txt_box > strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #3AB2FD;
}
.txt_box > p {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #89919C;
}
.txt_box .btn_box {padding-top: 10px;}

/* main */
.main_banner >.bg {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    width: 100%;
    height: 500px;
    border-radius: 15px;
    background: url(../img/main/banner_dot.png) no-repeat center #001738;
    background-size: 140%;
}
.main_banner .item {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
}
.main_banner .item > h2 {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: #FFF;
}
.main_banner .item > span {
    display: block;
    justify-self: center;
    padding: 0 20px;
    margin-top: 30px;
    border: 1px solid #FFF;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 50px;
    color: #FFF;
    cursor: pointer;
    -webkit-transition: all .3s ease;
}
.main_banner .roll_swiper.swiper {
    width: 100%;
    height: 50px;
    margin: 8px 0;
}
.main_banner .roll_swiper.swiper .swiper-wrapper {transition-timing-function: linear;}
.main_banner .roll_swiper.swiper .swiper-slide {
    opacity: 1;
    -webkit-transition: opacity .5s ease;
}
.main_banner .roll_swiper.swiper .swiper-slide.swiper-slide-prev {opacity: 0;}
.main_banner .roll_swiper.swiper .swiper-slide > strong {
	display: inline-block;
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    background: -webkit-linear-gradient(0deg, #3AB2FD 20%, #2A72FD 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main_corporation {
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px 0 80px;
}
.main_corporation .mc_swiper.swiper {width: 100%;}
.main_corporation .mc_swiper.swiper .swiper-wrapper {transition-timing-function: linear;}
.main_sv > .txt_box {text-align: center;}
.main_sv .item,
.main_sv .item > ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
.main_sv .item > ul > li {
    padding: 40px 30px;
    border: 1px solid #D0D3D9;
    border-radius: 20px;
    background-color: #FFF;
}
.main_sv .item > ul > li .txt_box > i {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto 10px;
    background: no-repeat center;
    background-size: 100%;
}
.main_sv .item > ul > li .txt_box > i.safe {background-image: url(../img/icon/main_sv_safe.svg);}
.main_sv .item > ul > li .txt_box > i.point {background-image: url(../img/icon/main_sv_point.svg);}
.main_sv .item > ul > li .txt_box > i.cash {background-image: url(../img/icon/main_sv_cash.svg);}
.main_sv .item > ul > li .txt_box > i.law {background-image: url(../img/icon/main_sv_law.svg);}
.main_skill {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    max-width: 744px;
    margin: 0 auto;
}
.main_skill > li {
    display: grid;
    grid-template-columns: 1fr;
    padding: 40px 30px;
    border: 2px solid #FFF;
    border-radius: 10px;
    background-color: #FFF;
    -webkit-transition: border .3s ease;
}
.main_skill > li > h3 {
    padding: 50px 0 40px;
    font-size: 22px;
    font-weight: 600;
    line-height: 32px;
    background: url(../img/icon/logo_ieumtax_en.svg) no-repeat left top;
    background-size: auto 32px;
}
.main_skill > li > div {
    display: grid;
    align-self: end;
    grid-template-columns: 1fr;
    row-gap: 10px;
}
.main_skill > li:nth-of-type(2) > h3 {background-image: url(../img/icon/logo_ieumpay_en.svg);}
.main_review {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;
    padding: 120px 0 0;
}
.main_review .mr_swiper.swiper {width: 100%;}
.main_review .item {
    height: 100%;
    padding: 40px 24px;
    border: 1px solid #D0D3D9;
    border-radius: 10px;
    background-color: #FFF;
    -webkit-transition: background-color .3s ease;
}
.main_review .item > strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #3AB2FD;
}
.main_review .item > h3 {
    padding: 20px 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
.main_review .item > p {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #687283;
}
.main_review .item > p:last-of-type {
    padding-top: 20px;
    line-height: normal;
}
.main_review .swiper-slide.swiper-slide-prev + .swiper-slide .item {
    border-color: #0E2546;
    background-color: #0E2546;
}
.main_review .swiper-slide.swiper-slide-prev + .swiper-slide .item > h3 {font-weight: 600;}
.main_review .swiper-slide.swiper-slide-prev + .swiper-slide .item > h3,
.main_review .swiper-slide.swiper-slide-prev + .swiper-slide .item > p {
    color: #FFF;
}
.main_faq .tab {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 30px;
}
.main_faq .tab > li {
    padding: 0 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
    color: #89919C;
    border-radius: 8px;
    background-color: #F5F6F9;
    cursor: pointer;
}
.main_faq .tab > li.on {
    color: #FFF;
    background-color: #3AB2FD;
}
.main_faq .list {display: none;}
.main_faq .list.on {display: block;}
.main_faq .list > li {
    padding: 24px 0;
    border-bottom: 1px solid #D0D3D9;
}
.main_faq .list > li > h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    cursor: pointer;
}
.main_faq .list > li > p {
    display: none;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #687283;
    cursor: pointer;
}
.main_faq .list > li > p.open {display: block;}
.main_contact {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    row-gap: 20px;
    width: 100%;
    max-width: 1000px;
    padding: 100px 0;
    margin: 0 auto;
    background: url(../img/main/banner_contact_m.png) no-repeat center #0E2546;
    background-size: 100%;
}
.main_contact .btn {justify-self: center;}

/* tax */
.tax_step {position: relative;}
.tax_step.back::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 10px;
    border-top-right-radius: 10px;
    background-color: #F4F6F8;
}
.tax_step > video {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 10px;
    outline: none;
    border: 0;
    box-shadow: none;
}
.tax_item {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
}
.tax_item > li {
    position: relative;
    border-radius: 10px;
}
.tax_item > li > img {padding-top: 40px;}
.tax_item > li.dash {
    padding-top: 50px;
    background-color: #F8F1FF;
    overflow: hidden;
}
.tax_item > li.dash > img {
    position: relative;
    left: 26px;
    width: 150%;
}
.tax_item > li.code {
    padding: 50px 18px 40px;
    background-color: #ECF7FF;
}
.tax_item > li.code > img {
    max-width: 430px;
    margin: 0 auto;
}
.tax_item > li.error {
    padding: 50px 0 40px;
    background-color: #FFF1F5;
}
.tax_scBox {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 120px 20px;
    margin: 0 auto;
}
.tax_scBox > .osd {
    position: sticky;
    left: 0;
    top: 210px;
    width: 100%;
}
.tax_scBox > .txt_box {margin-bottom: 40px;}
.tax_sc {
    display: grid;
    grid-template-columns: 700px 1fr;
    align-items: center;
    column-gap: 70px;
}
.tax_sc > li {
    position: relative;
    height: 490px;
}
.tax_sc > li > img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 15;
}
.tax_sc > li > img:nth-of-type(2) {z-index: 10;}
.tax_sc > li > img:nth-of-type(3) {z-index: 5;}
.tax_sc .txt {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    row-gap: 24px;
}
.tax_sc .txt > div > h3 {
    font-size: 28px;
    font-weight: 700;
    color: #D0D3D9;
    -webkit-transition: font-size .3s ease;
}
.tax_sc .txt > div > p {
    height: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #89919C;
    opacity: 0;
    -webkit-transition: all .3s ease;
}
.tax_sc .txt > div.on > h3 {
    font-size: 36px;
    color: #1A1C21;
}
.tax_sc .txt > div.on > p {
    height: auto;
    padding: 14px 0 56px;
    opacity: 1;
}
.tax_scBox .empty {display: none;}
.tax_scBox .empty > div {
    width: 100%;
    height: 490px;
}
.tax_corporation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tax_service {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;
}
.tax_service > li > img {margin-bottom: 20px;}
.tax_solution {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
}
.tax_solution > li {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    row-gap: 20px;
    padding: 40px 24px;
    border: 2px solid #FFF;
    border-radius: 10px;
    background-color: #FFF;
    -webkit-transition: border .3s ease;
}
.tax_solution > li > h3 {
    font-size: 20px;
    font-weight: 600;
}
.tax_solution > li > h3 > span {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    color: #89919C;
    -webkit-transition: color .3s ease;
}
.tax_solution > li > small {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #89919C;
}
.tax_solution > li > div {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 12px;
}
.tax_solution > li > div > p {
    padding-left: 26px;
    font-size: 16px;
    font-weight: 500;
    color: #687283;
    background: url(../img/icon/chk_gy.svg) no-repeat left center;
    background-size: 20px;
    -webkit-transition: background .3s ease;
}
.tax_solution > li > div > p.plus {background-image: url(../img/icon/plus_gy.svg);}

/* tax - outsourcing */
.tos_history {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 30px;
    position: relative;
    padding: 100px 0 0 40px;
}
.tos_history::before {
    content: '';
    display: block;
    position: absolute;
    left: 40px;
    top: 0;
    z-index: 5;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #FFF 0%, #3AB2FD 13%, #3AB2FD 100%);
}
.tos_history > li {
    display: grid;
    grid-template-columns: 1fr;
}
.tos_history > li > p {
    position: relative;
    padding-left: 24px;
    font-size: 18px;
    font-weight: 600;
    color: #89919C;
}
.tos_history > li > p::before {
    content: '';
    display: block;
    position: absolute;
    left: -9px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    z-index: 10;
    width: 13px;
    height: 13px;
    border: 4px solid #3AB2FD;
    border-radius: 999px;
    background-color: #FFF;
}
.tos_history > li .step {padding: 30px 0 30px 20px;}
.tos_history > li .step > h3 {
    padding-left: 36px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    background: url(../img/tax/profile_charge.png) no-repeat left center;
    background-size: 30px;
}
.tos_history > li .step > p {
    padding-left: 9px;
    background: url(../img/icon/triangle_left_be.svg) no-repeat left center;
    background-size: 10px;
}
.tos_history > li .step > p > span {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #FFF;
    background-color: #3AB2FD;
}
.tos_history > li .step.work > h3 {background-image: url(../img/tax/profile_worker.png);}
.tos_history > li .step.work > p {background-image: url(../img/icon/triangle_left_ny.svg);}
.tos_history > li .step.work > p > span {background-color: #0E2546;}
.tos_history > li > strong {
    display: block;
    position: relative;
    padding-left: 26px;
    margin-top: 70px;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}
.tos_history > li > strong::before {
    content: '';
    display: block;
    position: absolute;
    left: -13px;
    top: 0;
    z-index: 10;
    width: 30px;
    height: 30px;
    background: url(../img/icon/chk_circle_be.svg) no-repeat center;
    background-size: 100%;
}
.tos_corporation {
    display: grid;
    grid-template-columns: 1fr;
}
.tos_corporation .tos_swiper.swiper {width: 100%;}
.tos_corporation .tos_swiper.swiper .swiper-wrapper {transition-timing-function: linear;}
.tos_corporation .tos_swiper.swiper .swiper-slide {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
}
.tos_corporation .tos_swiper.swiper .swiper-slide > img {
    width: auto;
    height: 26px;
}
.tos_corporation .tos_swiper.swiper .swiper-slide > img.douzone {height: 16px;}
.tos_corporation .tos_swiper.swiper .swiper-slide > img.yeta {height: 19px;}
.tos_corporation .tos_swiper.swiper .swiper-slide > img.erp {height: 20px;}
.tos_corporation > img {
    display: none;
    margin: 0 auto;
}
.tos_corporation .item {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 20px;
}
.tos_corporation .item > li {
    width: 100%;
    padding: 30px 24px;
    border: 3px solid transparent;
    border-radius: 20px;
    text-align: center;
    background-color: #FFF;
    -webkit-transition: border .3s ease;
}
.tos_corporation .item > li > h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
}
.tos_corporation .item > li > span {
    display: inline-block;
    padding: 14px 40px;
    margin: 30px 0 10px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 600;
    color: #FFF;
    background-color: #0E2546;
    -webkit-transition: background-color .3s ease;
}
.tos_corporation .item > li > p {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #D0D3D9;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #687283;
}
.tos_corporation .item > li > h4 {
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 600;
}
.tos_corporation .item > li > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.tos_corporation .item > li > div > p {
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 600;
    color: #687283;
    background-color: #F5F6F9;
    -webkit-transition: all .3s ease;
}
.tos_corporation .item > li > div.sm > p {padding: 10px;}
.tos_corporation .item > li > div > span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #687283;
}
.tos_corporation .item > li > i {
    display: block;
    height: 70px;
    background: url(../img/icon/add_circle_ny.svg) no-repeat center;
    background-size: 30px;
    -webkit-transition: background .3s ease;
}
.tos_review {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
}
.tos_review > li {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    padding: 40px 24px;
    border-radius: 10px;
    background-color: #FFF;
}
.tos_review > li > strong {
    display: block;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: #3AB2FD;
}
.tos_review > li > h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
.tos_review > li > p {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #687283;
}
.tos_review > li > p > span {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: #1A1C21;
}
.tos_review > li > span {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #687283;
}

/* pay - outsourcing */
.pos_service {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
.pos_service > li {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
}
.pos_service > li > i {
    display: block;
    width: 55px;
    height: 55px;
    margin: 0 auto;
    background: no-repeat center;
    background-size: 100%;
}
.pos_service > li > i.lock {background-image: url(../img/icon/pos_sv_lock.svg);}
.pos_service > li > i.time {background-image: url(../img/icon/pos_sv_time.svg);}
.pos_service > li > i.cash {background-image: url(../img/icon/pos_sv_cash.svg);}
.pos_service > li > i.law {background-image: url(../img/icon/pos_sv_law.svg);}
.pos_service > li .txt_box {text-align: center;}
.pos_scope {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.pos_scope > li {
    padding: 24px;
    border-radius: 10px;
    background-color: #FFF;
}
.pos_scope .txt_box .tit {
    padding-left: 42px;
    line-height: 34px;
    background: no-repeat left center;
    background-size: 34px;
}
.pos_scope .txt_box .tit.cash {background-image: url(../img/icon/pos_sp_cash.svg);}
.pos_scope .txt_box .tit.report {background-image: url(../img/icon/pos_sp_report.svg);}
.pos_scope .txt_box .tit.stack {background-image: url(../img/icon/pos_sp_stack.svg);}
.pos_scope .txt_box .tit.save {background-image: url(../img/icon/pos_sp_save.svg);}
.pos_scope .txt_box .tit.heart {background-image: url(../img/icon/pos_sp_heart.svg);}
.pos_scope .txt_box .tit.star {background-image: url(../img/icon/pos_sp_star.svg);}
.pos_step {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 
    40px;
}
.pos_step .txt_box .tit {
    position: relative;
    padding-top: 40px;
}
.pos_step .txt_box .tit::before {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #FFF;
    background-color: #3AB2FD;
}
.pos_step > li:nth-of-type(1) .txt_box .tit::before {content: '1';}
.pos_step > li:nth-of-type(2) .txt_box .tit::before {content: '2';}
.pos_step > li:nth-of-type(3) .txt_box .tit::before {content: '3';}
.pos_step > li:nth-of-type(4) .txt_box .tit::before {content: '4';}

/* cross */
.cross_box {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 40px 0;
    border-radius: 10px;
    background-color: #0E2546;
}
.cross_box .cross_swiper.swiper {width: 100%;}
.cross_box .cross_swiper.swiper .swiper-wrapper {transition-timing-function: linear;}
.cross_box .cross_swiper.swiper:nth-of-type(2) {margin-bottom: 0;}

/* outsourcing */
.osi_box {
    row-gap: 64px;
    max-width: 1000px;
    padding: 100px 0;
    background-color: #0E2546;
}
.osi_swiper.swiper {width: 100%;}
.osi_swiper.swiper .swiper-wrapper {transition-timing-function: linear;}

/* floating */
.floating .item {
    display: none;
    position: fixed;
    left: 0;
    bottom: 30px;
    z-index: 999;
    width: 100%;
    text-align: center;
}
.floating .item.stay {
    position: static;
    left: initial;
    bottom: initial;
}
.floating .item .btn {
    display: inline-block;
    box-shadow: 0px 10px 20px 0px rgba(58, 178, 253, .3);
}

/* Download Introduction */
.did_wrap {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 40px;
    width: 100%;
    max-width: 422px;
    padding: 60px 20px 96px;
    margin: 0 auto;
}
.did_wrap > h2 > p {
    margin-bottom: 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
}
.did_wrap > h2 > small {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #687283;
}
.did_box {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
}
.did_box .item {
    position: relative;
    height: 54px;
}
.did_box .item > input {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    border: 1px solid #D9DBE0;
    border-radius: 6px;
    background: no-repeat 14px center;
    background-size: 24px;
    -webkit-transition: border-color .3s ease;
}
.did_box .item.company > input {background-image: url(../img/icon/did_company.svg);}
.did_box .item.user > input {background-image: url(../img/icon/did_user.svg);}
.did_box .item.work > input {background-image: url(../img/icon/did_work.svg);}
.did_box .item.scale > input {background-image: url(../img/icon/did_scale.svg);}
.did_box .item.email > input {background-image: url(../img/icon/did_email.svg);}
.did_box .item.phone > input {background-image: url(../img/icon/did_phone.svg);}
.did_box .item > strong,
.did_box .sltBox .item input:focus + strong {
    position: absolute;
    left: 48px;
    top: 17px;
    z-index:5;
    font-size: 16px;
    color: #ACB1BC;
    -webkit-transition: all .2s ease;
}
.did_box article:not(.sltBox) .item > input:focus,
.did_box .item.errVal > input,
.did_box .item.pass > input,
.did_box .sltBox .item.pass > input {
    padding: 15px 14px 0;
    border-color: #3AB2FD;
    background: none;
}
.did_box .item > input:focus + strong,
.did_box .item.errVal > strong,
.did_box .item.pass > strong,
.did_box .sltBox .item.pass > strong,
.did_box .sltBox .item.pass > input:focus + strong {
    left: 14px;
    top: 6px;
    font-size: 10px;
    color: #3AB2FD;
}
.did_box .item.err > input {border-color: #FF0021 !important;}
.did_box .item.err > strong {color: #ACB1BC !important;}
.did_box .sltBox .item::after {
    content: '';
    display: block;
    position: absolute;
    right: 1px;
    top: 1px;
    z-index: 5;
    width: 52px;
    height: 52px;
    background: url(../img/icon/arrow_down_bk.svg) no-repeat center;
    background-size: 20px;
}
.did_box .sltBox .item > input {
    caret-color: transparent;
    padding-right: 54px;
    cursor: pointer;
}
.did_box .sltBox .item > input:focus {border-color: #3AB2FD;}
.did_box .sltBox .item > input:focus ~ .sltList {
    display: block;
    opacity: 1;
    max-height: 200px;
}
.did_box .sltList {
    display: block;
    position: absolute;
    left: 0;
    top: 58px;
    z-index: 100;
    width: 100%;
    max-height: 0;
    border: 1px solid #D9DBE0;
    border-radius: 6px;
    background-color: #FFF;
    box-shadow: 2px 6px 10px 0px rgba(0, 0, 0, .1);
    overflow: auto;
    opacity: 0;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all .2s ease;
}
.did_box .sltList > ul > li {
    padding: 0 14px;
    font-size: 16px;
    line-height: 44px;
    cursor: pointer;
}
.did_box .sltList > ul > li:first-of-type {border-radius: 6px 6px 0 0;}
.did_box .sltList > ul > li:last-of-type {border-radius: 0 0 6px 6px;}
.did_box .sltList > ul > li:hover {background-color: #F5F6F9;}
.did_wrap .errTxt {
    display: none;
    padding-top: 6px;
    font-size: 12px;
    color: #FF0021;
}
.did_chk {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    padding-top: 20px;
}
.did_chk label {
    display: inline-block;
    padding-left: 32px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    background: url(../img/icon/chk_off.png) no-repeat left center;
    background-size: 24px;
    cursor: pointer;
    -webkit-transition: background .3s ease;
}
.did_chk .all label {
    font-size: 18px;
    font-weight: 600;
    background-image: url(../img/icon/chk_all_off.svg);
}
.did_chk input {display: none;}
.did_chk input:checked + label {background-image: url(../img/icon/chk_on.png);}
.did_chk .all input:checked + label {background-image: url(../img/icon/chk_all_on.svg);}
.did_chk label + a {
    display: inline-block;
    margin-left: 6px;
    font-size: 16px;
    text-decoration: underline;
    color: #7E8797;
}
.did_modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 28, .7);
}
.did_modal .item {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    width: 88%;
    max-width: 420px;
    padding: 24px 24px 14px;
    border-radius: 10px;
    background-color: #FFF;
}
.did_modal .item > h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
}
.did_modal .item > h3 > span {
    display: inline-block;
    font-size: inherit;
    font-weight: inherit;
    color: #3AB2FD;
}
.did_modal .item > p {
    padding: 6px 0 30px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #687283;
}
.did_modal .item .btn.sm {
    width: 80px;
    padding: 0;
    margin: 6px auto 0;
    border: 0;
    color: #89919C;
}
.did_modal .item .btn.sm:hover {text-decoration: underline;}