@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release 2018;
 * Copyright 2018. All rights reserved.

 0.base
 1.主視覺
 2.會員等級介紹 Level
 3.該如何累積成長度？ Exp
 4.會員升級有什麼好康？ Benefit
 5.BannerList
 ******************************************************************************/

/* 0.base
-------------------------------- */
Body {
	color: #607d8b;
}
.Content {
	margin-bottom: -20px;
}
.Bold {
	font-weight: bold;
}
.ShadowBox {
	padding: 0 0 26.5%;
	background: url(../images/memberlevel/shadow.svg?t=20180530v1) no-repeat;
	background-size:100% auto;
	background-position: center bottom;
}
/* 背景色 */
.SectionFull {
	margin: 0 -4.6875%;
}
.SectionFull .Inner {
	/* padding: 0.625em 4.6875% 1.25em; */
	padding: 2.5em 4.6875%;
}
.BgDark {	
	background: #ececec;
}

.SectionTitle {
	font-size: 26px;
	color: #455a64;
	font-weight: normal;
	text-align: center;
	padding-bottom: .77em;
}
.Box > .BoxTitle {
	font-size: 26px;
	font-weight: normal;
	padding-bottom: .77em;
}
.Box > .BoxBody {
	padding-top: 0;
	padding-bottom: 2em;
}
/* 圈圈數字列表 */
.DecimalCircle {
	counter-reset: counter;
}
.DecimalCircle li {
	position: relative;
	padding-left: 2em;
	margin-bottom: 1.5em;
}
.DecimalCircle li:before {
	content: counter(counter);
	counter-increment: counter;
	position: absolute;
	left: 0;
	top: .25em;
	font-size: 14px;
	width: 1.785em;
	height: 1.785em;
	line-height: 1.785em;
	text-align: center;
	background: #455a64;
	color: #fff;
	border-radius: 50%;
}
/* 回首頁按鈕 */
.BtnBack {
	background: url(../images/memberlevel/bg_btn.png?t=20180530v1) no-repeat 50%;
	background-size: contain;
	color: #fff;
	font-weight: bold;
	font-size: 22px;
	line-height: 2.7;
	padding-left: 2em;
	padding-right: 2em;
}
.BtnBack:hover,
.BtnBack:focus,
.BtnBack:active {
	color: #fff;
}
/* 動畫 */
@keyframes float {
	100% {
		transform: translateY(-5px);
	}
}
@keyframes float-shadow {
	100% {
		opacity: .8;
	}
}
@keyframes flash {
	100% {
		opacity: 0;
	}
}
@keyframes bounce {
	100% {
		transform: scale(.8);
	}
}
@keyframes shine {
	100% {
		filter: drop-shadow(0 0 15px #ff797f);
	}
}
@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}
@keyframes down-in {
	0% {
		transform: translateY(30px);
	}
}
@keyframes up-in {
	0% {
		transform: translateY(-30px);
	}
}
@keyframes rotate-3d {
	100% {
		transform: rotateY( -720deg );
	}
}


/* 1.主視覺
-------------------------------- */
.Content > .Banner {
	background: #f03939 linear-gradient(135deg, #cd0015 0%, #f03939 100%);
	padding: 0;
	position: relative;
	overflow: hidden;
}
.Banner .ImgBox {	
	animation: down-in 1s;
}
.BannerInfo {
	display: none;
}
.DiamondBox {
	position: absolute;
	width: 45%;
	top: 17%;
	left: 50%;
	transform: translateX(-50%);
	perspective: 600px;
	transform-style: preserve-3d;
	animation: flash 1.2s -.2s ease-in reverse;
}
.Diamond {
	animation: shine 2s infinite alternate-reverse, up-in 1s;
}
.Shine,
.Up {
	position: absolute;
	max-width: 20px;
}
.Shine {
	animation: flash .8s infinite alternate-reverse,bounce .8s infinite alternate-reverse;
}
.Shine1 {
	top: -25%;
	left: 20%;
	animation-delay: -1s;
}
.Shine2 {
	top: -2%;
	left: 52%;
}
.Shine3 {
	bottom: 0;
	left: 15%;
	animation-delay: -1.5s;
}
.Shine4 {
	bottom: 10%;
	right: 0;
	animation-delay: -.5s;
}
.Up {
	animation: float .5s infinite alternate-reverse;
}
.Up1 {
	top: -15%;
	right: 5%;
	animation-delay: -.25s;
}
.Up2 {
	bottom: 15%;
	left:-5%;
	max-width: 24px;
	animation-delay: -.4s;
}


/* 2.會員等級介紹 Level
-------------------------------- */

.LevelList {
	font-size: 0;
	text-align: center;
}
.LevelList li {
	font-size: 16px;
	font-weight: 700;
	display: inline-block;
	padding: 20px 0;
	width: 33.3333%;
}
.LevelList .ShadowBox {
	background-size: 80%;
}
.LevelImgBox {
	margin: 10px;
	padding: 8px;
	background: url(../images/memberlevel/bg_level.png?t=20180530v1) no-repeat 50% 50%;
	background-size: contain;
	position: relative;
}
.LevelImgBox::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../images/memberlevel/bg_level2.png?t=20180530v1) no-repeat 50% 50%;
	background-size: contain;
	animation: flash 2s alternate-reverse infinite;
}
.LevelImgBox2::before,
.LevelImgBox4::before,
.LevelImgBox6::before {
	animation-delay: -1.5s;
}
.LevelImgBox img {
	animation: none;
	position: relative;
}


/* 3.該如何累積成長度？ Exp
-------------------------------- */
.ExpList {
	font-size: 0;
	text-align: center;
	margin-bottom: 25px;
}
.ExpList li {
	font-size: 14px;
	font-weight: 700;
	display: inline-block;
	width: 30%;
	padding: 15px 10px;
	position: relative;
}
.ExpList li::before {
	content: "\e90f";
	font-family: 'icomoon';
	font-weight: normal;
	font-style: normal;
	color: #ff0001;
	font-size: 24px;
	position: absolute;
	top: 0;
	right: 0;
	line-height: 1;
}


/* 4.會員升級有什麼好康？ Benefit
-------------------------------- */
.BenefitList {
	font-size: 0;
	text-align: center;
	background: #f8fafb;
}
.BenefitList li {
	display: inline-block;
	width: 50%;
	font-size: 16px;
	font-weight: bold;
	position: relative;
}
.BenefitList li::after {
	content: '';
	padding-bottom: 100%;
	display: block;
	width: 100%;
}
.BenefitList li:nth-child(3n),
.BenefitList li:nth-child(5n-3) {
	background: #eff3f6;
}
.BenefitContent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.BenefitImgBox {
	min-width: 45px;
	width: 30%;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 15px;
	margin-bottom: 10px;
}
.BenefitTitle {
	white-space: nowrap;
}
.BenefitImg {
	animation: float .5s infinite alternate-reverse;
}
.BenefitImg8 {
	animation-delay: -.25s;
}
.BenefitImg7 {
	animation-delay: -.5s;
}
.BenefitImg6 {
	animation-delay: -.75s;
}
.BenefitImg5 {
	animation-delay: -1s;
}
.BenefitImg4 {
	animation-delay: -1.25s;
}
.BenefitImg3 {
	animation-delay: -1.5s;
}
.BenefitImg2 {
	animation-delay: -1.75s;
}
.BenefitImg1 {
	animation-delay: -2s;
}


/* 5.BannerList
-------------------------------- */
.BannerList {
	margin: 25px 0;
}


/*如果使用者之視窗寬度>=568px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 568px) {
}
/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/* 0.base
	-------------------------------- */
	.Content {
		margin-bottom: -35px;
	}
	.Section {
		margin: 35px 0;
	}
	.SectionTitle {
		font-size: 30px;/*30px/16px*/
		padding: 0 0 .67em;/*44px/30px 0*/
	}
	.Box > .BoxTitle {
		padding-top: 1.6em;
		font-size: 30px;
	}
	.Box > .BoxBody {
		padding-bottom: 2.8em;
	}

	/* 圈圈數字列表 */
	.DecimalCircle li {
		padding-left: 3em;
	}
	.DecimalCircle li:before {
		font-size: 18px;
	}

	
	/* 1.主視覺
	-------------------------------- */
	.DiamondBox {
		width: 26%;
		left: 71.61458333%;
		top: 27%;
	}
	
	/* 2.會員等級介紹 Level
	-------------------------------- */
	.LevelList li {
		width: 16.667%;
	}
	.LevelList .ShadowBox {
		margin: 0 15px 15px;
		padding: 0 0 16.5%;
	}

	/* 3.該如何累積成長度？ Exp
	-------------------------------- */
	.ExpList li {
		font-size: 16px;
		width: 20%;
		padding: 0 28px;
	}
	.ExpList {
		margin-bottom: 55px;
	}
	.ExpImgBox {
		padding: 20px 0;
	}
	.ExpImg {
		width: 4em;
	}
	.ExpList li::before {
		right: calc(50% - 2em);
	}

	/* 4.會員升級有什麼好康？ Benefit
	-------------------------------- */
	.BenefitList li {
		width: 25%;
	}
	.BenefitList li:nth-child(3n),
	.BenefitList li:nth-child(5n-3) {
		background: inherit;
	}
	.BenefitList li:nth-child(2),
	.BenefitList li:nth-child(4),
	.BenefitList li:nth-child(5),
	.BenefitList li:nth-child(7) {
		background: #eff3f6;
	}
	.BenefitImgBox {
		width: 55px;
	}
	.BenefitImg8 {
		animation-delay: 0s;
	}
	.BenefitImg7 {
		animation-delay: -.25s;
	}
	.BenefitImg6 {
		animation-delay: -.5s;
	}
	.BenefitImg5 {
		animation-delay: -.75s;
	}
	
	/* 5.BannerList
	-------------------------------- */
	.BannerList {
		margin: 30px -10px;
		font-size: 0;
	}
	.BannerList li {
		display: inline-block;
		width: 33.333%;
		padding: 0 10px;
	}
	
}


/* for ie */
@media screen\0 {
	/* 1.主視覺
	-------------------------------- */
	.Content > .Banner {
		background-color: #f03939;
		background: 
			url(../images/memberlevel/banner_arrow.png?t=20180530v1) no-repeat 36vw bottom,
			linear-gradient(135deg, #cd0015 0%, #f03939 100%);
	}
	.DiamondBox {
		width: 200px;
		max-width: 25vw;
		left: 81%;
		top: 31%;
		animation: flash .85s -.2s reverse;
	}
}


/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	/* 0.base
	-------------------------------- */
	.Content {
		margin-bottom: -60px;
	}
	/* 回首頁按鈕 */
	.BtnBack {
		font-size: 24px;
		position: relative;
		overflow: hidden;
	}
	.BtnBack::before {
		content: '';
		background: #ececec;
		width: 50%;
		height: 3em;
		top: 0;
		left: 0;
		display: inline-block;
		position: absolute;
		transform: skewX(-30deg) translateX(-100%);
		opacity: .5;
		transition: .3s ease-out;
	}
	.BtnBack:hover,
	.BtnBack:focus,
	.BtnBack:active {
		color: #fff;
		transform: translateY(-5px);
	}
	.BtnBack:hover::before {
		transform: skewX(-30deg) translateX(200%);
		opacity: .35;
	}
	/* 背景色 */
	.Section {
		font-size: 18px;
	}
	.SectionFull {
		margin: 0 -100%;
		font-size: 18px;
	}
	.SectionFull .Inner{
		width: 940px;
		margin: 0 auto;
		padding: 2.5em 0;
	}
	.SectionTitle {
		padding: 1.234em 0;/*37px/30px 0*/
	}

	/* 1.主視覺
	-------------------------------- */
	
	.Content > .Banner {
		background-color: #f03939;
		background: 
		 url(../images/memberlevel/banner_arrow.png?t=20180530v1) no-repeat 65% bottom,
		 linear-gradient(135deg, #cd0015 0%, #f03939 100%);
		animation: banner-bg .85s;
	}
	@keyframes banner-bg {
		0% {
			background-position: 65% 150%;
		}
	}
	.Banner .ImgBox {
		max-width: 960px;
		margin: 0 auto;
		position: relative;
	}
	.DiamondBox {
		width: 200px;
		left: 60.7%;
		top: 31%;
		animation: flash .85s -.2s reverse;
	}

	/* 2.會員等級介紹 Level
	-------------------------------- */
	.LevelList .ShadowBox {
		margin: 0 25px;
	}

	/* 3.該如何累積成長度？ Exp
	-------------------------------- */
	.ExpList {
		width: 90%;
		margin: 0 auto 100px;
	}
	.ExpImg {
		width: 5.5em;
	}

	/* 4.會員升級有什麼好康？ Benefit
	-------------------------------- */
	.BenefitImgBox {
		width: 72px;
		padding-bottom: 25px;
	}


}