@charset "utf-8";
/* CSS Document */

/* 網頁延伸背景 */

body{
	font-family: "微軟正黑體", Arial, sans-serif;
	font-size: 18px;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper{
	background-image: url(../images/0701_beauty/bg.jpg);
	background-repeat: no-repeat;
	background-position: center 0px;
	background-color: #521adf;
	background-size: initial;
	}


.header{
	width:100%;
	}

.header .top {
	height: 0;
	padding-bottom: 37%;
	position: relative;
	text-align:center;
}

.logo{
	background-image: url(../images/0701_beauty/title.png);
	width: 54%;
	height: 78%;
	position: absolute;
	top:24%;
	left:24%;
	background-repeat: no-repeat;
	background-size: contain;
		}



/* 圖片置中 */
.img-responsive {
	margin:0px auto;
}


/*說明頁面*/


/*
.form-daily {
	width: 100%;
	background-color: #ffffff;
	border: 7px solid #500101;
	box-shadow: 0 0px 0px 6px #c41700 ,inset 0 0 0 3px #f6ff69;
	padding:20px;
	border-radius: 20px;
}
*/

/* 大表格寬度+延伸背景 */
.form {
	width: 100%;
	background-image: url(../images/0701_beauty/formBg.png);
	background-repeat: repeat-y;
	background-position: center top;
	margin: 0px;
	background-size:contain;
}

.form-daily {
	width: 95%;
	margin: auto;
	
}

/* 重複使用區塊 */
.form-brick {
	margin: 0px;
	padding:0px;
	background-color:transparent;
	border:transparent;
}

/* 大表格背景 頂部 */
.form-top {
	display: block;
	width: 100%;
	padding-top: 4%;
	background-repeat: round;
	background-image: url(../images/0701_beauty/formTop.png);
	background-size:contain;
}

/* 大表格背景 底部 */
.form-bottom {
	display: block;
	width: 100%;
	padding-top: 9%;
	background-repeat: no-repeat;
	background-image: url(../images/0701_beauty/formBottom.png);
	background-size:contain;
}

/* 社群分享 */
.social {
	display: block;
	width: 95%;
	height: auto;
	margin:auto;
	overflow: hidden;
	border-radius: 5px;
	padding-top: 1%;
}
.social ul {
	margin: 0px;
	padding: 0px;
}
.social li {
	float: left;
	list-style-type: none;
}
.share-fb,
.share-fb a,
.share-line,
.share-line a {
	display: inline-block;
	background-image: url(../../source/icon-social.png);
	width: 30px;
	height: 30px;
}
.share-fb,
.share-fb a {
	background-position: 0px 0px;
	margin-right: 5px;
}
.share-line,
.share-line a {
	background-position: -30px 0px;
	margin-right: 5px;
}

.form-inside{
	width:95%;
	margin: auto;
	}

/* 列表標題 */
.story{
	font-size: 23px;
	display:block;
	color: #ffffff;
	padding: 39px;
	font-weight:bolder;
	text-align:center;
	text-shadow: rgb(42, 0, 109) 0px 0px 2px, rgb(42, 0, 109) 1px 1px 2px, rgb(42, 0, 109) 2px 2px 2px, rgb(42, 0, 109) 2px 2px 2px, 
	rgb(251, 0, 255) 2px 2px 17px, rgb(252, 89, 255) 2px 2px 17px, rgb(253, 148, 255) 2px 2px 17px, rgb(254, 209, 255) 2px 2px 17px,rgb(254, 209, 255) 2px 2px 17px;
}

.form-title {
	color: #009;
	font-weight: bolder;
	letter-spacing: 1px;
	text-align: left;
	vertical-align: middle;
	padding: 8px;
	line-height: 26px;
}

/* 表格 */
.table-buy {
	width: 100%;
	background-color: #999999;
	text-align: center;
	vertical-align: middle;
	margin: 0px auto;
	line-height: 40px;
}

.table-buy thead tr td {
	color: #ffffff;
	font-weight:bold;
}

/*.table-buy > tbody > tr:hover > td {
	background-color: #c5ffff;
}*/


/* 任務列表標題邊框 */
.desc-title-race {
	color: #FFFFFF;
	background-color: #6600CC;
	/*border: 2px solid #FFFFFF;*/
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	width: 95%;
	margin: auto;
}
.desc-border-race {
	border: 1px solid #FF0033;
	clear: both;
}

/* 副標 */
.subtitle {
	display: inline-block;
	background: -moz-linear-gradient( center top, #a066fd 5%, #660bd9 100% );
	background: -ms-linear-gradient( top, #a066fd 5%, #660bd9 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a066fd', endColorstr='#660bd9');
	background: -webkit-gradient( linear, left top, left bottom, color-stop(5%, #a066fd), color-stop(100%, #660bd9) );
	background-color: #a066fd;
	border: 2px solid #7726e4;
	text-shadow: 0 0 10px #5300bb,0 0 10px #5300bb,0 0 10px #5300bb,0 0 10px #5300bb;
	color: #FFFFFF;
	font-size: 21px;
	border-radius: 20px;
	letter-spacing: 1px;
	font-weight: normal;
	margin: 0px 0px 5px 0px;
	padding: 7px 20px 7px 20px;
}


/* 注意事項 */
.notice-buy {
	padding: 5px;
	background-color:#ffffff;
	/*border: #999999 solid 1px;*/
	margin: auto;
	font-size: 16px;
	line-height: 25px;
}
.notice-buy ul  {
	font-size: 15px;
	padding: 0px 0px 0px 30px;
	margin: 0px;
	color:#000000;
}
.notice-buy li {
	list-style-type: decimal;
	padding-bottom: 5px;
}

.mark-red{
	font-weight: bolder;
}

.rank-red{
	font-weight: bolder;
	color: #F00;
	font-size: 24px;
}

.mark-blue{
	font-weight: bolder;
}

.step{
	margin-bottom:20px;
}

@media (max-width: 998px){
.wrapper{
	background-size: 180%;
}

}

@media (max-width: 860px){

body{
	font-size: 16px;
}

.wrapper{
	background-size: 172%;
}

.form-inside{
	width:95%;
}

.table-buy {
 line-height:30px;
 width:95%;
}

.rank-red{
	font-size: 18px;

}

.story{
	text-shadow: rgb(42, 0, 109) 0px 0px 2px, rgb(42, 0, 109) 1px 1px 2px, rgb(42, 0, 109) 2px 2px 2px, rgb(42, 0, 109) 2px 2px 2px, 
	rgb(251, 0, 255) 2px 2px 10px,rgb(251, 0, 255) 2px 2px 10px;
}
}