@charset "utf-8";

/*-------------------------------------------------------------------
    적용영역 : 전체영역
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
    최종변경일 : 2024.09.30
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류이름: Title
	분류그룹: DOCS
-------------------------------------------------------------------*/
/* tit - visual area */
.tit-visual-sm {font-weight: 700; font-size: var(--fz-display-sm); letter-spacing: 1px;}
.tit-visual-md {font-weight: 700; font-size: var(--fz-display-md); letter-spacing: 1px;}
.tit-visual-lg {font-weight: 700; font-size: var(--fz-display-lg); letter-spacing: 1px;}
/* tit - page Heading */
.tit-head-sm {font-weight: 700; font-size: var(--fz-heading-sm); letter-spacing: 1px;}
.tit-head-md {font-weight: 700; font-size: var(--fz-heading-md); letter-spacing: 1px;}
.tit-head-lg {font-weight: 700; font-size: var(--fz-heading-lg); letter-spacing: 1px;}
/* tit - contents */
.tit-xsm {font-weight: 700; font-size: var(--fz-title-xsm);}
.tit-sm {font-weight: 700; font-size: var(--fz-title-sm);}
.tit-md {font-weight: 700; font-size: var(--fz-title-md);}
.tit-lg {font-weight: 700; font-size: var(--fz-title-lg);}
.tit-xlg {font-weight: 700; font-size: var(--fz-title-xlg);}
.tit-xxlg {font-weight: 700; font-size: var(--fz-title-xxlg); letter-spacing: 1px;}
/* txt */
.txt-xsm {font-size: var(--fz-label-xsm);}
.txt-sm {font-size: var(--fz-body-sm);}
.txt-md {font-size: var(--fz-body-md);}
.txt-lg {font-size: var(--fz-body-lg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px) {
    .txt-visual-sm {font-size: var(--mobile-fz-display-sm);}
    .txt-visual-md {font-size: var(--mobile-fz-display-md);}
    .txt-visual-lg {font-size: var(--mobile-fz-display-lg);}

    .txt-head-sm {font-size: var(--mobile-fz-heading-sm);}
    .txt-head-md {font-size: var(--mobile-fz-heading-md);}
    .txt-head-lg {font-size: var(--mobile-fz-heading-lg);}

    .tit-xxlg {font-size: var(--mobile-fz-title-xxlg);}
}


/*-------------------------------------------------------------------
	분류이름: Bullet
	분류그룹: DOCS
-------------------------------------------------------------------*/
.bul {display: flex; margin-bottom: var(--sp-04);}
.bul:before {content: ""; display: block; position:relative; min-width: 0.9em; margin-right: var(--sp-04); font-weight: inherit; font-size: inherit; white-space: nowrap; flex-shrink: 0;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.bul[data-s-type="hyphen"]::before {content: "-"; text-align: center;}
.bul[data-s-type="dot"]::before {content: "\00B7"; text-align: center;}
.bul[data-s-type="star"]::before {content: "*"; text-align: center;}
.bul[data-s-type="ref"]::before {content: "※"; text-align: center;}

.bul.abs {display: block; position: relative; padding-left: calc(0.4rem + 0.9em);}
.bul.abs::before {position: absolute; top: 0; left: 0;}

.bul.circle {display: block; position: relative;}
.bul.circle {padding-left: calc(0.4rem + 1.2em);}
.bul.circle::before {position: absolute; top: 0.15em; left: 0; width: 1.2em; height: 1.2em; border-radius: 50%; background-color: var(--color-gray-50); line-height: 1.2; color: #fff;}
.bul.circle[data-level="primary"]::before {background-color: var(--color-primary);}
.bul.circle[data-level="point"]::before {background-color: var(--color-point);}


/*-------------------------------------------------------------------
	분류이름: Bullet List
	분류그룹: DOC > Bullet
-------------------------------------------------------------------*/
.bul-list {display: block;  overflow: hidden;}
.bul-list > li {display: flex; margin-top: var(--sp-04);}
.bul-list > li:first-child {margin-top: 0;}
.bul-list > li:before {content: ""; display: block; position:relative; min-width: 0.9em; margin-right: var(--sp-04); white-space: nowrap; flex-shrink: 0;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.bul-list[data-s-type="hyphen"] > li::before {content: "-"; text-align: center;}
.bul-list[data-s-type="dot"] > li::before {content: "\00B7"; text-align: center;}
.bul-list[data-s-type="star"] > li::before {content: "*"; text-align: center;}
.bul-list[data-s-type="ref"] > li::before {content: "※"; text-align: center;}

.bul-list[data-s-type="num1"] {counter-reset: num1;}
.bul-list[data-s-type="num1"] > li::before {counter-increment: num1; content: counter(num1, decimal) ".";}
.bul-list[data-s-type="num2"] {counter-reset: num2;}
.bul-list[data-s-type="num2"] > li::before {counter-increment: num2; content: counter(num2, decimal) ")";}
.bul-list[data-s-type="num3"] {counter-reset: num3;}
.bul-list[data-s-type="num3"] > li::before {counter-increment: num3; content: counter(num3, decimal); min-width: 1.5em; height: 1.5em; border-radius: 999px; background-color: var(--color-gray-70); text-align: center; color: #fff;}

.bul-list[data-s-type="eng1"] {counter-reset: eng1;}
.bul-list[data-s-type="eng1"] > li::before {counter-increment: eng1; content: counter(eng1, upper-alpha) "."; min-width: 1.2em;}
.bul-list[data-s-type="eng2"] {counter-reset: eng2;}
.bul-list[data-s-type="eng2"] > li::before {counter-increment: eng2; content: counter(eng2, upper-alpha) ")"; min-width: 1.2em;}
.bul-list[data-s-type="eng3"] {counter-reset: eng3;}
.bul-list[data-s-type="eng3"] > li::before {counter-increment: eng3; content: counter(eng3, upper-alpha); min-width: 1.5em; height: 1.5em; border-radius: 999px; background-color: var(--color-gray-70); text-align: center; color: #fff;}

.bul-list.circle > li {display: block; position: relative;}
.bul-list.circle > li {padding-left: calc(0.4rem + 1.2em);}
.bul-list.circle > li::before {position: absolute; top: 0.15em; left: 0; width: 1.2em; height: 1.2em; border-radius: 50%; background-color: var(--color-gray-50); line-height: 1.2; color: #fff; text-align: center;}
.bul-list.circle[data-level="primary"] > li::before {background-color: var(--color-primary);}
.bul-list.circle[data-level="point"] > li::before {background-color: var(--color-point);}

/*-------------------------------------------------------------------
	분류이름: List
	분류그룹: DOCS
-------------------------------------------------------------------*/
.list-depth > li {margin-top: var(--sp-12);}
.list-depth > li:first-child {margin-top: 0;}
.list-depth ul > li,
.list-depth ol > li {margin-top: var(--sp-08);}
.list-depth ul ul > li,
.list-depth ul ol > li,
.list-depth ol ul > li,
.list-depth ol ol > li {margin-top: var(--sp-04);}
.list-depth ul ul ul > li,
.list-depth ul ul ol > li,
.list-depth ul ol ul > li,
.list-depth ul ol ol > li,
.list-depth ol ul ul > li,
.list-depth ol ul ol > li,
.list-depth ol ol ul > li,
.list-depth ol ol ol > li {margin-top: var(--sp-02);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.list-depth.indent ul,
.list-depth.indent ol {margin-left: var(--sp-12);}

.list-depth-01 > li {margin-top: var(--sp-12);}
.list-depth-01 > li:first-child {margin-top: 0;}

.list-depth-02 > li {margin-top: var(--sp-08);}
.list-depth-02 > li:first-child {margin-top: 0;}
ol .list-depth-02 > li:first-child,
ul .list-depth-02 > li:first-child {margin-top: var(--sp-08);}

.list-depth-03 > li {margin-top: var(--sp-04);}
.list-depth-03 > li:first-child {margin-top: 0;}
ol .list-depth-03 > li:first-child,
ul .list-depth-03 > li:first-child {margin-top: var(--sp-04);}

.list-depth-04 > li {margin-top: var(--sp-02);}
.list-depth-04 > li:first-child {margin-top: 0;}
ol .list-depth-04 > li:first-child,
ul .list-depth-04 > li:first-child {margin-top: var(--sp-02);}


/*-------------------------------------------------------------------
	분류이름: Bullet List
	분류그룹: DOC > Bullet
-------------------------------------------------------------------*/
.i-attach-file {display: block; overflow: hidden; width: var(--sp-20); height: var(--sp-20); background-image: url(../images/common/attach/i_file.svg); background-position: center; background-repeat: no-repeat; background-size: contain; font-size: 20px; text-indent: -1000px;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.i-attach-file[data-type="hwp"] {background-image: url(../images/common/attach/i_file_hwp.svg);}
.i-attach-file[data-type="img"] {background-image: url(../images/common/attach/i_file_img.svg);}
.i-attach-file[data-type="pdf"] {background-image: url(../images/common/attach/i_file_pdf.svg);}
.i-attach-file[data-type="ppt"] {background-image: url(../images/common/attach/i_file_ppt.svg);}
.i-attach-file[data-type="zip"] {background-image: url(../images/common/attach/i_file_zip.svg);}
.i-attach-file[data-type="txt"] {background-image: url(../images/common/attach/i_file_txt.svg);}
.i-attach-file[data-type="video"] {background-image: url(../images/common/attach/i_file_video.svg);}
.i-attach-file[data-type="xls"] {background-image: url(../images/common/attach/i_file_xls.svg);}
.i-attach-file[data-type="etc"] {background-image: url(../images/common/attach/i_file_etc.svg);}


/*-------------------------------------------------------------------
	분류이름: Expression
	분류그룹: Components
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : Buttons
	속성순서 : Expression
-------------------------------------------------------------------*/
.btn {display: inline-flex; height: var(--sp-48); padding: 0 var(--sp-16); border: 1px solid var(--color-secondary-5); border-radius: var(--radius-6); background-color: var(--color-secondary-5); line-height: 1; font-weight: 500; font-size: var(--fz-label-md); color: var(--color-gray-90); text-align: center; cursor: pointer; align-items: center;}
.btn > span {display: inline-block;}
/* .btn, .btn:link, .btn:visited, .btn:active, .btn:hover, .btn:focus {color: var(--color-gray-90);} */
.btn.underline {text-decoration: underline;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/* size */
.btn[data-size="xs"] {height: var(--sp-32); padding: 0 var(--sp-08); border-radius: var(--radius-4); font-size: var(--fz-label-sm);}
.btn[data-size="sm"] {height: var(--sp-40); padding: 0 var(--sp-12); border-radius: var(--radius-6); font-size: var(--fz-label-md);}
.btn[data-size="lg"] {height: var(--sp-56); padding: 0 var(--sp-20); font-size: var(--fz-label-lg);}
.btn[data-size="xl"] {height: var(--sp-64); padding: 0 var(--sp-24); font-size: var(--fz-label-lg);}
/* hierarchy */
.btn[data-level="primary"] {background-color: var(--color-primary); color: var(--color-white);}
.btn[data-level="secondary"] {background-color: var(--color-secondary); color: var(--color-white);}
.btn[data-level="tertiary"] {background-color: var(--color-gray-70); color: var(--color-white);}
.btn[data-level="point"] {background-color: var(--color-point); color: var(--color-white);}
/* outline */
.btn.outline {border-color: var(--color-gray-90); background-color: var(--color-white); color: var(--color-black);}
.btn.outline[data-level="primary"] {border-color: var(--color-primary); background-color: var(--color-white); color: var(--color-primary);}
.btn.outline[data-level="secondary"] {border-color: var(--color-secondary); background-color: var(--color-white); color: var(--color-secondary);}
.btn.outline[data-level="tertiary"] {border-color: var(--color-gray-70); background-color: var(--color-white); color: var(--color-black);}
.btn.outline[data-level="point"] {border-color: var(--color-point); background-color: var(--color-white); color: var(--color-point);}
/* gov */
.btn.gov {background-color: var(--color-primary); color: var(--color-white);}
.btn.gov[data-level="primary"] {background-color: var(--color-primary); color: var(--color-white);}
.btn.gov[data-level="secondary"] {border-color: var(--color-primary); background-color: var(--color-white); color: var(--color-primary);}
.btn.gov[data-level="tertiary"] {border-color: var(--color-secondary); background-color: var(--color-white); color: var(--color-secondary);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.btn {transition: border 0.3s, background 0.3s, color 0.3s;}
.btn:focus-visible,
.btn:hover {border-color: var(--color-secondary-10); background-color: var(--color-secondary-10);}
/* hierarchy */
.btn[data-level="primary"]:hover,
.btn[data-level="primary"]:focus {border-color: var(--color-primary-60); background-color: var(--color-primary-60);}
.btn[data-level="secondary"]:hover,
.btn[data-level="secondary"]:focus {border-color: var(--color-secondary-60); background-color: var(--color-secondary-60);}
.btn[data-level="tertiary"]:hover,
.btn[data-level="tertiary"]:focus {border-color: var(--color-gray-80); background-color: var(--color-gray-80);}
.btn[data-level="point"]:hover,
.btn[data-level="point"]:focus {border-color: var(--color-point-60); background-color: var(--color-point-60);}
/* outline */
.btn.outline:focus-visible,
.btn.outline:hover {border-color: var(--color-gray-90); background-color: var(--color-gray-5);}
.btn.outline[data-level="primary"]:focus-visible,
.btn.outline[data-level="primary"]:hover {border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-white);}
.btn.outline[data-level="secondary"]:focus-visible,
.btn.outline[data-level="secondary"]:hover {border-color: var(--color-secondary); background-color: var(--color-secondary); color: var(--color-white);}
.btn.outline[data-level="tertiary"]:focus-visible,
.btn.outline[data-level="tertiary"]:hover {border-color: var(--color-gray-80); background-color: var(--color-gray-80); color: var(--color-white);}
.btn.outline[data-level="point"]:focus-visible,
.btn.outline[data-level="point"]:hover {border-color: var(--color-point); background-color: var(--color-point); color: var(--color-white);}
/* gov */
.btn.gov:focus-visible,
.btn.gov:hover {background-color: var(--color-primary-60); color: var(--color-white);}
.btn.gov[data-level="primary"]:focus-visible,
.btn.gov[data-level="primary"]:hover {background-color: var(--color-primary-60); color: var(--color-white);}
.btn.gov[data-level="secondary"]:focus-visible,
.btn.gov[data-level="secondary"]:hover {border-color: var(--color-primary); background-color: var(--color-primary-5); color: var(--color-primary);}
.btn.gov[data-level="tertiary"]:focus-visible,
.btn.gov[data-level="tertiary"]:hover {border-color: var(--color-secondary); background-color: var(--color-secondary-5); color: var(--color-secondary);}

/* accessbility */
/* .btn.focus:focus:not(:focus-visible) {outline: none;}
.btn.focus:focus-visible {outline: 2px dashed #000000;} */


/*-------------------------------------------------------------------
	분류이름: 아이콘
	분류그룹: expression > Buttons
-------------------------------------------------------------------*/
.btn[class*=i-]::after {content:""; display: block; width: var(--sp-20); height: var(--sp-20); margin-left: var(--sp-04); background-repeat: no-repeat; background-position: center; background-size: contain;}
.btn.i-before::after {display: none;}
.btn.i-before::before {content:""; display: block; width: var(--sp-20); height: var(--sp-20); margin-right: var(--sp-04); background-repeat: no-repeat; background-position: center; background-size: contain;}
/* icon - size */
.btn[class*=i-][data-size="xs"]::after,
.btn.i-before[data-size="xs"]::before {width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-02);}
.btn[class*=i-][data-size="sm"]::after,
.btn.i-before[data-size="sm"]::before {width: var(--sp-16); height: var(--sp-16);}
.btn[class*=i-][data-size="lg"]::after,
.btn.i-before[data-size="lg"]::before {width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-08);}
.btn[class*=i-][data-size="xl"]::after,
.btn.i-before[data-size="xl"]::before {width: var(--sp-24); height: var(--sp-24); margin-left: var(--sp-12);}
/* icon - style */
.btn.i-link::before, .btn.i-link::after {background-image: url(../images/common/i_arr_next.svg);}
.btn.i-blank::before, .btn.i-blank::after {background-image: url(../images/common/i_blank.svg);}
.btn.i-download::before, .btn.i-download::after {background-image: url(../images/common/i_download.svg);}
.btn.i-print::before, .btn.i-print::after {background-image: url(../images/common/i_print.svg);}
.btn.i-filter::before, .btn.i-filter::after {background-image: url(../images/common/i_filter.svg);}
.btn.i-share::before, .btn.i-share::after {background-image: url(../images/common/i_share.svg);}

.btn[data-level].i-link::before, .btn[data-level].i-link::after {background-image: url(../images/common/i_arr_next_white.svg);}
.btn[data-level].i-blank::before, .btn[data-level].i-blank::after {background-image: url(../images/common/i_blank_white.svg);}
.btn[data-level].i-download::before, .btn[data-level].i-download::after {background-image: url(../images/common/i_download_white.svg);}
.btn[data-level].i-print::before, .btn[data-level].i-print::after {background-image: url(../images/common/i_print_white.svg);}
.btn[data-level].i-filter::before, .btn[data-level].i-filter::after {background-image: url(../images/common/i_filter_white.svg);}
.btn[data-level].i-share::before, .btn[data-level].i-share::after {background-image: url(../images/common/i_share_white.svg);}


/*-------------------------------------------------------------------
	분류그룹 : 텍스트 타입
	속성순서 : Expression > Buttons
-------------------------------------------------------------------*/
.btn-txt {display: inline-flex; height: auto; padding: 0 var(--sp-04); border: 0; border-radius: var(--radius-4); background-color: transparent; line-height: inherit; font-weight: 500; font-size: var(--fz-label-md); color: var(--color-gray-90); text-align: center; cursor: pointer; align-items: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/* size */
.btn-txt[data-size="xs"] {font-size: var(--fz-label-sm);}
.btn-txt[data-size="sm"] {font-size: var(--fz-label-sm);}
.btn-txt[data-size="lg"] {padding: 0 var(--sp-08); font-size: var(--fz-label-md);}
.btn-txt[data-size="xl"] {padding: 0 var(--sp-08); border-radius: var(--radius-6); font-size: var(--fz-label-lg);}
/* hierarchy */
.btn-txt[data-level="primary"] {color: var(--color-main);}
.btn-txt[data-level="secondary"], 
.btn-txt[data-level="tertiary"] {color: inherit;}
/* icon */
.btn-txt[class*=i-]::after {content:""; display: block; width: var(--sp-16); height: var(--sp-16); margin-left: var(--sp-04); background-repeat: no-repeat; background-position: center; background-size: var(--sp-20);}
.btn-txt[class*=i-][data-size="lg"]::after {width: var(--sp-20); height: var(--sp-20); background-size: contain;}
.btn-txt[class*=i-][data-size="xl"]::after {width: var(--sp-24); height: var(--sp-24); background-size: contain;}

.btn-txt.i-link::after {background-image: url(../images/common/i_link.svg);}
.btn-txt.i-link[data-level="primary"]::after {background-image: url(../images/common/i_link_active.svg);}
.btn-txt.i-blank::after {background-image: url(../images/common/i_blank.svg);}
.btn-txt.i-blank[data-level="primary"]::after {background-image: url(../images/common/i_blank_active.svg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.btn-txt.i-link:focus-visible, .btn-txt.i-link:hover, .btn-txt.i-blank:hover, .btn-txt.i-blank:focus-visible {text-decoration: underline;}
.btn-txt[data-level="primary"]:focus-visible,
.btn-txt[data-level="primary"]:hover {background-color: var(--color-main); color: #fff;}
.btn-txt[data-level="tertiary"]:focus-visible,
.btn-txt[data-level="tertiary"]:hover,
.btn-txt[data-level="point"]:focus-visible,
.btn-txt[data-level="point"]:hover {color: var(--color-primary);}

.btn-txt.i-link[data-level="primary"]:focus-visible::after,
.btn-txt.i-link[data-level="primary"]:hover::after {background-image: url(../images/common/i_link_white.svg);}
.btn-txt.i-blank[data-level="primary"]:focus-visible::after,
.btn-txt.i-blank[data-level="primary"]:hover::after {background-image: url(../images/common/i_blank_white.svg);}


/*-------------------------------------------------------------------
	분류이름: 공용 닫기 버튼
	분류그룹: Expression > Buttons
-------------------------------------------------------------------*/
.btn-close {display:block; position: relative; width: var(--sp-24); height: var(--sp-24); font-size: 0; background-color: transparent;}
.btn-close::before,
.btn-close::after {content:""; position: absolute; top: 50%; left: 50%; width: 70%; height: 2px; background-color: #000000;}
.btn-close::before {transform: translate(-50%, -50%) rotate(45deg); transform-origin: center;}
.btn-close::after {transform: translate(-50%, -50%) rotate(-45deg); transform-origin: center;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.btn-close::before,
.btn-close::after {transition: transform 0.3s;}
.btn-close:focus-visible::before,
.btn-close:hover::before {transform: translate(-50%, -50%) rotate(30deg);}
.btn-close:focus-visible::after,
.btn-close:hover::after {transform: translate(-50%, -50%) rotate(-30deg);}


/*-------------------------------------------------------------------
	분류그룹 : Badge
	속성순서 : Expression
-------------------------------------------------------------------*/
.badge {display: inline-flex; padding: var(--sp-08); border: 1px solid var(--color-secondary-5); border-radius: var(--radius-6); background-color: var(--color-secondary-5); line-height: 1; font-weight: 500; font-size: var(--fz-label-md); text-align: center; color: var(--color-primary-60); align-items: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/* size */
.badge[data-size="xs"] {padding: var(--sp-02) var(--sp-04); border-radius: var(--radius-4); font-size: var(--fz-detail-sm);}
.badge[data-size="sm"] {padding: var(--sp-04) var(--sp-08); border-radius: var(--radius-4); font-size: var(--fz-label-sm);}
.badge[data-size="lg"] {padding: var(--sp-10) var(--sp-12); font-size: var(--fz-label-lg);}

/* hierarchy */
.badge[data-level="primary"] {background-color: var(--color-primary); color: var(--color-white);}
.badge[data-level="secondary"] {background-color: var(--color-secondary); color: var(--color-white);}
.badge[data-level="tertiary"] {background-color: var(--color-gray-70); color: var(--color-white);}
.badge[data-level="point"] {background-color: var(--color-point); color: var(--color-white);}

/* system color */
.badge[data-level="danger"] {background-color: var(--color-danger); color: var(--color-white);}
.badge[data-level="warning"] {background-color: var(--color-warning); color: var(--color-black);}
.badge[data-level="success"] {background-color: var(--color-success); color: var(--color-white);}
.badge[data-level="info"] {background-color: var(--color-info); color: var(--color-white);}

/* outline */
.badge.outline {border-color: var(--color-primary); background-color: var(--color-white); color: var(--color-primary);}
.badge.outline[data-level="primary"] {border-color: var(--color-primary); background-color: var(--color-white); color: var(--color-primary);}
.badge.outline[data-level="secondary"] {border-color: var(--color-secondary); background-color: var(--color-white); color: var(--color-secondary);}
.badge.outline[data-level="tertiary"] {border-color: var(--color-gray-70); background-color: var(--color-white); color: var(--color-gray-70);}
.badge.outline[data-level="point"] {border-color: var(--color-point); background-color: var(--color-white); color: var(--color-point);}

/* outline */
.badge.round {min-width: var(--sp-32); height: var(--sp-32); padding: var(--sp-04); border-radius: 9999px; justify-content: center;}
.badge.round[data-size="xs"] {min-width: var(--sp-24); height: var(--sp-24); padding: var(--sp-04);}
.badge.round[data-size="sm"] {min-width: var(--sp-28); height: var(--sp-28); padding: var(--sp-04);}
.badge.round[data-size="lg"] {min-width: var(--sp-40); height: var(--sp-40); padding: var(--sp-04);}










/*-------------------------------------------------------------------
	분류이름: Form
	분류그룹: Components
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : Table
	속성순서 : Form
-------------------------------------------------------------------*/
.table {width: 100%; border-top: 2px solid #000; background-color: #fff;}
.table caption {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.table tr th {padding: var(--sp-08) var(--sp-16); border-bottom: 1px solid var(--color-gray-30); background-color:#F8F8F8; font-weight: 700; font-size: var(--fz-body-md); text-align: center; color: var(--color-black);}
.table tr td {padding: var(--sp-08) var(--sp-16); border-bottom: 1px solid var(--color-gray-30); background-color: var(--color-white); font-weight: 400; font-size: var(--fz-body-md); text-align: center; color:#555; word-break: keep-all; overflow-wrap: break-word;}

.scroll-table {display: block; overflow-x: auto; overflow-y: hidden; position: relative;}
.scroll-table .scroll-guide {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: var(--sp-16); background: url(../../../images/site/kor/common/bg_scroll.png) no-repeat center / 145px; text-indent: -9999px;}
/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.table.layout-fixed {table-layout: fixed;}

/* Size */
.table[data-size="xs"] tr th,
.table[data-size="xs"] tr td {padding: var(--sp-02) var(--sp-04); font-size: var(--fz-body-sm);}
.table[data-size="sm"] tr th,
.table[data-size="sm"] tr td {padding: var(--sp-04) var(--sp-08); font-size: var(--fz-body-sm);}
.table[data-size="lg"] tr th,
.table[data-size="lg"] tr td {padding: var(--sp-12) var(--sp-20); font-size: var(--fz-body-lg);}

.table th.xs,
.table td.xs {width: 6%;}
.table th.sm,
.table td.sm {width: 8%;}
.table th.md,
.table td.md {width: 12%;}
.table th.lg,
.table td.lg {width: 16%;}
.table th.xl,
.table td.xl {width: 20%;}

/* Align */
.table.th-left tr th {text-align: left;}
.table.td-left tr td {text-align: left;}
.table.th-right tr th {text-align: right;}
.table.td-right tr td {text-align: right;}
.table.th-center tr th {text-align: center;}
.table.td-center tr td {text-align: center;}
.table.left tr th,
.table.left tr td {text-align: left;}
.table.right tr th,
.table.right tr td {text-align: right;}
.table tr th.left,
.table tr td.left {text-align: left;}
.table tr th.right,
.table tr td.right {text-align: right;}

.table.vrt-top tr td {vertical-align: top;}
.table.vrt-center tr td {vertical-align: middle;}

/* Head Type */
.table[data-s-head="a"] thead tr th,
.table[data-s-head="a"] thead tr td {background-color: var(--color-primary-5); color: var(--color-black);}
.table[data-s-head="b"] thead tr th,
.table[data-s-head="b"] thead tr td {background-color: var(--color-black); color: var(--color-white);}
.table[data-s-head="c"] thead tr:last-child th,
.table[data-s-head="c"] thead tr:last-child td {border-bottom: 2px solid var(--color-black);}

/* Line */
.table tr th.bl,
.table tr td.bl {border-left: 1px solid var(--color-gray-30);}
.table tr th.br,
.table tr td.br {border-right: 1px solid var(--color-gray-30);}
/* 안쪽 라인 */
.table[data-s-line="inside"] tr th + th,
.table[data-s-line="inside"] tr th + td,
.table[data-s-line="inside"] tr td + th,
.table[data-s-line="inside"] tr td + td {border-left: 1px solid var(--color-gray-30);}
/* 양방향 라인 */
.table[data-s-line="both"] tr th + th,
.table[data-s-line="both"] tr th + td,
.table[data-s-line="both"] tr td + th,
.table[data-s-line="both"] tr td + td {border-left: 1px solid var(--color-gray-30);}

.table[data-s-line="both"] tr th:first-child,
.table[data-s-line="both"] tr td:first-child {border-left: 1px solid var(--color-gray-30);}
.table[data-s-line="both"] tr th:last-child,
.table[data-s-line="both"] tr td:last-child {border-right: 1px solid var(--color-gray-30);}

/* 반응형 스타일 */
.table[data-s-media="vert"] td .th {display: none;}
.table[data-s-media="hrzn"] td .th {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.table[data-s-hover="a"] tr:focus-within td,
.table[data-s-hover="a"] tr:hover td {background-color: var(--color-primary-5);}
.table[data-s-hover="b"] tr:focus-within td,
.table[data-s-hover="b"] tr:hover td {background-color: var(--color-secondary-5);}
.table[data-s-hover="c"] tr:focus-within td,
.table[data-s-hover="c"] tr:hover td {background-color: #FFFBEC;}
.table[data-s-hover="indie"] tr td:focus-within,
.table[data-s-hover="indie"] tr td:hover {background-color: var(--color-primary-5);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px){
	.scroll-table[data-size="lg"]::before {display: block;}
	.scroll-table[data-size="lg"] .table-box .table {width: 1200px;}
}
@media screen and (max-width: 768px){
	.scroll-table:not([data-size])::before {display: block;}
	.scroll-table:not([data-size]) .table-box .table {width: 1024px;}

	/* 한 줄 출력형태 */
    .table[data-s-media] {display: block; text-align: left;}
    .table[data-s-media] tbody {display: block;}
    .table[data-s-media] thead {display: none;}
    .table[data-s-media] tr {display: block;}
    .table[data-s-media] tr td {display: block; padding: var(--sp-08); border: 0; border-bottom: 1px solid var(--color-gray-30); text-align: left;}
    .table[data-s-media] tr td:last-child {border-bottom-color: var(--color-gray-50);}
    .table[data-s-media="hrzn"] tr .th {display: block; margin-left: -0.8rem; padding: 0 0 var(--sp-08); border: 0; background-color: #fff; font-weight: 700; font-size: 1.6rem;}
	.table[data-s-media="vert"] tr th {display: block; margin-left: -0.8rem; padding: 0 0 var(--sp-08); border: 0; background-color: #fff; font-weight: 700; font-size: 1.6rem;}

    /* 한 줄 출력형태 - 제목 가로형 */
	.table[data-s-media="hrzn"].col-row tr td,
	.table[data-s-media="hrzn"] tr td.col-row {display: flex; align-items: center;}
    .table[data-s-media="hrzn"] tr td.col-row .th {min-width: 8rem; padding-bottom: 0; flex-shrink: 0;}
	.table[data-s-media="vert"].col-row tr,
	.table[data-s-media="vert"] tr.col-row {display: flex; align-items: center;}
	.table[data-s-media="vert"] tr.col-row th {min-width: 8rem; padding-bottom: 0; flex-shrink: 0;}
}
@media screen and (max-width: 600px){
	.scroll-table[data-size="sm"]::before {display: block;}
	.scroll-table[data-size="sm"] .table-box .table {width: 768px;}
}
@media screen and (max-width: 390px){
	.scroll-table[data-size="xs"]::before {display: block;}
	.scroll-table[data-size="xs"] .table-box .table {width: 600px;}
}


/*-------------------------------------------------------------------
	분류그룹 : header fixed (헤딩 고정용)
	속성순서 : Form > Table
-------------------------------------------------------------------*/
table.table-header-fixed {display: block; height: 100%; font-size: var(--fz-body-sm);}
table.table-header-fixed thead {display: block;}
table.table-header-fixed tbody {display: block; overflow-x: hidden; overflow-y: auto; height: calc(100% - 39px);}
table.table-header-fixed tr {display: table; table-layout: fixed; width: 100%;}
table.table-header-fixed tr th,
table.table-header-fixed tr td {padding: var(--sp-08); border-left: 0; font-size: inherit;}
table.table-header-fixed tr th {font-weight: 500; color: var(--color-gray-90);}
table.table-header-fixed tr td {font-weight: 500; color: var(--color-gray-80); word-break: keep-all; overflow-wrap: break-word;}
table.table-header-fixed tr .xs {width: 6rem;}
table.table-header-fixed tr .sm {width: 8rem;}
table.table-header-fixed tr .md {width: 12rem;}
table.table-header-fixed tr .lg {width: 16rem;}
table.table-header-fixed tr .xl {width: 18rem;}
table.table-header-fixed tr .th {display: none;}




/*-------------------------------------------------------------------
	분류그룹 : form-control (Input, Textarea)
	속성순서 : Form
-------------------------------------------------------------------*/
.f-control {display: block; width: 100%; padding: 0 var(--sp-16); border: 1px solid var(--color-gray-40); border-radius: var(--radius-6); font-weight: 400; font-size: 1.6rem; color: var(--color-gray-90);}
.f-control::placeholder {color: var(--color-gray-60);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/* input */
input.f-control {height: var(--sp-48);}
input.f-control[data-size="xs"] {height: var(--sp-32); padding: 0 var(--sp-08); border-radius: var(--radius-4); font-size: var(--fz-label-sm);}
input.f-control[data-size="sm"] {height: var(--sp-40); padding: 0 var(--sp-12); border-radius: var(--radius-6); font-size: var(--fz-label-sm);}
input.f-control[data-size="lg"] {height: var(--sp-56); padding: 0 var(--sp-20); font-size: var(--fz-label-md);}
input.f-control[data-size="xl"] {height: var(--sp-64); padding: 0 var(--sp-24); font-size: var(--fz-label-lg);}

/* textarea */
textarea.f-control {height: 12rem; padding: var(--sp-16); resize: none;}
textarea.f-control[data-size="xs"] {height: 8rem; padding: var(--sp-12);}
textarea.f-control[data-size="sm"] {height: 10rem; padding: var(--sp-12);}
textarea.f-control[data-size="lg"] {height: 16rem; border-radius: var(--radius-8); font-size: var(--fz-label-lg);}
textarea.f-control[data-size="xl"] {height: 20rem; border-radius: var(--radius-8); font-size: var(--fz-label-lg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* state */
.f-control:read-only {border-color: var(--color-gray-40); background-color: var(--color-gray-10); color: var(--color-gray-70);}
.f-control:read-only::placeholder {color: var(--color-gray-70);}
.f-control:disabled {border-color: var(--color-gray-40); background-color: var(--color-gray-30); color: var(--color-gray-70);}
.f-control:disabled::placeholder {color: var(--color-gray-70);}
/* focus */
.f-control:not(:read-only):focus {border-width: 2px; border-color: var(--color-primary); outline: none;}


/*-------------------------------------------------------------------
	분류그룹 : Checkbox, Radio
	속성순서 : Form
-------------------------------------------------------------------*/
.f-check {display: inline-flex; position: relative; align-items: center; font-size: 1rem;}
.f-check > input[type="checkbox"],
.f-check > input[type="radio"] {position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0);}
.f-check > span,
.f-check > label {display: block; position: relative; padding-left: var(--sp-28); line-height: 2rem; font-weight: 400; font-size: 1.6rem; color: #000; cursor: pointer;}

.f-check > span::before,
.f-check > label::before {content:''; position:absolute; top: 0; left: 0; width: var(--sp-20); height: var(--sp-20); border: 1px solid var(--color-gray-30); border-radius: var(--radius-4); background-color: var(--color-white);}
.f-check > input[type="radio"] + span::before,
.f-check > input[type="radio"] + label::before {border-radius: 100px;}

.f-check > input[type="checkbox"] + span::after,
.f-check > input[type="checkbox"] + label::after {content:""; position:absolute; top: 0.5rem; left: 0.5rem; width: 1rem; height: 0.7rem; border-width: 0 0 0.2rem 0.2rem; border-style: solid; border-color: var(--color-white); opacity: 0; transform: rotate(-45deg); box-sizing: border-box;}
.f-check > input[type="radio"] + span::after,
.f-check > input[type="radio"] + label::after {content:""; position:absolute; top: 0.5rem; left: 0.5rem; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--color-primary); opacity: 0;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.f-check[data-size="sm"] > span,
.f-check[data-size="sm"] > label {padding-left: var(--sp-24); line-height: var(--sp-16); font-size: var(--fz-label-sm);}
.f-check[data-size="sm"] > span::before,
.f-check[data-size="sm"] > label::before {width: var(--sp-16); height: var(--sp-16);}
.f-check[data-size="sm"] > input[type="checkbox"] + span::after,
.f-check[data-size="sm"] > input[type="checkbox"] + label::after {top: 0.5rem; left: 0.5rem; width: 0.7rem; height: 0.5rem;}
.f-check[data-size="sm"] > input[type="radio"] + span::after,
.f-check[data-size="sm"] > input[type="radio"] + label::after {top: 0.4rem; left: 0.4rem; width: 0.8rem; height: 0.8rem;}

.f-check[data-size="lg"] > span,
.f-check[data-size="lg"] > label {padding-left: var(--sp-32); line-height: var(--sp-24); font-size: var(--fz-label-lg);}
.f-check[data-size="lg"] > span::before,
.f-check[data-size="lg"] > label::before {width: var(--sp-24); height: var(--sp-24);}
.f-check[data-size="lg"] > input[type="checkbox"] + span::after,
.f-check[data-size="lg"] > input[type="checkbox"] + label::after {top: 0.5rem; left: 0.6rem; width: 1.3rem; height: 0.9rem;}
.f-check[data-size="lg"] > input[type="radio"] + span::after,
.f-check[data-size="lg"] > input[type="radio"] + label::after {top: 0.5rem; left: 0.5rem; width: 1.4rem; height: 1.4rem;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* focused */
.f-check input[type="radio"]:focus-visible ~ span,
.f-check input[type="radio"]:focus-visible ~ label, 
.f-check input[type="checkbox"]:focus-visible ~ span,
.f-check input[type="checkbox"]:focus-visible ~ label {outline: 2px solid var(--color-primary); outline-offset: 0.4rem;}

/* checked */
.f-check > input:checked + span::before,
.f-check > input:checked + label::before {border-color: var(--color-primary);}
.f-check > input[type="checkbox"]:checked + span::before,
.f-check > input[type="checkbox"]:checked + label::before {background-color: var(--color-primary);}

.f-check > input:checked + span::after,
.f-check > input:checked + label::after {opacity: 1;}

/* disabled */
.f-check > input:disabled + span,
.f-check > input:disabled + label {color: var(--color-gray-50);}
.f-check > input:disabled + span::before,
.f-check > input:disabled + label::before,
.f-check > input:checked:disabled + span::before,
.f-check > input:checked:disabled + label::before {border-color: var(--color-gray-40); background-color: var(--color-gray-20);}
.f-check > input[type="checkbox"]:checked:disabled + span::after,
.f-check > input[type="checkbox"]:checked:disabled + label::after {border-color: var(--color-gray-40);}
.f-check > input[type="radio"]:checked:disabled + span::after,
.f-check > input[type="radio"]:checked:disabled + label::after {background-color: var(--color-gray-40);}


/*-------------------------------------------------------------------
	분류그룹 : Select
	속성순서 : Form
-------------------------------------------------------------------*/
.f-select {display: block; width: 100%; height: var(--sp-48); padding-left: var(--sp-16); padding-right: var(--sp-48); border: 1px solid var(--color-gray-40); border-radius: var(--radius-6); font-weight: 400; font-size: 1.6rem; background: #fff url(../images/common/i_arr_down.svg) no-repeat center right var(--sp-16); background-size: var(--sp-16); color: var(--color-gray-90);}
.f-select > option {color: inherit;}
.f-select > option:disabled {background-color: var(--color-gray-30); color: var(--color-gray-70);}
.f-select:disabled {border-color:  var(--color-gray-40); background-color: var(--color-gray-30); color: var(--color-gray-70);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.f-select[data-size="xs"] {height: var(--sp-32); padding-right: var(--sp-36); border-radius: var(--radius-4); font-size: var(--fz-label-sm);}
.f-select[data-size="sm"] {height: var(--sp-40); padding-right: var(--sp-36); border-radius: var(--radius-6); font-size: var(--fz-label-sm);}
.f-select[data-size="lg"] {height: var(--sp-56); background-size: var(--sp-20); font-size: var(--fz-label-md);}
.f-select[data-size="xl"] {height: var(--sp-64); background-size: var(--sp-24); font-size: var(--fz-label-lg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.f-select:focus {border: 2px solid var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: -0.4em;}




/*-------------------------------------------------------------------
	분류이름: Overlay
	분류그룹: Components
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류이름: Modal
	분류그룹: Overlay
-------------------------------------------------------------------*/
.modal {visibility: hidden; position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; transition: visibility 0s 0.4s;}
.modal.active {visibility: visible; transition: visibility 0s 0s;}
.modal .bg {width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);}
.modal .modal-con {display: flex; overflow: hidden; position: absolute; top: 50%; left: 50%; max-width: 76.8rem; width: 100%; max-height: 80vh; padding: var(--sp-24); border-radius: var(--radius-12); background-color: #fff; transform: translate(-50%, -50%); flex-direction: column;}
.modal .modal-con .con-head {display:flex; overflow: hidden; height: var(--sp-40); margin-bottom: var(--sp-24); padding-right: var(--sp-24); background-color: #ffffff; color: #000000; align-items: center; justify-content: space-between; flex-shrink: 0;}
.modal .modal-con .con-head .tit {display:block; font-weight: 500; font-size: 1.7rem; color: inherit;}
.modal .modal-con .con-body {display: block; overflow-x: hidden; overflow-y: auto; flex-grow: 1;}
.modal .modal-con .con-foot {display: flex; margin-top: var(--sp-24); gap: var(--sp-08); flex-shrink: 0; justify-content: flex-end;}
.modal .modal-con .btn-close {position: absolute; top: var(--sp-24); right: var(--sp-24);}

/* size */
.modal[data-size="xs"] .modal-con {max-width: 40rem; max-height: 55vh;}
.modal[data-size="sm"] .modal-con {max-width: 60rem; max-height: 65vh;}
.modal[data-size="lg"] .modal-con {max-width: 102.4rem; max-height: 100vh;}
.modal[data-size="xl"] .modal-con {max-width: 140rem; max-height: 100vh;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.modal .bg {background-color: rgba(0,0,0,0); transition: background 0.4s;}
.modal.active .bg {background-color: rgba(0,0,0,0.2);}

.modal .modal-con {top: 55%; opacity:0; transition: top 0.4s, opacity 0.4s;}
.modal.active .modal-con {top: 50%; opacity:1;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
    .modal .modal-con {padding: var(--sp-16);}
	.modal .modal-con .con-head {margin-bottom: var(--sp-16);}
	.modal .modal-con .con-foot {margin-top: var(--sp-16);}
}


/*-------------------------------------------------------------------
	분류이름: loading
	분류그룹: overlay
-------------------------------------------------------------------*/
.loading-dialog {display: none; position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); justify-content: center; align-items: center;}
.loading-dialog .dialog-box {display: block; margin: auto; min-width: 20rem; padding: var(--sp-20); border-radius: var(--sp-08); background-color: #fff; font-weight: 500; font-size: 1.7rem; text-align: center; box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);}
.loading-dialog .dialog-box::before {content:""; display: block; width: var(--sp-40); height: var(--sp-40); margin: 0 auto var(--sp-16); background: url(../images/common/i_loading.svg) no-repeat center / var(--sp-40); flex-shrink: 0;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.loading-dialog[data-size="xs"] .dialog-box {padding: var(--sp-12) var(--sp-08); font-size: 1.5rem;}
.loading-dialog[data-size="xs"] .dialog-box::before {width: var(--sp-24); height: var(--sp-24); background-size: var(--sp-24);}
.loading-dialog[data-size="sm"] .dialog-box {padding: var(--sp-16); font-size: 1.5rem;}
.loading-dialog[data-size="sm"] .dialog-box::before {width: var(--sp-32); height: var(--sp-32); background-size: var(--sp-32);}

.loading-dialog[data-s-type="local"] {position: absolute;}
.loading-dialog[data-s-type="local"] .dialog-box {min-width: 0;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.loading-dialog .dialog-box::before {animation: aniLoading 1s steps(8) infinite;}
.loading-dialog.active {display: flex;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.loading-dialog .dialog-box {font-size: 1.6rem;}
	.loading-dialog[data-size="xs"] .dialog-box {font-size: 1.4rem;}
	.loading-dialog[data-size="sm"] .dialog-box {font-size: 1.4rem;}
}




/*-------------------------------------------------------------------
	분류이름: Navigation
	분류그룹: Components
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류이름: Breadcrumb
	분류그룹: Navigation
-------------------------------------------------------------------*/
.breadcrumb {display: block;}
.breadcrumb .list {display: flex; align-items: center;}
.breadcrumb .list > li {display: inline-flex; align-items: center;}
.breadcrumb .list > li:last-child {overflow: hidden; min-width: 2.2rem;}
.breadcrumb .list > li::after {content:""; display: block; opacity: 0.6; width: var(--sp-16); height: var(--sp-16); background: url(../images/common/i_arr_next_white.svg) no-repeat center / contain;}
.breadcrumb .list > li:last-child::after {display: none;}
.breadcrumb .list > li > .txt {display: block; padding: var(--sp-04); border-bottom: 1px solid transparent; line-height: var(--sp-20); font-size: var(--fz-body-sm); color: #fff; white-space: nowrap;}
.breadcrumb .list > li:last-child > .txt {overflow: hidden; border-bottom: 1px solid #fff; text-overflow: ellipsis;}
/* .breadcrumb .list > li.home::before {content:""; display: block; width: var(--sp-24); height: var(--sp-24); background: url(../images/common/i_home.svg) no-repeat center / 2rem;} */
.breadcrumb .list > li.home > .txt {position: relative; width: var(--sp-24); height: var(--sp-24); border-bottom: 0;}
.breadcrumb .list > li.home > .txt::before {content:""; display: block; position: absolute; top: 0; left: 0; width: var(--sp-24); height: var(--sp-24); border-radius: 50%; background: transparent url(../images/common/i_home_white.svg) no-repeat center / 2rem;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.breadcrumb .list > li > .txt {transition: border 0.3s, color 0.3s;}
/* .breadcrumb:not(.skip) .list > li > .txt:hover {border-color: var(--color-primary); color: var(--color-primary);} */
/* accessibility */
.breadcrumb .list > li > .txt:focus-visible {outline: 2px dashed #fff; outline-offset: -2px;}

/* skip */
.breadcrumb.skip .list > li:not(:first-child) {display: none;}
.breadcrumb.skip .list > li:last-child {display: inline-flex; position: relative; padding-left: 2.4rem;}
.breadcrumb.skip .list > li:last-child::before {content:""; display: block; opacity: 0.6; width: var(--sp-16); height: var(--sp-16); background: url(../images/common/i_arr_next_white.svg) no-repeat center / contain;}
.breadcrumb.skip .list > li:last-child::after {content:""; display: block; opacity: 1; position: absolute; top: 0; left: 0; width: 2.4rem; height: 100%; background: url(../images/common/i_dots_white.svg) no-repeat center / 2rem;}

/* .breadcrumb.skip .list > li:not(:nth-child(2)) > .txt:hover {border-color: var(--color-primary); color: var(--color-primary);} */

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 600px){
	.breadcrumb .list > li:not(:first-child) {display: none;}
	.breadcrumb .list > li:last-child {display: inline-flex; position: relative; padding-left: 2.4rem;}
	.breadcrumb .list > li:last-child::before {content:""; display: block; opacity: 0.6; width: var(--sp-16); height: var(--sp-16); background: url(../images/common/i_arr_next_white.svg) no-repeat center / contain;}
	.breadcrumb .list > li:last-child::after {content:""; display: block; opacity: 1; position: absolute; top: 0; left: 0; width: 2.4rem; height: 100%; background: url(../images/common/i_dots_white.svg) no-repeat center / 2rem;}
}




/*-------------------------------------------------------------------
	분류이름: Pagination
	분류그룹: Navigation
-------------------------------------------------------------------*/
.pagination {display: inline-flex; gap: var(--sp-08);}
.pagination .btn-navi {display: flex; height: var(--sp-40); padding: 0 var(--sp-08); border-radius: var(--radius-6); font-size: var(--fz-body-md); align-items: center;}
.pagination .btn-navi.prev::before {content:""; display: block; width: var(--sp-20); height: var(--sp-20); background: url(../images/common/i_arr_prev.svg) no-repeat center / 2rem;}
.pagination .btn-navi.next::after {content:""; display: block; width: var(--sp-20); height: var(--sp-20); background: url(../images/common/i_arr_next.svg) no-repeat center / 2rem;}
.pagination .page-links {display: flex; gap: var(--sp-08);}
.pagination .page-links > .skip {display: flex; width: var(--sp-40); height: var(--sp-40); background: url(../images/common/i_dots_gray_70.svg) no-repeat center / 2rem;}
.pagination .page-links > a {display: flex; min-width: var(--sp-40); height: var(--sp-40); border-radius: var(--radius-6); color: var(--color-gray-70); align-items: center; justify-content: center;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.pagination .btn-navi {transition: background 0.3s, color 0.3s;}
.pagination .btn-navi:focus-visible,
.pagination .btn-navi:hover {background-color: var(--color-secondary-5);}

.pagination .page-links > a {transition: background 0.3s, color 0.3s;}
.pagination .page-links > a:focus-visible,
.pagination .page-links > a:hover {background-color: var(--color-secondary-5);}
.pagination .page-links > a.active {background-color: var(--color-secondary); color: var(--color-white);}

/* accessibility */
.pagination .btn-navi:focus-visible,
.pagination .page-links > a:focus-visible {outline: 2px solid rgba(36, 107, 235, 0.8); outline-offset: -0.4em;}
.pagination .page-links > a.active:focus-visible {outline-color: var(--color-white);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 800px) {
	.pagination .btn-navi {height: var(--sp-32);}
	.pagination .page-links {gap: var(--sp-04);}
	.pagination .page-links > .skip {width: var(--sp-32); height: var(--sp-32);}
	.pagination .page-links > a {min-width: var(--sp-32); height: var(--sp-32);}
}
@media screen and (max-width: 600px) {
	.pagination {position: relative; padding-top: var(--sp-60);}
	.pagination .btn-navi {position: absolute; top: 0; height: var(--sp-40); font-size: var(--fz-body-sm);}
	.pagination .btn-navi.prev {left: 50%; transform: translateX(calc(-100% - 4px));}
	.pagination .btn-navi.next {right: 50%; transform: translateX(calc(100% + 4px));}
}
@media screen and (max-width: 425px) {
	.pagination {position: relative; padding-top: var(--sp-52);}
	.pagination .btn-navi {height: var(--sp-32);}
	.pagination .page-links {gap: var(--sp-02);}
	.pagination .page-links > .skip {width: var(--sp-28); height: var(--sp-28);}
	.pagination .page-links > a {min-width: var(--sp-28); height: var(--sp-28); font-size: var(--fz-body-sm);}
}


/*-------------------------------------------------------------------
	분류이름: Pagination jump
	분류그룹: Navigation > Pagination 
-------------------------------------------------------------------*/
.pagination-jump {display: block;}
.pagination-jump > .wrap {display: flex; justify-content: center;}
.pagination-jump > .wrap .form-jump {display: flex; align-items: center;}
.pagination-jump > .wrap .form-jump input {display: block; width: var(--sp-40); height: var(--sp-40); padding: 0; border: 1px solid var(--color-gray-40); border-radius: var(--radius-6); font-weight: 400; font-size: 1.6rem; color: var(--color-gray-90); text-align: center;}
.pagination-jump > .wrap .form-jump input::placeholder {color: var(--color-gray-60);}
.pagination-jump > .wrap .form-jump > .txt {display: block; margin-left: var(--sp-04); font-weight: 500; font-size: 1.6rem; color: var(--color-gray-70);}
.pagination-jump > .wrap .form-jump > .txt {display: block;}
.pagination-jump > .wrap .btn-jump {display: block; height: var(--sp-40); margin-left: var(--sp-16); padding: 0 var(--sp-12); border: 1px solid var(--color-main-60); border-radius: var(--sp-04); background-color: var(--color-main-5); font-weight: 600; font-size: 1.6rem; color: var(--color-main);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.pagination-jump > .wrap .btn-jump {transition: background 0.3s, color 0.3s;}
.pagination-jump > .wrap .btn-jump:focus-visible,
.pagination-jump > .wrap .btn-jump:hover {background-color: var(--color-main-60); color: #fff;}

/* accessibility */
.pagination-jump > .wrap .btn-jump:focus-visible {outline: 2px dashed #fff; outline-offset: -0.4em;}



/*-------------------------------------------------------------------
	분류이름: Disclosure
	분류그룹: Components
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류이름: Tabbox
	분류그룹: Disclosure
-------------------------------------------------------------------*/
.tab-head {display: flex; overflow-y: hidden; overflow-x: auto;}
.tab-head > li {display:block;}
.tab-head > li > .btn-tab {display: flex; position: relative; width: 100%; min-height: var(--sp-48); height: 100%; padding: 0 var(--sp-16); border-bottom: 1px solid var(--color-gray-30); background-color: var(--color-white); font-weight: 500; font-size: 1.6rem; text-align: center; cursor: pointer; align-items: center; justify-content: center}
.tab-head > li > .btn-tab::after {content: ""; position: absolute; bottom: -1px; left: 50%; width: 0; height: 2px; background-color: var(--color-primary);}

.tab-body {display: block;}
.tab-body .tab-con {display: none;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.tab-head[data-size="sm"] > li > .btn-tab {min-height: var(--sp-40); padding: 0 var(--sp-12); font-size: var(--fz-label-md);}
.tab-head[data-size="lg"] > li > .btn-tab {min-height: var(--sp-56); padding: 0 var(--sp-20); font-size: var(--fz-label-lg);}
.tab-head[data-size="xl"] > li > .btn-tab {min-height: var(--sp-64); padding: 0 var(--sp-24); font-size: var(--fz-label-lg);}

.tab-head[data-s-fill="full"] > li {flex: 1 0 0;}
.tab-head[data-s-fill="full-4"] > li {flex: 1 0 calc(100% / 3);}
.tab-head[data-s-fill="full-3"] > li {flex: 1 0 calc(100% / 4);}
.tab-head[data-s-fill="full-2"] > li {flex: 1 0 calc(100% / 6);}

.tab-head[data-s-type="pills"] {margin: 0 calc(-1 * var(--sp-04));}
.tab-head[data-s-type="pills"] > li {padding: 0 var(--sp-04);}
.tab-head[data-s-type="pills"] > li > .btn-tab {border: 0; border-radius: var(--radius-6); background-color: var(--color-primary-5);}
.tab-head[data-s-type="pills"] > li > .btn-tab::after {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.tab-body .tab-con.active {display: block;}

/* basic */
.tab-head > li > .btn-tab {transition: background 0.3s, color 0.3s;}
.tab-head > li > .btn-tab:focus-visible {outline: 2px solid var(--color-primary); outline-offset: -0.4em;}
.tab-head > li > .btn-tab:hover {background-color: var(--color-primary-5);}
.tab-head > li > .btn-tab.active {color: var(--color-primary);}

.tab-head > li > .btn-tab::after {transition: left 0.3s, width 0.3s;}
.tab-head > li > .btn-tab.active::after {left: 0; width: 100%;}

/* pills */
.tab-head[data-s-type="pills"] > li > .btn-tab:focus-visible {outline: 2px dashed var(--color-primary); outline-offset: -0.4em;}
.tab-head[data-s-type="pills"] > li > .btn-tab:hover {background-color: var(--color-primary-10);}
.tab-head[data-s-type="pills"] > li > .btn-tab.active {background-color: var(--color-primary); color: var(--color-white);}
.tab-head[data-s-type="pills"] > li > .btn-tab.active:focus-visible {outline: 2px dashed var(--color-white);}




/*-------------------------------------------------------------------
	분류이름: Accordion
	분류그룹: Disclosure
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
	분류그룹 : 컴포넌트 > 아코디언 메뉴
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.accordion {border-bottom: 1px solid var(--color-gray-30);}
.accordion .list {display: block;}
.accordion .list > li {display: block; position: relative;}
.accordion .list > li > .btn-acr {display: flex; position: relative; width: 100%; height: var(--sp-48); padding: 0 var(--sp-48) 0 var(--sp-16); border-top: 1px solid var(--color-gray-30); background-color: #fff; font-weight: 400; font-size: 1.6rem; color: #000000; align-items: center;}
.accordion .list > li > .list {display: none; margin-left: var(--sp-16);}
.accordion .list > li > .acr-con {display: none; padding: var(--sp-24) var(--sp-16);}

/* fold */
.accordion .list > li > .btn-acr.fold::before {content:""; position: absolute; top: calc(50% - var(--sp-08)); right: var(--sp-16); width: var(--sp-16); height: var(--sp-16); background: url(../images/common/i_arr_down.svg) no-repeat center / var(--sp-16);}
/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.accordion[data-size="lg"] .list > li > .btn-acr {height: var(--sp-56); padding-right: var(--sp-52); font-size: var(--fz-label-md);}
.accordion[data-size="lg"] .list > li > .btn-acr.fold::before {background-size: var(--sp-20);}
.accordion[data-size="xl"] .list > li > .btn-acr {height: var(--sp-64); padding-right: var(--sp-56); font-size: var(--fz-label-lg);}
.accordion[data-size="xl"] .list > li > .btn-acr.fold::before {background-size: var(--sp-24);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.accordion .list > li > .btn-acr {transition: color 0.3s;}
.accordion .list > li > .btn-acr:focus-visible {outline: 2px solid var(--color-primary); outline-offset: -0.4em;}

.accordion .list > li > .btn-acr:focus-visible,
.accordion .list > li > .btn-acr:hover,
.accordion .list > li > .btn-acr.active {color: var(--color-primary);}
.accordion .list > li > .btn-acr.active {font-weight: 600;}

.accordion .list > li > .btn-acr.active.fold::before {transform: rotate(180deg);}