@charset "UTF-8";

/* header */
#lnb_pc .ul-second-menu-wrap>.service {display: inline-block;}
/* //header */


/* 제공 API */
.table-wrap {margin-top: 9rem;}

.table-wrap .caption {font-size: 2.375rem; font-weight: 800;}
.table-wrap .caption .tint {color: var(--highlight);}

.table-wrap .ul-table {border-top: 4px solid var(--highlight); margin-top: 48px;}
.table-wrap .ul-table>li {display: grid; grid-template-columns: 144px 144px calc(100% - 488px) 100px 100px;}
.table-wrap .ul-table .th,
.table-wrap .ul-table .td {padding: 18px 12px; border-bottom: 2px solid #ddd;}
.table-wrap .ul-table .th {display: -webkit-flex; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; font-weight: 700; background-color: #f3f3f3; text-align: center;}
.table-wrap .ul-table .td {line-height: 1.75;}
.table-wrap .ul-table .td:not(.td-api) {display: -webkit-flex; display: flex; justify-content: center; align-items: center;}
.table-wrap .ul-table .th + .th, 
.table-wrap .ul-table .td-tech, 
.table-wrap .ul-table .td-api, 
.table-wrap .ul-table .td-allowance, 
.table-wrap .ul-table .td-method {border-left: 2px solid #ddd;}
.table-wrap .ul-table .td-tech {font-weight: 500; text-align: center;}
.table-wrap .ul-table .td-api {padding: 18px 52px; display: grid; grid-template-columns: repeat(3, calc(100%/3)); font-weight: 400;}
.table-wrap .ul-table .td-allowance {font-weight: 700;}

.table-wrap .ul-table .td-api>li {flex: 1 1 0;}
.table-wrap .ul-table .td-api>li::before {content: '· ';}

.table-wrap .ul-table .th-area .th-api {grid-column: 2 / span 2;}

.table-wrap .ul-table .td-area .th-tech {grid-column: 1 / span 1;}

.table-wrap .ul-table .td-area .th-speech, 
.table-wrap .ul-table .td-area .td-method.td-speech {grid-row: 1 / span 4;}
.table-wrap .ul-table .td-area .td-tech {grid-column: 2 / span 1;}
.table-wrap .ul-table .td-area .td-api {grid-column: 3 / span 1;}
.table-wrap .ul-table .td-area .td-allowance {grid-column: 4 / span 1;}
.table-wrap .ul-table .td-area .td-method {grid-column: 5 / span 1; text-align: center;}
.table-wrap .ul-table .td-area .td-speech1 {grid-row: 1 / span 1;}
.table-wrap .ul-table .td-area .td-speech2 {grid-row: 2 / span 1;}
.table-wrap .ul-table .td-area .td-speech3 {grid-row: 3 / span 1;}
.table-wrap .ul-table .td-area .td-speech4 {grid-row: 4 / span 1;}

.table-wrap .ul-table .td-area .th-language, 
.table-wrap .ul-table .td-area .td-method.td-language {grid-row: 5 / span 3;}
.table-wrap .ul-table .td-area .td-language1 {grid-row: 5 / span 1;}
.table-wrap .ul-table .td-area .td-language2 {grid-row: 6 / span 1;}
.table-wrap .ul-table .td-area .td-language3 {grid-row: 7 / span 1;}
.table-wrap .ul-table .td-area .td-language4 {grid-row: 8 / span 1;}

.table-wrap .ul-table .td-area :is(.th-solution, .td-solution) {grid-row: 10 / span 3;}
.table-wrap .ul-table .td-area .td-solution1 {grid-row: 10 / span 1;}
.table-wrap .ul-table .td-area .td-solution2 {grid-row: 11 / span 1;}
.table-wrap .ul-table .td-area .td-solution3 {grid-row: 12 / span 1;}

.table-wrap .notification {margin-top: 20px; font-weight: 455; color: var(--violet400);}

.btn-move {min-width: 228px; width: fit-content; height: 54px; padding: 0 80px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; border: 1px solid #000000; background-color: transparent; border-radius: 999px; font-weight: 500; font-size: 22px; color: #000; margin: 80px auto 0;}
.btn-move:hover {background-color: #000; color: #fff;}
/* //제공 API */


/* 사전 준비 사항 */
.service.prepare .cate-area .cate + .page-info {margin-top: 76px;}
.service.prepare .cate-area .page-info {font-size: 1.75rem; font-weight: 700;}

.step {display: -webkit-flex; display: flex; justify-content: end; align-items: start; gap: 36px;}
.step + .step {margin-top: 144px;}

.step1 {padding-top: 40px; margin-top: 80px; border-top: 2px solid #d9d9da;}

.step .img-area {display: block; object-fit: contain; -webkit-flex-shrink: 0; flex-shrink: 0;}
.step1 .img-area {width: 421px; height: 201px;}
.step2 .img-area {width: 421px; height: 213px;}
.step3 .img-area {width: 425px; height: 238px;}

.step1 .img-area {margin-top: -18px;}
.step2 .img-area {margin-top: -30px;}
.step3 .img-area {margin-top: -18px;}

.step .img-area img {width: 100%; height: 100%; object-fit: contain; display: block;}

.step .txt-area {width: calc(100% - 425px); -webkit-flex-shrink: 0; flex-shrink: 0;}

.step .step-tit {padding-bottom: 13px; display: -webkit-flex; display: flex; justify-content: start; align-items: center; column-gap: 12px; font-size: 1.875rem; font-weight: 800; margin-bottom: 28px; border-bottom: 2px solid #535353;}
.step .step-mark {width: max-content; height: 40px; padding: 10px 16px; background-color: var(--highlight); border-radius: 999px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; column-gap: 8px;}
.step .step-tit .step-mark .txt {font-size: 1.25rem; color: #fff; font-weight: 400; line-height: 1;}
.step .step-tit .step-mark .num {font-size: 1.625rem; color: #fff; font-weight: 700; line-height: 1;}

.ul-step>.step-item {
    counter-increment: li-counter;
    font-size: 1.25rem; font-weight: 500; line-height: 1.9;
}
.ul-step>.step-item::before {
    content: counter(li-counter) ". ";
}

.ul-step>.step-item .tint {color: var(--highlight);}
.ul-step>.step-item .tint-box {padding: 2px 4px; border: 2px solid #CBC1FF; border-radius: 3px; background-color: #F4F2FF; color: var(--highlight);}
/* //사전 준비 사항 */





@media screen and (max-width:1280px){
    .table-wrap>.scroll {width: calc(100% + var(--inner-padding-l)*2); margin-left: calc(0px - var(--inner-padding-l)); margin-right: calc(0px - var(--inner-padding-l));}
    .table-wrap .ul-table {width: 100%;}
    .table-wrap .ul-table>li {grid-template-columns: 132px 144px calc(100% - 476px) 100px 100px;}
    .table-wrap .ul-table .td-api {padding: 18px var(--inner-padding-l);}
    .btn-move {min-width: 200px; height: 48px; font-size: 20px;}

    .step1 .img-area {width: 368px; height: 176px;}
    .step2 .img-area {width: 368px; height: 186px;}
    .step3 .img-area {width: 372px; height: 208px;}
    .step .txt-area {width: calc(100% - 372px);}
}

@media screen and (max-width:992px){
    .table-wrap .ul-table .td-api {grid-template-columns: repeat(2, 50%);}
}

@media screen and (max-width:800px){
    .table-wrap .ul-table>li {grid-template-columns: 100px 112px calc(100% - 402px) 95px 95px;}
    .table-wrap .ul-table .td-api {padding: 15px 20px; grid-template-columns: unset;}
}

@media screen and (min-width:651px) and (max-width:768px){
    .step {flex-direction: column; align-items: end; gap: 0;}
    .step .img-area {margin-right: -42px;}
    .step .txt-area {width: 100%; margin-top: -36px;}
}

@media screen and (max-width:650px){
    .step {flex-direction: column; align-items: center;}
    .step1 .img-area {width: 100%; max-width: 421px; height: auto;}
    .step2 .img-area {width: 100%; max-width: 421px; height: auto;}
    .step3 .img-area {width: 100%; max-width: 425px; height: auto;}
    .step .txt-area {width: 100%;}
}

@media screen and (max-width:480px){
    .table-wrap>.scroll {overflow-x: auto; overflow-y: hidden;}
    .table-wrap .ul-table {min-width: 400px;}
    .table-wrap .ul-table>li {grid-template-columns: 45px 60px calc(100% - 231px) 68px 58px;}
    .table-wrap .ul-table .th,
    .table-wrap .ul-table .td {padding: 12px 10px;}
    .table-wrap .ul-table .th {font-size: 13px;}
    .table-wrap .ul-table .td-api {padding: 12px var(--inner-padding-l);}

    
    html:lang(en) .table-wrap .ul-table {min-width: 500px;}
    html:lang(en) .table-wrap .ul-table>li {grid-template-columns: 96px 110px calc(100% - 350px) 80px 64px;}
}