@charset "utf-8";
/* PretendardGOV */
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-Thin),url(../../font/PretendardGOV-Thin.woff2) format('woff2'),url(../../font/PretendardGOV-Thin.woff) format('woff');font-weight:100;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-Light),url(../../font/PretendardGOV-Light.woff2) format('woff2'),url(../../font/PretendardGOV-Light.woff) format('woff');font-weight:200;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-ExtraLight),url(../../font/PretendardGOV-ExtraLight.woff2) format('woff2'),url(../../font/PretendardGOV-ExtraLight.woff) format('woff');font-weight:300;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-Regular),url(../../font/PretendardGOV-Regular.woff2) format('woff2'),url(../../font/PretendardGOV-Regular.woff) format('woff');font-weight:400;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-Medium),url(../../font/PretendardGOV-Medium.woff2) format('woff2'),url(../../font/PretendardGOV-Medium.woff) format('woff');font-weight:500;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-SemiBold),url(../../font/PretendardGOV-SemiBold.woff2) format('woff2'),url(../../font/PretendardGOV-SemiBold.woff) format('woff');font-weight:600;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-Bold),url(../../font/PretendardGOV-Bold.woff2) format('woff2'),url(../../font/PretendardGOV-Bold.woff) format('woff');font-weight:700;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-ExtraBold),url(../../font/PretendardGOV-ExtraBold.woff2) format('woff2'),url(../../font/PretendardGOV-ExtraBold.woff) format('woff');font-weight:800;}
@font-face{font-family:"PretendardGOV";src:local(PretendardGOV-Black),url(../../font/PretendardGOV-Black.woff2) format('woff2'),url(../../font/PretendardGOV-Black.woff) format('woff');font-weight:900;}

html{font-size: 62.5% !important;}
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,menu,nav,section,article,aside,
dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption,* {margin:0;padding:0;box-sizing : border-box;word-break: keep-all; line-height: 1.5;}
html, body{width:100%;font-weight: 400;position: relative;font-size: var(--txt-font-size)}
html{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
body{background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
body,input,select,textarea,button,fieldset {box-sizing : border-box;border:none;font-family: "PretendardGOV", "Paperlogy", sans-serif;line-height: 1.4;color:  var(--grey-darken4);font-size: var(--txt-font-size);letter-spacing: -0.025em;word-break: keep-all;}
span, strong {line-height: inherit;}
table {border-collapse: collapse;border-spacing: 0;}
ul,ol,li{list-style:none;box-sizing: border-box;display: inline-block;}
li{line-height: inherit;}
div,p,a {box-sizing: border-box;}
a {text-decoration: none;color: var(--grey-darken4);display: inline-block; cursor: pointer;}
button {cursor: pointer; background-color: #fff;color:  var(--grey-darken4);}
button:disabled {cursor: default;}
img {max-width: 100%;}
form {display: block; width: 100%;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type='number'] {-moz-appearance: textfield;}

@media screen and (max-width:1200px) {}
@media screen and (max-width:1028px) {}
@media screen and (max-width: 767px) {
    html{font-size: max(1.878vw, 9px) !important;}
}
@media screen and (max-width: 576px) {
    html{font-size: 1.737vw !important;}
}

select,
input[type='date'],
input[type='time']{
    -webkit-appearance: none;
    appearance: none;
}

html.overflow-hidden{
    overflow: hidden;
    height: 100%;
    max-height: var(--view-height);
}
.skip-nav{
    position: relative;
    z-index: 300;
}
.skip-nav a{
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    background-color: #000;
    text-align: center;
    padding: 7px 0;
    font-size: 1.6rem;
    color: #fff;
}
.skip-nav a:focus{
    top: 0;
    z-index: 100;
}

button:focus,
a:focus {
    outline: none;
}

input:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
    border: var(--focus-border-width) solid var(--focus-border-color) !important;
    z-index: 3;
}

caption,
.ir {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
}

.mo,.tb{display: none !important;}
@media screen and (max-width: 1028px){
    .tb{display: block !important;}
    .sp{display: none !important;}
}
@media screen and (max-width: 767px){
    .mo{display: block !important;}
    .pc{display: none !important;}
}

.logo{
    width: var(--logo-width);
    height: var(--logo-height);
    background-image: url(../../images/portal/logo.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.logo.dark{
    width: var(--logo-dark-width);
    height: var(--logo-dark-height);
    background-image: url(../../images/portal/logo-dark.svg);
}

/*layout*/
.wrap{
    position: relative;
    padding-top: var(--header-height);
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
main{
    width: 100%;
    min-height: calc(var(--view-height) - var(--header-height));
}
.container{
    width: 100%;
    max-width: calc(var(--container) + (var(--container-gutter) * 2));
    padding: 0 var(--container-gutter);
    margin: 0 auto;
}

/* quick menu */
.quick-w{
    position: fixed;
    z-index: 50;
    bottom: 6rem;
    right: 6rem;
}
.quick-list{
    display: block;
    border-radius: 2rem;
    background-color: #fff;
    box-shadow: 0 0 .4rem rgba(0, 0, 0, 0.2);
    margin-bottom: 1.2rem;
    width: clamp(48px, 8rem, 8rem);
}
.quick-list>li{
    display: block;
    width: 100%;
    position: relative;
}
.quick-btn{
    padding: .8rem .4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .4rem 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(12px, 1.5rem, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--grey-base);
    background-color: transparent;
    transition: var(--transition);
}
.quick-btn>span{
    display: block;
    width: 100%;
    margin-top: .4rem;
    overflow-wrap: anywhere;
}
.quick-list>li + li::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5.2rem;
    height: 1px;
    border-radius: 999px;
    background-color: var(--border-color);
}
.quick-w .top-btn{
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    gap: .4rem 0;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 1.5rem, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background-color: var(--primary-darken1);
    margin: 0 auto;
    transition: var(--transition);
}
@media screen and (min-width: 1201px){
    .quick-btn:hover{
        color: var(--primary-base);
    }
    .quick-w .top-btn:hover{
        background-color: var(--primary-darken3);
    }
}
@media screen and (max-width: 1536px){
    .quick-w{
        bottom: var(--container-gutter);
        right: var(--container-gutter);
    }
}
@media screen and (max-width: 1028px){
    .quick-w{
        z-index: 101;
    }
    .quick-list>li:not(.chat-btn-w),
    .quick-w .top-btn{
        display: none;
    }
    .quick-list{
        margin-bottom: 0;
        background-color: transparent;
        width: clamp(48px, 7.2rem, 7.2rem);
    }
    .quick-list>li{
        padding: 0;
    }
    .quick-list>li + li::before{
        display: none;
    }
    .quick-btn{
        min-height: clamp(48px, 7.2rem, 7.2rem);
        background-color: var(--primary-darken1);
        color: #fff;
        border-radius: 2rem;
    }
    .quick-list>li + li .quick-btn{
        border-top: 0;
    }
    .quick-btn .icon-quick2{
        background-image: url(../../images/portal/icon/icon-quick2-white.svg);
    }
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 576px){
}

.d-flex{display: flex;}
.d-block{display: block;}

.mt4{margin-top: 4px !important;}
.mt8{margin-top: .8rem !important;}
.mt12{margin-top: 1.2rem !important;}
.mt16{margin-top: 1.6rem !important;}
.mt20{margin-top: 2rem !important;}
.mt24{margin-top: 2.4rem !important;}
.mt30{margin-top: 3rem !important;}
.mt40{margin-top: 4rem !important;}
.mt50{margin-top: 5rem !important;}
.mb4{margin-bottom: 4px !important;}
.mb8{margin-bottom: .8rem !important;}
.mb12{margin-bottom: 1.2rem !important;}
.mb16{margin-bottom: 1.6rem !important;}
.mb20{margin-bottom: 2rem !important;}
.mb30{margin-bottom: 3rem !important;}
.mb40{margin-bottom: 4rem !important;}
.mb50{margin-bottom: 5rem !important;}
.mr4{margin-right: 4px !important;}

.tit-w{
    display: flex;
    align-items: center;
    gap: 0 1.6rem;
    margin-bottom: var(--tit-w-margin-bottom);
}
.tit-w>.tit{
    line-height: 1.3;
}
.tit-w .tit-w-right{
    margin-left: auto;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 0 .8rem;
}
.tit-w .tit-w-right .btn{
    white-space: nowrap;
}

.tit-underline{
    padding-bottom: .8rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--border-color);
}

.tit{
    font-size: var(--tit-font-size);
}
.tit.xs{
    font-size: var(--tit-font-size-xs);
}
.tit.sm{
    font-size: var(--tit-font-size-sm);
}
.tit.lg{
    font-size: var(--tit-font-size-lg);
}

.txt{
    font-size: var(--txt-font-size);
}
.txt.sm{
    font-size: var(--txt-font-size-sm);
}
.txt.lg{
    font-size: var(--txt-font-size-lg);
}

.txt-list,
.txt-list>li{
    display: block;
}
.txt-list>li + li{
    margin-top: .8rem;
}

.txt-list>li ol{
    display: block;
    padding-left: calc(var(--txt-font-size-lg) * .45);
}
.txt-list>li ol>li{
    display: block;
}
.txt-list>li ol>li + li{
    margin-top: .8rem;
}

.txt-indent{
    display: block;
    padding-left: calc(var(--txt-font-size) * .8);
    text-indent: calc(var(--txt-font-size) * -.8);
}
.txt-indent.sm{
    display: block;
    padding-left: calc(var(--txt-font-size-sm) * 1.2);
    text-indent: calc(var(--txt-font-size-sm) * -1.2);
}
.txt-indent.lg{
    display: block;
    padding-left: calc(var(--txt-font-size-lg) * .45);
    text-indent: calc(var(--txt-font-size-lg) * -.45);
}

.txt-list>li.txt-row{
    display: flex;
    gap: 0 4px;
}
.txt-row>strong{
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--primary-base);
    font-weight: 600;
}
.txt-row>span{
    flex-basis: 0;
    flex-grow: 1;
    padding-left: calc(var(--txt-font-size-lg) * .55);
    text-indent: calc(var(--txt-font-size-lg) * -.55);
    font-weight: 400;
}
.txt-row-indent{
    padding-left: calc(var(--txt-font-size-lg) * .55);
}
.txt-list>li + li.txt-row-indent{
    margin-top: 4px;
}
.join-notice-list > li {
	display: flex;
	gap: 0 4px;
}

.join-notice-list > li + li {
	margin-top: .8rem;
}

.join-notice-list strong {
	flex: 0 0 auto;
	font-weight: inherit;
	color: inherit;
}

.join-notice-list span {
	flex: 1 1 0;
	font-weight: inherit;
}
@media screen and (min-width: 768px){
    .txt-row>span .txt-indent{
        padding-left: 0;
        text-indent: 0;
    }
}
@media screen and (max-width: 767px){
    .txt-list>li.txt-row{
        display: block;
        padding-left: calc(var(--txt-font-size) * .8);
        text-indent: calc(var(--txt-font-size) * -.8);
    }
    .txt-list.lg>li.txt-row{
        padding-left: calc(var(--txt-font-size-lg) * .45);
        text-indent: calc(var(--txt-font-size-lg) * -.45);
    }
    .txt-row>span{
        padding-left: 0;
        text-indent: 0;
    }
    .tit-w.responsive{
        display: block;
        margin-bottom: .8rem;
    }
    .tit-w.responsive .tit-w-right{
        text-align: left;
        margin-top: var(--tit-w-margin-bottom);
    }
}

.txt-center{text-align: center;}
.txt-right{text-align: right;}
.txt-left{text-align: left;}
@media screen and (max-width: 1200px){
    .txt-xl-center{text-align: center;}
    .txt-xl-right{text-align: right;}
    .txt-xl-left{text-align: left;}
}
@media screen and (max-width: 1028px){
    .txt-lg-center{text-align: center;}
    .txt-lg-right{text-align: right;}
    .txt-lg-left{text-align: left;}
}
@media screen and (max-width: 767px){
    .txt-md-center{text-align: center;}
    .txt-md-right{text-align: right;}
    .txt-md-left{text-align: left;}
}
@media screen and (max-width: 576px){
    .txt-sm-center{text-align: center;}
    .txt-sm-right{text-align: right;}
    .txt-sm-left{text-align: left;}
}

.line-height-12{
    line-height: 1.2;
}
.line-height-13{
    line-height: 1.3;
}

.black{
    font-weight: 900;
}
.extrabold{
    font-weight: 800;
}
.bold{
    font-weight: 700;
}
.semibold{
    font-weight: 600;
}
.medium{
    font-weight: 500;
}
.regular{
    font-weight: 400;
}

.underline{
    text-decoration: underline;
}

.anywhere{
    overflow-wrap: anywhere;
}

.primary-txt{
    color: var(--primary-base) !important;
}
.primary-darken1-txt{
    color: var(--primary-darken1) !important;
}
.secondary-txt{
    color: var(--secondary-base) !important;
}
.sky-txt{
    color: var(--sky-base) !important;
}
.green-txt{
    color: var(--green-base) !important;
}
.grey-txt{
    color: var(--grey-base) !important;
}
.grey-lighten1-txt{
    color: var(--grey-lighten1) !important;
}
.grey-darken2-txt{
    color: var(--grey-darken2) !important;
}
.grey-darken4-txt{
    color: var(--grey-darken4) !important;
}
.danger-txt{
    color: var(--danger-base) !important;
}
.danger-darken1-txt{
    color: var(--danger-darken1) !important;
}
.success-txt{
    color: var(--success-base) !important;
}
.info-txt{
    color: var(--info-base) !important;
}
.blue-txt{
    color: #164697 !important;
}
.green-txt{
    color: #137333 !important;
}
.red-txt{
    color: #8B2252 !important;
}

.label-w{
    display: flex;
    gap: var(--label-w-gap);

}
.label{
    width: fit-content;
    padding: var(--label-padding);
    height: var(--label-height);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    border-radius: var(--label-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.label.sm{
    height: var(--label-height-sm);
    font-size: var(--label-font-size-sm);
    font-weight: var(--label-font-weight-sm);
}
.label.xs{
    height: var(--label-height-xs);
    padding: var(--label-padding-xs);
    font-size: var(--label-font-size-xs);
    font-weight: var(--label-font-weight-xs);
}
.label.primary{
    background-color: var(--primary-base);
    color: var(--label-filled-color);
}
.label.primary-dark{
    background-color: var(--primary-darken1);
    color: var(--label-filled-color);
}
.label.primary-light{
    background-color: var(--primary-lighten5);
    color: var(--primary-lighten1);
}
.label.secondary{
    background-color: var(--secondary-base);
    color: var(--label-filled-color);
}
.label.brown{
    background-color: #FFE0D8;
    color: #923720;
}
.label.blue{
    background-color: #E7EDFB;
    color: #193E94;
}
.label.purple{
    background-color: #E6DDFF;
    color: #3A296B;
}


/* button */
.btn{
    width: fit-content;
    height: var(--btn-height);
    font-size: var(--btn-font-size);
    padding: var(--btn-padding);
    color: var(--grey-darken4);
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    border-radius: var(--btn-border-radius);
    gap: 0 var(--btn-gap);
    transition: var(--transition);
}
.btn.xs{
    border-radius: .4rem;
    height: var(--btn-height-xs);
    font-size: var(--btn-font-size-xs);
    padding: var(--btn-padding-xs);
    font-weight: 700;
}
.btn.sm{
    height: var(--btn-height-sm);
    font-size: var(--btn-font-size-sm);
    padding: var(--btn-padding-sm);
    font-weight: 400;
}
.btn.lg{
    height: var(--btn-height-lg);
    font-size: var(--btn-font-size-lg);
    padding: var(--btn-padding-lg);
}
.btn.xl{
    height: var(--btn-height-xl);
    font-size: var(--btn-font-size-xl);
    padding: var(--btn-padding-xl);
    font-weight: 700;
}
.btn.block{
    width: 100%;
    padding: 0 !important;
}

.btn.primary{
    background-color: var(--primary-base);
    color: var(--btn-filled-color);
}
.btn.primary-dark{
    background-color: var(--primary-darken1);
    color: var(--btn-filled-color);
}
.btn.black{
    background-color: var(--grey-darken4);
    color: var(--btn-filled-color);
}
.btn.gray{
    background-color: var(--grey-base);
    color: var(--btn-filled-color);
}
.btn.border{
    background-color: var(--surface-bg);
    border: 1px solid var(--border-color);
    color: var(--grey-darken2);
}
.btn.border-dark{
    background-color: var(--surface-bg);
    border: 1px solid var(--grey-lighten1);
    color: var(--grey-darken4);
}
.btn.border-primary{
    background-color: var(--surface-bg);
    border: 1px solid var(--primary-base);
    color: var(--primary-base);
}
.btn.border-danger{
    background-color: var(--surface-bg);
    border: 1px solid var(--danger-base);
    color: var(--danger-base);
}
.btn.border-success{
    background-color: var(--surface-bg);
    border: 1px solid var(--success-base);
    color: var(--success-base);
}
.btn.border-info{
    background-color: var(--surface-bg);
    border: 1px solid var(--info-base);
    color: var(--info-base);
}

.btn:disabled{
    background-color: var(--grey-lighten4);
    color: var(--grey-base);
}

.bottom-btn{
    margin-top: var(--bottom-btn-margin-top);
    display: flex;
    justify-content: center;
    gap: 0 var(--bottom-btn-gap);
}
.bottom-btn.end{
    justify-content: flex-end;
}
.bottom-btn.space-between{
    justify-content: space-between;
}
.bottom-btn>.btn{
    min-width: 12rem;
}

@media screen and (min-width: 1201px){
    .btn.primary:not(:disabled):hover{
        background-color: var(--primary-darken2);
    }
    .btn.primary-dark:not(:disabled):hover{
        background-color: var(--primary-darken3);
    }
    .btn.black:not(:disabled):hover{
        background-color: var(--grey-darken3);
    }
    .btn.border:not(:disabled):hover{
        background-color: var(--grey-lighten4);
    }
    .btn.border-dark:not(:disabled):hover{
        background-color: var(--grey-lighten4);
    }
    .btn.border-primary:not(:disabled):hover{
        background-color: var(--primary-lighten5);
    }
    .btn.border-danger:not(:disabled):hover{
        background-color: var(--danger-lighten5);
    }
    .btn.border-success:not(:disabled):hover{
        background-color: var(--success-lighten5);
    }
    .btn.border-info:not(:disabled):hover{
        background-color: var(--info-lighten5);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1028px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 576px){
    .bottom-btn.responsive{
        flex-wrap: wrap;
        gap: .8rem var(--bottom-btn-gap);
    }
    .bottom-btn.responsive>*{
        white-space: nowrap;
        flex: 1 1 0;
    }
}

.min-w-100{min-width: 10rem;}
.min-w-140{min-width: 14rem;}
.min-w-160{min-width: 16rem;}
.min-w-200{min-width: 20rem;}
.min-w-240{min-width: 24rem;}
.min-w-480{min-width: 48rem;}

.min-h-180{min-height: 18rem;}
@media screen and (max-width: 1200px){
    .min-h-xl-0{min-height: 0;}
}
@media screen and (max-width: 1028px){
    .min-h-lg-0{min-height: 0;}
}
@media screen and (max-width: 767px){
    .min-h-md-0{min-height: 0;}
}
@media screen and (max-width: 576px){
    .min-h-sm-0{min-height: 0;}

}


/*input*/
.input-primary{
    height: var(--input-height);
    border-radius: var(--input-border-radius);
    padding: 0 var(--input-padding);
    border: 1px solid var(--input-border-color);
    color: var(--grey-darken4);
    background-color: var(--input-bg-color);
    font-size: var(--input-font-size);
    font-weight: 400;
    width: 100%;
    display: block;
    transition: var(--transition);
}
input:disabled{
    background-color: var(--grey-lighten4);
}
select.input-primary{
    padding-right: calc((var(--input-padding) * 2) + var(--icon-size));
    background-image: url(../../images/portal/icon/select-arrow.svg);
    background-position: right var(--input-padding) center;
    background-repeat: no-repeat;
    background-size: var(--icon-size) auto;
}
textarea.input-primary{
    padding: var(--input-padding);
    height: var(--input-textarea-height);
    resize: none;
    display: block;
}
textarea.input-primary.long{
    height: var(--input-textarea-height-long);
}
.input-primary::placeholder{
    color: var(--input-placeholder-color);
}
.input-primary:focus,
.input-primary:focus-visible{
    outline: none;
    border-color: var(--input-focus-border-color) !important;
}
.input-primary.lg{
    height: var(--input-height-lg);
    border-radius: var(--input-border-radius-lg);
    border: 1px solid var(--input-border-color-lg);
}

input[type='date'].input-primary::-webkit-calendar-picker-indicator{
    width: var(--icon-size);
    height: var(--icon-size);
    top: 50%;
    right: var(--input-padding);
    transform: translateY(-50%);
    position: absolute;
    z-index: 5;
    background-color: transparent;
    color: transparent;
    cursor: pointer;
    opacity: 0;
    border-radius: 50%;
    transition: var(--transition);
}
input[type='date'].input-primary{
    position: relative;
    background: #fff url(../../images/portal/icon/icon-date.svg) no-repeat right var(--input-padding) center;
    background-size: var(--icon-size) auto;
    padding-right: calc((var(--input-padding) * 2) + var(--icon-size));
    -webkit-appearance: none;
    appearance: none;
}

.file-input-w{
    width: 100%;
    display: flex;
    gap: 0 .8rem;
    align-items: flex-end;
}
.file-input{
    display: block;
    width: 100%;
    max-width: calc(100% - 12.6rem);
}
.file-input>li{
    display: flex;
    align-items: center;
    gap: 0 .4rem;
    height: var(--input-height);
    border-radius: var(--input-border-radius);
    padding: 0 var(--input-padding);
    border: 1px solid var(--input-border-color);
    color: var(--primary-base);
    background-color: var(--input-bg-color);
    font-size: var(--input-font-size);
    width: 100%;
}
.file-input>li + li{
    margin-top: .8rem;
}
.file-input>li>p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    max-width: calc(100% - var(--icon-size) - .4rem);
}
.file-input>li>.file-delete{
    flex: 0 0 auto;
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background-color: transparent;
    background-image: url(../../images/portal/icon/icon-close-circle.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.input-cert{
    position: relative;
}
.input-cert .input-primary{
    padding-right: calc((var(--input-padding) * 2) + clamp(40px, 5rem, 5rem));
}
.input-cert .input-cert-txt{
    position: absolute;
    top: 50%;
    right: var(--input-padding);
    transform: translateY(-50%);
    font-size: var(--txt-font-size);
    font-weight: 600;
    color: var(--primary-base);
    min-width: clamp(40px, 5rem, 5rem);
    text-align: center;
}

.control-btn-w input[type=checkbox],
.control-btn-w input[type=radio]{
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
}
.control-btn:has(input[type=checkbox]:focus-visible),
.control-btn:has(input[type=radio]:focus-visible){
    outline:none;
    border: var(--focus-border-width) solid var(--focus-border-color) !important;
    border-radius: var(--control-btn-border-radius);
}
.control-btn-w{
    display: flex;
    flex-wrap: wrap;
    gap: var(--control-btn-gap);
}
.control-btn>p{
    width: fit-content;
    padding: var(--control-btn-padding);
    height: var(--control-btn-height);
    font-size: var(--control-btn-font-size);
    color: var(--grey-darken4);
    font-weight: var(--control-btn-font-weight);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--control-btn-border-radius);
    background-color: var(--surface-bg);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}
.control-btn input[type=checkbox]:checked + p,
.control-btn input[type=radio]:checked + p{
    background-color: var(--primary-base);
    border-color: var(--primary-base);
    color: var(--control-btn-checked-color);
}
.control-area{
    display: flex;
    align-items: center;
    gap: 0 .8rem;
}
.control-area>span{
    display: block;
    color: var(--grey-darken4);
}
.control-w{
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}
.control-w.sm{
    gap: var(--control-w-gap-sm);
}
.control-exp{
    display: flex;
    align-items: center;
    gap: 0 1.6rem;
}
.control-primary{
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.control-primary input[type="checkbox"],
.control-primary input[type="radio"]{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.control-primary input[type="checkbox"] + label,
.control-primary input[type="radio"] + label{
    position: relative;
    min-height: var(--control-icon-size);
    display: block;
    cursor: pointer;
}
.control-primary input[type="checkbox"] + label:has(.ir),
.control-primary input[type="radio"] + label:has(.ir){
    width: var(--control-icon-size);
}
.control-primary input[type="checkbox"] + label p,
.control-primary input[type="radio"] + label p{
    padding-left: calc(var(--control-icon-size) + var(--control-gap));
    font-size: var(--control-label-font-size);
    color: var(--control-label-color);
    font-weight: 400;
}
.control-primary input[type="checkbox"] + label::after,
.control-primary input[type="radio"] + label::after{
    content: "";
    width: var(--control-icon-size);
    height: var(--control-icon-size);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.control-primary input[type="checkbox"] + label::after{
    background-image: url(../../images/portal/icon/icon-check.svg);
}
.control-primary input[type="checkbox"]:checked + label::after{
    background-image: url(../../images/portal/icon/icon-check-active.svg);
}
.control-primary input[type="radio"] + label::after{
    background-image: url(../../images/portal/icon/icon-radio.svg);
}
.control-primary input[type="radio"]:checked + label::after{
    background-image: url(../../images/portal/icon/icon-radio-active.svg);
}

.control-primary input[type="radio"] + label::before,
.control-primary input[type="checkbox"] + label::before{
    content: "";
    position: absolute;
    display: block;
    width: calc(var(--control-icon-size) + calc(var(--control-gap) * 2));
    height: calc(var(--control-icon-size) + calc(var(--control-gap) * 2));
    top: 50%;
    left: 0;
    transform: translate(calc(var(--control-gap) / -1), -50%);
    border-radius: 50%;
    background-color: var(--primary-base);
    opacity: 0;
    transition: var(--transition);
}
.control-primary input[type="radio"] + label p,
.control-primary input[type="radio"] + label::after,
.control-primary input[type="radio"] + label::before{
    --control-icon-size: clamp(16px, 1.8rem, 1.8rem);
}
.control-primary.reverse input[type="checkbox"] + label p,
.control-primary.reverse input[type="radio"] + label p{
    padding-left: 0;
    padding-right: calc(var(--control-icon-size) + var(--control-gap));
}
.control-primary.reverse input[type="checkbox"] + label::after,
.control-primary.reverse input[type="radio"] + label::after{
    left: unset;
    right: 0;
}
.control-primary.reverse input[type="radio"] + label::before,
.control-primary.reverse input[type="checkbox"] + label::before{
    left: unset;
    right: 0;
    transform: translate(var(--control-gap), -50%);
}
.toggle-switch{
    display: inline-flex;
    align-items: center;
    gap: 0 .8rem;
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}
.toggle-switch input{
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch .toggle-slider{
    position: relative;
    width: var(--switch-width);
    height: var(--switch-height);
    background-color: var(--grey-lighten4);
    border-radius: 999px;
    transition: var(--transition);
}
.toggle-switch .toggle-slider::before{
    content: "";
    position: absolute;
    top: var(--switch-gap);
    left: var(--switch-gap);
    width: calc(var(--switch-height) - (var(--switch-gap) * 2));
    height: calc(var(--switch-height) - (var(--switch-gap) * 2));
    background-color: #fff;
    border-radius: 50%;
    transition: var(--transition);
}
.toggle-switch input:checked + .toggle-slider{
    background-color: var(--primary-base);
}
.toggle-switch input:checked + .toggle-slider::before{
    left: calc(var(--switch-width) - (var(--switch-height) - (var(--switch-gap) * 2)) - var(--switch-gap));
}
.toggle-switch input:focus-visible + .toggle-slider{
    outline: 2px solid var(--primary-base);
    outline-offset: 2px;
}
.toggle-switch .toggle-label{
    font-size: var(--txt-font-size-lg);
    color: var(--primary-base);
    font-weight: 600;
    line-height: 1.3;
    padding-top: 1px;
}
.toggle-switch.lg .toggle-slider{
    height: var(--switch-height-lg);
}
.toggle-switch.lg .toggle-slider::before{
    width: calc(var(--switch-height-lg) - (var(--switch-gap) * 2));
    height: calc(var(--switch-height-lg) - (var(--switch-gap) * 2));
}
.toggle-switch.lg input:checked + .toggle-slider::before{
    left: calc(var(--switch-width) - (var(--switch-height-lg) - (var(--switch-gap) * 2)) - var(--switch-gap));
}
@media screen and (min-width: 1201px){
    .control-btn:hover p{
        background-color: var(--primary-base);
        border-color: var(--primary-base);
        color: #fff;
    }
    .control-primary:hover input[type="radio"] + label::before,
    .control-primary:hover input[type="checkbox"] + label::before{
        opacity: .08;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1028px){
}
@media screen and (max-width: 767px){
    .control-exp .control-w>*{
        flex: 0 0 auto;
    }
    .file-input-w{
        flex-direction: column-reverse;
    }
    .file-input-w>.btn{
        width: 100%;
        margin-bottom: .8rem;
    }
    .file-input{
        max-width: 100%;
    }
}
@media screen and (max-width: 576px){
}

.thumb-size{
    width: 100%;
}
.thumb{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: var(--thumb-ratio);
    overflow: hidden;
    border-radius: var(--thumb-border-radius);
}
.thumb .thumb-inner{
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    left: 0;
}
.thumb-w .thumb::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: var(--thumb-hover-border-width) solid var(--thumb-hover-border-color);
    box-sizing: border-box;
    border-radius: inherit;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
@media screen and (min-width: 1201px){
    .thumb-w:hover .thumb::after{
        opacity: 1;
        visibility: visible;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1028px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 576px){
}

/* pagination */
.pagination-w{
    display: flex;
    justify-content: center;
    gap: 0 var(--pagination-gap);
    margin-top: var(--pagination-margin-top);
}
.pagination{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 var(--pagination-gap);
}
.pagination-control,
.pagination-num{
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: var(--pagination-size);
    height: var(--pagination-size);
    background-color: transparent;
    transition: var(--transition);
}
.pagination-control{
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--pagination-control-icon-size) auto;
}
.pagination-control.backward{
    background-image: url(../../images/portal/icon/icon-chevron-left-double-grey.svg);
}
.pagination-control.prev{
    background-image: url(../../images/portal/icon/icon-chevron-left-grey.svg);
}
.pagination-control.next{
    background-image: url(../../images/portal/icon/icon-chevron-grey.svg);
}
.pagination-control.forward{
    background-image: url(../../images/portal/icon/icon-chevron-double-grey.svg);
}
.pagination-control:disabled{
    opacity: .4;
    cursor: default;
}
.pagination-num{
    font-size: var(--txt-font-size);
    font-weight: 400;
    color: var(--pagination-num-color);
    text-underline-offset: .4rem;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
}
.pagination-num.active{
    background-color: var(--pagination-active-bg);
    color: var(--pagination-active-color);
    text-decoration-color: var(--primary-base);
    font-weight: 700;
}

@media (min-width: 1201px){
    .pagination-control:not(:disabled):hover{
        background-color: var(--pagination-hover-bg);
    }
    .pagination-num:hover{
        background-color: var(--pagination-hover-bg);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1028px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 576px){
}

/*tab*/
.tab-contents{ position: relative; width: 100%; display: block;}
.tab-contents>li { opacity: 0; visibility: hidden; width: 100%; display: none;}
.tab-contents>li.active { opacity: 1; visibility: visible; display: block; animation: contentsActive ease-in-out .5s forwards; }
@-webkit-keyframes contentsActive { from { opacity: 0; } to { opacity: 1; } }
@keyframes contentsActive { from { opacity: 0; } to { opacity: 1; } }

.tab-primary{
    position: relative;
    width: fit-content;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--tab-gap);
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--primary-lighten5);
}
.tab-primary>li{
    flex: 0 0 auto;
    display: block;
    position: relative;
    z-index: 1;
}
.tab-primary .tab-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--tab-btn-font-size);
    color: var(--tab-btn-color);
    font-weight: var(--tab-btn-font-weight);
    background-color: transparent;
    white-space: nowrap;
    height: var(--btn-height-lg);
    padding: 0 2rem;
    min-width: 20rem;
    border-radius: 9999px;
    transition: var(--transition);
}
.tab-primary .tab-btn.active{
    background-color: var(--primary-base);
    color: var(--tab-btn-active-color);
}

.tab-secondary {
    display: flex;
    gap: var(--tab-secondary-gap);
    overflow: auto;
    margin-bottom: var(--tab-secondary-margin-bottom);
}
.tab-secondary > li {
    flex: none;
}
.tab-secondary .tab-btn {
    padding: var(--tab-secondary-btn-padding);
    height: var(--tab-secondary-btn-height);
    border-radius: var(--tab-secondary-btn-border-radius);
    border: 1px solid var(--tab-secondary-btn-border-color);
    font-size: var(--tab-secondary-btn-font-size);
    font-weight: var(--tab-secondary-btn-font-weight);
}
.tab-secondary .tab-btn.active {
    background-color: var(--tab-secondary-btn-active-bg);
    color: var(--tab-secondary-btn-active-color);
}

.tab-pill{
    width: fit-content;
    display: flex;
    margin: 0 auto;
    border-radius: 999px;
    border: 1px solid var(--border-color);
}
.tab-pill>li{
    display: block;
    flex: 0 0 auto;
    margin: -1px;
}
.tab-pill .tab-btn{
    position: relative;
    height: var(--btn-height-sm);
    width: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 999px;
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    color: var(--grey-base);
    background-color: transparent;
    transition: var(--transition);
}
.tab-pill .tab-btn.active{
    z-index: 1;
    background-color: var(--primary-base);
    color: #fff;
}
@media (min-width: 1201px){
    .tab-primary .tab-btn:not(.active):hover{
        color: var(--primary-darken4);
    }
    .tab-pill .tab-btn:not(.active):hover{
        color: var(--primary-base);
    }
}

/* table */

.table-primary{
    width: 100%;
    table-layout: fixed;
    background-color: var(--surface-bg);
}
.table-primary thead tr>th:first-child{
    border-top-left-radius: .8rem;
}
.table-primary thead tr>th:last-child{
    border-top-right-radius: .8rem;
}
.table-primary thead th{
    background-color: var(--secondary-lighten5);
}
.table-primary tbody tr{
    border-bottom: 1px solid var(--table-row-border-color);
}
.table-primary th{
    text-align: center;
    font-size: var(--txt-font-size);
    font-weight: 600;
    height: 5.6rem;
    padding: 1.5rem 1.2rem;
    color: var(--grey-darken2);
}
.table-primary td{
    text-align: center;
    font-size: var(--txt-font-size-lg);
    color: var(--grey-darken2);
    height: 7rem;
    padding: 2rem 1.6rem;
    background-color: var(--surface-bg);
}
.table-primary td .label,
.table-primary td .btn{
    margin: 0 auto;
}
.table-btn{
    display: block;
    color: var(--table-btn-color);
    text-decoration: underline;
    transition: var(--transition);
}
.table-primary td .table-btn{
    margin: 0 auto;
    text-align: center;
}
.table-primary td.table-tit{
    text-align: left;
}
.table-primary td.table-tit>a{
    display: block;
    gap: 0 4px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    font-weight: 700;
    color: var(--grey-darken2);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: .4rem;
    transition: var(--transition);
}
.table-primary td.table-index>i{
    margin: 0 auto;
}

.table-row{
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: .8rem;
    overflow: hidden;
}
.table-row th,
.table-row td{
    height: var(--table-row-cell-height);
    padding: var(--table-row-cell-padding);
}
.table-row th{
    text-align: center;
    background-color: var(--secondary-lighten5);
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    border: none;
}
.table-row tbody>tr:not(:last-child) th{
    border-bottom: 1px solid #fff;
}
.table-row tbody>tr:first-child th{
    border-top-left-radius: .8rem;
}
.table-row tbody>tr:last-child th{
    border-bottom-left-radius: .8rem;
}
.table-row td{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
.table-row tbody>tr:first-child td{
    border-top: 1px solid var(--border-color);
    border-top-right-radius: .8rem;
}
.table-row tbody>tr:last-child td{
    border-bottom-right-radius: .8rem;
}

.table-secondary{
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: .8rem;
    overflow: hidden;
    text-align: center;
    color: var(--grey-darken2);
}
.table-secondary th{
    background-color: var(--secondary-lighten5);
    font-weight: 600;
    border: none;
}
.table-secondary thead tr:nth-child(2) th{
    background-color: var(--secondary-lighten4);
}
.table-secondary thead tr:nth-child(3) th{
    background-color: var(--secondary-lighten3);
}
.table-secondary thead tr:nth-child(4) th{
    background-color: var(--secondary-lighten2);
}
.table-secondary thead tr:nth-child(5) th{
    background-color: var(--secondary-lighten1);
}
.table-secondary td{
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
.table-secondary td>.btn{
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
}
.table-secondary thead th{
    height: clamp(40px, 5.6rem, 5.6rem);
    padding: 0 1.2rem;
    font-size: var(--txt-font-size);
}
.table-secondary tbody th,
.table-secondary tbody td{
    height: 7rem;
    padding: var(--table-row-cell-padding);
}
.table-secondary th.primary-light{
    background-color: var(--primary-lighten5);
    color: var(--primary-base);
}
.table-secondary thead th:not(:last-child){
    border-right: 1px solid #fff;
}
.table-secondary thead tr:first-child th:first-child{
    border-top-left-radius: .8rem;
}
.table-secondary thead tr:first-child th:last-child{
    border-top-right-radius: .8rem;
}
.table-secondary tbody{
    font-size: var(--txt-font-size-lg);
}
.table-secondary tbody>tr:first-child th{
    border-top: 1px solid #fff;
}
.table-secondary tbody>tr:not(:last-child) th{
    border-bottom: 1px solid #fff;
}
.table-secondary tbody>tr:last-child th{
    border-bottom-left-radius: .8rem;
}
.table-secondary tbody th{
    border-right: 1px solid #fff;
}
.table-secondary tbody>tr:last-child td:last-child{
    border-bottom-right-radius: .8rem;
}
.mo-table{
    display: none !important;
}
@media (min-width: 1201px){
    .table-primary td.table-tit>a:hover{
        color: var(--primary-base);
        text-decoration-color: inherit;
    }
    .table-btn:hover{
        color: var(--table-btn-hover-color);
    }
}
@media screen and (max-width: 767px){
    .mo-table{
        display: table !important;
    }
    .table-primary.responsive,
    .table-primary.responsive tbody,
    .table-primary.responsive td{
        display: block;
    }
    .table-primary.responsive colgroup,
    .table-primary.responsive thead{
        display: none;
    }
    .table-primary.responsive{
        border-top: 2px solid var(--grey-darken2);
    }
    .table-primary.responsive tr{
        display: flex;
        flex-wrap: wrap;
        gap: .8rem 4px;
        padding: 2rem 0;
    }
    .table-primary.responsive td{
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        padding: 0;
        height: auto;
        text-align: left;
    }
    .table-primary.responsive td.table-index,
    .table-primary.responsive td.table-category{
        flex: 0 0 auto;
        width: auto;
        font-size: var(--txt-font-size);
    }
    .table-primary.responsive td .label{
        margin: 0;
    }
    .table-secondary tbody th{
        font-size: var(--txt-font-size);
    }
    .table-scroll{
        overflow-y: hidden;
        overflow-x: auto;
        padding-bottom: .8rem;
    }
    .table-scroll::-webkit-scrollbar{
        width: var(--scrollbar-width);
        height: var(--scrollbar-width);
    }
    .table-scroll::-webkit-scrollbar-track{
        background-color: var(--scrollbar-track-color);
        border-radius: 999px;
    }
    .table-scroll::-webkit-scrollbar-thumb{
        background-color: var(--scrollbar-thumb-color);
        border-radius: 999px;
    }
    .table-scroll::-webkit-scrollbar-button{
        display: none;
    }
    .table-scroll table{
        min-width: 736px;
    }
}

.card{
    padding: 2.4rem;
    border-radius: 2rem;
    background-color: #fff;
    position: relative;
}
.card-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .8rem 0;
}
.card[class*="min-h-"] .card-inner{
    height: 100%;
    justify-content: center;
}
.card.left .card-inner{
    align-items: flex-start;
    text-align: left;
}
.layout-row>[class*="col"]:not(:has(.tit-w))>.card{
    height: 100%;
}
.card.sm{
    padding: 2rem;
}
.card.lg{
    padding: 4rem;
}
.card.flat{
    border: 0;
    border-radius: 0;
}
.card.border{
    border: 1px solid var(--border-color);;
}
.card.border-primary{
    border: 2px solid var(--primary-base);
    background-color: var(--primary-lighten5);
    padding: 2.2rem;
}
.card.border-primary.sm{
    padding: 1.8rem;
}
.card.primary-light{
    background-color: var(--primary-lighten5);
}
.card.grey-light{
    background-color: var(--grey-lighten5);
}
.card.blue-light{
    background-color: var(--secondary-lighten5);
}
.card.warm-light{
    background-color: var(--grey-lighten5);
}
.card.shadow{
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .15);
}
.card.image-card{
    overflow: hidden;
    padding: 0;
    line-height: 0;
}
.card.image-card img{
    display: block;
}

.card-inner>.label{
    margin-bottom: .8rem;
}
.card-icon{
    display: block;
    width: clamp(60px, 8rem, 8rem);
}
.card-tit{
    display: block;
    font-size: var(--tit-font-size-sm);
    font-weight: 600;
    color: var(--primary-base);
}
.card-subtit + .card-tit{
    font-weight: 700;
}
.card-tit.row-2{
    min-height: calc(var(--tit-font-size-sm) * 1.5 * 2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-tit.row-3{
    min-height: calc(var(--tit-font-size-sm) * 1.5 * 3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-subtit{
    font-size: var(--txt-font-size-lg);
    font-weight: 600;
    color: var(--grey-base);
}
.card-index{
    width: clamp(24px, 2.8rem, 2.8rem);
    min-width: clamp(24px, 2.8rem, 2.8rem);
    height: clamp(24px, 2.8rem, 2.8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 50%;
    background-color: var(--primary-base);
    font-size: var(--txt-font-size);
    font-weight: 600;
    color: #fff;
}
.card-txt{
    font-size: var(--txt-font-size);
    color: var(--grey-darken2);
}
.card-txt.lg{
    font-size: var(--txt-font-size-lg);
}
.card-txt>strong{
    color: var(--primary-base);
    font-weight: 600;
}
.card-caption{
    display: block;
    margin-top: -.4px;
    font-size: var(--txt-font-size-sm);
    color: var(--grey-base);
    line-height: 1.2;
}
.card>.label.absolute{
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
}
@media screen and (max-width: 1439px){
    .card-tit.row-2,
    .card-tit.row-3{
        min-height: 0;
        display: block;
    }
}

img.center{
    margin: 0 auto;
    display: block;
}
img.shadow-img{
    margin-top: -.8rem;
    margin-bottom: -.8rem;
    max-width: calc(100% + 1.6rem);
    position: relative;
    left: -.8rem;
}

/* Grid */
.layout-row{position: relative;margin: -1rem;display: flex;flex-wrap: wrap;}
.layout-row>[class*="col"]{width: 100%;padding: 1rem;}
.layout-row.no-gutter{margin: 0;}
.layout-row.no-gutter>[class*="col"]{padding: 0;}
.layout-row.xl{margin: -2rem;}
.layout-row.xl>[class*="col"]{padding: 2rem;}
.layout-row.lg{margin: -1.8rem;}
.layout-row.lg>[class*="col"]{padding: 1.8rem;}
.layout-row.sm{margin: -.8rem;}
.layout-row.sm>[class*="col"]{padding: .8rem;}
.layout-row.xs{margin: -.4rem;}
.layout-row.xs>[class*="col"]{padding: .4rem;}
.layout-row>.col-1{flex: 0 0 calc((100% / 12) * 1);max-width: calc((100% / 12) * 1);}.layout-row>.col-2{flex: 0 0 calc((100% / 12) * 2);max-width: calc((100% / 12) * 2);}.layout-row>.col-3{flex: 0 0 calc((100% / 12) * 3);max-width: calc((100% / 12) * 3);}.layout-row>.col-4{flex: 0 0 calc((100% / 12) * 4);max-width: calc((100% / 12) * 4);}.layout-row>.col-5{flex: 0 0 calc((100% / 12) * 5);max-width: calc((100% / 12) * 5);}.layout-row>.col-6{flex: 0 0 calc((100% / 12) * 6);max-width: calc((100% / 12) * 6);}.layout-row>.col-7{flex: 0 0 calc((100% / 12) * 7);max-width: calc((100% / 12) * 7);}.layout-row>.col-8{flex: 0 0 calc((100% / 12) * 8);max-width: calc((100% / 12) * 8);}.layout-row>.col-9{flex: 0 0 calc((100% / 12) * 9);max-width: calc((100% / 12) * 9);}.layout-row>.col-10{flex: 0 0 calc((100% / 12) * 10);max-width: calc((100% / 12) * 10);}.layout-row>.col-11{flex: 0 0 calc((100% / 12) * 11);max-width: calc((100% / 12) * 11);}.layout-row>.col-12{flex: 0 0 calc((100% / 12) * 12);max-width: calc((100% / 12) * 12);}.layout-row>.col{flex-basis: 0;flex-grow: 1;max-width: 100%;}.layout-row>.col-auto{flex: 0 0 auto;width: auto;max-width: 100%;}
@media (max-width: 1200px) {
    .layout-row>.col-xl-1{flex: 0 0 calc((100% / 12) * 1);max-width: calc((100% / 12) * 1);}.layout-row>.col-xl-2{flex: 0 0 calc((100% / 12) * 2);max-width: calc((100% / 12) * 2);}.layout-row>.col-xl-3{flex: 0 0 calc((100% / 12) * 3);max-width: calc((100% / 12) * 3);}.layout-row>.col-xl-4{flex: 0 0 calc((100% / 12) * 4);max-width: calc((100% / 12) * 4);}.layout-row>.col-xl-5{flex: 0 0 calc((100% / 12) * 5);max-width: calc((100% / 12) * 5);}.layout-row>.col-xl-6{flex: 0 0 calc((100% / 12) * 6);max-width: calc((100% / 12) * 6);}.layout-row>.col-xl-7{flex: 0 0 calc((100% / 12) * 7);max-width: calc((100% / 12) * 7);}.layout-row>.col-xl-8{flex: 0 0 calc((100% / 12) * 8);max-width: calc((100% / 12) * 8);}.layout-row>.col-xl-9{flex: 0 0 calc((100% / 12) * 9);max-width: calc((100% / 12) * 9);}.layout-row>.col-xl-10{flex: 0 0 calc((100% / 12) * 10);max-width: calc((100% / 12) * 10);}.layout-row>.col-xl-11{flex: 0 0 calc((100% / 12) * 11);max-width: calc((100% / 12) * 11);}.layout-row>.col-xl-12{flex: 0 0 calc((100% / 12) * 12);max-width: calc((100% / 12) * 12);}.layout-row>.col-xl{flex-basis: 0;flex-grow: 1;max-width: 100%;}.layout-row>.col-xl-auto{flex: 0 0 auto;width: auto;max-width: 100%;}
}
@media (max-width: 1028px) {
    .layout-row>.col-lg-1{flex: 0 0 calc((100% / 12) * 1);max-width: calc((100% / 12) * 1);}.layout-row>.col-lg-2{flex: 0 0 calc((100% / 12) * 2);max-width: calc((100% / 12) * 2);}.layout-row>.col-lg-3{flex: 0 0 calc((100% / 12) * 3);max-width: calc((100% / 12) * 3);}.layout-row>.col-lg-4{flex: 0 0 calc((100% / 12) * 4);max-width: calc((100% / 12) * 4);}.layout-row>.col-lg-5{flex: 0 0 calc((100% / 12) * 5);max-width: calc((100% / 12) * 5);}.layout-row>.col-lg-6{flex: 0 0 calc((100% / 12) * 6);max-width: calc((100% / 12) * 6);}.layout-row>.col-lg-7{flex: 0 0 calc((100% / 12) * 7);max-width: calc((100% / 12) * 7);}.layout-row>.col-lg-8{flex: 0 0 calc((100% / 12) * 8);max-width: calc((100% / 12) * 8);}.layout-row>.col-lg-9{flex: 0 0 calc((100% / 12) * 9);max-width: calc((100% / 12) * 9);}.layout-row>.col-lg-10{flex: 0 0 calc((100% / 12) * 10);max-width: calc((100% / 12) * 10);}.layout-row>.col-lg-11{flex: 0 0 calc((100% / 12) * 11);max-width: calc((100% / 12) * 11);}.layout-row>.col-lg-12{flex: 0 0 calc((100% / 12) * 12);max-width: calc((100% / 12) * 12);}.layout-row>.col-lg{flex-basis: 0;flex-grow: 1;max-width: 100%;}.layout-row>.col-lg-auto{flex: 0 0 auto;width: auto;max-width: 100%;}
}
@media (max-width: 767px) {
    .layout-row>.col-md-1{flex: 0 0 calc((100% / 12) * 1);max-width: calc((100% / 12) * 1);}.layout-row>.col-md-2{flex: 0 0 calc((100% / 12) * 2);max-width: calc((100% / 12) * 2);}.layout-row>.col-md-3{flex: 0 0 calc((100% / 12) * 3);max-width: calc((100% / 12) * 3);}.layout-row>.col-md-4{flex: 0 0 calc((100% / 12) * 4);max-width: calc((100% / 12) * 4);}.layout-row>.col-md-5{flex: 0 0 calc((100% / 12) * 5);max-width: calc((100% / 12) * 5);}.layout-row>.col-md-6{flex: 0 0 calc((100% / 12) * 6);max-width: calc((100% / 12) * 6);}.layout-row>.col-md-7{flex: 0 0 calc((100% / 12) * 7);max-width: calc((100% / 12) * 7);}.layout-row>.col-md-8{flex: 0 0 calc((100% / 12) * 8);max-width: calc((100% / 12) * 8);}.layout-row>.col-md-9{flex: 0 0 calc((100% / 12) * 9);max-width: calc((100% / 12) * 9);}.layout-row>.col-md-10{flex: 0 0 calc((100% / 12) * 10);max-width: calc((100% / 12) * 10);}.layout-row>.col-md-11{flex: 0 0 calc((100% / 12) * 11);max-width: calc((100% / 12) * 11);}.layout-row>.col-md-12{flex: 0 0 calc((100% / 12) * 12);max-width: calc((100% / 12) * 12);}.layout-row>.col-md{flex-basis: 0;flex-grow: 1;max-width: 100%;}.layout-row>.col-md-auto{flex: 0 0 auto;width: auto;max-width: 100%;}
}
@media (max-width: 576px) {
    .layout-row>.col-sm-1{flex: 0 0 calc((100% / 12) * 1);max-width: calc((100% / 12) * 1);}.layout-row>.col-sm-2{flex: 0 0 calc((100% / 12) * 2);max-width: calc((100% / 12) * 2);}.layout-row>.col-sm-3{flex: 0 0 calc((100% / 12) * 3);max-width: calc((100% / 12) * 3);}.layout-row>.col-sm-4{flex: 0 0 calc((100% / 12) * 4);max-width: calc((100% / 12) * 4);}.layout-row>.col-sm-5{flex: 0 0 calc((100% / 12) * 5);max-width: calc((100% / 12) * 5);}.layout-row>.col-sm-6{flex: 0 0 calc((100% / 12) * 6);max-width: calc((100% / 12) * 6);}.layout-row>.col-sm-7{flex: 0 0 calc((100% / 12) * 7);max-width: calc((100% / 12) * 7);}.layout-row>.col-sm-8{flex: 0 0 calc((100% / 12) * 8);max-width: calc((100% / 12) * 8);}.layout-row>.col-sm-9{flex: 0 0 calc((100% / 12) * 9);max-width: calc((100% / 12) * 9);}.layout-row>.col-sm-10{flex: 0 0 calc((100% / 12) * 10);max-width: calc((100% / 12) * 10);}.layout-row>.col-sm-11{flex: 0 0 calc((100% / 12) * 11);max-width: calc((100% / 12) * 11);}.layout-row>.col-sm-12{flex: 0 0 calc((100% / 12) * 12);max-width: calc((100% / 12) * 12);}.layout-row>.col-sm{flex-basis: 0;flex-grow: 1;max-width: 100%;}.layout-row>.col-sm-auto{flex: 0 0 auto;width: auto;max-width: 100%;}
}

.align-center{align-items: center;}
.align-end{align-items: flex-end;}
.align-start{align-items: flex-start;}
.justify-center{justify-content: center;}
.justify-end{justify-content: flex-end;}
.justify-start{justify-content: flex-start;}

/* modal */
.modal-overlay{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay-bg);
    word-break: keep-all;
    transition: var(--transition);
}
.modal-overlay[aria-hidden="true"] {
    z-index: -1;
    opacity: 0;
    visibility: hidden;
}
.modal-overlay[aria-hidden="false"] {
    z-index: 999999;
    opacity: 1;
    visibility: visible;
}
.modal{
    border: 2px solid var(--modal-border-color);
    background-color: var(--modal-bg-color);
    border-radius: var(--modal-border-radius);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--modal-width);
    max-width: calc(100% - (var(--container-gutter) * 2));
    padding: var(--modal-padding);
    color: var(--grey-darken2);
}
.modal-header{
    display: flex;
    align-items: flex-start;
    gap: 0 2rem;
    margin-bottom: 2.4rem;
}
.modal-title{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - ((var(--tit-font-size-sm) * 1.3) + 1px) - 2rem);
    display: block;
    font-size: var(--tit-font-size-sm);
    line-height: 1.3;
    font-weight: 700;
    padding-top: 1px;
}
.modal-header .modal-close{
    position: relative;
    left: calc((((var(--tit-font-size-sm) * 1.3) + 1px - var(--icon-size)) / 2));
    display: block;
    width: calc((var(--tit-font-size-sm) * 1.3) + 1px);
    min-width: calc((var(--tit-font-size-sm) * 1.3) + 1px);
    height: calc((var(--tit-font-size-sm) * 1.3) + 1px);
    background-image: url(../../images/portal/icon/modal-close.svg);
    background-size: var(--icon-size) auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-color: transparent;
    transition: var(--transition);
}
.modal-body-inner{
    padding: 0 1rem 0 var(--modal-padding);
    margin: 0 -1rem 0 calc(var(--modal-padding) * -1);
    max-height: calc(var(--view-height) - clamp(200px, 25rem, 25rem));
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-body-inner::-webkit-scrollbar{
    width: var(--scrollbar-width);
}
.modal-body-inner::-webkit-scrollbar-track{
    background-color: var(--scrollbar-track-color);
    border-radius: 999px;
}
.modal-body-inner::-webkit-scrollbar-thumb{
    background-color: var(--scrollbar-thumb-color);
    border-radius: 999px;
}
.modal-body-inner::-webkit-scrollbar-button{
    display: none;
}
.modal-footer{
    margin-top: 2.4rem;
}
.modal-footer-buttons{
    display: flex;
    justify-content: center;
    gap: 0 .8rem;
}
.modal-footer-buttons .btn{
    min-width: 12rem;
}

.modal-alert .modal-body-inner{
    min-height: 12.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--grey-darken2);
}
@media (min-width: 1201px){
    .modal-header .modal-close:hover{
        background-color: var(--primary-lighten4);
    }
}

/* panel */
.panel-list,
.panel-list>li{
    display: block;
    color: var(--grey-darken2);
}
.panel-list>li{
    overflow: hidden;
}
.panel-list>li + li{
    margin-top: 1.6rem;
}
.panel-head{
    width: 100%;
    text-align: left;
    position: relative;
    border-radius: inherit;
    transition: var(--transition);
}
.panel-head .panel-tit{
    display: block;
    font-size: var(--tit-font-size-sm);
    font-weight: 700;
    transition: var(--transition);
}
.panel-head::after{
    content: "";
    display: block;
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    top: 50%;
    transform: translateY(-50%) rotate(0);
    background-image: url(../../images/portal/icon/icon-chevron-down.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: var(--transition);
}
.panel-body{
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.panel-list>li.active .panel-head::after{
    transform: translateY(-50%) rotate(-180deg);
}
.panel-list>li.active .panel-head .panel-tit{
    color: var(--primary-base);
}
.panel-list>li.active .panel-body{
    opacity: 1;
    visibility: visible;
}

.chat-w{
    position: fixed;
    bottom: 6rem;
    right: 16rem;
    width: 64rem;
    height: calc(var(--view-height) - var(--header-height) - 12rem);
    background-color: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, .16);
    color: var(--grey-darken2);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.6rem);
    transition: var(--transition);
}
.chat-w.active{
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.chat-w .chat{
    width: 100%;
    height: 100%;
}
.chat-head{
    display: flex;
    align-items: center;
    gap: 0 .8rem;
    padding: 3rem 2.4rem;
    border-bottom: 1px solid var(--border-color);
}
.chat-head .chat-tit{
    flex-basis: 0;
    flex-grow: 1;
    font-size: var(--tit-font-size);
    font-weight: 600;
}
.chat-head .chat-close-btn{
    width: calc(var(--icon-size) + 1.6rem);
    height: calc(var(--icon-size) + 1.6rem);
    margin: -.8rem;
    background-image: url(../../images/portal/icon/modal-close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--icon-size) auto;
    border-radius: 50%;
    transition: var(--transition);
}
.chat-body{
    padding: 2.4rem;
    height: calc(100% - 2px - (var(--tit-font-size) * 1.5) - 10rem - var(--btn-height));
}
.chat-body .chat-body-inner{
    display: flex;
    flex-direction: column;
    gap: 1.6rem 0;
    max-height: 100%;
    margin-right: -1rem;
    padding-right: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
}
.chat-body .chat-body-inner::-webkit-scrollbar{
    width: var(--scrollbar-width);
}
.chat-body .chat-body-inner::-webkit-scrollbar-track{
    background-color: var(--scrollbar-track-color);
    border-radius: 999px;
}
.chat-body .chat-body-inner::-webkit-scrollbar-thumb{
    background-color: var(--scrollbar-thumb-color);
    border-radius: 999px;
}
.chat-body .chat-body-inner::-webkit-scrollbar-button{
    display: none;
}
.chat-speech-w.ai{
    position: relative;
    padding-left: calc(clamp(32px, 4.8rem, 4.8rem) + 1.6rem);
}
.chat-speech-w.ai .icon-chat-ai{
    position: absolute;
    top: 0;
    left: 0;
}
.chat-speech-w.ai .chat-speech{
    width: fit-content;
    max-width: 100%;
    padding: 1.6rem;
    background-color: var(--secondary-lighten5);
    border-radius: .8rem;
    font-size: var(--txt-font-size);
    overflow: hidden;
}
.chat-speech-w .chat-reset-btn{
    margin: -1.6rem;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    gap: 0 .8rem;
    font-size: var(--txt-font-size);
    font-weight: 600;
    color: var(--grey-darken2);
    background-color: var(--secondary-lighten5);
    transition: var(--transition);
}
.chat-speech-w.que{
    display: flex;
    justify-content: flex-end;
}
.chat-speech-w.que .chat-speech{
    width: fit-content;
    max-width: 100%;
    padding: 1.6rem;
    background-color: #fff;
    border-radius: .8rem;
    font-size: var(--txt-font-size);
    font-weight: 600;
    border: 1px solid var(--border-color);
    min-width: 16rem;
    text-align: center;
}
.chat-body .chat-body-inner .icon-scroll-arrow{
    margin: -.6rem auto;
    min-height: var(--icon-size);
}
.chat-foot{
    padding: 2rem;
    border-top: 1px solid var(--border-color);
}
.chat-foot .chat-foot-inner{
    height: var(--btn-height);
    margin-right: -1rem;
    padding-right: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .8rem;
}
.chat-foot .chat-foot-inner::-webkit-scrollbar{
    width: var(--scrollbar-width);
}
.chat-foot .chat-foot-inner::-webkit-scrollbar-track{
    background-color: var(--scrollbar-track-color);
    border-radius: 999px;
}
.chat-foot .chat-foot-inner::-webkit-scrollbar-thumb{
    background-color: var(--scrollbar-thumb-color);
    border-radius: 999px;
}
.chat-foot .chat-foot-inner::-webkit-scrollbar-button{
    display: none;
}
.chat-foot .chat-label{
    width: fit-content;
    height: var(--btn-height);
    font-size: var(--txt-font-size-sm);
    padding: var(--btn-padding);
    color: #fff;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    border-radius: .6rem;
    background-color: var(--primary-darken1);
    transition: var(--transition);
}
.guide-search-form{
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .8rem;
}
.guide-chat{
    display: flex;
    flex-direction: column;
}
.guide-chat .chat-head,
.guide-chat .chat-foot{
    flex-shrink: 0;
}
.guide-chat-body{
    flex: 1;
    min-height: 0;
    height: auto;
}
.chat-foot .guide-chat-foot-inner{
    height: calc((var(--btn-height) * 2) + .8rem);
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow-y: hidden;
}
.guide-category-list{
    width: 100%;
    height: var(--btn-height);
    display: flex;
    flex: 0 0 var(--btn-height);
    align-items: center;
    justify-content: flex-start;
    gap: .8rem;
    overflow-x: auto;
    overflow-y: hidden;
}
.guide-category-list .chat-label{
    flex-shrink: 0;
}
.guide-search-input{
    width: auto;
    flex: 1 1 0;
    min-width: 0;
}
.guide-search-reset{
    width: var(--btn-height);
    min-width: var(--btn-height);
    flex: 0 0 var(--btn-height);
    padding: 0;
}
.guide-search-submit{
    flex: 0 0 auto;
}
.chat-speech-w.ai .guide-result-speech{
    width: 100%;
}
.guide-result-speech>p{
    color: var(--grey-darken2);
    font-weight: 600;
}
.guide-result-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.6rem;
}
.guide-result-list>li{
    display: block;
    width: 100%;
}
.guide-result-link{
    position: relative;
    display: block;
    width: 100%;
    padding: 1.4rem calc(2.8rem + var(--icon-size-sm)) 1.4rem 1.6rem;
    border: 1px solid var(--border-color);
    border-radius: .8rem;
    background-color: var(--surface-bg);
    color: var(--grey-darken2);
    text-align: start;
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .06);
    overflow-wrap: anywhere;
    transition: var(--transition);
}
.guide-result-link::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 1.4rem;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    background: url(../../images/portal/icon/icon-outlink-primary.svg) center / contain no-repeat;
    transform: translateY(-50%);
}
.guide-result-link strong{
    display: block;
    color: var(--primary-darken1);
    font-size: var(--txt-font-size);
    font-weight: 700;
    line-height: 1.4;
}
.guide-result-menu{
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .6rem;
    color: var(--grey-base);
    font-size: var(--txt-font-size-sm);
    font-weight: 400;
    line-height: 1.5;
}
.guide-result-menu::before{
    content: "";
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex: 0 0 var(--icon-size-sm);
    background: url(../../images/portal/icon/icon-location-frame-primary-light.svg) center / contain no-repeat;
}
.chat-w[dir="rtl"] .guide-result-link{
    padding-right: 1.6rem;
    padding-left: calc(2.8rem + var(--icon-size-sm));
}
.chat-w[dir="rtl"] .guide-result-link::after{
    right: auto;
    left: 1.4rem;
}
.chat-w[dir="rtl"] .chat-speech-w.ai{
    padding-right: calc(clamp(32px, 4.8rem, 4.8rem) + 1.6rem);
    padding-left: 0;
}
.chat-w[dir="rtl"] .chat-speech-w.ai .icon-chat-ai{
    right: 0;
    left: auto;
}
.chat-w[dir="rtl"] .chat-body .chat-body-inner,
.chat-w[dir="rtl"] .chat-foot .chat-foot-inner{
    margin-right: 0;
    padding-right: 0;
    margin-left: -1rem;
    padding-left: 1rem;
}
@media (min-width: 1201px){
    .chat-head .chat-close-btn:hover{
        background-color: var(--primary-lighten4);
    }
    .chat-speech-w .chat-reset-btn:hover{
        background-color: var(--primary-lighten3);
    }
    .chat-foot .chat-label:hover{
        background-color: var(--primary-darken3);
    }
    .guide-result-link:hover{
        border-color: var(--primary-lighten3);
        background-color: var(--primary-lighten5);
        box-shadow: 0 .4rem 1.2rem rgba(59, 34, 120, .12);
        transform: translateY(-.2rem);
    }
}
@media screen and (max-width: 1536px){
    .chat-w{
        bottom: var(--container-gutter);
        right: calc((var(--container-gutter) * 2) + 8rem);
        height: calc(var(--view-height) - var(--header-height) - (var(--container-gutter) * 2));
    }
}
@media screen and (max-width: 1028px){
    html:has(.chat-w.active){
        overflow: hidden;
        height: 100%;
        max-height: var(--view-height);
    }
    .chat-w{
        top: 0;
        left: 0;
        bottom: unset;
        right: unset;
        width: 100%;
        height: var(--view-height);
        padding: var(--container-gutter);
        background-color: var(--modal-overlay-bg);
        box-shadow: none;
        border-radius: 0;
        transform: translateY(0);
    }
    .chat-w .chat{
        border-radius: 1.6rem;
        background-color: #fff;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, .16);
    }
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]){
    text-align: right;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) select.input-primary{
    padding-right: var(--input-padding);
    padding-left: calc((var(--input-padding) * 2) + var(--icon-size));
    background-position: left var(--input-padding) center;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[type="email"],
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[type="tel"],
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[type="number"],
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[inputmode="numeric"],
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .email-w{
    direction: ltr;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .email-w input,
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[type="email"],
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[type="tel"],
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[type="number"],
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) input[inputmode="numeric"]{
    text-align: right;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .email-w select{
    direction: rtl;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .input-cert .input-primary{
    padding-right: var(--input-padding);
    padding-left: calc((var(--input-padding) * 2) + clamp(40px, 5rem, 5rem));
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .input-cert .input-cert-txt{
    right: auto;
    left: var(--input-padding);
    direction: ltr;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .control-primary input + label p{
    padding-left: 0;
    padding-right: calc(var(--control-icon-size) + var(--control-gap));
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .control-primary input + label::after,
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .control-primary input + label::before{
    left: auto;
    right: 0;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .control-primary input + label::before{
    transform: translate(var(--control-gap), -50%);
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .toggle-switch .toggle-slider::before{
    left: auto;
    right: var(--switch-gap);
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .toggle-switch input:checked + .toggle-slider::before{
    left: auto;
    right: calc(var(--switch-width) - var(--switch-height) + var(--switch-gap));
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .toggle-switch.lg input:checked + .toggle-slider::before{
    right: calc(var(--switch-width) - var(--switch-height-lg) + var(--switch-gap));
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .pagination-control{
    transform: scaleX(-1);
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .tab-primary,
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .tab-pill{
    margin-left: auto;
    margin-right: 0;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .panel-head,
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .table-primary td.table-tit,
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .card.left .card-inner{
    text-align: right;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .table-primary td.table-tit>a{
    margin-left: auto;
    margin-right: 0;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .modal-header .modal-close{
    left: auto;
    right: calc((((var(--tit-font-size-sm) * 1.3) + 1px - var(--icon-size)) / 2));
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .modal-body-inner{
    padding: 0 var(--modal-padding) 0 1rem;
    margin: 0 calc(var(--modal-padding) * -1) 0 -1rem;
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .txt-list>li ol,
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .txt-indent.lg{
    padding-left: 0;
    padding-right: calc(var(--txt-font-size-lg) * .45);
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .txt-indent{
    padding-left: 0;
    padding-right: calc(var(--txt-font-size) * .8);
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .txt-indent.sm{
    padding-left: 0;
    padding-right: calc(var(--txt-font-size-sm) * 1.2);
}
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .txt-row>span,
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .txt-row-indent{
    padding-left: 0;
    padding-right: calc(var(--txt-font-size-lg) * .55);
}
@media screen and (max-width: 767px){
html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .table-primary.responsive td{
    text-align: right;
}
}

html[lang="fa"] main[dir="rtl"] .tit-w .tit-w-right{
    margin-left: 0;
    margin-right: auto;
}
html[lang="fa"] main[dir="rtl"] input[type="date"].input-primary{
    direction: ltr;
    text-align: right;
    padding-right: var(--input-padding);
    padding-left: calc((var(--input-padding) * 2) + var(--icon-size));
    background-position: left var(--input-padding) center;
}
html[lang="fa"] main[dir="rtl"] input[type="date"].input-primary::-webkit-calendar-picker-indicator{
    right: auto;
    left: var(--input-padding);
}

html[lang="fa"] :is(main[dir="rtl"], .modal-overlay[dir="rtl"], .main-popup[dir="rtl"]) .email-w{
    justify-content: flex-end;
}