/* wrap css-----------------------------------------------------------------------------------------------------------*/
body{background-color: #f0f2f6; 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; -webkit-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}

/* clear css-----------------------------------------------------------------------------------------------------------*/
.clear{clear:both;}

/* 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;
	-webkit-border-radius: 5px;
	letter-spacing: -4px;

}
.centerlist > li p{display: inline-block; *display:inline; *zoom:1; letter-spacing:1px;  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;}

/* couponlist ------------------------------*/
.table.couponlist tr td{font-size:14px; }
.table.couponlist tr td:first-child{font-weight:bold}
.table.couponlist tr td:last-child{padding:5px}
.table.couponlist tr td .btn{margin:0; width:100%; text-align:center}
.table.couponlist tr td .dcolor{color:#ce0000}
.nohand{cursor:none}

/* coupon_detail ------------------------------*/

.coupon_detail{width: 100% !important; font-size: 0}
.coupon_detail > li{
	width: 100% !important; 
	font-size: 0; 
	background-color: #fff; 
	margin-bottom: 3px; 
	border:1px solid #ddd; 
	padding:5px; 
	border-radius: 5px;
	-webkit-border-radius: 5px;
	letter-spacing: -4px;

}
.coupon_detail > li p{display: inline-block; *display:inline; *zoom:1; letter-spacing:1px;  line-height:38px; vertical-align:middle}
.coupon_detail > li p:nth-child(1){width: 8%; }
.coupon_detail > li p:nth-child(2){width: 50%; }
.coupon_detail > li p:nth-child(3){width: 22%; font-size:13px}
.coupon_detail > li p:nth-child(4){width: 20%; text-align: right;}
.coupon_detail > li p.dcolor{color:#ce0000}
.coupon_detail > li p.ucolor{color:#0089ff}
.coupon_detail > li p .btn{padding:0 15px; margin:0}
.coupon_detail > li p .btn.nohand{cursor:none}


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

.barcodebox{font-size: 0; padding:10px 20px 0px; background-color: #fff; border:1px solid #ddd; border-radius: 5px; -webkit-border-radius: 5px; text-align:center;}
.barcodebox li:first-child{width: 100%; margin:0 auto; font-size: 18px; font-weight: bold}
.barcodebox li:first-child img{width: 60%}
.barcodebox .barcode{width: 50%; margin: 0 auto; padding:10px 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; -webkit-border-radius: 5px; text-align:center;}

/* backbtn ------------------------------*/
.backbtn{font-size: 30px; line-height: 30px; position: absolute; 
  left: 10px; top:18px;border:0; color:#fff !important; border-radius: 50px;-webkit-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;-webkit-border-radius: 30px; line-height: 30px}

/* title ------------------------------*/
.topmenubar{position: relative; width: 100%;max-width: 640px; margin:0 auto 0; text-align: center; height: 64px; }
.toplogo{ padding:13px 0; text-align:center; background-color: #01458b;border-bottom:1px solid #00346a; z-index: 1; width:100%; position:fixed; top:0; max-width:640px; margin:0 auto}
.toplogo a.centerlogo{display:inline-block; vertical-align: middle; width:130px; padding:0}
.toplogo a.centerlogo img{width:100%; vertical-align: middle;}

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



/* 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: #01458b; 
	height:100%;
}

.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: #61c1be;}

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

.logininput{font-size: 12px; color:#777;}
.logininput:focus{font-size: 15px; color:#111;}


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


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

.menu ul{font-size: 0;padding: 0 ; border-top: 1px solid #61c1be;letter-spacing: -4px; font-size: 0; line-height: 0;}
.menu ul li{ 
	width:32.8%; 
	margin-right:0.8%; 
	margin-left:0px !important; 
	border-right: 0px solid #ddd;
	vertical-align:top;
	display: inline-block; *display:inline; *zoom:1; 
	line-height: 1.8; letter-spacing: 0px;
	background-color: #fff; 
	border-bottom:1px solid #ddd;
}
.menu ul li:nth-child(3n){margin-right: 0px !important;}
.menu ul li a{
	width: 100%; 
	display: block; 
	letter-spacing: 0px; 
	padding:15px 5px; 
	position: relative; 
	color:#333;  
	font-size: 15px !important; 
	line-height: 15px;
	text-align: center; 
	font-weight: bold;
}
.menu ul li i{display: block; font-size:28px; color:#01458b; margin-bottom: 5px}
.menu ul li a.disable{color:#aaa;}
.menu ul li a.disable i{color:#ddd;}
.menu ul li a.fontsmall{font-size: 13px !important; letter-spacing: -1px }
.menu .memberinfo{padding:0 0 0 0; background-color: #01458b; position: relative;}

  @media all and (max-width: 375px) {
 	.menu ul li a{font-size: 12px !important; line-height: 15px}
 	.menu ul li a.fontsmall{font-size: 11px !important; }
 }


.menu .memberinfo .infotop{border-bottom: 1px solid #01458b;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 i{line-height:13px !important; float:left}
.menu .memberinfo .infotop .b-login span{color:#fff; float:left}
.menu .memberinfo .infotop .b-login{padding:12px 10px; line-height:13px !important;  background-color: #01458b; border:2px solid #fff;  word-break: keep-all; font-size: 13px }

.menu .memberinfo .bacodebox {text-align: center; padding: 15px 15px ; background-color: #003c79}
.menu .memberinfo .bacodebox .onecode{background-color: #fff; padding:10px 50px; border-radius: 10px;  -webkit-border-radius: 10px;border:1px solid #fff;}
.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 #01458b; padding:10px; border-radius: 5px;-webkit-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:#01458b;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.5); 
	transition: all 0.4s; 
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;}
/* index ------------------------------*/
.index{
	background:url(../images/loginbg.jpg) 0 center no-repeat; 
	background-attachment: fixed; 
	background-size: 100% auto; 
	padding:40px 10px 5px;
}
.index .main{padding:10px 0 30px;}
.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: 5px; -webkit-border-radius: 5px; 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}

.noticelist{width:100%; height:50px; overflow:hidden; background-color:#fff;}
.rolling{position:relative; width:100%; height:auto;}
.rolling li{width:100%; 
	height:50px; 
	line-height:50px;
	text-align:left; 
	position: relative; 
}
.rolling li a{display: block; width: 100%; padding-right:80px;text-overflow:ellipsis; table-layout: fixed; overflow: hidden;white-space: nowrap; word-wrap:normal;}
.rolling li span{position: absolute; right:0; top:0px;}
		

.m_classlist{ width: 100%; font-size: 0}
.m_classlist li{font-size: 0;margin:3px 0; line-height: 38px; border-bottom: 1px solid #ddd; padding:3px 0;}
.m_classlist h4{display:block;width: 100%; text-align: left; font-size: 18px; font-weight: bold; line-height: 38px}
.m_classlist p{display: inline-block;width: 100%; position: relative; text-align:left;line-height: 38px}
.m_classlist span{ border-right:2px solid #888; color:#666; padding: 1px 5px; border-radius: 3px; -webkit-border-radius: 3px; margin-right: 5px}
.m_classlist  a{border-radius: 0; -webkit-border-radius: 0px;padding:0 10px; margin:0; text-align:center; display: inline-block; position: absolute; top:0; right: 0}

/* 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:5px 5px 5px 10px;}
.table td:last-child{border-bottom:0;}
.table td.cash{color: #01458b; font-size: 18px}
.table td.listbtn{ font-size: 0; padding:0;}
.table td em{padding:0 5px;}
.table td span{ padding-right:12px; border-right: 1px solid #ddd; margin-right: 12px}
.table .listbtn{
	padding:0 10px;
	background-color: #01458b;
	float: right;
	color:#fff;
	border-radius: 3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px;
}

.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; *display:inline; *zoom:1;}
.calendar td{padding:5px;text-align:right; border-right:1px solid #ddd; }
.calendar td.bgred{background-color: #01458b !important; color:#fff !important;}
.calendar .sun{color:#01458b;}
.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; *display:inline; *zoom:1; width:10px; height:10px; margin-right:5px}
.colorbox .bg_01{background-color:#01458b}

/* 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}


.tab.pivacy{font-size: 0; text-align:center; width:100%;  border:0 !important; }
.tab.pivacy li{display: inline-block; width: 30%; font-size:0; padding:0px 0px !important; margin: 0 auto; background-color:#f0f0f0 !important; border:0 !important; border-radius:0 !important}
.tab.pivacy li a{font-size:13px; width:100%; border-radius:0 !important;  border-right:1px solid #01458b ;}



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

.notice td:first-child{background-color: #01458b; 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%; height:100px ;margin:0 auto}
footer .footmenu{font-size: 0; background-color: #fff; margin:0;}
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:#01458b;}
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: #e7e9ee; 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;background-color:#f0f2f6; 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: #01458b; color:#fff; border:1px solid #01458b; }
.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;}

/*--tab --------------*/
.tab{font-size: 0; text-align:center; width:100%; margin-bottom:20px;}
.tab li{display:inline-block;  width:50%; padding:0; border:1px solid #f0f0f0; background-color: #f0f0f0; position: relative;}
.tab li:last-child{border-left:0;}
.tab li.act{background-color: #01458b; border-color:#01458b;}
.tab li.act a{color:#fff;}
.tab li a{width:100%; display:block; padding:10px 0px; color:#777; font-size:13px;}


.id_toptitle h1{padding: 30px 15px 15px !important}
.title_temp{padding-top:20px;}

/*--push --------------*/
.push_lockerbtn{
	line-height: 26px; 
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	-o-border-radius:3px; 
	background-color: #01458b;
	color:#fff !important;
	padding:0 10px;
	float: right;

}
.push_lockerbtn:after{content: ''; display: block; clear: both;}

.push_lockerbox{
	padding:10px;
	background-color: #fff;
	border:1px solid #ddd;
	border-radius: 5px;
	margin:20px 0 ;
}

.push_lockerbox h1{
	color:#01458b;
}

/*--popup --------------*/
.popup{
	background-color: #fff; 
	position: absolute;
	left:50%; 
	width: 90%;
	margin-left:-45%;
	max-width: 640px; 
	border-radius: 10px;
	-webkit-border-radius: 10px;
	border:1px solid #ddd;
	top: 20px;
	height: auto; 
	overflow: auto;
	padding:20px 25px;
	z-index: 9999;
	color:#111;
}
.popup > h3 {text-align:left; position: relative; font-weight: 500; padding:5px; font-size: 16px; border-bottom:2px solid #ddd;}
.popup > h3 em{color:#01458b;}
.popup .contentbox{height: 150px; display: none; padding:10px; border:1px solid #ddd; overflow: auto;margin-top:5px;}
.popup .contentbox h1{font-size: 20px; color:#333  !important}
.popup .contentbox h2{font-size: 18px; color:#333  !important}
.popup .check,.popup .check input, .popup .check span{color:#111 !important; font-size: 14px}
.popup .check{margin-top: 5px}

.popup h3 > p{position: absolute; right: 7px; top:10px; 
	line-height: 24px;	font-size: 20px; color:#aaa; padding:0 10px; cursor:pointer;}

.logincheck{display: none}

.conblock{ display: block !important }

/* 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: #01458b; padding:20px; }
 .Ad .maintitle h1{color:#fff;}



/* switch ------------------------------*/
.setup i{margin-right: 5px}
.rightorder{position: absolute;right: 65px; top: 5px}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 32px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f0f0f0;
  -webkit-transition: .4s;
  -o-transition: .4s;
  -moz-transition: .4s;
  transition: .4s;
  margin:0 !important;
  border:0 !important;
  padding:0 !important;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  -o-transition: .4s;
  -moz-transition: .4s;
  transition: .4s;
}

.switch input:checked + .slider {
  background-color: #01458b;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #01458b;
}

.switch input:checked + .slider:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  -moz-transform: translateX(28px);
  -o-transform: translateX(28px);
  transform: translateX(28px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}




/* CLOSE POPUP ------------------------------*/

#disableDiv { position:fixed; left:0; top:0;width:100%; z-index:995 ; background-color:#111; filter:Alpha(opacity=80);opacity:0.8; -moz-opaciry:0.8}
#endDiv {width:80%; height:80%; position:absolute; left:0; top:0; bottom:0; right:0; z-index:996; margin:auto auto auto auto;}

.closepop td{padding:0}
.closepop .popbtn{color:#fff; height:50px}
.closepop .popyes{background-color:#00458d;}
.closepop .popno{background-color:#333; }




.GyeSanSeo_list{}
.GyeSanSeo_list tr{position:relative;}
.GyeSanSeo_list tr td:first-child{}
.GyeSanSeo_list tr:first-child td{height:35px; line-height:35px;}
.GyeSanSeo_list tr td:first-child a{position:absolute; right:-3px; top:0px; height:34px; line-height:35px; padding:0 20px;  border-radius:0}



#GyeSanSeoView {  
  position:absolute;  
  left:50%;
  top:50%;
  width:95%;
  z-index:100;  
  display:none;  
  font-size:0;
  transform:translate(-50%,-50%);
  z-index: 10000;
}
#GyeSanSeoView img{width:100%}
#GyeSanSeoView a{
	z-index:10000;
	font-size:16px;
	color:#fff;
	display:inline-block;
	padding:6px 25px;
	line-height:1;
	position:absolute;
	right:0;
	top:-35px;
	border:2px solid #fff;
	border-radius:10px;
	font-weight:bold

}
.backmask{
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	z-index: 9999;
	background-color:rgba(0,0,0,0.4);
	display:none;
}

/*  */
.choicebox {width:100%; margin-bottom:20px;  border-top:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#fff;}
.datechoice{padding:20px 15px;}

/*  */
.timechoice{ }
.timechoice ul{font-size:0; width:100%;  padding:15px; text-align:left; border-top:1px solid #ddd;border-bottom:1px solid #ddd; background-color:#e7e9ee; }
.timechoice ul li{width:32%; margin-right:2%; margin-bottom:5px; display:inline-block; text-align:center;  border:1px solid #ddd; }
.timechoice ul li:nth-child(3n){margin-right:0}
.timechoice ul li a{width:100%; display:block; padding:8px 5px; background-color:#fff; font-size:18px; border-radius:5px; }

/*  */
.josicmenu{width:100%; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background-color:#fff; padding:20px 0}
.josicmenu ul{width:100%;  overflow:auto; font-size:0; padding:10px 10px 0; white-space:nowrap;}
.josicmenu li{width:33%; margin-right:10px; display:inline-block;}
.josicmenu li:last-child{margin-right:0}
.josicmenu li a{padding: 10px; display:block; width:100%; font-size:16px;background-color:#e7e9ee;  border:1px solid #cdd0d3; border-radius:3px;}
.josicmenu li a.act{background-color:#01468b; border-color:#01468b; color:#fff; font-weight:bold}

/*  */
.josiclist{border-top:1px solid #ddd; margin-bottom:20px; padding:20px 0 }
.josiclist ul{font-size:0; text-align:left; height:238px; overflow:auto; padding:15px; background-color:#e7e9ee;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
.josiclist li{
	font-size:0; 
	width: 100%;
	height:45px;
	display:inline-block;
	vertical-align:top; 
	margin-bottom:8px;
	position:relative;
	
}
.josiclist li:last-child{margin-bottom:0}
.josiclist li a{display:block; width:100%; padding:0px 5px; background-color:#fff; border-radius:3px; border:1px solid #c2c5cb;}
.josiclist li a.act{background-color:#01458b; border-color:#01458b}
.josiclist li a.act *{color:#fff}
.josiclist li h3{
	width:65%; 
	display:inline-block; 
	font-weight:bold;  
	font-size: 15px; 
	line-height:45px;
	vertical-align:top;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis
}
.josiclist li p{
	width:35%; 
	display:inline-block;
	text-align:right;  
	font-size:15px; 
	line-height:45px;
	vertical-align:top;
}


/*  */
.josichoice{padding:20px 0px;}
.josichoice table{width:100%; }
.josichoice table th{background-color:#e7e9ee; padding:5px;}
.josichoice table tr{border-top:1px solid #aaa; border-bottom:1px solid #aaa;}
.josichoice table td{background-color:#fff; padding:0;position:relative; font-size:0;}
.josichoice table input{width:35px; height: 25px; border-color:#aaa !important; line-height:25px; vertical-align:top;border-radius:1px;}
.josichoice table tr th:first-child,
.josichoice table tr td:first-child{text-align:left !important}

.josichoice table tr td h3{
	width:100%;
	padding:0px 60px 0px 10px;
	border-bottom:1px solid #ddd;
	font-weight: bold;
	height:39px;
	line-height:39px;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis
}
.josichoice table tr td p{padding:8px 10px; display:inline-block; width:50%;  }
.josichoice table tr td p label{padding:0 10px 0 0; color:#555; font-size:13px}
.josichoice table tr td p.amout label::before{content:''; border-left:1px solid #ddd; margin-right:10px;}
.josichoice table tr td p.amout span{color:#00c5bf; font-size:17px;}
.josichoice table .btn-qty{
	display:inline-block; 
	font-size:20px; 
	border:1px solid #555; 
	color:#555;
	width:25px; 
	height:25px; 
	line-height:25px;
	border-radius:1px;
	vertical-align:top;
	text-align:center;
}

.josichoice table .btn{
	width: 50px; 
	margin:0;
	padding:0; 
	font-size: 20px; 
	height:38px;
	line-height:38px;
	background-color:#f0f2f6;
	position: absolute;
	text-align:center;
    top: 0;
    right: 0;
	border: 0;
    border-left: 1px solid #ddd;
	border-radius:0 !important
	}

.josicpaylist tr,
.josicpaylist tr td{display:block; width:100%;}
.josicpaylist tr{margin-bottom:10px;}
.josicpaylist  .listnone {width:100%; text-align:center; padding:30px 0; background-color:#e7e9ee}

/*  */
.total{padding:10px 10px 0; }
.total table{border:0 !important;width:100%; }
.total table tr{border:0 !important;}
.total table tr td{font-size:15px}
.total table tr td:first-child{text-align:left;}
.total h2{display:inline-block; color:#01468b; font-size: 30px; padding:0 4px; font-weight:bold}
.total h3{display:inline-block;  color:#01468b;  font-size: 30px;}


/*  */
.josic_bottom{padding-bottom:20px}
.josic_bottom a.btn{ width:42%;	color:#fff !important; font-size:23px; line-height: 50px; height:50px;vertical-align:middle;  padding: 0 !important; border:0 !important}


/*  */
.josic-relist{background-color:#fff}
.josic-relist table{width:100%; border-top:1px solid #ddd; border-bottom:1px solid #ddd}
.josic-relist table tr{border:1px solid #ddd;}
.josic-relist table td{background-color:#fff; padding:8px 8px; font-size:0;}
.josic-relist table tr th:first-child,
.josic-relist table tr td:first-child{text-align:left !important}
.josic-relist table tr td h3{
	font-size:16px;
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis
}
.josic-relist table tr label{font-size:13px; color:#888; font-weight:300; margin-right:3px;}
.josic-relist table tr td p{font-size:14px; color:#555}
.josic-relist table tr td a.btn{width:50px; padding:5px 10px; margin:0; margin-right:5px; line-height:1.3;color:#fff}
.josic-relist table tr td a:last-child{margin-right:0}



/*  */
.josicdetail{ text-align:left; display:none}
.josicdetail .detail-top{border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:20px;}
.josicdetail .detail-top h3{font-weight:400; border-bottom:0; padding:0; line-height:1.4; font-size:18px;}
.josicdetail .detail-top h3 label{font-weight:bold; margin-right:10px}

.josicdetail h4{font-size:18px}
.josicdetail h4::before{content:'\e9b1'; color:#01458b; font-size:15px; line-height:19px; margin-right:5px;}
.josicdetail ul{border:1px solid #aaa; margin-bottom:20px }
.josicdetail li{font-size:0; border-bottom:1px solid #aaa}
.josicdetail li:last-child{border-bottom:0}
.josicdetail h5{font-weight:bold;border-bottom:1px solid #ddd; padding:3px 5px;}
.josicdetail p{display:inline-block; width:50%; padding:3px; font-size:14px; text-align:center}
.josicdetail p label{font-size:13px; color:#555; line-height:22px; margin-right:3px;}
.josicdetail p.amount{position:relative;}
.josicdetail p.amount::before{content:''; border-left:1px solid #ddd; margin-right:10px; position:absolute; left:0; top:8px; height:15px; }


.josicdetail .totalamount{font-size:15px; text-align:right;border-top:1px solid #ddd; padding-top:15px;}
.josicdetail .totalamount h1{display:inline-block; padding:0 10px; color:#01458b}
.josicdetail .closebtn{
	font-size:18px;
	line-height:1;
	text-align:center; 
	padding:25px; 
	display:block; 
    position: absolute;
    right: 0px;
    top: 0px;
}