@charset "utf-8";
/*Common*/
*{margin:0;padding:0; box-sizing: border-box;}
html,body{width:100%; overflow-x: hidden;}
html{}
@media (min-width: 767px){
    html{zoom: 1.5;} 

}

body{background-color:#fff;*word-break:break-all;-ms-word-break:break-all}
body,h1,h2,h3,h4,h5,h6,th,td,input,textarea,select,option,a,b,p{color:#666666; font-family:'NotoKrR',sans-serif; font-size:16px; font-weight: 100;}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
a{color:#7d7d7d;text-decoration:none;cursor:pointer}
a:hover{color:#333;text-decoration:none}
button,label{cursor:pointer;_cursor /**/:hand}
button *{position:relative}
button img{left:-3px;*left:auto}
textarea{overflow	:auto}
/*html:first-child select{height:20px;padding-right:6px}*/
option{padding-right:6px}
.input_text, textarea{*margin:-1px 0;padding-right:1px}
.input_check, .input_radio{width:13px;height:13px}
.blind, legend, caption{text-indent:-9999px;font-size:0;height:0 !important;line-height:0;overflow:hidden; width:0 !important;}
hr{display:none}
legend{*width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{*line-height:0}


/* ///////////////////////////// common  ///////////////////////////// */

/* 정렬 설정 */
.clear:after{
	content:"";
	clear:both;
	display:block;
}
.ov{overflow:hidden;}
.fl {float:left;}
.fr {float:right;}
.tl{text-align:left  !important;}
.tc{text-align:center  !important;}
.tr{text-align:right  !important;}
.tj{text-align:justify  !important;}

/*font-weight*/
.f_w1{ font-weight:100 !important} 
.f_w3{ font-weight:300 !important} /* light */
.f_wn{ font-weight:normal !important} /* regular */
.f_w5{ font-weight:500 !important} /* demi */
.f_wb{ font-weight:bold !important} /* bold */
.f_w9{ font-weight:900 !important} /* black */

.bold{font-weight: 700 !important;}
.Ebold{font-weight: 800;}

/* font-size: */
.fs0{font-size:0px !important;}
.fs12{font-size:12px !important;}
.fs13{font-size:13px !important;}
.fs14{font-size:14px !important;}
.fs15{font-size:15px !important;}
.fs16{font-size:16px !important;}
.fs17{font-size:17px !important;}
.fs18{font-size:18px !important;}
.fs19{font-size:19px !important;}
.fs20{font-size:20px !important;}
.fs21{font-size:21px !important;}
.fs22{font-size:22px !important;}
.fs24{font-size:24px !important;}
.fs34{font-size:34px !important;}
.fs38{font-size:38px !important;}
.fs42{font-size:42px !important;}

/* color */
.c000{color:#000 !important;}
.c111{color:#111 !important;}
.c222{color:#222 !important;}
.c333{color:#333 !important;}
.c444{color:#444 !important;}
.c555{color:#555 !important;}
.c666{color:#666 !important;}
.c777{color:#777 !important;}
.c888{color:#888 !important;}
.c999{color:#999 !important;}
.cfff{color:#fff !important;}
.c20{color: #202020 !important;}
.c21{color: #212121 !important;}
.c65{color:#656565 !important;}
.c_blue{color:#085885 !important;}
.c_red{color:#de1818 !important;}
.c_purple{color: #e83a95 !important;}
.bg_blue{background: #085885 !important;}
.c_pink{color: #ee4848 !important;;}
.c_yellow{color: #ffd164 !important;;}
.bg_darkGray{background: #212121 !important;}
.bg_fff{background: #ffffff !important;}
/* line-height */
.lh1{line-height:1em !important;}
.lh11{line-height:1.1em !important;}
.lh12{line-height:1.2em !important;}
.lh13{line-height:1.3em !important;}
.lh14{line-height:1.4em !important;}
.lh15{line-height:1.5em !important;}
.lh16{line-height:1.6em !important;}
.lh17{line-height:1.7em !important;}
.lh18{line-height:1.8em !important;}
.lh19{line-height:1.9em !important;}
.lh40{line-height: 40px;}

/*margin-top*/
.mt5_{margin-top:-5px !important;}
.mt0{margin-top:0px !important;}
.mt2{margin-top:2px !important;}
.mt5{margin-top:5px !important;}
.mt6{margin-top:6px !important;}
.mt7{margin-top:7px !important;}
.mt8{margin-top:8px !important;}
.mt10{margin-top:10px !important;}
.mt15{margin-top:15px !important;}
.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !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;}
.mt55{margin-top:55px !important;}
.mt60{margin-top:60px !important;}
.mt65{margin-top:65px !important;}
.mt70{margin-top:70px !important;}
.mt80{margin-top:80px !important;}
.mt90{margin-top:90px !important;}
.mt100{margin-top:100px !important;}
.mt120{margin-top:100px !important;}
.mt150{margin-top:150px !important;}

/*margin-bottom*/
.mb0{margin-bottom:0px !important;}
.mb10{margin-bottom:10px !important;}
.mb15{margin-bottom:15px !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;}
.mb55{margin-bottom:55px !important;}
.mb60{margin-bottom:60px !important;}
.mb65{margin-bottom:65px !important;}
.mb70{margin-bottom:70px !important;}
.mb80{margin-bottom:80px !important;}
.mb85{margin-bottom:85px !important;}
.mb90{margin-bottom:90px !important;}
.mb100{margin-bottom:100px !important;}
.mb130{margin-bottom:130px !important;}
.mb150{margin-bottom:150px !important;}
.mb160{margin-bottom:160px !important;}
.mb250{margin-bottom:250px !important;}

/*margin-left*/
.ml0{margin-left:0px !important;}
.ml5{margin-left:5px !important;}
.ml10{margin-left:10px !important;}
.ml12{margin-left:12px !important;}
.ml20{margin-left:20px !important;}
.ml26{margin-left:26px !important;}
.ml30{margin-left:30px !important;}
.ml40{margin-left:40px !important;}
.ml45{margin-left:45px !important;}
.ml52{margin-left:52px !important;}
.ml112{margin-left:112px !important;}

/*margin-right*/
.mr0{margin-right:0px !important;}
.mr10{margin-right:10px !important;}
.mr18{margin-right:18px !important;}
.mr20{margin-right:20px !important;}
.mr25{margin-right:25px !important;}
.mr30{margin-right:30px !important;}
.mr40{margin-right:40px !important;}
.mr90{margin-right:90px !important;}
.mr95{margin-right:95px !important;}
.mr112{margin-right:112px !important;}
.mr331{margin-right:331px !important;}

/*paddding-top*/
.pt0{padding-top: 0px !important;}
.pt10{padding-top: 10px !important;}
.pt12{padding-top: 12px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}
.pt25{padding-top: 25px !important;}
.pt30{padding-top: 30px !important;}
.pt35{padding-top: 35px !important;}
.pt40{padding-top: 40px !important;}
.pt45{padding-top: 45px !important;}
.pt50{padding-top:50px !important;}
.pt55{padding-top: 55px !important;}
.pt60{padding-top: 60px !important;}
.pt65{padding-top: 65px !important;}
.pt70{padding-top: 70px !important;}
.pt75{padding-top: 75px !important;}
.pt80{padding-top: 80px !important;}
.pt85{padding-top: 85px !important;}
.pt90{padding-top: 90px !important;}
.pt95{padding-top: 95px !important;}
.pt100{padding-top: 100px !important;}


/*padding-bottom*/
.pb0{padding-bottom: 0px !important;}
.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb29{padding-bottom: 29px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pb100{padding-bottom: 100px !important;}

.pl0{padding-left:0px !important;}
.pl20{padding-left: 20px !important;}
.pl25{padding-left: 25px !important;}
.pl30{padding-left: 30px !important;}
.pl60{padding-left: 60px !important;}

.pr0{padding-right:0px !important;}
.pr20{padding-right: 20px !important;}
.pr30{padding-right: 30px !important;}

.p0{padding:0 !important;}
.p10{padding:10px !important;}
.plr10{padding:0 10px !important;}

.w10{width: 10px !important;}
.w20{width: 20px !important;}
.w30{width: 30px !important;}
.w40{width: 40px !important;}
.w50{width: 50px !important;}
.w52{width: 52px !important;}
.w60{width: 60px !important;}
.w70{width: 70px !important;}
.w75{width: 75px !important;}
.w80{width: 80px !important;}
.w81{width: 81px !important;}
.w85{width: 85px !important;}
.w88{width: 88px !important;}
.w90{width: 90px !important;}
.w100{width: 100px !important;}
.w110{width: 110px !important;}
.w120{width: 120px !important;}
.w130{width: 130px !important;}
.w140{width: 140px !important;}
.w150{width: 150px !important;}
.w160{width: 160px !important;}
.w170{width: 170px !important;}
.w180{width: 180px !important;}
.w190{width: 190px !important;}
.w200{width: 200px !important;}
.w220{width: 220px !important;}
.w230{width: 230px !important;}
.w270{width: 270px !important;}
.w280{width: 280px !important;}
.w295{width: 295px !important;}
.w300{width: 300px !important;}
.w310{width: 310px !important;}
.w345{width: 345px !important;}
.w350{width: 350px !important;}
.w360{width: 360px !important;}
.w370{width: 370px !important;}
.w384{width: 384px !important;}
.w390{width: 390px !important;}
.w410{width: 410px !important;}
.w500{width: 500px !important;}
.w530{width: 530px !important;}
.w552{width: 552px !important;}
.w590{width: 590px !important;}
.w660{width: 660px !important;}
.w860{width: 860px !important;}
.w996{width: 996px !important;}

.w10p{width: 10% !important;}
.w20p{width: 20% !important;}
.w30p{width: 30% !important;}
.w40p{width: 40% !important;}
.w50p{width: 50% !important;}
.w60p{width: 60% !important;}
.w70p{width: 70% !important;}
.w75p{width: 75% !important;}
.w80p{width: 80% !important;}
.w90p{width: 90% !important;}
.w95p{width: 95% !important;}
.w100p{width: 100% !important;}

.borderN{border:none !important}
.blN{border-left:none !important}
.b1_e3e3e3 {border: 1px solid #e3e3e3;}
.p_r{position: relative;}
.p_a{position: absolute;}
.p_f{position: fixed;}

.vat{vertical-align:top !important;}
.vam{vertical-align:middle !important;}
.vab{vertical-align:bottom !important;}

.dp_in{display:inline;}
.dp_b{display:block;}
.dp_n{display:none;}
.dinb{display:inline-block;}
.dp_inb1{
	display:inline-block;
	zoom:1;
	*display:inline;
	_display:inline;
	vertical-align:top;
	}
.dp_b{display: block !important;; }

.before:before, .after:after{
	content:"";
	display:block;
}

.upper{text-transform:uppercase}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
}
.ellipsis.multiline {
  white-space: normal;
}


/* input */

/* .checkbox{
	position: relative;
}
.checkbox input[type="checkbox"] {
	display:none;
	position: absolute;
	overflow: hidden;
	padding: 0;
	margin:0;
	clip:rect(0,0,0,0);
	border: 0;
}

.checkbox input[type="checkbox"] + label {
	position: relative;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox input[type="checkbox"] + label:before {
	content: ' ';
	cursor:pointer;
	display:inline-block;
	width: 33px;
	height: 33px;
	background:url('../img/class/checkbox.png') no-repeat center center;
} */
/* .checkbox input[type="checkbox"] + label:active:before, */
/* .checkbox input[type="checkbox"]:checked + label:active:before {
	background:url('../img/class/checkbox.png') no-repeat center center;
} */
/* .checkbox input[type="checkbox"]:checked + label:before {
	background:url('../img/class/checkbox_on.png') no-repeat center center;
} */

/*라디오버튼*/
.radio{display: inline-block; vertical-align: top; margin-left: 25px;}
.radio.first{margin-left: 0;}
.radio input[type="radio"] {display:none;}
.radio  input[type="radio"] + label {
	font-size:20px;
	color:#666666;
}

.radio  input[type="radio"] + label span {
	display:inline-block;
	cursor:pointer;
	width: 28px;
	height: 28px;
	margin:-2px 10px 0 0;
	vertical-align:middle;
	background-image:url('../img/class/radio.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 21px;	
}

.radio  input[type="radio"]:checked + label span {
	background-image:url('../img/class/radio_on.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size:21px;
}

.input{
	width: 100%; 
	height: 70px;
	font-size: 20px; 
	line-height: 70px;
	color: #666666; 
	border:1px solid #ededed;
    background: #ffffff;
    padding:0 20px;
	
	border-radius: 4px;
}
.input.error,
input:focus{border:1px solid #3a5cd9;}
input::placeholder {
	color: #c9c9c9;
  }
.textarea{
	padding:10px;
	width: 100%;
	height:83px;
	font-size: 14px;
	color: #666666; 
	border:1px solid #e1e1e1;
	background: #ffffff;
	resize:vertical
}



#bg{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	display:none;
	z-index:12;
	}

.p_bg{background: #3a5cd9 !important; }


/* ///////////////////////////// header  ///////////////////////////// */

#header{
	width: 100%;
	position: relative;
	position: fixed;
	left:0; top:0;
	height: 55px;
	background: #2f2f30;
	z-index: 10;
}
#header h1{display: inline-block; vertical-align: top; position: relative; z-index: 5; color: #ffffff; font-size: 16px; height: 55px; line-height: 55px; padding-left: 20px;}
#header .menu{position: absolute; right:5%; top:0; width: 80px; height: 55px; line-height: 55px; text-align: right; display: block}
#header .menu img{width: 21px;}
#header .back img{width: 13px;}
#header .menu a.home img{width: 27px;}
#header .menu a.home{margin-right: 25px;}

#headerMain{
	width: 100%;
	position: relative;
	position: fixed;
	left:0; top:0;
	height: 55px;
	z-index: 10;
	background: #00a7a0;
}
#headerMain .userinfo{}
#headerMain .userinfo h2{display: inline-block; vertical-align: top; position: relative; z-index: 5; color: #ffffff; font-size: 17px; height: 55px; line-height: 55px; padding-left: 20px;}
#headerMain .userinfo h2 img{width: 9px; margin-left: 10px; margin-top: -3px;}
#headerMain .menu{position: absolute; right:0%; top:0; width: 144px; height: 55px; line-height: 55px; text-align: center; display: block}
#headerMain .menu a{}
#headerMain .menu a img{width: 21px;}
#headerMain .menu a.home img{width: 27px;}
#headerMain .menu a.home{margin-right: 15px;}

#headerMain .menu a.ttable img{width: 22px;}
#headerMain .menu a.ttable{margin-right: 15px;}

#headerMain .menu a.ttablemenu img{width: 24px;}
.subtitle{
	display: inline-block;
	vertical-align: top;
	border:1.5px solid rgba(255,255,255,0.6);
	text-align: center;
	padding:0 10px;
	height: 22.5px;
	border-radius: 11.25px;
	color: rgba(255,255,255,0.6);;
	font-size:12px ;
}
.subtitle span{color: #ffffff; font-size: 12px; margin-left: 5px;}


#container{background: #00a7a0; }


/*footer*/
#footer{
	position: fixed;
	bottom:0;
	left:0;
	width: 100%;
	text-align: center;
	background: #0f1e28;
	z-index: 10;
	overflow:hidden;
}
#footer > div{
	line-height: 50px;
	height: 50px;
	color: #fff;
	font-size: 14px;
	font-weight: 300;
}
#footer .state{}
#footer .error{background: #4f191b; display: none;}
#footer .error img{width: 21px; margin-right: 5px;}
#footer.error .state{display: none;}
#footer.error .error{display: block;}

/* input */


/*
	체크박스 
	기본 체크박스 checkbox
	숫자 체크박스 checkbox2
*/


.checkbox, .checkbox2{
	position: relative;
}
.checkbox input[type="checkbox"] {
	display:none;
	position: absolute;
	overflow: hidden;
	padding: 0;
	margin:0;
	clip:rect(0,0,0,0);
	border: 0;
}

.checkbox input[type="checkbox"] + label {
	position: relative;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox input[type="checkbox"] + label:before {
	content: ' ';
	cursor:pointer;
	display:inline-block;
	width: 20px;
	height: 20px;
	background:url('../img/checkbox.png') no-repeat center center;
	background-size: 100%;
}
.checkbox input[type="checkbox"] + label:active:before,
.checkbox input[type="checkbox"]:checked + label:active:before {
	background:url('../img/checkbox.png') no-repeat center center;
	background-size: 100%;
}
.checkbox input[type="checkbox"]:checked + label:before {
	background:url('../img/checkbox_on.png') no-repeat center center;
	background-size: 100%;
}



.checkbox2 input[type="checkbox"] {
	display:none;
	position: absolute;
	overflow: hidden;
	padding: 0;
	margin:0;
	clip:rect(0,0,0,0);
	border: 0;
}

.checkbox2 input[type="checkbox"] + label {
	position: relative;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-size: 14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox2 input[type="checkbox"] + label span {
	content: ' ';
	cursor:pointer;
	display:inline-block;
	width: 20px;
	height: 20px;
	border-radius: 3px;
	font-size: 11px;
	line-height: 20px;
	border:1px solid #e1e1e1;
	text-align: center;
	color: #666666;
}
.checkbox2 input[type="checkbox"] + label:active span,
.checkbox2 input[type="checkbox"]:checked + label:active span,
.checkbox2 input[type="checkbox"]:checked + label span {
	background: #3a5cd9;
	border:1px solid #3a5cd9;
	color: #ffffff;
}