@charset "UTF-8";

/* **************************************** *
 * form
 * **************************************** */
/* txtinput-cmm */
.txtinput-cmm{display:inline-block; position:relative; vertical-align:middle; box-sizing:border-box}
.txtinput-cmm input{
    position:relative; width:100%; height:40px; margin:0; padding:0 8px;
    text-align:left; border:1px solid #C5C6CA; font-size:14px; font-weight:normal; letter-spacing:-0.5px; color:#202020; background:#fff; border-radius:4px; box-sizing:border-box
}
.txtinput-cmm input[disabled]{background:#eeeeee; color:#b4b4b4}
.txtinput-cmm input[readonly]{background:#f5f5f5}
.txtinput-cmm.search input{padding-right:30px}
.txtinput-cmm.search .btn-search{display:block; font-size:16px; position:absolute; right:1px; top:1px; width:30px; height:38px; margin:0; padding:0; line-height:38px; text-align:center; color:#808080; border:0; font-size:18px; border-left:1px solid #eaeaea; background:#fff; border-radius:0 4px 4px 0; cursor:pointer}
.txtinput-cmm.delete input{padding-right:30px}
.txtinput-cmm.delete .btn-delete{display:block; font-size:16px; position:absolute; right:0; top:0; width:30px; height:36px; margin:0; padding:0; line-height:38px; text-align:center; color:#808080; border:0; font-size:18px; border-left:1px solid #eaeaea; background:#fff; border-radius:0; cursor:pointer}
.txtinput-cmm.dateinput input{width:135px}
.txtinput-cmm.dateinput .ui-datepicker-trigger
{
    display:block;
    position:absolute;
    right:1px;
    top:4px;
    width:30px;
    height:30px;
    margin:0;
    padding:0;
    border:0;
    background:url('../images/common/datepicker.png') 50% 8px no-repeat;
    background-size:17px 15px;
    cursor:pointer
}
.txtinput-cmm.eye .eye-toggle{display:flex; align-items:center; justify-content:center; position:absolute; right:1px; top:6px; width:30px; height:30px; margin:0; padding:0; background:none; border:0; cursor:pointer}
.txtinput-cmm.eye .eye-toggle:after{content:'\ecb4'; color:#808080; font-size:16px; font-family:remixicon}
.txtinput-cmm.eye .eye-toggle.active:after{content:'\ecb6'}

/* select-cmm */
.select-cmm{display:inline-block; position:relative; vertical-align:middle; box-sizing:border-box}
.select-cmm select
{
    position:relative;
    width:100%;
    height:40px;
    margin:0;
    padding-left:8px;
    padding-right:30px;
    color:#303030;
    font-size:14px;
    border:1px solid #c5c6ca;
    letter-spacing:-0.5px;
    font-family:'ptd', 'sans-serif';
    font-weight:300;
    background:#fff url("../images/common/select.png") right 50% no-repeat;
    background-size:30px 36px; 
    appearance:none;
    cursor:pointer;
    border-radius:4px;
    box-sizing:border-box;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}
.select-cmm select[disabled]{background:#eeeeee url("../images/common/select.png") right 50% no-repeat; background-size:30px 36px; color:#b4b4b4}
.select-cmm select[readonly]{background:#f5f5f5 url("../images/common/select.png") right 50% no-repeat; background-size:30px 36px;}
.select-cmm option{line-height:24px; font-size:14px}
.select-cmm select::-ms-expand{display:none}

/* multi-select-cmm */
.multi-select-cmm{display:inline-block; position:relative; vertical-align:middle; box-sizing:border-box}
.multi-select-cmm > select{display:none}
.custom-combobox{display:flex; align-items:center}
.custom-combobox-input {
	position:relative;
	width:100%;
	height:40px;
	margin:0;
	padding:0 8px;
	border:1px solid #c5c6ca !important;
	border-right:none !important;
	background:#fff !important;
	color:#303030;
	font-family:ptd, sans-serif !important;
	font-size:15px;
	font-weight:300;
	font-size:15px;
	appearance:none;
	white-space:nowrap;
	text-overflow: ellipsis;
	overflow:hidden;
}
.custom-combobox-toggle {
	flex:none;
	width:31px;
	height:42px;
	border:1px solid #c5c6ca !important;
	border-left:none !important;
	background: #fff url(../images/common/select.png) 50% 50% no-repeat !important;
    background-size: 30px 36px !important;
}
.custom-combobox-toggle:hover {
	background: #fff url(../images/common/select.png) 50% 50% no-repeat !important;
    background-size: 30px 36px !important;
}
.custom-combobox-toggle span{display:none}

/* check-cmm */
.check-cmm{display:inline-block; position:relative; min-width:18px; min-height:18px; padding-right:1px; vertical-align:middle; overflow:hidden}
.check-cmm input[type="checkbox"]{position:absolute; top:-100px; left:0; margin:0}
.check-cmm .check{display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:18px; height:18px; background-color:#fff; border:2px solid #C5C6CA; border-radius:2px; cursor:pointer; box-sizing:border-box}
.check-cmm input[type='checkbox']:checked ~ .check{background-color:#3e55e1; border:2px solid #3e55e1}
.check-cmm input[type='checkbox']:checked ~ .check:after{content:'\eb7b'; color:#fff; font-size:16px; font-family:remixicon}
.check-cmm .txt{display:flex; align-items:center; line-height:1em; padding-top:2px; padding-left:23px; font-size:15px; color:#505050; letter-spacing:-0.5px; font-weight:normal; cursor:pointer}

.check-cmm input[disabled] + .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.check-cmm input[disabled]:checked ~ .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.check-cmm input[disabled]:checked ~ .check:after{color:#A5A5A5}

.check-cmm input[readonly] + .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.check-cmm input[readonly]:checked ~ .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.check-cmm input[readonly]:checked ~ .check:after{color:#A5A5A5}

/* radio-cmm */
.radio-cmm{display:inline-block; position:relative; min-width:18px; min-height:18px; padding-right:1px; vertical-align:middle; overflow:hidden}
.radio-cmm input[type="radio"]{position:absolute; top:-100px; left:0; margin:0}
.radio-cmm .check{display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:18px; height:18px; background-color:#fff; border:2px solid #C5C6CA; border-radius:50%; cursor:pointer; box-sizing:border-box}
.radio-cmm .check:after{color:#fff; font-size:18px; font-family:remixicon}
.radio-cmm input[type='radio']:checked + .check{background-color:#3e55e1; border:2px solid #3e55e1}
.radio-cmm input[type='radio']:checked + .check:after{content:'\eb7b'; color:#fff; font-size:16px; font-family:remixicon}
.radio-cmm .txt{display:flex; align-items:center; line-height:1em; padding-top:2px; padding-left:23px; font-size:15px; color:#505050; letter-spacing:-0.5px; font-weight:normal; cursor:pointer}

.radio-cmm input[disabled] + .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.radio-cmm input[disabled]:checked + .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.radio-cmm input[disabled]:checked + .check:after{color:#A5A5A5}

.radio-cmm input[readonly] + .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.radio-cmm input[readonly]:checked + .check{background-color:#E9E9E9; border:2px solid #E9E9E9}
.radio-cmm input[readonly]:checked + .check:after{color:#A5A5A5}



.login-int .id-login .login-saveid{margin-top:10px}
.login-int .id-login .login-saveid .check-login{display:inline-block; position:relative; min-width:18px; min-height:18px; padding-right:1px; vertical-align:middle; overflow:hidden}
.login-int .id-login .login-saveid .check-login input[type="checkbox"]{position:absolute; top:-100px; left:0; margin:0}
.login-int .id-login .login-saveid .check-login .check{display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; width:18px; height:18px; background-color:rgba(255,255,255,.4); border-radius:2px; cursor:pointer}
.login-int .id-login .login-saveid .check-login .check:after{content:'\eb7b'; color:rgba(255,255,255,.2); font-size:18px; font-family:remixicon}
.login-int .id-login .login-saveid .check-login input[type='checkbox']:checked + .check:after{color:rgba(255,255,255,1); background-color:rgba(62,85,225,1)}
.login-int .id-login .login-saveid .check-login .txt{display:flex; align-items:center; line-height:1em; padding-left:23px; padding-top:2px; font-size:14px; color:#fff; letter-spacing:-0.8px; font-weight:normal; cursor:pointer}

/* textarea-cmm */
.textarea-cmm{display:inline-block; position:relative; background:#fff; border:1px solid #C5C6CA; border-radius:4px}
.textarea-cmm textarea{display:block; width:100%; border:0; padding:15px; color:#202020; font-size:15px; outline:none; border-radius:4px; box-sizing:border-box; resize:vertical}
.textarea-cmm textarea[disabled]{background:#eeeeee}
.textarea-cmm textarea[readonly]{background:#f5f5f5}

/* textarea-cmm-counter */
.textarea-cmm-counter{display:flex; align-items:center; margin-top:20px}
.textarea-cmm-counter span{line-height:1em; color:#808080; font-size:15px; letter-spacing:-0.5px}
.textarea-cmm-counter .num{color:#3382e9}

/* file */
.fileupload-cmm{display:inline-block; position:relative; padding-left:76px; vertical-align:middle; box-sizing:border-box}
.fileupload-cmm label
{
	display:flex; align-items:center; position:absolute; left:0; top:0; height:40px; margin:0; padding:0 15px;
    color:#fff; text-align:center; font-size:14px; letter-spacing:-0.5px; border-radius:4px 0 0 4px; cursor:pointer; font-weight:normal; letter-spacing:0;
	background:#1F375F; box-sizing:border-box;
}
.fileupload-cmm label input{position:absolute; width:0; height:0; overflow:hidden}
.fileupload-cmm div{position:relative; height:40px; border:1px solid #C5C6CA; vertical-align:middle; border-radius:0 4px 4px 0; box-sizing:border-box}
.fileupload-cmm input{width:100%; height:38px; margin:0; padding:0; border:0; text-align:left; font-size:14px; text-indent:8px; color:#202020; background:#fff; border-radius:0 4px 4px 0; box-sizing:border-box}
.fileupload-cmm input[disabled]{background:hsl(0, 0%, 93%)}
.fileupload-cmm input[readonly]{background:#f5f5f5}


/* fileupload-cmm-counter */
.fileupload-cmm-counter{display:flex; align-items:center; margin-top:20px}
.fileupload-cmm-counter span{flex:none; line-height:1em; color:#808080; font-size:15px; letter-spacing:-0.5px}
.fileupload-cmm-counter .num{color:#3382e9}


/* **************************************** *
 * writing
 * **************************************** */
/* writing-ty1 */
.writing-ty1{position:relative; margin-top:-1px}
.writing-ty1 .writing-list{padding:20px 0; border-top:1px solid #dadada; border-bottom:1px solid #dadada}
.writing-ty1 .writing-list:after{content:''; display:block; clear:both}
.writing-ty1 .writing-list > li{display:flex; align-items:center; position:relative; padding:6px 0; min-height:40px; box-sizing:border-box}
.writing-ty1 .writing-list > li:last-child{border-bottom:none}

.writing-ty1 .writing-list li.col2 .col-box{display:flex; align-items:center; flex:1}
.writing-ty1 .writing-list li.col2 .col-box.none{flex:none}
.writing-ty1 .writing-list li.col2 .col-box > li{display:flex; align-items:center; flex:1; position:relative; min-width:50%; max-width:50%; min-height:32px; box-sizing:border-box}
.writing-ty1 .writing-list li.col2 .col-box > li.none{flex:none; min-width:auto; max-width:auto}
.writing-ty1 .writing-list li.col2 .col-box > li:nth-child(1){padding-right:20px}
.writing-ty1 .writing-list li.col2 .col-box > li:nth-child(2){padding-left:20px}
.writing-ty1 .writing-list li.col2 .col-box > li:first-child:nth-last-child(1){max-width:50%}

.writing-ty1 .writing-list li.col2 .col-box:nth-child(1){padding-right:10px}
.writing-ty1 .writing-list li.col2 .col-box:nth-child(2){padding-left:10px}

.writing-ty1 .writing-tit{display:flex; align-items:center; padding:0 10px}
.writing-ty1 .writing-tit .col-row{display:flex; flex-direction:column; flex:auto}
.writing-ty1 .writing-tit .col-row .row{display:flex; align-items:center}
.writing-ty1 .writing-tit .tit{display:inline-block; line-height:1.4em; font-size:15px; letter-spacing:-0.8px; color:#202020; padding-right:3px; font-weight:300}
.writing-ty1 .writing-tit .require-cmm{margin-left:2px}

.writing-ty1 .writing-cont{display:flex; align-items:center; flex:auto; width:100%; min-height: 32px;}
.writing-ty1 .writing-cont .tit{display:inline-block; font-size:15px; letter-spacing:-0.8px; color:#202020; font-weight:300}
.writing-ty1 .writing-cont .col-row{display:flex; flex-direction:column; flex:auto}
.writing-ty1 .writing-cont .col-row .row{display:flex; align-items:center}
.writing-ty1 .writing-cont .cont-txt .txt{font-size:15px; letter-spacing:-0.5px; color:#202020; font-weight:normal; vertical-align:middle}

.writing-ty1 .col-flex{flex:1} 
.writing-ty1 .col-flex.none{flex:none}
.writing-ty1 .Daterange.col-flex{display:flex; align-items:center; flex:1}

.writing-ty1 .writing-list > li.other-row{background:#f8f8f8}
.writing-ty1 .writing-list > li.start-top{align-items:flex-start}

.writing-ty1 .writing-list > li.column-row{flex-direction:column; align-items:normal}
.writing-ty1 .writing-list > li.column-row .writing-cont{padding:15px 10px}

.writing-ty1 .writing-list > li.align-top{align-items:flex-start}
.writing-ty1 .writing-list > li .writing-tit{margin-top:2px}

.writing-ty1.minimal .writing-list{padding:5px 0}

/* writing-ty2 */
.writing-ty2 .head{position:relative; border-top:1px solid #dadada; border-bottom:1px solid #dadada; background-color:#f5f5f5}
.writing-ty2 .head li{display:flex}
.writing-ty2 .head li > div{display:flex; align-items:center; justify-content:center; position:relative; height:48px; padding:0 10px; box-sizing:border-box}
.writing-ty2 .head li > div:after{content:''; position:absolute; right:0; top:0; width:1px; height:100%; background-color:#dadada; z-index:1}
.writing-ty2 .head li > div:last-child:after{display:none}
.writing-ty2 .head li > div > span{line-height:1.2em; letter-spacing:-0.8px; color:#505050; font-weight:300; font-size:15px; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.writing-ty2 .head li > div > span.column{white-space:normal; text-overflow:ellipsis; overflow:hidden}

.writing-ty2 .body > li{display:flex; position:relative; border-bottom:1px solid #ebebeb; box-sizing:border-box}
.writing-ty2 .body > li > div{display:flex; align-items:center; justify-content:center; position:relative; min-height:54px; padding:12px 10px; text-align:center; box-sizing:border-box}
.writing-ty2 .body > li > div.tleft{justify-content:flex-start}
.writing-ty2 .body > li > div.center{justify-content:center}
.writing-ty2 .body > li > div.tright{justify-content:flex-end}

.writing-ty2 .body > li{display:flex; position:relative; border-bottom:1px solid #ebebeb; box-sizing:border-box}
.writing-ty2 .body > li > form{display:flex; position:relative; width:100%}
.writing-ty2 .body > li > form > div{display:flex; align-items:center; justify-content:center; position:relative; min-height:54px; padding:12px 10px; text-align:center; box-sizing:border-box}
.writing-ty2 .body > li > form > div.tleft{justify-content:flex-start}
.writing-ty2 .body > li > form > div.center{justify-content:center}
.writing-ty2 .body > li > form > div.tright{justify-content:flex-end}

.writing-ty2 .body > li .col-tit
{
    display:none;
    margin-right:8px;
    padding:6px 12px;
    font-size:15px;
    font-weight:normal;
    line-height:145%;
    letter-spacing:-1px;
    color:#808080;
    background:#fff;
    border:1px solid #ebebeb;
    border-radius:200px;
    box-sizing:border-box
}
.writing-ty2 .body > li .col-cont{display:contents}
.writing-ty2 .body > li .col-cont .cont-link,
.writing-ty2 .body > li .col-cont .cont-txt
{
    display:-webkit-box;
    line-height:1.2em;
    letter-spacing:-0.2px;
    font-size:15px;
    word-wrap:break-word;
    text-overflow:ellipsis;
    word-break:keep-all;
    overflow:hidden;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}

.writing-ty2 .body > li .col-cont .cont-link{color:#445c78; font-weight:300; transition:all .20s ease}
.writing-ty2 .body > li .col-cont .cont-link:hover{color:#3382e9}
.writing-ty2 .body > li .col-cont .cont-txt{color:#505050; font-weight:normal}
.writing-ty2 .body > li .col-cont .radio-cmm + .radio-cmm{margin-left:8px}

.writing-ty2 .nodata{min-height:90px; margin-top:-1px; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb}

.writing-ty2 .body li.selected{background-color:#f2f5f9}
.writing-ty2 .body li.total{background-color:#f2f5f9}

.writing-ty2 .valid-error{background-color:#fae2e7; border-radius:4px; box-shadow:0 0 0 1px rgb(241 15 58 / 35%)}

.writing-ty2 .txtinput-cmm.dateinput input{width:115px}


/* **************************************** *
 * viewting
 * **************************************** */
/* viewting-ty1 */
.viewting-ty1{position:relative; margin-top:-1px}
.viewting-ty1 .viewting-list{padding:10px 0; border-top:1px solid #dadada; border-bottom:1px solid #dadada}
.viewting-ty1 .viewting-list:after{content:''; display:block; clear:both}
.viewting-ty1 .viewting-list > li{display:flex; align-items:center; position:relative; padding:4px 0; min-height:40px; box-sizing:border-box}
.viewting-ty1 .viewting-list > li:last-child{border-bottom:none}

.viewting-list.bdt-none{border-top:none}
.viewting-list.bdb-none{border-bottom:none}

.viewting-ty1 .viewting-list li.col2 .col-box{display:flex; align-items:center; flex:1}
.viewting-ty1 .viewting-list li.col2 .col-box.none{flex:none}
.viewting-ty1 .viewting-list li.col2 .col-box > li{display:flex; align-items:center; flex:1; position:relative; min-width:50%; max-width:50%; min-height:40px; box-sizing:border-box}
.viewting-ty1 .viewting-list li.col2 .col-box > li.none{flex:none; min-width:auto; max-width:auto}
.viewting-ty1 .viewting-list li.col2 .col-box > li:first-child:nth-last-child(1){max-width:50%}

.viewting-ty1 .viewting-list > li.col2 .col-box:nth-child(1){padding-right:10px}
.viewting-ty1 .viewting-list > li.col2 .col-box:nth-child(2){padding-left:10px}

.viewting-ty1 .viewting-tit{display:flex; align-items:center; min-height:100%; padding:11px 15px; background-color:#f5f5f5; border-radius:4px; box-sizing:border-box}
.viewting-ty1 .viewting-tit .col-row{display:flex; flex-direction:column; flex:auto}
.viewting-ty1 .viewting-tit .col-row .row{display:flex; align-items:center}
.viewting-ty1 .viewting-tit .tit{display:inline-block; font-size:15px; letter-spacing:-0.8px; color:#202020; padding-right:3px; font-weight:300}
.viewting-ty1 .viewting-tit .require-cmm{margin-left:2px}

.viewting-ty1 .viewting-cont{display:flex; align-items:center; flex:auto; padding:0 12px; box-sizing:border-box}
.viewting-ty1 .viewting-cont .tit{display:inline-block; font-size:15px; letter-spacing:-0.8px; color:#202020; font-weight:300}
.viewting-ty1 .viewting-cont .col-row{display:flex; flex-direction:column; flex:auto; gap:5px}
.viewting-ty1 .viewting-cont .col-row .row{display:flex; align-items:center}
.viewting-ty1 .viewting-cont .cont-txt .txt{font-size:15px; letter-spacing:-0.5px; color:#202020; font-weight:normal; word-break:keep-all}

.viewting-ty1 .col-flex{flex:1} 
.viewting-ty1 .col-flex.none{flex:none}

.viewting-ty1 .viewting-list > li.start-top{align-items:flex-start}
.viewting-ty1 .viewting-list > li.align-stretch{align-items:stretch}

.viewting-ty1 .viewting-list > li.column-row{flex-direction:column; align-items:normal}
.viewting-ty1 .viewting-list > li.column-row .writing-cont{padding:15px 10px}

.viewting-ty1 .viewting-list > li.align-top{align-items:flex-start}

.viewting-ty1 .spliter-toggle{display:flex; align-items:center; justify-content:center; height:2px; margin:23px 0; background-color:#3382e9}
.viewting-ty1 .spliter-toggle-view{display:none; padding:10px 0}
.viewting-ty1 .spliter-toggle-view.active{display:block}

.viewting-ty1 .score-item-num{display:flex; align-items:center; flex-wrap:wrap; margin-left:-30px; margin-top:-5px}
.viewting-ty1 .score-item-num .num-box{width:25%}
.viewting-ty1 .score-item-num.col5 .num-box{width:20%}
.viewting-ty1 .score-item-num .inner{display:flex; align-items:center; flex-direction:column; min-height:54px; margin-left:30px; margin-top:5px; padding:8px 10px; text-align:center; border:1px solid #dadada; border-radius:4px; box-sizing:border-box}
.viewting-ty1 .score-item-num .num-box .tit,
.viewting-ty1 .score-item-num .num-box .cont{line-height:1.2em; font-size:14px; font-weight:normal; letter-spacing:-0.8px}
.viewting-ty1 .score-item-num .num-box .tit{color:#505050}
.viewting-ty1 .score-item-num .num-box .cont{margin-top:3px; color:#202020}

.viewting-ty1 .filedown-box{margin-top:0; border-radius:4px}

.viewting-ty1 .system-ingration{display:flex; flex-direction:column; gap:5px}
.viewting-ty1 .system-ingration .ingration-box{gap:4px; display:flex; align-items:center; min-height:40px}