@charset "UTF-8";
/**
 * 
 * @authors Mina
 */

@import url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/css/animate.css');

body {
	border: medium none;
    margin: 0;
    padding: 0;
    outline: none;
    font-family: 'Microsoft JhengHei';/*微軟正黑體*/
	background: #000;
	color: #000;
	height: 100%;
	overflow: hidden;
	/* position: fixed; */
	width: 100%;
	min-width: 1200px;
}

ul, li, button, p {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
	outline: none;
}

.move {
	transition: .2s;
}

.in {
	position: relative;
    height: 100%;
    width: 1200px;
    margin: 0 auto;
}

#main {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/main_bg.jpg') top center no-repeat;
	height: 780px;
}

#main .logo {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/logo.png') top center no-repeat;
	height: 105px;
	width: 200px;
	background-size: contain;
	position: absolute;
    margin-top: 41px;
    margin-left: 68px;
}

#main .top {
    position: absolute;
    width: 116px;
    right: 26px;
    margin-top: 17px;
}

#main .top li {
	width: 52px;
	height: 52px;
    float: left;
	cursor: pointer;
	background-size: contain;
}

#main .music.on {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/music.png') top left no-repeat;
	background-size: cover;
}

#main .music.off {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/music.png') top right no-repeat;
	background-size: cover;
}

.music_ani {
	animation: music_ani 1s forwards infinite linear;
}

@keyframes music_ani {
	from,
	20%,
	53%,
	80%,
	to {
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transform: translate3d(0, 0, 0);
	}

	40%,
	43% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -5px, 0);
	}

	70% {
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		transform: translate3d(0, -3px, 0);
	}

	90% {
		transform: translate3d(0, -1px, 0);
	}
}

#main .fb {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/fb.png') top center no-repeat;
	background-size: cover;
	margin-left: 12px;
}

#main .title {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/title.png') top center no-repeat;
	background-size: contain;
	width: 646px;
	height: 346px;
	position: absolute;
    margin-top: 446px;
    margin-left: 196px;
    z-index: 2;
}

#main .apk_btn {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/apk_btn.png') top center no-repeat;
	background-size: contain;
	width: 320px;
	height: 157px;
	position: absolute;
	margin-top: 580px;
    margin-left: 697px;
	z-index: 2;
	animation: apk_btn_ani .4s infinite linear alternate;
}

@keyframes apk_btn_ani {
	from {transform: scale(1);}
	to {transform: scale(1.04); filter: brightness(1.15);}
}

#main .apk_btn a {
	cursor: pointer;
    margin-top: 10%;
    margin-left: 4%;
    width: 93%;
    height: 56%;
    display: block;
    transform: rotate(-12deg);
}

#mid {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/mid_bg.png') top center no-repeat;
	background-size: cover;
	height: 933px;
    margin-top: -244px;
    z-index: 1;
    position: relative;
}

#mid .apps {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/apps_bg.png') top center no-repeat;
	background-size: contain;
	width: 431px;
    height: 138px;
    position: absolute;
    margin-top: 250px;
    margin-left: 682px;
    padding-left: 28px;
}

#mid .apps p {
	font-size: 27.6px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 18px;
}

#mid ul {
	text-align: center;
	margin-top: 10px;
}

#mid li {
	width: 155px;
	height: 46px;
	display: inline-block;
	cursor: pointer;
}

#mid .google {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/link_google.png') top center no-repeat;
	background-size: contain;
	margin-right: 4px;
}

#mid .ios {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/link_ios.png') top center no-repeat;
	background-size: contain;
}

#mid .preregister {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/preregister_bg.png') top center no-repeat;
	background-size: contain;
	width: 825px;
    height: 288px;
    position: absolute;
    margin-top: 484px;
    margin-left: 302px;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
}

#mid .preregister .txt1 {
    margin-top: 32px;
    margin-left: -14px;
}

#mid .preregister .txt2 {
	margin-top: 12px;
    margin-left: 208px;
}

#mid .preregister span {
	position: relative;
    overflow: hidden;
    color: #ffe401;
    text-shadow: #000 0 0 2px, #000 0 0 2px, #000 0 0 2px,
    			 #000 0 0 2px, #000 0 0 2px, #000 0 0 2px,
    			 #000 0 0 2px, #000 0 0 2px, #000 0 0 2px,
    			 #000 0 0 2px, #000 0 0 2px, #000 0 0 2px;
    padding: 0 8px;
    margin-left: 12px;
}

#mid .preregister span::before {
	content: "";
    position: absolute;
    background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/txt_de.png') bottom left no-repeat;
    background-size: 5%;
    width: 100%;
    height: 100%;
    transform: scale(-1);
    left: 0;
}

#mid .preregister span::after {
	content: "";
    position: absolute;
    background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/txt_de.png') bottom left no-repeat;
    background-size: 5%;
    width: 100%;
    height: 100%;
    left: 0;
}

#mid .preregister .btn {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/preregister_btn.png') top center no-repeat;
	background-size: contain;
	width: 350px;
	height: 119px;
	cursor: pointer;
    margin-top: 18px;
    margin-left: 248px;
}

#tips {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/tips_bg.jpg') top center no-repeat;
	background-size: cover;
	height: 278px;
	margin-top: -186px;
}

#tips ol {
    top: 75px;
    position: relative;
    width: 820px;
    color: #000;
    font-size: 26px;
    font-weight: bold;
    padding-left: 178px;
}

#tips ol p {
	margin-left: -26px;
    margin-bottom: 9px;
}

#tips li {
    list-style-type: decimal;
    font-size: 22px;
}

footer {
	height: 122px;
	background: #000;
	z-index: 1;
	position: relative;
}

footer .box {
	margin: 0 auto;
	width: 76%;
	position: relative;
	transform: translate(0, 50%);
}

footer li {
	display: inline-block;
}

footer .dena {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/dena.jpg') top center no-repeat;
	width: 70px;
	height: 40px;
	background-size: contain;
}

footer .toei {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/toei.jpg') top center no-repeat;
	width: 72px;
	height: 50px;
	margin-left: 10px;
	background-size: contain;
}

footer .cr ul {
	color: #fff;
	font-size: 14px;
	position: absolute;
	top: 12%;
	margin-left: 18px;
	line-height: 19px;
	user-select: none;
}

footer .cr li {
	display: block;
}

footer .game {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/game.jpg') top center no-repeat;
	width: 42px;
	height: 42px;
	position: absolute;
	right: 0;
	background-size: contain;
}

/* ----- POP FRAME ----- */

#pop {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 999;
	transition: visibility 300ms;
	visibility: hidden;
	opacity: 0;
	user-select: none;
}

#pop .pop_bg {
	background: rgba(0, 0, 0, 0.6);
	width: 100%;
	height: 100%;
	position: absolute;
}

#pop .pop_close {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/close.jpg') center center no-repeat;
	width: 82px;
	height: 82px;
	position: absolute;
	right: -2%;
    top: -5.5%;
    cursor: pointer;
    background-size: contain;
}

#pop .pop_box  {
	background: url('https://os-web-cdn.5xgames.com/cdn/web/sd/cbt/static/img/pop_bg.png') center center no-repeat;
	width: 764px;
	height: 386px;
	position: absolute;
	top: 50%;
    left: 50%;
    background-size: contain;
    transform: translate(-50%,-50%);
    transform-origin: left top;
    color: #000;
}

#pop .pop_close:hover {
    transform: scale(1.08);
}

#pop .pop_mid {
	position: absolute;
    top: 48%;
    left: 50%;
    font-weight: bold;
    transform: translate(-50%,-50%);
    font-size: 31px;
    width: 90%;
}

#pop .pop_mid .txt1 {
	font-size: 36px;
	line-height: 60px;
	color: #fff;
}

#pop .pop_mid .txt1 span {
	position: relative;
    top: -16px;
    text-shadow: #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
    			 #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
    			 #000 0 0 1px, #000 0 0 1px, #000 0 0 1px,
    			 #000 1px 1px 2px, #000 1px 1px 2px, #000 1px 1px 2px,
    			 #000 1px 1px 2px, #000 1px 1px 2px, #000 1px 1px 2px,
    			 #000 1px 1px 2px, #000 1px 1px 2px, #000 1px 1px 2px;
}

#pop .pop_mid .txt1 img {
	cursor: pointer;
}

#pop .pop_mid .txt2 {
	line-height: 36px;
}

#pop .pop_mid ol {
    margin: 14px 0 0 26px;
}

#pop .pop_mid li {
    list-style-type: decimal;
}

.pop_in_ani {
	animation: fadeIn .3s forwards;
}

.pop_out_ani {       
    animation: fadeOut .3s forwards;
}

.zoom_ani {
	animation: zoomIn .3s forwards;
}