/* layout */
html, body, input, textarea, select, button, table{font-size:14px;}

html,body{height:100%;}
body{background:#f0f0f0;}

.wrap{position:relative;min-width:320px;min-height:100%;margin:0 auto;padding-top:0;/* 20px - 모바일 시계 표시되는 영역 */overflow:hidden;}
.wrap.lock{position:fixed;top:0;left:0;width:100%;height:100%;}

/* hd-top-menu */
.hd-top-menu{position:relative;height:3.83334rem;margin-bottom:.214rem;padding:.429rem 1.714rem 0;}
.hd-top-menu .btn-menu{position:absolute;top:1.286rem;right:1.714rem;width:2rem;height:1.143rem;background:url('../images/common/btn_menu.png') 50% no-repeat;-webkit-background-size:cover;background-size:cover;overflow:hidden;text-indent:-99999px;}
.hd-top-menu .user-info{height:2.858rem;line-height:2.858rem;color:#000;font-size:.875rem;}
.hd-top-menu .user-info .profile-img{position:relative;display:inline-block;width:2.858rem;height:2.858rem;margin:0 .66667rem 0 0;vertical-align:top;border-radius:50%;overflow:hidden;}
.hd-top-menu .user-info .profile-img img{width:100%;height:100%;}

/* page top */
.wrap.no-top-menu .page-hd-area{position:fixed;top:0;left:0;width:100%;}
.page-hd-area{position:relative;width:100%;height:4.286rem;box-sizing:content-box;z-index:100;}
.page-hd-area.fixed{position:fixed;top:0;right:0;width:100%;}
.page-hd-area .page-title{padding:0 3.071rem;color:#fff;font-size:1.286rem;line-height:4.286rem;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.page-hd-area .page-title .icon.comment{position:inherit;top:inherit;right:inherit;width:1.286rem;height:1.286rem;}
.page-hd-area .btn-back{position:absolute;top:0;left:0;z-index:1;display:block;width:3.071rem;height:4.286rem;text-indent:-99999px;overflow:hidden;background:url('../images/common/btn_back.png') 50% no-repeat;-webkit-background-size:.929rem 1.571rem;background-size:.929rem 1.571rem;}
.page-hd-area .btn-save{position:absolute;top:.857rem;right:1.25rem;z-index:1;display:block;width:3.857rem;height:2.571rem;border-radius:2px;color:#fff;font-size:1.214rem;background:#496789;overflow:hidden;}
.page-hd-area .icon{position:absolute;top:.714rem;right:1.429rem;}

.container{position:relative;}

.submenu{display:flex;justify-content:space-around;padding:0 1.25rem;}
.submenu li{flex:1 1 auto;}
.submenu li a{position:relative;display:block;padding:.429rem 0 1.071rem;color:#fff;font-size:1.143rem;text-align:center;opacity:.5;}
.submenu li.active a{color:#496789;opacity:1;}
.submenu li.active a:before{position:absolute;bottom:0;left:0;right:0;display:block;content:'';height:5px;background:#496789;}

/* footer */
#footer{border-top:1px solid #ddd;}
#footer .bd-notice{position:relative;height:3.333334rem;line-height:3.33334rem;padding:0 3.333334rem 0 1.25rem;background:#fff;}
#footer .bd-notice:after{display:block;content:'';clear:both;}
#footer .bd-notice .title{float:left;color:#222;font-size:.91666667rem;font-weight:700;}
#footer .bd-notice .bd-tit{float:left;display:block;width:calc(100% - 4rem);padding-left:1.3334rem;color:#666;font-size:.9166667rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
#footer .bd-notice .btn-more{position:absolute;top:0;right:0;width:3.333334rem;height:3.333334rem;text-indent:-99999px;}
#footer .bd-notice .btn-more:after{position:absolute;top:50%;left:50%;display:block;content:'';margin:-.26rem 0 0 -.26rem;border:solid #222;border-width:0 2px 2px 0;display:inline-block;margin:0 0;padding:.26rem;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
#footer .f-quick-menu{background:#f0f0f0;}
#footer .f-quick-menu:after{display:block;content:'';clear:both;}
#footer .f-quick-menu li{position:relative;float:left;width:33.3%;}
#footer .f-quick-menu li:first-child{width:33.4%;}
#footer .f-quick-menu li:before{position:absolute;top:50%;left:0;display:block;content:'';width:1px;height:1.16667rem;margin:-.583334rem 0 0;background:#ddd;}
#footer .f-quick-menu li:first-child:before{display:none;}
#footer .f-quick-menu li a{display:block;height:3.625rem;line-height:3.625rem;color:#666;font-size:1rem;font-weight:300;text-align:center;}
#footer .f-menu{font-size:0;}
#footer .f-menu li{position:relative;display:inline-block;padding:0 .875rem;}
#footer .f-menu li:first-child{padding-left:0;}
#footer .f-menu li:before{position:absolute;top:50%;left:0;display:block;content:'';width:1px;height:.66667rem;margin:-.33335rem 0 0;background:#ddd;}
#footer .f-menu li:first-child:before{display:none;}
#footer .f-menu li a{color:#666;font-size:.916667rem;}

#footer .f-info{padding:1rem 1.25rem 1.33334rem;background:#f7f7f7;}
#footer .f-info .addr .bar{display:inline-block;width:1px;height:.66667rem;margin:0 .4rem;background:#ddd;}
#footer .f-info .addr,
#footer .f-info .copy{line-height:1.6;color:#999;font-size:.83334rem;font-weight:300;}
#footer .f-info .addr{margin:.833334rem 0;}

/* 사이드 메뉴 */
#sideMenu{position:absolute;top:0;left:-100%;width:80%;height:100%;min-width:300px;z-index:10000;overflow-y:auto;transition:left .25s ease-out;}
#sideMenu.menu-open{left:0;}
#sideMenu.menu-open .dim{display:block;}
#sideMenu .dim{position:fixed;top:0;left:0;display:none;width:100%;height:100%;background:rgba(0, 0, 0, .3);}
#sideMenu .inner{position:relative;min-height:100%;background:#fff;}
#sideMenu .login-menu{padding-top:20px;/* 20px - 모바일 시계 표시되는 영역 */background:#02b4cd;}
#sideMenu .login-menu .quick-children{display:flex;height:2.857rem;padding:.357rem 1.429rem 0 1.714rem;overflow:hidden;}
#sideMenu .login-menu .quick-children .tit{color:#fff;font-size:1rem;line-height:calc(2rem + 2px);}
#sideMenu .login-menu .quick-children .scroll{width:calc(100% - 7rem);height:5rem;padding:0 .5em;overflow-x:scroll;}
#sideMenu .login-menu .quick-children .children-list{font-size:0;}
#sideMenu .login-menu .quick-children .children-list li{display:inline-block;padding-left:.357rem;}
#sideMenu .login-menu .quick-children .children-list li:first-child{padding-left:0;}
#sideMenu .login-menu .quick-children .children-list a{display:inline-block;padding:0 .857rem;border:1px solid rgba(255,255,255,.5);border-radius:1.429rem;color:rgba(255,255,255,.7);font-size:1rem;line-height:2rem;}
#sideMenu .login-menu .user-info{display:flex;padding:1.357rem 1.714rem 1.714rem;overflow:hidden;}
#sideMenu .login-menu .user-info .icon{margin-right:1.286rem;}
#sideMenu .login-menu .user-info .name{color:#fff;font-size:1.5rem;font-weight:700;letter-spacing:-.03rem;width:65%;}
#sideMenu .login-menu .user-info .homeBtn{position: absolute;width:2.3rem;height:2.3rem;top:3.3rem;right: 1.4rem;background:url('/resources/images/icon/icon_home.png') 50% no-repeat;background-size: cover;}
#sideMenu .login-menu .user-info .parent{top:6.3rem;}
#sideMenu .login-menu .user-info .num{display:block;color:rgba(255,255,255,.5);font-size:1rem;font-weight:400;}
#sideMenu .side-content .title{padding:2rem 1.714rem .714rem;color:#496789;font-size:1.429rem;font-weight:700;letter-spacing:-.03rem;}
#sideMenu .side-content .setting-list{padding:0 1.429rem 1.143rem 1.714rem;}
#sideMenu .side-content .setting-list li{position:relative;min-height:3.214rem;padding:.786rem 3.7rem .786rem 0;color:#333;font-size:1.286rem;line-height:1.3;letter-spacing:-.03rem;word-break:keep-all;}
#sideMenu .side-content .setting-list.teacher li{font-size:1.071rem;line-height:1.5;}
#sideMenu .side-content .setting-list .btn-push{position:absolute;top:50%;right:0;margin-top:-1.071rem;}
#sideMenu .side-content .bot-info{display:flex;justify-content:space-between;padding:1.429rem 1.714rem;border-top:1px solid #e6e6e6;}
#sideMenu .side-content .bot-info .txt-version{display:inline-block;height:2.143rem;color:#999;font-size:1rem;line-height:2.143rem;}
#sideMenu .side-content .btn-logout{width:5rem;height:1.843rem;border-radius:2px;border:1px solid #bfbfbf;color:#333;font-size:1rem;letter-spacing:-.03rem;background:#ededed;float:right;margin: -36px 17px 0 0;}
#sideMenu .login-menu .user-info.teacher{padding:2.286rem 1.714rem 2rem;}
#sideMenu .login-menu .user-info.teacher .name{font-size:1.214rem;font-weight:700;}
#sideMenu .side-menu{background:#f9f9f9;}
#sideMenu .side-menu li{border-top:1px solid #e6e6e6;}
#sideMenu .side-menu li a{position:relative;display:block;height:3.143rem;padding:0 2rem 0 1.714em;color:#111;font-size:1.071rem;font-weight:700;line-height:3.143rem;}
#sideMenu .side-menu li a:after{position:absolute;top:50%;right:1.429rem;display:block;content:'';width:.643rem;height:1.072rem;margin-top:-.5rem;background:url('../images/common/arrow.png') 50% no-repeat;-webkit-background-size:cover;background-size:cover;}
#sideMenu .side-menu li:nth-child(3) a:after {
	transform: rotate(90deg);
}
#sideMenu .side-menu li:nth-child(3).on a:after {
	transform: rotate(-90deg);
}
#sideMenu .side-menu li:nth-child(3) .ingon-submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
#sideMenu .side-menu li:nth-child(3) .ingon-submenu a:after {
	transform: rotate(0deg);
}
#sideMenu .side-menu li:nth-child(3).on .ingon-submenu{
	max-height: 12.8rem;
}

.btn-push{position:relative;width:3.571rem;height:2.143rem;border-radius:1.071rem;border:1px solid #e5e5e5;background:#fff;}
.btn-push:after{position:absolute;top:0;right:0;display:block;content:'';width:2rem;height:2rem;border:1px solid #e5e5e5;border-radius:50%;box-shadow:0 3px 3px 0 rgba(0, 0, 0, .17);box-sizing:border-box;background:#fff;}
.btn-push.on{border:1px solid #0695a9;background:#02b4cd;}
.btn-push.on:after{left:0;right:inherit;border:0;}

.loading{text-align:center;}
.loading img{width:21.875%;height:auto;}

/* (해상도 320px 이하) */
@media screen and (max-width:320px) {
	#sideMenu{min-width:280px;}
	#sideMenu .side-content .setting-list{font-size:1.15rem;}
}

/* (해상도 360px 이상) */
@media screen and (min-width:360px) {
	.submenu{padding:0 1.429rem;}
	.submenu li a{padding:.429rem 0 1.071rem;}
}

/* (해상도 375px 이상) */
@media screen and (min-width:375px) {
	.hd-top-menu .user-info{font-size:1rem;}
	.page-hd-area .page-title{font-size:1.5rem;}
}

/* (해상도 568px 이상) */
@media screen and (min-width:568px) {
    html, body, input, textarea, select, button, table{font-size:16px;}
}

/* (해상도 768px 이상) */
@media all and (min-width:768px) {
    html, body, input, textarea, select, button, table{font-size:20px;}
}