/*
reference 첫 페이지 는 guide-article 이다.
그렇기 때문에 article 클래스명을 따로 적지 않고 여기다가 적겠음.
*/
article section div.intro-sub-box { background-color : #f0f5fc; padding : 20px 20px;}
article section div.intro-sub-box > p {margin : 0;}
article section div.intro-sub-box span {font-weight : 500;}
article section div.intro-sub-box span + p {margin-top : 0;}
article section div.intro-sub-box ul>li:last-child{margin-bottom : 0;}
article section div.intro-sub-box ul li ul li:after {content:none;}
article section div.api-list div.list-title {padding : 30px 0 15px; font-size : 18px;}
article section div.api-list div.list-title:first-child {padding : 0 0 15px;}
article section div.api-list ul > li{padding-left : 0;}
article section div.api-list ul > li:after{display: none;}

article section div.agency-list ul {display : flex; flex-wrap : wrap;}
article section div.agency-list ul > li {width : 33.33%; position : relative; padding : 4px 0 3px 65px; margin : 7px 0;}
article section div.agency-list ul > li strong {position : absolute; right : 20px; line-height : 25px;}
article section div.agency-list ul > li img {position : absolute; top : 0; left : 20px; width : 32px; height: 32px;}
article section div.agency-list ul > li:after {content : none;}

article.api-article { counter-reset : objectTitle; }
article.api-article section ul > li { line-height: 1.4; font-size: 15px; margin-bottom: 5px; }
article.api-article section ul > li::after { width: 4px; height: 4px; top: 8px; left: 5px; }
article.api-article section > p { margin-bottom: 30px; }
article.api-article section > p.api-description { margin-bottom: 10px; }
article.api-article section ul > li p { font-size: 0.9em; margin: 0; }
article.api-article section p.api-description > span { display: block; font-size: 0.85em; line-height: 1.5; margin: 0; }
article.api-article table { margin: 16px 0 30px; }
article.api-article table thead tr th:nth-child(1) { width: 3%; }
article.api-article table thead tr th:nth-child(2) { width: 13%; }
article.api-article table thead tr th:nth-child(3) { width: 8%; }
article.api-article table thead tr th:nth-child(4) { width: 8%; }
article.api-article table thead tr th:nth-child(6) { width: 3%; }
article.api-article table thead tr th:last-child { width: 60%; }
article.api-article table tbody tr td:nth-child(1), article.api-article table tbody tr td:nth-child(4), article.api-article table tbody tr td:nth-child(5) { text-align: center; }
article.api-article table.error-code-table tbody tr td:nth-child(1) { width: 9%; }
article.api-article table.error-code-table tbody tr td:nth-child(2) { width: 20%; text-align: center; }
article.api-article table.error-code-table tbody tr td:nth-child(3) { width: 71%; word-break: initial;}
article.api-article table.objects-table thead tr th:nth-child(1) { width: 3%; }
article.api-article table.objects-table thead tr th:nth-child(2) { min-width: 200px; }
article.api-article table.objects-table td:nth-child(3) a {	word-break: break-all; }
article.api-article table.input tbody tr td:nth-child(5) {  padding: 14px 0; }
article.api-article table.objects-table tbody tr td:nth-child(6) { text-align: center; }
article.api-article table.objects-table tbody tr td:last-child { text-align: left; }
article.api-article table.parameters-table tbody tr td:last-child { text-align: left; }
article.api-article table{counter-reset:tr}
article.api-article table tr td:first-child::before{counter-increment : tr;content : counter(tr);}
article.api-article .api-article a[href] { color: rgb(255, 0, 0); }
article.api-article a[data-function-name] { color: rgb(77, 100, 228); }
article.api-article a[data-object-name] { color: rgb(77, 100, 228); }
article.api-article a:hover { text-decoration: underline; }
article.api-article section div.caution-box { margin-top: 28px; padding: 18px 28px 19px 27px; }
article.api-article section h6.parameters { margin-top: 30px; }
article.api-article section div.panel-box > ul > li{padding-left : 0;}
article.api-article section div.panel-box > ul > li:after{display: none;}

article.api-article section > div.popup-content {display: flex; margin-top: 20px;}
article.api-article section > div.popup-content > .thumbnail {position: relative; display: inline-block; width: 110px; height: 110px; overflow: hidden; border: solid 1px #000000; border-radius: 3px; }
article.api-article section > div.popup-content > div > .thumbnail-image {cursor: pointer; display: block; width: 100%; height: 100%; object-fit: cover; }
article.api-article section > div.popup-content > div > .thumbnail-overlay {cursor: pointer; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 1; }
article.api-article section > div.popup-content > div > div > img.preview-image {width: 30px; height: 30px; margin-bottom: 7px;}
article.api-article section > div.popup-content > div > div > img.preview-text-image {width: 52px; height: 20px;}
article.api-article section > div.popup-content > ul.popup-explain {display: block; margin: 0 0 0 20px;}
article.api-article section > div.popup-content > ul li {margin-bottom: 7px;}
article.api-article section > div.popup-content > ul li:first-child {font-weight: 600; padding-left: 0; margin-bottom: 12px;}
article.api-article section > div.popup-content > ul li:first-child::after {display: none;}

main.api-page > div.popup-modal {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999997; background-color: rgba(51,51,51,0.88); justify-content: center; align-items: center;}
main.api-page > div > .modal-content {position: relative; max-width: 80vw; max-height: 40vw; z-index: 999998; opacity: 1; border: none; border-radius: 5px;}
main.api-page > div > .modal-close { position: absolute; top: calc(50% + 21vw); left: 50%; transform: translateX(-50%); z-index: 999999; width: 4.5vw; height: 2.2vw; background-color: #FFFFFF; border-radius: 3vw; color: #0d59ff; font-size: 0.85vw; font-weight: bold; padding: 0 0.8vw 0.1vw 0; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border: solid 0.15vw #000000;}
main.api-page > div > .modal-close::after {content:""; position:absolute; background: url('/images/reference/common/close.svg') no-repeat; background-size: contain; width: 0.53vw; height: 0.53vw; right: 1vw; transform: translateY(34%)}
article.api-article table tbody tr td > div > dl.img-explain {display: grid; grid-template-columns: 70px minmax(0, 1fr); }
article.api-article table tbody tr td > div > dl.img-explain > dt {margin : 0 0 3px 0; position: relative; line-height: 1.4; font-weight: 400;}
article.api-article table tbody tr td > div > dl.img-explain > dt:after {content: " : "; position: absolute; right: 0;}
article.api-article table tbody tr td > div > dl.img-explain > dd {margin : 0 0 3px 10px; min-width:0; line-height: 1.4; font-weight: 400;}

@media (max-width: 980px) {
    article section div.agency-list ul > li {width : 50%;}
    article.api-article .mobile-scroll-wrapper table {margin: 16px 0 5px;}
}

@media (max-width: 500px) {
    article section div.intro-sub-box{padding : 10px;}
    article section div.agency-list ul > li {padding-left : 40px;}
    article section div.agency-list ul > li img{left : 0;}
    article.api-article table.parameters-table tbody tr td:nth-child(1){width : 8%;}
    article.api-article table.parameters-table tbody tr td:nth-child(1){width : 8%;}
}