/*index*/
.index-box{
	width: 100%;
	display: table;
	height: 100vh;
	background-image: url('../img/bg.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.betel-box{
	display: table-cell;
	vertical-align: middle;
}

.index-member-bg{
	width: 720px;
	display: block;
	margin: 0 auto;
	background-color: #0f512c;
	padding: 5px;
	box-sizing: border-box;
}

.index-title{
	text-align: center;
	font-size: 50px;
	letter-spacing: 3px;
	padding: 30px 0;
	color: #FFF;
	display: block;
}
.member-box{
	width: 100%;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.3);
	padding: 30px 0;
}

.member-join{
	width: 500px;
	display: block;
	margin: 0 auto;
	font-size: 0;
	max-width: 100%;

}
.member-join li{
	padding-bottom: 20px;
}
.member-join li:last-child{
	padding-bottom: 0;
}
.member-join li input{
	width: 100%;
	height: 50px;
	font-size: 24px;
	background-color: rgba(0,0,0,0);
	border: 1px solid #FFF;
	padding-left: 20px;
	box-sizing: border-box;
	letter-spacing: 5px;
	color: #FFF;
}
.member-join li input#submit{
	border: 0;
	cursor: pointer;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

.branch{
	background-color: rgba(0,0,0,0);
	font-size: 24px;
	color: #FFF;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	padding-left: 20px;
	letter-spacing: 5px;
	appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-color: #FFF;
    background-image: url('../img/icon1.png');
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 50px;
    border-right: 0;
    cursor: pointer;
}

.branch option{
	color: #000;
}

.work-box{
	width: 60%;
	max-width: 100%;
	display: inline-block;
}

.work-box select{
	width: 100%;
	height: 50px;
	display: block;
	font-size: 24px;
	background-color: rgba(0,0,0,0);
	border: 1px solid #FFF;
	box-sizing: border-box;
	padding-left: 20px;
	letter-spacing: 5px;
	color: #FFF;
	appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url('../img/icon1.png');
    background-repeat: no-repeat;
    background-position: 100% center;
    background-size: 50px;
    border-right: 0;
    cursor: pointer;
}
.work-box select option{
	color: #000;
}

.index-date{
	width: 40%;
	font-size: 20px;
	letter-spacing: 3px;
	text-align: right;
	color: #FFF;
	display: inline-block;
}

.button{
	width: 100%;
	line-height: 50px;
	text-align: center;
	color: #FFF;
	font-size: 24px ;
	letter-spacing: 5px;
	background-color: #0f512c;
}
.button a{
	width: 100%;
	height: 100%;
	display: block;
}

.web{
	width: 720px;
	max-width: 100%;
	display: block;
	text-align: right;
	padding-top: 30px;
	margin: 0 auto;
	font-size: 13px;
	letter-spacing: 3px;
	color: #FFF;
}
/*page*/
.page-box{
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	background-image: url('../img/page-bg.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
    padding: 20px 0;
}
.member-page{
	width: 750px;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	color: #FFF;
}
.page-title{
	width: 100%;
	display: block;
}
.member-info-box{
	width: calc(100% - 80px);
	display: block;
	font-size: 0;
	color: #FFF;
	float: left;
}
.member-title{
	font-size: 25px;
	letter-spacing: 5px;
	padding-bottom: 15px;
}

.member-info{
	width: 100%;
	font-size: 0;
	display: block;
}

.member-info li{
	font-size: 16px;
	display: inline-block;
	padding: 0 20px;
	letter-spacing: 3px;
	box-sizing: border-box;
	position: relative;
}
.member-info li:first-child{
	padding-left: 0;
}
.member-info li:after{
	content: '｜';
	font-size: 15px;
	position: absolute;
	top: 0;
	right: -10px;
}
.member-info li:last-child:after{
	content: '';
}
.page-out{
	width: 80px;
	height: 80px;
	display: block;
	float: right;
	background-color: #0f512c;
	padding: 17px;
	box-sizing: border-box;
	color: #FFF;
	text-align: center;
    font-size: 16px;
    letter-spacing: 3px;
}
.member-ps{
	font-size: 16px;
	letter-spacing: 3px;
	display: block;
	padding: 30px 0;

}

.member-ps span{
	color: #ff0000;
}

/*products*/

.products-box{
	width: 100%;
	
	display: block;
}

.products-class{
	font-size: 0;
	width: 100%;
	display: block;
}

.products-class li{
	width: 100px;
	line-height: 50px;
	max-width: 100%;
	text-align: center;
	background-color: #000;
	font-size: 20px;
	letter-spacing: 3px;
	display: inline-block;
	margin-right: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.products-class li a{
	width: 100%;
	height: 100%;
	display: block;
}
/*產品表格*/

.products-table{
	width: 100%;
	height: 100%;
	display: block;
	background-color: #0f512c;
	padding: 5px 0;
	box-sizing: border-box;
}

.table-box{
	font-size: 0;
	display: block;
}
.gift li{
	width: calc(100% / 3 );
	cursor: pointer;
}
#gift_list li{
	width: calc(100% / 3 );
}
#gift_list li.del{
	cursor: pointer;
}
#gift_list li.del:hover{
	color: red;
}
#gift_list h4{
	font-size: 25px;
	color: #FFF;
	letter-spacing: 3px;
	padding-left: 2px;
}
#gift_list li{
	font-size: 20px;
	background-color: #FFF;
	border: 1px solid  #b1b1b1;

}
#gift_list li:nth-child(1),
#gift_list li:nth-child(2),
#gift_list li:nth-child(3)
{
	background-color: #f8eebd;
	height: auto;
}
.gift li:hover{
	background-color: #000;
}

.nut{
	color: #000;

}
.nut ul:first-child{
	font-weight: bold;
}
.nut ul:first-child li{
	background-color: #f8eebd;
}
.nut .betel li{
	width: calc(100% / 5 );
	background-color: #FFF;
}
.betel li:first-child{
	background-color: #f8eebd;
}

.nut .cigarette li,
.nut .drink li{
	width: calc(100% / 3 );
}
.nut .other li{
	width: calc(100% / 3 );
}
.nut ul li{
	display: inline-block;
	max-width: 100%;
	height: 46px;
	line-height: 46px;
	text-align: center;
	border: 1px solid #b1b1b1;
	box-sizing: border-box;
}

.nut ul.table-box li{
	font-size: 24px;
	letter-spacing: 1px;
	vertical-align: middle;
    overflow: hidden;
}
/* .nut ul li.purchase{
	width: 90px;
	max-width: 100%;
} */

.system{
	background-color: rgba(255,255,255,1);
}
.employee,
.detailed
{
	background-color: #FFF;
}
.employee span{
	cursor: pointer;
}
.employee input{
    width: 40px;
    max-width: 100%;
    font-size: 16px;
    vertical-align: middle;
    height: 46px;
    text-align: center;
    color: #000;
    background-color: #FFF;
    line-height: 46px;
    border: 0;
}
.employee.stock input{
    width: 100%;
    font-size: 16px;
    vertical-align: middle;
    height: 46px;
    text-align: center;
    color: #000;
    background-color:  #FFF;
    line-height: 46px;
    border: 0;
}
.nut ul.nut-products li{
	font-size: 16px;
	vertical-align: middle;
	letter-spacing: 1px;
}


/*提交班表*/
.member-submit-box{
	width: 100%;
	display: block;
	margin: 20px 0;
}

.verification{
	width: 300px;
	display: block;
	max-width: 100%;
	float: left;
}

.member-submit{
	width: 300px;
	display: block;
	float: right;
	max-width: 100%;
	line-height: 76px;
	text-align: center;
	background-color:  #0f512c;
	font-size: 16px;
	letter-spacing: 3px;
}
.member-submit a{
	width: 100%;
	height: 100%;
	display: block;
}

.products-box .active{
	background-color: #ff1531;
}
.rwd-products-list{
	display: none;
}
.rwd-products-more{
	display: none;
}

.detailed-title{
	font-size: 24px;
	letter-spacing: 3px;
	display: block;
	padding: 10px 0;
}
.detailed-box{
	width: 100%;
	display: block;
	font-size: 0;
}
.detailed-box li{
	width: 33.333%;
	display: inline-block;
	color: #FFF;
	font-size: 20px;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid #b1b1b1;
	margin-bottom: 5px;
}



.detailed-class{
	width: 100%;
	border-bottom: 1px solid #b1b1b1;
	box-sizing: border-box;
	letter-spacing: 3px;
	padding: 5px 0;
	background-color: #f8eebd;
	color: #000
}
.detailed-much{
	padding: 5px 0;
	color: #000;
}