/* wrap css-----------------------------------------------------------------------------------------------------------*/
body{background-color: #f8f8f8; overflow-y: auto;}
body.hid{overflow: hidden;}
.container{width:100%;max-width:640px; margin:0 auto; }

 @media all and (max-width: 768px) {
  .nav-wrapper{height: auto; position: fixed;}
}

/* box css-----------------------------------------------------------------------------------------------------------*/

.box{
  width: 100%; 
  position: relative;
  margin-bottom: 25px;
  padding:20px 15px;
}
.box h2{ margin-bottom:20px;}
.boxhalf{width:49.5%;display: inline-block; margin-right: 1%}

/* index ------------------------------*/
.index{
	background:url(../images/loginbg.jpg) 0 center no-repeat; 
	background-attachment: fixed; 
	background-size: 100% auto; 
	padding:40px 15px 15px;
}
.index .main{padding:30px 0 40px;}
.index .main .btn{padding:0 30px; font-size: 18px; line-height: 50px;}
.index .main h2{color:#fff;}

.index .mainbox{padding:15px; background-color: #fff; border-radius: 10px; border:1px solid #ddd; box-shadow: 0px 2px 8px rgba(0,0,0,0.5)}
.index .mainbox h3{font-weight: bold; vertical-align: top; text-align: left; line-height: 1.45; margin-bottom: 10px;}
.index .mainbox .btn-sm{background-color: #fff}

/* centerlist ------------------------------*/

.centerlist{width: 100% !important; font-size: 0}
.centerlist > li{width: 100% !important; font-size: 0; background-color: #fff; margin-bottom: 10px; border:1px solid #ddd; padding:5px; border-radius: 5px}
.centerlist > li p{display: inline-block;  line-height:40px }
.centerlist > li p:nth-child(1){width: 10%}
.centerlist > li p:nth-child(2){width: 65%}
.centerlist > li p:nth-child(3){width: 25%; text-align: right;}
.centerlist > li p .btn{padding:0 15px;}

/* barcodebox ------------------------------*/

.barcodebox{font-size: 0; padding:20px 20px 0px; background-color: #fff; border:1px solid #ddd; border-radius: 5px; text-align:center;}
.barcodebox li:first-child{width: 100%; margin:0 auto; font-size: 22px; font-weight: bold}
.barcodebox li:first-child img{width: 60%}
.barcodebox .barcode{width: 50%; margin: 0 auto; padding:20px 0 ;}
.barcodebox .barcode img{width: 100%}

/* lockerbox ------------------------------*/
.lockerbox{font-size: 30px; font-weight: bold; padding:50px 20px; background-color: #fff; border:1px solid #ddd; border-radius: 5px; text-align:center;}

/* backbtn ------------------------------*/
.backbtn{font-size: 30px; line-height: 22px; position: absolute; 
  left: 10px; top:20px;border:0; color:#fff !important; border-radius: 50px; padding:0 5px;}

.logout{position: absolute; right: 10px; top: 40px; border:2px solid #777; color:#555 !important; 
	background-color: #fff; font-weight: 700; padding: 0 8px; font-size: 13px; border-radius: 30px; line-height: 30px}

/* title ------------------------------*/
.topmenubar{position: relative; width: 100%;max-width: 640px; margin:0 auto; text-align: center; height: 64px; }
.toplogo{ padding:18px 0; text-align:center; background-color: #cd0000; border-bottom: 1px solid #a60000; z-index: 1; width:100%; position:fixed; top:0; max-width:640px; margin:0 auto}
.toplogo a.spopass{display:inline-block;line-height: 1; vertical-align: middle;}
.toplogo a h2{display: inline-block; color: #f0c9c9; font-size: 23px; vertical-align: middle; line-height: 1; margin-left: 5px;}
.toplogo img{width: 125px; vertical-align: middle;}

/* maintitle ------------------------------*/
.maintitle{color:#fff;padding:32px 15px 15px;}
.maintitle h1{color:#111;}
.maintitle .subtitle{color:#555; font-size: 15px;
  padding:1px 30px; display: inline-block;margin: 2px 0 0; letter-spacing: 1px}


/* login ------------------------------*/
.login{ background-color: #870000; background: linear-gradient(to bottom, #b30000, #870000);}

.login .box{padding:20px 30px;}
.login span{color:#fff;}
.login .check input[type="checkbox"] + span:before{border:2px solid #fff;}
.login .loginbtn{padding:10px 15px; font-size: 20px; border:0; background-color: #cd0000;}

.login .maintitle h1{color:#fff;}
.login .maintitle h1 i{font-size: 65px}
.login .maintitle .subtitle{color:#fff;}


/* nav ------------------------------*/

.menubtn{position: absolute; right: 20px; top: 20px; z-index: 10000;
	border:0; color:#fff !important; padding:0;
	background-color: transparent; font-weight: 700; font-size: 25px; line-height: 22px}
.menubtn.xi-close{ display: none; background-color: transparent; position:absolute; top:20px; right:-45px; border:0;  color:#fff !important;}

.nav-wrapper{position: absolute; width:100% ; left:0; top:0; max-width:640px; }
.menu{
	width:83%; max-width: 550px; height: 100vh;
	background-color: #f0f0f0; 
	position:fixed; left: 0; top:0;  
	z-index: 999;
	transition: all 0.4s;
	display:none;
}

.menu ul{font-size: 0;padding: 0 ; border-top: 1px solid #b30000;}
.menu ul li{ width:32.8%; margin-right:0.8%; border-right: 0px solid #ddd;display: inline-block; background-color: #fff; border-bottom:1px solid #ddd;}
.menu ul li:nth-child(3n){margin-right: 0}
.menu ul li a{width: 100%; display: block;padding:15px 5px; position: relative; color:#333;  font-size: 13px !important; text-align: center; }
.menu ul li i{display: block; font-size:28px; color:#cd0000; margin-bottom: 5px}
.menu ul li a.disable{color:#aaa;}
.menu ul li a.disable i{color:#ddd;}
.menu .memberinfo{padding:0 0 0 0; background-color: #cd0000; position: relative;}

 @media all and (min-width: 321px) and (max-width: 425px) {
 	.menu ul li a{font-size: 11px !important}
 }
  @media all and (max-width: 320px) {
 	.menu ul li a{font-size: 9px !important}
 }


.menu .memberinfo .infotop{border-bottom: 1px solid #bc0000;padding: 25px 15px;}
.menu .memberinfo .infotop h3{color:#fff; display: block; line-height: 40px; font-size: 25px; font-weight: bold}
.menu .memberinfo .infotop h4{color:#fff; display:block; line-height:1.3; font-size:16px;}
.menu .memberinfo .infotop a{color:#fff; position: absolute; right: 15px; top:25px;}
.menu .memberinfo .infotop .b-login{padding:0px 10px; background-color: #cd0000; border:2px solid #fff;font-size: 13px }

.menu .memberinfo .bacodebox {text-align: center; padding: 15px 15px ; background-color: #b30000}
.menu .memberinfo .bacodebox .onecode{background-color: #fff; padding:10px 50px; border-radius: 10px;}
.menu .memberinfo .bacodebox .onecode a{width: 100%; display: block; height: 100%}
.menu .memberinfo .bacodebox .onecode a img{width: 100%}

.menu .memberinfo .bacodebox .twocode{width: 100% !important; display: block;font-size: 0; border-top:0; text-align: left;}
.menu .memberinfo .bacodebox .twocode a{width: 100% !important;position:relative; font-size: 15px; display: block; 
	background-color: #fff; margin-bottom: 10px; border:1px solid #d30000; padding:10px; border-radius: 5px}
.menu .memberinfo .bacodebox .twocode a:last-child{margin-bottom: 0}
.menu .memberinfo .bacodebox .twocode a:after{content:'\ea00'; position: absolute; right: 15px; line-height: 27px; top:10px;color:#cd0000;font-size: 11px}

.mask{display:none; width: 100%;height: 100%; cursor: pointer; z-index: 997; top: 0; right: 0; position: fixed; background: rgba(0, 0, 0, 0.8); transition: all 0.4s;}

/* table ------------------------------*/
.table{width:100%; table-layout: fixed;}
.table tr{border:1px solid #ddd; display: block;margin-bottom: 10px; background-color:#fff}
.table td{display: block; border-bottom:1px solid #ddd; text-align: left; padding:3px 15px;}
.table td:last-child{border-bottom:0;}
.table td.cash{color: #cd0000; font-size: 18px}
.table td.listbtn{ font-size: 0; padding:0;}
.table td em{padding:0 5px;}
.table td span{ padding-right:15px; border-right: 1px solid #ddd; margin-right: 15px}
.table .listbtn .btn{width:100%; padding:0 10px; display: inline-block; margin:0; border:0; border-radius: 0; text-align:center}
.table .listbtn .btn:last-child{border-left:1px solid #ddd;}

.table.notice td:nth-child(2){text-overflow:ellipsis; table-layout: fixed; overflow: hidden;white-space: nowrap; word-wrap:normal;}

/* calendar table ------------------------------*/

.calendar{width:100%; border:1px solid #ddd; background-color: #fff}
.calendar tr{border-bottom:1px solid #ddd}
.calendar tr:first-child td{text-align:center;}
.calendar tr td .month{font-size:20px;}
.calendar tr td .mp,
.calendar tr td .mn{font-size:10px; line-height:35px; vertical-align: top;padding:0 5px; display:inline-block}
.calendar td{padding:5px;text-align:right; border-right:1px solid #ddd; }
.calendar td.bgred{background-color: #cd0000 !important; color:#fff !important;}
.calendar .sun{color:#cd0000;}
.calendar .sat{color:#64cfff;}


.colorbox{text-align:right; border:1px solid #ddd; background-color:#fff;margin:5px 0;padding:5px 10px}
.colorbox li div{display:inline-block; width:10px; height:10px; margin-right:5px}
.colorbox .bg_01{background-color:#cd0000}

/* privacy ------------------------------*/

.privacybox{word-break: keep-all; text-align: left;}
.privacybox > div{margin-bottom: 30px; text-align: left;}
.privacybox div > div {border:1px solid #ddd;padding:15px; background-color: #fff}
.privacybox div > p{font-size: 14px; margin-bottom: 4px;color:#555}
.privacybox h2{margin-bottom: 5px; font-size: 22px;color:#555}
.privacybox h3{font-size: 16px; font-weight: bold; color:#666;}
.privacybox p{font-size: 13px; text-align: left; line-height: 1.5}

.privacybox .privacytype{border:1px solid #ddd; margin: 20px 0; background-color: #fff; font-size: 0;padding:10px; text-align: left; }
.privacybox .privacytype li{display:block; font-size: 14px; text-align: left; vertical-align: top}

/* notice ------------------------------*/

.notice td:first-child{background-color: #cb0000; color:#fff !important;}
.notice td:first-child span{color:#fff;border-right: 0; padding:0; margin-right:3px;}


/* view ------------------------------*/
.view tr td{padding:3px 8px;}
.view tr.tbcell{font-size: 0; background-color: transparent; border:0;}
.view tr.tbcell td{display: inline-block;  border-bottom: 0;  background-color:#fff; border:1px solid #ddd; width: 49%; margin-right: 1%}
.view tr.tbcell td:last-child{ margin-right: 0}
.view tr.tbcell span{border-right: 1px solid #ddd; padding-right: 8px; margin-right: 10px;}
.view td span{ text-align:left; border-right: 0; padding-right: 3px; margin-right: 0px; display: inline-block;}

.view td.notice_cnt{min-height: 250px;}
.view td.notice_cnt img{width: 100%}


.btn-mn{padding:0 12px; vertical-align: top; line-height: 46px}
/* footer ------------------------------*/

footer{max-width: 640px; width: 100%; max-height:229px; margin:0 auto}
footer .footmenu{font-size: 0; background-color: #fff}
footer .footmenu a{padding:8px 0px; display: inline-block; line-height: 1; width: 25%; font-size: 11px}
footer .footmenu a i{display: block; font-size: 22px; margin-bottom: 5px; color:#cd0000;}
footer .logo{max-width:140px; display: inline-block;padding: 0 15px 0px 0;width: 30%; font-size: 0; vertical-align: middle;}
footer .logo img{width: 100%}

footer .footinfobox{background-color: #ececec; padding:15px; display: none; border-top:1px solid #ddd;}
footer .footinfo{ font-size: 0;display: inline-block; width: 70%;text-align: left; vertical-align: middle;}
footer .footinfo li{display: inline-block; letter-spacing: 0.5px; padding:3px 5px; line-height: 1.3; font-size: 13px; color:#666; word-break: keep-all;}
footer .footinfo li b{color:#333;}

footer .footinfo li.address{display: block;}

footer .footerfold{font-size: 14px; text-align: left; color:#888; width: 100%; position:relative;padding:15px 10px ;}
footer .footerfold a{position: absolute; right: 10px; top:15px; color:#888; font-size: 12px;}

 @media all and (max-width: 640px) {
 	footer{margin-left: 0; left: 0}	
 }

/* board ------------------------------*/
.board{width: 100%; border:1px solid #ddd;}
.board th{ background-color: #cd0000; color:#fff; border:1px solid #cd0000; }
.board td{padding:5px 5px; border-top:1px solid #ddd; background-color: #fff}
.board tr:nth-child(2n-1) td{background-color: #f8f8f8}

.write textarea{border:1px solid #ddd; padding:10px;}
.write input[type=text]{width: 100%; text-align: left;}
.write td{background-color: #fff !important; padding:10px; text-align: left;}
.write th{background-color: #f0f0f0 !important; border:1px solid #ddd; color:#111;}

/* admin ------------------------------*/
 .Ad{width: 100%; max-width: 900px; margin:0 auto;}
 .Ad .topmenubar,
 .Ad .container,
 .Ad footer{max-width: none; }
 .Ad .container{background-color: #fff; border-right: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0}
 .Ad .topmenubar .toplogo{max-width: 900px}
 .Ad .maintitle{ background-color: #cd0000; padding:20px; }
 .Ad .maintitle h1{color:#fff;}