body { background: url("../../img/lyanature-logo_2000_bg.png") no-repeat right bottom fixed; background-size: 70%; }
body.error { background: none; }

.table { width: 100%; height: 100%; max-width: 1280px; display: table; }
.loginTable { width: 100%; max-width: 100%; background-color: #6D6D6F; }
.tableCell { display: table-cell; vertical-align: middle; }



/* Login */
.loginLine { text-align: center; background-color: #fff;  border-radius: 10px; max-width: 390px; width: 94%; min-height: 303px; padding: 5px; margin: 0 auto; }
.loginBox { border: #999999 1px solid; border-radius: 10px; min-height: 260px; padding: 20px; }

.loginBox h1 { text-align: center; }
.loginBox h1 img { width: 200px;  }

.loginBox p { padding-bottom: 30px; }

.loginBox ul { padding-bottom: 20px; } 
.loginBox li { width: 70%; border-radius: 5px; border: #6D6D6F 1px solid; height: 30px; line-height: 32px; text-align: left; margin: 0 auto 10px; } 
.loginBox li span { display: inline-block; width: 30px; text-align: center; font-size: 1.3em; padding: 7px 0 0 3px; }
.loginBox li input { width: 70%; border: none; height: 30px; line-height: 30px; vertical-align: top; padding: 0 0 0 5px; }

.warning { color: #ff0000; font-weight: bold; font-size: 1.1em; padding-bottom: 20px; }
.warning span { padding-right: 5px; vertical-align: middle; }



/* Join */
.memLine { text-align: center; background-color: #fff;  border-radius: 10px; max-width: 390px; width: 94%; min-height: 303px; padding: 5px; margin: 10px auto; }
.memBox { border: #999999 1px solid; border-radius: 10px; min-height: 260px; padding: 20px; }

.memBox h1 { text-align: center; }
.memBox h1 img { width: 200px;  }

.memBox .tit { font-size: 1.1em; padding-bottom: 20px; }

.memBox .memData { text-align: left; padding: 0 2% 20px 2%; overflow: hidden; }

.memBox .memData dt { width: 34%; float: left; line-height: 40px; }
.memBox .memData dt span { padding-right: 5px; font-size: 1.2em; vertical-align: middle; width: 15px; text-align: center; }
.memBox .memData dd { width: 66%; float: left; padding: 4px 0;  }
.memBox .memData dd input { border-radius: 5px; border: #6D6D6F 1px solid; height: 30px; line-height: 32px; width: 90%; padding: 0 5%; }
.memBox .memData .readonly { background-color: #efefef; }
.memBox .memData dd span { display: block; }
.memBox .memData .mb15 { margin-bottom: 15px; }

.memBox .info { padding: 0 12%; overflow: hidden; }
.memBox .info li { width: 50%; float: left; height: 25px; line-height: 25px;  }
.memBox .info span { display: inline-block; padding: 0 9px 1px 0; font-size: 1.3em; vertical-align: middle; }
.memBox .info a {color: #000; }

.memBox .memBtn { clear: both; padding: 0 0 20px 0; }
.memBox .pwBtn input { clear: both; margin: 0 0 20px 0; height: 35px; line-height: 34px; text-align: center; width: 220px; background-color: #6D6D6F; color: #fff; border: none; font-weight: bold; cursor: pointer; font-family: NanumGothic, Arial, sans-serif; }

.modiBox .memData dt { width: 42%; }
.modiBox .memData dd { width: 58%; }
.modiBox .memData dd.width100 { clear: both; width: 100%; text-align: right; font-size: .9em; color: #9c0039; }


@media all and (max-width:360px) {
	.memBox .memData { text-align: left; padding: 0 1%; }
	.memBox .memData dt { width: 100%; line-height: 28px; }
	.memBox .memData dd { width: 100%; }
	.memBox .info { padding: 0 6%; overflow: hidden; }
}



/* Error */
.errorTable { width: 94%; max-width: 100%; padding: 0 3%; }
.border1 { border: #6D6D6F 5px solid; border-radius: 10px; max-width: 600px; width: 95%; padding: 1%; margin: 0 auto; background-color: #fff; }
.border1 dl { border: #6D6D6F 1px solid; border-radius: 10px; padding: 50px 10%; text-align: center; }
.border1 dt { font-size: 2em; line-height: 1.4; padding-bottom: 20px; font-weight: bold; }
.border1 dt span { color: #9C0039; }
.border1 dt .fa-warning { display: block; font-size: 50px; padding-bottom: 10px; }
.border1 dd { line-height: 1.6; font-size: 1.2em; }
.border1 dd a.backBtn { display: inline-block; color: #fff; background-color: #6D6D6F; width: 150px; text-align: center; font-weight: bold; padding: 5px 0; margin-top: 25px; }
.border1 .info { padding-top: 10px; }

@media all and (max-width:320px) {
	.border1 dl { padding: 20px 5%; }
	.border1 dl dt { font-size: 1.6em; }
	.border1 dl dd { font-size: 1.1em; }
}

@media all and (min-width:680px) {
	.border1 dl { padding: 100px 10%; }
}

.contents .border1 { margin-top: 20px; }

@media all and (min-width:680px) {
	.contents .border1 { margin-top: 60px; }
}



/* Layout */
.menu { vertical-align: top; background-color: #6D6D6F; width: 70px; color: #fff; }
.menu h1 { padding: 30px 0; text-align: center; }
.menu h1 img { width: 62px; }
.menu ul { overflow: hidden; }
.menu li { font-weight: bold; font-size: 1.0em; text-align: center; padding-bottom: 10px; }
.menu li span.fa { font-weight: normal; font-size: 2.5em; display: block;	 }
.menu li span.text { display: none; }
.menu li a { color: #fff; display: block; width: 70px; padding: 20px 0; }
.menu li a:focus, 
.menu li a:hover, 
.menu li a.here { background-color: #fff; color: #6D6D6F; }

@media all and (min-width: 768px) and (max-width: 1023px) {
	.menu h1 img { width: 90px; }
	.menu li a { color: #fff; display: block; width: 120px; padding: 20px 0; }
	.menu li span.fa { font-weight: normal; font-size: 2.5em; display: block; padding-bottom: 10px; }
	.menu li span.text { display: block; }
}


@media all and (min-width: 1024px) {
	.menu { vertical-align: top; background-color: #6D6D6F; width: 200px; color: #fff; }
	.menu h1 img { width: 150px; }
	.menu li { font-weight: bold; font-size: 1.3em; text-align: center; padding-bottom: 10px; }
	.menu li span.fa { font-weight: normal; font-size: 2.5em; display: block; padding-bottom: 10px; }
	.menu li span.text { display: block; }
	.menu li a { color: #fff; display: block; width: 160px; padding: 30px 20px; }

}


.contents { vertical-align: top; padding : 30px 15px 150px 15px; display: block; overflow: hidden; width: auto;  }

@media all and (min-width:680px) {
	.contents { padding : 30px 15px 200px 15px; }
}


.contents .topNavi { text-align: right; padding-bottom: 30px; } 
.contents .topNavi p { display: block; padding: 0 0 10px 0; font-size: 1.1em; }
.contents .topNavi span { font-size: 1.3em; padding-right: 8px; vertical-align: middle; }
.contents .topNavi a { text-align: center; border: 1px solid; display:inline-block; width: 80px; height: 30px; line-height: 30px; border-radius: 5px; font-weight: bold;  }
.contents .topNavi a:focus,
.contents .topNavi a:hover { color: #fff; background-color: #6D6D6F; }

.contents h2 { background: url("../../img/bullet2.png") no-repeat 0 5px; padding-left: 20px;margin-left: 10px; margin-bottom: 20px; }

@media all and (min-width:520px) {
	.contents .topNavi p { display: inline; padding: 0 20px 0 0; font-size: 1.1em; }
}


.contents .productSel { background-color: #f9f9f9; border: #6D6D6F 1px solid; padding: 20px; border-radius: 10px; margin-bottom: 30px; white-space: nowrap; }
.contents .productSel span { display: block; font-weight: bold; padding: 0 0 10px 0; }
.contents .productSel select { width: 120px; height: 30px; }
.contents .productSel a { text-align: center; display:inline-block; width: 80px; height: 30px; line-height: 28px; border-radius: 5px; font-weight: bold; color: #fff; background-color: #6D6D6F; vertical-align: middle;}
.contents .productSel a:focus,
.contents .productSel a:hover { background-color: #fff; color: #6D6D6F; border: 1px solid; height: 28px; line-height: 26px; }


@media all and (min-width:520px) {
	.contents .productSel { background-color: #f9f9f9; border: #6D6D6F 1px solid; padding: 20px 20px 20px 40px; border-radius: 10px; margin-bottom: 30px; }
	.contents .productSel select { width: 180px; height: 30px; }
}


@media all and (min-width:1025px) {
	.contents .productSel span { display: inline; font-weight: bold; padding: 0 40px	 0; }
}



.contents .dashboard { width: 100%; clear: both; position: relative; margin-bottom: 30px;  }

.contents .dashboard dl { width: 100%; background-color: #f8f8f8; padding: 30px 0; margin-bottom: 20px; }

.contents .dashboard dt { width: 200px; height: 70px; border: #bfbfbf 1px solid; border-radius: 35px; font-size: 3em; font-weight: bold; line-height: 74px; text-align: center; margin: 0 auto; background-color: #fff; font-family: Arial, sans-serif; }
.contents .dashboard dd { text-align: center; padding-top: 15px; line-height: 1.5; }
.contents .dashboard dd p { font-size: 1.5em; font-weight: bold; }
.contents .dashboard dd span { font-size: 1.2em; }



@media all and (min-width:1025px) {
	.contents .dashboard dl { width: 32.5%; background-color: #f8f8f8; padding: 30px 0; margin-bottom: 0; }
	.contents .dashboard .left { position: absolute; top: 0; left: 0; }
	.contents .dashboard .right { position: absolute; top: 0; right: 0; }
	.contents .dashboard .center { margin: 0 auto; }
}



#map { overflow: hidden; }
#map iframe { overflow: hidden; border: none; background: none; width: 100%; height: 650px; }
#map .frame { margin-top: 30px;  }

#map .chartList { width: 90%; float: static; overflow: hidden; color: #242323; background-color: #eef9fb; padding: 5%; }

#map .chartList h3 { font-size: 2.3em; padding: 10px 0 20px 0; }

#map .chartList p { padding-bottom: 15px; font-size: 1.5em;  border-bottom: #187f95 2px solid; }
#map .chartList p strong { font-size: 1.3em; font-weight: bold; }

#map .chartList ul { padding-top: 35px; }
#map .chartList li { font-size: 1.3em; color: #000; margin-top: 30px; padding-bottom:13px; font-weight: bold; position: relative; border-bottom: #898989 1px solid; }
#map .chartList li:first-child { margin-top: 0; }
#map .chartList li span { display: inline-block; width: 27px; height: 27px; border-radius: 13px 13px 0 13px; vertical-align: bottom; margin-right: 7px;}
#map .chartList .yellow { background-color: #ffcd00; }
#map .chartList .skyblue { background-color: #5ac9ff; }
#map .chartList .red { background-color: #fe5454; }
#map .chartList .violet { background-color: #665afe; }
#map .chartList .green { background-color: #32d36b; }
#map .chartList li strong { display: block; padding-top: 20px; text-align: right; vertical-align: top; font-size: 2.5em; font-family: Arial, sans-serif; font-weight: bold; }

@media all and (min-width:480px) {
	#map .chartList li strong { position: absolute; top: 10px; right: 0; padding: 0; vertical-align: top; font-size: 2.5em; font-family: Arial, sans-serif; font-weight: bold; }
}

@media all and (min-width:680px) {
	#map .frame { margin-top: 30px; width: 100%; float: static; overflow: hidden; }
	#map .chartList { width: 96%; padding: 2%; }
}

@media all and (min-width:1280px) {
	#map .frame { margin-top: 0;  width: 61%; float: left; overflow: hidden; }
	#map .chartList { width: 33%; min-height: 450px; float: right; overflow: hidden; color: #242323; background-color: #eef9fb; padding: 2%; }
}