/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; font-size: 16px; }

.img-style{
	margin: 0 auto;
	border: 5px solid #d50000;
	border-radius: 10px;
	display: block;
}

.img-responsive{
}

.table .U-td-styleA{
	background:#b8d4fc;
}

.row{
	margin:20px 0;
}
/*改變iphone電話號碼顏色樣式*/
a[href^=tel]{
 color:#72e6ff;
}



.U-wrapper{
	background:url(../images/indexbg.jpg) #5d0000 center top no-repeat;
}

/*header*/
.U-header { 
	position:relative;
}
	.U-header .container{ 
		width:1024px;
		height: 707px;
		position:relative;
	 }
		.U-header .logo{
			width:200px;
			height:134px;
			position:absolute;
			top: 10px;
			left:750px;
		}
			.U-header .logo a{
				width:200px;
				height:134px;
				display:block;
				background:url(../images/logo.png);
			}
			.U-header .header_gold{
	width: 176px;
	height: 175px;
	border-radius: 50%;
	display: block;
	position: absolute;
	top: 146px;
	left: 160px;
	overflow: hidden;
	-webkit-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
			}
			.U-header .light{
				position: absolute;
				background: #fff;
				width: 25px;
				height: 175px;
				top: 0;
				left: -45px;
				opacity: 0.3;
				-webkit-transition: all 0.25s ease-out;
				transition: all 0.25s ease-out;
				-webkit-transform: skewX(-25deg);
						transform: skewX(-25deg);
				animation-name: light;
				-webkit-animation-name: light;
				animation-duration: 2s;	
				-webkit-animation-duration:2s;
				animation-timing-function: ease-out;	
				-webkit-animation-timing-function: ease-out;
				visibility: visible !important;	
				animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;
			   }

			   @keyframes light{
				   0%{
					left: -45px; 
				   }
				   60%{
					width: 45px;
					left: 220px;
				   }
				   100%{
					width: 45px;
					left: 220px;
				   }
			   }
		

/* =================頁面選單================= */	
.nav{width:980px;margin:0 auto;padding:0; height:80px;  display:flex; justify-content:center; flex-wrap: wrap; margin-bottom:20px;}
	.nav > li{text-indent:-9999px; float:left; list-style:none; display:block; width:21.5%; height:88px; margin:0 2px; }
	.nav a{ display:block; width:100%; height:100%; transition:all .2s; background-position: bottom center; background-repeat:no-repeat;background-size:100% 202%;}
	a.navBtn001 { background-image:url(../images/navBtn01.png);}
	a.navBtn002 { background-image:url(../images/navbtn02.png);}
	a.navBtn003 { background-image:url(../images/navbtn03.png);}
	a.navBtn004 { background-image:url(../images/navbtn04.png);}
	.nav a:hover,a.hover{background-position: top center;}

/*content*/
	.U-content{
		width:100%;
		position:relative;
		color:#fff;
	}
		.U-content .container{
				width:850px;
				padding:20px 0 50px 0;
		}
			.U-content .title{
				width: 95%;
				margin: 0 auto;
			}
				.U-content .title img{
					width: auto;
					height: auto;
					margin: 30px auto;
					display: block;
				}
			.U-content .container > p{
				font-size:1em;
				margin-left:2em;
				line-height:1.5em;
			}
			.U-content h4{
				font-size:1.3em;
				padding:5px 12px;
				display: inline-block;
				border-bottom: 5px solid #ffff33;
				color:#ffff33;
				margin-bottom: 0.5em;
			}
			.U-content h5{
				font-size: 1.3em;
				width: 80%;
				margin: 0 auto;
				display: block;
				text-align: center;
				padding: 5px 0;
				color:#3d0000;
				background-image: -o-linear-gradient(left, rgba(255, 213, 145, 0) 0%, rgba(255, 153, 0, 1) 35%, rgba(255,153, 0, 1) 65%, rgba(255, 213, 145, 0) 100%);
				background-image: -moz-linear-gradient(left, rgba(255, 213, 145, 0) 0%, rgba(255, 153, 0, 1) 35%, rgba(255,153, 0, 1) 65%, rgba(255, 213, 145, 0) 100%);
				background-image: -webkit-linear-gradient(left, rgba(255, 213, 145, 0) 0%, rgba(255, 153, 0, 1) 35%, rgba(255,153, 0, 1) 65%, rgba(255, 213, 145, 0) 100%);
				background-image: -ms-linear-gradient(left, rgba(255, 213, 145, 0) 0%, rgba(255, 153, 0, 1) 35%, rgba(255, 153, 0, 1) 65%, rgba(255, 213, 145, 0) 100%);
				background-image: linear-gradient(to left, rgba(255, 213, 145, 0) 0%, rgba(255, 153, 0, 1) 35%, rgba(255, 153, 0, 1) 65%, rgba(255, 213, 145, 0) 100%);
			}
			.U-content h6{
				text-align: center;
			}
			.U-content a{
				color:#72e6ff;
				font-weight:bold;
			}
		.U-content ol{
			font-size:1.2em;
			line-height:1.8em;
			margin-left:3em;
			padding-bottom:20px;
		}
	
/*產包*/	
.btnclass {
	position:relative;
	width:100%;
	margin:5px auto 30px auto;
	}
.btnclass .remainder {
	display:block;
	position:absolute;
	top:0;
	left:50%;
	margin-left:-35px;
	width:69px;
	height:69px;
	background-image:url(../images/remainder.png);
	color:#F00;	
	text-align:center;
	padding-top:25px;
	}
a.BtnSmartPay{
	float:left;
	display:block;
	width:45%;
	height:0;
	padding-bottom:19%;
	background-image:url(../images/BtnSmartPay.png);
	background-repeat:no-repeat;background-size:100% 303%;
	}
		
a.BtnWebATM{
	float:right;
	display:block;
	width:45%;
	height:0;
	padding-bottom:19%;
	background-image:url(../images/BtnWebATM.png);
	background-repeat:no-repeat;background-size:100% 303%;
	}
a.SoldOut {
	background-position:101%;
	}
a.NotYet {
	background-position:bottom;
	}		
/*item*/
.item__box--shadow {
    box-shadow: 0px 2px 2px 2px rgba(0,0,0,.2);
}
	.item__box {
		background: #300000;
		border-radius: 10px;
		border: 3px #d50000 solid;
		position: relative;
	}
	.item-title {
		width: 100%;
		text-align: center;
		background: #d50000;
		color: #fff;
		font-size: 100%;
		font-weight: bold;
		padding: 12px 0;
		margin-bottom: 12px;
		margin-top: 10px;
	}
	.item-title_1 {
		height: 50px;
	}
	.item-title_2 {
		height: 82px;
	}
	.item-get{
		color: #e1c697;
	}
	/*圖片框設定*/
	.item__box-img img{
		text-align:center;
		}
	.item__box-img{
		padding:10px 10px 0px 10px;
	}
	/* 100 */
	.item__box-img-100{
		width: 100%;
		height: 100px;
	}
	.item__box-img-100 img{
		max-height:80px; 
	}
	/* 150 */
	.item__box-img-150{
		width: 100%;
		height: 150px;
	}
	.item__box-img-150 img{
		max-height:140px; 
	}
	/* 250 */
	.item__box-img-250{
		width: 100%;
		height: 250px;
	}
	.item__box-img-250 img{
		max-height:235px; 
	}
	/* 300 */
	.item__box-img-300{
		width: 100%;
		height: 300px;
	}
	.item__box-img-300 img{
		max-height:290px; 
	}
	/* 350 */
	.item__box-img-350{
		width: 100%;
		height: 350px;
	}
	.item__box-img-350 img{
		max-height:330px; 
	}
	/* 350 */
	.item__box-img-450{
		width: 100%;
		height: 450px;
	}
	.item__box-img-450 img{
		max-height:430px; 
	}

.item__box-img-revise { padding:20px; }
				
/*表格設定*/
.table td{ color: #7650e3; }

.textbox{margin:0 auto;margin-top:15px;margin-bottom:15px;width:90%;border:2px dashed #FF0004;border-radius: 20px;background-color: #FF6;}
 .textbox p{ color:#600;}		

/*排行榜按鈕*/
.content__main__rankBtn { width:200px; height:50px; margin:10px auto 20px auto; position:relative;}	
	.content__main__rankBtn a{
			background-position: 0% 0%;
   			width:100%;
			height:50px;
			margin-right:3px;
			border:2px solid #fff;
			border-radius: 20px;
			color:#fff45c;
			font-size:1.2em;
			font-weight:bold;
			text-shadow:0 0 2px #7b0000;
			display: block;
			text-align: center;
			cursor: pointer;
			background: #cb60b3;
			background: -moz-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
			background: -webkit-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
			background: -o-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
			background: -ms-linear-gradient(top, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
			background: linear-gradient(to bottom, #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4', GradientType=0 );
			box-shadow: 0px 3px 3px #740090;
			margin-left:0 auto;
			background-attachment: scroll;
			position:relative;
	}
	.content__main__rankBtn a:hover{ box-shadow: 0px 2px #a10000,inset 0 2px 2px 2px #ff7272,inset 0 -10px 10px 0px #d12727; top:2px; color:#fff100; }
	.content__main__rankBtn a:before{ content: ''; display: inline-block; vertical-align: middle; height:100%; }
	.content__main__rankBtn a span{ display: inline-block; vertical-align: middle; font-size:16px; line-height:21px; letter-spacing:2px; }

/*產包*/
.U-product{
	width:95%;
	margin:0 auto;
	border:8px solid #8d62e6;
	border-radius: 20px;
	color:#fff;
}
	.U-productTop{
		width:98%;
		margin:0 auto;
		text-align:center;
	}
		.U-productTop__img img{
			width:80%;
			max-width:300px;
			margin:5px auto;
			
		}
		.U-productTop__name img{
			width:auto;
			margin:5px auto;
		}
		.U-productTop__price{
			width:100%;
			background:#8d62e6;
			font-size:1.5em;
			font-weight:bold;
			padding:5px 0;
		}
		.U-productTop__payBtn img{
			width:auto;
			margin:15px auto;
		}
	.U-productMain{
		width:98%;
		margin:0 auto;
		text-align:center;
	}
		.U-productMain h3{
			margin: 10px 0;
		}
		.U-productMain p{
			padding:0;
			margin:0;
		}
		.U-productMain .item-box{
			margin:0;
		}
		.U-productMain .item-box ul li p{
			font-size:1.1em;
		}
		 
/*--------------全家立即儲教學--------------*/
	.family_step h3 { 
		color:#FC3; 
		margin-top:20px; 
		font-weight:bold; 
		border-left:none;}

	.family_step a{
	color:#0FF;
	text-decoration: underline;
	}
	.family_step a:hover{
	color:#F0F
}
	.family_step p{line-height:25px; text-indent:25px;}
	
	.family_step h5 { display:block; text-align:center; font-weight:bold; }
	.family_step h5 span {padding:2px 8px; color:#753701; display:inline-block; margin:5px auto; border-radius:5px; font-weight:bold;
		background: #D3E0A2; background: linear-gradient(to bottom, #D3E0A2 0%, #66B423 100%); }
	h5{
		color: #FFFD00;
		padding-left: 20px;
		font-size: 120%;
	}

	.ImgStyleB{ 
		max-width: 95%;
	    margin: 0 auto;
	    display: block;
	}


/*--------------訂單查詢--------------*/
.box_message {
	display: block;
	position:relative;
	margin:0 auto;
	margin-bottom:30px;
	width:60%;
	}
.box_message a {
		display:block;
		position:absolute;
		border-radius:6px;

	color:#FFF;
	border: 1px solid #af6124;
    text-shadow: 1px 1px 1px #1a1302,1px 1px 1px #1a1302;
	background: #f9c377;
	background: -moz-linear-gradient(top, #f9c377 0%, #ea9431 50%, #dd8430 51%, #af4a24 100%);
	background: -webkit-linear-gradient(top, #f9c377 0%,#ea9431 50%,#dd8430 51%,#af4a24 100%);
	background: linear-gradient(to bottom, #f9c377 0%,#ea9431 50%,#dd8430 51%,#af4a24 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c377', endColorstr='#af4a24',GradientType=0 );
		text-decoration:none;
		font-weight: bolder;
		padding:10px 10px;
		font-size:140%;
		text-align:center;
		width:35%;
		top:50%;
		left:60%;}
.box_message img {
	width:100%;
	max-width:508px;}


.box_orders {
	border-radius:0 8px 8px 8px;
	border: 2px solid #F90;
	padding:10px;
	position: relative;
	margin-top:35px;
	margin-bottom:60px;
	}
	.box_orders a{
		display:block;
		position:absolute;
		border-radius:6px;
		background-color:#F90;
		color:#300000;
		text-decoration:none;
		font-weight: bolder;
		padding:5px 20px;
		text-align:center;
		bottom:10px;
		right:10px;
		} 
.number {
	color:#300000;
	position:absolute;
	background-color:#F90;
	top:-35px;
	left:-2px;
	border-radius: 8px 8px 0 0;
	padding:5px 25px;
	height:35px;
	}
.number .item{color:#300000;}
.item{
	display:inline-block;
	color: #FC0;
	text-align:right;
	width:80px;
	margin-right:3px;
	}
.dat,.date,.mode,.sum,.status {
	float:left;
	display:block; width:45%;
	}
.number {}
.detail { clear:both;}
.modify {
	position:relative;
	border-radius:7px;
	background-color: rgba(0,0,0,.6);
	padding:10px;
	margin-top:10px;
	}
.modify p{ line-height:28px;}
.modify input {
	padding:2px;
	border: none;
	border-radius:4px;
	}

/*動態*/

.pulse {
	animation-name: pulse;
	-webkit-animation-name: pulse;
	animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(0.92);
		opacity: 1;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale(0.92);
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}