@charset "utf-8";

/* CSS Document */

/*--刪除表單樣式--*/
input,button,select,textarea{outline:none}
 *:focus { outline: none; }

/*刪除safari input內陰影*/

input[type="text"] {
  -webkit-appearance: none;
}

input[type="email"] {
  -webkit-appearance: none;
}

input[type="password"] {
  -webkit-appearance: none;
}

/*刪除各瀏覽器預設樣式*/
select {
	appearance: none;
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
	-moz-appearance: none; /* Removes Default Firefox style*/
	background: url('../fonts/dropdown.svg') no-repeat;  /*Adds background-image*/
	background-position:right 15px center!important;  /*Position of the background-image*/
	background-size:9px 6px;
	text-indent: 0.01px; /* Removes default arrow from firefox*/
	text-overflow: "";  /*Removes default arrow from firefox*/
	border-radius: 0;
}

/*刪除ie預設下拉箭頭*/
select::-ms-expand { display: none; }

/*捲軸樣式*/
::-webkit-scrollbar {  
    width: 5px;
    height: 5px;
 border-radius: 4px;
    background-color: #141f2a;
}  
  
::-webkit-scrollbar-track {    
    border-radius: 4px;
    background-color: #141f2a;
}  
  
::-webkit-scrollbar-thumb {  
    border-radius: 4px;
    background-color: #35495d;
}

/*移除type date上下箭頭*/
input[type="date"]::-webkit-inner-spin-button {
	display: none;
	-webkit-appearance: none;
}

/*解決手機input type為date時，無法顯示placeholder*/
input[type="date"]:before {
  content: attr(placeholder) !important;
  color: #aaa;
  margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"].hasValue:before {
  content: "" !important;
  margin-right: 0;
}

.side_btn a {
	position: fixed;
	right: 0;
	top: 30px;
	z-index: 1;
	background-image: url(../side_btn.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: cover;
	width: 62px;
	height: 195px;
	font-size: 0;
	text-indent: -9999px;
	display: block;
}

.side_btn a:hover {
	background-position: left bottom;
}

@media (max-width: 750px) {

.side_btn a {
    top: 70px;
    width: 40px;
    height: 126px;
}

}

html {
	height: 100%;
}

body {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,0.5)!important;
	font-family: "微軟正黑體", Verdana;
	text-align: center;
	overflow: hidden;
}

#fullpage {
	position: relative;
}

#fp-nav.fp-right {
    right: 0;
}

.section {
	
}

.container {
	margin: 0 auto;
	width: 100%;
	max-width: 1200px;
}

/* #section1 */

#section1 {
	overflow: hidden;
}

#section1 .topbar {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 52px;
	opacity: 0;
	animation:2s 0.2s forwards topbar;
	z-index: 3;
    padding: 0 10px;
    box-sizing: border-box;
}

@keyframes topbar {
    0% {
        top: -52px;
		opacity: 0;
    }
	
    100% {
        top: 0;
		opacity: 1;
    }
}

#section1 .topbar .sound {
	float: left;
	margin: 0;
	padding: 0 0 0 36px;
	background-image: url(../sound_off.png);
	background-position: left 8px;
	background-repeat: no-repeat;
	background-size: 40px 45px;
	display: block;
	color: #fff;
	font-weight: bold;
	width: 80px;
	height: 52px;
	line-height: 52px;
	cursor: pointer;
}

#section1 .topbar .sound:hover{
	color: #85ecec;
	transition: 0.5s;
}

#section1 .topbar ul {
	margin: 0;
	padding: 0;
	float: left;
}

#section1 .topbar ul li {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff;
	float: left;
	line-height: 52px;
	font-size: 16px;
}

#section1 .topbar ul li a {
	color: #fff;
	text-decoration: none;
}

#section1 .topbar ul li a:hover {
	color: #85ecec;
	transition: 0.5s;
}

#section1 .topbar ul li a:after {
	padding: 10px;
	content: "｜";
	color: #0ff;
	
	font-family: Roboto;
	opacity: 0.7;
}

#section1 .topbar .share_box {
	float: right;
	display: inline-block;
}

#section1 .topbar .share_txt {
	font-size: 16px;
    color: #fff;
    float: left;
    line-height: 48px;
    margin: 0 10px 0 0;
}

#section1 .topbar .share_fb {
	margin: 8px 10px 0 0;
	float: left;
}

#section1 .topbar .share_fb img {
	/*width: 90%;*/
}

#section1 .topbar .share_line {
	margin: 8px 0 0 0;
	float: left;
	display: none;
}

.topFrame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;/*background-color:rgba(0,0,0,.75);*/
	
}

#section1 h1 {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 50%;
	top: 60%;
	transform: translate(-50%, -50%);
	z-index: 3;
	opacity: 0;
	animation:2s 0s forwards logo;
}

@keyframes logo {
    0% {
        opacity: 0;
    }
	
	100% {
		opacity: 1;
	}
}

#section1 h1 img {
	width: 100%;
	height: auto;
	display: block;
}

#section1 .little_title {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 50%;
	bottom: 12%;
	transform: translateX(-50%);
	z-index: 3;
}

#section1 .little_title img {
	width: 100%;
	height: auto;
	display: block;	
}

.video_main {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
}

.video {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.video img {
	width: 100%;
	height: auto;
}

.video-container {
	position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);	
}

.video_overlay {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 100vw;
	height: 100vh;
}

#section1 .arrow {
	position: absolute;
	bottom: 0.5%;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	animation:2s 0.5s infinite arrow;
	z-index: 3;
}

@keyframes arrow {
    0% {
        bottom: 0.5%;
    }
	
    50% {
        bottom: 1.5%;
    }
	
	100% {
		bottom: 0.5%;
	}
}

#section1 .sidebox {
	position: absolute;
	top: 24vh;
	right: -230px;
	background-image: url(../sidebox_bg.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 230px;
	height: 420px;
	text-align: center;
	opacity: 1;
	z-index: 3;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

#section1 .sidebox .title {
	margin: 10px 0;
}

#section1 .sidebox .android , #section1 .sidebox .ios {
	font-size: 0;
	margin: 0 0 10px 0;
}

#section1 .sidebox .android img {
	display: inline-block;
}

#section1 .sidebox .ios img {
	display: inline-block;
}

#section1 .sidebox .sidebox_btn {
	width: 161px;
	height: 67px;
	font-size: 0;
	text-indent: -9999px;
	margin: 0 auto;
	background-image: url(../sidebox_btn.png);
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	transition: 0.5s;
}

#section1 .sidebox .sidebox_btn:hover {
	background-image: url(../sidebox_btn_ov.png);
}

#section1 .sidebox .sidebox_btn2 {
	width: 161px;
	height: 67px;
	font-size: 0;
	text-indent: -9999px;
	margin: 0 auto;
	background-image: url(../sidebox_btn2.png);
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	transition: 0.5s;
}

#section1 .sidebox .sidebox_btn2:hover {
	background-image: url(../sidebox_btn2_ov.png);
}

#section1 .sidebox .close {
	position: absolute;
	top: -20px;
	right: 0;
	z-index: 3;
	cursor: pointer;
}

#section1 .section1_overlay {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #000;
	opacity: 0.4;
	z-index: 1;
	width: 100vw;
	height: 100vh;
}

/*fullpage項目點*/
#fp-nav ul li a span, .fp-slidesNav ul li a span {
	background-color: #fff;
}

@media (max-width: 750px) {

#section1 {
	background-image: url(../m_mv.jpg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: cover;
}

#section1 h1 {
	top: 35%;
}

#section1 .little_title {
	bottom: 13%;
}

.play_btn {
	display: block !important;
	max-width: 100px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	cursor: pointer;
}

.play_btn img {
	width: 100%;
	height: auto;
}

.video_main {
	display: none;
	z-index: 100;
}

.video-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
	z-index: 100;
}

.video-container iframe {
    width: 100%;
    height: 56vw;
}

#section1 .topbar {
	padding: 0 10px;
	box-sizing: border-box;
}

#section1 .topbar .sound {
    padding: 0;
    width: 46px;
}

#section1 .topbar .sound .switch {
    display: none;
}

#section1 .topbar ul li {
	font-size: 12px;
}

#section1 .topbar ul li a:after {
    padding: 0;
}

#section1 .topbar ul li:last-child a:after {
	padding: inherit;
	content: "";
}

#section1 .topbar .share_txt {
    display: none;
}

#section1 .topbar .share_fb {
    margin: 13px 8px 0 0;
}

#section1 .topbar .share_line {
	margin: 13px 0 0 0;
	display: block;
}

#section1 .topbar .share_fb img , #section1 .topbar .share_line img {
    width: 28px;
	height: 28px;
}

#section1 .sidebox .title img  {
	display: none;
}

#section1 .sidebox {
    position: absolute;
    top: initial;
    bottom: 0;
    left: 0;
    background-image: none;
    background-position: initial;
    background-repeat: initial;
    width: 100%;
    height: initial;
    font-size: 0;
    background-color: rgba(0,0,0,0.5);
    padding: 20px 0 15px 0;
	z-index: 4;
}

#section1 .sidebox_m_title {
	display: block !important;
	font-weight: bold;
	color: #fff;
	text-shadow: 0px 0px 10px #72caf2, 0px 0px 10px #72caf2;
	font-size: 15px;
}

#section1 .sidebox .close {
    top: 10px;
    right: 10px;
}

#section1 .sidebox .title {
    margin: 0 0 10px 0;
	font-family: 'Microsoft Yahei';
}

#section1 .sidebox .android, #section1 .sidebox .ios {
    display: inline-block;
    font-size: 0;
    margin: 0 4px 7px 4px;
}

#section1 .video {
	display: none;
}

}

/* #section1 end */


/* #section2 */

#section2 {
	position: relative;
	width: 1920px;
	height: 100vh;
	overflow: hidden;
	left: 50%;
	transform: translate(-50%);
}

#section2 .meditate {
	position: relative;
	background-image: url(../meditate_bg.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%;
	height: 100vh;
	text-align: center;
}

#section2 .meditate .num {
	display: none;
}

#section2 .meditate_title {
	position: absolute;
	left: 50%;
	top: 25%;
	margin: 0 auto;
	padding: 0;
	line-height: 100%;
	transform: translateX(-50%);
	z-index: 5;
}

#section2 .people {
	position: absolute;
	left: 50%;
	top: 33.2%;
	transform: translateX(-50%);
	z-index: 5;
	width: 100%;
}

#section2 .people img {
	width: 100%;
    height: auto;
    max-width: 72px;
}

#section2 .people_group {
	position: absolute;
	left: 50%;
	bottom: 20.5%;
	transform: translateX(-50%);
	z-index: 5;	
}

#section2 .time_machine {
	position: absolute;
	left: 50%;
	bottom: 21.3%;
	z-index: 3;
	animation:4s 0s infinite time_machine;
	transform: translateX(-50%);
}

@keyframes time_machine {
    0% {
        bottom: 21.3%;
    }

	50% {
		bottom: 22.3%;
	}

	100% {
		bottom: 21.3%;
	}
}

#section2 .time_machine_shadow {
	position: absolute;
	left: 50%;
	top: 76%;
	transform: translateX(-50%);
	animation:4s 0s infinite time_machine_shadow;
	z-index: 2;
	width: 100%;
}

#section2 .time_machine_shadow img {
	width: 100%;
	height: auto;
}

@keyframes time_machine_shadow {
    0% {
        top: 80%;
		width: 22%;
		opacity: 1;
    }

	50% {
		top: 82%;
		width: 24%;
		opacity: 0.4;
	}

	100% {
		top: 80%;
		width: 22%;
		opacity: 1;
	}
}

#section2 .player_group {
	min-width: 1920px;
	overflow: hidden;
}

#section2 .player01 {
	position: absolute;
	bottom: 4.7%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12;
}

#section2 .name {
	position: absolute;
	top: -10px;
	left: 50%;
	padding: 4px 10px;
	font-size: 15px;
	font-weight: bold;
	color: #ffff00;
	background-color:#000;
	background:-moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
	background:-webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
	background:-o-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
	display: inline-block;
	transform: translateX(-50%);
}

#section2 .row2 {
	top: -15px;
}

#section2 .row3 {
	top: -26px;
}

#section2 .player_name {
	color: #37e7ff;
}

#section2 .player02 {
	position: absolute;
	left: 8%;
	bottom: 3.7%;
	z-index: 10;
}

#section2 .player03 {
	position: absolute;
	left: 22%;
	bottom: 4.6%;
	z-index: 10;
}

#section2 .player04 {
	position: absolute;
	right: 23%;
	bottom: 5%;
	z-index: 10;
}

#section2 .player05 {
	position: absolute;
	right: 7.1%;
	bottom: 4.4%;
	z-index: 10;
}

#section2 .player11 {
	position: absolute;
    left: 15.5%;
    bottom: 8%;
    z-index: 9;
}

#section2 .player11 img {
	width: 80%;
	height: auto;
}

#section2 .player12 {
    position: absolute;
    left: 32%;
    bottom: 8%;
    z-index: 9;
}

#section2 .player12 img {
	width: 80%;
	height: auto;
}

#section2 .player13 {
    position: absolute;
    right: 32%;
    bottom: 8%;
    z-index: 9;
}

#section2 .player13 img {
	width: 80%;
	height: auto;
}

#section2 .player14 {
	position: absolute;
    right: 15%;
    bottom: 8%;
    z-index: 9;
}

#section2 .player14 img {
	width: 80%;
	height: auto;
}

#section2 .player15 {
    position: absolute;
    right: 0;
    bottom: 8%;
    z-index: 9;
}

#section2 .player15 img {
	width: 80%;
	height: auto;
}

#section2 .player21 {
    position: absolute;
    left: 12%;
    bottom: 14%;
    z-index: 8;
}

#section2 .player21 img {
	width: 50%;
	height: auto;
}

#section2 .player22 {
	position: absolute;
	left: 19.5%;
	bottom: 14%;
	z-index: 8;
}

#section2 .player22 img {
	width: 50%;
	height: auto;
}

#section2 .player23 {
	position: absolute;
	left: 27%;
	bottom: 14%;
	z-index: 8;
}

#section2 .player23 img {
	width: 50%;
	height: auto;
}

#section2 .player24 {
	position: absolute;
	left: 38%;
	bottom: 14%;
	z-index: 8;
}

#section2 .player24 img {
	width: 50%;
	height: auto;
}

#section2 .player25 {
	position: absolute;
	left: 49%;
	bottom: 14%;
	z-index: 8;
}

#section2 .player25 img {
	width: 50%;
	height: auto;
}

#section2 .player26 {
	position: absolute;
	left: 59%;
	bottom: 14%;
	z-index: 8;
}

#section2 .player26 img {
	width: 50%;
	height: auto;
}

#section2 .player27 {
	position: absolute;
	left: 67%;
	bottom: 14%;
	z-index: 8;
}

#section2 .player27 img {
	width: 50%;
	height: auto;
}

#section2 .player28 {
	position: absolute;
	left: 76%;
	bottom: 14%;
	z-index: 8;
}

#section2 .player28 img {
	width: 50%;
	height: auto;
}

#section2 .player31 {
	position: absolute;
	left: 25%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player31 img {
	width: 40%;
	height: auto;
}

#section2 .player32 {
	position: absolute;
	left: 29.5%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player32 img {
	width: 40%;
	height: auto;
}

#section2 .player33 {
	position: absolute;
	left: 35%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player33 img {
	width: 40%;
	height: auto;
}

#section2 .player34 {
	position: absolute;
	left: 40.5%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player34 img {
	width: 40%;
	height: auto;
}

#section2 .player35 {
	position: absolute;
	left: 46.5%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player35 img {
	width: 40%;
	height: auto;
}

#section2 .player36 {
	position: absolute;
	left: 51%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player36 img {
	width: 40%;
	height: auto;
}

#section2 .player37 {
	position: absolute;
	left: 61%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player37 img {
	width: 40%;
	height: auto;
}

#section2 .player38 {
	position: absolute;
	left: 65%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player38 img {
	width: 40%;
	height: auto;
}

#section2 .player39 {
	position: absolute;
	left: 69.5%;
	bottom: 17%;
	z-index: 7;
}

#section2 .player39 img {
	width: 40%;
	height: auto;
}


@media (max-width: 1140px) {

#section2 .meditate_title {
    max-width: 60vw;
}

#section2 .meditate_title img {
	width: 31vw;
    height: auto;
}

#section2 .people img {
    max-width: 6vw;
}

}

@media (max-width: 750px) {

#section2 .meditate {
	background-image: url(../meditate_mbg.jpg);
	background-size: auto;
}

#section2 .time_machine img {
    width: 70%;
}

#section2 .time_machine_shadow {
	display: none;
}

#section2 .meditate_title img {
    width: 50vw;
    height: auto;
}

#section2 .whirling {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	opacity: 0.7;
	display: block !important;
}

#section2 .whirling img {
	width: 100%;
	height: auto;
	max-width: 60px;
}

#section2 .people img {
    width: 100%;
    height: auto;
    max-width: 8vw;
}

#section2 .player01 {
    bottom: 1%;
}

#section2 .player02 {
    left: 26%;
    bottom: 1%;
}

#section2 .player03 {
	left: 34%;
    bottom: 1%;
}

#section2 .player04 {
    right: 33%;
    bottom: 1%;
}

#section2 .player05 {
    right: 26%;
    bottom: 1%;
}

#section2 .player11 {
    left: 30%;
    bottom: 6%;
}

#section2 .player12 {
    left: 37%;
    bottom: 6%;
}

#section2 .player13 {
    right: 36%;
    bottom: 6%;
}

#section2 .player14 {
    right: 30%;
    bottom: 6%;
}

#section2 .player21 {
    left: 25%;
}

#section2 .player22 {
    left: 30%;
}

#section2 .player23 {
    left: 34%;
}

#section2 .player24 {
    left: 40%;
}

#section2 .player25 {
    left: 47%;
}

#section2 .player26 {
    left: 52%;
}

#section2 .player27 {
	left: inherit;
    right: 29%;
}

#section2 .player28 {
	left: inherit;
    right: 25%;
}

#section2 .player31 {
	left: 25%;
}

#section2 .player32 {
	left: 28.5%;
}

#section2 .player33 {
	left: 33%;
}

#section2 .player34 {
	left: 38%;
}

#section2 .player35 {
	left: 43%;
}

#section2 .player36 {
	left: 48%;
}

#section2 .player37 {
	left: 53%;
}

#section2 .player38 {
	left: 58%;
}

#section2 .player39 {
	left: 63%;
}

#section2 .player31, #section2 .player32, #section2 .player33, #section2 .player34, #section2 .player35, #section2 .player36, #section2 .player37, #section2 .player38, #section2 .player39 {
	bottom: 20%;
}

#section2 .people_group {
    bottom: 22%;
}

#section2 .player02 img {
    width: 92%;
}

}

@media (max-width: 375px){
#section2 .whirling {
    top: 47.5%;
}
}

@media (max-width: 320px){
	#section2 .whirling {
		display: none !important;
	}
}


/* #section2 end */


/*--PART III---*/
.preorder{ min-height: 100vh; background: url(../preorder_bg.jpg) center no-repeat;}

.preorder_main{ position: relative; max-width:1140px; margin: 0 auto; padding: 6% 0;}
.preorder_main img{ display:block;}
.preorder_main .doctor_ma{ position: absolute; left: 2%; width:40.26%;}
.preorder_main .preorder_treasure{ position: absolute; left: 67%; bottom: 7%; width:27.72%;}

.preorder_main>div{ position:relative; max-width: 607px; margin: 0 0 0 33%;}
.preorder_main>div>div{ background: url(../preorder_box_mid.png); text-align: left; padding: 0 17% 30px 5%; color: #fff;}

.preorder_main>div>div h3{ margin:0 0 30px; font-size: 40px; text-shadow: 0px 0px 10px #3dc6e8;}
.preorder_main>div>div h4{ margin:0 0 30px;}
.preorder_main>div>div h4>span { display: inline-block; border: 1px solid #ffb400; padding: 5px 25px; margin: 0 20px 0 0; box-shadow: 0px 0px 5px 1px #ffb400; color: #ffb400;}
.preorder_main>div>div p{ margin:0 0 30px; font-size: 16px; font-weight: bold; line-height: 1.8em;}

.note { font-weight: normal !important; color: #d8c493;}

.form_area:nth-child(even){ margin: 0 0 18px 0;}
.preorder_main>div>div .form_area p{ margin:0 10px 10px 0;}
.form_area>p{ width: 80px; display: inline-block;}
.form_area label input{ display:none;}
.form_area label p{ position: relative; display:inline-block; padding: 0 0 0 30px; cursor: pointer;}
.form_area label p:before{ position: absolute; left: 0; top: 8px; display:block; width: 11px; height: 11px; border: 1px solid #fff; content: ""; transform:rotate(45deg);}
.form_area label input:checked + p:before{ background: #fff;}
.form_area label+label{ margin:0 0 0 20px;}
.form_area select{ border: none; border-bottom: 1px solid #4c5156; color: #fff; font-size: 16px; font-weight: bold; line-height: 36px; font-family: Microsoft JhengHei; width: 80px; height: 36px; margin: 0 10px 0 0; -webkit-appearance: none; background-image: url(../select_arrow.png); background-repeat: no-repeat; background-position: right;}
.select_op{ background-color:#151f2a;}
.form_area input[type="tel"]{ border: none; border-bottom: 1px solid #4c5156; color: #fff; background: transparent; font-size: 16px; font-weight: bold; line-height: 35px; height: 34px; font-family: Microsoft JhengHei; width: 275px; border-radius: 0;}
.form_area input[type="text"]{ border: none; border-bottom: 1px solid #4c5156; color: #fff; background: transparent; font-size: 16px; font-weight: bold; line-height: 35px; height: 34px; font-family: Microsoft JhengHei; width: 275px; border-radius: 0;}
.preorder_main>div>div p.form_title{ line-height: 36px; height: 35px;}

.form_area>a{ position: relative; display: inline-block; background: #ffb400; margin:0 10px; padding: 10px 20px; text-decoration: none; color: #000; font-weight: bold; z-index: 2;}
.form_area>a:before{ position: absolute; right: 100%; top: 0; display: block; content: ""; width: 10px; height: 41px; background: url(../form_btn_left.png);}
.form_area>a:after{ position: absolute; left: 100%; top: 0; display: block; content: ""; width: 10px; height: 41px; background: url(../form_btn_right.png);}
/*.form_area>a+a{ margin:0 10px 0 30px;}*/
.form_area>a:first-child{ margin:0 30px 0 0px;}

.form_area>a.active{ background: #3562c7; color: #fff;}
.form_area>a.active:before{ background: url(../form_btn_left_a.png);}
.form_area>a.active:after{ background: url(../form_btn_right_a.png);}

.fb_iframe_widget iframe {
	position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media(max-width:1140px){
.preorder_main .doctor_ma{ display:none;}
.preorder_main>div{ margin: 0 auto;}
.preorder_main .preorder_treasure{ width:316px; left: 50%; bottom: 30px; transform: translateX(100px);}
}

@media(max-width:620px){
.preorder_main>div{ padding: 0 2.5%;}
.preorder_main img{ max-width: 100%;}
.preorder_main>div>div{ background-size: contain; padding: 0 5% 30px 5%;}
.preorder_main>div>div h3{ margin: 0 0 20px; font-size: 24px;}
.preorder_main>div>div p{ margin: 0 0 20px; font-size: 16px; line-height: 1.4em;}
.preorder_main>div>div h4{ font-size: 16px;}
.preorder_main>div>div h4>span{ display: block; width: 60px; margin: 0 0 10px 0; text-align: center;}

.preorder_main .preorder_treasure{ width: 200px; left: auto; right: -5%; bottom: 15px; transform: translateX(28px);}	
.form_area label p{ padding: 0 0 0 20px;}
.form_area label p:before{ top: 5px; width: 8px; height: 8px;}
	
.form_area select{ font-size:16px; padding: 0 !important;}
.form_area input[type="tel"]{ width: calc( 100% - 120px); line-height: 25px; height: 25px;}
.form_area input[type="text"]{ width: calc( 100% - 120px); line-height: 25px; height: 25px;}
	
.form_area:nth-child(even){ margin: 0 0 15px 0;}
	
.form_area>a{ font-size: 16px; padding: 5px 10px; margin: 0 0 0 4px; width: 50%; text-align: center;}
/*.form_area>a+a{ margin: 10px 0 0 4px;}*/
.form_area>a:before{ height: 29px; width: 7px; background-size: contain;}
.form_area>a:after{ height: 29px; width: 7px; background-size: contain;}
.form_area>a:first-child{ margin:0 0 10px 4px;}
}

@media(max-width:320px){
.preorder_main>div>div h3{ font-size:20px;}
}

/*---PART Ⅳ---*/
.gift_step{ position: relative; min-height: 100vh; background: url(../gift_step_bg.jpg) center top no-repeat;}
.gift_step>div{ width: 100%; min-height: 100vh; background: url(../dot.png);}
.gift_step_main{ position: absolute; width: 1440px; max-width:100%; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6% 0;}
.gift_step_main>div{ width: 100%; text-align: right;}
.gift_step_main>div img{ width: 52.84%;}
.gift_step_slogan{ position:absolute; width: 14.1%; bottom: 10%; left: 0;}
.gift_step_c{ position:absolute; bottom: 0; left: 8.7%; width: 53.6%;}

@media(max-height:900px){
.gift_step_main{ position: static; width: 1440px; max-width:100%; transform: translate(0, 0); padding: 6% 0;}	
}

@media(max-width:1440px){

.gift_step_main{ max-width:95%; margin: 0 auto;}
}

@media(max-width:750px){
.gift_step_main{ position: static; width: 1440px; max-width:100%; transform: translate(0, 0); padding: 0;}
.gift_step_main>div{ z-index: 5; position: relative; min-height: 100vh; padding: 83% 0 20px; box-sizing: border-box;}
.gift_step_c{ position: absolute; bottom: unset; top: 0; left: 12%; width: 100%;}
.gift_step_slogan { position: absolute; width: 30%; bottom: unset; left: 10%; top: 40px; z-index: 2;}
.gift_step_main>div img{ width:100%;}
}

.lightbox_overlay{ position: fixed; z-index: 998; background-color:rgba(0,0,0,0.9); width: 100vw; height: 100vh; }

.lightbox{ position: fixed; z-index: 999; color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 607px; max-width: 100%;}
.lightbox_close{ position: absolute; top: -26px; right: 0; cursor: pointer;}
.lightbox img{ display: block; max-width:100%;}
.lightbox>div{ background: url(../preorder_box_mid.png); background-size: contain; overflow-y: auto; max-height: 60vh; -webkit-overflow-scrolling: touch;}

.lightbox>div>div{ display:inline-block;}

.lightbox>div h3{ margin:0 0 30px; font-size: 40px; text-shadow: 0px 0px 10px #3dc6e8;}
.lightbox>div p{ display: inline-block; border: 1px solid #ffb400; padding: 5px 25px; margin: 0 20px 0 0; box-shadow: 0px 0px 5px 1px #ffb400; color: #ffb400;}
.lightbox>div span{ display:inline-block; border: none; border-bottom: 1px solid #4c5156; color: #fff; background: transparent; font-size: 16px; font-weight: bold; line-height: 35px; height: 34px; font-family: Microsoft JhengHei; width: 275px; border-radius: 0; text-align: left;}
.lightbox>div a{ position: relative; display: inline-block; background: #ffb400; margin: 0 0 0 20px; padding: 0 20px; line-height: 33px; text-decoration: none; color: #000; font-weight: bold; font-size: 12px;}
.lightbox>div div+div{ margin:20px 0 0 0;}

.lightbox>div ul{ list-style: none; text-align: left; margin: 20px 5% 0; padding: 20px; background: #293c52; box-sizing: border-box;}

.lightbox_b>div ul {margin: 20px 0 0;}

.lightbox li+li{ margin:10px 0 0 0;}

.lightbox .highlight {
	color: #ffb400;
	width: initial;
	border: none;
}

.lightbox h4 {
	margin: 0 0 10px 0;
	font-size: 18px;
}

.lightbox_d h3 {
	margin: 0 !important;
}

@media(max-width:750px){
.lightbox{ max-width: 95%;}
.lightbox>div p{ width: 90%; box-sizing: border-box; margin: 0 0 10px 0;}
.lightbox>div span{ width: 60%; margin: 0;}
.lightbox>div a{ font-size: 12px; width: 25%; margin: 0 0 0 5%; box-sizing: border-box;}
.lightbox_b>div ul {margin: 20px 5% 0;}
}


.lightbox_b>div a{ position: relative; display: inline-block; background: #ffb400; margin:10px 0; padding: 5px 20px; text-decoration: none; color: #000; font-weight: bold; font-size: 16px;}
@media(max-width:750px){
.lightbox_b>div a{ width: auto;}
}


/* #section5 */

.share_gift{ background: url(../section5_bg.jpg)center top no-repeat;}
.share_gift>div{ min-height: 100vh; padding: 6% 0;}
.share_gift>div>img{ vertical-align: top;}
.share_gift_info{display: inline-block; max-width: 931px; margin: 0 0 0 -310px; padding: 50px 30px; box-sizing: border-box; background: url(../section5_content.png) top center no-repeat;}
.share_gift_info>img{ max-width:100%;}
.share_gift_info h3{ margin: 0; padding: 0 0 20px 0; font-size: 16px; line-height: 1.8em; color:#fff; text-align: left; border-bottom: 1px solid #126b69;}
.share_gift_info ul{ margin: 0; padding: 0; }
.share_gift_info li{ display:inline-block; position: relative; margin: 0 15px 0 0; background: url(../item_bg.png) no-repeat;}
.share_gift_info li:nth-child(1){ background: url(../item_bg2.png) no-repeat;}
.share_gift_info li:nth-child(4n-1){ margin: 0;}
.share_gift_info li h4{ position: absolute; margin: 0; top: 80px; left: 50%; transform: translateX(-50%);}
.share_gift_info li p{ position: absolute; width: 100%; margin: 0; padding: 0 10px; bottom: 20px; color: #54c7c5; text-align: center; font-size: 14px; box-sizing: border-box;}
.share_gift_info li span{ display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.share_gift_info li span.active{ display:block;}

.share_gift_note{ padding: 13px 30px; margin: 30px 0 0 0; font-size: 16px; border-radius: 10px; border: 2px solid #283747; background-color: #0c1219; color: #fff; display: inline-block; width: 96%; box-sizing: border-box; text-align: left;}
.share_gift_note span{ color:#FFC107;}

.share_gift .btn_group{ margin: 30px 0 0 0; width: 100%; font-size: 0;}
.share_gift .btn { margin: 0 10px; padding: 0 21px; background-image: url(../btn_bg.png); background-position: left top; background-repeat: no-repeat; border: none; background-color: transparent; cursor: pointer; font-weight: bold; font-size: 16px; color: #010101; font-family: "微軟正黑體", Verdana; line-height: 58px; display: inline-block;}

.share_gift .btn:hover { background-image: url(../btn_bg_ov.png);}
.share_gift .btn img { margin: 0 9px 0 0; vertical-align: sub;}

.share_gift .btn a { color: #010101; text-decoration: none;}

.role_l{}
.role_m{ display:none;}
@media (max-width:1280px){
.share_gift_info { margin: 200px 0 0 10%;}
.share_gift_info h3{ padding: 0 0 20px 250px;}
.share_gift>div>img{ position: absolute; top: 50px; left: 10px;}
	
.role_l{ display:none;}
.role_m{ display:block; max-width: 100%;}
}
@media (max-width:1080px){
.share_gift_info { position: relative; margin: 27% 0 0 0; background: url(../section5_content_m.png) top center no-repeat;}
.share_gift_info h3{ padding: 0 0 20px 0;}
}

@media (max-width:900px){
.share_gift_info li:nth-child(4n-1){ margin: 0 15px 0 0;}
}

@media (max-width:500px){
.share_gift_info { padding:20px 10px; margin: 40% 0 0 0;}
.share_gift_info li{ background-size: contain; width: 48%; margin: 0 1% 0 0;}
.share_gift_info li:nth-child(2n-1){ margin: 0 1% 0 0;}
.share_gift_info li img{ max-width:100%; width: 100%;}
.share_gift_info li:nth-child(1){ background-size: contain; width: 99%;}

.share_gift_info li h4{ top: 25%;}
.share_gift_info li:nth-child(1) h4{ top: 23%;}
.share_gift_info li p{ font-size: 12px;}

.share_gift_info h3{ font-size: 14px;}	
	
.share_gift_note{ font-size: 14px; padding: 10px;}	
	
.share_gift .btn_group { margin: 20px 0 0 0;}
.share_gift .btn { margin: 0 10px; font-size: 13px; padding: 0 15px;}
.share_gift .btn img { display: none;}
}

/*---序號分享---*/
.typing_zone{ margin: 20px 5% 0; padding: 0 20px 20px; border-bottom: 1px solid #126b69;}
.typing_zone input{ width: 60%; border: none; box-shadow: none; padding: 0 10px; line-height: 33px; box-sizing: border-box;}

.share_pw{ display: flex; flex-wrap: wrap; margin: 0 5%;}
.share_pw>div{ width: 50%; margin: 2px 0 0 0 !important; background: #293c52; line-height: 40px; box-sizing: border-box;}
.share_pw>div:nth-child(2n){ border-left:2px solid #141e2a;}
.share_pw>div.used{ text-decoration:line-through; background: #33a250;}

/* #section5 end */


/* #section6 */

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 65px;
    height: 84px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(../bx-prev.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 65px;
    height: 84px;
    text-indent: -9999px;
    z-index: 9999;
	transition: 0.5s;
}

.bx-wrapper .bx-prev:hover {
    left: 5px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(../bx-next.png) no-repeat 0 0 !important;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 65px;
    height: 84px;
    text-indent: -9999px;
    z-index: 9999;
	transition: 0.5s;
}

.bx-wrapper .bx-next:hover {
    right: 5px;
}

.slider_bg {
	margin: 0 auto;
	position: relative;
	width: 1171px;
	height: 531px;
	background-image: url(../slider_bg.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	padding: 16px 0 0 0;
    box-sizing: border-box;
}

.bxslider {
	margin: 0 auto;
	padding: 0;
	width: 1140px;
	height: 500px;
}

.bx-wrapper .bx-pager {
	position: absolute;
    bottom: 10px;
}

.bx-wrapper {
    box-shadow: none;
    border: 0;
    background: #000;
}

.robot {
	position: absolute;
	right: -140px;
	bottom: -10px;
	z-index: 1;
}

.bx-wrapper .bx-pager.bx-default-pager a {
	background-color: transparent;
	border: 1px solid #333;
	width: 9px;
	height: 9px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
	background-color: #333;
	border: 1px solid #333;
}

.notes {
	padding: 40px 0;
	background-color: #1a1a1a;
	text-align: left;
}

.notes h3 {
	margin: 0;
    padding: 8px 22px;
    color: #c8c8c8;
    border: 1px solid #5b5b5b;
    display: inline-block;
    font-size: 17px;
    font-weight: bold;
}

.notes ul {
    margin: 0;
    padding: 0 30px 0 50px;
    box-sizing: border-box;
}

.notes ul li {
    margin: 14px 0 0 0;
    padding: 0;
    color: #c8c8c8;
    list-style: decimal;
    font-size: 15px;
}

.footer {
	background-color: #000000;
	text-align: left;
	height: 150px;
}

.footer h3 {
	margin: 0 0 5px 0;
	padding: 0;
	background-color: #000000;
	color: #fff;
	line-height: 100%;
	text-indent: -20px;
}

.footer ul {
	margin: 0;
	padding: 0;
}

.footer ul li {
	margin: 0;
	padding: 0;
	background-color: #000000;
	color: #c8c8c8;
	font-size: 13px;
	list-style: decimal;
}

.footer .remind {
	float: left;
	padding: 23px 0 0 0;
}

.footer .other {
	float: right;
	text-align: right;
	font-size: 0;
	padding: 34px 0 0 0;
}

.footer .chinesegamer_logo {
	display: inline-block;
}

.footer .cf {
	margin: 0 0 0 30px;
	display: inline-block;
}

.footer .copyright {
	margin: 15px 0 0 0;
	color: #c8c8c8;
	font-size: 13px;
	line-height: 100%;
}

.footer .content {
	min-height: 80vh;
}


@media (max-width: 750px){

.section6_content {
	height: 100vh;
}

.slider_bg {
	width: 100%;
	height: auto;
	background: none;
	padding: 0;
}

.slider_bg img {
	width: 100%;
	height: auto;
}

.bxslider {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
}

.bx-wrapper {
	margin-bottom: 0;
}

.robot {
	display: none;
}

.notes {
	padding: 15px;
}

.notes h3 {
	margin: 0 0 5px 0;
    padding: 8px 22px;
    font-size: 15px;
}

.notes ul {
    margin: 0;
    padding: 0 15px 0 20px;
    box-sizing: border-box;
}

.notes ul li {
    margin: 5px 0 0 0;
    font-size: 12px;
}

.footer {
	background-color: #1a1a1a;
}

.footer h3 {
	text-indent: 0;
	background: none;
}

.footer ul {
	margin: 0;
    padding: 0 15px 0 20px;
}

.footer ul li {
	margin: 0;
	padding: 0;
	background: none;
	color: #c8c8c8;
	font-size: 12px;
	list-style: decimal;
}

.footer .remind {
	padding: 15px;
}

.footer .remind h3 {
	font-size: 15px;
	color: #c8c8c8;
}

.footer .other {
	float: right;
	text-align: center;
	padding: 0;
}

.footer .chinesegamer_logo img {
    width: 80%;
}

.footer .cf img {
	width: 80%;
}

.footer .cf {
	margin: 0 0 0 30px;
	display: inline-block;
}

.footer .copyright {
    margin: 15px 0 0 0;
    color: #c8c8c8;
    font-size: 12px;
    line-height: 100%;
    padding: 5px 15px;
}

.footer .content {
	min-height: 80vh;
}

}

/* #section6 end */