@charset "utf-8";
*{box-sizing:border-box;}
html,body{min-height:100%; margin:0 auto; font:62.5% "Microsoft Yahei",Arial,tahoma,sans-serif; outline:none;}
body{background:#0083A9; background:linear-gradient(339deg,#0083A9 0%,#00A99E 100%); color:#000; height:100%; line-height:165%; margin:0; padding:0; font-size:1.2rem; outline:none;}
form,ul,ol,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:none; list-style-type:none; outline:none;/* line-height:135%;*/}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; border:none; list-style-type:none; font-size:1.4rem; outline:none;/* line-height:135%;*/}
img{border:none; outline:none; max-width:100%; height:auto;}

/*
::-webkit-scrollbar {width:6px;}
::-webkit-scrollbar-track {border-radius:0; background:#333;}
::-webkit-scrollbar-thumb {border-radius:10; background:#740;}

 ::selection {background: #F00; color: #fff;} 为所有选中的文本设置样式 */

a, a:link, a:visited{text-decoration:none; color:#000; outline:none; cursor:pointer;}
a:hover{color:#01302d; text-decoration:none;}

.hide{display:none !important;}
.center{text-align:center!important;}

a.goback{position: absolute; top:0; left:0; width:5rem; height:5rem; line-height:50rem; background:url(web/goBack.png) no-repeat center center; background-size:1rem; overflow: hidden;}

.btn, a.btn{text-decoration:none; display:block; width:100%; margin:0 auto; border:0; height:4rem; line-height:4rem; background:#00A99E; color:#fff; text-align:center; font-size:1.4rem; border-radius:.2rem; overflow: hidden;}
.btn:hover, a.btn:hover{text-decoration:none;opacity: .9;}
.btn-disabled{background:#ccc!important; color:#999!important; cursor:not-allowed; opacity:1;}

.noData{margin:2rem; padding:2rem; background:#fff; text-align:center; font-size:1.2rem; color:rgba(0,0,0,.5); border-radius:0.2rem;}
.noData:before{content:""; display:block; height:12rem; margin:1rem auto; background:url(web/noData.png) no-repeat center top; background-size:15rem;}
.noData a:link, .noData a:visited{margin:2rem auto; width:auto; display:block;}

.layui-layer{border-radius:0.2rem!important;}
.layui-layer-dialog{min-width:20rem!important;}
.layui-layer-dialog .layui-layer-content{text-align:center!important; padding:2rem 2rem 1rem 2rem!important; font-size:1.2rem!important;}
.layui-layer-btn{text-align:center!important; font-size:1.4rem; padding:0 2rem 2rem 2rem!important;}
.layui-layer-btn .layui-layer-btn0{background:#00A99E!important; color:#fff!important; border:0!important; height:3.5rem!important; line-height:3.5rem!important; border-radius:.2rem!important;}
.layui-layer-btn .layui-layer-btn1{height:3.4rem!important; line-height:3.4rem!important; border-radius:.2rem!important;}
.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i{color:#00A99E;}
.layui-progress-bar{background:#00A99E; height:1.4rem!important; line-height:1.4rem!important;}
.layui-progress-big .layui-progress-text{font-size:1rem!important; height:1.4rem!important; line-height:1.4rem!important;}
.layui-flow-more{font-size:1.2rem !important;}
.layui-flow-more a cite{font-size:0} /* load more */
.layui-flow-more a cite::after{content:"loading..."; font-size:1.2rem !important;}

.layui-table-tool-self{right:1rem;}
.layui-table-tool-temp{padding-right:0;}

.layui-table-view{border-color:transparent;} 
.layui-table-tool{padding:0;font-size:1.2rem; color:#fff;}
.layui-table-tool .layui-form-item{padding:0; margin:0; color:#fff;}
.layui-table-tool .layui-form-item .layui-form-label{padding:0 0.5rem; height:38px; line-height:38px;}
.layui-table-box{padding:0; margin:0; background:#fff;}
.layui-table-view:after{width:0;}
.layui-table-page{ background:#fff;}
.layui-table-tool .layui-table-tool-self .layui-inline[lay-event]{background:#fff;}

.layui-card{border-radius:0;}
.layui-form-item{margin-bottom:1rem;}
.layui-form-label{padding:9px 2px; width:105px;}

.layui-form-select dl dd.layui-this{color:#00A99E;}
.layui-laydate .layui-this, .layui-laydate .layui-this>div{background-color:#00A99E!important;}
.layui-form-onswitch{border-color: #00A99E; background-color: #00A99E;}

/*数据表格中的下拉框*/
.layui-table-cell{overflow:visible !important; height:auto !important; text-overflow:inherit; white-space:normal; word-break: break-all; padding:0 5px;} /* 防止下拉框的下拉列表被隐藏---必须设置---  表格TD超出的自行换行  */


.diylaerLoad .layui-layer-content{padding:4rem 0 0 0; width: 100%!important; color:#fff; text-align: center; background-position: center top!important;}/* layer.load 加自定义文字时 */


.loginBox{margin:12vh 0 15vh 0; text-align: center;}
.loginBox::before{content:''; display:block; margin:0 auto 2rem auto; width:8rem; height:8rem; background:url(web/logo.png) no-repeat center center; background-size:100%; border-radius:50%;}
.loginBox h1{font-size:5rem; height:6rem; line-height:6rem; color:#fff;}
.loginBox h2{font-size:2rem; height:4rem; line-height:4rem; color:rgba(255,255,255,.5);}
.loginBox form{margin:4rem auto 0 auto; padding:3rem; max-width:40rem; background:#fff; border-radius:0.6rem;}
.loginBox form .layui-form-item{margin-bottom:2rem;}
.loginBox form .layui-form-item:last-child{margin:0;}
.loginBox form .layui-input{font-size:1.4rem; font-weight:bold; border-radius:0.4rem;}
.loginBox form .layui-input::placeholder{font-weight:normal; font-size:1.2rem;}
.loginBox form .layui-btn{font-size:1.4rem; border-radius:0.4rem;}
.loginBox form .scodeImg{width:90%; height:38px; border-radius: 0.4rem;}


header{margin:2rem; height:6rem; position: relative; overflow:hidden;}
header a:hover{text-decoration:none;}
header a.logo{display:block; margin:0 15rem 0 0; height:6rem; font-weight: normal; position: relative; color:#fff; overflow:hidden;}
header a.logo::before{content:''; position: absolute; top:0; left:0; width:6rem; height:6rem; background:url(web/logo.png) no-repeat 0 center; background-size:100%; border-radius:50%; box-shadow:0 0 1rem rgba(255,255,255,.1);}
header a.logo strong{display:block; margin:0 0 0 7rem; height:4rem; line-height:4rem; font-size:3rem;}
header a.logo span{display:block; margin:0 0 0 7rem;  height:2rem; line-height:2rem; font-size:1.4rem;}
header a.user{position: absolute; top:0; right:0; text-align: right; color:#fff;}
header a.user img{position: absolute; top:0; right:0; width:5rem; height:5rem; border-radius:50%;}
header a.user strong{display:block; margin:0 5.5rem 0 0; height:3rem; line-height:3rem; font-size:1.4rem;}
header a.user span{display:block; margin:0 5.5rem 0 0;  height:2rem; line-height:2rem; font-size:1.2rem;}

footer{margin:0 2rem; height:5rem; line-height:5rem; text-align:center; border-top:1px dotted rgba(255,255,255,.2);}
footer span{margin:0 1rem; color:rgba(255,255,255,.5);}
footer span a:link, footer span a:visited{text-decoration:none; color:rgba(255,255,255,.5);}
footer span a:hover{text-decoration:none; color:#fff;}

.navBox{padding:4rem; text-align: center ; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items: center;}
.navBox a{margin:1rem; padding:8vh 2rem; width:15%; color:#fff; border:1px dotted rgba(255,255,255,.1); text-align: center; font-weight:bold; font-size:2rem; position: relative; overflow: hidden;}
.navBox a:hover{text-decoration:none; color:#fff; background:rgba(255,255,255,.1); border:1px dotted rgba(255,255,255,.3);}
.navBox a::before{content:''; display:block; margin:0 auto 1.5rem auto; width:5rem; height:5rem; background:#abc;}

.navBox a.booking::before{background:url(web/nav/booking.png) no-repeat center center; background-size:100%;}
.navBox a.qrcode::before{background:url(web/nav/qrcode.png) no-repeat center center; background-size:100%;}
.navBox a.myorder::before{background:url(web/nav/myorder.png) no-repeat center center; background-size:100%;}
.navBox a.verify::before{background:url(web/nav/verify.png) no-repeat center center; background-size:100%;}
.navBox a.statistics::before{background:url(web/nav/statistics.png) no-repeat center center; background-size:100%;}
.navBox a.statisticsAddr::before{background:url(web/nav/statisticsAddr.png) no-repeat center center; background-size:100%;}
.navBox a.order::before{background:url(web/nav/order.png) no-repeat center center; background-size:100%;}
.navBox a.product::before{background:url(web/nav/product.png) no-repeat center center; background-size:100%;}
.navBox a.feedback::before{background:url(web/nav/feedback.png) no-repeat center center; background-size:100%;}
.navBox a.user::before{background:url(web/nav/user.png) no-repeat center center; background-size:100%;}
.navBox a.purviewgroup::before{background:url(web/nav/purviewgroup.png) no-repeat center center; background-size:100%;}
.navBox a.addr::before{background:url(web/nav/addr.png) no-repeat center center; background-size:100%;}
.navBox a.setting::before{background:url(web/nav/setting.png) no-repeat center center; background-size:100%;}
.navBox a.my::before{background:url(web/nav/my.png) no-repeat center center; background-size:100%;}
.navBox a.faq::before{background:url(web/nav/faq.png) no-repeat center center; background-size:100%;}
.navBox a.chart::before{background:url(web/nav/chart.png) no-repeat center center; background-size:100%;}
.navBox a.help::before{background:url(web/nav/help.png) no-repeat center center; background-size:100%;}
.navBox a.about::before{background:url(web/nav/about.png) no-repeat center center; background-size:100%;}


.topNav{height:5rem; line-height:5rem;}
.topNav h1{height:5rem; line-height:5rem; padding:0 0 0 5rem; font-size:1.4rem; color:#fff;}
.topNav button.right{position: absolute; top:0.5rem; right:0.5rem;}

.bookingBox{margin:2rem auto; width:90%; position:relative; z-index:2; text-align:center;}
.bookingBox ol{margin:4rem 0; text-align:center; font-size:1.6rem; color:#fff;}
.bookingBox ul{margin:4rem auto; max-width:80rem; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center;}
.bookingBox ul a{flex:1; margin:0 1rem; padding:10vh 0; font-size:2rem; color:#fff; border:1px dotted rgba(255,255,255,.2); border-radius:0.2rem;}
.bookingBox ul a:hover{text-decoration:none; color:#fff; background:rgba(255,255,255,.1); border:1px dotted rgba(255,255,255,.3);}
.bookingBox ul a::before{content:''; display:block; margin:0 auto 1.5rem auto; width:5rem; height:5rem; background:#abc;}
.bookingBox ul a.type_1::before{background:url(web/noon.png) no-repeat center center; background-size:100%;}
.bookingBox ul a.type_2::before{background:url(web/night.png) no-repeat center center; background-size:100%;}
.bookingBox ul a.noBooking{filter: grayscale(1); opacity: 0.5;}
.bookingBox h4{font-size:1.4rem; color:#fff;}

.cartLists{background:#fff; margin:0 2rem 8rem 2rem;}
.cartLists h2{padding:2rem 2rem 0 2rem;}
.cartLists ul{border-bottom:1px dotted rgba(0,0,0,.1); padding:2rem; min-height:8rem; box-sizing:border-box; position: relative; overflow: hidden;}
.cartLists ul:last-child{border:0;}
/* .cartLists ul:hover{background:#efefef;} */
.cartLists ul img{position: absolute; top:2rem; left:2rem; width:5rem; height:5rem; border-radius:0.2rem;}
.cartLists ul h3{margin:0 10rem 0 7rem; font-size:1.3rem; font-weight:bold;}
.cartLists ul h4{margin:0.5rem 10rem 0 7rem; font-size:1.2rem; color:rgba(0,0,0,.5); font-weight:normal;}
.cartLists ul h4 span{color:#f20;}

.cartAddSubBox{position: absolute; top:2rem; right:2rem; width:11rem; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end;}
.cartAddSubBox .btn{width:4rem; height:4rem; line-height:4rem; margin:0; font-size:1.6rem; background:#e5e5e5;}
.cartAddSubBox .count{width:3rem; height:4rem; line-height:4rem; text-align: center; font-weight:bold; font-size:1.4rem;}
/* .cartAddSubBox .sub{background:#ccc;} */

.cartFooter{position: fixed; bottom:0; left:0; z-index:99; width: 100%; height:6rem; background:#000; overflow: hidden;}
.cartFooter strong{display:block; margin:0 13rem 0 0; color:#fff; font-size:1.8rem; box-sizing:border-box; padding:1rem; box-sizing:border-box; height:4rem; line-height:4rem;}
/* .cartFooter strong em{display:block; margin:0.2rem 0 0 0; color:rgba(255,255,255,.5); font-weight:normal; font-size:1.2rem; font-style:normal; } */
.cartFooter .btn{position: absolute; top:0; right:0; width:12rem; height:6rem; line-height:6rem; border-radius:0; background:#f20;}


/*我的二维码*/
.myCodeLists{margin:0 auto 2rem auto; text-align:center;}
.myCodeLists ul{margin:0 2rem 2rem 2rem; display:inline-block; padding:0; background:#fff; border-radius:0.5rem; position: relative; overflow: hidden;}
.myCodeLists ul h3{border-bottom:1px dashed rgba(0,0,0,.2); text-align:center; padding:2rem; position: relative;}
.myCodeLists ul h3::after{content:''; position: absolute; left:-1rem; bottom:-1rem; width:2rem; height:2rem; background:#009ea1; border-radius:50%;}
.myCodeLists ul h3::before{content:''; position: absolute; right:-1rem; bottom:-1rem; width:2rem; height:2rem; background:#009ea1; border-radius:50%;}
.myCodeLists ul p{padding:2rem;}
.myCodeLists ul p img{display:block; margin:0 auto; width:30rem;}
.myCodeLists ul h4{font-size:1.6rem; color:#0f0; text-align: center; margin:0 0 2rem 0;}
.myCodeLists ul h4.verification_2{color:#f20;}

.verifyBox{margin:2rem auto; max-width:80rem; text-align: center;}
.verifyBox h3{font-size:4rem; height:5rem; line-height:5rem; color:#fff;}
.verifyBox input{display:block; margin:3rem 0; width:100%; font-size:3rem; font-weight:bold; text-align:center; height:5rem; line-height:5rem; border:none;}
.verifyBox input:focus{color:#000;}
.verifyBox input::-webkit-input-placeholder {color:rgba(0,0,0,.2); font-size:1.6rem; height:5rem; line-height:5rem;}
.verifyBox input:-ms-input-placeholder {color:rgba(0,0,0,.2); font-size:1.6rem; height:5rem; line-height:5rem;}
.verifyBox input::-ms-input-placeholder {color:rgba(0,0,0,.2); font-size:1.6rem; height:5rem; line-height:5rem;}
.verifyBox input::placeholder{color:rgba(0,0,0,.2); font-size:1.6rem; height:5rem; line-height:5rem;}

.verifyOrderBox{margin:2rem auto; max-width:80rem; position: relative;}
.verifyOrderBox h2{position:absolute; left:20%; bottom:10rem; font-size:8rem; color:#0f0; opacity: 0.5; transform:rotate(-45deg); text-align: center;}
.verifyOrderBox h2.verification_2{left:auto; right:20%; color:#f20; transform:rotate(45deg);}
.verifyOrderBox h2.verification_3{color:#333;}
.verifyOrderBox h2.verification_4{color:#333;}

.verifyOrderBox h3{font-size:4rem; margin:2rem 0; height:4rem; line-height:4rem; text-align: center; color:#fff;}
.verifyOrderBox h3 span{font-size:2rem; margin:0 0 0 2rem;}
.verifyOrderBox ul{text-align: center;}
.verifyOrderBox ul p{display:inline-block; margin:2rem; font-size:1.6rem; line-height:165%; color:#fff;}

.verifyOrderBox table{width:100%; background:#fff; border-radius:0.2rem; overflow: hidden;}
.verifyOrderBox table th{border:1px dotted rgba(0,0,0,.1); text-align:center; font-size:1.4rem; padding:1rem; color:rgba(0,0,0,.5);}
.verifyOrderBox table td{border:1px dotted rgba(0,0,0,.1); text-align:left; font-size:2rem; padding:2rem; font-weight:bold;}
.verifyOrderBox table td:last-child{text-align:center;}

.verifyOrderBox .errTip{text-align:center; line-height:135%; font-size:5rem; padding:5rem 0; color:#fff;}
.verifyOrderBox .loadOrder{text-align:center; margin:10rem 0;}
.verifyOrderBox .loadOrder .layui-icon{font-size:6rem; color:rgba(255,255,255,.2);}



.searchBox{margin:0 2rem; font-size:1.4rem; color:#fff;}
.searchBox p{display:inline-block; vertical-align: middle; margin:1rem 2rem 1rem 0; min-width:20rem;}
.searchBox span{display:inline-block; height:38px; line-height:38px; vertical-align: middle;}

.searchItemOrder div.layui-input-inline{width:230px; margin:1rem 2rem 1rem 0;}

.productLists{padding:10px; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}
.productLists ul{width:150px; background:#fff; color:#000; padding:0; margin:8px; border-radius:4px; position: relative; overflow: hidden;}
.productLists ul.status_2{filter: grayscale(1); opacity: 0.5;}
.productLists ul img{display:block; width:100%; min-height:100px; background:rgba(0,0,0,.1);}
.productLists ul p{padding:1rem 0.2rem; text-align:center; font-size:12px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.productLists ul ol{text-align:center; height:3.5rem; line-height:3.5rem; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center;}
.productLists ul ol span{flex:1; font-weight:normal; font-size:12px;}
.productLists ul ol span.status{background:#ff5722; color:#fff; cursor: pointer;}
.productLists ul ol span.price{background:rgba(0,0,0,.1); color:#000;}
.productLists ul ol span.edit{background:#16baaa; color:#fff; cursor: pointer;}


.myOrderLists{margin:0 2rem;}
.myOrderLists a{display:block; margin:0 0 2rem 0; padding:2rem; border-radius:0.2rem; background:#fff url(web/go.png) no-repeat 97% center; background-size:0.8rem; position: relative;}
.myOrderLists a h3{position: absolute; top:5rem; right:10vh; font-size:3rem; color:#0f0; opacity: 0.3; transform:rotate(-45deg);}
.myOrderLists a h3.verification_2{color:#f20;}
.myOrderLists a h3.verification_3{color:#333;}
.myOrderLists a h3.verification_4{color:#333;}
.myOrderLists a h4{font-size:1.4rem; font-weight:bold;}
.myOrderLists a h4 span{font-size:1.2rem; font-weight:normal; color:rgba(0,0,0,.5);}
.myOrderLists a p{margin:1rem 0 0 0; font-size:1.2rem;}

.orderView{margin:0 2rem 2rem 2rem; padding:1rem 2rem; border-radius:0.2rem; background:#fff;}
.orderView h3{text-align:center;}
.orderView h3 img{display:block; margin: auto; max-width:30rem;}
.orderView ul li{margin:1rem; font-size:1.4rem; display:inline-block; width:30%;}
.orderView ul li span{color:rgba(0,0,0,.5);}
.orderView .layui-table th, .orderView .layui-table td{font-size:1.4rem; text-align: center;}
.orderView .layui-table th:first-child, .orderView .layui-table td:first-child{text-align:left;}

.myFaqPost{margin:2rem;}
.myFaqPost p{margin:0 0 1rem 0;}
.myFaqPost p textarea{font-size:1.4rem; border-radius:0.2rem;}
.myFaqPost p button{background:#f20; display:block;}

.myFaqLists{margin:2rem; border-radius:0.2rem; background:#fff;}
.myFaqLists h3{padding:2rem; font-size:1.6rem; font-weight:bold;}
.myFaqLists ul{padding:2rem; border-top:1px dotted rgba(0,0,0,.1);}
.myFaqLists ul h4{font-weight:normal; font-size:1.2rem; color:rgba(0,0,0,.5);}
.myFaqLists ul p{padding:1rem 0; font-size:1.4rem;}
.myFaqLists ul ol{background:rgba(0,157,162,.1); padding:2rem; font-size:1.4rem; color:#f20;}
.myFaqLists ul ol span{display:block; margin:0 0 0.5rem 0; font-size:1.2rem; color:rgba(0,0,0,.5);}

.aboutBox{margin:2rem;}
.aboutBox h3{}
.aboutBox h3 img{display:block; margin:0 auto 2rem auto; max-width:30rem;}
.aboutBox ul{min-height:30vh; font-size:1.4rem; color:#fff;}
.aboutBox ul p{margin:0 0 1em 0; font-size:1.4rem;}

.videoBox{}
.videoBox ul{margin:0 auto 2rem auto; max-width:90rem; background:#fff; border-radius:0; overflow: hidden;}
.videoBox ul h3{text-align:center; font-size:1.4rem; padding:1rem 0;}
.videoBox ul video{display:block; width:100%;}
.videoBox ul.video1{width:100%; max-width:40rem;}
.videoBox ul.video2{width:100%; max-width:90rem;}



.diyFormBox{font-size:1.4rem;}
.diyFormBox .layui-form-label{width:150px;}
.diyFormBox .layui-input-block{margin-left:170px}
.diyFormBox .layui-form-item .layui-input-inline{margin-left:20px}

.tongjiBox{padding:1rem 0;}
.tongjiBox li{text-align:center; padding:1rem 0;}
.tongjiBox li span{display:block; font-size:1.2rem; color:#999; margin:0.5rem 0 0 0;}
.tongjiBox li strong{display:block; font-weight:normal; font-size:2rem; color:#16baaa;}

.diy_layui-card-header .layui-btn-group .layui-btn{height:3rem; line-height:3rem;}

.online_user_show{display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}
.online_user_show p{text-align: center; margin:0.5rem; line-height:135%;}
.online_user_show p img{display:block; margin:0 auto; width:50px; height:50px; background:#e5e5e5; border-radius:50%; overflow:hidden;}
.online_user_show p strong{display:block; margin:5px 0 0 0; font-size:1.2rem; font-weight:normal;}
.online_user_show p span{display:block; font-size:1.2rem; color:#999;}

.layui-card_subTitle{text-align:center; padding:1rem 0;}
.layui-card_subTitle span{font-weight:normal;}

.statisBox{background:#fff; margin:2rem; padding:2rem;}
.statisBox h3{text-align:center; padding:0 0 1rem 0; border-bottom:1px dotted rgba(0,0,0,.1);}
.statisBox ul{padding:2rem 0 0 0; display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}
.statisBox ul li{flex:1; text-align:center;}
.statisBox ul li strong{display:block; font-size:3rem; font-weight:600; margin:0 0 1rem 0; color:#16baaa; }
.statisBox ul li span{display:block; font-size:1.4rem;}


@media (max-width:900px){
	.navBox{padding:1rem;}
	.navBox a{margin:0.5rem; padding:2rem 0.5rem; width:30%; font-weight:normal; font-size:1.4rem;}
	.navBox a::before{width:3rem; height:3rem;}

	footer{font-size:1.2rem;}

	.orderView ul li{margin:2rem 0; font-size:1.2rem; display:block; width:auto;}
	.orderView .layui-table th, .orderView .layui-table td{font-size:1.2rem;}

	.verifyBox{margin:2rem;}
	.verifyBox h3{display:none;}
	.verifyBox input{margin:0 0 3rem 0;}

	.verifyOrderBox{margin:2rem;}
	.verifyOrderBox ul{text-align:left;}
	.verifyOrderBox ul p{display:block; margin:1rem 0; font-size:1.4rem;}

	.diyFormBox{font-size:1.2rem;}
	.diyFormBox .layui-form-item{margin:0 0 2rem 0;}
	.diyFormBox .layui-form-label{width:auto; padding:0 0 0.5rem 0; display:block;}
	.diyFormBox .layui-input-block{margin:0; display:block;}
	.diyFormBox .layui-form-item .layui-input-inline{margin:0 0 0.2rem 0;}
	.diyFormBox .layui-form-mid{padding:0!important; margin: 0 !important;}

	.diy_layui-card-header .layui-btn-group{display:none;}
}

@media (max-width:500px){
	.loginBox{margin:8vh 0 10vh 0;}
	.loginBox form{margin:2rem; padding:2rem; max-width:100%;}

	header{margin:1rem; height:5rem;}
	header a.logo{margin:0 5.5rem 0 0; height:5rem; font-weight: normal; position: relative; color:#fff; overflow:hidden;}
	header a.logo::before{width:5rem; height:5rem;}
	header a.logo strong{margin:0 0 0 5.5rem; height:3rem; line-height:3rem; font-size:2rem;}
	header a.logo span{margin:0 0 0 5.5rem; height:2rem; line-height:2rem; font-size:1.2rem;}
	header a.user{width:3rem; height:3rem; top:1rem;}
	header a.user img{width:3rem; height:3rem;}
	header a.user strong{display:none;}
	header a.user span{display:none;}

	.myCodeLists ul{display:block;}
	.myCodeLists ul p img{width:80%;}

	.searchBox{margin:0 0 2rem 0; padding:1rem 2rem 2rem 2rem; background:#fff; color:#000;}
	.searchBox p{display:block; margin:1rem 0;}
	.searchBox .layui-btn{width:100%;} 
	.searchBox .layui-input-inline{width: 100% !important;}
	.searchBox span{display:block; width: auto !important;}
	.searchBox span .layui-form-select{width:100%;}

	.searchItemFlex{display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center;}
	.searchItemFlex p{flex:1; margin:1rem 1rem 0 0; display:inline-block; width:30%; min-width:30%;}
	.searchItemFlex .layui-btn{width:6rem; margin:1rem 0 0 0;}

	.searchItemFlexBig{}
	.searchItemFlexBig p{flex:auto; margin:0.5rem !important; width:40%; min-width:40%;}
	.searchItemFlexBig .layui-btn{margin:0.5rem !important;}

	.searchItemOrder{text-align: center;}
	.searchItemOrder div.layui-input-inline{flex:auto; margin:0.5rem !important; width:62% !important;}
	.searchItemOrder p{flex:auto; margin:0.5rem !important; width:45%; min-width:45%!important; display:inline-block;}
	.searchItemOrder p:first-child{width:30%; min-width:30%!important;}
	.searchItemOrder p span{width: auto !important;}
	.searchItemOrder .layui-btn{margin:0.5rem !important; width:45%;}

	.myOrderLists a h3{right:5vh;}


	.productLists{padding:0;}
	.productLists ul{width:40vw; margin:1rem;}

	.myFaqPost p button{width:100%;}

	.diyFormBox .layui-form-item #ID-laydate-range{display:flex; display:-webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:start;}
	.diyFormBox .layui-form-item #booking_start_time, .diyFormBox .layui-form-item #booking_end_time{width:12rem;}
	.diyFormBox .layui-form-item #ID-laydate-range .layui-form-mid{margin:1rem!important; padding:0!important; position:static; }
	.settingBox .layui-form-item .layui-form-mid{position: absolute; right:2rem; top:3.5rem;}
	.settingBox .layui-form-text .layui-form-label{width:100%; text-align: left;}
	.settingBox .layui-form-text  .tox-tinymce{border-radius:0.2rem; border:1px solid #eee;}
	.diyFormBox .layui-btn{width:100%;}
	.diyFormBox .layui-form-select .layui-edge{top:70%;}

	.layui-laydate-range{width:auto !important; left:5%!important;}
	.layui-laydate-range .layui-laydate-main{max-width:100% !important; width:100% !important; display:block;}
}