/*
    ---------------------------------------------------------------------------     
	// edit: 2020.09.22 @powerway
	
	* 경로 수정
	 : ../../_common -> /static/alom
     : ../../images -> /static/alom/images
     
    ---------------------------------------------------------------------------     
*/
@charset "UTF-8";
/* FONT */
	@font-face {
		font-family: "NanumSquareRound";
		font-style: normal;
		font-weight: 300;
		src: local("NanumSquareRoundL"), /* computer */
		/* url("/static/alom/css/NanumSquareRoundL.eot"), */ /* IE9 Compat Modes */
		/* url("/static/alom/css/NanumSquareRoundL.eot?#iefix") format("embedded-opentype"), */ /* IE6-IE8 */
		url("/static/alom/css/NanumSquareRoundL.woff2") format("woff2"), /* Modern Browsers */
		url("/static/alom/css/NanumSquareRoundL.woff") format("woff"), /* Modern Browsers */
		url("/static/alom/css/NanumSquareRoundL.ttf") format("truetype"); /* Safari, Android, iOS */
	}
	@font-face {
		font-family: "NanumSquareRound";
		font-style: normal;
		font-weight: 400;
		src: local("NanumSquareRoundR"), /* computer */
		/* url("/static/alom/css/NanumSquareRoundR.eot"), */ /* IE9 Compat Modes */
		/* url("/static/alom/css/NanumSquareRoundR.eot?#iefix") format("embedded-opentype"), */ /* IE6-IE8 */
		url("/static/alom/css/NanumSquareRoundR.woff2") format("woff2"), /* Modern Browsers */    
		url("/static/alom/css/NanumSquareRoundR.woff") format("woff"), /* Modern Browsers */
		url("/static/alom/css/NanumSquareRoundR.ttf") format("truetype"); /* Safari, Android, iOS */
	}
	@font-face {
		font-family: "NanumSquareRound";
		font-style: normal;
		font-weight: 700;
		src: local("NanumSquareRoundB"), /* computer */
		/* url("/static/alom/css/NanumSquareRoundB.eot"), */ /* IE9 Compat Modes */
		/* url("/static/alom/css/NanumSquareRoundB.eot?#iefix") format("embedded-opentype"), */ /* IE6-IE8 */
		url("/static/alom/css/NanumSquareRoundB.woff2") format("woff2"), /* Modern Browsers */
		url("/static/alom/css/NanumSquareRoundB.woff") format("woff"), /* Modern Browsers */
		url("/static/alom/css/NanumSquareRoundB.ttf") format("truetype"); /* Safari, Android, iOS */
	}
	@font-face {
		font-family: "NanumSquareRound";
		font-style: normal;
		font-weight: 800;
		src: local("NanumSquareRoundEB"), /* computer */
		/* url("/static/alom/css/NanumSquareRoundEB.eot"), */ /* IE9 Compat Modes */
		/* url("/static/alom/css/NanumSquareRoundEB.eot?#iefix") format("embedded-opentype"), */ /* IE6-IE8 */
		url("/static/alom/css/NanumSquareRoundEB.woff2") format("woff2"), /* Modern Browsers */
		url("/static/alom/css/NanumSquareRoundEB.woff") format("woff"), /* Modern Browsers */
		url("/static/alom/css/NanumSquareRoundEB.ttf") format("truetype"); /* Safari, Android, iOS */
	}
/* RESET */
	html, body, div, p, span, strong, b, em, iframe, pre, h1, h2, h3, h4, h5, h6, img, dl, dt, dd, fieldset, form, legend, label, table, caption, thead, tbody, tfoot, tr, th, td, ul, ol, li, a, input, select, textarea {margin: 0; padding: 0; border: 0 none;}
	body {width: 100%; font-family: 'NanumSquareRound', sans-serif;}
	ul, ol, li {list-style: none;}
	em, address {font-style: normal;}
	img {border: 0 none; font-size: 0;line-height: 0;}
	sup {position: relative;top: 2px;font-size: 11px;line-height: 100%;}
	table {border-collapse: collapse; border-spacing:0; }
	caption {overflow: hidden;width: 0;height: 0;font-size: 0; line-height: 0;}
	th, td { vertical-align: middle;/* white-space: nowrap */}
	a {color: #333; text-decoration: none; line-height: 1;}
	a:hover, a:focus, a:active {text-decoration: none;}

	*, html {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
	*, *:before, *:after {box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

/* HEADE NAV */
	HEADER {width: 100%; height: 5rem; background: #0071ce; transition: all .35s;}

	HEADER NAV {width: 1240px; text-align: center; margin: 0 auto; position: relative;}
	HEADER NAV H1 {position: absolute; top: 50%; left: 0; width: 80px; transition: all .35s; z-index: 99}
	HEADER NAV H1 IMG {width: 100%; transform: translateY(-50%);}
	HEADER NAV H2 {display: none;}
	.gnb {width: 1240px; display: inline-block; position: relative;}
	.gnb A {font-size: 1.25rem; color: #fff; line-height: 5rem; margin: 0 1.6rem;}
	.gnb A.selected {color: #dde800; font-weight: 700;}
	.gnb UL {display: none;}

	.gnb .top_goto_brand {display: none; position: absolute; top:6rem; z-index: 99;}
	.gnb .top_goto_brand A {display: block; padding: .5rem 2.5rem .5rem 1rem; font-size: .875rem; line-height: 1rem; background: URL(/static/alom/images/icon_white_arrow.png) no-repeat 90% 50%; border: 1px solid #fff; border-radius: .625rem;}
	.gnb .top_banner-wrap {display: none; position: absolute; left: 0; top: 180px; z-index: 99;}

	.top_button-wrap {position: absolute; top: 1.5rem; right: 0;}
	.top_button-wrap A {display: block; font-size: .825rem; line-height: 2rem; margin: 0; padding: 0 2rem 0 1rem; border-radius: .625rem; background: URL(/static/alom/images/icon_member.png) 93% 50% #dde800 no-repeat; background-size: 15px 15px; border-color: #dde800; color: #0071ce;}

	.gnb .secon_menu {display: none; position: absolute; top: 93px; z-index: 99; text-align: center;}
	.gnb .secon_menu.first {left: 395px;}
	.gnb .secon_menu.second {left: 517px;}
	.gnb .secon_menu.third {left: 663px;}
	.gnb .secon_menu.fourth {left: 836px;}
	.gnb .secon_menu.fifth {width: 130px; left: 1102px;}
	
	.gnb .secon_menu.sixth {left: 455px;}
	.gnb .secon_menu.seventh {left: 593px;}
	.gnb .secon_menu.eighth {left: 758px;}
	.gnb .secon_menu.ninth {width: 150px; left: 1102px;}

	.gnb .secon_menu li a {font-size: 14px; display: block; line-height: 30px; color: #fff;}
	.gnb .secon_menu li a:hover {color: #dde800;}
	.gnb .secon_menu li a.selected {color: #dde800;}
	
	.full_navi_bg {display: none; position: absolute; top: 80px; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;width: 100%; background: #0071ce; height: 13rem; z-index: 98; border-radius: 0 0 2.25rem 2.25rem;-webkit-box-shadow: 0px 8px 20px -10px rgba(0,0,0,0.75); -moz-box-shadow: 0px 8px 20px -10px rgba(0,0,0,0.75); box-shadow: 0px 8px 20px -10px rgba(0,0,0,0.75);}

	.m-menu, .m-menu-close, .for-mobile {display: none;}
	@media all and (max-width:1241px){
		HEADER {width: 100%; height: 4rem; background: #0071ce; transition: all .35s;}
		HEADER NAV {width: 100%; height: 100%; text-align: center; margin: 0 auto; position: relative;}
		HEADER NAV H1 {position: absolute; top: 50%; left: 50%; width: 68px; transform: translate(-50%, -50%); transition: all .35s;}
		HEADER NAV H1 IMG {width: 100%; transform: translateY(0%); display: block;}
		HEADER NAV H2 {display: none; position: absolute; top: 70%; left: 50%; width: 8rem; transform: translate(-50%, -50%); transition: all .35s; z-index: 9999;}
		HEADER NAV H2 IMG {width: 100%; transform: translateY(0%); display: block;}
		.gnb {width: 100%; top: 6rem; border-top: 1px solid #e6ebee; z-index: 99;}
		.gnb, .top_button-wrap {display: none;}

		.gnb A {display: block; font-size: 1rem; color: #fff; line-height: 2.8rem; margin: 0; border-bottom: 1px solid #e6ebee;}
		.gnb A.selected {color: #dde800; font-weight: 700;}
		.gnb UL {display: none; border-bottom: 1px solid #e6ebee; margin-top: 1rem; padding-bottom: 1rem;}
		.gnb UL A {border-bottom: 0;}

		.top_button-wrap {position: relative; top: 1.5rem; right: 0;}
		.top_button-wrap A {display: block; font-size: .825rem; line-height: 2rem; margin: 0; padding: 0 2rem 0 1rem; border-radius: .625rem; background: URL(/static/alom/images/icon_member.png) 93% 50% #dde800 no-repeat; background-size: 15px 15px; border-color: #dde800; color: #0071ce;}

		.gnb .secon_menu {display: none; position: relative; top: 0; z-index: 99; text-align: center;}
		.gnb .secon_menu.first {left: 0;}
		.gnb .secon_menu.second {left: 0;}
		.gnb .secon_menu.third {left: 0;}
		.gnb .secon_menu.fourth {left: 0;}
		.gnb .secon_menu.fifth {width: 100%; left: 0;}
		
		.gnb .secon_menu.sixth {left: 0;}
		.gnb .secon_menu.seventh {left: 0;}
		.gnb .secon_menu.eighth {left: 0;}
		.gnb .secon_menu.ninth {width: 100%; left: 0;}

		.gnb .secon_menu li a {font-size: 14px; display: block; line-height: 1.5rem; color: #fff;}
		.gnb .secon_menu li a:hover {color: #dde800;}
		.full_navi_bg {display: none;}

		.gnb .top_goto_brand {display: none; position: relative; top: auto; display: block; z-index: 99; border-bottom: 1px solid #e6ebee;}
		.gnb .top_goto_brand A {display: block; width: 100%; padding: 0; font-size: 1rem; line-height: 2.8rem; background: URL(/static/alom/images/icon_white_arrow.png) no-repeat 90% 50%; border: 0px solid #fff; border-radius: .625rem;}
		.gnb .top_banner-wrap {display: none; position: relative; left: auto; top: auto; display: block; z-index: 99;}
		.gnb .top_banner-wrap A {margin-top: 1rem; text-align: center;}

		.m-menu {display: block; position: absolute; top: 50%; left: 2%; width: 29px; height: 26px; transform: translateY(-50%); transition: all .35s;}
		.m-menu SPAN {display: block; width: 100%; height: 3px; border-radius: 1px; background: #fff;}
		.m-menu SPAN:nth-child(1) {position: absolute; top: 1px;}
		.m-menu SPAN:nth-child(2) {position: absolute; top: 12px;}
		.m-menu SPAN:nth-child(3) {position: absolute; top: 23px;}
	}

	@media all and (min-width: 1241px) {
		#mobileMenuMask {display: none;}
	} @media all and (max-width:1241px){
		#mobileMenuMask {
			position:absolute; top:0; left:0;
			background: #0071ce;
			z-index:99;
			overflow: hidden;
		}
	}

/* HEADER PAGINATION */
	.pagination {width: 100%; height: 3.125rem; background: #e6ebee; border: 1px solid #c0cdd4; border-width: 1px 0;}
	.pagination .inner {width: 1240px; height: 3.125rem; margin: 0 auto;}
	.pagination:after {content: ''; display: block; clear: both;}
	.pagination .home {float: left; display: block; width: 3.5rem; height: 3rem; background: URL(/static/alom/images/icon_home.png) no-repeat 50%; border-left: 1px solid #c0cdd4; overflow: hidden;}
	.pagination .home SPAN {display: none;}
	.pagination .category {float: left; display: block; width: 10rem; padding-left: 1rem; font-size: .875rem; line-height: 3rem; color: #0071ce; border-left: 1px solid #c0cdd4; cursor: pointer;}
	.pagination .sub-category {float: left; display: block; width: 10rem; padding-left: 1rem; border-left: 1px solid #c0cdd4; border-right: 1px solid #c0cdd4; position: relative;}
	.pagination .sub-category H2 {font-size: .875rem; font-weight: 400; line-height: 3rem; color: #0071ce;}
	.pagination .sub-category UL {display: none;}
	.pagination .sub-category:hover UL {display: block; position: absolute; top: 48px; left: -1px; width: 200px; background: #fff; border: 1px solid #e4e4e4; border-width: 0 1px 1px 1px; z-index: 9;}
	.pagination .sub-category LI {font-size: .8125rem; font-weight: 400; line-height: 2.5rem; letter-spacing: -.04rem; border-top: 1px solid #e4e4e4; padding-left: 1rem;}
	.pagination .sub-category LI A {color: #666;}
	.pagination .sub-category LI:hover {background: #e4e4e4;}

	@media all and (max-width:1241px){
		.pagination .inner {width: 100%;}
		.pagination:after {content: ''; display: block; clear: both;}
		.pagination .home {float: left; display: block; width: 3.5rem; height: 3rem; background: URL(/static/alom/images/icon_home.png) no-repeat 50%; border-left: 1px solid #c0cdd4; overflow: hidden;}
		.pagination .home SPAN {display: none;}
		.pagination .category {width: 8rem; padding-left: .875rem; font-size: .875rem;}
		.pagination .sub-category {width: 8rem; padding-left: .875rem; border-right: 0;}
		.pagination .sub-category H2 {font-size: .875rem; font-weight: 400; line-height: 3rem; color: #0071ce;}
		.pagination .sub-category UL {display: none;}
		.pagination .sub-category:hover UL {display: none;}
	}

/* COMMON BODY */
	BODY.sub {background: #fff;}

/* JOIN */
	BODY.join {background: #e6ebee;}
	.join-body {width: 95%; max-width: 480px; margin: 3rem auto; background: #fff; border: 1px solid #d7d7db; border-radius: 14px; box-shadow: 0 0 8px 6px #dbe3ee;}
	.join-body SECTION {width: 82%; margin: 2rem auto;}
	.join-title-logo {width: 150px; margin: 0 auto 1.25rem;}
	.join-title-logo IMG {width: 100%;}
	.join-body H2 {font-size: 1.25rem; text-align: center; color: #0071ce; font-weight: 700; letter-spacing: -.09rem;}
	.join-body H3 {font-size: 1.25rem; color: #333; font-weight: 700; letter-spacing: -.09rem; text-align: center; overflow: hidden;}
	.join-body H3 SPAN {display: inline-block; position: relative; padding: 0 1rem;}
	.join-body H3 SPAN:before, .join-body H3 SPAN:after {
		content: '';
		display: block;
		width: 1000px;
		position: absolute;
		top: 0.5em;
		border-top: 1px dotted #ccc;
	}
	.join-body H3 SPAN:before {
		right: 100%;
	}
	.join-body H3 SPAN:after {
		left: 100%;
	}

	.join-body P.infor {width: 83%; font-size: .875rem; text-align: center; color: #999; font-weight: 400; letter-spacing: -.05rem; line-height: 1.25rem; margin: .5rem auto;}
	.join-body P.infor A {color: #0071ce;}
	.join-body P.infor.left {text-align: left;}
	.join-body P LABEL SPAN {color: #0071ce; margin-left: .2rem;}
	.join-body P LABEL SPAN.optional {color: #666;}
	.join-body TEXTAREA {width: 100%; height: 6rem; border: 1px solid #d7d7db; border-radius: 6px;}

	.join-body .button-wrap {width: 82%; text-align: center; margin: 1rem auto;}
	.join-body .button-wrap .btn {font-size: .875rem; line-height: 2.9rem; text-align: center; border-radius: 6px;}
	.join-body .button-wrap .btn.btn-half {width: 48%; margin: 0 .5%;}
	.join-body .button-wrap .btn.btn-full {width: 99%; margin: 0 .5%;}
	.btn-cancle {background: none; color: #0071ce; border: 1px solid #0071ce;}
	.btn-confirm {background: #0071ce; color: #fff; border: 1px solid #0071ce;}
	.btn-join {background: #dde800; color: #0071ce; border: 1px solid #dde800;}

/* CUSTOM CHECKBOX */
	.checks {position: relative; margin: .6rem auto;}

	.checks input[type="checkbox"] {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip:rect(0,0,0,0);
		border: 0
	}
	.checks input[type="checkbox"] + label {
		display: inline-block;
		position: relative;
		cursor: pointer;
		font-size: .825rem;
		line-height: 1rem;
		color: #666;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
	}
	.checks input[type="checkbox"] + label:before {
		content: ' ';
		display: inline-block;
		width: 1rem;
		height: 1rem;
		line-height: 1rem;
		margin: -2px 3px 0 0;
		text-align: center; 
		vertical-align: middle;
		background: #fff;
		border: 1px solid #cacece;
		border-radius : 3px;
		box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	}
	.checks input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before {
		box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
	}
	.checks input[type="checkbox"]:checked + label:before {
		content: '\2714';
		color: #99a1a7;
		text-shadow: 1px 1px #fff;
		background: #e9ecee;
		border-color: #adb8c0;
		box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	}

	.checks.etrans input[type="checkbox"] + label {
		padding-left: 1.4rem;
	}
	.checks.etrans input[type="checkbox"] + label:before {
		position: absolute;
		left: 0;
		top: 0;
		margin-top: 0;
		opacity: 1;
		box-shadow: none;
		border-color: #0071ce;
		-webkit-transition: all .12s, border-color .08s;
		transition: all .12s, border-color .08s;
	}
	.checks.etrans input[type="checkbox"]:checked + label:before {
		position: absolute;
		content: "";
		width: 10px;
		top: -5px;
		left: 5px;
		border-radius: 0;
		opacity:1; 
		background: transparent;
		border-color:transparent #0071ce #0071ce transparent;
		border-top-color:transparent;
		border-left-color:transparent;
		-ms-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	.no-csstransforms .checks.etrans input[type="checkbox"]:checked + label:before {
		content: "\2714";
		top: 0;
		left: 0;
		width: 21px;
		line-height: 21px;
		color: #6cc0e5;
		text-align: center;
		border: 1px solid #6cc0e5;
	}
	.policy-area {width: 100%; height: 6rem; border: 1px solid #d7d7db; border-radius: 6px; padding: 1rem; margin-bottom: .8rem; overflow-y: auto;}
	.policy-area DIV {font-size: .725rem; line-height: 1rem; color: #666;}
	.policy-area DIV H6 {font-size: .725rem; line-height: 1.3rem; color: #666; margin: 1rem auto;}

	.keyin input[type="text"], .keyin input[type="email"], .keyin input[type="password"] {
		width: 100%;
		height: 2.1rem;
		font-size: .825rem;
		color: #333;
		line-height: 2.1rem;
		padding: 0 0 0 .5rem;
		border: 1px solid #ddd;
		border-radius: 4px;
		margin: .2rem auto;
	}
	.keyin LABEL {display: block; font-size: .875rem; color: #999; font-weight: 400; letter-spacing: -.02rem; line-height: 1.25rem; margin: .5rem auto .1rem;}
	.keyin input[type="text"]::placeholder, input[type="email"]::placeholder, .keyin input[type="password"]::placeholder {color: #c7d0d6; letter-spacing: -.05rem;}
	.keyin SPAN {display: block; font-size: .825rem; line-height: 1.3rem; color: #6fba2c; margin: .4rem auto .7rem;}

	.form-end {margin: 1rem auto 2rem;}

/* SNS LOGIN */
	.sns-login-wrap {width: 96%; margin: 1.6rem auto 1rem;}
	.sns-login-wrap:after {content: ''; display: block; clear: both;}
	.sns-login-wrap LI {float: left; width: 25%; text-align: center;}
	.sns-login-wrap LI P {width: 3rem; height: 3rem; overflow: hidden; border-radius: 50%; margin: 0 auto .5rem;}
	.sns-login-wrap LI P.kakao {background: URL(/static/alom/images/img_kakao_login_btn.svg) no-repeat; background-size: cover; background-position: -.6rem 0;}
	.sns-login-wrap LI P.naver {background: URL(/static/alom/images/img_naver_login_btn.svg) no-repeat; background-size: cover; background-position: -.6rem 0;}
	.sns-login-wrap LI P.face {background: URL(/static/alom/images/img_faceBook_login_btn.svg) no-repeat; background-size: cover; background-position: -.6rem 0;}
	.sns-login-wrap LI P.google {background: URL(/static/alom/images/img_google_login_btn.svg) no-repeat; background-size: cover; background-position: -.6rem 0;}
	.sns-login-wrap LI SPAN {font-size: .8rem; color: #666; line-height: 1rem; text-align: center;}
	@media all and (max-width:456px){
		.sns-login-wrap LI SPAN {display: none;}
	}
	
		
	/* add:2020.10.23 @syk 소셜 로그인 이미지 깨져서 JHWeb에서 전달한 소스 */
	@media all and (-ms-high-contrast:none) {
	 .foo { color: green } /* IE10 */
		*::-ms-backdrop, .kakao, .naver, .google, .face { 
			/*@media all and (-ms-high-contrast:none)*/
			background-image: url( "../../images/img-kakao-login.png") !important;
			background-position-x: 0 !important;
			background-position-y: 0 !important;
			/* -webkit-background-size: ; */
		} /* IE11 */
		*::-ms-backdrop, .kakao { background-image: url( "/static/alom/images/img-kakao-login.png") !important; } /* IE11 */
		*::-ms-backdrop, .naver { background-image: url( "/static/alom/images/img-naver-login.png") !important; } /* IE11 */
		*::-ms-backdrop, .face { background-image: url( "/static/alom/images/img-face-login.png") !important; } /* IE11 */
		*::-ms-backdrop, .google { background-image: url( "/static/alom/images/img-google-login.png") !important; } /* IE11 */
	 }
	
/* MAIN PAGE */
	.main-back {background: linear-gradient(to bottom, #e7ebed 40%, #fff 40% 100%);}
	.membership-status {width: 1240px; margin: /* 0 auto .75rem; */ 0 auto; font-size: .875rem; text-align: right; line-height: 3.75rem;}
	.membership-status H2 {display: inline-block; font-size: .875rem; color: #0071ce; font-weight: 400;}
	.membership-status H2 SPAN {margin-left: .5rem;}
	.membership-status H3 {display: inline-block; font-size: .875rem; color: #666;;}
	.membership-status H3 SPAN {margin-left: .5rem;}
	.membership-status SPAN.tilde {font-size: .875rem; color: #0071ce; font-weight: 800;}

	section.teacher-main {width: 1240px; margin: 0 auto 4rem;}
	section.teacher-main:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-left {float: left; width: 16.125rem;}
	.main-left:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-left .logo-and-name {width: 100%; background: #fafbfb; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 1.5rem; margin-bottom: 1.25rem;}
	.main-left .logo-and-name P.logo {width: 100%; height: 13rem; min-height: 13rem; background: #fff; border: 1px solid #e4e4e4; border-radius: 4px; position: relative;}
	.main-left .logo-and-name P.logo IMG {position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%);}
	.main-left .logo-and-name H3.name {font-size: .875rem; color: #0071ce; text-align: center; margin-top: .5rem;}
	.main-left .logo-and-name H3.name SPAN {font-weight: 400; color: #666;}
	
	.main-left #orgLogoImg {position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%;	max-width: calc(100% - 15px); max-height: calc(100% - 15px);}
	.main-left #orgName {font-size: 1.4rem; line-height: 1.5; z-index: 10;}
	
	.main-left .short-cut {width: 100%; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 1.5rem; margin-bottom: 1.25rem;}
	.main-left .short-cut H3 {font-size: 1.125rem; color: #0071ce; text-align: center; letter-spacing: -.05rem;}
	.main-left .short-cut UL {width: 100%; margin: 1.25rem auto 0;}
	.main-left .short-cut UL:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-left .short-cut LI {float: left; width: 33.333%; text-align: center;}
	.main-left .short-cut LI P {font-size: .75rem; color: #666; text-align: center; margin-bottom: .5rem;}
	.main-left .short-cut LI:nth-child(4) P, .main-left .short-cut LI:nth-child(5) P, .main-left .short-cut LI:nth-child(6) P {margin-bottom: 0;}

	.main-left .center-infor {width: 100%; background: #e7ebed; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 1.5rem;}
	.main-left .center-infor H3 {font-size: 1.125rem; color: #0071ce; text-align: center; letter-spacing: -.05rem;}
	.main-left .center-infor P.time {font-size: .8125rem; color: #333; text-align: center; margin: .5rem auto;}
	.main-left .center-infor H4 {font-size: 2.25rem; color: #0071ce; font-weight: 800; text-align: center; letter-spacing: -.125rem;}
	.main-left .center-infor H4 A {color: #0071ce;}
	.main-left .center-infor H4 A SPAN {font-weight: 300;}
	.main-left .center-infor P.mail {font-size: .75rem; text-align: center; margin: .5rem auto;}
	.main-left .center-infor P.mail A {display: block; color: #666; background: URL(/static/alom/images/icon_main_black.png) no-repeat 24% 50%; padding-left: 8%;}
	.main-left .center-infor .button-wrap {text-align: center; margin-top: 1rem;}
	.main-left .center-infor .button-wrap A {display: inline-block; width: 38%; font-size: .75rem; text-align: center; line-height: 1.5rem; color: #fff; background: #747474; border-radius: .25rem;}
	.main-left .center-infor .button-wrap A:hover {background: #01aebc;}

	.main-middle {float: left; width: 39.875rem; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 0; margin: 0 1.25rem;}
	.main-middle .status {margin: 0 1.25rem;}
	.main-middle .status:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-middle .status H3 {font-size: 1.125rem; color: #0071ce; text-align: center; letter-spacing: -.05rem;}
	.main-middle .status SPAN.time {display: block; font-size: .8125rem; color: #666; text-align: center; margin: .5rem auto 1.15rem;}
	.main-middle .status DIV.card {/* float: left; */ width: 23%; min-height: 7.25rem; border: 1px solid #e4e4e4; border-radius: .25rem; margin: 0 1%; /*background: linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 1px), rgba(192,192,192,1) calc(50%), rgba(0,0,0,0) calc(50% + 1px));*/position: relative;}
	.main-middle .status DIV.card H4 {font-size: 1rem; text-align: center; line-height: 2.25rem; color: #666; background: #e7ebed;}
	.main-middle .status DIV.card P {float: left; width: 98%; text-align: center; font-size: 2.25rem; color: #0071ce; font-weight: 800; margin: .5rem 1%;}
	.main-middle .status DIV.card P.half {width: 48%;}
	.main-middle .status DIV.card P.half:after {content: ""; position: absolute; z-index: 1; top: 40%; bottom: 10%; left: 50%; border-left: 1px dotted #e7ebed; transform: translate(-50%);}
	.main-middle .status DIV.card P SPAN {display: block; font-size: 0.75rem; color: #999; font-weight: 400; margin-top: .25rem;}
	.main-middle .ing-class {width: 100%; text-align: center; background: #fafbfb; padding: 1.625rem 0 5rem; margin-top: 1.625rem; position: relative;}
	.main-middle .ing-class DIV H3 {font-size: 1.125rem; color: #0071ce; text-align: center; letter-spacing: -.05rem;}
	.main-middle .ing-class DIV H4 {font-size: 1rem; line-height: 1.5rem; color: #333; text-align: center; letter-spacing: -.05rem; margin-top: .75rem;}
	.main-middle .ing-class DIV H4 SPAN {display: inline-block; font-size: .75rem; line-height: 1.5rem; color: #0071ce; background: #dde800; border-radius: .25rem; padding: 0 .5rem; margin-right: .25rem; position: relative; top: -2px;}
	.main-middle .ing-class DIV P.date {font-size: .875rem; color: #666; text-align: center; line-height: 1.5rem;}
	.main-middle .ing-class DIV DIV.inner-box {display: inline-block; margin: 2rem 1.5rem 1rem;}
	.main-middle .ing-class DIV DIV.inner-box DIV.round {width: 6.625rem; height: 6.625rem; background: #fff; border: 8px solid #e8eaed; border-radius: 50%;}
	.main-middle .ing-class DIV DIV.inner-box DIV.round.grey {background: #e8eaed;}
	.main-middle .ing-class DIV DIV.inner-box DIV.round P.image-day {margin-top: 1rem;}
	.main-middle .ing-class DIV DIV.inner-box DIV.round P.text-day {font-size: 1.25rem; font-weight: 800; color: #0071ce; text-align: center;}
	.main-middle .ing-class DIV DIV.inner-box DIV.round P.image-member {margin: .7rem auto .3rem;}
	.main-middle .ing-class DIV DIV.inner-box DIV.round P.text-member {font-size: 1.25rem; font-weight: 800; color: #0071ce; text-align: center;}
	.main-middle .ing-class DIV DIV.inner-box DIV.round P.text-rate {/* margin-top: 2.2rem; */ font-size: 1.25rem; font-weight: 800; color: #0071ce; /* text-align: center; */}
	.main-middle .ing-class DIV DIV.inner-box H5 {font-size: 0.875rem; color: #666; font-weight: 400; text-align: center; margin-top: .6rem;}
	.main-middle .ing-class DIV DIV.buttons {margin-top: .725rem;}
	.main-middle .ing-class DIV DIV.buttons A {display: inline-block; font-size: .75rem; text-align: center; line-height: 1.5rem; color: #fff; background: #747474; border-radius: .25rem; padding: 0 1.5rem;}
	.main-middle .ing-class DIV DIV.buttons A:hover {background: #0071ce;}

	.main-middle .notice {margin: 1rem 1.5rem 0;}
	.main-middle .notice H3 {font-size: 1.125rem; color: #0071ce; text-align: left; letter-spacing: -.05rem; padding: .5rem 0;}
	.main-middle .notice H3:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-middle .notice H3 A {float: right; display: inline-block; padding: 0; font-size: .875rem; line-height: 1.75rem; text-align: center; border-radius: 8px; background: #0071ce; color: #fff; padding: 0 .75rem;}
	.main-middle .notice UL {}
	.main-middle .notice UL:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-middle .notice LI {font-size: .875rem; padding: .5rem 0; border-bottom: 1px solid #e4e6ea;}
	.main-middle .notice LI A {display: inline-block; width: 70%; color: #999; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
	.main-middle .notice LI P {float: right; font-size: .75rem; color: #999;}

	/*
	.main-right {float: right; width: 19rem; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 1.5rem; margin: 0; background: linear-gradient(to bottom, #fafbfb 30%, #fff 30% 100%);}
	*/
	.main-right {float: right; width: 19rem; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 1.5rem; margin: 0;}
	
	.main-right H3 {font-size: 1.125rem; color: #0071ce; text-align: center; letter-spacing: -.05rem;}
	.main-right P.date {display: block; font-size: .875rem; color: #666; text-align: center; margin: .5rem auto 1rem;}
	.main-right TABLE.calendar {width: 100%; font-size: .875rem; text-align: center;}
	.main-right TABLE.calendar.title {margin-bottom: 1rem;}
	.main-right TABLE.calendar TH {color: #999; font-weight: 400; line-height: 2rem; border: 1px solid #e1e3e6; border-width: 1px 0;}
	.main-right TABLE.calendar TD {font-size: .875rem; text-align: center; padding: .125rem;}
	.main-right TABLE.calendar TD A {display: block; background: #e7ebed; line-height: 2.25rem; border-radius: .25rem; position: relative;}
	.main-right TABLE.calendar TD A.today {color: #0071ce; background: #dde800;}
	.main-right TABLE.calendar TD A P {width: 70%; height: .125rem; background: #fff; position: absolute; bottom: 10%; left: 15%;}
	.main-right TABLE.calendar TD A P.data {background: #ec7aad;}

	.main-right .list-wrap {}
	.main-right .list-wrap H4 {font-size: .875rem; color: #0071ce; text-align: center; letter-spacing: -.05rem; margin: 1rem 0;}
	.main-right .list-wrap H4 {display: table; white-space: nowrap; padding: 0 1rem;}
	.main-right .list-wrap H4:before, .main-right .list-wrap H4:after {border-top: 1px solid #0071ce; content: ''; display: table-cell; position: relative; top: 0.5em; width: 50%;}
	.main-right .list-wrap H4:before {right: 5%;}
	.main-right .list-wrap H4:after {left: 5%;}
	.main-right .list-wrap .infor-box { /* height: 8rem; */ overflow: auto; background: #fafbfb; padding: 1rem; border: 1px solid #e1e3e6; border-width: 1px 0; margin-bottom: 1.25rem;}
	.main-right .list-wrap .infor-box UL {font-size: .875rem; line-height: 1.5rem;}
	.main-right .list-wrap .infor-box LI {width: 100%; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
	.main-right .list-wrap .infor-box LI A {color: #999;}

	.main-right  .banner-wrap {width: 100%; height: 12rem; color: #999; background: #bc3362; border: 1px solid #e4e4e4; border-radius: 1.125rem; overflow: hidden; position: relative;}
	.main-right  .banner-wrap H3 {font-size: .625rem; line-height: .75rem; font-weight: 400; color: #fff; background: #c55078; border: 1px solid #fff; border-radius: .1875rem; padding: 0 .25rem; position: absolute; top: .625rem; left: .625rem;}
	.main-right  .banner-wrap H4 {font-size: 1.5rem; font-weight: 400; color: #fff; position: absolute; bottom: 1.4rem; right: 1rem;}
	.main-right  .banner-wrap DIV.description {width: 60%; font-size: .8125rem; font-weight: 400; color: #f2b9cd; text-align: right; line-height: 1rem; position: absolute; top: 1.6rem; right: 1rem;}
	.main-right  .banner-wrap P.bnr_img_1 {position: absolute; bottom: -3rem; left: -1rem;}
	.main-right  .banner-wrap P.bnr_img_2 {position: absolute; top: 2.7rem; left: 1rem;}
	.main-right  .banner-wrap P.bnr_img_3 {position: absolute; top: 7rem; left: 1.8rem;}
	.main-right  .banner-wrap P.bnr_img_4 {position: absolute; top: 9.8rem; left: .5rem;}
	.main-right  .banner-wrap P.bnr_img_5 {position: absolute; top: 4rem; right: -1.5rem;}
	.main-right  .banner-wrap P.bnr_img_5 IMG {width: 70%;}
	
	.main-middle DIV.card {box-shadow:none;}

	@media all and (min-width:320px) and (max-width:681px) {
		.membership-status {width: 96%; margin: /* 0 auto .75rem; */ 0 auto; font-size: .875rem; text-align: center; line-height: 1.25rem; padding: 1rem 0;}
		.main-back {background: linear-gradient(to bottom, #e7ebed 20%, #fff 20% 100%);}
		section.teacher-main {width: 96%; margin: 0 auto 4rem;}
		.main-left {float: none; width: 98%; margin: 1% 1%;}
		.main-middle {float: none; width: 98%; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 0; margin: 1% 1%;}
		.main-middle .ing-class DIV H4 {width: 88%; font-size: 1rem; line-height: 1.5rem; color: #333; text-align: center; letter-spacing: -.05rem; margin: .75rem auto 0;}
		.main-middle .status DIV.card {float: left; width: 48%; min-height: 7.25rem; border: 1px solid #e4e4e4; border-radius: .25rem; margin: 1% 1%; /*background: linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 1px), rgba(192,192,192,1) calc(50%), rgba(0,0,0,0) calc(50% + 1px));*/position: relative;}
		.main-right {float: none; width: 98%; margin: 0 1%; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 1.5rem; background: linear-gradient(to bottom, #fafbfb 30%, #fff 30% 100%);}
	} @media all and (min-width:682px) and (max-width:1240px){
		.membership-status {width: 98%; margin: /* 0 auto .75rem; */ 0 auto; font-size: .875rem; text-align: right; line-height: 3.75rem;}
		.main-back {background: linear-gradient(to bottom, #e7ebed 20%, #fff 20% 100%);}
		section.teacher-main {width: 100%; margin: 0 auto 4rem;}
		.main-left {float: left; width: 48%; margin: 0 1%;}
		.main-middle {float: left; width: 98%; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 0; margin: 1% 1%;}
		.main-right {float: left; width: 48%; margin: 0 1%; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 1.5rem; background: linear-gradient(to bottom, #fafbfb 30%, #fff 30% 100%);}
	}

/* MAIN PAGE FOR STUDENT */
	.main-student-middle {float: left; width: 39.875rem; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 0; margin: 0 1.25rem;}

	.main-student-middle .dashboard {margin: 0 1.25rem 1.25rem;}
	.main-student-middle .dashboard:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-student-middle .dashboard H3 {font-size: 1.125rem; color: #0071ce; letter-spacing: -.05rem; border-bottom: 1px solid #e4e4e4; margin-bottom: 1rem; padding-bottom: .75rem;}
	.main-student-middle .dashboard H3:after {content: ""; display: block; clear: both;}
	.main-student-middle .dashboard H3 SPAN.time {float: right; display: block; font-size: .8125rem; color: #666; text-align: center;}

	.main-student-middle .dashboard DIV.card {float: left; min-height: 15.63rem; background: #fdfdfd; border: 1px solid #e4e4e4; border-radius: .25rem; margin: 0 1%; /*background: linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 1px), rgba(192,192,192,1) calc(50%), rgba(0,0,0,0) calc(50% + 1px));*/position: relative;}
	.main-student-middle .dashboard DIV.card:nth-child(2) {width: 23%;}
	.main-student-middle .dashboard DIV.card:nth-child(3) {width: 38%;}
	.main-student-middle .dashboard DIV.card:nth-child(4 ) {width: 33%;}
	.main-student-middle .dashboard DIV.card H4 {width: 90%; font-size: 1rem; text-align: center; line-height: 2.25rem; color: #fff; background: #0071ce; border-radius: 0 0 .5rem .5rem; margin: 0 auto;}
	
	/*
	.main-student-middle .dashboard DIV.card DIV.content {width: 96%; height: 12.5rem; background: #faa; margin: .5rem auto 0;}
	*/
	.main-student-middle .dashboard DIV.card DIV.content {width: 96%; height: 12.5rem; margin: .5rem auto 0;}
	
	.main-student-middle .dashboard DIV.card P.image {width: 98%; text-align: center; margin: 2rem 1% 1rem;}

	/*
	.main-student-middle .dashboard DIV.card P.point {width: 98%; text-align: center; font-size: 1.5rem; color: #0071ce; font-weight: 800; margin: .75rem 1% .25rem;}
	*/
	.main-student-middle .dashboard DIV.card P.point {text-align: center;}
	#pred_score_start, #pred_score_end {font-size: 1.5rem;color: #0071ce;font-weight: 800;margin: .75rem 1% .25rem;}
	
	.main-student-middle .dashboard DIV.card P SPAN {display: inline-block; font-size: 0.875rem; color: #999; font-weight: 400; margin-top: .25rem; position: relative; top: -3px;}
	.main-student-middle .dashboard DIV.card P.infor {width: 98%; text-align: center; font-size: .75rem; color: #999; font-weight: 400; margin: 0 1%;}
	
	.main-student-middle .status {margin: 0 1.25rem;}
	.main-student-middle .status:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-student-middle .status H3 {font-size: 1.125rem; color: #0071ce; letter-spacing: -.05rem; border-bottom: 1px solid #e4e4e4; margin-bottom: 1rem; padding-bottom: .75rem;}
	.main-student-middle .status H3:after {content: ""; display: block; clear: both;}
	.main-student-middle .status H3 SPAN.time {float: right; display: block; font-size: .8125rem; color: #666; text-align: center;}

	.main-student-middle .status DIV.card {float: left; width: 23%; min-height: 7.25rem; border: 1px solid #e4e4e4; border-radius: .25rem; margin: 0 1%; /*background: linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 1px), rgba(192,192,192,1) calc(50%), rgba(0,0,0,0) calc(50% + 1px));*/position: relative;}
	.main-student-middle .status DIV.card H4 {font-size: 1rem; text-align: center; line-height: 2.25rem; color: #666; background: #e7ebed;}
	.main-student-middle .status DIV.card P {float: left; width: 98%; text-align: center; font-size: 2.25rem; color: #0071ce; font-weight: 800; margin: .75rem 1%;}
	.main-student-middle .status DIV.card P.half {width: 48%;}
	.main-student-middle .status DIV.card P.half:after {content: ""; position: absolute; z-index: 1; top: 40%; bottom: 10%; left: 50%; border-left: 1px dotted #e7ebed; transform: translate(-50%);}
	
	/*
	.main-student-middle .status DIV.card P SPAN {display: block; font-size: 0.75rem; color: #999; font-weight: 400; margin-top: .25rem;}
	*/
	.main-student-middle .status DIV.card P SPAN:last-child {display: block; font-size: 0.75rem; color: #999; font-weight: 400; margin-top: .25rem;}

	.main-student-middle .study {margin: 1.2rem 1.25rem 0;}
	.main-student-middle .study:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.main-student-middle .study H3 {font-size: 1.125rem; color: #0071ce; letter-spacing: -.05rem; padding-bottom: .75rem;}
	.main-student-middle .study H3:after {content: ""; display: block; clear: both;}
	.main-student-middle .study H3 SPAN.time {display: inline-block; font-size: .8125rem; color: #666; margin-left: 1rem;}
	.main-student-middle .study H3 A {float: right; display: inline-block; padding: 0; font-size: .875rem; line-height: 1.75rem; text-align: center; border-radius: 8px; background: #0071ce; color: #fff; padding: 0 .75rem;}
	.main-student-middle .study TABLE {width: 100%; font-size: .825rem;}
	.main-student-middle .study TH {font-weight: 700; font-size: .875rem; line-height: 2.25rem; text-align: center;  border-top: 1px solid #0071ce; border-bottom: 1px solid #bababa;}
	.main-student-middle .study TD {padding: .5rem 1%; line-height: 20px; color: #999; text-align: center; border-bottom: 1px solid #d1d5dc; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
	.main-student-middle .study TD.wide {padding: .5rem 2%; text-align: left;}
	.main-student-middle .study TD SPAN.point {display: inline-block; padding: 0; font-size: .825rem; line-height: 1.5rem; text-align: center; border-radius: 4px; background: #666; color: #fff; padding: 0 .75rem;}

	.main-student-middle DIV.card {box-shadow:none;}
	
	@media all and (min-width:320px) and (max-width:681px) {
		.main-student-middle {float: none; width: 98%; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 0; margin: 1% 1%;}
		.main-student-middle .ing-class DIV H4 {width: 88%; font-size: 1rem; line-height: 1.5rem; color: #333; text-align: center; letter-spacing: -.05rem; margin: .75rem auto 0;}
		.main-student-middle .status DIV.card {float: left; width: 48%; min-height: 7.25rem; border: 1px solid #e4e4e4; border-radius: .25rem; margin: 1% 1%; /*background: linear-gradient(90deg, rgba(0,0,0,0) calc(50% - 1px), rgba(192,192,192,1) calc(50%), rgba(0,0,0,0) calc(50% + 1px));*/position: relative;}

		.main-student-middle .dashboard DIV.card {float: none; display: block; margin-bottom: .5rem;}
		.main-student-middle .dashboard DIV.card:nth-child(2), .main-student-middle .dashboard DIV.card:nth-child(3), .main-student-middle .dashboard DIV.card:nth-child(4 ) {width: 98%;}
		.main-student-middle .study .inner {width: 100%; overflow: auto;}

	} @media all and (min-width:682px) and (max-width:1240px){
		.main-student-middle {float: left; width: 98%; background: #fff; border: 1px solid #e4e4e4; border-radius: 1.125rem; padding: 1.875rem 0; margin: 1% 1%;}
	}

/* BOARD LIST COMMON */
	.subpage-wrap {width: 1240px; margin: 0 auto 2.5rem;}
	H3.subpage-title {font-size: 1.5rem; letter-spacing: -.05rem; color: #0071ce; font-weight: 700; line-height: 3rem; margin: 2.125rem auto;}
	H3.subpage-title A {display: inline-block; font-size: .8125rem; margin: 0 2rem 0 1rem; position: relative; top: /* -.35rem; */ -.15rem; }
	H3.subpage-title A.tinyGap {margin: 0 .25rem;}
	.rnd-button {padding: .625rem 1.28rem; border-radius: .625rem;}
	.back-green {background: #dde800;}
	.border-green {border-color: #dde800;}
	.clr-blue {color: #0071ce;}
	.back-blue {background: #0071ce;}
	.border-blue {border-color: #0071ce;}
	.clr-green {color: #dde800;}

/* BOARD TOP INFOR & TOP SEARCH */
	.infor-wrap {width: 100%; margin: 0 0 1.25rem; border: 1px solid #ec7aad; background: #fbfbfb; padding: 1rem 2rem; position: relative;}
	.infor-wrap H4 {font-size: .875rem; color: #ec7aad; line-height: 1.125rem; margin-bottom: .25rem;}
	.infor-wrap P {font-size: .8125rem; color: #666; line-height: 1.125rem;}
	.infor-wrap P:before {content: "•"; display: inline-block; margin-right: .125rem;}
	.infor-wrap .program {
		position: absolute; top: 50%; right: 2rem; display: block;
		/* font-size: .825rem; line-height: 1.625rem; color: #fff; padding: .25rem 1.28rem; border: 1px solid #ec7aad; border-radius: .625rem; background: #ec7aad; */
		transform: translateY(-50%);
	}

	.search-wrap {width: 100%; margin: 0; border: 1px solid #0071ce; background: #f8f9fa;}
	.search-wrap.broder-top-bottom {border-width: 1px 0; padding: .935rem 1.5rem;}
	.search-wrap.noBroder-top-bottom {border-width: 0; padding: .935rem 1.5rem;}
	.search-wrap.center {text-align: center;}
	.search-wrap.padding {padding: 1.75rem 0;}
	.search-wrap .cls-name-select {display: inline-block; width: 34%;}
	.search-wrap .cls-name-select SELECT {width: 100%; font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem;}
	.search-wrap .cls-period-select {display: inline-block; width: 30%; text-align: right;}
	.search-wrap .cls-period-select INPUT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; outline: none; cursor: pointer;}
	.search-wrap .cls-period-select INPUT.show-all {background: #333; color: #fff;}
	.search-wrap .cls-period-select INPUT.selected {background: #fff;}
	.search-wrap .cls-date-select {display: inline-block; width: 34%; text-align: right;}
	.search-wrap .cls-date-select INPUT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem; outline: none; cursor: pointer; background: #fff;}
	.search-wrap .cls-class-select {display: inline-block; width: 30%;}
	.search-wrap .cls-class-select SELECT {width: 100%; font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem;}
	.search-wrap .cls-studentname-select {display: inline-block; width: 34%; text-align:right;}
	.search-wrap .cls-studentname-select SELECT {width: 60%; font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1.25rem; outline: none; cursor: pointer;}
	.search-wrap .keyword-wrap {display: inline-block; width: 35%; text-align: right;}
	.search-wrap .keyword-wrap INPUT[type=text] {width: 80%; font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem;}
	.search-wrap .keyword-wrap INPUT[type=button] {width: 16%; font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0;}

/* BOARD LIST TOP CHOICE */
	.choose-wrap {margin: .875rem 0; text-align: right;}
	.choose-wrap A.choose {display: inline-block; padding: 0; font-size: 14px; line-height: 1.75rem; text-align: center; border-radius: 8px; padding: 0 .5rem;}
	.choose-wrap A.choose.make {background: #fff; color: #0071ce; border: 1px solid #0071ce;}
	.choose-wrap A.choose.download {background: #0071ce; color: #fff; border: 1px solid #0071ce;}
	.choose-wrap A.choose.publish {background: #dde800; color: #0071ce; border: 1px solid #dde800;}

/* BOARD LIST */
	/*
	.article-list TABLE {width: 100%; font-size: .875rem;}
	.article-list TH {font-weight: 700; line-height: 2.5rem; text-align: center;  border-top: 1px solid #0071ce; border-bottom: 1px solid #bababa;}
	.article-list TABLE.no-top-border TH {font-weight: 700; line-height: 2.5rem; text-align: center;  border-top: 0px solid #0071ce; border-bottom: 1px solid #bababa;}
	.article-list TD {padding: .625rem 1%; line-height: 20px; color: #999; text-align: center; border-bottom: 1px solid #d1d5dc;}
	.article-list TD.wide {padding: .625rem 2%; text-align: left;}
	.article-list TD.wide A {color: #999;}
	.article-list TD.wide A:hover {color: #0071ce;}
	.article-list TD INPUT[type=checkbox] {position: relative; top: 2px;}
	.article-list TD SPAN.label {display: inline-block; min-width: 1.75rem; padding: .25rem; text-align: center; border-radius: 4px;}
	.article-list TD SPAN.label.grey {background: #747474; color: #fff;}
	.article-list TD A.pdf {display: block; padding: 0; font-size: 12px; line-height: 1.5rem; text-align: center; border-radius: 4px;}
	.article-list TD A.pdf.ready {color: #fff; background: #ec7aad;}
	.article-list TD A.pdf.publish {color: #0071ce; background: #dde800;}
	.article-list TD A.pdf.prepare {color: #fff; background: #01aebc;}
	.article-list TD A.pdf.create {color: #fff; background: #01aebc;}
	.article-list TD A.pdf.download {color: #fff; background: #0071ce;}
	.article-list TD A.pdf.error {color: #ddd; background: #999;}
	.article-list TD A.exam{display: block; padding: 0; font-size: 12px; line-height: 1.5rem; text-align: center; border-radius: 4px;}
	.article-list TD A.exam.make {color: #fff; background: #0071ce;}
	.article-list TD A.exam.auto {color: #fff; background: #666;}
	.article-list TD A.exam.complete {color: #fff; background: #333;}

	.article-list TD A.aw-pdf {display: inline-block; padding: 0 1rem; font-size: 12px; line-height: 1.5rem; text-align: center; border-radius: 4px;}
	.article-list TD A.aw-pdf.question {color: #fff; background: #ec7aad;}
	.article-list TD A.aw-pdf.explane {color: #fff; background: #01aebc;}
	
	.article-list TD SELECT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem;}
	.article-list TD P.descript {display: inline-block; font-size: .75rem; color: #ec7aad;}
	.article-list TD INPUT[type="radio"] {position: relative; top: 2px; margin-right: .25rem;}
	.article-list TD INPUT[type="checkbox"] {position: relative; top: 2px; margin-right: .25rem;}
	.article-list TD LABEL {font-size: .875rem; color: #666; line-height: 2.5rem; margin-right: .5rem;}
	*/
	
	/* memo: 2020.10.05 @syk table 위아래 border를 위해 BOARD LIST에서 따로 분리  */
	.article-list TH {font-weight: 700; border-top: 1px solid #0071ce; border-bottom: 1px solid #bababa;}
	.article-list TD {color: #999; border-bottom: 1px solid #d1d5dc;}
	
	.article-list TABLE.no-top-border TH {font-weight: 700; border-top: 0px solid #0071ce; border-bottom: 1px solid #bababa;}
	
	/* memo: 2020.10.13 @syk list의 차시 정보(lsi, eval) */
	.article-list TD SPAN.label {display: inline-block; min-width: 1.75rem; padding: .25rem; text-align: center; border-radius: 4px;}
	.article-list TD SPAN.label.grey {background: #747474; color: #fff;}

/* BOARD RESPONSIVE */
	/*
	@media all and (max-width:1241px){
		.subpage-wrap {width:94%; overflow: hidden;}

		.infor-wrap .program {position: relative; top: auto; right: auto; display: block; font-size: .825rem; line-height: 1.625rem; color: #fff; padding: .25rem 1.28rem; border: 1px solid #ec7aad; border-radius: .625rem; background: #ec7aad; transform: translateY(0%); margin: 1rem auto 0;}

		.search-wrap .cls-name-select {display: block; width: 100%;}
		.search-wrap .cls-name-select SELECT {margin-bottom: .625rem;}
		.search-wrap .cls-period-select {width: 100%; margin-bottom: .625rem; text-align: left;}
		.search-wrap .cls-period-select INPUT {font-family: 'NanumSquareRound', sans-serif; font-size: .8125rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 .625rem; outline: none; cursor: pointer;}
		.search-wrap .cls-date-select {width: 100%; text-align: left;}
		.search-wrap .cls-date-select INPUT {width: 46.5%; font-family: 'NanumSquareRound', sans-serif; font-size: .8125rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem; outline: none; cursor: pointer; background: #fff;}
		.search-wrap .cls-class-select {width: 100%; margin-bottom: .625rem; text-align: left;}
		.search-wrap .cls-studentname-select {width: 100%; text-align: left;}
		.search-wrap .cls-studentname-select SELECT {width: 100%;}
		.search-wrap .keyword-wrap {width: 100%; text-align: left;}

		.choose-wrap {margin: .875rem 0; text-align: center;}
		.choose-wrap A.choose {display: inline-block; font-size: 12px; line-height: 1.75rem; letter-spacing: -.085rem; text-align: center; border-radius: 8px; padding: 0 .25rem;}

		.article-list {width: 100%; overflow: auto;}
		.article-list TABLE {width: 1240px; font-size: .875rem;}
	}
	*/

/* VIDEO */
	#mask {  
		position:absolute; top:0; left:0;
		background: #000;
		z-index:99;
		display:none;  
	}
	.window {
		position:absolute; top:50%; left:50%;
		width: 80%; height: auto;
		background: #fff;
		border: 1px solid #e4e4e4;
		border-radius: 1.25rem;
		padding: 2.5rem;
		transform: translate(-50%, -50%);
		z-index: 999;
		display: none;
	}
	.window .popup-title {font-size: 1.25rem; color: #0071ce;}
	.window DL {padding: 1.25rem 0;}
	.window DL:after {content: ""; display: block; clear: both;}
	.window DT {float: left; font-size: .875rem; line-height: 1rem; color: #666;}

	.window .close-popup {position: absolute; top: 1.5rem; right: 1.5rem; cursor: pointer;}
	.video {
		width: 100%;
	}
	.video-container {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: 50%;
	}
	
	/*
	iframe {
		z-index: 1;
		top: 0;
		left: 0;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	*/
	

/* NOTICE LIST & VIEW */
	.noticeViewTitle-wrap {width: 100%; margin: 0; border: 1px solid #0071ce; background: #f8f9fa;}
	.noticeViewTitle-wrap.broder-top {border-width:1px 0 0; padding: .935rem 2rem;}
	.noticeViewTitle-wrap H4 {font-size: 1rem; color: #333; line-height: 1rem; margin: .5rem 0;}
	.noticeViewInfor-wrap {width: 100%; margin: 0; border: 1px solid #ddd; border-width: 1px 0; padding: .5rem 2rem;}
	.noticeViewInfor-wrap P {display: inline-block; font-size: .875rem; color: #666; line-height: 1rem; margin-right: 1rem;}
	
	/* edit: 2021.03.15 @yuri 수정 */
	@media all and (max-width:375px){
		.noticeViewInfor-wrap P {margin-bottom: 0.3rem;}
	}
	
	/*
	.noticeViewInfor-wrap P SPAN {display: inline-block; font-size: .75rem; text-align: center; color: #fff; background: #666; padding: .25rem 1rem; border-radius: 2px; margin-right: .5rem;}
	*/
	/* edit: 2020.09.28 @yuri 수정 */
	.noticeViewInfor-wrap P SPAN:first-child {display: inline-block; font-size: .75rem; text-align: center; color: #fff; background: #666; padding: .25rem 1rem; border-radius: 2px; margin-right: .5rem;}

	.noticeViewInfor-wrap P:last-child {float: right; margin-right: 0;}
	.noticeViewInfor-wrap:after {content: ""; display: block; width: 100%; height: 0; clear: both;}
	.article-view {width: 100%; font-size: .875rem; line-height: 1.5rem; color: #666; margin: 0; border-bottom: 1px solid #eee; padding: 1.5rem 2rem;}

	.page-bottom-button {width: 100%; text-align:center; margin: 1rem auto;}
	
	/*
	.page-bottom-button A.goto-list {display: inline-block; padding: 0; font-size: 14px; line-height: 1.75rem; text-align: center; background: #0071ce; color: #fff; border: 1px solid #0071ce; border-radius: 8px; padding: 0 .5rem;}
	*/
	/* edit: 2020.09.28 @yuri 수정 */
	.page-bottom-button .goto-list {display: inline-block; padding: 0; font-size: 14px; line-height: 1.75rem; text-align: center; background: #0071ce; color: #fff; border: 1px solid #0071ce; border-radius: 8px; padding: 0 .5rem;}

/* EVENT */
	
	/*
	.eventList-wrap LI {float: left; width: 32%; padding: .5rem; border-top: 1px solid #0071ce; border-bottom: 1px solid #eee; margin: 0 .5% 3rem;}
	.eventList-wrap LI H4 {width: 100%; font-size: 1rem; line-height: 2.5rem; color: #333; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
	.eventList-wrap LI DIV.image-wrap {width: 100%; overflow: hidden; border: 1px solid #eee; margin: 0 auto .75rem;}
	.eventList-wrap LI DIV.image-wrap IMG {display: block; width: 100%;}
	.eventList-wrap LI P {font-size: .875rem; color: #666; line-height: 1rem; margin: 0 0 .5rem;}
	*/
	.eventList-wrap .vt-event-card-content {  border-top: 1px solid #0071ce; border-bottom: 1px solid #eee; margin: 0 .5% 3rem;}
	.eventList-wrap H4 {width: 100%; font-size: 1rem; line-height: 2.5rem; color: #333; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
	.eventList-wrap DIV.image-wrap {width: 100%; overflow: hidden; border: 1px solid #eee; margin: 0 auto .75rem;}
	.eventList-wrap DIV.image-wrap IMG {display: block; width: 100%;}
	.eventList-wrap P {font-size: .875rem; color: #666; line-height: 1rem; margin: 0 0 .5rem;}

	/*
	.eventList-wrap LI P SPAN {display: inline-block; width: 4.6rem; font-size: .75rem; text-align: center; color: #fff; background: #666; padding: .25rem 0; border-radius: 2px; margin-right: .5rem;}
	*/
	/* edit: 2020.09.28 @yuri */
	.eventList-wrap P SPAN:first-child {display: inline-block; width: 4.6rem; font-size: .75rem; text-align: center; color: #fff; background: #666; padding: .25rem 0; border-radius: 2px; margin-right: .5rem;}
	
	/*
	.eventList-wrap:after {content: ""; display: block; width: 100%; height: 0; clear: both;}
	@media all and (min-width:509px) and (max-width:1021px){
		.eventList-wrap .vt-event-card-content {width: 49%;}
	} @media all and (max-width: 508px){
		.eventList-wrap .vt-event-card-content {width: 99%;}
	}
	*/

/* PRESENTATION */
	/*
	.presentationList-wrap LI {float: left; width: 49%; padding: .5rem; border-top: 1px solid #0071ce; border-bottom: 1px solid #eee; margin: 0 .5% 3rem 0;}
	.presentationList-wrap LI DIV.image-wrap {float: left; width: 50%; overflow: hidden; border: 1px solid #eee; margin: 1rem 2.5% 1rem 0;}
	.presentationList-wrap LI DIV.image-wrap IMG {display: block; width: 100%;}
	.presentationList-wrap LI H4 {
		width: 45%;
		font-size: 1rem; line-height: 1.5rem; color: #333;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; 
		height: 3rem; 
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 1rem .875rem;
	}
	.presentationList-wrap LI P {font-size: .875rem; color: #666; line-height: 1rem; margin: 0 0 .5rem;}
	.presentationList-wrap LI P SPAN:before {content: "•"; display: inline-block; margin-right: .25rem;}
	.presentationList-wrap LI P SPAN:after {content: ":"; display: inline-block; margin: 0 .25rem;}
	.presentationList-wrap:after {content: ""; display: block; width: 100%; height: 0; clear: both;}
	.presentationList-wrap LI A {display: inline-block; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; background: #f8f8f8; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; margin: 1.75rem auto 0;}
	.presentationList-wrap LI A:last-child {background: #0071ce; color: #fff;}
	@media all and (max-width: 982px){
		.presentationList-wrap LI {width: 100%;}
	}
	@media all and (max-width: 621px){
		.presentationList-wrap LI DIV.image-wrap {float: none; width: 100%; overflow: hidden; border: 1px solid #eee; margin: 1rem 0;}
		.presentationList-wrap LI H4 {width: 100%; margin: 1rem 0;}
		.presentationList-wrap LI A {display: inline-block; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; background: #f8f8f8; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; margin: .75rem auto 1rem;}
	}
	*/
	
	.presentationList-wrap {float: left; padding: .5rem; border-top: 1px solid #0071ce; border-bottom: 1px solid #eee; margin: 0 .5% 3rem 0;}
	.presentationList-wrap DIV.image-wrap {float: left; width: 50%; overflow: hidden; border: 1px solid #eee; margin: 1rem 2.5% 1rem 0;}
	.presentationList-wrap DIV.image-wrap IMG {display: block; width: 100%;}
	.presentationList-wrap H4 {
		font-size: 1rem; line-height: 1.5rem; color: #333;
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; 
		height: 3rem; 
		word-wrap: break-word;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 1rem .875rem;
	}
	.presentationList-wrap P {font-size: .875rem; color: #666; line-height: 1rem; margin: 0 0 .5rem;}
	.presentationList-wrap P SPAN:first-child:before {content: "•"; display: inline-block; margin-right: .25rem;}
	.presentationList-wrap P SPAN:first-child:after {content: ":"; display: inline-block; margin: 0 .25rem;}
	.presentationList-wrap:after {content: ""; display: block; width: 100%; height: 0; clear: both;}
	
	/*.presentationList-wrap button {display: inline-block; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; background: #f8f8f8; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; margin: 1.75rem auto 0;}
	.presentationList-wrap button:last-child {background: #0071ce; color: #fff;}
	*/
	
/* BAORD INPUT */
	H4.subform-title {font-size: .875rem; letter-spacing: -.05rem; color: #fff; font-weight: 400; line-height: 3.125rem; background: #0071ce; padding-left: 1.5rem; margin: 0 auto;}
	.search-wrap .curriculum-input-menu INPUT {font-family: 'NanumSquareRound', sans-serif; width: 12.5rem; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; color: #666; background: #dadcde; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; outline: none; cursor: pointer;}
	.search-wrap .curriculum-input-menu INPUT.selected {color: #0071ce; background: #dde800;}

	.article-input {width: 100%;}
	.article-input.border-top {border-top: 1px solid #0071ce;}
	.article-input:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.article-input H2 {float: left; width: 10%; height: 100%; font-size: .875rem; color: #999; font-weight: 400; text-align: center; padding: 1.5% 1% 0 1%;}
	.article-input.background-grey {background: #fbfbfb;}
	.article-input UL {float: left; width: 90%;}
	.article-input LI {padding: .315rem 1%; border-left: 1px solid #d1d5dc; border-bottom: 1px solid #d1d5dc;  font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem;}
	.article-input.background-grey LI {background: #fbfbfb;}
	.article-input LI:last-child {border-bottom: 0;}
	.article-input LI H3 {display: inline-block; width: 15rem; font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem; vertical-align: top;}
	.article-input LI H3:before {content: "•"; display: inline-block; margin-right: .25rem;}
	
	/*	
	.article-input LI H3 .tooltips {display: inline-block; width: 1.25rem; height: 1.25rem; font-size: .75rem; line-height: 1.25rem; text-align: center; color: #fff; background: #ec7aad; border-radius: .25rem; margin-left: .5rem;}
	*/
	#lsbg_content_1 .tooltips {display: inline-block; width: 1.25rem; height: 1.25rem; font-size: .75rem; line-height: 1.25rem; text-align: center; color: #fff; background: #ec7aad; border-radius: .25rem; margin-left: .5rem;}
	
	.article-input LI DIV.inner {display: inline-block;}
	.article-input LI DIV.inner SELECT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem;}
	
	/*
	.article-input LI DIV.inner P.descript {display: inline-block; font-size: .75rem; color: #ec7aad;}
	*/
	#lsbg_content_2 .descript {display: inline-block; font-size: .75rem; color: #ec7aad;}
	
	.article-input LI DIV.inner INPUT[type="radio"] {position: relative; top: 2px; margin-right: .25rem;}
	.article-input LI DIV.inner INPUT[type="checkbox"] {position: relative; top: 2px; margin-right: .25rem;}
	.article-input LI DIV.inner LABEL {font-size: .875rem; color: #666; line-height: 2.5rem; margin-right: .5rem;}

	.difficulty-set {margin: 0;}
	.difficulty-set:after {content: ""; display: block; width: 100%; height: 0; clear: both;}
	.difficulty-set H4 {float: left; font-size: .875rem; color: #666;}
	.difficulty-set H4 SPAN {color: #999; margin-left: .5rem;}
	.difficulty-set DL {float: left; width: 28rem; height: .625rem; background: #999; border-radius: .25rem; overflow: hidden; margin: 14px 0 0 .5rem;}
	.difficulty-set DL:after {content: ''; display: block; width: 100%; height: 0; clear: both;} 
	.difficulty-set DT {float: left; display: block; height: 100%;}
	.type_2 {background: #00aebb;}
	.type_3 {background: #999;}
	.type_4 {background: #ec7aad;}
	.font_2 {color: #00aebb;}
	.font_3 {color: #999;}
	.font_4 {color: #ec7aad;}
	.width_5 {width: 5%;}
	.width_45 {width: 45%;}
	.width_50 {width: 50%;}
	.difficulty-set P {clear: both; width: 100%; font-size: .875rem; color: #666; margin: 0; position: relative; top: -.75rem;}
	.difficulty-set P SPAN {display: inline-block; width: 3rem; font-size: .75rem; color: #fff; line-height: 1rem; text-align: center; padding: .25rem 0; border-radius: .25rem; margin-left: .25rem;}

	.ui-stoggle--hidden {
		opacity: 0;
		font-size: 0;
		height: 0;
		width: 0;
		position: absolute;
		left: -9999px;
	}
	.ui-stoggle {
		display: inline-block;
		width: 5rem;
		height: 1.5rem;
		background: #ccc;
		position: relative;
		top: .5rem;
		margin-left: .5rem;
		box-shadow: 0 1px 0 #fff;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.ui-stoggle--label-on, .ui-stoggle--label-off {
		overflow: hidden;
		width: 100%;
		-webkit-transition: width 200ms;-moz-transition: width 200ms;-ms-transition: width 200ms;-o-transition: width 200ms;transition: width 200ms;
	}
	.ui-stoggle--label-on {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.ui-stoggle--label-off {
		position: absolute;
		right: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.ui-stoggle--slider, .ui-stoggle--label-on, .ui-stoggle--label-off, .ui-stoggle--inner, .ui-stoggle {
		border-radius: .75rem;
	}
	.ui-stoggle--inner {
		display: block;
		height: 100%;
		border-radius: .75remx;
		overflow: hidden;
		position: relative;
	}
	.ui-stoggle--slider {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
	}
	.ui-stoggle--slider i {
		background: #f3f3f3; /* Old browsers */
		width: 1rem;
		height: 1rem;
		position: absolute;
		left: .125rem;
		top: 50%;
		box-shadow: 0 0 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.9);
		border-radius: .5rem;
		-webkit-transition: all 200ms;-moz-transition: all 200ms;-ms-transition: all 200ms;-o-transition: all 200ms;transition: all 200ms;
		transform: translateY(-50%);
	}
	.ui-stoggle--label-text {
		display: block;
		line-height: 1.5rem;
		padding: 0;
		font-size: .75rem;
		color: rgba(255,255,255,1);
		font-style: normal;
		width: 6rem;
		border-radius: .75rem;
		background: #ddd;

	}
	.ui-stoggle--label-on .ui-stoggle--label-text {
		float: right;
		background: #01aebc;
	}
	.ui-stoggle.off .ui-stoggle--label-on {
		width: 0;
	}
	.ui-stoggle.on .ui-stoggle--label-on {
		display: block;
	}
	.ui-stoggle.on .ui-stoggle--label-off {
		width: 0;
	}
	.ui-stoggle.on .ui-stoggle--slider i {
		left: 3.875rem;
	}
	.article-input LI DIV.inner INPUT[type="text"] {
		font-family: 'NanumSquareRound', sans-serif;
		font-size: .875rem;
		letter-spacing: -.05rem;
		color: #999;
		font-weight: 400;
		border: 1px solid #d1d5dc;
		border-radius: .25rem;
		height: 2.5rem;
		line-height: 2.5rem;
		vertical-align: middle;
		padding: 0 0 0 1rem;
		outline: none;
		cursor: pointer;
		background: #fff;
	}
	.paper {display: inline-block; text-align: center; margin-right: 1rem;}
	.paper-wrap {width: 8.5rem; text-align: center; padding: .75rem .25rem; border: 1px solid #eee; border-radius: .25rem;}
	.paper-wrap:after {content: ""; display: block; width: 100%; height: 0; clear: both;}
	.paper-wrap SPAN {float: left; display: block; position: relative; line-height: 2rem; margin: 0 .5rem;}
	.paper-wrap SPAN.six-deg {line-height: 2.725rem; margin: 0 .5rem;}
	.paper-wrap SPAN.four-deg {line-height: 4.105rem; margin: 0 .5rem;}
	.paper-wrap SPAN:before {content: ""; display: inline-block; width: .6rem; height: .6rem; background: #ccc;}
	.paper-wrap SPAN:after {content: ""; display: inline-block; width: 2rem; height: .6rem; margin-left: .25rem; background: linear-gradient(to bottom, #ccc 0, #ccc 10%, #fff 10%, #fff 45%, #ccc 45%, #ccc 55%, #fff 55%, #fff 80%, #ccc 80%, #ccc 90%, #fff 90%, #fff 100%);}

	.bottom-button-wrap {text-align: center; font-size: .875rem; line-height: 2rem; padding: 2rem 0; border-top:1px solid #0071ce;}
	.bottom-button-wrap A.btn {display: inline-block; width: 11rem; padding: 0; font-size: 14px; line-height: 1.75rem; text-align: center; border-radius: 8px; padding: 0 .5rem;}
	.bottom-button-wrap A.btn.make {background: #0071ce; color: #fff; border: 1px solid #0071ce;}
	.bottom-button-wrap A.btn.cancle {background: #dde800; color: #0071ce; border: 1px solid #dde800;}
	.view-sample {display: inline-block; font-size: .75rem; line-height: 1.25rem; text-align: center; color: #fff; background: #ec7aad; border-radius: .25rem; margin-right: 1rem; padding: .5rem 1rem;}

	@media all and (max-width:1200px){
		.article-input H2 {float: none; display: block; width: 100%; line-height: 3.5rem; font-size: .875rem; color: #999; font-weight: 400; text-align: center; background: #f8f9fa; padding: 0; border-bottom: 1px solid #0071ce;}
		.article-input UL {float: left; width: 100%;}
		.article-input LI {padding: 0 0 .625rem; border-left: 0; border-bottom: 1px solid #d1d5dc;  font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem; text-align: center;}
		.article-input LI H3 {display: block; width: 100%; font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem; vertical-align: top; background: #efefef; margin-bottom: .5rem;}
	}
	@media all and (max-width:702px){
		.article-input LI DIV.inner P.descript {display: inline-block; font-size: .75rem; color: #ec7aad; line-height: 1rem; margin-top: .625rem;}
		.difficulty-set H4 {float: none; display: block; width: 100%; text-align: center; font-size: .875rem; color: #666;}
		.difficulty-set DL {float: none; width: 100%; height: .625rem; background: #999; border-radius: .25rem; overflow: hidden; margin: 14px 0 2rem;}
	}

/* STUDENT ADD */
	.student-add {width: 70%; border-top: 1px solid #0071ce; margin: 0 auto;}
	.student-add.no-border {border: 0;}
	.student-add:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.student-add UL {float: left; width: 100%;}
	.student-add LI {font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem; padding: .315rem 1%; border-bottom: 1px solid #d1d5dc;}
	.student-add.background-grey LI {background: #fbfbfb;}
	.student-add LI:last-child {border-bottom: 0;}
	.student-add LI H3 {display: inline-block; width: 22%; font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem; vertical-align: top;}
	.student-add LI H3:before {content: "•"; display: inline-block; margin-right: .25rem;}
	.student-add LI H3 .tooltips {display: inline-block; width: 1.25rem; height: 1.25rem; font-size: .75rem; line-height: 1.25rem; text-align: center; color: #fff; background: #ec7aad; border-radius: .25rem; margin-left: .5rem;}
	.student-add LI DIV.inner {display: inline-block; width: 77%;}
	.student-add LI DIV.inner SELECT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem;}
	.student-add LI DIV.inner P.descript {display: block; font-size: .75rem; color: #ec7aad; line-height: 1.25rem; padding: .25rem 1%;}

	.student-add LI DIV.inner INPUT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; font-weight: 400; color: #666; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; outline: none; cursor: pointer;}
	/*.search-wrap .curriculum-input-menu INPUT.selected {color: #0071ce; background: #dde800;}*/

	.student-add LI DIV.inner INPUT[type="radio"] {position: relative; top: 0px; margin-right: .25rem;}
	.student-add LI DIV.inner INPUT[type="checkbox"] {position: relative; top: -1px; margin-right: .25rem;}
	.student-add LI DIV.inner INPUT[type="button"] {
		width: 20%;
		font-family: 'NanumSquareRound', sans-serif;
		font-size: .875rem;
		letter-spacing: -.05rem;
		color: #999;
		font-weight: 400;
		border: 1px solid #d1d5dc;
		border-radius: .25rem;
		height: 2.5rem;
		line-height: 2.5rem;
		vertical-align: middle;
		padding: 0;
		margin-left: .25rem;
	}
	.student-add LI DIV.inner INPUT[type="button"].rep-check {background: #333; color: #fff;}
	.student-add LI DIV.inner INPUT[type="button"].invite-yet {background: #ec7aad; color: #fff;}
	.student-add LI DIV.inner INPUT[type="button"].invite-done {background: #00aebb; color: #fff;}
	.student-add LI DIV.inner LABEL {font-size: .875rem; color: #666; line-height: 2.5rem; margin-right: .5rem;}
	.student-add LI DIV.inner DL.level LI {display: inline-block; width: 18.5%; text-align: center; margin: 0 .5% 0 0; padding: 0; border: none;}
	.student-add LI DIV.inner DL.level LI H4 {background: #777; color: #fff; border-radius: .25rem .25rem 0 0;}
	.student-add LI DIV.inner DL.level LI P {background: #eee; color: #666; border-radius: 0 0 .25rem .25rem;}

	.uploaded-logo-image {width: 13rem; height: 13rem; position: relative; overflow: hidden;}
	.uploaded-logo-image IMG {position: absolute; top: 50%; left: 50%; display: block; transform: translate(-50%, -50%);}
	#logoFileDrag {display: none; text-align: center; height: 7.5rem; line-height: 1.5rem; color: #666; padding: 5em 0 2rem; margin: 1em auto; background: URL(../../images/icon_upload.png) no-repeat 50% #eee; background-size: 10%; border: 1px dashed #aaa; border-radius: .5rem; cursor: default;}
	#logoFileDrag.hover {color: #0071ce; border-color: #0071ce; border-style: solid; box-shadow: inset 0 3px 3px #aaa;}
	#messages {padding: 0 10px; margin: 1em 0; border: 0px solid #999;}
	#messages P.upload-file {line-height: 1.5rem;}
	#messages P.upload-file STRONG {color: #333;}

	@media all and (max-width:893px){
		.student-add {width: 100%;}
		.student-add LI {text-align: center; padding: 0 0 .25rem 0;}
		.student-add LI H3 {display: block; width: 100%; background: #eee; margin-bottom: .25rem;}
		.student-add LI H3:before {content: "";}
		.student-add LI DIV.inner {display: inline-block; width: 100%;}
		.student-add LI DIV.inner DL.level LI H4 {font-size: .75rem;}
		.student-add LI DIV.inner DL.level LI P {font-size: .75rem;}
	}

/* OMR */
	#omrFileDrag {display: none; text-align: center; font-size: .875rem; line-height: 1.15rem; color: #666; padding: 5em 0 2rem; margin: 1em auto; background: URL(/static/alom/images/icon_upload.png) no-repeat 50% #eee; background-size: 10%; border: 1px dashed #aaa; border-radius: .5rem; cursor: default;}
	#omrFileDrag.hover {color: #0071ce; border-color: #0071ce; border-style: solid; box-shadow: inset 0 3px 3px #aaa;}
	#uploadList {padding: 0 10px; margin: 1em 0; border: 0px solid #999;}
	#uploadList P.omr-file {font-size: .875rem; line-height: 1.5rem;}
	#uploadList P.omr-file STRONG {color: #333;}

	.omr-wrap:after {content: ""; display: block; clear: both;}
	.omr-wrap LI {float: left; width: 8.333%; padding: .25rem;}
	.omr-wrap LI H4 {font-size: .875rem; text-align: center; line-height: 2rem; background: #999; color: #fff; border-radius: .25rem .25rem 0 0;}
	.omr-wrap LI P {padding: .25rem; border: 1px solid #eee; border-radius: .25rem;}
	.omr-wrap LI P INPUT {width: 100%; color: #666; line-height: 1.6rem; text-align: center; border: 1px solid #666; border-radius: .25rem;}
	P.omr-infor {text-align: center; margin: 1rem 0;}


/* PAGING */
	.paging {width: 100%; margin: 2.5rem auto; text-align: center;}

	/*
	.paging A {display: inline-block; width: 1.875rem; height: 1.875rem;  font-size: 14px; line-height: 1.875rem; color: #0071cd; text-align: center; border: 1px solid #0071cd; border-radius: 8px; margin: 0 .25rem;}
	.paging A.selected {color: #fff; background: #0071cd;}
	.paging A IMG {vertical-align: middle;}
	*/
	
	/* 2020.09.24 @yuri; 우리거에 맞춰서 수정함 */
	.paging li {display: inline-block; width: 1.875rem; height: 1.875rem;  font-size: 14px; line-height: 1.875rem; color: #0071cd; text-align: center; border: 1px solid #0071cd; border-radius: 8px; margin: 0 .25rem;}
	.paging li.active {background: #0071cd;}
	.paging li A {color: #0071cd;} 
	.paging li.active A {color: #fff;} 
	.paging li A IMG {vertical-align: middle;}
	
/* FAQ */
	.search-wrap .faq-period-select {display: inline-block; width: 100%; text-align: center;}
	.search-wrap .faq-period-select INPUT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; outline: none; cursor: pointer;}
	.search-wrap .faq-period-select INPUT[type="text"] {width: 40%;}
	.search-wrap .faq-period-select INPUT.show-all {width: 10%; background: #333; color: #fff;}
	.search-wrap .faq-period-select P {font-size: .825rem; line-height: 1rem; margin-top: .825rem;}
	.search-wrap .faq-period-select P A {color: #0071ce; margin: 0 .5rem;}

	.tabs {margin: 1.5rem auto 0;}
	.type:after {content: ""; display: block; clear: both;}
	.type LI {float: left; width: 20%; font-size: .875rem; line-height: 2.75rem; color: #666; text-align: center; background: #f8f9fa; border: 1px solid #d1d5dc; border-width: 1px 0 0 1px; cursor: pointer;}
	.type LI:first-child {border-left: 0;}
	.type LI.active {font-weight: 700; color: #333; background: #fff; border: 1px solid #0071ce; border-width: 1px 1px 0;}

	.answer {display: none;}
	
	/*
	.unit-tab {width: 100%; margin: 1.5rem auto 0;}
	*/
	.unit-tab {width: 100%;}
	
	.unit-tab .question {font-size: .875rem; color: #666; padding: .625rem; line-height: 1.2rem; border: 1px solid #d1d5dc; border-radius: .25rem; margin-bottom: 1rem; position: relative;}
	.unit-tab .question:before {content: "Q"; display: inline-block; font-size: 1rem; font-weight: 700; color: #fff; padding: .25rem .5rem; background: #0071ce; border-radius: .25rem; margin-right: .5rem;}
	
	/*
	.unit-tab .question:after {content: ""; position: absolute; top: 50%; right: 2%; width: 1.25rem; height: 1.25rem; display: block; background: URL(../../images/arrow_bottom.png) no-repeat 50% 50%; transform: translateY(-50%); transition: all .35s;}
	*/
	.unit-tab .question:after {content: ""; position: absolute; top: 50%; right: 2%; width: 1.25rem; height: 1.25rem; display: block; transition: all .35s;}
	
	.unit-tab .question.active:after {transition: all .35s; transform: translateY(-50%) rotate(180deg);}
	
	/*
	.unit-tab .answer {background: #f8f9fa; font-size: .875rem; line-height: 1.5rem; color: #666; padding: 2rem; border-radius: .25rem; margin-top: -.875rem; margin-bottom: 1rem;}
	*/
	.unit-tab .answer {background: #f8f9fa; font-size: .875rem; line-height: 1.5rem; color: #666; padding: 2rem; border-radius: .25rem; margin-bottom: 1rem;}

	@media all and (max-width:720px){
		.search-wrap .faq-period-select INPUT[type="text"] {width: 70%;}
		.search-wrap .faq-period-select INPUT.show-all {width: 25%;}
		.type LI {float: none; width: 100%;}
	}

	.faq-more {font-size: 1rem; text-align: center; margin: 1.5rem auto;}
	.faq-bottom { /* display: inline-block; width: 33%; margin: 0 auto; */ }

	/*	
	.faq-bottom H5 {font-size: 1rem; color: #0071ce; line-height: 1.825rem;}
	*/
	.faq-bottom H5, .faq-bottom H5 A{font-size: 1rem; color: #0071ce; line-height: 1.825rem;}
	
	.faq-bottom P {font-size: .825rem; color: #999; line-height: 1rem;}
	.faq-bottom H4 {float: left; width: 6rem; height: 3rem; border-radius: .25rem; margin-right: .75rem;}
	
	/*
	memo: faq.jsp에서 정의함 
	.faq-bottom.call H4 {background: URL(../../images/icon_phone.png) no-repeat 50% #0071ce; background-size: 20px;}
	.faq-bottom.board H4 {background: URL(../../images/icon_keyboard.png) no-repeat 50% #0071ce; background-size: 30px;}
	.faq-bottom.mail H4 {background: URL(../../images/icon_mail.png) no-repeat 50% #0071ce; background-size: 20px;}
	@media all and (max-width:921px){
		.faq-bottom {display: block; width: 100%; margin: .5rem auto;}
		.faq-bottom H4 {float: left; width: 4rem; height: 3rem; border-radius: .25rem; margin-right: 1.25rem;}
	}
	*/

/* SUPPORT PROGRAM */
	/*	
	.supportList-wrap LI {float: left; width: 32%; padding: 1.5rem .5rem; border-top: 1px solid #0071ce; border-bottom: 1px solid #eee; margin: 0 .5% 3rem;}
	.supportList-wrap LI DIV.image-wrap {float: left; width: 20%; overflow: hidden; margin: 0 5% 0 0;}
	.supportList-wrap LI DIV.image-wrap IMG {display: block; width: 100%;}
	.supportList-wrap LI DIV.content-wrap {float: left; width: 75%;}
	.supportList-wrap LI DIV.content-wrap H4 {font-size: 1rem; line-height: 1rem; color: #333; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; margin-bottom: .5rem;}
	.supportList-wrap LI DIV.content-wrap P {font-size: .875rem; color: #666; line-height: 1.25rem; margin: 0 0 .5rem;}
	.supportList-wrap LI DIV.content-wrap A {display: inline-block; font-size: .75rem; color: #fff; background: #666; padding: .5rem; border-radius: 2px; margin: .5rem .5rem 0 0;}
	.supportList-wrap:after {content: ""; display: block; width: 100%; height: 0; clear: both;}
	@media all and (min-width:621px) and (max-width:1241px){
		.supportList-wrap LI {width: 49%;}
	} @media all and (max-width: 621px){
		.supportList-wrap LI {width: 99%;}
	}
	*/
	
	.supportList-wrap { /* width: 32%; */ padding: 1.5rem .5rem; border-top: 1px solid #0071ce; border-bottom: 1px solid #eee; margin: 0 .5% 3rem; }
	.supportList-wrap DIV.image-wrap {float: left; width: 20%; overflow: hidden; margin: 0 5% 0 0;}
	.supportList-wrap DIV.image-wrap IMG {display: block; width: 100%;}
	.supportList-wrap DIV.content-wrap {float: left; width: 75%;}
	.supportList-wrap DIV.content-wrap H4 {font-size: 1rem; line-height: 1rem; color: #333; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; margin-bottom: .5rem;}
	.supportList-wrap DIV.content-wrap P {font-size: .875rem; color: #666; line-height: 1.25rem; margin: 0 0 .5rem;}
	.supportList-wrap DIV.content-wrap A {display: inline-block; font-size: .75rem; color: #fff; background: #666; padding: .5rem; border-radius: 2px; margin: .5rem .5rem 0 0;}

/* SETTLE */
	SPAN.time-notice {display: inline-block; font-size: .825rem; color: #0071ce; margin-left: .25rem; padding: .125rem .5rem; background: #dde800;}

	.stepper {float: left; border-radius: .25rem; margin: 0 .5rem 0 0; overflow: hidden; position: relative;}
	.stepper .stepper-input {background: #F9F9F9; border: 1px solid #ccc; border-radius: 3px; color: #333; font-size: 13px; line-height: 1.2; margin: 0; overflow: hidden; padding: 9px 10px 10px; width: 100%; z-index: 49;}
	.stepper .stepper-input:focus {background-color: #fff;}
	.stepper .stepper-step {background: #eee url(../../images/stepper-arrows.png) no-repeat; border: 1px solid #ccc; cursor: pointer; display: block; height: 50%; position: absolute; right: 0; text-indent: -99999px; width: 20px; z-index: 50;}
	.stepper .stepper-step.up {background-position: center top; border-bottom: none; top: 0;}
	.stepper .stepper-step.down {background-position: center bottom; bottom: 0;}
	@media screen and (min-width: 740px) {
		.stepper:hover .stepper-input {background-color: #fff;}
		.stepper .stepper-step:hover {background-color: #F9F9F9;}
		.stepper.disabled .stepper-step {background: #fff; border-color: #eee; cursor: default;}
	}
	.stepper.disabled .stepper-input {background: #fff; border-color: #eee; color: #ccc;}
	.stepper.disabled .stepper-step {background: #fff; border-color: #eee; cursor: default;}

	.search-wrap H3.settle, .search-wrap P.settle {display: inline-block;}
	.search-wrap H3.settle {font-size: 1.5rem; color: #0071ce;}
	.search-wrap H3.settle SPAN {display: inline-block; font-size: .825rem; color: #fff; background: #aaa; border-radius: .25rem; padding: .25rem .5rem; position: relative; top: -.25rem; margin-right: .5rem;}
	.search-wrap H3.settle SPAN.blue {color: #fff; background: #0071ce;}
	.search-wrap H3.settle B, .search-wrap H3.settle EM {display: inline-block; font-size: .825rem; color: #999; position: relative; top: -.25rem; margin: 0 .25rem;}
	.search-wrap P.settle {font-size: 1.5rem; color: #666;}
	@media screen and (max-width: 776px) {
		.search-wrap P.settle {display: none;}
	}

/* FOOTER */
	.bottomMenu-wrap {width: 100%; border: 1px solid #c8c8c8; border-width: 2px 0 1px; padding: 1.25rem 0;}
	.bottomMenu-wrap .inner {width: 90%; max-width: 1240px; margin: 0 auto;}
	.bottomMenu-wrap .inner UL LI {float: left;}
	.bottomMenu-wrap .inner:after {content: ''; display: block; clear: both;}
	.bottomMenu-wrap .inner .left-menu {float: left; margin-top: .5rem;}
	.bottomMenu-wrap .inner .left-menu A {display: block; font-size: .875rem; color: #666; line-height: 1rem; margin-left: .5rem; padding-left: .5rem; border-left: 1px solid #aaa;}
	.bottomMenu-wrap .inner .left-menu LI:first-child A {border: 0; padding: 0; margin: 0;}
	.bottomMenu-wrap .inner .right-sns {float: right;}
	.bottomMenu-wrap .inner .right-sns LI SPAN {display: none;}
	.bottomMenu-wrap .inner .right-sns LI A {display: block; width: 1.8rem; height: 1.8rem; border-radius: 50%; margin: 0 .2rem;}
	.bottomMenu-wrap .inner .right-sns LI A.social-face {background: URL(/static/alom/images/sns_icon_face.png) no-repeat #b3b6b8; background-size: 1rem 1rem; background-position: 50% 50%;}
	.bottomMenu-wrap .inner .right-sns LI A.socail-insta {background: URL(/static/alom/images/sns_icon_insta.png) no-repeat #b3b6b8; background-size: 1rem 1rem; background-position: 50% 50%;}
	.bottomMenu-wrap .inner .right-sns LI A.social-youtube {background: URL(/static/alom/images/sns_icon_utube.png) no-repeat #b3b6b8; background-size: 1rem 1rem; background-position: 50% 50%;}
	@media all and (max-width:578px){
		.bottomMenu-wrap {width: 100%; border: 1px solid #c8c8c8; border-width: 2px 0 1px; padding: .75rem 0;}
		.bottomMenu-wrap .inner {width: 100%; margin: 0 auto; text-align: center;}
		.bottomMenu-wrap .inner UL LI {float: none; display: inline-block;}
		.bottomMenu-wrap .inner .left-menu {float: none; margin-top: .5rem;}
		.bottomMenu-wrap .inner .left-menu A {display: block; font-size: .75rem; color: #666; line-height: 1rem; margin-left: .15rem; padding-left: .25rem; border-left: 1px solid #aaa;}
		.bottomMenu-wrap .inner .left-menu LI:first-child A {border: 0; padding: 0; margin: 0;}
		.bottomMenu-wrap .inner .right-sns {float: none; margin-top: .6rem;}
		.bottomMenu-wrap .inner .right-sns LI SPAN {display: none;}
		.bottomMenu-wrap .inner .right-sns LI A {display: block; width: 1.8rem; height: 1.8rem; border-radius: 50%; margin: 0 .2rem;}
		.bottomMenu-wrap .inner .right-sns LI A.social-face {background: URL(/static/alom/images/sns_icon_face.png) no-repeat #b3b6b8; background-size: 1rem 1rem; background-position: 50% 50%;}
		.bottomMenu-wrap .inner .right-sns LI A.socail-insta {background: URL(/static/alom/images/sns_icon_insta.png) no-repeat #b3b6b8; background-size: 1rem 1rem; background-position: 50% 50%;}
		.bottomMenu-wrap .inner .right-sns LI A.social-youtube {background: URL(/static/alom/images/sns_icon_utube.png) no-repeat #b3b6b8; background-size: 1rem 1rem; background-position: 50% 50%;}
	}
	.copyInfor-wrap {width: 90%; max-width: 1240px; padding: 1.6rem 0; margin: 0 auto;}
	.copyInfor-wrap:after {content: ''; display: block; clear: both;}
	.copyInfor-wrap .left {float: left; width: 68%;}
	.copyInfor-wrap .left H1 {float: left; width: 5rem; /* height:; */ margin-right: .875rem;}
	.copyInfor-wrap .left H1 IMG {width: 100%;}
	.copyInfor-wrap .left .inner {float: left; width: 70%; margin: .5rem 0 0;}
	.copyInfor-wrap .left .copyInfor {font-size: .825rem; line-height: .9rem; color: #666;}
	.copyInfor-wrap .left .copyInfor:after {content: ''; display: block; clear: both;}
	.copyInfor-wrap .left .copyInfor LI {float: left; color: #666; line-height: 1rem; margin-right: .5rem; margin-bottom: .3rem; padding-right: .5rem; border-right: 1px solid #ccc;}
	.copyInfor-wrap .left .copyInfor LI:last-child {margin: 0; padding: 0; border: 0;}
	.copyInfor-wrap .left H2 {font-size: .74rem; line-height: .9rem; color: #666; margin-top: .4rem;}
	.copyInfor-wrap .right {float: right; width: 30%; text-align: right;}
	.copyInfor-wrap .right H3 {font-size: 1.2rem; color: #0071ce;}
	.copyInfor-wrap .right H3 SPAN {display: inline-block; font-size: .875rem; margin-left: .25rem; padding-left: .3rem; border-left: 1px solid #0071ce;}
	.copyInfor-wrap .right H4 {font-size: 2.42rem; font-weight: 800; color: #0071ce;}
	.copyInfor-wrap .right H4 SPAN {font-weight: 300;}
	.copyInfor-wrap .right P { margin-top: -.3rem;}
	.copyInfor-wrap .right P A {font-size: .75rem; color: #0071ce;}
	.copyInfor-wrap .right P A IMG {margin-right: .25rem; position: relative; top: 2px;}
	@media all and (max-width:1103px){
		.copyInfor-wrap {width: 100%; padding: 1.6rem 0; margin: 0 auto;}
		.copyInfor-wrap:after {content: ''; display: block; clear: both;}
		.copyInfor-wrap .left {float: none; width: 100%; text-align: center;}
		.copyInfor-wrap .left H1 {float: none; width: 4.2rem; /* height:; */ margin: 0 auto;}
		.copyInfor-wrap .left H1 IMG {display: block; width: 100%;}
		.copyInfor-wrap .left .inner {float: none; width: 100%; margin: .5rem 0 0;}
		.copyInfor-wrap .left .copyInfor {font-size: .825rem; line-height: .9rem; color: #666; margin: 0 auto;}
		.copyInfor-wrap .left .copyInfor:after {content: ''; display: block; clear: both;}
		.copyInfor-wrap .left .copyInfor LI {float: none; display: inline-block; color: #666; line-height: 1rem; margin-right: .5rem; margin-bottom: .3rem; padding-right: .5rem; border-right: 1px solid #ccc;}
		.copyInfor-wrap .left .copyInfor LI:first-child {margin: 0; padding: 0; border: 0;}
		.copyInfor-wrap .left H2 {font-size: .75rem; line-height: .9rem; color: #666; margin-top: .4rem;}
		.copyInfor-wrap .right {float: none; width: 100%; text-align: center; margin-bottom: 1rem;}
		.copyInfor-wrap .right H3 {font-size: 1.2rem; color: #0071ce; text-align: center;}
	}
	#ui-datepicker-div {display: none;}
	
	
/* A_W_NOTE ADD */
	.note-add {width: 100%; border-top: 1px solid #0071ce; margin: 0 auto;}
	.note-add.no-border {border: 0;}
	.note-add:after {content: ''; display: block; width: 100%; height: 0; clear: both;}
	.note-add UL {float: left; width: 100%;}
	.note-add LI {font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem; padding: .315rem 1%; border-bottom: 1px solid #d1d5dc;}
	.note-add.background-grey LI {background: #fbfbfb;}
	.note-add LI:last-child {border-bottom: 0;}
	.note-add LI H3 {display: inline-block; width: 22%; font-size: .875rem; color: #999; font-weight: 400; line-height: 2.5rem; vertical-align: top;}
	.note-add LI H3:before {content: "•"; display: inline-block; margin-right: .25rem;}
	.note-add LI DIV.inner {display: inline-block; width: 77%;}
	.note-add LI DIV.inner SELECT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; color: #999; font-weight: 400; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 0 0 1rem;}
	.note-add LI DIV.inner INPUT {font-family: 'NanumSquareRound', sans-serif; font-size: .875rem; letter-spacing: -.05rem; font-weight: 400; color: #666; border: 1px solid #d1d5dc; border-radius: .25rem; height: 2.5rem; line-height: 2.5rem; vertical-align: middle; padding: 0 1.25rem; outline: none; cursor: pointer;}
	/*.search-wrap .curriculum-input-menu INPUT.selected {color: #0071ce; background: #dde800;}*/

	.note-add LI DIV.inner INPUT[type="radio"] {position: relative; top: 0px; margin-right: .25rem;}
	.note-add LI DIV.inner INPUT[type="checkbox"] {position: relative; top: -1px; margin-right: .25rem;}
	.note-add LI DIV.inner LABEL {font-size: .875rem; color: #666; line-height: 2.5rem; margin-right: .5rem;}

	.article-list TH.small {
		line-height: 1.5rem;
		background: #efefef;
	}
	.article-list TH.border {
		border-left: 1px solid #bababa;
	}

	.loading {
		position:absolute; top:50%; left:50%;
		width: 70%; height: auto;
		background: #fff;
		border: 1px solid #e4e4e4;
		border-radius: 1.25rem;
		padding: 2.5rem;
		transform: translate(-50%, -50%);
		z-index: 999;
		display: none;
	}
	.lds-spinner {color: #000; display: block; position: relative; width: 80px; height: 80px; margin: 0 auto;}
	.lds-spinner div {transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite;}
	.lds-spinner div:after {content: " "; display: block; position: absolute; top: 3px; left: 37px; width: 6px; height: 18px; border-radius: 20%; background: #000;}
	.lds-spinner div:nth-child(1) {transform: rotate(0deg); animation-delay: -1.1s;}
	.lds-spinner div:nth-child(2) {transform: rotate(30deg); animation-delay: -1s;}
	.lds-spinner div:nth-child(3) {transform: rotate(60deg); animation-delay: -0.9s;}
	.lds-spinner div:nth-child(4) {transform: rotate(90deg); animation-delay: -0.8s;}
	.lds-spinner div:nth-child(5) {transform: rotate(120deg); animation-delay: -0.7s;}
	.lds-spinner div:nth-child(6) {transform: rotate(150deg); animation-delay: -0.6s;}
	.lds-spinner div:nth-child(7) {transform: rotate(180deg); animation-delay: -0.5s;}
	.lds-spinner div:nth-child(8) {transform: rotate(210deg); animation-delay: -0.4s;}
	.lds-spinner div:nth-child(9) {transform: rotate(240deg); animation-delay: -0.3s;}
	.lds-spinner div:nth-child(10) {transform: rotate(270deg); animation-delay: -0.2s;}
	.lds-spinner div:nth-child(11) {transform: rotate(300deg); animation-delay: -0.1s;}
	.lds-spinner div:nth-child(12) {transform: rotate(330deg); animation-delay: 0s;}
	@keyframes lds-spinner {
		0% {opacity: 1;}
		100% {opacity: 0;}
	}
	.lds-infor {font-size: .875rem; color: #999; font-weight: 400; line-height: 1.25rem; text-align: center; margin-top: 1rem;}
	.lds-infor H4 {display: inline-block; color: #0071ce;}

	@media all and (max-width:893px){
		.note-add {width: 100%;}
		.note-add LI { /* text-align: center; */ padding: 0 0 .25rem 0;}
		.note-add LI H3 {display: block; width: 100%; /* background: #eee; margin-bottom: .25rem; */}
		.note-add LI H3:before {content: "•";}
		.note-add LI DIV.inner {display: inline-block; width: 100%;}
		.note-add LI DIV.inner DL.level LI H4 {font-size: .75rem;}
		.note-add LI DIV.inner DL.level LI P {font-size: .75rem;}
	}
	
/* CURRICULUM - GALLERY */
	#curriculum-tabs {margin: 1.5rem auto 0;}
	#curriculum-tabs .type:after {content: ""; display: block; clear: both;}
	#curriculum-tabs .type LI {float: left; width: 16.666%; font-size: .875rem; line-height: 2.75rem; color: #666; text-align: center; background: #f8f9fa; border: 1px solid #d1d5dc; border-width: 1px 0 0 1px; cursor: pointer;}
	#curriculum-tabs .type LI SPAN {display: inline-block; font-size: .6875rem; line-height: 1.2rem; padding: 0 .5rem; background: #aaa; color: #fff; border-radius: .6rem; position: relative; top: -2px; margin-left: .5rem;}
	#curriculum-tabs .type LI:first-child {border-left: 0;}
	#curriculum-tabs .type LI.active {font-weight: 700; color: #333; background: #fff; border: 1px solid #0071ce; border-width: 1px 1px 0;}
	.unit-tab:after {content: ''; display: block; clear: both;}
	@media all and (max-width:882px){
		#curriculum-tabs .type LI {float: left; width: 49%; font-size: .875rem; line-height: 2.75rem; color: #666; text-align: center; background: #f8f9fa; border: 1px solid #d1d5dc; border-width: 1px 1px 1px 1px; margin: .5%; cursor: pointer;}
		#curriculum-tabs .type LI:first-child {border-left: 1px solid #d1d5dc;}
		#curriculum-tabs .type LI.active {font-weight: 700; color: #333; background: #fff; border: 1px solid #0071ce; border-width: 1px 1px 1px 1px;}
	}

	.curriculum-gallery {float: left; width: 24%; margin: 2.5% .5%; border: 1px solid #eee; border-radius: .85rem; overflow: hidden; position: relative;}

	.curriculum-gallery .top {min-height: 13rem; padding: 2rem; position: relative; overflow: hidden;}
	.blue {background: #0071ce;}
	.green {background: #6fba2c;}
	.pink {background: #ec7aac;}
	.pale {background: #00aebb;}
	.vivid {background: #dde800;}
	.etc {background: #888;}
	.curriculum-gallery H1 {
		font-size: 1.05rem;
		font-weight: 300;
	    color: #fff;
	    letter-spacing: -.05rem;
		margin-bottom: .5rem;
	}
	.curriculum-gallery H2 {
		font-size: 1.25rem;
		font-weight: 400;
	    color: #fff;
		line-height: 1.75rem;
	    letter-spacing: -.05rem;
	}
	.curriculum-gallery H3 {
		display: inline-block;
		font-size: .75rem;
		font-weight: 700;
	    color: #999;
		line-height: 1.5rem;
	    letter-spacing: -.05rem;
		padding: .25rem 1rem;
		background: #fff;
		border-radius: 1rem;
		margin: 1rem 0;
	}
	.curriculum-gallery .middle {
		padding: 1rem 2rem .25rem;
	}
	.curriculum-gallery .middle P {display: inline-block; font-size: .75rem; color: #666;}
	.curriculum-gallery .bottom {
		padding:  .25rem 2rem;
	}
	/* .curriculum-gallery .middle P:nth-child(1):before {content: "차시"; display: inline-block; padding: .25rem .5rem; border-radius: .75rem; color: #fff; background: #999; margin-right: .25rem;}
	.curriculum-gallery .middle P:nth-child(2):before {content: "기간"; display: inline-block; padding: .25rem .5rem; border-radius: .75rem; color: #fff; background: #999; margin-right: .25rem; margin-left: .5rem;}
	.curriculum-gallery .middle P:nth-child(3):before {content: "인원"; display: inline-block; padding: .25rem .5rem; border-radius: .75rem; color: #fff; background: #999; margin-right: .25rem; margin-left: .5rem;} */
	.curriculum-gallery .middle P.vt-numberOfDays:before {content: "차시"; display: inline-block; padding: .25rem .5rem; border-radius: .75rem; color: #fff; background: #999; margin-right: .25rem;}
	.curriculum-gallery .middle P.vt-numberOfWeeks:before {content: "기간"; display: inline-block; padding: .25rem .5rem; border-radius: .75rem; color: #fff; background: #999; margin-right: .25rem;}
	.curriculum-gallery .middle P.vt-numberOfUser:before {content: "인원"; display: inline-block; padding: .25rem .5rem; border-radius: .75rem; color: #fff; background: #999; margin-right: .25rem;}
	.curriculum-gallery .middle P {margin-top: .2rem; margin-right: .5rem;}

	.curriculum-gallery .bottom H4 {display: inline-block; font-size: .75rem; color: #666;}

	.curriculum-gallery H2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-wrap:break-word; 
		line-height: 1.75rem;
		height: 3.2rem;
	}
	@media all and (max-width:1240px){
		/* .curriculum-gallery H2 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			word-wrap:break-word; 
			line-height: 1.75rem;
			height: 3.2rem;
		} */
		.curriculum-gallery .middle P {display: block; font-size: .75rem; color: #666; margin-bottom: .5rem;}
		.curriculum-gallery .middle P:nth-child(2):before, .curriculum-gallery .middle P:nth-child(3):before {margin-left: 0;}
		.curriculum-gallery .bottom H4 {
			text-overflow:ellipsis;
			white-space:nowrap;
			word-wrap:normal;
			width:88%;
			overflow:hidden;
		}
	}
	@media all and (max-width:968px){
		.curriculum-gallery {width: 49%;}
		.curriculum-gallery .middle P {display: inline-block; font-size: .75rem; color: #666; margin-bottom: .5rem;}
		.curriculum-gallery .middle P:nth-child(2):before, .curriculum-gallery .middle P:nth-child(3):before {margin-left: .5rem;}
	}
	@media all and (max-width:662px){
		.curriculum-gallery {width: 99%;}
	}
	.curriculum-gallery .progress {
		height: .5rem; border-radius: .25rem;
		background: #eee;
		position: relative;
		border: 1px solid #ddd;
		margin: 1.75rem 2rem 2rem 2rem;
	}
	.curriculum-gallery .progress SPAN {
		display: block;
		position: absolute;
		top: -.725rem;
		width: 2rem;
		height: 2rem;
		font-size: .75rem;
		text-align: center;
		line-height: 2rem;
		color: #fff;
		border-radius: 1rem;
		transform: translateX(-50%);
	}
	.curriculum-gallery .top .mark {
		position: absolute;
		bottom: 0rem; right: 0rem;
		width: 6rem;
		height: 5rem;
		font-size: .825rem;
		line-height: 2.4rem;
		text-align: center;
		background: #000;
		color: #fff;
		transform: rotate(-45deg) translate(.275rem, 3.5rem);
	}
	.curriculum-gallery .button {
		position: absolute;
		top: .6rem; right: .6rem;
	}
	.curriculum-gallery .button A {
		display: block;
		width: 2.4rem;
		height: 2.4rem;
		background: #fff;
		border-radius: 50%;
	}
	.curriculum-gallery .button A SPAN {
		position: absolute;
		left: 50%;
		display: block;
		width: .22rem;
		height: .22rem;
		background: #666;
		border-radius: .11rem;
		overflow: hidden;
		transform: translate(-50%, -50%);
	}
	.curriculum-gallery .button A SPAN:nth-child(1) {top: 35%;}
	.curriculum-gallery .button A SPAN:nth-child(2) {top: 50%;}
	.curriculum-gallery .button A SPAN:nth-child(3) {top: 65%;}

	.curriculum-gallery .button-set {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 98;}
	.curriculum-gallery .button-set .menu {position: absolute; top: 55%; left: 0; width: 100%; text-align: center; z-index: 99;}
	.curriculum-gallery .button-set .menu A {display: block; width: 80%; font-size: .8125rem; line-height: 2rem; color: #333; background: #fff; border-radius: .25rem; margin: .5rem auto;}
	.curriculum-gallery .button-set .menu A.close {background: #ddd;}
	.curriculum-gallery .button-set .inner-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); z-index: 97;}