article section p+div.accordion-box {margin-top: 30px;}
article section div.accordion-box > ol > li {padding: 0;}
article section div.accordion-box > ol > li .title {border: 1px solid rgb(0, 0, 0); padding: 15px 40px 14px 35px; margin: 0 0 30px; background-color: rgb(255, 255, 255); box-shadow: rgba(9, 0, 0, 0.05) 3px 7px 5px 0; border-radius: 2px; cursor: pointer; position: relative; line-height: 1.5;}
article section div.accordion-box > ol > li .title::after {content: ""; display: block; width: 12px; height: 6px; background: url("/en/images/common/document/icon_accordion_arrow.png") center/contain no-repeat; position: absolute; top: 24px; right: 16px; transform: rotate(180deg);}
article section div.accordion-box > ol > li .title:before {position: absolute; top: 15px; left: 16px;}
article section div.accordion-box > ol > li:nth-child(1) .title:before {content: '1. ';}
article section div.accordion-box > ol > li:nth-child(2) .title:before {content: '2. ';}
article section div.accordion-box > ol > li:nth-child(3) .title:before {content: '3. ';}
article section div.accordion-box > ol > li:nth-child(4) .title:before {content: '4. ';}
article section div.accordion-box > ol > li:nth-child(5) .title:before {content: '5. ';}
article section div.accordion-box > ol > li:nth-child(6) .title:before {content: '6. ';}
article section div.accordion-box > ol > li .content {padding-left: 19px; margin: 0 0 45px; display: none;}
article section div.accordion-box > ol > li:last-child .content {margin-bottom: 0;}
article section div.accordion-box > ol > li.active .title {margin-bottom: 23px;}
article section div.accordion-box > ol > li.active .title::after {transform: rotate(0deg);}
article section div.accordion-box > ol > li.active .content {display: block;}
article section div.accordion-box > ol > li.active .content > p {margin: 0 0 20px; word-spacing: -1px;}
article section div.accordion-box > ol > li.active .content > p + .image-box {margin-bottom: 30px;}
article section div.accordion-box > ol > li.active .content > p + ul {margin: 0 0 0 10px;}
article section div.accordion-box > ol > li.active .content > ol > li {margin-bottom: 13px;}
article section div.accordion-box > ol > li.active .content > ol > li > strong + ul {margin: 8px 0 0;}
article section div.accordion-box > ol > li.active .content > ol > li > strong + ul > li {margin-bottom: 4px;}
article section div.accordion-box > ol > li.active .content > ol > li > strong + ul > li::before {content: " - ";}
article section div.accordion-box > ol > li.active .content > ol > li > strong + ul > li::after {display: none;}
article.guide-article section pre code.hljs {font-family: 'JetBrainsMono'; letter-spacing: -0.04em;}
article.guide-article section .tab-box pre code.hljs {background-color: rgb(255, 255, 255); font-weight: 400;}

/* 페이지별 Custom 스타일 */
article.guide-article section div.api-list div.list-title {padding: 30px 0 15px; font-size: 18px;}
article.guide-article section div.api-list div.list-title:first-child {padding: 0 0 15px;}
article.guide-article section div.api-list ul > li {padding-left: 0;}
article.guide-article section div.api-list ul > li:after {display: none;}
article.guide-article section div.partner-type-box {display: flex; align-items: flex-start; justify-content: center; margin: 30px 0;}
article.guide-article section div.partner-type-box img {width: 338px;}
article.guide-article section .comparisont-table {margin: 0 auto;}
article.guide-article section .comparisont-table thead {background: none;}
article.guide-article section .comparisont-table thead tr th {font-weight: 700;}
article.guide-article section .comparisont-table thead tr th:first-child,
article.guide-article section .comparisont-table thead tr th:last-child {border-top: solid 2px #000000;}
article.guide-article section .comparisont-table thead tr th:first-child {border-top: solid 2px #2a45dd;}
article.guide-article section .comparisont-table thead tr th:nth-child(1),
article.guide-article section .comparisont-table tbody tr td:nth-child(1) {border-right: none; text-align: center;}
article.guide-article section .comparisont-table tbody tr td:nth-child(3) {border-left: none; text-align: center;}
article.guide-article section .comparisont-table thead tr th:nth-child(2),
article.guide-article section .comparisont-table tbody tr th {background: none; border: none;}

article.guide-article section#example h4 {margin: 50px 0 20px 13px; text-indent: -3px;}
article.guide-article section h4 span {color: red; position: relative; top: 4px; text-indent: 0; margin-left: -10px;}
article.guide-article section .example-grid {display: flex; flex-direction: column; flex-wrap: wrap; position: relative; row-gap: 40px; column-gap: 40px; margin-top: 20px;}
article.guide-article section .example-grid.taxinvoice {height: 755px;}
article.guide-article section .example-grid.cashbill {height: 570px;}
article.guide-article section .example-grid.statement-121 {height: 590px;}
article.guide-article section .example-grid.statement-122 {height: 500px;}
article.guide-article section .example-grid.statement-123 {height: 530px;}
article.guide-article section .example-grid.statement-124 {height: 500px;}
article.guide-article section .example-grid.statement-125 {height: 320px;}
article.guide-article section .example-grid.statement-126 {height: 400px;}
article.guide-article section .example-grid:before {content: ''; display: block; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #eee;}
article.guide-article section .example-grid div {width: calc(50% - 20px);}
article.guide-article section .example-grid div p {margin: 0; font-weight: 700; padding-left: 14px; font-size: 14px;}
article.guide-article section .example-grid div p strong {font-size: 85%; display: inline-block; padding: 5px 0; border-radius: 2px; border: solid 1px; margin-right: 5px; width: 60px; text-align: center;}
article.guide-article section .example-grid strong.a {border-color: #ffb9bc; color: #fd3e47; background: #fff3f3;}
article.guide-article section .example-grid strong.b {border-color: #44bfda; color: #0093b3; background: #e8f7fa;}
article.guide-article section .example-grid strong.c {border-color: #1b9474; color: #0f9470; background: #eeffef;}
article.guide-article section .example-grid strong.d {border-color: #fd990a; color: #fd990a; background: #fffdee;}
article.guide-article section .example-grid strong.e {border-color: #6966cd; color: #6966cd; background: #fcf5ff;}
article.guide-article section .example-grid strong.f {border-color: #2c5ac1; color: #4170da; background: #ecf0fb;}
article.guide-article section .example-grid strong.g {border-color: #464961; color: #464961; background: #dedede;}
article.guide-article section .example-grid strong.h {border-color: #653b00; color: #705937; background: #efebe5;}
article.guide-article section .example-grid strong.i {border-color: #7aae00; color: #4b9500; background: #eef5cc;}
article.guide-article section .example-grid div p strong ~ strong {margin-left: 0; margin-top: 10px;}
article.guide-article section .example-grid div p.asterisk {position: relative;}
article.guide-article section .example-grid div p.asterisk:before {content: '*'; display: block; position: absolute; top: 3px; left: 0; color: red; font-size: 16px; font-weight: 700;}
article.guide-article section .example-grid div ol {margin-top: 10px;}
article.guide-article section .example-grid div ol li {margin-bottom: 5px; font-size: 13px; margin-left: 25px; text-indent: -2px;}
article.guide-article section .example-grid div ol li span {display: inline-block; width: 25px; text-align: right; position: relative; margin-left: -25px; text-indent: 0;}
article.guide-article section .example-grid div ol li span.asterisk:before {content: '*'; display: block; position: absolute; top: 1px; left: 0; color: red; font-size: 16px; font-weight: 700;}
article.guide-article section .example-grid div ol li ul {margin-left: 5px; margin-top: 5px;}
article.guide-article section .example-grid div ol li ul li {padding-left: 0; margin-left: 0;}
article.guide-article section .example-grid div ol li ul li:after {content: none;}
article.guide-article section .example-grid div .sub {font-weight: 400; font-size: 13px; color: #4d64e4; margin-top: 5px; margin-left: 80px; padding-left: 18px; position: relative;}
article.guide-article section .example-grid div .sub:before {content: '└'; display: block; position: absolute; top: 8px; left: 0; color: #121212;}
article.guide-article section .example-grid div li .sub {margin-left: 0;}

article.guide-article section .notification-mail-table tr td:not([colspan]):last-child,
article.guide-article section .issue-subject-table tr td,
article.guide-article section .about-mgt-key-table tr td:nth-last-child(2),
article.guide-article section .modify-code-table tr td,
article.guide-article section table.propertybag-table tr td:nth-last-child(3),
article.guide-article section table.propertybag-table tr td:nth-last-child(4) {text-align: center;}
article.guide-article section table.modify-table tr th {}
article.guide-article section table.modify-table tr td {position: relative;}
article.guide-article section table.modify-table tr td .issue-count {position: absolute; top: 0; right: 0; width: 140px; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgb(241, 243, 244); font-weight: 500;}
article.guide-article section table.modify-table tr:first-child td {padding-right: 150px;}
article.guide-article section table.modify-table tr td .refer-mark {margin-top: 0;}

@media (max-width: 1250px) {
    article.guide-article section div.partner-type-box {flex-wrap: wrap;}
    article.guide-article section .example-grid {column-gap: 20px;}
    article.guide-article section .example-grid div {width: calc(50% - 10px);}
}

@media (max-width: 1150px) {
    article.guide-article section .example-grid.taxinvoice,
    article.guide-article section .example-grid.cashbill,
    article.guide-article section .example-grid.statement-121,
    article.guide-article section .example-grid.statement-122,
    article.guide-article section .example-grid.statement-123,
    article.guide-article section .example-grid.statement-124,
    article.guide-article section .example-grid.statement-125,
    article.guide-article section .example-grid.statement-126 {height: auto;}
    article.guide-article section .example-grid:before {content: none;}
    article.guide-article section .example-grid div {width: auto;}
    article.guide-article section .example-grid div ol {display: grid; grid-auto-flow: column; grid-template-columns: 5.15fr 4.85fr; grid-template-rows: repeat(5, auto);}
    article.guide-article section .example-grid div ol > li:has(ul) {grid-row: 1/6;}
    article.guide-article section .example-grid div ol > li:nth-child(n+6) {padding-left: 10px;}
}
@media (max-width: 780px) {
    article.guide-article section .example-grid div ol {grid-auto-flow: row; grid-template-columns: auto; grid-template-rows: auto;}
    article.guide-article section .example-grid div ol > li:has(ul) {grid-row: auto;}
    article.guide-article section .example-grid div ol > li:nth-child(n+6) {padding-left: 19px;}
}
@media (max-width: 500px) {
    article section div.accordion-box > ol > li .title {padding: 9px 40px 8px 30px; font-size: 15px;}
    article section div.accordion-box > ol > li .title::before {position: absolute; top: 9px; left: 13px;}
    article section div.accordion-box > ol > li .title::after {top: 50%; right: 13px; transform: rotate(180deg) translateY(50%);}
    article section div.accordion-box > ol > li.active .title::after {transform: rotate(0deg) translateY(-50%);}
    article section div.accordion-box > ol > li .content {padding: 0 13px; margin: 0 0 30px;}
    article section div.accordion-box > ol > li.active .title {margin-bottom: 10px;}
    article section div.accordion-box > ol > li.active .content > p {margin-bottom: 10px;}
    article section div.accordion-box > ol > li.active .content > ol > li {margin-bottom: 10px;}
    article section div.accordion-box > ol > li.active .content > ol > li > strong + ul {margin: 4px 0 0 0;}
    article section div.accordion-box > ol > li.active .content > ol > li > strong + ul > li {padding-left: 5px;}

    article.guide-article section div.partner-type-box img {margin: 0 auto;}

    article.guide-article section .comparisont-table tfoot tr td {padding: 5px 0 0;}

    article.guide-article section .example-grid div ol {padding-left: 14px;}
    article.guide-article section .example-grid div ol li {margin-left: 30px;}
    article.guide-article section .example-grid div ol > li:nth-child(n+6) {padding-left: 0;}
    article.guide-article section .example-grid div p strong {display: block; margin-bottom: 5px;}
    article.guide-article section .example-grid div .sub {margin-left: 25px;}
}