@charset "utf-8";

/* ************ common object ************ */
/* colors */
.colPri{color: #1D2B36;}
.colBlue{color: #228BE5;}
.colRed{color: #CA3761;}
.colGreen{color: #40C057;}
.colOrange{color: #FF922B;}
.colGray{color: #868E96;}
/* button */
[class*="btn_"]{display:inline-block; box-sizing: border-box; border-radius: 4px; font-size: 1.2rem; font-weight: normal; line-height: 29px; vertical-align: bottom; text-align: center; transition:all 0.3s ease;}
[class*="btn_m"]{width: 100px; height: 30px;}
[class*="btn_s"]{width: 60px; height: 18px; margin:1px 0; border-radius: 2px; font-size: 1.1rem; font-weight: normal; line-height: 18px;}
[class*="btn_"].wide{width: auto; padding: 0 15px;}
[class*="btn_s"].wide{padding: 0 8px;}
[class*="btn_"].basic{background:#fff; border: 1px solid #6C7179; color: #2D3542;}
[class*="btn_"].basic:hover{background:#F1F3F5;}
[class*="btn_"].basic.disable{background: #F1F3F5; border-color:#CED4DA; color: #ADB5BD;}
[class*="btn_"].colPri{background: #1D2B36;}
[class*="btn_"].colPri:hover{background: #0C0E0F;}
[class*="btn_"].colBlue{background: #228BE5;}
[class*="btn_"].colBlue:hover{background: #1971C2;}
[class*="btn_"].colRed{background: #CA3761;}
[class*="btn_"].colRed:hover{background: #AA0F3C;}
[class*="btn_"].colGreen{background: #40C057;}
[class*="btn_"].colGreen:hover{background: #2F9E44;}
[class*="btn_"].colOrange{background: #FF922B;}
[class*="btn_"].colOrange:hover{background: #F76707;}
[class*="btn_"].colGray{background: #868E96;}
[class*="btn_"].colGray:hover{background: #495057;}
[class*="btn_"][class*="col"]{color: #fff;}
[class*="btn_"][class*="col"].disable{background: #C4C4C4;}
.btn_s.del{position: relative; width: 20px; height: 20px; padding: 0; margin: 0 5px; background: #fff; border: 1px solid #fff; color: #2D3542; vertical-align: -5px;}
.btn_s.del:hover{border-color: #868E96;}
.btn_s.del::before, .btn_s.del::after{content: ''; position: absolute; background: #CA3761; border-radius: 1px; transform: rotate(45deg);}
.btn_s.del::before{left: 8px; top: 4px; width: 2px; height: 10px;}
.btn_s.del::after {left: 4px; top: 8px; width: 10px; height: 2px;}

.btn_s.preview{position: relative; width: 20px; height: 20px; padding: 2px; margin: 0 5px; background: #fff; border: 1px solid #fff; color: #2D3542; vertical-align: -5px;}
.btn_s.preview:hover{border-color: #868E96;}

/* btnset */
[class*="btnset"]{display:flex; align-items: center; margin: 20px 0 30px;}
[class*="btnset"] [class*="btn_"]{margin: 0 2px;}
[class*="btnset"] p{font-size: 1.3rem; font-weight: 700;}
.btnset_c{justify-content:center;}
.btnset_l{justify-content:flex-start;}
.btnset_r{justify-content:flex-end;}
.btnset_t{justify-content:flex-start; margin: 6px 0;}
.btnset_t > *:first-child{display: flex; justify-content: flex-start; flex: 1; margin: 0 5px;}
.btnset_t > *:first-child > *{margin: 0 5px 0 0;}

/* page navi */
.pageNav{margin-top: 20px; text-align: center;}
.pageNav > *{display:inline-block; width: 24px; height: 24px; box-sizing: border-box; border:1px solid #DFDFDF; border-radius: 2px; color:#666; font-size: 1.1rem; line-height: 24px; text-align: center; transition:all 0.3s ease; }
.pageNav a:hover{border-color: #666666;}
.pageNav span{border-color: #495057; background: #495057; color: #fff;}
.pageNav [class*="nv_"]{position: relative; text-indent: -9999px;}
.pageNav [class*="nv_"]:after, .pageNav [class*="nv_"]:before{content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border: 2px solid #495057; border-width: 1px 1px 0 0; transform: rotate(45deg);}
.pageNav .nv_pv{ margin-right: 15px; }
.pageNav .nv_nx{ margin-left: 15px; }
.pageNav .nv_pv:before, .pageNav .nv_nx:before{display: none;}
.pageNav .nv_st:before{ left: 8px; transform: rotate(-135deg); }
.pageNav .nv_st:after { left: 12px;transform: rotate(-135deg); }
.pageNav .nv_pv:after { left: 9px; transform: rotate(-135deg); }
.pageNav .nv_nx:after { left: 5px; }
.pageNav .nv_ed:before{ left: 4px; }
.pageNav .nv_ed:after { left: 8px; }

/* input - text, textarea, select */
input, textarea, select {display: block; box-sizing: border-box; width: 100%; height: 30px; padding: 0 5px; background: #fff; border: 1px solid #AAA; border-radius: 4px; color: #1D2B36; font-size: 1.2rem; font-weight: 400; transition:all 0.3s ease;}
select{padding-right: 25px;}
input::placeholder, textarea::placeholder{font-size: 1.2rem; color: #AAA;} input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color: #AAA;} input:-ms-input-placeholder, textarea:-ms-input-placeholder{color: #AAA;}
input:hover, textarea:hover, select:hover{border-color: #666;}
input:focus, textarea:focus, select:focus{background: #fff; border-color: #3B86FF; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);}
input:disabled, textarea:disabled, select:disabled{background: #F1F3F5; border-color: #CED4DA; /*color: #ADB5BD;*/ opacity:1;}
input:read-only {background: #F1F3F5;}
textarea{height: 130px; padding:5px 10px; overflow-y: auto; line-height: 1.5em;}
select{-webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand {display: none;}
select[hidden]{display: none;}
select:not(:focus):invalid{color: #AAA;}
.customSelect{position:relative; display: block;}
.customSelect::before, .customSelect::after{content:''; box-sizing: border-box; position:absolute; width: 6px; height: 6px; border: 2px solid #a6adb4; border-width: 2px 2px 0 0; right: 14px;}
.customSelect::before{transform: rotate(-45deg); top: 50%; margin-top: -6px; }
.customSelect::after {transform: rotate(135deg); bottom: 50%; margin-bottom: -6px;}
.stError input, .stError select, .stError textarea{border-color: #FF6565 !important;}
[class*="form"].stError .noti{color: #FF6565; font-weight: 800;}
input.sm, textarea.sm, select.sm {height: 18px; border-radius: 2px; font-size: 1.1rem; line-height: 18px;}
textarea.sm{height: 110px;}

/* input - check box, radio */
input[type="checkbox"], input[type="radio"] {position: absolute; left: -9999px; display: block; width: 0px; height: 0px; transition:none;}
input[type="checkbox"] + label, input[type="radio"] + label {display: inline-flex; align-items: center; font-size: 1.2rem; font-weight: 400;}
input[type="checkbox"] + label span, input[type="radio"] + label span {display: inline-block; width: 14px; height: 14px; margin-right: 4px; background: #fff; border: 2px solid #aaa; border-radius: 3px; vertical-align: -3px; transition:all 0.2s ease;}
input[type="checkbox"]:hover + label span, input[type="radio"]:hover + label span {border: 2px solid #1D2B36}
input[type="checkbox"] + label:hover span, input[type="radio"] + label:hover span {border: 2px solid #1D2B36}
input[type="checkbox"]:focus + label span, input[type="radio"]:focus + label span {border: 2px solid #1D2B36}
input[type="checkbox"]:checked + label span, input[type="radio"]:checked + label span {position: relative; border: 2px solid #1D2B36; background: #1D2B36;}
input[type="checkbox"]:checked + label span:before {content: ''; position: absolute; top: 1px; left: 1px; width: 7px; height: 3px; border: 1px solid #fff; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); transition:all 0.2s ease;}
input[type="radio"] + label span {border-radius: 9px; }
input[type="radio"]:checked + label span:before {content: ''; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; background: #fff; border-radius: 3px; transition:all 0.2s ease;}
/* form common */
mark.essntl{padding-left: 5px; color: #F76707;}
[class*="form"] .noti{margin-top:4px; padding: 0 10px; color: #666; font-size: 1.2rem; font-weight: 400; line-height: 1.3em;}
[class*="formCell"]{position:relative; display: inline-block; width: auto; color:#1D2B36; font-size: 1.2rem; font-weight: 400; vertical-align: top;}
[class*="formCell"] + h5{margin-left: 10px;}
.formCell1 {width: 1%;}   .formCell2 {width: 2%;}   .formCell3 {width: 3%;}   .formCell4 {width: 4%;}   .formCell5 {width: 5%;}   .formCell6 {width: 6%;}   .formCell7 {width: 7%;}   .formCell8 {width: 8%;}   .formCell9 {width: 9%;}   .formCell10 {width: 10%;}
.formCell11 {width: 11%;} .formCell12 {width: 12%;} .formCell13 {width: 13%;} .formCell14 {width: 14%;} .formCell15 {width: 15%;} .formCell16 {width: 16%;} .formCell17 {width: 17%;} .formCell18 {width: 18%;} .formCell19 {width: 19%;} .formCell20 {width: 20%;}
.formCell21 {width: 21%;} .formCell22 {width: 22%;} .formCell23 {width: 23%;} .formCell24 {width: 24%;} .formCell25 {width: 25%;} .formCell26 {width: 26%;} .formCell27 {width: 27%;} .formCell28 {width: 28%;} .formCell29 {width: 29%;} .formCell30 {width: 30%;}
.formCell31 {width: 31%;} .formCell32 {width: 32%;} .formCell33 {width: 33%;} .formCell34 {width: 34%;} .formCell35 {width: 35%;} .formCell36 {width: 36%;} .formCell37 {width: 37%;} .formCell38 {width: 38%;} .formCell39 {width: 39%;} .formCell40 {width: 40%;}
.formCell41 {width: 41%;} .formCell42 {width: 42%;} .formCell43 {width: 43%;} .formCell44 {width: 44%;} .formCell45 {width: 45%;} .formCell46 {width: 46%;} .formCell47 {width: 47%;} .formCell48 {width: 48%;} .formCell49 {width: 49%;} .formCell50 {width: 50%;}
.formCell51 {width: 51%;} .formCell52 {width: 52%;} .formCell53 {width: 53%;} .formCell54 {width: 54%;} .formCell55 {width: 55%;} .formCell56 {width: 56%;} .formCell57 {width: 57%;} .formCell58 {width: 58%;} .formCell59 {width: 59%;} .formCell60 {width: 60%;}
.formCell61 {width: 61%;} .formCell62 {width: 62%;} .formCell63 {width: 63%;} .formCell64 {width: 64%;} .formCell65 {width: 65%;} .formCell66 {width: 66%;} .formCell67 {width: 67%;} .formCell68 {width: 68%;} .formCell69 {width: 69%;} .formCell70 {width: 70%;}
.formCell71 {width: 71%;} .formCell72 {width: 72%;} .formCell73 {width: 73%;} .formCell74 {width: 74%;} .formCell75 {width: 75%;} .formCell76 {width: 76%;} .formCell77 {width: 77%;} .formCell78 {width: 78%;} .formCell79 {width: 79%;} .formCell80 {width: 80%;}
.formCell81 {width: 81%;} .formCell82 {width: 82%;} .formCell83 {width: 83%;} .formCell84 {width: 84%;} .formCell85 {width: 85%;} .formCell86 {width: 86%;} .formCell87 {width: 87%;} .formCell88 {width: 88%;} .formCell89 {width: 89%;} .formCell90 {width: 90%;}
.formCell91 {width: 91%;} .formCell92 {width: 92%;} .formCell93 {width: 93%;} .formCell94 {width: 94%;} .formCell95 {width: 95%;} .formCell96 {width: 96%;} .formCell97 {width: 97%;} .formCell98 {width: 98%;} .formCell99 {width: 99%;} .formCell100 {width: 100%;}
h5{position:relative; display: inline-block; height: 30px; padding-left: 5px; color: #333333; font-size: 1.2rem; font-weight: 400; line-height: 30px;}
h5:before{content: ''; position: absolute; top:14px; left: 0px; width: 2px; height: 2px; background: #333333; border-radius: 1px;}
.cellChkbox{display: inline-block; height: 30px; margin-left: 5px; line-height: 30px;}

.formCell_mar_0 h5{ margin-bottom: 10px; padding:0; padding-left: 5px; font-size: var(--font-size-txtS); font-weight: 600; }
.formCell_mar_0{ margin-bottom: 0 !important;}



/* input - file */
[class*="formCell"] .cellFile {display: flex;}
[class*="formCell"] .cellFile input[type="text"] {flex: 1; margin-right: 4px;}
input[type="file"] { padding: 0; border: 0 none; }
/* input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 none; }
input[type="file"] + label { cursor: pointer; } */

.file_area{ text-align: left; line-height: 1.3em;}
.file_area h5{ padding:0; font-size: 1.3rem; font-weight: bold; }
.file_area h5::before{ display: none;}
.file_area li{ display: flex; margin-bottom: 5px; margin-left: 5px;}
.file_area li > svg{ flex-shrink: 0;}
.file_area li > span{ flex-shrink: 0; margin: 2px 5px; cursor: pointer; }
.file_area li a{ flex-basis: auto; color: #228BE5; word-break: break-all;}
.file_area li a:hover{ text-decoration: underline;}
.file_area li.remove a{ cursor: default; color:#666; text-decoration: line-through; }
.file_area li.remove a:hover{ text-decoration: line-through; }
.MultiFile-list {margin-left: 5px; line-height: 1.8em;}
.file_area + .MultiFile-wrap {margin-top: 10px; padding-top: 10px; border-top: 1px solid #DFDFDF ;}


/* tabs */
.tabs{height: 30px; border-bottom: 1px solid #CED4DA;}
.tabs li{ float: left;}
.tabs li:first-child{ border-left: 1px solid #CED4DA;}
.tabs li a{display: block; height: 30px; padding:0 20px; background: #F1F3F5; border: 1px solid #CED4DA; border-left: none; color: #666; font-size: 12px; line-height: 30px;}
.tabs li.on a{background: #fff; border-bottom: 1px solid #fff; border-top: 1px solid #1D2B36; color: #2D3542; font-weight: 700;}

/* icon */
[class*="ic_"] {position: relative; display:inline-block; overflow: hidden; text-indent: -9999px; margin-right: 3px; }
.ic_paperclip {width: 12px; height:13px; vertical-align: -2px;}
.ic_search {width: 14px; height: 14px; vertical-align: -3px;}
.ic_chatbubble {width: 14px; height: 13px; vertical-align: -2px;}
.ic_excltri {width: 16px; height: 14px; vertical-align: -3px;}
.ic_exclcir {width: 16px; height: 16px; vertical-align: -4px;}
.ic_save {width: 12px; height: 12px; vertical-align: -2px;}
.ic_enter {width: 12px; height: 13px; vertical-align: -3px;}
.ic_pencil {width: 12px; height: 12px; vertical-align: -2px;}
.ic_trash {width: 11px; height: 12px; vertical-align: -2px;}
.ic_certifi {width: 11px; height: 11px; vertical-align: -2px;}
.ic_refresh {width: 12px; height: 12px; vertical-align: -1px;}
.ic_refresh2 {width: 12px; height: 12px; vertical-align: -1px;}
.ic_fullsc {width: 18px; height: 18px; vertical-align: -1px;}
.ic_fullsc_exit {width: 18px; height: 18px; vertical-align: -1px;}
.ic_lock {width: 15px; height: 17px; vertical-align: -4px; margin: 0 6px; 0 0}
.ic_preview {width: 14px; height: 15px; fill: #1D2B36;}
.ic_ill_exam { width: 66px; height: 78px; fill: #1D2B36; }
.ic_lm_headset{ width: 23px; height: 20px; }
.ic_lm_user{ width: 17.5px; height: 20px; }
.ic_lm_pencil{ width: 21px; height: 21px; }
.ic_lm_question{ width: 21px; height: 23px; }
.ic_lm_textbox{ width: 20px; height: 20px; }
.ic_lm_bubbles{ width: 21px; height: 19px; }
.ic_lm_clipboard{ width: 18px; height: 20px; }
.ic_lm_docmulti{ width: 19px; height: 23px; }
.ic_lm_people{ width: 30px; height: 19px; }
.ic_close{width: 10px; height: 10px; vertical-align: -1px;}
.ic_close::before, .ic_close::after{content: ''; position: absolute; background: #2D3542; border-radius: 1px; transform: rotate(45deg);}
.ic_close::before{left: 4px; top: 0; width: 2px; height: 10px;}
.ic_close::after {left: 0; top: 4px; width: 10px; height: 2px;}
.ic_add{width: 10px; height: 10px; vertical-align: -1px;}
.ic_add::before, .ic_add::after{content: ''; position: absolute; background: #2D3542; border-radius: 1px; }
.ic_add::before{left: 4px; top: 0; width: 2px; height: 10px;}
.ic_add::after {left: 0; top: 4px; width: 10px; height: 2px;}
.ic_check{width: 12px; height: 12px; vertical-align: -1px;}
.ic_check::before{content: ''; position: absolute; top: 2px; left: 1px; width: 8px; height: 4px; border: 1px solid #2D3542; border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg); transition:all 0.2s ease;}
.ic_del{width: 11px; height: 11px; }
.ic_del::before, .ic_del::after{content: ''; position: absolute; background: #CA3761; border-radius: 1px; transform: rotate(45deg);}
.ic_del::before{left: 4px; top: 0; width: 3px; height: 11px;}
.ic_del::after {left: 0; top: 4px; width: 11px; height: 3px;}
[class*="ic_file"] {width:16px; height: 16px; background-image: url(../images/icon_file.png);}
.ic_file_excel  { background-position: 0 0; }
.ic_file_pdf    { background-position: -16px 0; }
.ic_file_gif    { background-position: -32px 0; }
.ic_file_jpg    { background-position: -48px 0; }
.ic_file_word   { background-position: -80px 0; }
.ic_file_zip    { background-position: -176px 0; }
.ic_file_txt    { background-position: -192px 0; }
.ic_file_mp3    { background-position: -128px 0; }
.ic_file_han    { background-position: -64px 0; }


/* notibox */
td [class*="notibox"] {margin: 10px 0 0;}
[class*="notibox"]{padding:10px 15px; border-width: 1px; border-style: solid; border-radius: 4px; text-align: left; font-size: 1.2rem; line-height: 1.5em;}
[class*="notibox"] h4{margin-bottom: 6px; font-size: 1.3rem; font-weight: 800;}
[class*="notibox"] p, [class*="notibox"] ul{margin-bottom: 4px;}
[class*="notibox"] li{position: relative; padding-left: 7px;}
[class*="notibox"] li:before{content: ''; position: absolute; top:8px; left: 0px; width: 2px; height: 2px; background: #333333; border-radius: 1px;}
.notibox_basic {background: #F1F3F5; border-color: #D7D8D8; color: #666;}
.notibox_ok {background: #FCFFF5; border-color: #A8C599; color: #1E561F;}
.notibox_no {background: #FFF6F6; border-color: #CF9999; color: #973937;}

/* noti line */
[class*="noti_"]{display:block; margin-top:4px; color: #666; font-size: 1.2rem; font-weight: 400; line-height: 1.3em;}
.noti_err{color: #FF6565; font-weight: 800;}
.noti_arti{color: #aaa; }

/* progress bar */
.prograssBar {display: flex; align-items: center; width: 100%;}
.prograssBar p {flex: 1; height: 10px; background-color: #ddd;}
.prograssBar p span {display: block; height: 100%; background-color: #40C057;}
.prograssBar em {width: 40px; margin-left: 6px; font-weight: 800; text-align: left;}

/* marking question */
[class*="marking_"] {position: relative; display: inline-block; width: 2px; height: 2px; background-color: red; vertical-align: middle;}
[class*="marking_"]::before {content: ''; position: absolute; }
.marking_o::before {left: -15px; top: -35px; width: 70px; height: 70px; border: 5px solid #CA3761; border-radius: 50%; }
.marking_x::before {left: 20px; top: -50px; width: 5px; height: 100px; background-color: #CA3761; transform: rotate(45deg); }



/* ************ layout ************ */
/* html, body{height: 100%;}
.wrap{display:table;width:100%; height: 100%; margin: 0;}
header, footer{position:relative; display: table-row; width: 100%; height: 1px; }
main{position:relative; display: table-row; width: 100%; height: 100%; min-height: 1px; background: #fff;} */

/* html, body{height: 100%; min-height: 100%;}
.wrap{display: flex; flex-direction: column; align-items: stretch; width:100%; height: 100%; min-height: 100%; margin: 0;}
header, footer{position:relative; width: 100%; }
header{height: 61px;}
footer{height: 54px;}
main{position:relative; flex: 1; width: 100%; background: #fff;} */

html, body{height: 100%;}
.wrap{display:table;width:100%; height: 100%; margin: 0;}
header, footer{position:relative; display: table-row; width: 100%; height: 1px; }
main{position:relative; display: table-row; width: 100%; min-height: 100%; background: #fff; }


/* 헤더영역*/
header{ position: relative; background: #fff;}
header > div{ position: absolute; right: 20px; top: 0; display: flex; align-items: center; height: 60px; font-size: 1.2rem; }
header > div > a{ margin-left: 10px; border-bottom: 1px solid #fff; color: #1D2B36; transition:all 0.3s ease;}
header > div > a:hover{ border-bottom: 1px solid #1D2B36;}
/* 헤더영역 - h1 */
header h1{ position: relative; display: flex; align-items: center; border-bottom: 1px solid #DFDFDF;}
header h1 strong{ display: block; width: 250px; height: 60px; background-repeat: no-repeat; background-position: center; text-indent: -9999px; overflow: hidden;}
header h1 span{display:block; color: #1D2B36; font-size: 1.6rem; font-weight: 800;}
/* 푸터영역 */
footer{ background: #0F1922; color: #fff; font-size: 1.2rem; font-weight: 800; text-align: center; line-height: 1.3em;}
footer address{display: block; padding-bottom: 12px; opacity: .6; font-size: 1.1rem; font-weight: 400;}
footer span{display: block; padding-top: 12px; opacity: .6;}
/* main */
main{display: flex; justify-content: left; align-items: stretch;}
main aside, main article{position: relative; min-height: calc( 100vh - 121px ); }
main aside{width: 180px; background: #1D2B36;}
main article{flex: 1; padding:25px 20px; background: #fff; font-size: 1.8rem; word-break: break-all;}
main article section{margin-bottom: 20px; font-size: 1.2rem; line-height: 30px;}
/* main titles */
.titleBox { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px;}
.titleBox h2{ color:#1D2B36; font-size: 3rem; font-weight: 800; }
.titleBox .nav{ font-size: 1.2rem; }
.titleBox .nav a{ color: #666; }
.titleBox .nav a{ color: #666; }
.titleBox .nav strong{ font-weight: 700; }
.titleBox .nav > *:before{content: '>'; padding: 0 8px; color: #AAA; font-size: 1.0rem; font-weight: 400;}
.titleBox .nav > *:first-child:before{display: none;}
section h3{color: #1D2B36; font-size: 1.4rem; font-weight: 800;}
section h3:before{content: ''; display: inline-block; width: 3px; height: 3px; margin-right: 5px; border-radius: 1.5px; background: #1D2B36; vertical-align: 3px;}
/* main tree */
section.columnTwo{ display: flex; align-items: flex-start; }
section.columnTwo > div:nth-child(1){ width: 300px; }
section.columnTwo > div:nth-child(2){ flex: 1; margin-left: 20px; }
.treeWrap{padding: 10px; background-color:#F1F3F5; border:1px solid #CED4DA;}
.treeWrap .treeScroll{min-height: 320px; padding: 10px; background-color:#fff; border:1px solid #1D2B36; font-size: 1.2rem; line-height: 1.5em; overflow-y: scroll; overflow-x: hidden;}
/* class list */
section.columnTwo.classList > div:nth-child(1){ width: 350px; }
section.columnTwo.classList > div:nth-child(1) > div:nth-child(1){ display: flex; justify-content: space-between; margin-bottom: 10px; }
section.columnTwo.classList > div:nth-child(1) > div:nth-child(1) button{ flex: 1; margin-left: 5px;}
section.columnTwo.classList > div:nth-child(1) > div:nth-child(1) button:first-child{ margin-left: 0;}
section.columnTwo.classList > div:nth-child(1) > div:nth-child(2){ max-height: 95vh; padding: 20px 10px 0; border:1px solid #1D2B36; overflow-y: auto; }
.classList section.accbox h3 a { padding-right: 35px; }
.classList section.accbox.on { padding-bottom: 10px; }
.classList section.accbox.on .panel { padding:15px; padding-bottom: 5px; }
.classList .classList_item { padding: 0 10px 10px; border:1px solid #aaa; border-radius: 4px; transition:all 0.2s ease;}
.classList .classList_item + .classList_item { margin-top: 5px; }
.classList .classList_item h4 { width: calc( 100% + 20px ); height: 35px; margin-left: -10px; padding: 0 10px; background: #f9f9f9; border-bottom: 1px solid #aaa; border-radius: 4px 4px 0 0; font-size: 1.3rem; font-weight: 600; line-height: 35px;}
.classList .classList_item dl { margin: 10px 0; text-align: center; line-height: 1.8em; }
.classList .classList_item dl dt { font-size: 1.3rem;}
.classList .classList_item ul { display: flex; justify-content: space-between; }
.classList .classList_item ul + ul { margin-top: 5px; }
.classList .classList_item ul li { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 5px; padding: 6px 0; flex-grow: 1; flex-basis: 0; border: 1px solid #DFDFDF; border-radius: 4px; line-height: 1.5em; }
.classList .classList_item ul li:last-child { margin-right: 0;}
.classList .classList_item ul li strong { font-size: 1.4rem;}
.classList .classList_item:hover { border-color: #1D2B36; cursor: pointer; }
.classList .classList_item.on { border-color: #1D2B36; box-shadow: 5px 5px 15px rgba(0,0,0,.5); cursor: default; }
.classList .classList_item dl dt,
.classList .classList_item dl dd,
.classList section.accbox h3 a,
.classList .classList_item h4 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }


/* ************ aside menu ************ */
nav {font-size: 1.3rem; font-weight: 700;}
nav ul > li li{padding-left: 20px;}
nav ul > li > ul > li > a{font-size: 1.2rem; font-weight: 400;}
nav ul > li > ul > li ul a{color: #666666;}
nav ul > li > ul{display: none;}
nav ul > li li::before{content: ''; position: absolute; width: 6px; height: 5px; margin:12px 0 0 4px; border: 1px solid #aaa; border-width: 0 0 1px 1px; z-index: 1;}
nav ul > li > ul > li li::before{border: 1px solid #666; border-width: 0 0 1px 1px;}
nav ul li a{ display:block; padding-left: 20px; color: #aaa; height: 30px; line-height: 30px;}
nav ul li a:after {content: ''; position: absolute; right: 20px; width: 5px; height: 5px; margin-top:-20px; border: 2px solid #aaa; border-width: 1px 1px 0 0; transform: rotate(45deg);}
nav ul li.on > a:after {border-color: #fff; transform: rotate(135deg);}
nav ul li a:only-child:after {display: none;}
nav ul li a > span{ position: relative; display: block; white-space:nowrap; word-break: keep-all;}
nav ul li a:before{content: ''; position: absolute; left: 0; width: 100%; height: 29px; border-bottom: 1px solid rgba(246,246,246,.1); transition:all 0.2s ease; }
nav ul li a:hover:before{background: rgba(255, 255, 255, .1)}
nav ul > li.on{background: #0F1922;}
nav > ul > li.on > a{color: #fff;}
nav ul > li.on > ul{display: block;}
nav ul li.sel > a{ color: #fff;}
nav ul li.sel > a::before{ background: rgba(34,139,229,0.5); }


/* ************ form search box ************ */
.formBox{padding:0 10px; background: #F1F3F5; border: 1px solid #CED4DA;}
.formBox .formRow{padding:15px;}
.formBox .formRow + .formRow{border-top: 1px solid #CED4DA;}


/* ************ tables ************ */
/* table{width:100%; color: #333; font-size: 1.2rem; border-top: 2px solid #1D2B36; border-bottom: 1px solid #1D2B36; border-collapse:separate; word-break: break-all; table-layout: fixed;}
table td, table th{position:relative; padding: 11px 10px; border-bottom: 1px solid #DFDFDF; text-align: center; vertical-align: middle; line-height: 1.5em;}
table thead th{border-bottom: 1px solid #1D2B36; font-weight: 800;}
table tbody > tr > th{background:#F9F9F9; border-left: 1px solid #aaa; border-right: 1px solid #aaa; font-weight: 800;}
table tbody > tr > th + th{border-left: none;}
table tbody > tr > th:last-child{border-right: none;}
table tbody > tr:last-child > td, table tbody > tr:last-child > th {border-bottom: none;}
table a{color: #FF922B; transition:all 0.2s ease;}
table .title{color: #228BE5; cursor: pointer;}
table .details > td{padding: 20px; background: #F1F3F5;}
table td.detail {padding: 20px;}
table table{background: #fff; border: 1px solid #1D2B36;}
table table thead th{border-bottom: 1px solid #aaa;}
table table td, table table tbody th{padding:8px 10px;}
table table tbody tr th:first-child{border-left: none;}
table .cellChkbox{height: auto; line-height: 1.3em;}
table tfoot td,
table tfoot th{background-color: #FCFFF5; border-top: 1px solid #aaa;} */

table{width:100%; color: #333; font-size: 1.2rem; border-top: 2px solid #1D2B36; border-bottom: 1px solid #1D2B36; border-collapse:separate; word-break: break-all; table-layout: fixed;}
table td, table th{position:relative; padding: 11px 10px; border-top: 1px solid #DFDFDF; text-align: center; vertical-align: middle; line-height: 1.5em;}
table td {line-height: 2.7em; }
.smline td {line-height: 1.5em; }
table thead th{font-weight: 800;}
table thead > tr:first-child th, 
table tbody > tr:first-child th,
table tbody > tr:first-child td{border-top: none;}
table > thead + tbody tr:first-child th,
table > thead + tbody tr:first-child td{border-top: 1px solid #1D2B36; }
table tbody:not(:first-of-type) tr:first-child th,
table tbody:not(:first-of-type) tr:first-child td{border-top: 1px solid #aaa; }
table tbody > tr > th{background:#F9F9F9; border-left: 1px solid #aaa; border-right: 1px solid #aaa; font-weight: 800;}
table tbody > tr > th + th{border-left: none;}
table tbody > tr > th:last-child{border-right: none;}
table a{color: #056ac0; transition:all 0.2s ease;}
table .title{color: #228BE5; cursor: pointer;}
table .details > td{padding: 20px; background: #F1F3F5;}
table td.detail {padding: 20px;}
table table{background: #fff; border: 1px solid #1D2B36;}
table table thead + tbody tr:first-child th,
table table thead + tbody tr:first-child td{border-top: 1px solid #aaa; }
table table td, table table tbody th{padding:8px 10px;}
table table tbody tr th:first-child{border-left: none;}
table .cellChkbox{height: auto; line-height: 1.3em;}
table tfoot td,
table tfoot th{background-color: #FCFFF5; border-top: 1px solid #aaa;}
table tbody > tr:hover, table tbody > tr:focus {background-color: #EFF7F7;}

/* 20241018 레이어 팝업 노출*/
.ta_popup{min-width: 1040px;}
table.ta_popup tbody tr td, table.ta_popup tr td{position: static;}
table.ta_popup tbody tr, table.ta_popup tr{position: relative;}
.L_popup{position: absolute; bottom: -275px; left: 0%; width: 100%; min-width: 1040px; height: 250px; display: none; border: 1px solid #000; background-color: #fff; padding: 20px; z-index: 9; box-shadow:5px 5px 5px rgba(0,0,0,.1);}
.mouse_popup:hover {cursor: pointer; text-decoration: underline;}
.mouse_popup:hover .L_popup{display: block;}

.L_popup_top, .L_popup_bottom{display: flex; margin-bottom: 10px;}
.L_popup_top>span, .L_popup_bottom>span{display: inline-block; margin-right: 5px;}
.L_popup_top>div, .L_popup_bottom>div{margin-right: 20px;}
.formCell_w01{width: 100%; min-width: 100px; max-width: 160px;}
.formCell_w02{flex: 0 0 120px;}
.formCell_w03{flex: 0 0 100px;}
.formCell_w04{flex: 0 0 100px;}
.formCell_w05{flex: 0 0 80px;}
.formCell_w06{flex: 0 0 220px;}

.L_popup_bottom{margin-top: 10px;}
.L_popup_center {display: block;  width: 100%;  border: 1px solid #d0d0d0; border-top: 1px solid #1D2B36;}
.L_popup_center table{width:100%; color: #333; font-size: 1.2rem; border: none; word-break: break-all; table-layout: fixed;}
.L_popup_center table > thead tr{background-color: #f0f0f0;}
.L_popup_center table  tbody tr td{word-break:break-all;}
.Product_name{ font-size: 12px; font-weight: 600; border: 1px solid #e0e0e0; border-bottom: none; color: #FF922B; padding: 0 10px;}
.Product_name>span{color: #000; display: inline-block; margin-right: 10px;}

/* 20241018 통장입급*/
.bankbook_box{display: flex; justify-content: space-between;}
.l_partner_box{flex: 0 0 350px;padding-right: 20px;/* border: 1px solid #e0e0e0;*/margin-right: 40px;height: 498px;overflow: hidden;overflow-y: scroll;}
.l_partner_box>ul{display: flex; width: 100%; flex-wrap: wrap;}
.l_partner_box>ul>li{width: 50%;padding: 3px;}
.l_partner_box .btn_par_li{display: flex;justify-content: center;align-items: center;background-color: #F7F7F9;border: 1px solid #E9E9E9;color:#101010;width: 100%;height: 39px;border-radius: 30px;}
.l_partner_box .btn_par_li.on{background-color: #007887; border: 1px solid #007887; color:#fff;}

.r_partner_box{display: flex; flex-direction: column; flex: 1 1 100%;}
.r_partner_list_box{padding-right: 20px;/* border: 1px solid #e0e0e0;*//* margin-right: 40px; */margin-top: 20px;height: 402px;overflow: hidden;overflow-y: scroll;}
.part_list{/* margin-top: 20px; */}
.part_list>li{display: flex; border: 1px solid #05A5B8; color: #fff; background-color: #05A5B8; border-radius: 5px; margin: 5px 0; padding: 10px}
.part_list>li>div{display: flex; margin-right: 10px;}
.part_list>li>div>span{margin-right: 5px;}
.part_list>li>div input{border: none; background-color: #80CDD6; color: #000;}
.part_list>li>div.part_in_01 input{background-color: #007887; color: #fff;}
.part_list>li>div.part_in_02 input{background-color: #A8E0E6; font-weight: 600; font-size: 16px;}

.part_in_01{flex: 0 0 250px;}
.part_in_02{flex: 0 0 200px;}
.part_in_03{flex: 1 1 100%;}
.part_in_01>span{flex: 0 0 45px;}
.part_in_02>span, .part_in_03>span{flex: 0 0 25px;}
.part_in_01>div, .part_in_02>div, .part_in_03>div{flex: 1 1 100%;}





/* manage class table */
table[class*="mngClss"] > tbody > tr > td { vertical-align: top; border-color: #aaa; }
table[class*="mngClss"] > tbody > tr > td:last-child { padding: 0; }
table[class*="mngClss"] > tbody > tr > td:last-child > table { border: none; border-bottom: 1px solid #DFDFDF; }
table[class*="mngClss"] > tbody > tr > td:last-child > table td { transition:all 0.2s ease; border: none;}
table[class*="mngClss"] > tbody > tr > td:last-child > table:hover td { background-color: #F9F9F9; }


table.mngClss_cmmn > thead th { background-color: #ebeef1;}
table.mngClss_cmmn > tbody th { background-color: #F9F9F9;}
table.mngClss_cmmn > td { border-top: 1px solid #DFDFDF }
table.mngClss_cmmn > tbody > tr > td { vertical-align: middle; border-color: #DFDFDF;}
table.mngClss_cmmn > tbody > tr > td:last-child { padding: 8px 10px; }
table.mngClss_cmmn > tbody > tr > td:last-child > table { border: none; border-bottom: 1px solid #DFDFDF; }
table.mngClss_cmmn > tbody > tr > td:last-child > table:hover td { background-color: none }




div.addbutton { position: relative; }
div.addbutton > a { display: block; height: 40px; background: #F1F3F5; transition:all 0.2s ease; text-align: center;}
div.addbutton > a:hover { background: #ddd;}
div.addbutton > a span { position: relative; display: inline-block; width: 24px; height: 24px; margin-top: 7px; border-radius: 13px; background-color: rgba(0,0,0,.1); text-indent: -9999px; overflow: hidden;}
div.addbutton > a span::before { content: ''; position: absolute; left: 7px; top: 11px; width: 10px; height: 2px; background: #1D2B36; transition:all 0.2s ease;}
div.addbutton > a span::after  { content: ''; position: absolute; left: 11px; top: 7px; width: 2px; height: 10px; background: #1D2B36; transition:all 0.2s ease;}
div.addbutton ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: absolute; right: 50%; top: -10px; width: 0px; height: 0px; margin-right: 20px; background-color: #DFDFDF; border: 1px solid #1D2B36; box-shadow: 0px 10px 30px rgba(0,0,0,.3); transition:all 0.2s ease; z-index: 10; opacity:0; visibility: hidden;}
div.addbutton ul li { width: 33%; height: 80px; background-color: #fff; margin-bottom: 1px; }
div.addbutton ul li a { display: flex; flex-direction: column; align-items: center; justify-content:flex-end; width: 100%; height: 100%; padding: 3px; color: #333333; line-height: 1.8rem; transition:all 0.2s ease;}
div.addbutton ul li a:hover { background-color: #F1F3F5;}
div.addbutton ul li a span { margin-bottom: 15px; }
div.addbutton ul li a svg { margin: 0; margin-bottom: 5px; }
div.addbutton ul li a.noitem { background: #DFDFDF; cursor: default;}
div.addbutton.on ul {width: 240px; height: auto; visibility:visible; opacity:1;}
div.addbutton.on > a span::before,
div.addbutton.on > a span::after { transform: rotate(45deg); }

/* table scroll */
.tbl_scrl{background: #fff; border-top: 2px solid #1D2B36; border-bottom: 1px solid #1D2B36; }
.tbl_scrl .thead{position: relative; padding-right: 17px; border-bottom: 1px solid #1D2B36; overflow: hidden; z-index: 3;}
.tbl_scrl .thead table th, .tbl_scrl .thead table{border-bottom: none;}
.tbl_scrl .tbody{position: relative; overflow-y: scroll; z-index: 0;}
.tbl_scrl table{border-top: none;}

/* ************ accordion box ************ */
section.accbox{border: 1px solid #1D2B36; border-radius: 4px; overflow: hidden; transition:all 0.3s ease;}
section.accbox h3{}
section.accbox h3::before{display: none;}
section.accbox h3 a{position: relative; display: block; height: 50px; padding-left: 15px; background-color: #F9F9F9; color: #1D2B36; line-height: 50px; transition:all 0.3s ease;}
section.accbox.on h3 a, section.accbox h3 a:hover{background-color: #ebebeb;}
section.accbox h3 a::before{content: ''; position: absolute; right: 20px; top: 15px; width: 10px; height: 10px; border: 2px solid #1D2B36; border-width: 2px 2px 0 0; transform: rotate(135deg); transition:all 0.3s ease;}
section.accbox .panel {padding: 0 20px; visibility: hidden; opacity: 0; height: 0; transition:all 0.3s ease;}

section.accbox.on {}
section.accbox.on h3 a {border-bottom: 1px solid #DFDFDF;}
section.accbox.on h3 a::before {top: 20px; transform: rotate(-45deg);}
section.accbox.on .panel {padding: 20px; visibility: visible; opacity: 1;  height:auto;}

/* ************ reply box ************ */
.replybox{ color: #1D2B36;}
.replybox h4{margin-bottom: 10px; font-size: 1.2rem; font-weight: 800;}
.replybox h4 small{ padding-left: 5px; font-size: 1.1rem; font-weight: 400;}
.replybox h4 small::before{content: '|'; padding-right: 5px; color: #aaa; }
.replybox .btnset_r{margin: 10px 0 0;}
.replybox > ul{border-top: 2px solid #1D2B36; border-bottom: 1px solid #1D2B36; font-size: 1.2rem; font-weight: 400; line-height: 1.3em; }
.replybox > ul > li{padding:10px 20px; border-bottom: 1px solid #DFDFDF; }
.replybox > ul > li:last-child{border-bottom: none; }
.replybox > ul > li dt{margin-bottom: 15px; font-weight: 800;}
.replybox > ul > li dt small{padding:0 10px 0 5px; font-size: 1.1rem; font-weight: 400;}
.replybox > ul > li dt small:before{content: '|'; padding-right: 5px; color: #666; }
.replybox > ul > li dt button{margin-left: 5px;}



/* ************ TooltipCon ************ */
.dailyTooltipCon{position: relative; display: inline-block; width: 0; height: 0; vertical-align: bottom;}
.dailyTooltipCon blockquote{box-sizing:border-box; position:absolute; right:calc( 100% - 15px ); top:10px; min-width: 130px; padding: 10px 20px;background: #FFFFFF;border-radius: 5px;border: #929292 solid 1px; color: #212529; font-size:1.3rem; line-height:2.2rem; font-weight: normal; text-align:left; transition:all 0.3s ease; z-index:1; box-shadow: 4px 4px 10px rgba(0,0,0,.3); visibility: hidden; opacity:0; }
.dailyTooltipCon.on blockquote {visibility:visible; opacity:1;}
.dailyTooltipCon blockquote::after {content: "\00a0";position: absolute;right: 25px;top: -4.5px;display: block;width: 7px;height: 7px;background-color: #fff;border: #929292 solid 1px;border-width: 1px 0 0 1px;transform:rotate( 45deg );z-index: 40;}
.dailyTooltipCon blockquote strong {font-weight: bold;}
.dailyTooltipCon blockquote ul li {position: relative;}
.dailyTooltipCon blockquote ul li::before {content: '';display: inline-block; width: 3px; height: 3px; margin-right: 5px; background-color: #212529; border-radius: 50%; vertical-align: middle; }



/* ************ loading ************ */
#link {color: #E45635;display:block;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
#link:hover {color: #CCCCCC}

#link, #link:hover {-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}

/** BEGIN CSS **/
body {background: #333333;}
@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

.loading-wrap {position: fixed;z-index: 10;left: 0;top: 0;display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;overflow: auto;background-color: rgba(0,0,0,0.8); visibility: hidden; opacity: 0; transition:all 0.2s ease; }
.loading-wrap.on{visibility: visible; opacity: 1; line-height: 1.2em;}

.loading-container,
.loading {
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
}


.loading-container {  }

.loading {
    border: 2px solid transparent;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading {
    border-color: transparent #E45635 transparent #E45635;
}
.loading-container:hover .loading,
.loading-container .loading {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #ffffff;
    font-family: "Helvetica Neue, "Helvetica", ""arial";
    font-size: 10px;
    font-weight: bold;
    margin-top: 45px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 100px;
}



/* ************ login ************ */
.wrap.login {background: #eee; font-size: 1.2rem; line-height: 1.5em;}
.wrap.login {display: flex; align-items: center; justify-content: center;}
.wrap.login .login_box { display: flex; align-items: stretch; justify-content: space-between;  width: 600px; padding: 40px; background: #fff; border:1px solid #ddd; border-radius: 10px; box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.2); }
.wrap.login .login_box h1 { display: block; width: 250px; background-repeat: no-repeat; background-position: center left; text-indent: -9999px; overflow: hidden;}
.wrap.login .login_box h2 { margin-bottom: 10px; color: #333; font-size: 1.6rem; font-weight: 800;}
.wrap.login .login_box fieldset {flex: 1;}
.wrap.login .login_box input, .wrap.login .login_box [class*="btn_"] {height: 40px; font-size: 1.4rem; line-height: 40px;}
.wrap.login .login_box fieldset .formCell {width: 100%; margin-top: 5px;}
.wrap.login .login_box fieldset .btnset_lgin {width: 100%; margin: 10px 0 0;}
.wrap.login .login_box fieldset .btnset_lgin [class*="btn_"] {width: 100%; margin: 0; font-weight: 800;}

/* ************ select vs ************ */
.md_con .selvs {height: 96%; display: flex; align-items: center;}
.selvs ul {display: flex; justify-content: center; flex: 1;}
.selvs ul li {flex: 1;}
.selvs ul li + li {margin-left: 1%;}
.selvs ul li a {display: flex; flex-direction: column; align-items: center; width: auto; height: auto; padding: 50px 0; border-width: 2px !important; font-size: 2.2rem; font-weight: 800; }
.selvs ul li a svg {margin-bottom: 15px;}
.selvs ul li:nth-child(1) a svg {fill: #228BE5;}
.selvs ul li:nth-child(2) a svg {fill: #40C057;}

/* ************ modalpage - preview ************ */
.modal.preview{padding: 20px; }
.modal.preview h2 button{vertical-align: 5px; margin-left: 15px;}
.modal.preview .modal_con{width: 100%; height: 100%; background: #fff; box-shadow: 0px 10px 30px rgba(0,0,0,.3); font-size: 1.2rem;}
.modal.preview .modal_con .md_con{ padding: 0; overflow: hidden;}
.mdpvarea {display: flex; flex-direction: column;}
.mdpvarea > div:nth-child(1) {display: flex; align-items:stretch;}
.mdpvarea > div:nth-child(1) .con_vod {flex-shrink: 0;}
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar {position: relative; display: flex; justify-content: flex-start; align-items: center; height: 50px; padding: 0 20px; background-color: #000;}
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > span {display: inline-block; margin: 0 40px; color: #828282; font-size: 1.4rem; font-weight: 800;}
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > span em {color: #fff;}
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > a {position: relative; display: inline-block; width: 20px; height: 20px; vertical-align: middle; }
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > a:after {content: ''; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border: 2px solid #aaa; border-width: 2px 2px 0 0; transform: rotate(45deg); transition:all 0.2s ease; }
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > a:hover:after {border-color: #fff;}
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > a:first-of-type:after { transform: rotate(-135deg);}
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > a > span {display: none;}
.mdpvarea > div:nth-child(1) .con_vod .con_vod_bar > div { position: absolute; right: 20px ; top: 10px;}
.mdpvarea > div:nth-child(1) .con_clss {position: relative; flex: 1; margin-top: 100px;}
.mdpvarea > div:nth-child(1) .con_clss > div:nth-child(1) { background-color: #444; height: 100px; margin-top: -100px; padding: 25px 10px; color: #ddd; font-size: 1.4rem;}
.mdpvarea > div:nth-child(1) .con_clss > div:nth-child(1) li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.mdpvarea > div:nth-child(1) .con_clss > div:nth-child(1) li > span { width: 80px; }
.mdpvarea > div:nth-child(1) .con_clss > div:nth-child(1) li > em { width: 60px; color: #dce221; font-weight: 800; text-align: right; }
.mdpvarea > div:nth-child(1) .con_clss > div:nth-child(1) li > p { flex: 1; height: 10px; background-color: #626863; }
.mdpvarea > div:nth-child(1) .con_clss > div:nth-child(1) li > p > span { display: block; height: 10px; background-color: #ffe221; }
.mdpvarea > div:nth-child(1) .con_clss > div:nth-child(2) {position: absolute; width: 100%; height: 100%; padding: 15px 10px; background-color: #F9F9F9; overflow-y: auto;}
.mdpvarea > div:nth-child(1) .con_clss h4 {padding-bottom: 10px; font-size: 1.6rem; font-weight: bold;}
.mdpvarea > div:nth-child(1) .con_clss a {display: block; color: #212529; font-size: 1.3rem; line-height: 2.2rem;}
.mdpvarea > div:nth-child(1) .con_clss a:hover {text-decoration: underline;}
.mdpvarea > div:nth-child(1) .con_clss a.sel {font-weight: bold; text-decoration: underline; cursor: default;}
.mdpvarea > div:nth-child(2) {flex: 1; padding: 10px 20px; border-top: 2px solid #1D2B36; font-size: 1.3rem; line-height: 2.2rem; overflow: auto;}


.iframe_box{text-align: center; display: inline-block; margin: 10px auto;}
.iframe_box iframe{min-width: 480px;}
.mdpvarea span.re_con_clss {position: relative; margin: 0 auto;}
.mdpvarea span.re_con_clss ul { background-color: #444; padding: 15px 10px; color: #ddd; font-size: 1.4rem;}
.mdpvarea span.re_con_clss ul li { display: flex; align-items: center; justify-content: space-between;}
.mdpvarea span.re_con_clss ul li > span { width: 80px; }
.mdpvarea span.re_con_clss ul li > em { width: 60px; color: #dce221; font-weight: 800; text-align: right; }
.mdpvarea span.re_con_clss ul li > p { flex: 1; height: 10px; background-color: #626863; }
.mdpvarea span.re_con_clss ul li > p > span { display: block; height: 10px; background-color: #ffe221; }
.errorlog_list {padding: 10px 20px; width: 400px; background-color: #fff; overflow-y: auto; border-left: 2px solid #1D2B36; font-size: 1.3rem; line-height: 2.2rem; overflow: auto;}