@charset "utf-8";
/* CSS Document */

/*텍스트*/
.gray{ color:#777; }
.gray-bold{ color:#777; font-weight:bold; }
.gray2{ color:rgba(0, 0, 0, 0.2); }
.green{ color:#9ce400; }
.green-bold{ color:#9ce400; font-weight:bold; }
.darkgreen{ color:#62C005; }
.darkgreen-bold{ color:#62C005; font-weight:bold; }
.blue{ color:#5969f7; }
.blue-bold{ color:#5969f7; font-weight:bold; }
.red{ color:red; }
.red-bold{ color:red; font-weight:500; }
.blueviolet{ color:blueviolet; }
.blueviolet-bold{ color:blueviolet; font-weight:bold; }
.yellow{ color:#FFC200; }
.yellow-bold{ color:#FFC200; font-weight:bold; }
.cut-txt{ display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: text-bottom; }
.cut-line{ display: -webkit-box; -webkit-box-orient: vertical; }
.txt-desc{ font-size: 0.95em; font-weight: 300; }
.txt-small{ font-size: 0.8em; color:rgba(0, 0, 0, 0.5)}

/* 버튼 */
.tab{ display: flex; justify-content: space-between; border-bottom: 2px solid black; margin:1em 0em; }
.tab>a{ 
    border:1px solid rgba(0, 0, 0, 0.1);  box-sizing: border-box; position: relative; top:2px; 
    flex: 1 1 auto; padding: 0.8em 0em; text-align: center;
}
.tab>a.tabon{ 
    border-width: 2px; border-color: black; border-bottom-color: white; 
    color:rgba(0, 0, 0, 1); font-weight: 500; 
}
.btn-box{
    position:relative; text-align:left; background: #fff; padding-left:1em; padding-right: 2em; 
    border:1px solid #ddd; min-height: 2.3em; min-width:90px; overflow:hidden; font-weight: 500;
    transition:all 0.3s ease-out; z-index:1;
}
.btn-box::before{
    content:''; position:absolute; display:block; width:140%; left:-140%; top:-1px; bottom: -1px;
    background-color:#2b2b2b; transform-origin:0% -50%; transform:skewX(-20deg); 
    transition:left 0.3s cubic-bezier(.57,.21,.69,1.25); z-index:-1
}
.btn-box:hover {color:#fff; border-color:#2b2b2b}
.btn-box:hover:before { left:-2% }

.box-color-blue{ border-color: #5969f7; color:#5969f7; }
.box-color-blue::before{ background-color: #5969f7; }
.box-color-blue:hover{ border-color: #5969f7; }

.box-color-dtgblue{ border-color: #363B4D; color:#363B4D; }
.box-color-dtgblue::before{ background-color: #363B4D; }
.box-color-dtgblue:hover{ border-color: #363B4D; }

.box-color-blueviolet{ border-color: blueviolet; color:blueviolet; }
.box-color-blueviolet::before{ background-color: blueviolet; }
.box-color-blueviolet:hover{ border-color: blueviolet; }

.box-icon-arrowleft::after{ content: '\2190'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-arrowup::after{ content: '\2191'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-arrowright::after{ content: '\2192'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }
.box-icon-arrowdonw::after{ content: '\2193'; position: absolute; right: 0.5em; font-size: 1em; font-weight: 200; }

.btn-skew{ position: relative; z-index: 2; display: inline-block; line-height: 2.5em; font-size: 1.3em; padding: 0em 2em; text-shadow: none; text-indent: -5px; }
.btn-skew:before{content: ''; position: absolute; display: block; width: 100%; height: 2.5em; z-index: -1;transform:skewX(30deg);background: rgba(0, 0, 0, 0.5); left: 0em;}
.btn-skew>.material-icons{ vertical-align: middle; opacity: 0.5; }

.btn-box-greendark{
    padding: 0.3em 1em; background-color: rgba(0, 0, 0, 0.5); border: rgba(0, 0, 0, 0.5); color:#9ce400; font-weight: 500; margin: 0px 1px;
    transition:all 0.3s ease-out;
}
.btn-box-greendark:hover{ background-color: #9ce400; color: rgba(0, 0, 0, 1); }
.btn-rbox{
    padding: 0.3em 1em; background: linear-gradient(#fff, #f5f5f5); border: 1px solid rgba(0, 0, 0, 0.2); font-weight: 500;
    margin: 0px 1px; border-radius: 3px;
    transition:all 0.3s ease-out;
}
.btn-rbox:hover{ background: black; color: white; }
.btn-rbox-whitedark{
    padding: 0.3em 1em; background-color: rgba(0, 0, 0, 1); border: 1px solid rgba(0, 0, 0, 1); color:#fff; font-weight: 500;
    margin: 0px 1px; border-radius: 3px;
    transition:all 0.3s ease-out;
}
.btn-rbox-whitedark:hover{ background-color: #fff; color: rgba(0, 0, 0, 1); border-color: rgba(0, 0, 0, 0.2); }
.btn-rbox-whiteblue, a.btn-rbox-whiteblue{
    padding: 0.3em 1em; background-color: #6E819C; border: 1px solid #6E819C; color:#fff; font-weight: 500;
    margin: 0px 1px; border-radius: 3px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    transition:all 0.3s ease-out;
}
.btn-rbox-whiteblue:hover{ background-color: #fff; color: #6E819C; border-color: rgba(0, 0, 0, 0.2); text-shadow: none; }

select.btn-rbox-whiteblue:valid{ color: white; }
select.btn-rbox-whiteblue:hover{ color: #6E819C; }

.prevclick{ cursor: pointer; }


/* 단락 */
.p-left-asterisk{ padding: 0em 0em 0.5em 1.2em; text-indent: -1.2em;}
.p-left-asterisk::before{ content: '※'; width: 1.2em; display: inline-block; text-indent: 0em; }
.p-left-warning{ padding-left:1.5em; text-indent: -1.5em;}
.p-left-warning::before{ 
    content: 'warning'; width: 1.5em; display: inline-block; text-indent: 0em;
    font-family: "Material Icons"; font-size: 1em; color:#FFC200; vertical-align: middle; transform: scale(1.2);
}
.topline-userblue{ border-top: 1px solid #6b809c;}


/* 블럭 */
.vsb-hidden{ visibility: hidden; }
.js-add, .dsp-x { display: none; }
.wfull{ min-width: 100%;}
.whalf{ width: calc(50%); }
.wd-100, [type='text'].wd-100, [type='password'].wd-100 { max-width: 100px; }
.wd-120, [type='text'].wd-120, [type='password'].wd-120 { max-width: 120px; }
.wd-130, [type='text'].wd-130, [type='password'].wd-130 { max-width: 130px; }
.wd-150, [type='text'].wd-150, [type='password'].wd-150 { max-width: 150px; }
.wd-180, [type='text'].wd-180, [type='password'].wd-180 { max-width: 180px; }
.wd-200, [type='text'].wd-200, [type='password'].wd-200 { max-width: 200px; }
.wd-250, [type='text'].wd-250, [type='password'].wd-250 { max-width: 250px; }
.wd-300, [type='text'].wd-300, [type='password'].wd-300 { max-width: 300px; }
.wd-400, [type='text'].wd-400, [type='password'].wd-400 { max-width: 400px; }
.wd-500, [type='text'].wd-500, [type='password'].wd-500 { max-width: 500px; }
.box-gray-blue{ background: rgba(0, 0, 0, 0.05); border:5px solid #6b809c; padding: 1em; box-sizing: border-box; }
.rarr{ 
    padding-right: 30px; 
    background:url(/images/arrowR.svg) no-repeat calc(100% - 10px) 50%;
}

.h1div{ margin-bottom: 1.5em; }
.h1div>h1{ color:#000; font-size: 140%; font-weight: 500; padding: 20px 0px; }

.h1div>h1:before {
	content: ""; display:inline-block; width:8px; height:8px; margin:-5px 10px auto auto; vertical-align:middle;
	border-right:3px solid red; border-top:3px solid red; transform:rotate(45deg);
}

/* 테이블 */
.table-line>thead{ background: rgba(0, 0, 0, 0.03); }
.table-line th, .table-line td{ border:1px solid rgba(0, 0, 0, 0.1); padding: 0.5em 0.2em; }
.table-line th{ font-weight: 500; }

.form-table{ width: 100%; font-size: 0.9em; table-layout: fixed; }
.form-table>thead{ background: #f7f7f7;  }
.form-table th, .form-table td{ padding: 0.5em 1em; height: 3.3em; border:1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; }
.form-table th{ font-weight: 500;}
.topline-userblue th{ border-top-color: #6b809c;}
.txt-center td{ text-align: center; }

.table-tdxline td{ border-top:none; border-bottom: none; }
.table-tdxline td>input:not([type="checkbox"]), .table-tdxline td>select, .table-tdxline td>textarea{ width: calc(100% - 2em); }
.table-tdxline td>select{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

/* 폼 */
select.radio{ 
    appearance: none; -webkit-appearance: none; -moz-appearance: none; /* 네이티브 외형 감추기 */
    display: flex;
}
.bnzone{ width: 100%; display: flex; justify-content: center;}

.form-basic{ line-height: 3rem;}
.form-basic input, .form-basic select,
.form-table input, .form-table select,
.formul>li>input, .formul>li>select
{ 
    flex:1 0 100px;  
    background: none; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: "Noto Sans KR"; font-size: 1em; font-weight: 400; 
}
.form-basic input:focus, .form-basic select:focus,
.form-table input:focus, .form-table select:focus,
.formul>li>input:focus, .formul>li>select:focus
{border-color: #2865CB; color:#2865CB; }
.formul>li>input[type='radio']:focus{ border:1px solid #2865CB; }
.form-table select>option, .form-basic select>option, .formul select>option{ color:rgba(0, 0, 0, 0.8); }
.formul textarea{ flex:1 0 100px; }

.submit-mtchk{ display: flex; padding: 1em 0em 1em 1.3em ; height: 4em; box-sizing: border-box; }
.submit-mtchk>button, .submit-mtchk>select{ padding: 0em 1em; }
.submit-mtchk>a{ padding: 0em 1em; line-height: 2em; }
.submit-mtchk>.term{ flex: 1;}
.arrow-multi{ width: 28px; height: 15px; }

/* 목록 */
.formul{ list-style: none; display: flex; flex-wrap: wrap; width: 100%; padding-inline-start: 0em; box-sizing: border-box; }
.formul>li{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1 0 auto; padding: 0.5em 0em; min-height: calc(1.5em + 0.6em + 1px); }
.formul>li.wfull{ min-width: 100%;}
.formul>li>label{ text-indent: 1em; width: 110px; }
.formul .error_box{ min-width: calc(100% - 110px); font-size: 0.9em; color:red; letter-spacing: -0.07em; margin-top:0.5em }
.flexul{ display: flex; flex-wrap: wrap; width: 100%; margin:0; padding: 0; list-style: none;}
.flexul>li{ flex:1 0 auto;}
.jstf-ctt{ justify-content: flex-end;}

/*pagezone*/
#pagezone{ display: flex; justify-content: center; align-items: center; padding: 1em 0em; border-bottom: none;}
#pagezone>a,#pagezone>span{ margin: 0.3em; text-align: center;}
#pagezone>#pgFirst{ width: 12px; height: 12px; background: url("/images/page/arrowDL.svg") no-repeat 0px center; }
#pagezone>#pgFirst:hover{ background-image: url("/images/page/arrowDLc.svg"); }
#pagezone>#pgLast{ width: 12px; height: 12px; background: url("../images/page/arrowDR.svg") no-repeat 0px center; }
#pagezone>#pgLast:hover{ background-image: url("/images/page/arrowDRc.svg"); }
#pagezone .prvoff{ padding-left:15px; background: url("/images/page/arrowL.svg") no-repeat 0% center; }
#pagezone .nexoff{ padding-right:15px; background: url("/images/page/arrowR.svg") no-repeat 100% center; }
#pagezone .prvon{ padding-left:15px; background: url("/images/page/arrowLc.svg") no-repeat 0% center; }
#pagezone .nexon{ padding-right:15px; background: url("/images/page/arrowRc.svg") no-repeat 100% center; }
#pagezone .numbn{ font-family: "Lusitana"; }

/*프린트 관련*/
.print_lay{ width: calc(100vw - 2em); }
.print_lay>table{ width: 100%; }

/*박스*/
.img-loading{ position: relative; overflow: hidden; }
.img-loading>*{ position: absolute; width: 100%; background-size: cover; }


/*모바일*/
@media screen and (max-width: 500px) {
    .display-tab-over{ display: none; }

    /* 버튼 */
    .tab{ 
        flex-wrap: wrap; border-bottom:1px solid rgba(0, 0, 0, 0.1); margin:0px; padding: 1em; 
        background: rgba(0, 0, 0, 0.03); 
    }
    .tab>a{ 
        position: unset; top:unset;  max-width: calc(50% - 2px); background: white;
        flex: 0 1 50%; margin: 2px 0px; padding: 0.8em 0em; text-align: center;
    }
    .tab>a.tabon{ border-color: black; color:rgba(0, 0, 0, 1); font-weight: 500; }

    /* 목록 */
    .formul>li>label:not(.on500){ display: none; }
    .formul .error_box{ min-width: calc(100%); }

    /*pagezone*/
    #pagezone .numbn{ 
        width: 2em; height: 100%; padding: 0.2em 0em; border:1px solid #ccc; border-radius: 3px; margin:0px 1px; 
        background: linear-gradient(#ffffff, #f1f1f1);
    }
}
/*탭 이상*/
@media screen and (min-width: 500.1px) {
    .display-mobile{ display: none;}
    .whalf-tab-over{ width: calc(50%); }
}
/*탭 이하*/
@media screen and (max-width: 1024px) {	
    .display-pc-over{ display: none; }   
}
/*PC 이상*/
@media screen and (min-width: 1024.1px) {
    .display-tab-below { display: none; }

    /* 테이블 */
    .cling-left th, .cling-left td{ border-left: none; }

    /*스크롤바*/
    .scrollbar-blue{ scrollbar-width: thin;  }
    .scrollbar-blue::-webkit-scrollbar { width: 10px; height: 8px; }
    .scrollbar-blue::-webkit-scrollbar-track { background-color: #fafafa; border-radius: 2em; }
    .scrollbar-blue::-webkit-scrollbar-thumb { background-color: #6b809c; border-radius: 2em; }

    /*프린트 관련*/
    .print_lay{ width:fit-content; }
}