@charset "utf-8";

#container {position:relative; height:100%;}
#container::after{content:''; display:block; clear:both; overflow:hidden;}

.com_content{position:relative; width:100%; height:100%;}


/* ********************** 개인정보동의 ********************** */
.treinfo{position:relative;}
.treinfo h3{position:relative; width:30%; padding:0 0 5px 10px; border-bottom:3px solid #00549d; color:#222; font-size:15px; font-weight:bold; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
.treinfo h3::after{content:''; position:absolute; right:-2px; bottom:-3px; width:2px; height:2px; background:url('/images/web/edunote/sub/box_tit_bg.png') no-repeat;}
.treinfo .treinfo_box{position:relative; padding:15px 10px 15px; background:#e6e6e6; overflow:hidden;}
.treinfo .treinfo_box textarea{width:100%; height:200px; padding:10px; border:1px solid #c6c6c6; color:#555; font-size:14px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; overflow-y:auto;}
.treinfo .treinfo_box ul li{background:#fff;width:100%; height:200px; padding:10px; border:1px solid #c6c6c6; color:#555; font-size:14px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; overflow-y:auto;}
.treinfo .treinfo_check{position:relative;margin: 3px 10px 0;text-align:right;}
.treinfo .treinfo_check a{position:relative; color:#222; font-size:13px;}
.treinfo .treinfo_check input[type="checkbox"]{display:none;}
.treinfo .treinfo_check input[class="tcs"] + label{display:inline-block; position:absolute; left:-16px; top:3px; width:10px; height:10px; border:1px solid #bcbcbc; border-radius:50px; cursor:pointer;}
.treinfo .treinfo_check input[class="tcs"]:checked + label {background:#00549d url('/images/web/edunote/common/treinfo_check.png') no-repeat center; border:1px solid #00549d;}
.treinfo .treinfo_check span {font-weight:bold}

/* ********************** 회원구분선택 ********************** */
.member_box{position:relative; margin:10px 10px 0; padding:140px 10px; border:2px solid #dfe6ee; background:#fff; text-align:center}
.member_box.sms {position:relative; margin:10px 10px 0; padding:15px 10px; border:2px solid #dfe6ee; background:#fff; text-align:center}
.member_box:before {content:''; position:absolute; top:-2px; left:-2px; width:50px; height:50px; border-top:4px solid #266ed4; border-left:4px solid #266ed4;}
.member_box:after {content:''; position:absolute; bottom:-2px; right:-2px; width:50px; height:50px; border-bottom:4px solid #2a384a; border-right:4px solid #2a384a;}
.member_box img{width:100px; height:100px; margin:0 0 15px;}
.member_box h3{color:#222; font-size:16px; font-weight:bold; text-align:center;}

.member_box .member_list{margin:15px 0 0;}
.member_box .member_list li{width: 220px;height: 50px;margin:8px auto 0;background:#4a5970;border-radius:50px;text-align:center;}
.member_box .member_list li:first-child{margin:0 auto;}
.member_box .member_list li a{display:block;color:#fff;font-size: 19px;line-height: 50px;}

/* ********************** 교직원인증 ********************** */

.member_box .login{margin:15px 0 0;}
.member_box .login li{margin:6px 0 0;}
.member_box .login li:first-child{margin:0;}
.member_box .login input{width: 80%;height: 45px;padding:0 10px 0 32px;border:1px solid #c6c6c6;color:#555;font-size:16px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.member_box .login input.login_id{background:url('/images/web/edunote/common/login_id.png') no-repeat 8px center;}
.member_box .login input.login_pw{background:url('/images/web/edunote/common/login_pw.png') no-repeat 8px center;}
.member_box .login input.login_pn{background:url('/images/web/edunote/common/login_pn.png') no-repeat 8px center;}



/* ********************** 배부페이지 ********************** */

.howto{position:relative; padding:15px 0 0; background:#f3f3f3; text-align:center; overflow:hidden;}
.howto .download{position:relative; margin:0 15px 15px; padding:20px; background:#fff;}
.howto .download a{display:block;}
.howto .download h2{color:#111; font-size:15px; font-weight:bold;}
.howto .download p{color:#555; font-size:14px;}

.howto section{position:relative; margin:0 15px 15px; padding:20px; background:#fff;}
.howto section h3{position:relative; padding:4px; background:#555; color:#fff; font-size:14px; text-align:center;}
.howto section img{width:70%; margin:15px 0;}
.howto section p{color:#222; font-size:14px;}


/* ********************** 마이페이지 ********************** */
.mypage{position:relative; width:100%; background:#f5f5f5; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf;}
.mypage .profile{position:relative; margin:20px 0; padding:0 10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
.mypage .profile .pic{position:absolute; left:10px; top:0; width:125px; height:160px; background:#fff; border:1px solid #cbcbcb;}
.mypage .profile .pic img{width:125px; height:160px;}
.mypage .profile .my{min-height:160px; margin:0 0 0 140px;}
.mypage .profile .my h3{margin:0 0 10px; padding:15px 0 10px; border-bottom:1px dashed #a5a5a5; color:#222; font-size:25px; font-weight:bold;}
.mypage .profile .my li{position:relative; padding:0 0 0 10px; color:#222; font-size:13px; line-height:27px;}
.mypage .profile .my li.point{color:#00549d;}
.mypage .profile .my li::before{content:''; position:absolute; left:0; top:12px; width:4px; height:4px; background:#4a5970;}

.mypage .info{position:relative;}
.mypage .info ul{position:relative; margin:0 10px;}

.mypage .info li{position:relative;width:100%;height: 52px;margin:0 0 10px;background:#fff;border-radius:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;line-height:48px;}
.mypage .info li::before{content:''; position:absolute; left:10px; top:50%; width:20px; height:20px; margin:-10px 0 0; border:1px solid #ccc; border-radius:50px;}
.mypage .info li::after{content:'';position:absolute;left: 176px;top:18px;width:1px;height:13px;background:#adadad;}
.mypage .info li.detail {position:relative;width:100%;height: 182px;margin:0 0 10px;background:#fff;border-radius:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;line-height:48px;}
.mypage .info li.detail::before{content:''; position:absolute; left:10px; top:50%; width:20px; height:20px; margin:-10px 0 0; border:1px solid #ccc; border-radius:50px;}
.mypage .info li.detail::after{content:'';position:absolute;left: 176px;top: 13px;width:1px;height: 142px;background:#adadad;}
.mypage .info li:nth-child(1)::before{background:url('/images/web/edunote/common/mypage_work.png') no-repeat center;}
.mypage .info li:nth-child(2)::before{background:url('/images/web/edunote/common/mypage_work.png') no-repeat center;}
.mypage .info li:nth-child(3)::before{background:url('/images/web/edunote/common/mypage_call.png') no-repeat center;}
.mypage .info li:nth-child(4)::before{background:url('/images/web/edunote/common/mypage_phone.png') no-repeat center;}
.mypage .info li:nth-child(5)::before{background:url('/images/web/edunote/common/mypage_email.png') no-repeat center;}
.mypage .info li:nth-child(6)::before{background:url('/images/web/edunote/common/mypage_agree.png') no-repeat center;}
.mypage .info li span{position:absolute;left:36px;top:0;color:#222;font-size: 16px;}
.mypage .info li.detail span{position:absolute;left:36px;top:67px;color:#222;font-size: 16px;}


.mypage .info li p{margin: 4px 18px 0 188px;font-size: 16px;}
.mppage .info li.detail p {margin: 4px 18px 0 188px !important; font-size: 16px !important;line-height:28px !important}
.mypage .info li input{width:100%; padding:0 5px; color:#222; font-size:16px; border:0; line-height:48px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
.mypage .agreebox{position:relative; height:50px; margin:0 10px 10px; background:#fff; border-radius:10px; line-height:50px;}
.mypage .agreebox::before{content:''; position:absolute; left:10px; top:50%; width:20px; height:20px; margin:-10px 0 0; background:url('/images/web/edunote/common/mypage_agree.png') no-repeat center; border:1px solid #ccc; border-radius:50px;}
.mypage .agreebox::after{content:''; position:absolute; left:201px; top:18px; width:1px; height:13px; background:#adadad;}
.mypage .agreebox span{position:relative; margin:0 0 0 40px; padding:0 20px 0 0; color:#222; font-size:18px;}
.mypage .agreebox label{color:#222; font-size:13px;}
.mypage .agreebox label input{margin:0 5px 0 0;}

/* ********************** 교육수첩알리미 설정 191128 200128 ********************** */

.alarm_wrap .alarm_box{position:relative; margin:10px 10px 0; padding:20px 20px; border:2px solid #dfe6ee; background:#fff;}
.alarm_wrap .alarm_box:before {content:''; position:absolute; top:-2px; left:-2px; width:50px; height:50px; border-top:4px solid #266ed4; border-left:4px solid #266ed4;}
.alarm_wrap .alarm_box:after {content:''; position:absolute; bottom:-2px; right:-2px; width:50px; height:50px; border-bottom:4px solid #2a384a; border-right:4px solid #2a384a;}
.alarm_wrap .alarm_box h3{color:#222; font-size:18px; font-weight:bold;}
.alarm_wrap .alarm_box h3 span{color:#555; font-size:14px; font-weight:normal; padding:0 0 0 10px;}

/* 사용자 구분 */
.alarm_wrap .user_setting{position:relative; margin:30px 10px 0;}
.alarm_wrap .user_setting h3{color:#222; font-size:18px; font-weight:bold;}
.alarm_wrap .user_setting span{position:absolute; top:-5px; right:0; display:block; width:35px; height:35px; background:#266ed4; text-align:center; border-radius:50px;} /* 200206 수정 */
.alarm_wrap .user_setting span a {display:block;} /* 200206 추가 */
.alarm_wrap .user_setting span a img{width:22px; height:22px; padding:6px 0 0;} /* 200206 추가 */
.alarm_wrap .user_setting ul{position:relative; overflow:hidden; margin:10px 0 0;}
.alarm_wrap .user_setting ul li {position:relative; float:left; width:48%; margin-left:4%; text-align:center;}
.alarm_wrap .user_setting ul li:first-child{margin-left:0}
.alarm_wrap .user_setting ul li a{display:block; border:1px solid #00549d; color:#00549d; font-size:16px; line-height:30px; background:#fff; border-radius:5px}
.alarm_wrap .user_setting ul li a.on{color:#fff; background:#00549d;}
.alarm_wrap .user_setting ul li a:hover{text-decoration:underline;}

/* 앱 알람설정 */
.alarm_wrap .alarm_setting{position:relative; margin:30px 10px 0;}
.alarm_wrap .alarm_setting h3{color:#222; font-size:18px; font-weight:bold;}


/* 알리미리스트 1차 */
.alarm_wrap .alarm_setting .alarm_list_1{position:relative; margin:15px 0 0;}
.alarm_wrap .alarm_setting .alarm_list_1>li{position:relative; background:#eee; border-bottom:1px solid #dfdfdf;}
.alarm_wrap .alarm_setting .alarm_list_1>li span.tit{color:#222; padding:0 0 0 10px; font-size:16px; line-height:50px;}
.alarm_wrap .alarm_setting .alarm_list_1>li:first-child{border-top:1px solid #dfdfdf;}


/* 알리미리스트 2차 */
.alarm_wrap .alarm_setting .alarm_list_2{position:relative; background:#fff; border-top:1px solid #dfdfdf;}
.alarm_wrap .alarm_setting .alarm_list_2>li{position:relative; background:#f8f8f8; border-top:1px solid #dfdfdf;}
.alarm_wrap .alarm_setting .alarm_list_2>li::before{content:''; position:absolute; left:18px; top:20px; width:11px; height:11px; background:url('/images/web/edunote/common/dot_plus.png') no-repeat center;} /* 200130 추가 */
.alarm_wrap .alarm_setting .alarm_list_2>li.more::before{content:''; position:absolute; left:18px; top:20px; width:11px; height:11px; background:url('/images/web/edunote/common/dot_minus.png') no-repeat center;} /* 200130 추가 */
/*.alarm_wrap .alarm_setting .alarm_list_2>li::before{content:''; position:absolute; left:20px; top:23px; width:8px; height:3px; background:#282f4c;} 200130 */
.alarm_wrap .alarm_setting .alarm_list_2>li:first-child{border-top:0;}
.alarm_wrap .alarm_setting .alarm_list_2>li>span.tit{display:block; padding:0 0 0 35px; color:#222; font-size:15px; line-height:50px;}


/* 알리미리스트 3차 */
.alarm_wrap .alarm_setting .alarm_list_3{position:relative; background:#fff; border-top:1px solid #dfdfdf;}
.alarm_wrap .alarm_setting .alarm_list_3>li{position:relative; border-top:1px solid #dfdfdf;}
.alarm_wrap .alarm_setting .alarm_list_3>li:first-child{border-top:0;}
.alarm_wrap .alarm_setting .alarm_list_3>li::before{content:''; position:absolute; left:40px; top:23px; width:4px; height:4px; background:#4a5970;}
.alarm_wrap .alarm_setting .alarm_list_3>li>p{line-height:50px; font-size:14px; margin:0 120px 0 0;}
.alarm_wrap .alarm_setting .alarm_list_3>li>p.name{padding:0 0 0 50px; color:#222;}
.alarm_wrap .alarm_setting .alarm_list_3>li>p.name span.notice{position:relative; margin:0 0 0 10px; padding:0 0 0 10px; color:#555; font-size:14px;}
.alarm_wrap .alarm_setting .alarm_list_3>li>p.name span.notice::before{content:''; position:absolute; left:0; top:3px; width:1px; height:11px; background:#adadad;}


/* 알리미 ON/OFF 버튼 */
ul.alarm_btn{position:absolute; right:10px; top:13px; overflow:hidden; border:1px solid #282f4c;}
ul.alarm_btn li{float:left; width:50px; height:22px; text-align:center;}
ul.alarm_btn a{display:block; width:100%; height:100%; background:#fff; color:#000; font-size:14px; line-height:22px;}
ul.alarm_btn a:hover{text-decoration:underline;}
ul.alarm_btn a.on{background:#00549d; color:#fff;}

/* 프로필 사진 회전 */
#profile {
  	transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */
}
.mypage .profile .pic img.rotate90 {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
    width: 160px;
    height: 125px;
}

@media (max-width:680px) {

	/* ********************** 개인정보동의 ********************** */
	.treinfo h3{width:40%;}


}

@media (max-width:480px) {

	/* ********************** 개인정보동의 ********************** */
	.treinfo h3{width:50%;}


}

@media (max-width:380px) {

	/* ********************** 개인정보동의 ********************** */
	.treinfo h3{width:60%;}


}