@charset "utf-8";

.wrap { background-color: #f9f9f9;}
.container .content { margin: 70px auto; padding: 0px 40px; position: relative;}

.tc_wrap { }

/*질문답변*/
.reply_box { margin-top: 30px; }
.reply_box li { width: calc( 100% - 732px );  margin-bottom: 20px; }
.reply_box li .ball {  min-height: 60px; padding: 15px 20px;  border: 1px solid #ddd; border-radius: 4px;}
.reply_box li .ball .wr_space textarea {  width:98%; height: 60px; resize:none; border:0; background-color:transparent; overflow:auto;}
.reply_box li .ball .wr_space textarea.open { width:98%; height: 100%; resize:none; border:1px solid #eee; background-color: rgba(255,255,255,0.2); } 
.reply_box li.re_user { float: left; clear: both; margin-left: 30px; }
.reply_box li.re_user h4 { text-align: left; padding: 0 0px 5px 10px; font-size: 14px; font-family: 'notokr-medium';}
.reply_box li.re_user h4 span { font-family: 'dotum'; font-size: 12px; color: #aaa; padding-left: 5px;}
.reply_box li.re_user .ball {  background-color: #fff;  position: relative;  }
.reply_box li.re_user .ball .re_fix {height: 20px; position: absolute; bottom: -26px; right: 0; }
.reply_box li.re_user img { position: absolute; top: 12px; left: -28px;}

.reply_box li.re_admin { float: right; clear: both;  margin-right: 30px; }
.reply_box li.re_admin h4 { text-align: right; padding: 0 10px 5px 0; font-size: 14px; color: #747d1a; font-family: 'notokr-medium';}
.reply_box li.re_admin h4 span { font-family: 'dotum'; font-size: 12px; color: #aaa; padding-left: 5px;}
.reply_box li.re_admin .ball {  background-color: #d9ffad; position: relative; border: 1px solid #ddd; }
.reply_box li.re_admin .ball .re_fix { height: 20px; position: absolute; bottom: -26px; left: 0; }
.reply_box li.re_admin img { position: absolute; top: 12px; right: -28px;}

.reply_box li.re_write { width: calc( 100% - 2px );   max-width: none; clear: both; }
.reply_box li.re_write h4 { padding: 0 0 5px 3px; font-family: 'notokr-demilight';}
.reply_box li.re_write .ball { height: 80px; background-color: rgba(255,255,255,0.9); border: 1px solid #ddd; border-radius: 0; padding: 0 }
.reply_box li.re_write .ball textarea { width: calc( 100% - 80px ); height: 80px; border: 0; padding: 10px; box-sizing:border-box; resize:none; float: left;}
.reply_box li.re_write .ball button { width: 80px; height: 80px; float: left; border-left: 1px solid #ddd; background-color: #f5f5f5;}

/*페이지 단계*/
.step { padding: 10px 10px 0 10px; text-align: right;}
.step span { }

/*로그인화면*/
.login_wrap { width: 100%; height: 100%;}
.login_top { width: 100%; height: calc( 100% - 70px ); position:relative; background-color: #375889; box-sizing:border-box;}
.login_top .login_box { width: 900px; height: 353px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; background: url(../images/sub/login_bg.png) no-repeat center center; }
.login_top .login_box .login_data { float: left; margin-left: 300px; margin-top: 90px;}
.login_top .login_box .login_data .auth_box { padding-bottom: 15px; }
.login_top .login_box .login_data .auth_box .btn_auth { width: 180px; height: 30px; border: 1px solid #8da0bc; float: left; margin-right: 5px; color: #fff; text-align: center; line-height: 30px; cursor: pointer; font-family: 'notokr-regular'; font-size: 12px; letter-spacing: -0.5px; border-radius: 2px;}
.login_top .login_box .login_data .auth_box .btn_auth:hover { border: 1px solid #fff;}
.login_top .login_box .login_data .auth_box .btn_auth.ba2 { margin-right: 0;}
.login_top .login_box .login_data .auth_box .input_hide { display: none;}
.login_top .login_box .login_data .auth_box #auth1:checked ~ .ba1 { background: #082858 url(../images/sub/tick.png) no-repeat 65px 10px; border: 1px solid #fff; text-indent: 5px;}
.login_top .login_box .login_data .auth_box #auth2:checked ~ .ba2 { background: #082858 url(../images/sub/tick.png) no-repeat 53px 10px; border: 1px solid #fff; text-indent: 5px;}

.login_top .login_box .login_data label { height: 34px; display: block;}
.login_top .login_box .login_data label.la_ps {margin-top: 9px;}
.login_top .login_box .login_data label span { width: 90px; line-height: 34px; display: block; float: left; color: #fff;}
.login_top .login_box .login_data input[type=text], .login_top .login_box .login_data input[type=password] { width: 270px; height: 34px; border: 0; background-color: #edf4ff; float: right;}  
.login_top .login_box .login_data input[type=text]:focus, .login_top .login_box .login_data input[type=password]:focus { border: 0 !important;  background-color: rgba(255,255,255,1);}

.login_top .login_box .login_data .btn_reg { width: 370px; height: 30px; border: 1px solid #8da0bc; border-radius: 2px; margin-top: 15px; color: #fff;  font-size: 12px; background-color: rgba(255,255,255,0.1);}
.login_top .login_box .login_data .btn_reg:hover { border: 1px solid #fff;}

.login_top .login_box .btn_login { width: 138px; height: 124px; border: 1px solid #8da0bc; border-radius: 2px; background-color: #082858; font-family: 'notokr-medium'; font-size: 15px; color: #fff; margin-top: 90px; margin-left: 10px;}
.login_top .login_box .btn_login:hover { background-color: #123b77; border: 1px solid #fff;}

.login_bot { width: 100%; height: 70px; background-color: #23406b;} 
.login_bot .footer_box { width: 1100px; margin: 0 auto;}
.login_bot .footer_box .f_logo { width: 112px; height: 41px; float: left; margin-top: 10px; opacity: 0.8;}
.login_bot .footer_box .address { color: #fff; padding-top: 20px; text-indent: 15px;}
.login_bot .footer_box .copy { color: #8da0bc; text-indent: 15px;}
/* 190917 사용자정보 */
.ar_title {font-family: 'notokr-medium'; font-size: 12px; border-bottom: 1px solid #aaa; color: #333; margin: 0 20px; display: none;}
.user_tip { padding-top: 40px; color: blue;}
.ess { color: red;}
.tb_chk { }
.tb_chk input[type=checkbox] { display: none;}
.tb_chk input[type=checkbox] + .marker { }
  
.tb_chk input[type=checkbox]:checked ~ .marker { }  
.tb_chk input[type=checkbox]:checked ~ .marker span { border: 0px solid #fff; background: url(../images/sub/tick.png) no-repeat 1px 0px; }
.tb_chk .marker {padding: 0 10px; height: 30px; display: block; float: left; line-height: 30px; cursor: pointer; border: 1px solid #ddd; color: #333; 
-webkit-touch-callout: none; 
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.tb_chk .marker span { width: 14px; height: 14px; border: 1px solid #ddd; display: inline-block; vertical-align: middle; margin: -2px 5px 0 0 ; box-sizing:border-box;}
.tb_chk input[type=checkbox]#g1:checked ~ .marker { background-color: #0ba957; border: 1px solid #0ba957; color: #fff;}
.tb_chk input[type=checkbox]#g2:checked ~ .marker { background-color: #0ba957; border: 1px solid #0ba957; color: #fff;}

.g1_list { opacity: 0.5; pointer-events: none;}
.g1_list.on { opacity: 1; pointer-events: all;}
.g2_list { opacity: 0.5; pointer-events: none;} 
.g2_list.on { opacity: 1; pointer-events: all;}

@media screen and (max-width : 1280px){
.wrap { width: 1280px;}
	}
	
/* 191007 데이터 로딩 시 로딩 이미지 표츌 */
.wrap-loading{ /*화면 전체를 어둡게 합니다.*/ 
    position: fixed; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    z-index: 9999;
    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:40%; 
    left:40%; 
    margin-left: -21px; 
    margin-top: -21px; 
    z-index: 10000;
} 
.display-none{ /*감추기*/ 
    display:none; 
}