/*layout*/

.common-content {max-width:480px !important;margin:0 auto;}
#side-header {background-color:#4C6092;width:100%;position:relative;z-index:100;}

#side-header .header-wrap  .header-inner {max-width:480px;margin:0 auto;}
.copyright {text-align:center;margin-top:80px;margin-bottom:40px;color:#fff;font-size:12px;}
.common {font-size:17px;padding:15px !important;}

/*login*/
body.login_main {background-color:#4C6092;}

.timple-login {width:307px;margin:0 auto;}
.timple-login-top {text-align:center;}
#user_id, #user_passward {padding:16px 47px;height:23px;width:auto;background:#fff url(../images/icon/icon-login.png) 22px 16px no-repeat;width:213px;border:none;}
#user_passward {background:#fff url(../images/icon/icon-pass.png) 22px 16px no-repeat;border-top:1px solid #eaeaea}
#timple-login .form_wrap  {margin-top:40px;}
#timple-login .btn-info {background-color:#7080A8;}
#timple-login .btn-ask {background-color:#7080A8;}

#timple-login .btn-login {background:url(../images/btn-login.png) 0 0 repeat-x;height:69px;width:99%;} 
#timple-login .timple-class {cursor:pointer;position:relative;margin-top:45px;/*padding-left:7px;*/}
#timple-login .btn-timple-enter {position:absolute;top:20px;right:-9px;}
#timple-login .btn-login {font-size:24px;font-weight:normal;}	
#timple-login .btn-info {font-weight:normal;font-size:18px;}	
#timple-login .btn-ask {font-weight:normal;font-size:18px;}
#timple-login .button-group {margin-top:10px;}

/*2차수정-구분css*/
.input_label {font-weight:bold; font-size:16px; color:#9F9F9F;}
.radio_label {width:190px;border-radius: 3px;border: 1px solid #D1D3D4;color:#a9a9a9;}
@media screen and (max-width:494px) {
	.radio_label {width:150px;}
}
.radio_div {float:left;}
/* hide input */
input.radio:empty {margin-left: -999px;}	
/* style label */
input.radio:empty ~ label.radio_label {position: relative;float: left;line-height: 2.5em;text-indent: 3.25em;margin-top: 0.8em;	margin-bottom: 1em;	cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
input.radio:empty ~ label.radio_label:before {position: absolute;display: block;top: 0;bottom: 0;left: 0;content: '';width: 2.5em;background: #D1D3D4;border-radius: 3px 0 0 3px;}
/* toggle hover */
input.radio:hover:not(:checked) ~ label.radio_label:before {content:'\2714';text-indent: .9em;color: #C2C2C2;}
input.radio:hover:not(:checked) ~ label.radio_label {color: #888;}
/* toggle on */
input.radio:checked ~ label.radio_label:before {content:'\2714';text-indent: .9em;color: #95a2c0;background-color: #4c6092;}
input.radio:checked ~ label.radio_label {color: #777;font-weight: bold}
div.form_radio:after {clear:both;content:"";display:block;}

/*문의하기*/
.text-area {width:98.5%; border:1px solid #e5e5e5; line-height:41px; padding:0 0 0 10px; font-size: 1em; overflow: scroll;}
div.ask_call {display:block; width:100%; height:40px; color:#a9a9a9;}
div.ask_call:after {clear:both;}
.call {display:inline-block; width:24% !important; }
.span-call {margin:0 1%;}
.call, .span-call {float:left;}


.input_label:after {clear:both;}

.div-upload {width:100%; height:60px; padding:0;}
.file-name {display:inline-block; width:63% !important; float:left;}
.iframe-upload {width:26%; margin-top:10px; float:right;}
/*2차수정-구분css*/

/*회원가입*/

.mb-join h2 {padding:25px 15px;text-align:center;font-size:24px;color:#fff;}
.mb-join h1 {position:absolute;left:15px;top:18px;}

.mb-join-con label {
	line-height:17px;
	font-size: 1em;
	display: block;
	 max-width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
}

.mb-join-con input[type="text"], .mb-join-con .form-control  
{display: block;height: 41px;line-height: 41px;  padding:1%;border:1px solid #dfdfdf;font-size: 1em;background:#fff;margin-bottom: 15px;width:98%;font-size: 1em;color: #666666;}
.mb-join-con .left {float:left;width:70%;padding-right:2%;}
.mb-join-con .right {float:right;width:28%;}
.mb-join-con .right button {width:100%;}
.mb-join-con .right .mb-phpto-wrap {width:105px;margin:0 auto;margin-top:14px;height: 105px;}
.mb-join-con .right .member-photo {border-radius:100%;behavior: url(PIE.htc);overflow:hidden;height: 100px; text-align: center;}
.mb-join-con .right .member-photo img{
    width: auto !important;
    height: 100%;
}

.code_input_title {font-size:24px;text-align:center;display:block;letter-spacing: -1px;line-height:26px;}
.mailto {color:#4c6092;text-decoration:underline}
ul.set-con li {padding:30px 15px;border-bottom:1px solid #dedede;position:relative;}
ul.set-con li .side-arrow {display:block;cursor:pointer;position:absolute;right:15px;top:30px;width:12px;height:23px;background:url(../images/icon/side-arrow.png) 0 0 no-repeat;}
.side-radio {display:block;cursor:pointer;width:39px;height:38px;background:url(../images/icon/check-radio-off.png) 0 0 no-repeat;position:absolute;right:15px;top:17px;}
.side-radio-on {background:url(../images/icon/check-radio-on.png) 0 0 no-repeat;}
.mb-phpto-wrap .btn-m {height:45px;margin-top:5px;}

.undi01 {padding:25px 0 0 0;}
.id-save-wrap {margin:15px 0 0 0;}

/* 이용약관 & 개인정보취급방침*/
#policy-popup .pop-header h2 {text-indent:50px}
.text_wrap {max-height:400px;overflow-x:hidden;overflow-y:auto;}
.text_wrap>div {max-width:600px;}
 .text_wrap>div pre {
	display: block;
	  padding: 0;
	  margin: 0;
	  font-size: 12px;
	  line-height:1.625em;
	  word-break: break-all;
	  word-wrap: break-word;
	  white-space: pre;
	  white-space: pre-wrap;
	  background-color: #FFF;
	  border: 0; 
 }

@media screen and (min-width:1024px) {
	.timple-login-top {margin-top:40px;}
}


@media screen and (min-width:768px) {
	.timple-login-top {margin-top:40px;}

}

/* ipad under */
@media screen and (max-width:767px){	

	.mb-join h2 {padding:13px;height:27px;font-size:23px;}
	.mb-join h1 {position:absolute;left:13px;top:13px;}
	.mb-join h1 img {height:27px;width:78px;}
	ul.tab-area li a {padding:15px !important;}

	/*이용약관*/
	.undi01 {padding:15px 0 0 0;}
}


@media screen and (max-width:359px) {
	#policy-popup .pop-header h2 {font-size:22px;}
}



@media screen and (max-width:320px) {
	.login_main .container {  padding: 10px 5px;}
	.timple-class {left:-5px;}
	#policy-popup .pop-header h2 {font-size:20px;}
}


/*회원가입*/
#member_join .join-form {background-color:#FFF;border:1px solid #e5e5e5;padding:20px 25px;}
#member_join .join-form {*width:400px;}
#member_join  input[type="text"],#member_join  input[type="password"], .form-control  {display: block;height:41px;line-height:41px;padding: 0 0 0 10px;border:1px solid #e5e5e5;background:#fff;width:98.5%;font-size:1em;}
/*tab*/
ul.tab-area {overflow:hidden;}
ul.tab-area li {float:left;width:50%;}
ul.tab-area li span {display:block;padding:25px 0;text-align:center;
	/*background:url(../images/icon/tab-bd-bottom.png) left bottom repeat-x;*/
	font-size:23px;color:#8f9aac;
	font-weight:bold;
	border:1px solid #43588C;
	background:#F7F7F7;
	color:#43588C;
}
ul.tab-area li.student span {margin-left:-1px;}

/*ul.tab-area li span.on {background-color:#FFF;}*/

/*ul.tab-area li.teacher span {border-top:1px solid #e5e5e5;border-left:1px solid #e5e5e5;}
ul.tab-area li.student span {border-top:1px solid #e5e5e5;border-right:1px solid #e5e5e5;}
ul.tab-area li.teacher span.on {
	border-top:1px solid #43588C;border-left:1px solid #43588C;border-right:1px solid #43588C;color:#43588C;
	font-weight:bold;
	background-color:#FFF;
	}
ul.tab-area li.student span.on {
	border-top:1px solid #43588C;
	border-left:1px solid #43588C;
	border-right:1px solid #43588C;
	color:#43588C;font-weight:bold;
	background-color:#FFF;
}*/

ul.tab-area li span i {display:inline-block;position:relative;top:2px;margin-right:5px;width:22px;height:22px;background:url(../images/tab-checkbox-off.png) 0 0 no-repeat;}
ul.tab-area li span i.on {display:inline-block;width:22px;height:22px;background:url(../images/tab-checkbox-on.png) 0 0 no-repeat;}
.ico-warn {background:url(../images/icon/ico-warn.png) 0 0 no-repeat;vertical-align:baseline;width:15px;height:15px;margin-right:5px;margin-bottom:-2px;}
.warn-area {height:10px;line-height:1;padding:3px 0 8px 0;}
.warn-area .warn-txt {color:#ff4f4b;font-size:13px;}
.warn-area .warn-txt2 {color:blue;font-size:13px;}
.ndi01 {padding:25px 0;}

@media screen and (max-width:760px){
	ul.tab-area li.teacher a, ul.tab-area li.teacher a.on {background-position:45px 15px;}
	ul.tab-area li.student a, ul.tab-area li.student a.on {background-position:55px 15px;}
}

@media screen and (max-width:450px){
	ul.tab-area li.teacher a, ul.tab-area li.teacher a.on {background-position:17px 15px;text-indent: 10px;}
	ul.tab-area li.student a, ul.tab-area li.student a.on {background-position:27px 15px;}
}



/*intro*/
.intro-area {background:#516495 url(../images/intro-bg.jpg) 0 0 repeat; #4f6193;}
.intro-logo {position:absolute;top:50%;left:50%;margin-left:-127px;margin-top:-97px;}
.intro-logo img {width:240px}
.intro-copy {position:absolute;bottom:0px;text-align:center;left:0;;width:100%;}

@media screen and (max-width:768px){
	.intro-logo {top:45%;margin-left:-94px;margin-top:-72px;} /*intro*/
	.intro-logo img {width:188px}
}


/*introduce*/
p.intro-txt {line-height:1.625em;}
.sub-tit {border-bottom:1px solid #e1e1e1;padding:10px 0;text-align:center;background-color:#FFF;font-size:17px;}
.sub-tit .intro-sub-icon {margin-right:10px;vertical-align:middle;}


.introduce {overflow:hidden;display:inline-block;margin:0 auto;}
.introduce li {
float: left;
margin:0;
display:table;
}
.introduce-txt {text-align:center;font-size:17px;margin:15px 0 10px 0;}
.introduce li > div {background-color:#fff;border:2px solid #A5A9B7;padding:20px;	width: 150px;cursor:pointer}

.introduce li > div {
border-radius:7px;
box-shadow: 0 1px 4px rgba(0,0,0,0.2); 
height: auto;
margin:15px;
}

.introduce li > div:hover {
	background-color:#e3f1fc;
	border-color:#96a7d4;
}


.introduce li h3 {margin-top:20px;margin-bottom:40px;text-align:center;font-size:19px;height:38px;color:#666;line-height:24px;}	
.introduce li p {text-align:center;}
/*320 77*128*/

@media screen and (max-width:480px){
.introduce li > div {padding:5px;	padding-bottom:8px;}
.intro-icon {margin-bottom:10px;}

/*개인정보*/
.mb-join-con .left {width:67%;}
.mb-join-con .right {width:auto;} /*join*/

}

@media screen and (max-width:400px){
.introduce li > div {padding:5px;margin:10px;}
}

@media screen and (max-width:370px){
.introduce li > div {padding:5px;margin:5px;}
.mb-join-con .left {width:60%;}
}

@media screen and (max-width:350px){
.introduce li > div {padding:2px;margin:2px;}
}

@media screen and (max-width:320px){
.header-inner h1 {display:none;}
.introduce li > div {padding:0px;margin:1px;}
#timple-login .form_wrap {margin-top:15px;}
#timple-login .timple-class {margin-top:25px;} /*intro temp*/
}


/*나의 데이터*/
.data-h3 {text-align:center;padding:15px 0 25px 0;font-size:18px;color:#666;}
.data-con-wrap {position:relative;width:200px;margin:0 auto;}
.data-con {position:absolute;top:30%;left:50%;margin-left:-35px;}
.data-con-txt01 {font-size:25px;padding-bottom:10px;color:#97b3fa;text-align:center;letter-spacing:-1px;}
.data-con-txt02 {font-size:18px;padding-top:10px;border-top:1px solid #dedede;color:#666;line-height:22px;text-align:center;letter-spacing:-1px}