@import "/krds/css/token/krds_tokens.css";

/* @import "/krds/css/token/krds_tokens_nibr.css"; */
/* 
** 2025-07-02 이다혜 common 재정의
** krds 기반으로 반영함
*/

.btn_group {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap:wrap;
}
.disflex{display: flex; gap:5px;}
.fl-wrap {flex-wrap: wrap}
.fl-start {justify-content: flex-start;}
.fl-cent {justify-content: center;}
.justtify-betw{justify-content: space-between}
.alit-cent {align-items: center;}

.btn_group.full > a,.btn_group.full > button{flex:1}

button + button {margin: 0;}

/**************************************************************************/
/* 버튼 색상 */
.wh {
    background-color: var(--krds-color-light-alpha-white100);
    border: 0.1rem solid var(--krds-color-light-gray-20);
    color: var(--krds-color-light-gray-90)
}

.wh:hover,
.wh:focus,
.wh:active {
    background-color: var(--krds-color-light-gray-5);
}

.wh .svg-icon {
    background-color: var(--krds-color-light-gray-100)
}


.blue {
    background-color: var(--krds-color-light-primary-50);
    color: var(--krds-color-light-gray-0);
}

.blue:hover,
.blue:focus,
.blue:active {
    background-color: var(--krds-color-light-primary-60);
}

.blue:hover span,
.blue:focus span,
.blue:active span {
    color: var(--krds-color-light-gray-0)
}


.info {
    background-color: var(--krds-color-light-primary-5);
    color: var(--krds-color-light-primary-60);
    border: 0.1rem solid var(--krds-color-light-primary-50);
}

.info:hover,
.info:focus,
.info:active {
    background-color: var(--krds-color-light-primary-10);
}

.info .svg-icon {
    background-color: var(--krds-color-light-primary-50)
}



.danger {
    background-color: var(--krds-color-light-danger-50);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-danger-50);
}

.danger:hover,
.danger:focus,
.danger:active {
    background-color: var(--krds-color-light-danger-60);
}

/* danger 보더타입 */
.danger.border {
    background-color: var(--krds-light-color-border-danger-light);
    color: var(--krds-light-color-text-danger);
    border: 0.1rem solid var(--krds-light-color-border-danger);
}

.danger.border:hover,
.danger.border:focus,
.danger.border:active {
    background-color: var(--krds-color-light-danger-60);
    color: var(--krds-light-color-surface-danger-subtler);
}

.danger.border .svg-icon {
    background-color: var(--krds-light-color-text-danger);
}

.danger.border:hover .svg-icon {
    background-color: var(--krds-light-color-surface-danger-subtler);
}



.warning {
    background-color: var(--krds-color-light-warning-40);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-warning-40);
}

.warning:hover,
.warning:focus,
.warning:active {
    background-color: var(--krds-color-light-warning-50);
}



.succes {
    background-color: var(--krds-color-light-success-50);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-success-50);
}

.succes:hover,
.succes:focus,
.succes:active {
    background-color: var(--krds-color-light-success-60);
}



.point {
    background-color: var(--krds-color-light-point-50);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-point-50);
}

.point:hover,
.point:focus,
.point:active {
    background-color: var(--krds-color-light-point-60);
}




.bk {
    background-color: var(--krds-color-light-alpha-black100);
    color: var(--krds-color-light-gray-0);
    border: 0.1rem solid var(--krds-color-light-gray-0);
    transition: var(--krds-transition-base);
}

.bk:hover,
.bk:focus,
.bk:active {
    background-color: var(--krds-color-light-gray-0);
    color: var(--krds-color-light-gray-100);
    border: 0.1rem solid var(--krds-color-light-gray-20);
}

.bk:hover .svg-icon,
.bk:focus .svg-icon,
.bk:active .svg-icon {
    background-color: var(--krds-color-light-gray-100);
}


/*************************************************
** 아이콘 사이즈,색상 
*************************************************/
.btn.small .svg-icon {
    width: var(--krds-icon--size-small);
    height: var(--krds-icon--size-small);
}

.btn .svg-icon {
    background-color: var(--krds-color-light-gray-0);
}






/*************************************************
** 아이콘 추가 ::25-07-09, 이다혜 
*************************************************/

.card-view {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/krds/img/component/icon/card_view.svg);
    mask-image: url(/krds/img/component/icon/card_view.svg);
}

.list-view {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/krds/img/component/icon/list_view.svg);
    mask-image: url(/krds/img/component/icon/list_view.svg);
}

.ico-close {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url(/krds/img/component/icon/ico_close.svg);
    mask-image: url(/krds/img/component/icon/ico_close.svg);
}


/*************************************************
** 보더형 아이콘
*************************************************/

.krds-btn.only-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
}
.krds-btn.only-icon .svg-icon {
    width: var(--krds-icon--size-large);
    height: var(--krds-icon--size-large);
}



/***************************************************************************************
***************************************************************************************
** 텍스트 버튼 (페이지 내 이동)
*************************************************/

.btn.link {
    color: var(--krds-color-light-gray-95);
    display: inline-block;
    height: auto !important;
    min-height: auto;
    padding: 0 var(--krds-number-2);
    font-size: var(--krds-pc-font-size-body-large);
    text-align: left;
    white-space: normal;
    color: var(--krds-color-light-primary-50);
}

.btn.link:hover,
.btn.link:focus,
.btn.link:active {
    background-color: var(--krds-color-light-secondary-5);
}

/*************************************************
** 텍스트 버튼 사이즈 정의
*************************************************/
.btn.link.medium {
    padding: 0 var(--krds-number-2);
    font-size: var(--krds-button--pc-font-size-medium);
}





/***************************************************************************************
***************************************************************************************
** 텍스트 색상(상태관리 영역)
*************************************************/
.stat-txt {
    display: inline-flex;
    color: var(--krds-high-contrast-color-text-static);
    font-size: var(--krds-pc-font-size-body-medium);
    border: var(--transparent);
    background: var(--transparent);
    text-align: left;
    padding: 0 var(--krds-padding-1);
}
.stat-txt:hover,.stat-txt:focus,.stat-txt:active {
    color: var(--krds-high-contrast-color-text-static);
    border: var(--transparent);
    background: var(--transparent);
}

.stat-txt.blue{
    color: var(--krds-light-color-element-primary);
}
.stat-txt.info{
    color: var(--krds-light-color-element-information);
}
.stat-txt.danger {
    color: var(--krds-light-color-element-danger);
}
.stat-txt.warning{
    color: var(--krds-high-contrast-color-text-warning);
}

.stat-txt.succes{
    color: var(--krds-light-color-element-success);
}
.stat-txt.point{
    color: var(--krds-light-color-element-point);
}

/***************************************************************************************
***************************************************************************************
** 버튼 라운드
*************************************************/
.krds-btn.round {
    border-radius: var(--krds-radius-max) var(--krds-radius-max);
}

@media (max-width: 767px) {
    .krds-btn {
        justify-content: center;
        width: 100%;
    }
}
/***************************************************************************************
***************************************************************************************
** 입력 폼 (div 형태) :: 공정거래위원회 css 파일 참고하여 작성함.
                        필요없는 css도 있을 수 있습니다. 추 후 정리 예정
                        >> 작업자 이다혜
*************************************************/
.p-wrap {word-break: break-all}


/** form **/
.txt-box.bg-white .box-sec .form-conts .form-datepicker.single {
    width: 18rem;
}

.txt-box.bg-white .box-sec .form-conts .form-datepicker.period {
    width: 26.2rem;
}

textarea.form-control {
    height: var(--krds-spacer-37);
    font-size: var(--krds-input-fz-md);
}

.textarea-wrap .form-control:placeholder-shown {
    font-size: var(--krds-input-fz-md);
}

.form-check.lg > [type=radio] ~ label::after {
    top: calc((var(--krds-rdo-size-lg) - 1.2rem) / 2);
    left: calc((var(--krds-rdo-size-lg) - 1.2rem) / 2);
    width: 1.2rem;
    height: 1.2rem;
}

.form-select {
    width: auto;
    min-width: 13rem;
}

.form-tit {
    color: #555;
    font-size: 1.7rem;
}

.txt-box.bg-white .box-sec .p-attach .p-attach__item.p-file {
    margin-bottom: 0;
}

.txt-box.bg-white .box-sec .p-attach .p-attach__item.p-file+.p-attach__item {
    margin-top: 2rem;
}

@media (max-width: 1099px) and (min-width:1024px) {
    .txt-box.bg-white .form-group {
        width:100%;
    }
}

@media all and (max-width: 799px) {
    .form-select {
        width:100%;
        min-width: inherit;
    }

    .txt-box.bg-white .input-group.m-column .form-datepicker {
        width: 100% !important;
    }
}

@media all and (max-width: 599px) {
    .form-select.md {
        font-size:1.5rem;
    }

    .textarea-wrap .form-control:placeholder-shown {
        font-size: 1.5rem;
    }

    .chk-area {
        gap: var(--krds-spacer-4);
    }

    .txt-box.bg-white .input-group.m-column {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-tit {
        font-size: 1.5rem;
    }

    .txt-box.bg-white .box-sec .p-attach .p-attach__item.p-file+.p-attach__item {
        margin-top: 1.2rem;
    }
}



/* h3.sec-tit */
#contents h3.sec-tit{margin-bottom:3.4rem!important; font-size:3.0rem; font-weight: 700;}
#contents h3.sec-tit .step-now {
    display: block;
    margin-bottom:1rem;
    font-size: var(--krds-fz-body-md);
    color: var(--krds-color-light-gray-70);
    font-weight: 400;
}
#contents h3.sec-tit .step-now strong {
    color: var( --krds-color-light-primary-60);
    font-weight: 700;
}
@media all and (max-width:599px){
    #contents h3.sec-tit{margin-bottom:2.2rem!important; font-size:2.4rem;}
    #contents h3.sec-tit .step-now{font-size:1.5rem;}
}


/************************** */
/** css 파일명 program.css */
/************************** */
/** 입력 **/
.p-wrap .row.required-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.p-wrap .row.required-area.single {
    display: block;
}

.p-wrap .row.required-area .required-area-right div+div {
    margin-top: 1rem;
}

.p-wrap .row.required-area.col-right {
    flex-direction: column;
    align-items: flex-end;
}

.p-wrap .p-form__required--icon {
    display: inline-block;
    color: #eb003b;
    font-size: 1.5rem;
    vertical-align: middle;
}

.p-wrap .p-caution {
    color: #2d2d2d;
    font-size: 1.5rem;
    text-align: right;
}

.p-wrap .p-caution .p-form__required--icon {
    display: inline-block;
    margin-top: -0.5rem;
    margin-right: 1rem;
    text-indent: 100%;
}

.p-wrap .box-cnt .box-tit2 {
    align-items: center;
}

.p-attach .p-attach__item.p-file {
    display: flex;
    margin-bottom: 2rem;
    gap: 0.8rem;
}

.p-attach .p-attach__item .file-info {
    display: flex;
    color: #8e8e8e;
    align-items: center;
    /* max-width:100%;*/
}

.p-attach .p-attach__item .file-info span {
}

.p-attach .p-attach__item .file-info .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 160px);
}

.p-attach .p-attach__item .file-info .file-size {
    margin-left: 0.4rem;
}

.p-attach .p-attach__item .file-info .file-del {
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    background: url(../../img/component/ico_del.png) no-repeat;
    font-size: 0;
}

.p-attach .p-attach__item .file-info.form-control {
    border-color: #c6c6c6;
    background-color: #d8d8d8;
    max-width: calc(100% - 105px);
}

.p-attach .p-attach__item .form-check+.form-check {
    margin-right: 1rem;
}

.p-attach .p-attach__item .p-attach__preview.ico-go {
    background-image: url(../../img/component/ico_go_20.svg);
}

@media all and (max-width: 599px) {
    .p-wrap .row.required-area {
        flex-direction:column;
        align-items: flex-start;
    }

    .p-wrap .row.required-area .required-area-right {
        display: flex;
        width: 100%;
        margin-top: 1.5rem;
        flex-direction: column;
        align-items: flex-end;
    }

    .p-wrap .row.required-area .required-area-right div+div {
        margin-top: 0.2rem;
    }

    .p-attach .p-attach__item .file-info {
        max-width: calc(100% - 92px);
    }

    .p-attach .p-attach__item .file-info .file-name {
        max-width: calc(100% - 130px);
        font-size: 1.4rem;
    }

    .p-attach .p-attach__item .file-info .file-size {
        font-size: 1.4rem;
    }
}

.form-caution {
    margin-top: 1.2rem;
    padding-left: 2.6rem;
    color: var(--krds-color-light-gray-70);
    font-size: var(--krds-fz-label-sm);
}

.txt-box.bg-white .form-group .form-caution {
    margin-top: 0;
}

.form-caution+.form-caution {
    margin-top: 0.6rem;
}

.form-caution:before {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    margin-top: 0.1rem;
    margin-right: 0.6rem;
    margin-left: calc((2rem + 0.6rem)* -1);
    background: url(/krds/img/component/icon/ico_tooltip.svg) no-repeat center;
    background-size: contain;
    content: "";
    vertical-align: top;
    flex-shrink: 0;
    flex-grow: 0;
}



/** 파일명 template.css */

.txt-box{padding:var(--krds-number-14); border:0.1rem solid var(--krds-color-light-gray-30); border-radius:var(--krds-number-7); background-color:var(--krds-color-light-gray-5); color:var(--krds-color-light-gray-90);}
.txt-box .conts-desc{padding-bottom:var(--krds-number-10);}
.txt-box.outline{gap:2.5rem;}
.txt-box.outline .outline-tit{margin-top:0!important; margin-bottom:0!important; font-size:var(--krds-mobile-font-size-display-small) !important;}
.txt-box.outline .outline-txt{margin-bottom:1rem; letter-spacing:-0.01em;}
.txt-box.outline .conts-desc-wrap{padding-top:var(--krds-number-13); border-top:0; background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAAXNSR0IArs4c6QAAABRJREFUGFdjPHbs2H8GKLCysmIEADHuBALtDc+7AAAAAElFTkSuQmCC') repeat-x top left;}
.txt-box.outline .conts-desc-wrap.type1{gap:2rem;}
.txt-box.outline .conts-desc-wrap.type1 .sec-tit{margin-top:0!important; margin-bottom:0!important;}
.txt-box.outline .conts-desc-wrap.type1 .outline-txt{margin-bottom:0;}
.txt-box.outline .conts-desc-wrap.type1 .info-list{margin-top:0; gap:1.2rem;}
.txt-box.outline .check-list{gap:1.4rem;}
.txt-box.outline .check-list > li{padding-left:2.4rem;}
.outline .conts-desc-wrap.type1{display:flex; align-items:normal; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-12);}
.outline .conts-desc-wrap.type1 .sec-tit{font-size:var(--krds-mobile-font-size-body-large);}
.outline .conts-desc-wrap.type1 .info-list{display:flex; align-items:normal; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-10);}
.outline .conts-desc-wrap.type1 .info-list li{margin:0;}
.fieldset-msg{position:relative; margin-bottom:var(--krds-number-10); padding-left:var(--krds-number-10); color:var( --krds-color-light-primary-60); font-size:var(--krds-fz-body-lg);}
.fieldset-msg::before{position:absolute; top:0.4rem; left:0; width:1.6rem; height:1.6rem; background:url(../../img/main/ico_outline_chk.svg) no-repeat center; background-size:contain; content:"";}
@media (max-width: 767px) {
    .txt-box{padding:3.2rem}
}

/* .txt-box.bg-gray{border:0;}
.txt-box.bg-gray .btm-btn-wrap{display:flex; align-items:flex-start; justify-content:flex-end; flex-direction:row; gap:var(--krds-number-8);}
.txt-box.bg-gray .btm-btn-wrap .btn{min-width:9.1rem;} */



.txt-box.bg-white{display:flex; width:100%; padding-top:3.2rem; background-color:var(--krds-color-light-gray-0); align-items:normal; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-10);}
.txt-box.bg-white .box-tit-wrap{display:flex; align-items:center; justify-content:space-between; flex-direction:row;}
.txt-box.bg-white .box-tit1{margin-top:0!important; margin-bottom:0!important; font-size:var(--krds-mobile-font-size-display-small)!important; font-weight:var(--krds-typo-font-weight-medium);}
.txt-box.bg-white .box-tit2{display:flex; position:relative; margin-top:0!important; margin-bottom:0!important; font-size:1.8rem!important; font-weight:var(--krds-typo-font-weight-medium); gap:var(--krds-number-5);}
.txt-box.bg-white .box-cnt{display:flex; align-items:normal; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-15);}
.txt-box.bg-white .box-sec{display:flex; align-items:normal; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-9);}
.txt-box.bg-white .tbl-no-data{display:flex; padding:var(--krds-number-16) var(--krds-number-10); border-radius:var(--krds-rd-8); background-color:var(--krds-color-light-gray-5); color:var(--krds-color-light-gray-70); font-size:var(--krds-fz-body-lg); text-align:center; align-items:center; justify-content:center; flex-direction:column;}
.txt-box.bg-white .form-group-row{display:flex; max-width:100%; align-items:flex-start; justify-content:flex-start; flex-direction:row; gap:var(--krds-number-10);}
.txt-box.bg-white .form-group-row .form-group{flex:1;}
.txt-box.bg-white .form-group{/*width:58.8rem;*/ max-width:100%; /* gap:var(--krds-number-9); */}
.txt-box.bg-white .form-group.full{width:100%;}
.txt-box.bg-white .form-conts + .form-conts{margin-top:var(--krds-number-7);}
.txt-box.bg-white .form-check-cnt{display:flex; padding-left:var(--krds-number-12); align-items:normal; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-10);}
.txt-box.bg-white .form-check-cnt .form-label{margin-bottom:var(--krds-number-7);}
.txt-box.bg-white .form-group-addr{display:flex; width:58.8rem; max-width:100%; align-items:center; justify-content:flex-start; flex-direction:row; gap:var(--krds-number-8);}
.txt-box.bg-white .form-group-addr .form-group{width:100%;}
.txt-box.bg-white .form-group-addr .addr-number{display:inline-flex; align-items:center; justify-content:flex-start; flex-direction:row; gap:var(--krds-number-7); flex:1;}
.txt-box.bg-white .form-group-addr .addr-number > .form-group{flex:1;}
.txt-box.bg-white .form-group-addr .addr-division{display:inline-flex; align-items:flex-start; justify-content:flex-start; flex-direction:column; flex:1;}
.txt-box.bg-white .file-upload{display:flex; padding:var(--krds-number-18) var(--krds-number-14); border:0.1rem dashed var(--krds-color-light-gray-40); border-radius:1.2rem; background-color:var(--krds-color-light-gray-10); align-items:center; justify-content:center; flex-direction:column; gap:var(--krds-number-14);}
.txt-box.bg-white .file-upload .txt{font-size:var(--krds-fz-body-lg); text-align:center;}
.txt-box.bg-white .form-addr-result{padding:var(--krds-number-10); border-radius:0.8rem; background-color:var(--krds-color-light-gray-5);}
.txt-box.bg-white .form-addr-result .info-ul{display:flex; align-items:normal; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-10);}
.txt-box.bg-white .form-addr-result .info-ul li{display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:row; gap:var(--krds-number-10);}
.txt-box.bg-white .form-addr-result .info-ul li .key{/* width:24rem; flex:1; */width:19.6rem;flex-shrink:0;font-weight:var(--krds-font-weight-bold)}
.txt-box.bg-white .form-addr-result .info-ul li .value{flex:2;}
.txt-box.bg-white .form-addr-result .info-ul + .info-ul{margin-top:var(--krds-number-10); padding-top:var(--krds-number-10); border-top:0.1rem solid var(--krds-color-light-gray-30);}
.txt-box.bg-white .btn-txt.sm{height:auto;}
.txt-box:not(:first-of-type){margin-top:var(--krds-number-14);}
.txt-box .book-info-ul{display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column; gap:var(--krds-number-10);}
.txt-box .book-info-ul > li{display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:row; gap:var(--krds-number-14);}
.txt-box .book-info-ul > li .key{width:16rem; flex-shrink:0;}
@media (max-width:1023px) and (min-width:600px){
    .txt-box.bg-white{padding-left:var(--krds-number-10); padding-right:var(--krds-number-10);}
}
@media (max-width: 767px) {
    .txt-box.bg-white .form-addr-result .info-ul li{flex-direction:column;gap:0.8rem}
}
@media all and (max-width:599px){
    h3.sec-tit+.txt-box.bg-white{margin-top:0;}
    .txt-box{padding:var(--krds-number-10) var(--krds-number-9);}
    .txt-box.outline{gap:1.2rem;}
    .txt-box.outline .outline-tit{font-size:var(--krds-mobile-font-size-body-large) !important;}
    .txt-box.outline .outline-tit::before{width:2.7rem; height:2.7rem;}
    .txt-box.outline .outline-txt{font-size:var(--krds-fz-body-sm);}
    .txt-box.outline .conts-desc-wrap.type1{gap:1.3rem;}
    .txt-box.outline .conts-desc-wrap{padding-top:var(--krds-number-10);}
    .txt-box.outline .conts-desc-wrap.type1 .info-list{gap:0.5rem;}
    .txt-box.outline .check-list{gap:1rem;}
    .txt-box.outline .check-list > li{font-size:var(--krds-fz-body-sm);}

    .txt-box.bg-white{padding-top:var(--krds-number-10); gap:var(--krds-number-9);}
    .txt-box.bg-white .box-cnt{gap:var(--krds-number-12);}
    .txt-box.bg-white .box-sec{gap:var(--krds-number-7);}
    .txt-box.bg-white .form-group{gap:var(--krds-number-7);}
    .txt-box.bg-white .box-tit1{font-size:var(--krds-mobile-font-size-body-large) !important;}
    .txt-box.bg-white .box-tit2{font-size:1.7rem!important;}
    
    .txt-box.bg-white .form-group-row
    .txt-box.bg-white .form-group-row.m-column {flex-direction: column;}
}

.box-group-area{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:var(--krds-gap-7);width:100%}
.box-group-area > li{display:flex;align-items:center;justify-content:space-between;flex-direction:row;gap:var(--krds-gap-6);width:100%;padding:var(--krds-padding-6);border:var(--krds-light-border-width-static-regular) solid var(--krds-light-color-divider-gray-light);border-radius:var(--krds-radius-medium3)}
.box-group-area > li .btn-wrap{display:flex;align-items:center;gap: var(--krds-gap-5);width:auto}

.terms-agree-ul{display:flex;align-items:normal;justify-content:flex-start;flex-direction:column;gap:var(--krds-gap-9)}
.terms-agree-ul li{display:flex;align-items:normal;justify-content:flex-start;flex-direction:column}
.terms-agree-ul .agree-tit{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:var(--krds-gap-5)}
.terms-agree-ul .agree-box{display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:var(--krds-gap-5)}
.agree-box.bg-gray{background-color:var(--krds-light-color-surface-gray-subtle)}
.agree-box{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--krds-padding-8);border-radius:var(--krds-radius-xlarge1);background-color:var(--krds-light-color-surface-primary-subtler)}