#usm-moim { position: relative; width: 100%; }

#usm-moim-top-id { width: 100%; display: flow-root; background-color: #5050b9; text-align: right; padding: 0 0 2rem 0; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn { height: 30px; padding: 0; display: inline-block; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li { display: inline-block; color: #fff; padding: 5px 0 0 0; font-weight: normal; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-admin { display: none; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li a { color: #fff; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-icon01 a:before { content: url('../images/small_icon4.png'); display: inline-block; vertical-align: middle; margin: 0 0.5rem 0 0; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-icon02 a:before { content: url('../images/small_icon3.png'); display: inline-block; vertical-align: middle; margin: 0 0.5rem 0 0; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-icon03 a:before { content: url('../images/small_icon2.png'); display: inline-block; vertical-align: middle; margin: 0 0.5rem 0 0; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-icon04 a:before { content: url('../images/small_icon1.png'); display: inline-block; vertical-align: middle; margin: 0 0.5rem 0 0; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-icon05 a:before { content: url('../images/small_icon5.png'); display: inline-block; vertical-align: middle; margin: 0 0.5rem 0 0; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-admin a:before { content: url('../images/small_icon6.png'); display: inline-block; vertical-align: middle; margin: 0 0.5rem 0 0; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-logout a:before { content: url('../images/small_icon2.png'); display: inline-block; vertical-align: middle; margin: 0 0.5rem 0 0; }

.usm-class-nme { width: 100%; white-space:nowrap; overflow:hidden; text-align: center; vertical-align: middle; font-size: 2.4rem; font-weight: bold; background-color: #5050b9; padding: 0 0 2rem 0; color: #fff; }

.usm-mobile-menu { position: absolute; left: 0; top: 0; width: 100%; transition: top .5s ease-out; }
.usm-spinner-master input[type=checkbox] { display: none; }

.spinner-master { position: absolute; top: 4.5rem; left: 0.5rem; display: flex; flex-direction: column; justify-content: space-between; width: 3rem; height: 3rem;	cursor: pointer; padding: 0.3rem; }
.spinner-master .bar { width: 100%; height: 4px; background: #fff; transition: 0.3s; }
.spinner-master.active .bar:nth-child(1) { transform: rotate(45deg) translate(10px, 10px); }
.spinner-master.active .bar:nth-child(2) { opacity: 0; }
.spinner-master.active .bar:nth-child(3) { transform: rotate(-45deg) translate(9px, -9px); }	

/* Common Menu Start */
nav { clear: both; }
nav > ul li a { line-height: 250%; font-size: 16px; margin: 0; padding: 0; list-style: none; border: none; text-decoration: none; position: relative; display: block; }
nav > ul li a:hover { color: #ffffff; }
/* Common Menu End */

/* First Menu Start*/
nav > ul { display: none; }
nav > ul.active { display: block; }
nav > ul > li { background-color: #e7e7e7; border-bottom: 1px solid #777777; }
nav > ul > li:first-of-type { border-top: 2px solid #777777; }
nav > ul > li > a { padding: 0 0 0 20px; color: #000; }
nav > ul > li > a.active { background-color: #0FAE16; color: #94FF95; font-weight: bold; }
/* First Menu End */

#usm-moim-center-id { display: flow-root; width: 100%; }
#usm-moim-center2-id { display: flow-root; width: 100%; }

.usm-moim { width: calc(100% - 2rem); margin: 1rem; display: flow-root; }
.usm-moim h3 { font-size: 2.4rem; margin: 0 0 1rem 0; }
.usm-moim .usm-moim-lst { width: 100%; display: flow-root; }
.usm-moim .usm-moim-lst li { float: left; width: calc(50% - 1rem); margin: 0 0 1rem 0; }
.usm-moim .usm-moim-lst li:nth-child(2) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(4) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(6) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(8) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(10) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(12) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(14) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(16) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(18) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:nth-child(20) { margin: 0 0 1rem 2rem; }
.usm-moim .usm-moim-lst li:hover a { border: 1px solid #5050b9; color: #5050b9; font-weight: bold; }
.usm-moim .usm-moim-lst li a { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 1rem 2rem; border: 1px solid #d7d7d7; border-radius: 0.5rem; }

/* profile */
#usm-moim-profile-id { }
.usm-moim-img { display: none; }
.usm-moim-title { width: calc(100% - 2rem); margin: 1rem; box-sizing: border-box; font-size: 2rem; font-weight: bold; }
.usm-con.usm-editor-view { width: calc(100% - 2rem); height: 5rem; overflow-y: auto; margin: 1rem; box-sizing: border-box; padding: 1rem; border: 2px solid #5050b9; border-radius: 1rem; background-color: #fff; }
.usm-con.usm-editor-view::-webkit-scrollbar { width: 1rem; }
.usm-con.usm-editor-view::-webkit-scrollbar-thumb { background: rgb(5, 101, 103); border-radius: 15px; }
.usm-con.usm-editor-view::-webkit-scrollbar-track { background: rgba(5, 101, 103, .1); border-radius: 15px; }

/* ann */
#usm-moim-post-ann-id { width: calc(100% - 2rem); box-sizing: border-box; margin: 1rem; position: relative; }
#usm-moim-post-ann-id .usm-cmenu-wrap { width: 100%; }
#usm-moim-post-ann-id .usm-cmenu-wrap h3 { font-size: 2.4rem; }
#usm-moim-post-ann-id .usm-cmenu-wrap .usm-post-more { position: absolute; top: 0.5rem; right: 0; }
#usm-moim-post-ann-id .usm-cmenu-wrap .usm-post-more a:before { content: url('../images/bt_moreview.png'); display: block; width: 2.1rem; height: 2.1rem; }
#usm-moim-post-ann-id .usm-post-ann-td { width: 100%; margin: 1rem 0 0 0; box-sizing: border-box; padding: 2rem; border: 1px solid #5050b9; border-radius: 2.5rem; display: flow-root; }
#usm-moim-post-ann-id .usm-post-ann-td li { padding: 1rem 0; border-bottom: 1px solid #ccc; display: flow-root; }
#usm-moim-post-ann-id .usm-post-ann-td li:hover .usm-post-ann-tit a { color: #5050b9; font-weight: bold; }
#usm-moim-post-ann-id .usm-post-ann-td li:hover .usm-post-ann-day { color: #5050b9; }
#usm-moim-post-ann-id .usm-post-ann-td li .usm-post-ann-tit { float: left; width: 70%; }
#usm-moim-post-ann-id .usm-post-ann-td li .usm-post-ann-tit a { width: 100%; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#usm-moim-post-ann-id .usm-post-ann-td li .usm-post-ann-tit a:before { content: '\2022'; display: inline-block; vertical-align: baseline; margin: 0 0.5rem 0 0; }
#usm-moim-post-ann-id .usm-post-ann-td li .usm-post-ann-day { float: right; } 

#usm-moim-post-alb-id { clear: both; width: calc(100% - 2rem); box-sizing: border-box; margin: 0 1rem 1rem 1rem; position: relative; }
#usm-moim-post-alb-id .usm-cmenu-wrap { width: 100%; }
#usm-moim-post-alb-id .usm-cmenu-wrap h3 { font-size: 2.4rem; }
#usm-moim-post-alb-id .usm-cmenu-wrap .usm-post-more { position: absolute; top: 0.5rem; right: 0; }
#usm-moim-post-alb-id .usm-cmenu-wrap .usm-post-more a:before { content: url('../images/bt_moreview.png'); display: block; width: 2.1rem; height: 2.1rem; }
#usm-moim-post-alb-id .usm-post-album-con { width: 100%; display: flow-root; margin: 1rem 0 0 0; }
#usm-moim-post-alb-id .usm-post-album-imgbox { width: 100%; height: auto; box-sizing: border-box; margin: 0 0 1rem 0; position: relative; }
#usm-moim-post-alb-id .usm-post-album-imgbox:hover .usm-post-album-img img { transform: scale(1.2); }
#usm-moim-post-alb-id .usm-post-album-imgbox .usm-post-album-img { width: 100%; height: 24rem; box-sizing: border-box; }
#usm-moim-post-alb-id .usm-post-album-imgbox .usm-post-album-img a { width: 100%; height: 24rem; overflow: hidden; border-radius: 2rem; }
#usm-moim-post-alb-id .usm-post-album-imgbox .usm-post-album-img img { width: 100%; height: 24rem; position: relative; border-radius: 2rem; }
#usm-moim-post-alb-id .usm-post-img-tit { position: absolute; bottom: 0; left: 0; width: 80%; padding: 1rem; box-sizing: border-box; background-color: #5050b9; border-radius: 0 2rem 0 2rem; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#usm-moim-post-alb-id .usm-post-img-tit a { color: #fff; font-size: 2rem; }
#usm-moim-post-alb-id .usm-post-img-inf { display: none; }

.tch-year-list-wrap {border:1px solid #E4E4E4;padding:10px 0;border-bottom:2px solid;text-align:center;}
.tch-year-list-wrap span {display:inline-block;}
.tch-year-list-wrap span a {display:inline-block;}
.tch-year-list-wrap span:first-child a {padding-left:20px;background:url('../../../www/images/paging-prev.gif') no-repeat no-repeat left center;}
.tch-year-list-wrap span:last-child a {padding-right:20px;background:url('../../../www/images/paging-next.gif') no-repeat no-repeat right center;}
.tch-year-list-wrap span:nth-child(2) {padding:0 10px;font-weight:bold;padding:3px 5px;}

.tch-no-data {clear:both;text-align:center;padding:10px 0;border-style: solid;border-width: 0px 1px 1px 1px;border-color:#E4E4E4;margin-bottom:5px;}

footer { clear: both; width: 100%; background-color: #292929; margin: 0; text-align:center; }
footer .usm-moim-copyright { padding: 1rem 0; color: #fff; }

@media (min-width:768px) and (max-width:1023px){

	#usm-moim-post-alb-id { margin: 2rem 1rem 0 1rem; display: flow-root; }
	#usm-moim-post-alb-id .usm-post-album-imgbox { float: left; width: calc(50% - 1rem); }
	#usm-moim-post-alb-id .usm-post-album-imgbox:nth-child(even) { margin: 0 0 1rem 2rem; }

}

@media all and (min-width:1024px){

.usm-mobile-menu { display: none; }

#usm-moim-top-id { width: 100%; padding: 0; }

#usm-moim-top-id .usm-moim-top { width: 140rem; margin: 0 auto; display: flow-root; text-align: right; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li { padding: 5px 5px 0 5px; }
#usm-moim-top-id .usm-moim-top .usm-moim-top-btn li.grade-admin { display: inline-block; }

.usm-moim-con { width: 140rem; margin: 0 auto; display: flow-root; }

	.usm-moim-left { float: left; width: 30rem; margin: 4rem 0 0 0; }

		.usm-class-nme { background: url('../images/left_title_bg.jpg') no-repeat; width: 30rem; height: 12rem; line-height: 12rem; border-radius: 20px 60px 0 5px; padding: 0; margin: 0 0 1rem 0; color: #fff; }

		#usm-moim-left-id { width: 30rem; height: auto; min-height: 30rem; }
	
			nav > ul { display: block; width: 30rem; padding: 0; }
			nav > ul > li { display: block; border: none; margin: 0 0 1rem 0; background: transparent; }
			nav > ul > li:first-of-type { border: none; }
			nav > ul > li a { display: block; width: 100%; box-sizing: border-box; font-size: 2rem; border: 1px solid #d7d7d7; border-radius: 0.5rem; background-color: #fff; padding: 1.5rem 2rem; line-height: 120%; }
			nav > ul > li a:hover { color: #5050b9; font-weight: bold; }

	#usm-moim-center2-id { float: left; width: 100rem; margin: 4rem 0 0 10rem; }
		.usm-moim .usm-moim-lst li { width: calc(33.333333% - 1rem); margin: 0 0 1rem 0; }
		.usm-moim .usm-moim-lst li:nth-child(2) { margin: 0 1rem 1rem 1rem; }
		.usm-moim .usm-moim-lst li:nth-child(4) { margin: 0 0 1rem 0; }
		.usm-moim .usm-moim-lst li:nth-child(5) { margin: 0 1rem 1rem 1rem; }
		.usm-moim .usm-moim-lst li:nth-child(6) { margin: 0 0 1rem 0; }
		.usm-moim .usm-moim-lst li:nth-child(8) { margin: 0 1rem 1rem 1rem; }
		.usm-moim .usm-moim-lst li:nth-child(10) { margin: 0 0 1rem 0; }
		.usm-moim .usm-moim-lst li:nth-child(11) { margin: 0 1rem 1rem 1rem; }
		.usm-moim .usm-moim-lst li:nth-child(12) { margin: 0 0 1rem 0; }
		.usm-moim .usm-moim-lst li:nth-child(14) { margin: 0 1rem 1rem 1rem; }
		.usm-moim .usm-moim-lst li:nth-child(16) { margin: 0 0 1rem 0; }
		.usm-moim .usm-moim-lst li:nth-child(17) { margin: 0 1rem 1rem 1rem; }
		.usm-moim .usm-moim-lst li:nth-child(18) { margin: 0 0 1rem 0; }
		.usm-moim .usm-moim-lst li:nth-child(20) { margin: 0 1rem 1rem 1rem; }

	.usm-moim-center { float: left; width: 100rem; margin: 4rem 0 0 10rem; }

		#usm-moim-profile-id { width: 100rem; margin: 0 0 4rem 0; position: relative; }
		
		#usm-moim-profile-id .usm-moim-img { display: block; width: 100rem; height: 36rem; }
		#usm-moim-profile-id .usm-moim-img div { width: 100rem; height: 36rem; }
		#usm-moim-profile-id .usm-moim-img div img { width: 100rem; height: 36rem; }
		
		#usm-moim-profile-id .usm-moim-title { position: absolute; top: 5rem; left: 5rem; width: 40rem;; margin: 0; padding: 0; }
		#usm-moim-profile-id .usm-con.usm-editor-view { position: absolute; top: 10rem; left: 5rem; width: 40rem; height: 20rem; margin: 0; }

		#usm-moim-center-id { width: 100%; display: flow-root; margin: 4rem 0; }

			#usm-moim-post-ann-id { clear: none; float: left; width: calc(50% - 2rem); margin: 0; padding: 0; }
 			#usm-moim-post-ann-id.usim-grade-post-sch-unused { width: 100%; margin: 0 0 4rem 0; }

			#usm-moim-post-alb-id { clear: none; float: left; width: calc(50% - 2rem); margin: 0 0 0 4rem; }
			#usm-moim-post-alb-id .usm-post-album-imgbox { float: left; width: calc(50% - 1rem); margin: 0; }
			#usm-moim-post-alb-id .usm-post-album-imgbox:nth-child(2) { margin: 0 0 0 2rem; }

			#content-area.grade-lst { float: left; width: 100rem; margin: 4rem 0 0 10rem; }
			.usm-class-home { width: 100%; margin: 0; }

footer { margin: 0 auto; }

.usm-real-Name {  float: left; width: 975px; min-height: 400px; margin: 0px 0 0 225px; padding: 15px 0 0 0; }
.usm-real-Name iframe { width: 100%; min-height: 400px; }

}

.pwcheck-area span { font-weight: bold; }
.pwcheck-area th { width: 30%; }
.pwcheck-area td { width: 70%; }