/*******************************************************************************
 * Version 1.0 Release 2019;
 * Copyright 2019. All rights reserved.

 ******************************************************************************/

/* 0.base
-------------------------------- */

html,
body {
	scroll-behavior: smooth;
}

.Content {
	margin-bottom: -20px;
	color: #344750;
	font-family: '-apple-system', BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB', '微軟正黑體', 'Microsoft JhengHei', sans-serif;
}
.Bold {
	font-weight: bold;
}

/* 背景色 */
.SectionFull {
	margin: 0 -4.6875%;
}
.SectionFull .Inner {
	padding: 0 4.6875%;
}
.BgLight {
	background: #fff;
}

.Section {
	padding: 40px 0;
	text-align: center;
}

.SectionHeading {
	margin-bottom: 10px;
	color: #45c8ab;
	font-size: 26px;
	font-weight: 600;
}
.SectionSubheading {
	font-size: 24px;
	font-weight: bold;
}

.IntroBox {
	max-width: 600px;
	margin: 0 auto 20px;
}
.Desc {
	word-break: break-word;
}
.DescSmall {
	font-size: 14px;
}

/* 動畫 */
@keyframes float {
	100% {
		transform: translateY(-5px);
	}
}

@keyframes down-in {
	0% {
		transform: translateY(30px);
	}
}
@keyframes up-in {
	0% {
		transform: translateY(-30px);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
}
@keyframes popIn {
	0% {
		transform: scale(.5);
		opacity: 0;
	}
}
@keyframes leftIn { 
	100% {
		transform: scaleX(0);
	}
}
@keyframes topIn {
	100% {
		transform: scaleY(0);
	}
}

/* 1.主視覺
-------------------------------- */
.Content > .Banner {
	position: relative;
	padding: 0;
	padding: 20px 20px 0;
	color: #4a6876;
/* overflow: hidden; */
	text-align: center;
	background: url(../images/howtoplay/banner/banner_bg.jpg?t=20190304v1) 50%;
	background-size: cover;
	-webkit-backface-visibility: hidden;
}
.Banner .ImgBox {
	animation: down-in 1s;
}
.Banner::before,
.Banner::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	background: #fff;
	transform-origin: right bottom;
	animation: topIn 1.2s .2s forwards cubic-bezier(.165, .84, .44, 1);
}
.Banner::before {
	background: #455a64;
	animation-duration: .8s;
	animation-timing-function: cubic-bezier(.77, 0, .175, 1);
}

.BannerInner {
	position: relative;
	z-index: 1;
}
.BannerInfo {
}
.BannerTitleEn {
	font-weight: bold;
	line-height: 1.8;
	animation: popIn .275s .475s both;
}
.BannerTitleChtBox {
	animation: popIn .35s .575s both cubic-bezier(.68, -.55, .27, 1.55);
}
.BannerTitleCht {
	font-size: 0;
}
.BannerBtn {
	display: block;
	color: inherit;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	animation: fadeIn 1.5s 2s both, up-in 1.5s 1.75s both;
}
.BannerBtn:hover {
	color: inherit;
}
.BannerBtn::after {
	content: '';
	display: block;
	width: 31px;
	height: 31px;
	margin: 0 auto;
	background: url(../images/howtoplay/banner/icon_arrow_down.svg?t=20190304v1) no-repeat;
	background-size: cover;
	transform: translateY(50%);
}
.BannerImgGroup {
	position: relative;
}
.BannerImgGroup .Over {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.BannerImg {
	animation: fadeIn 1.5s .75s both, float 1.5s infinite alternate-reverse;
}
.BannerImgBox:nth-child(2) .BannerImg {
	animation-delay: 1.05s, -.75s;
}
.BannerImgBox:last-child .BannerImg {
	animation-delay: 1.43s, -.25s;
	animation-duration: 1.75s, 1.25s;
}



/* 2.人人都可在網路上成名
-------------------------------- */

.TaList {
	text-align: left;
}
.TaListItem {
	padding: 20px 0;
	border-top: 1px solid #dce2e6;
}
.TaListImgBox {
	width: 160px;
	margin: 0 auto;
	margin-bottom: 20px;
}
.TaList .SectionSubheading {
	margin-bottom: 10px;
}



/* 彩虹框裝飾List
-------------------------------- */

.DecolistItem {
	position: relative;
	padding: 15px;
	margin-bottom: 20px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d8e1e5;
}
.DecolistItem:hover::before,
.DecolistItem:hover::after,
.DecolistItem:hover .DecolistInner::before,
.DecolistItem:hover .DecolistInner::after {
	transform: scale(1);
	opacity: 1;
}
.DecolistItem::before,
.DecolistItem::after,
.DecolistInner::before,
.DecolistInner::after {
	content: '';
	position: absolute;
	z-index: 1;
	background: #ff3456;
	transform: scale(0);
	transition: .25s;
	opacity: 0;
}

.DecolistItem:hover .DecolistIconBox {
	transform: scale(1.04);
}
.DecolistItem:hover .DecolistImgBox {
	transform: scale(1.04);
}
.DecolistItem::before {
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(to left,#ff3456, #ffdf73);
	transform-origin: right top;
	transition-duration: .28s;
}
.DecolistItem::after {
	top: 0;
	right: 0;
	bottom: 0;
	width: 3px;
	background: linear-gradient(#ff3456, #bb1aff);
	transform-origin: right top;
}
.DecolistInner::before {
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(to left, #bb1aff, #1a5dff);
	transform-origin: bottom left;
	transition-duration: .3s;
}
.DecolistInner::after {
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: linear-gradient(#ffdf73, #1a5dff);
	transform-origin: bottom left;
}
.DecolistHeading {
	margin-bottom: 5px;
}
.DecolistIconBox {
	width: 80px;
	margin: 0 auto 10px;
	transition: transform .25s;
}
.DecolistImgBox {
	position: relative;
	margin: -15px -15px 0 -15px;
	margin-bottom: 20px;
	overflow: hidden;
	transition: transform .25s;
}
.DecolistImgBox::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 68.75%;
}
.DecolistImgBox img {
	position: absolute;
	top: 4%;
	left: 4%;
}


/* 選擇自己的平台 免費加入
-------------------------------- */

.SectionPlat .SectionHeading {
	margin-bottom: 5px;
}

/* 打造價值的訣竅
-------------------------------- */

.SectionSkill .SectionHeading {
	color: inherit;
}

/* 圖片串場 
-------------------------------- */

.Section.Episode {
	margin-top: -1px;
	margin-bottom: -1px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 49.99%, #fff 50%);
}
.BgLight + .Episode {
	background: linear-gradient(to top, rgba(255,255,255,0) 49.99%, #fff 50%);
}
.EpisodeImgGroup {
	position: relative;
	margin: 0 auto;
}
.EpisodeImg {
	position: relative;
	z-index: 1;
}
.EpisodeImg.Over {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/* 圖片串場 - 電腦
-------------------------------- */

.EpisodeComputer .EpisodeImgGroup {
	max-width: 740px;
	transform: scale(1.25);
}
.EpisodeComputer .EpisodeImgBox::before,
.EpisodeComputer .EpisodeImgBox::after {
	content: '';
	position: absolute;
	display: block;
	background-repeat: no-repeat;
	animation: float 1s infinite alternate-reverse both;
}
.EpisodeComputer .EpisodeImgBox::before {
	width: 16.77%;
	padding-bottom: 16.77%;
	background-image: url(../images/howtoplay/computer/circle_l.svg?t=20190304);
}
.EpisodeComputer .EpisodeImgBox::after {
	width: 7.799%;
	padding-bottom: 7.799%;
	background-image: url(../images/howtoplay/computer/circle_s.svg?t=20190304);
}
.EpisodeComputer .EpisodeImgBox:first-child::before {
	top: 24.428%;
	left: 0;
}
.EpisodeComputer .EpisodeImgBox:first-child::after {
	top: 14.57%;
	left: 17.2%;
	z-index: 2;
	animation-delay: -.3s;
}
.EpisodeComputer .EpisodeImgBox:last-child::before {
	top: 0;
	left: 76.175%;
	z-index: 0;
	animation-delay: -.7s;
}
.EpisodeComputer .EpisodeImgBox:last-child::after {
	top: .857%;
	left: 47.329%;
	z-index: 2;
	animation-delay: -.85s;
}
.EpisodeComputer .EpisodeImg {
	animation: float 1.2s infinite alternate-reverse both;
}
.EpisodeComputer .EpisodeImgBox:first-child .EpisodeImg {
	animation-delay: -.55s;
}

/* 圖片串場 - 手機
-------------------------------- */

.EpisodeMobile {
	padding: 0;
}

.EpisodeMobile .EpisodeImgGroup {
	max-width: 680px;
}
.EpisodeMobile .EpisodeImgGroup::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 45.268%;
	display: block;
	width: 21.158%;
	padding-bottom: 11.667%;
	background-image: url(../images/howtoplay/mobile/pillow.svg?t=20190304);
	background-repeat: no-repeat;
}
.EpisodeMobile .EpisodeImg {
	animation: float 1.3s infinite alternate-reverse;
}
.EpisodeMobile .EpisodeImgBox:first-child .EpisodeImg {
	animation-delay: -.45s;
}

.ListEvent {
	font-size: 16px;
	text-align: left;
	margin-top: 0;
}


/* 小版only */
@media screen and (max-width: 767px) {
	.ShowDecoXs::before,
	.ShowDecoXs::after,
	.ShowDecoXs .DecolistInner::before,
	.ShowDecoXs .DecolistInner::after {
		animation: deco 5.75s infinite ease-in-out;
		/* cubic-bezier(.97,0,.12,1) */
	}
	.ShowDecoXs:nth-of-type(3)::before,
	.ShowDecoXs:nth-of-type(3)::after,
	.ShowDecoXs:nth-of-type(3) .DecolistInner::before,
	.ShowDecoXs:nth-of-type(3) .DecolistInner::after {
		animation-delay: -3.25s;
	}
	.ShowDecoXs:nth-of-type(2)::before,
	.ShowDecoXs:nth-of-type(2)::after,
	.ShowDecoXs:nth-of-type(2) .DecolistInner::before,
	.ShowDecoXs:nth-of-type(2) .DecolistInner::after {
		animation-delay: -2.25s;
	}
	.ShowDecoXs:nth-of-type(4)::before,
	.ShowDecoXs:nth-of-type(4)::after,
	.ShowDecoXs:nth-of-type(4) .DecolistInner::before,
	.ShowDecoXs:nth-of-type(4) .DecolistInner::after {
		animation-delay: -4.5s;
	}

	@keyframes deco {
		30% {
			transform: scale(0);
			opacity: 0;
		}
		40% {
			transform: scale(1);
			opacity: 1;
		}
		60% {
			transform: scale(1);
			opacity: 1;
		}
		70% {
			transform: scale(0);
			opacity: 0;
		}
	}
}


/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/* 0.base
	-------------------------------- */
	.Content {
		padding-top: 1.875em;
		margin-bottom: -35px;
	}

	.SectionHeading {
		margin-bottom: 20px;
		font-size: 30px;
	}
	.SectionSubheading {
		font-size: 26px;
	}



	/* 2.人人都可在網路上成名
	-------------------------------- */

	.TaList {
		display: flex;
		flex-wrap: wrap;
	}
	.TaListItem {
		width: 50%;
		border: none;
	}
	.SectionFamous .IntroBox {
		margin-bottom: 60px;
	}
	.TaListInfoBox {
		padding: 0 30px;
	}


	/* 彩虹框裝飾List
	-------------------------------- */

	.Decolist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.DecolistItem {
		padding: 25px;
	}
	.DecolistIconBox {
		width: 120px;
	}

	/* 選擇自己的平台 免費加入
	-------------------------------- */
	.SectionPlat .DecolistItem {
		width: calc(50% - 10px);
	}
	.SectionPlat .DecolistItem:last-child {
		width: 100%;
	}

	/* 打造價值的訣竅
	-------------------------------- */
	.SectionSkill .DecolistItem {
		width: calc(33% - 10px);
	}
	.SectionSkill .DecolistItem:last-child {
		width: 100%;
	}
	.SectionSkill .DecolistItem:last-child  .DecolistInner {
		display: flex;
		align-items: center;
		padding: 0;
		text-align: left;
	}
	.SectionSkill .DecolistImgBox {
		width: 50%;
		margin: -25px 0 -25px -25px;
	}
	.SectionSkill .DecolistImgBox::before {
		padding-bottom: 50%;
	}
	.SectionSkill .DecolistImgBox img {
		left: 6%;
	}
	.SectionSkill .DecolistInfoBox {
		padding-left: 30px;
	}

	/* 圖片串場 - 手機
	-------------------------------- */
	.EpisodeComputer .EpisodeImgGroup {
		transform: none;
	}
}




/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	/* 0.base
	-------------------------------- */
	.Content {
		padding-top: 50px;
		margin-bottom: -60px;
	}
	.Btn.BtnLg {
		width: 400px;
		font-size: 28px;
		font-weight: bold;
	}

	/* 背景色 */
	.Section {
		font-size: 18px;
	}
	.SectionFull {
		margin: 0 -100%;
		font-size: 18px;
	}
	.SectionFull .Inner {
		width: 940px;
		padding: 0;
		margin: 0 auto;
	}
	.SectionHeading {
		font-size: 36px;
	}

	/* 1.主視覺
	-------------------------------- */

	.Content > .Banner {
		padding: 60px 0 40px;
		background-color: #ddf4ee;
	}
	.Banner .ImgBox {
		position: relative;
		max-width: 960px;
		margin: 0 auto;
	}
	.BannerInner {
		width: 940px;
		padding: 60px 0;
		margin: 0 auto;
	}
	.BannerBtn {
		max-width: 350px;
		font-size: 26px;
	}
	.BannerInfoBox {
		max-width: 350px;
	}
	.BannerImgGroup {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(100% - 350px);
		max-width: 660px;
	}
	.BannerTitleEn {
		margin-bottom: 12px;
	}
	.BannerTitleChtBox {
		margin-bottom: 12px;
	}

	/* 2.人人都可在網路上成名
	-------------------------------- */
	.TaListItem {
		display: flex;
	}
	.TaListImgBox {
		flex-shrink: 0;
		width: 170px;
		margin: 0;
	}

	/* 選擇自己的平台 免費加入
	-------------------------------- */
	.SectionPlat .DecolistItem {
		padding-right: 3.5em;
		padding-left: 3.5em;
	}


	/* 打造價值的訣竅
	-------------------------------- */
	.SectionSkill .DecolistItem {
		padding: 60px 25px;
	}
	.SectionSkill .DecolistIconBox {
		margin-bottom: 45px;
	}
	.SectionSkill .DecolistImgBox {
		margin: -60px 0 -60px -30px;
	}
}