/* Reset By Normalize */
@import url(../css/reset.css);

/* 排行榜共用樣式 */
@import url(/include/i_GTrank.css);



/* 頁面框架設定 */
html,body { 
	background:none;
	font-family: "Helvetica Neue","微軟正黑體","Helvetica","Arial","PingFangTC-Light","STHeitiTC-Light","Microsoft JhengHei",sans-serif;
 }
table,th,tr,td {
	font-family: "Helvetica Neue","微軟正黑體","Helvetica","Arial","PingFangTC-Light","STHeitiTC-Light","Microsoft JhengHei",sans-serif;
}
.wrapper {
    line-height: 26px;
    font-size: 15px;
    width: 100%;
    background: #d2d2d2;
}
.container {
  width: 810px;
  margin: 0 auto;
  padding: 0 15px;
}

h1 {
	display: none;
}

ol {
	padding-left: 22px;
}


.img-responsive {
	max-width: 100%;
}
.img-border {
    border: 3px solid #fff;
}
.img-radius {
    border-radius: 15px;
}
.center {
    text-align: center;
}
/* 活動主資訊 */
.content>.container {
}

.content h3 {
	font-size: 150%;
	font-weight: bold;
	margin: 0 auto;
	padding: 12px 0;
	text-align: center;
	color: white;
}


/* 文字設定 */

.f-bold { font-weight: bold;}
.f-lg { font-size: 120%;}
.f-sm { font-size: 80%; }
.f-link { text-decoration: none;}


.f-danger { color: #dc3545;}
.f-fun { color: #f7f40a;}
.f-primary { color: #007bff;}
.f-success { color: #28a745;}
.f-info { color: #17a2b8;}
.f-beauty { color: #da199d;}
.f-light { color: #fff;}
.f-wraning { color: #ffc107;}
.f-dark { color: #000;}
.f-secondary { color: #868e96;}

.f-list {
	
}

/* 常用 icon 設定 */
/*icon*/
.ico {
	display: inline-block;
	padding: 2px 6px;
	margin: 0 5px;
	font-size: 80%;
	color: #fff;
	text-shadow: 1px 1px #555;
	font-weight: bold;
	font-style: normal;
	text-align: center;
	vertical-align: middle;
	border-radius: 16px;
}

.ico-new {
	background: #15b53a;
}
.ico-hot {
	background: #d82237;
}
.ico-good {
	background: #f4880a;
}



/* 網格系統陽春版 */

.row {
	margin: 24px -30px;
	text-align: center;
}
.col-1,.col-2, .col-2_4,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10.col-11,.col-12 {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 24px;
	padding:0 10px;
}

/* 滿版 */
.col-12 {
	padding:0 30px;
	width: 100%;
}
.col-11 {	
	width: 90.5%;
}
.col-10 {
	width: 82.5%;
}
.col-9 {
	width: 72.5%;
}
.col-8 {
	width: 63.5%;
}
.col-7 {
	width: 56.5%;
}
/* 二等分 */
.col-6 {
	width: 48%;
}
.col-5 {
	width: 40%;
}
/* 三等分 */
.col-4 {
	width: 31.5%;
}
/* 四等分 */
.col-3 {
	width: 23.5%;
}

.col-2 {
	width: 15.5%;
}
/* 五等分 */
.col-2_4 {
	width: 19%;
}
.col-1 {
	width: 8%;
}



.text-left {
	text-align: left;
}

.item__box {
	background: #cd93ee;
	border-radius: 10px;
	border: 3px #f03b6d solid;
	position: relative;
}

.item__box>img {
	border-top-right-radius: 10px; 
	border-top-left-radius: 10px; 
	box-sizing: border-box;
}
.item__box--shadow {
	box-shadow: 0px 2px 2px 2px rgba(0,0,0,.2);
}

.item-title {
	text-align: center;
	background: #831A7A;
	color: #fff;
	font-size: 130%;
	font-weight: bold;
	padding: 12px 0;
	margin-bottom: 12px;
	margin-top: -7px;
}
.item-get {
	text-align: center;
	color: #3c1939;
	padding-bottom: 10px;
	border-bottom: 1px #f03b6d dashed;
}

.item-end {
	text-align: right;
	color: #73114F;
	font-size: 90%;
	padding: 8px 12px;
}

/*.item-fly {
	background: #FEFCB7;
	border-radius: 50%;
	position: absolute;
	width: 64px;
	height: 50px;
	color: #B0165E;
	font-size: 80%;
	line-height: 16px;
	text-align: center;
	padding-top: 16px;
	top: -20px;
	right: -20px;
}*/


.tips {
	border: 2px #fff dashed;
	border-radius: 10px;
	margin-bottom: 24px;
}

.tips>.container {
	width: 98%;
	padding: 15px;
}


/* quickMenu */
	#ma_area{ width:90px; height:82px; margin:0 auto;}
	#ma_area img{ float:left; display:block; margin:5px 5px;}


/* 禮包圖片輪播 */
.slider-wra {
		width: 820px;
		margin: 20px auto;
		text-align: center;
		background: #710952;
		border-radius: 10px;
}
.slider {
		width: 820px;
		height: 540px;
		position: relative;
		overflow: hidden;

	}
.slider ul.slider__list {
		padding: 0;
		margin: 0;
		list-style: none;
		position: absolute;
		width: 9999px;
		height: 100%;
	}
.slider ul.slider__list li {
		float: left;
		width: 820px;
		height: 100%;
	}
.slider .slider__list img{
		width: 100%;
		height: 100%;
		border-top-right-radius: 10px; 
		border-top-left-radius: 10px;
	}

.slider__btn li {
	display: inline-block;
	list-style: none;
}
.slider__btn li a {
	color: #fff;
	text-decoration: none;
	background: #000;
	min-width: 120px;
	padding: 12px 8px;
	border-radius: 6px;
}
.slider__btn li a:hover {
	background: #ffcbdf;
	color: #000;
	
}

.slider__control {
	padding: 12px 0 22px 0;
}



/* 表格設定 */	
.table { 
	word-break: break-all;
	border: 5px solid #f03b6d;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 20px 0;
	color: #000;
}
.table th { 
	color: #fff; 
	text-align: center; 
	font-size: 17px; 
	font-weight: bold; 
	padding: 5px; 
	border: 1px #f03b6d solid;
}
.table td { 
	text-align: center;
	line-height: 24px;  
	padding: 5px; 
	border: 1px #f03b6d solid;
}
.table tr { background: #e6e6e6;}

/*滿版*/
.table-full { width: 100%; }


/*雙色表格*/
.table-striped tr:nth-child(odd) {
  background: #d696df;
}
.clearfix { clear: both; }

/*表格樣式：改顏色*/
.table-head th {
	background: #67ebcd; /* Old browsers */
	background: -moz-linear-gradient(top,  #67ebcd 20%, #37a7d3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #67ebcd 20%,#37a7d3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #67ebcd 20%,#37a7d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#67ebcd', endColorstr='#37a7d3',GradientType=0 ); /* IE6-9 */ 
	}
.table-head th.sub-th { background: #61adf4; color: #fff; }