@charset "UTF-8";



/* **************************************** *
 * section line
 * **************************************** */
.sec-hr{height:1px; margin-top:4rem; margin-bottom:4rem; background-color:var(--krds-color-light-gray-10)}
.sec-hr:after{content:''; display:block; clear:both}

/* **************************************** *
 * sub title
 * **************************************** */
.stit-area{display:flex; position:relative; align-items:center; margin-bottom:2rem; z-index:1}
.stit-area:after{content:''; display:block; clear:both}
.stit-area .stit-l,
.stit-area .stit-c,
.stit-area .stit-r{display:flex; align-items:center}

.stit-area .stit-c{margin-left:auto}
.stit-area .stit-r{margin-left:auto}

.stit-area .search-middle{display:inline-flex; align-items:center; gap:0.4rem}

.stit-area .comment-total{display:inline-flex; align-items:center; position:relative; margin-left:1rem; padding:0.4rem 1.5rem; background-color:#d2930a; border-radius:20rem}
.stit-area .comment-total .num{line-height:2.4rem; color:#fff; font-size:1.9rem; font-weight:300; letter-spacing:-0.02rem}

h2.stit02,
h3.stit03,
h4.stit04,
h5.stit05{display:inline-flex; align-items:center; justify-content:center; flex-direction:row; gap:4px; position:relative; margin:0; padding:0; color:#202020; letter-spacing:-0.05rem; vertical-align:middle; word-break:keep-all}
h2.stit02{line-height:4.4rem; font-size:4.4rem; font-weight:600}
h3.stit03{line-height:3.8rem; font-size:3.8rem; font-weight:600}
h3.stit03 i{font-size:3.4rem}
h4.stit04{line-height:2.4rem; font-size:2.4rem; font-weight:600}
h4.stit04 i{font-size:2.2rem}
h5.stit05{line-height:2rem; font-size:2rem; font-weight:300}
h2.stit02 span{font-size:4.4rem}
h3.stit03 span{font-size:3.8rem}
h4.stit04 span{font-size:2.6rem}
h5.stit05 span{font-size:2rem}


/* **************************************** *
* box
* **************************************** */
/* info-box */
.info-box{position:relative; padding:2.4rem; background-color:transparent; border-radius:1.2rem}
.info-box.icon{padding-left:6rem}
.info-box.icon > [class^="ri-"]{position:absolute; left:2.8rem; top:23px; font-size:2.3rem; color:var(--krds-color-light-gray-60)}
.info-box.border{border:1px solid var(--krds-color-light-gray-10)}
.info-box.small{padding:1.7rem 2rem}
.info-box.large{padding:2.8rem 4rem}

.info-box .stit04{padding-top:1px}
.info-box .stit04 + .info-txt{margin-top:1.5rem}
.info-box .stit04 + .info-list{margin-top:1.5rem}

.info-box .stit05{padding-top:1px}
.info-box .stit05 + .info-txt{margin-top:1.5rem}
.info-box .stit05 + .info-list{margin-top:1.5rem}

.info-box.danger{background-color:#fdefec}
.info-box.danger.icon > [class^="ri-"]{color:#bd2c0f}
.info-box.danger.border{border:1px solid #fcdfd9}



/* **************************************** *
 * text
 * **************************************** */
 /* info-txt */
.info-txt{position:relative; line-height:2.4rem; font-size:1.6rem; font-weight:normal; color:var(--krds-color-light-gray-90); font-size:1.6rem; letter-spacing:-0.02rem; word-break:keep-all}
.info-txt.bul{padding-left:1.0rem}
.info-txt.bul:before{content:''; position:absolute; left:0; top:1rem; width:0.3rem; height:0.3rem; background:var(--krds-color-light-gray-40)}
.info-txt.uni{padding-left:1.6rem}
.info-txt.uni > .uni{position:absolute; top:0; left:0}
.info-txt i{position:relative; top:-0.1rem; font-size:1.8rem !important; vertical-align:middle}


/* info-list */
.info-list{position:relative}
.info-list:after{content:''; display:block; clear:both}
.info-list > li{position:relative; margin-bottom:0.2rem; line-height:2.4rem; color:var(--krds-color-light-gray-90); font-size:1.6rem; font-weight:normal; letter-spacing:-0.02rem; word-break:keep-all}
.info-list > li:last-child{margin-bottom:0}
.info-list > li > ul{margin-top:0.2rem}
.info-list.bul > li{padding-left:1.8rem}
.info-list.bul > li:before{content:''; position:absolute; left:0; top:0.9rem; width:0.3rem; height:0.3rem; background:var(--krds-color-light-gray-40)}
.info-list.uni > li{padding-left:2.2rem}
.info-list.uni > li > span.uni{position:absolute; left:0; top:0}


 /* info-stit */
.info-stit{display:inline-flex; align-items:center; justify-content:center; flex-direction:row; position:relative; margin-bottom:10px; padding:0; line-height:1.7rem; color:var(--krds-color-light-gray-95); font-size:1.7rem; font-weight:300; letter-spacing:-0.05rem; vertical-align:middle; word-break:keep-all}


/* dash */
.dash-uni,
.dash-txt,
.dash-tit{display:inline-block; line-height:2.2rem; font-size:1.6rem; letter-spacing:-0.02rem; vertical-align:middle}
.dash-uni{color:var(--krds-color-light-gray-40); font-weight:normal}
.dash-txt{color:var(--krds-color-light-gray-60); font-weight:normal}
.dash-tit{color:var(--krds-color-light-gray-95); font-weight:300}


/* info ckpoint */
.info-ckpoint{position:relative; margin-bottom:50px; padding-left:58px; background-color:#f8f8f8}
.info-ckpoint:before{content:'\f039'; position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; width:40px; height:40px; font-family:"remixicon"; font-size:22px; color:#3382e9; background-color:#e1ecfa; border-radius:6px 6px 12px 6px; box-sizing:border-box}
.info-ckpoint:after{content:''; position:absolute; left:0; top:0; width:8px; height:8px; background-color:#3382e9; border-radius:50%; box-sizing:border-box}
.info-ckpoint .ckpoint-s{margin-top:15px}
.info-ckpoint .ckpoint-l .message,
.info-ckpoint .ckpoint-s .message{line-height:1.5em; font-family:tjs; font-weight:normal; letter-spacing:-0.8px; word-break:keep-all}
.info-ckpoint .ckpoint-l .message span,
.info-ckpoint .ckpoint-s .message span{font-family:tjs}
.info-ckpoint .ckpoint-l .message{color:#505050; font-size:18px}
.info-ckpoint .ckpoint-s .message{font-weight:normal; color:#808080; font-size:16px}


/* **************************************** *
 * tab
 * **************************************** */
 /* tab-cont */
 .tab-cont{display:none}
 .tab-cont.active{display:block}

 /* tab-line */
.tab-line{position:relative; margin-bottom:5rem}
.tab-line > ul{display:flex; align-items:center; position:relative}
.tab-line > ul > li{display:flex; flex:1; position:relative}
.tab-line > ul > li:before{content:''; position:absolute; bottom:0; left:0; right:0; height:0.2rem; background-color:#ebebeb}
.tab-line > ul > li a{display:flex; align-items:center; justify-content:center; position:relative; width:100%; height:6.8rem; padding:0 0.8rem; box-sizing:border-box}
.tab-line > ul > li a:before{content:''; position:absolute; left:50%; bottom:0; width:0; height:0.4rem; margin-left:0; background:#101010; transition:all .30s ease}
.tab-line > ul > li a > span{line-height:1.9rem; color:#808080; font-size:1.9rem; font-weight:normal; letter-spacing:-0.05rem; text-align:center; transition:all .20s ease}
.tab-line > ul > li:hover a > span,
.tab-line > ul > li.active a > span{color:#202020}
.tab-line > ul > li.active a > span{font-weight:300}
.tab-line > ul > li:hover a:before,
.tab-line > ul > li.active a:before{width:100%; margin-left:-50%}


/* **************************************** *
 * button
 * **************************************** */
 /* btn-area */
.btn-area{display:flex; align-items:center; width:100%; margin-bottom:1rem}
.btn-area .btn-l,
.btn-area .btn-c,
.btn-area .btn-r{display:flex; align-items:center; gap:0.4rem}
.btn-area .btn-c{margin:0 auto}
.btn-area .btn-r{margin-left:auto}

 /* btn base */
.btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   flex-direction:row;
   gap:2px;
   width:auto;
   height:4.8rem;
   padding:0 1.8rem;
   line-height: 1.6rem;
   background:#fff;
   border:0.1rem solid #e1e1e1;
   font-weight:300;
   font-size:1.6rem;
   letter-spacing:-0.02rem;
   color:#505050;
   white-space:nowrap;
   border-radius:0.6rem;
   vertical-align:middle;
   cursor:pointer;
   box-sizing:border-box;
   transition: all 0.3s
 }
.btn:active,
.btn:hover,
.btn:focus{padding:1.4rem 1.8rem; background:#f4f5f6}
 
.btn [class^="ri-"],
.btn [class*=" ri-"]{display:inline-flex; align-items:center; position:relative; font-size:1.8rem; vertical-align:middle}

.btn.disabled{opacity:.4; cursor:no-drop}


 /* btn color */
.btn.primary{background:var(--krds-color-light-primary-50); border:1px solid var(--krds-color-light-primary-50); color:var(--krds-color-light-alpha-white100)}
.btn.primary:active,
.btn.primary:hover,
.btn.primary:focus,
.btn.primary.checked,
.btn.primary.disabled{background:var(--krds-color-light-primary-60); border:1px solid var(--krds-color-light-primary-60); color:var(--krds-color-light-alpha-white100)}

.btn.secondary{background:var(--krds-color-light-secondary-50); border:1px solid var(--krds-color-light-secondary-50); color:var(--krds-color-light-alpha-white100)}
.btn.secondary:active,
.btn.secondary:hover,
.btn.secondary:focus,
.btn.secondary.checked,
.btn.secondary.disabled{background:var(--krds-color-light-secondary-60); border:1px solid var(--krds-color-light-secondary-60); color:var(--krds-color-light-alpha-white100)}

.btn.gray{background:var(--krds-color-light-gray-60); border:1px solid var(--krds-color-light-gray-60); color:var(--krds-color-light-alpha-white100)}
.btn.gray:active,
.btn.gray:hover,
.btn.gray:focus,
.btn.gray.checked,
.btn.gray.disabled{background:var(--krds-color-light-gray-70); border:1px solid var(--krds-color-light-gray-70); color:var(--krds-color-light-alpha-white100)}

.btn.info{background:var(--krds-color-light-information-50); border:1px solid var(--krds-color-light-information-50); color:var(--krds-color-light-alpha-white100)}
.btn.info:active,
.btn.info:hover,
.btn.info:focus,
.btn.info.checked,
.btn.info.disabled{background:var(--krds-color-light-information-60); border:1px solid var(--krds-color-light-information-60); color:var(--krds-color-light-alpha-white100)}

.btn.danger{background:var(--krds-color-light-danger-50); border:1px solid var(--krds-color-light-danger-50); color:var(--krds-color-light-alpha-white100)}
.btn.danger:active,
.btn.danger:hover,
.btn.danger:focus,
.btn.danger.checked,
.btn.danger.disabled{background:var(--krds-color-light-danger-60); border:1px solid var(--krds-color-light-danger-60); color:var(--krds-color-light-alpha-white100)}

.btn.warning{background:var(--krds-color-light-warning-50); border:1px solid var(--krds-color-light-warning-50); color:var(--krds-color-light-alpha-white100)}
.btn.warning:active,
.btn.warning:hover,
.btn.warning:focus,
.btn.warning.checked,
.btn.warning.disabled{background:var(--krds-color-light-warning-60); border:1px solid var(--krds-color-light-warning-60); color:var(--krds-color-light-alpha-white100)}

.btn.success{background:var(--krds-color-light-success-50); border:1px solid var(--krds-color-light-success-50); color:var(--krds-color-light-alpha-white100)}
.btn.success:active,
.btn.success:hover,
.btn.success:focus,
.btn.success.checked,
.btn.success.disabled{background:var(--krds-color-light-success-60); border:1px solid var(--krds-color-light-success-60); color:var(--krds-color-light-alpha-white100)}

.btn.black{background:#101010; border:1px solid #101010; color:#fff}
.btn.black:active,
.btn.black:hover,
.btn.black:focus,
.btn.black.checked,
.btn.black.disabled{background:#101010; border:1px solid #101010; color:#fff}

.btn.navi{background:#041834; border:1px solid #041834; color:#fff}
.btn.navi:active,
.btn.navi:hover,
.btn.navi:focus,
.btn.navi.checked,
.btn.navi.disabled{background:#041834; border:1px solid #041834; color:#fff}
s
/* btn size */
.btn.xsmall{height:3.2rem; padding:0 1rem; font-size:1.5rem; border-radius:0.4rem}
.btn.xsmall:active,
.btn.xsmall:hover,
.btn.xsmall:focus,
.btn.xsmall.checked{padding:0 1rem;}
.btn.xsmall [class^="ri-"]{font-size:1.5rem}

.btn.small{height:4rem; padding:0 1.2rem; font-size:1.5rem; border-radius:0.4rem}
.btn.small:active,
.btn.small:hover,
.btn.small:focus,
.btn.small.checked{padding:0 1.2rem}
.btn.small [class^="ri-"]{font-size:1.5rem}

.btn.medium{height:4.8rem; padding:0 1.8rem; font-size:1.7rem; border-radius:0.6rem}
.btn.medium:active,
.btn.medium:hover,
.btn.medium:focus,
.btn.medium.checked{padding:0 1.8rem}
.btn.medium [class^="ri-"]{font-size:1.7rem}
 
.btn.large{height:5.6rem; padding:0 2rem; font-size:1.9rem; border-radius:0.8rem}
.btn.large:active,
.btn.large:hover,
.btn.large:focus,
.btn.large.checked{padding:0 2rem;}
.btn.large [class^="ri-"]{font-size:1.9rem}
 
.btn.xlarge{height:6.4rem; padding:0 2.4rem; font-size:1.9rem; border-radius:0.8rem}
.btn.xlarge:active,
.btn.xlarge:hover,
.btn.xlarge:focus,
.btn.xlarge.checked{padding:0 2.4rem;}
.btn.xlarge [class^="ri-"]{font-size:1.9rem}

/* btn group */
.btn-group{display:flex; align-items:center; gap:0.4rem}
.btn-group + .btn-group{margin-top:1rem}

/* btn type */
.btn.round-max{padding:0 2rem; border-radius:100rem}


/* **************************************** *
 * lay horizontal
 * **************************************** */
.lay-hr{display:flex; flex:1; gap:30px; min-height:0}
.lay-hr .lay-box{flex:1; min-width:0}
.lay-hr .lay-box.col1{flex:1}
.lay-hr .lay-box.col2{flex:2}
.lay-hr .lay-box.col3{flex:3}
.lay-hr .lay-box.col4{flex:4}
.lay-hr .lay-box.col5{flex:5}
.lay-hr .lay-box.col6{flex:6}
.lay-hr .lay-box.col7{flex:7}
.lay-hr .lay-box.col8{flex:8}
.lay-hr .lay-box.col9{flex:9}

.lay-hr.align-center{align-items:center}

.lay-hr .lay-box.col-tree{display:flex; flex:none; min-width:340px; max-width:340px}
.lay-hr .lay-box.col-tree .tree-view-body{min-width:338px; max-width:338px}


/* **************************************** *
 * require
 * **************************************** */
.require-cmm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    position:relative;
    top:-8px;
    min-width:5px;
    min-height:5px;
    width:5px;
    height:5px;
    margin-left:5px;
    font-size:0;
    background:#d2930a;
    border-radius:50%;
    vertical-align:middle
}

/* require size */
.require-cmm.large{min-width:0.8rem; min-height:0.8rem; width:0.8rem; height:0.8rem}