@charset "utf-8";


/*
 * Nanum Gothic (Korean) http://www.google.com/webfonts/earlyaccess
 */


 html, body { height: 100%; }

html{overflow-y:scroll}
/* *{margin:0;padding:0;letter-spacing:0} */
*{margin:0;letter-spacing:0}
body{
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
  font-size:12px;  line-height:18px; background:#333;
}

body::-webkit-scrollbar {
  display: none;
}
legend,caption{visibility:hidden;width:0;height:0;font-size:0;line-height:0}
em{font-style:normal}
textarea{width:95%;padding:10px;border:1px solid #ccc;font-size:12px;  color:#555;background:#fff; resize:none;}
select,input{height:18px;margin:0;padding:0;font-size:12px;line-height:18px;vertical-align:middle}
ul,ol,li,dl,dt,dd{list-style:none}
/*div,ul,ol,li,dl,dt,dd,form,fieldset,p,h1,h2,h3,h4,h5,h6,blockquote,iframe,nav{margin:0;padding:0;}*/
div,form,fieldset,p,h1,h2,h3,h4,h5,h6,blockquote,iframe,nav{margin:0;padding:0;}
img{border:0;vertical-align:top}
fieldset{border:0}

#기존에 hr 테그가 안보이도록 했는데 사유는 모름 2020.08.31
#hr{display:none;clear:both}

table{border-collapse:collapse;font-size:12px;color:#444;table-layout:fixed;border-spacing:0}

a,a:link,a:visited,a:active{color:#555;letter-spacing:normal;text-decoration:none; }
a:hover{color:#555;letter-spacing:normal;text-decoration:underline;  }

/* form controll */
input[type=checkbox],
input[type=radio]{width:13px;height:13px;margin:2px 5px 2px 0;padding:0;vertical-align:middle}
input[type=text], input[type=password], input[type=file], input_box_file{padding:1px 2px 1px 7px;line-height:23px;height:23px;border:1px solid #ccc;color:#666;background:#fff; margin-right:3px;}
select {height:24px; line-height:24px; padding:0px;border:1px solid #ccc;font-size:12px;color:#343c4c;}
.radio, .checkbox {width:13px;height:13px;margin:2px 5px 2px 0;padding:0;vertical-align:middle}


/* 가운데_선 */
span.hrLine { display:inline-block; width:100%; height:1px; margin-bottom:10px; border-top:1px solid #ddd;}
span.hrLineBlack { display:inline-block; width:100%; height:1px; margin-bottom:10px; border-top:1px solid #999;}
span.hrLineDot { display:inline-block; width:100%; height:1px; margin-bottom:10px; border-top:1px dashed #ddd;}





/* float */
.fl {float:left !important}
.fr {float:right !important}


/* align */
.txt_left {text-align:left !important}
.txt_center {text-align:center !important}
.txt_right {text-align:right !important}
.vat {vertical-align:top !important}
.vam {vertical-align:middle !important}
.vab {vertical-align:bottom !important}

/* clear */
.clb {clear:both !important}

/* overflow */
.over_h {overflow:hidden !important}
.over_s {overflow:scroll;overflow-x:hidden}

/* background */
.bgn {background:none !important}

/* display */
.dis_b {display:block !important}
.dis_in {display:inline !important}
.dis_inb {display:inline-block !important}
.dis_n {display:none !important}

/* 숨김처리 */
.hide {visibility:hidden;position:absolute;top:-9999px;width:0;height:0;font-size:0;line-height:0} /* image */
.blind {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px} /* txt */

/* for IE 5.5-7 */
.after{width:auto;*zoom:1}
.after:after{display:block;clear:both;height:0;content:''}

/* text */
.underline {text-decoration:underline !important}

.fw_n {font-weight:normal !important}
.fw_b {font-weight:bold !important}

/* text_color */
.f_s11{font-size:11px; color:#999 !important;}
.f_gray01 {color:#999 !important;}
.f_blue01 {color:#2243a2 !important}
.f_black02 {color:#777 !important;}
.f_black01 {color:#333 !important}
.f_red01 {color:#d80546 !important}
.f_blk01 {color:#000 !important}

/* border */
.bdt {border-top:1px solid #ddd !important}
.bdl {border-left:1px solid #ddd !important}
.bdr {border-right:1px solid #ddd !important}
.bdb {border-bottom:1px solid #ddd !important}

/* border 0 */
.bdtn {border-top:none !important}
.bdln {border-left:none !important}
.bdrn {border-right:none !important}
.bdbn {border-bottom:none !important}

/* margin top */
.mt0{margin-top:0 !important}
.mt1{margin-top:1px !important}
.mt2{margin-top:2px !important}
.mt3{margin-top:3px !important}
.mt5{margin-top:5px !important}
.mt7{margin-top:7px !important}
.mt8{margin-top:8px !important}
.mt9{margin-top:9px !important}
.mt10{margin-top:10px !important}
.mt11{margin-top:11px !important}
.mt12{margin-top:12px !important}
.mt13{margin-top:13px !important}
.mt14{margin-top:14px !important}
.mt15{margin-top:15px !important}
.mt16{margin-top:16px !important}
.mt17{margin-top:17px !important}
.mt18{margin-top:18px !important}
.mt19{margin-top:19px !important}
.mt20{margin-top:20px !important}
.mt21{margin-top:21px !important}
.mt22{margin-top:22px !important}
.mt23{margin-top:23px !important}
.mt24{margin-top:24px !important}
.mt25{margin-top:25px !important}
.mt26{margin-top:26px !important}
.mt27{margin-top:27px !important}
.mt28{margin-top:28px !important}
.mt29{margin-top:29px !important}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px !important}
.mt40{margin-top:40px !important}
.mt45{margin-top:45px !important}
.mt50{margin-top:50px !important}
.mt60{margin-top:60px !important}
.mt80{margin-top:80px !important}
.mt90{margin-top:90px !important}
.mt100{margin-top:100px !important}
.mt120{margin-top:120px !important}
.mt150{margin-top:150px !important}

/* margin left */
.ml0{margin-left:0 !important}
.ml1{margin-left:1px !important}
.ml2{margin-left:2px !important}
.ml3{margin-left:3px !important}
.ml4{margin-left:4px !important}
.ml5{margin-left:5px !important}
.ml6{margin-left:6px !important}
.ml7{margin-left:7px !important}
.ml8{margin-left:8px !important}
.ml9{margin-left:9px !important}
.ml10{margin-left:10px !important}
.ml11{margin-left:11px !important}
.ml12{margin-left:12px !important}
.ml13{margin-left:13px !important}
.ml14{margin-left:14px !important}
.ml15{margin-left:15px !important}
.ml16{margin-left:16px !important}
.ml17{margin-left:17px !important}
.ml18{margin-left:18px !important}
.ml19{margin-left:19px !important}
.ml20{margin-left:20px !important}
.ml23{margin-left:23px !important}
.ml25{margin-left:25px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}

/* margin right */
.mr0{margin-right:0 !important}
.mr1{margin-right:1px !important}
.mr2{margin-right:2px !important}
.mr3{margin-right:3px !important}
.mr4{margin-right:4px !important}
.mr5{margin-right:5px !important}
.mr6{margin-right:6px !important}
.mr7{margin-right:7px !important}
.mr8{margin-right:8px !important}
.mr9{margin-right:9px !important}
.mr10{margin-right:10px !important}
.mr11{margin-right:11px !important}
.mr12{margin-right:12px !important}
.mr13{margin-right:13px !important}
.mr14{margin-right:14px !important}
.mr15{margin-right:15px !important}
.mr16{margin-right:16px !important}
.mr17{margin-right:17px !important}
.mr18{margin-right:18px !important}
.mr19{margin-right:19px !important}
.mr20{margin-right:20px !important}
.mr30{margin-right:30px !important}
.mr50{margin-right:50px !important}
.mr60{margin-right:60px !important}
.mr80{margin-right:80px !important}
.mr70{margin-right:70px !important}
.mr90{margin-right:90px !important}

/* margin bottom */
.mb0{margin-bottom:0 !important}
.mb1{margin-bottom:1px !important}
.mb2{margin-bottom:2px !important}
.mb3{margin-bottom:3px !important}
.mb4{margin-bottom:4px !important}
.mb5{margin-bottom:5px !important}
.mb6{margin-bottom:6px !important}
.mb7{margin-bottom:7px !important}
.mb8{margin-bottom:8px !important}
.mb9{margin-bottom:9px !important}
.mb10{margin-bottom:10px !important}
.mb11{margin-bottom:11px !important}
.mb12{margin-bottom:12px !important}
.mb13{margin-bottom:13px !important}
.mb14{margin-bottom:14px !important}
.mb15{margin-bottom:15px !important}
.mb16{margin-bottom:16px !important}
.mb17{margin-bottom:17px !important}
.mb18{margin-bottom:18px !important}
.mb19{margin-bottom:19px !important}
.mb20{margin-bottom:20px !important}
.mb25 {margin-bottom:25px !important;}
.mb30{margin-bottom:30px !important}
.mb35{margin-bottom:35px !important}
.mb40{margin-bottom:40px !important}
.mb45{margin-bottom:45px !important}
.mb50{margin-bottom:50px !important}
.mb60{margin-bottom:60px !important}
.mb80{margin-bottom:80px !important}

/* padding top */
.pt0{padding-top:0 !important}
.pt1{padding-top:1px !important}
.pt2{padding-top:2px !important}
.pt3{padding-top:3px !important}
.pt4{padding-top:4px !important}
.pt5{padding-top:5px !important}
.pt6{padding-top:6px !important}
.pt7{padding-top:7px !important}
.pt8{padding-top:8px !important}
.pt9{padding-top:8px !important}
.pt10{padding-top:10px !important}
.pt15{padding-top:15px !important}
.pt20{padding-top:20px !important}
.pt25{padding-top:25px !important}
.pt30{padding-top:30px !important}

/* padding left */
.pl0{padding-left:0 !important}
.pl1{padding-left:1px !important}
.pl2{padding-left:2px !important}
.pl3{padding-left:3px !important}
.pl4{padding-left:4px !important}
.pl5{padding-left:5px !important}
.pl6{padding-left:6px !important}
.pl7{padding-left:7px !important}
.pl8{padding-left:8px !important}
.pl9{padding-left:9px !important}
.pl10{padding-left:10px !important}
.pl12{padding-left:12px !important}
.pl20{padding-left:20px !important}
.pl30{padding-left:30px !important}
.pl40{padding-left:40px !important}
.pl50{padding-left:50px !important}
.pl60{padding-left:60px !important}

/* padding right */
.pr0{padding-right:0px !important}
.pr1{padding-right:1px !important}
.pr2{padding-right:2px !important}
.pr3{padding-right:3px !important}
.pr4{padding-right:4px !important}
.pr5{padding-right:5px !important}
.pr6{padding-right:6px !important}
.pr7{padding-right:7px !important}
.pr8{padding-right:8px !important}
.pr9{padding-right:9px !important}
.pr10{padding-right:10px !important}
.pl12{padding-right:12px !important}
.pl20{padding-right:20px !important}
.pl30{padding-right:30px !important}
.pl40{padding-right:40px !important}
.pl50{padding-right:50px !important}
.pl60{padding-right:60px !important}



/* padding bottom */
.pb0{padding-bottom:0 !important}
.pb1{padding-bottom:1px !important}
.pb2{padding-bottom:2px !important}
.pb3{padding-bottom:3px !important}
.pb4{padding-bottom:4px !important}
.pb5{padding-bottom:5px !important}
.pb6{padding-bottom:6px !important}
.pb7{padding-bottom:7px !important}
.pb8{padding-bottom:8px !important}
.pb9{padding-bottom:9px !important}
.pb10{padding-bottom:10px !important}
.pb11{padding-bottom:11px !important}
.pb12{padding-bottom:12px !important}
.pb13{padding-bottom:13px !important}
.pb14{padding-bottom:14px !important}
.pb15{padding-bottom:15px !important}
.pb20{padding-bottom:20px !important}
.pb30{padding-bottom:30px !important}
.pb40{padding-bottom:40px !important}


.btn {
    border:1px solid #6a6667;
    padding: 5px 5px;
    border-radius: 3px;
    background: #ffffff;
    float:left;
    cursor: hand;
    cursor: pointer;
}

.btn-delete {
    margin-left:5px;
    float:left;
}

.btn-menu {
    margin-left:3px;
    float:left;
}

.btn-select {
    background: #5673ee;
    color: white;
}

.btn-blue {
    background: #0000ff;
    color: white;
}

.btn-red {
    background: #ff0000;
    color: white;
}

.btn-yellow {
    background: #e7d052;
    color: black;
}


@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(../../assets/fonts/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(../../assets/fonts/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(../../assets/fonts/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(../../assets/fonts/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(../../assets/fonts/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(../../assets/fonts/NotoSansKR-Black.otf) format('opentype');}

body, h1, h2, h3, h4, h5, h6, input, textarea, select { font-family: 'Noto Sans KR', sans-serif; color: #000; background:#FFF; }


.wrap-loading{ /*화면 전체를 어둡게 합니다.*/
        position: fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background: rgba(0,0,0,0.2); /*not in ie */
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr='#20000000', endColorstr='#20000000');    /* ie */
    }

    .wrap-loading div{ /*로딩 이미지*/
        position: fixed;
        top:50%;
        left:50%;
        margin-left: -21px;
        margin-top: -21px;
    }

    .display-none{ /*감추기*/
        display:none;
    }
    @keyframes caretBlink {
        from { opacity: 1.0; }
        to { opacity: 0.0; }
    }

    @keyframes rotateSpinner {
        from {
            transform:rotate(0deg);
        }
        to {
            transform:rotate(360deg);
        }
    }

    #text-tool-caret {
        animation-name: caretBlink;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(1.0,0,0,1.0);
        animation-duration: 1s;
    }

    #en-markup-loading-spinner {
        position: absolute;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
        width: 32px;
        height: 32px;
    }

    #en-markup-loading-spinner img {
        position: relative;
        top: 0px;
        left: 0px;
        animation-name: rotateSpinner;
        animation-duration: 0.6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .skitchToastBoxContainer {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 30px;
        -webkit-user-select: none;
        -moz-user-select: none;
        pointer-events: none;
    }

    .skitchToastBox {
        width: 200px;
        height: 16px;
        padding: 12px;
        background-color: rgba(47, 55, 61, 0.95);
        border-radius: 4px;
        color: white;
        cursor: default;
        font-size: 10pt;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.32);
        font-family: 'Soleil', Helvetica, Arial, sans-serif;
        border: 2px rgba(255, 255, 255, 0.38) solid;
    }



    .skitchToast {
        padding-left: 20px;
        padding-right: 20px;
        display: inline-block;
        height: 10px;
        color: #f1f5f8;
        text-align: center;
    }

    .skitchVisible {
        /* Don't remove this class it's a hack used by the Evernote Clipper */
    }


        #en-markup-disabled {
        position: fixed;
        z-index: 9999;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        cursor: default;
        -webkit-user-select: none;
    }

    #en-markup-alert-container {
        position: absolute;
        z-index: 9999;
        width: 450px;
        left: calc(50% - 225px);
        top: calc(50% - 85px);
        background-color: white;
        box-shadow: 0 2px 7px 1px rgba(0,0,0,0.35);
        -webkit-user-select: none;
    }


    #en-markup-alert-container .cell-2 {
        position: relative;
        float: left;
        width: 345px;
        margin-top: 29px;
        margin-bottom: 20px;
    }

    #en-markup-alert-container .cell-2 .cell-2-title {
        margin-bottom: 5px;
        padding-right: 30px;
        font-size: 12pt;
        font-family: Tahoma, Arial;
    }

    #en-markup-alert-container .cell-2 .cell-2-message {
        padding-right: 30px;
        font-size: 9.5pt;
        font-family: Tahoma, Arial;
    }

    #en-markup-alert-container .cell-3 {
        position: relative;
        width: 450px;
        height: 60px;
        float: left;
        background-color: rgb(240,240,240);
    }

    #
    .cell-3 button {
        position: absolute;
        top: 12px;
        right: 15px;
        width: 110px;
        height: 36px;
    }

    #en-markup-alert-container .cell-3 button.alt-button {
        position: absolute;
        top: 12px;
        right: 140px;
        width: 110px;
        height: 36px;
    }

        .loginlayout {
        width:100%;
        height:100%;
        background-color:#4ba6d6;
        text-align:center;
    }
    .loginframe {
        width:100%;
        height:1018px;
        background-image: url( "../../assets/img/field/login_bg.png" );
        text-align:center;
    }
    .logincenter {
        display: inline-block;
        width:1080px;
        height:936px;
        background-image: url( "../../assets/img/field/login_center_bg.png" );
    }
    .login_bar {
        float:left;
        text-align:left;
        width:14px;
        height:22px;
    }
    .logintitle {
        float:left;
        text-align:left;
        width:400px;
        font-size:20px;
        font-weight:900;
        color:#484f5b
    }



    body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
  
.box1 {float:left; width:260px; height:100%;}
.box2 {
    float:left;
    width:calc(100% - 400px);
    height:100%;
    margin-left:20px;
    text-align:right;
}
.toplayout {
    width:100%;
    height:60px;
    background-color:#252C34;
}
.topleft {
    float:left;
    width:400px;
    margin-left:30px;
    margin-top:21px;
    color:#ffffff;
    font-size:18px;
}
.topright {
    float:left;
    width:calc(100% - 480px);
    margin-right:30px;
    margin-top:23px;
    text-align:right;
    color:#ffffff;
    font-size:14px;
}
.loginbox {
    float:right;
    width:200px;
    cursor:pointer;
}
.mainlayout {
    width:100%;
    height:100%;
    background-color:#F6F6F6;
}

.popupModal {
    position:absolute;
    top:110px;
    left:20px;
    border:1px solid #8f8f8f;
    width:calc(100% - 40px);
    height:calc(100% - 200px);
    min-width:860px;
    min-height:480px;
    background-color:#eeeeee;
    overflow:scroll;
}
.selbox {
    width:120px;
    height:32px;
    font-size:12px;
    color:#888888;
    border: 1px solid #8f8f8f;
}
.inbox {
    width:30px;
    height:30px;
    font-size:16px;
    margin-left:20px;
    margin-right:2px;
    margin-bottom:2px;
    text-align:right;
    border: 1px solid #8f8f8f;
}


.select-editable { position:relative; background-color:white; border:none;  width:120px; height: 24px; margin-left:2px;}
.select-editable select { position:absolute; top:0px; left:0px; font-size:12px; border:none; width:120px; margin:0; }
.select-editable input { position:absolute; top:0px; left:0px; width:100px; padding:0px 5px 0px 5px; font-size:12px; border:none; }
.select-editable select:focus, .select-editable input:focus { outline:none; }

.wrap * {
  margin: 0;
  padding: 0;
}
.wrap ul li,
.wrap ol li {
  list-style: none;
}
.select_box {
  margin: 0px;
}
.select_box .box {
  display: inline-block;
  position: relative;
  width: 170px;
}
.select_box .box .select {
  position: relative;
  border: 2px solid #ccc;
  box-sizing: border-box;
  padding: 0 5px;
  height: 33px;
  line-height: 26px;
  font-size: 12px;
  background-color: #fff;
  cursor: pointer;
  overflow:hidden;
}
.select_box .box .select:after {
  margin-top:2px;
  font-size:10px;
  content: '▼';
  position: absolute;
  top: 0;
  right: 10px;
}
.select_box.on .box .select:after {
  margin-top:2px;
  font-size:10px;
  content: '▲';
}
.select_box .box .list {
  display: none;
  overflow-y: auto;
  margin-top: -14px;
  position: absolute;
  top: 45px;
  left: 0;
  z-index: 10;
  border: 2px solid #ccc;
  box-sizing: border-box;
  padding: 10px 0;
  width: 100%;
  max-height: 600px;
  background-color: #fff;
}
.select_box .box .list::-webkit-scrollbar {
  width: 10px;
  height: 0;
}
.select_box .box .list::-webkit-scrollbar-button:start:decrement,
.select_box .box .list::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 0;
}
.select_box .box .list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .05);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.select_box .box .list::-webkit-scrollbar-thumb {
  height: 50px;
  width: 50px;
  background: rgba(0, 0, 0, .2);
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.select_box .box .list>li {
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
    height: 35px;
    line-height: 35px;
}
.select_box .box .list>li.selectitem:hover {
    background-color: #e0e0e0;
}

    select {
        background: '#FFF';
    }