@charset "utf-8";
/*一般設定**************************************************************************/
body, img, p, ul, li, ol, h1, h2, h3, h4, h5, h6, th, dl, dd, dt, b, a, div {
	margin: 0px;
	padding: 0px;
	height:auto;
	line-height:0;
	list-style-type: none;
	font-size: 100%;
	border:0px;
}
body {
	padding:0px;
	margin:0 auto 0 auto;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#111111+0,180e0e+100 */
background: rgb(17,17,17); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(17,17,17,1) 0%, rgba(24,14,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(17,17,17,1) 0%,rgba(24,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(17,17,17,1) 0%,rgba(24,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111111', endColorstr='#180e0e',GradientType=0 ); /* IE6-9 */

}
#wrapper {
	position:static;
	width:100%;
	height:auto;
	left:0;
	margin:0 0 0 0;
	padding:0;
	float:left;
	overflow:hidden
}
/*menu選單*/
#menu {
	position:absolute;
	z-index:8;
	width:6%;
	height:auto;
	margin:2% 0 0 1%;
	cursor:pointer;
}
#menu img {width:100%;}
#menu_expand {
	position:absolute;
	z-index:9;
	width:100%;
	height:auto;
	margin:0 0;
	padding:0 0 60% 0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.9) 75%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.9) 75%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.9) 75%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	float:left;
}
#menu_expand .menu_LOGO {
	width:46%;
	height:auto;
	margin:4% 27% 2% 27%;
	float:left;
}
#menu_expand .menu_LOGO img {width:100%;}
#menu_expand #close {
	position:absolute;
	z-index:10;
	width:6%;
	height:auto;
	margin:2% 0 0 93%;
	cursor:pointer;
}
#menu_expand #close img {width:100%;}
#menu_expand ul {
	width:40%;
	height:auto;
	margin:5% 30% 5% 30%;
	float:left;
}
#menu_expand ul img {width:100%;}
#menu_expand ol {
	width:40%;
	height:auto;
	margin:0 30% 0% 30%;
	float:left;
}
#menu_expand ol img {width:100%;}



/* 1cut主視覺 */
#index {
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	background-color:#000;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/bg1M.jpg);
	background-size:100%;
	background-repeat: no-repeat;
	float:left;
}
#index .main_chara {
	width:100%;
	height:auto;
	margin:35% 0% 0 0%;
	float:left;
}
#index .main_chara img {width:100%;}
#LOGO {
	position:absolute;
	z-index:7;
	width:100%;
	height:auto;
	margin:66% 0% 0 0%;
	float:left;
}
#LOGO img {width:100%;}
#index .link {
	POSITION:relative;
	width:76%;
	height:auto;
	Z-INDEX:4;
	margin:112% 12% 0 12%;
	padding:0;
	display:inline;
	z-index:8;
	float:left;
}
#index .link dt {
	width:46%;
	height:auto;
	margin:0 2% 2% 2%;
	display:inline;
	float:left;
}
#index .link dt img {width:100%;}
#index .link dd {
	width:46%;
	height:auto;
	margin:0 2% 2% 2%;
	display:inline;
	float:right;
}
#index .link dd img {width:100%;}
#index .arrow1 {
	width:16%;
	height:auto;
	padding:0;
	margin:1% 42% 0 42%;
	cursor:pointer;
	float:left;
}
#index .arrow1 img {width:100%;}



/* 2cut事前預約 */
#PV {
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	background-color:#000;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/bg2.jpg);
	background-size:100%;
	float:left;
}
#PV .title {
	width:72%;
	height:auto;
	margin:4% 14% 1% 14%;
	float:left;
}
#PV .title img{width:100%;}
#PV .border {
	position:static;
	width:98%;
	height:auto;
	left:0;
	margin:0% 1% 0 1%;
	float:left;
	display:inline;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/preorder_reel_middle2.png);
	background-repeat: repeat;
	background-size:100%;
}
#PV .border_top {
	width:98%;
	height:auto;
	margin:0% 1% 0 1%;
	float:left;
}
#PV .border_top img {width:100%;}
#PV .border_botttom {
	width:98%;
	height:auto;
	margin:0 1% 0 1%;
	float:left;
}
#PV .border_botttom img {width:100%;}
#PV .border ul {
	width:80%;
	height:auto;
	margin:7% 10% 2% 10%;
	float:left;
}
#PV .border ul li {
	width:100%;
	height:auto;
	margin:1% 0 3% 0;
	float:left;
}
#PV .border ul li img {width:100%;}
#PV .border ul .data {
	width:100%;
	height:auto;
	margin:1% 0% 4% 0%;
	display:inline;
	float:left;
}
#PV .border ul .form .mobile_system {
	width:100%;
	height:auto;
	margin:0 0% 5% 0%;
	float:left;
}
#PV .border ul .data .mobile_system ul {
	width:50%;
	height:auto;
	margin:0 0 2% 0;
	display:inline;
	float:left;
}
#PV .border ul .data .mobile_system ul li {
	width:13%;
	height:auto;
	margin:0% 5% 0 0;
	display:inline;
	float:left;
}
#PV .border ul .data .mobile_system ul li img {width:100%;}
input[type="radio"] {
     display:none;
}
input[type="radio"] + label span {
    display:inline-block;
    width:40px;
    height:40px;
    margin: 5% 0 0 0;
    vertical-align:middle;
    background:url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/PreOrder_checkbox_off.png) left top no-repeat;
	background-size:100%;
    cursor:pointer;
}
input[type="radio"]:checked + label span {
    background:url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/PreOrder_checkbox_on.png) 0 top no-repeat;
	background-size:100%;
}
#PV .border ul .data .mobile_system ul dl {
	width:82%;
	height:auto;
	margin:0 0 0 0;
	display:inline;
	float:left;
}
#PV .border ul .data .mobile_system ul dl img {width:90%; margin:0% 5% 0 5%;}
#PV .border ul .data .mobile_number {
	width:100%;
	height:auto;
	margin:0 0 1% 0;
	float:left;
}
#PV .border ul .data .mobile_number ul {
	width:38%;
	height:auto;
	margin:0 1% 0 0;
	display:inline;
	float:left;
}
#PV .border ul .data .mobile_number li {
	width:60%;
	height:auto;
	margin:0 1% 0 0;
	display:inline;
	float:right;
}
#PV .border .caution {
	width:78%;
	height:auto;
	margin:1% 11% 4% 11%;
	float:left;
	font-family: "微軟正黑體";
	font-size: 15px;
	line-height: 22px;
	color: #000;
	text-align:left;
}
.mobile_input {
	width:91%;
	height:40px;
	padding:1% 4%;
	border:2px solid #666666;
	background-color:#ffffff;
	font-family: "微軟正黑體";
	font-size: 28px;
	line-height:28px;
	color: #333;
	text-align:left;
	float:left;
}
#PV .submit {
	width:100%;
	height:auto;
	margin:1.2% 0 0% 0;
	float:left;
}
#PV .submit img {width:100%;}
#PV .submit:hover {position:relative; bottom:2px;}
#PV .submit:active {position:relative; top:3px;}
#PV .border2 {display:none;}
#PV .arrow2 {
	width:5.2%;
	height:auto;
	padding:0;
	margin:1.5% 47.4% 0 47.4%;
	cursor:pointer;
	float:left;
}
#PV .arrow2 img {width:100%;}


/* 3cut成就與獎勵 */
#Reward {
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	background-color:#000;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/bg3.jpg);	
	background-size:100%;
    float:left;	
}
#Reward .title {
	width:72%;
	height:auto;
	margin:8% 14% 1% 14%;
	float:left;
}
#Reward .title img {width:100%;}
#Reward .map {
	width:100%;
	heiaht:auto;
	margin:0 0 0% 0;
	float:left;
}
#Reward .map img {width:100%;}
#Reward .list {
	width:80%;
	height:auto;
	margin:0 10% 0 10%;
	float:left;
}
#Reward .list ul {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	float:left;
}
#Reward .list ul li {
	width:23%;
	margin:0 0 0 0;
	display:inline;
	float:left;
}
#Reward .list ul li img {width:100%;}
#Reward .list ul dl {
	width:77%;
	margin:0 0 0 0;
	display:inline;
	float:right;
}
#Reward .list ul dl img {width:100%;}
#Reward .list ol {
	width:100%;
	height:auto;
	margin:0 0 1% 0;
	float:left;
}
#Reward .list ol img {width:100%;}
#Reward .arrow3 {
	width:20%;
	height:auto;
	padding:0;
	margin:4% 40% 0 40%;
	cursor:pointer;
	float:left;
}
#Reward .arrow3 img {width:100%;}

/* 4cut遊戲特色 */
#Features {
	width:100%;
	height:auto;
	padding:0;
	margin:0;
	background-color:#000;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/bg4.jpg);	
	background-size:100%;
    float:left;	
}
#Features .title {
	width:72%;
	height:auto;
	margin:8% 14% 1% 14%;
	float:left;
}
#Features .title img {width:100%;}
#Features .banner {
	width:94%;
	height:auto;
	margin:4% 3% 0 3%;
	float:left;
}
#Features .arrow4 {
	width:20%;
	height:auto;
	padding:0;
	margin:5% 40% 0 40%;
	cursor:pointer;
	float:left;
}
#Features .arrow4 img {width:100%;}
/* 輪播Banner */
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	width:100%;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:transparent; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
}
.nivo-prevNav {
	font-family: "微軟正黑體";
	left:0px;
}
.nivo-nextNav {
	font-family: "微軟正黑體";
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	font-family: "微軟正黑體";
	text-align:center;
	margin:2% 0 0 0;
	padding: 1.5% 0 1% 0;
}
.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}


blockquote:before, blockquote:after,
q:before, q:after {
	content:"";
}
blockquote, q {
	quotes:"" "";
}

.clear {
	clear:both;
}
/*輪播Banner-結束*/


/* 5cut武將展示 */
#Chara {
	width:100%;
	height:auto;
	padding:0 0 0 0;
	margin:0;
	background-color:#000;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/bg5.jpg);	
	background-size:100%;
    float:left;	
}
#Chara .title {
	width:72%;
	height:auto;
	margin:8% 14% 1% 14%;
	float:left;
}
#Chara .title img {width:100%;}
#Chara .demo {
	width:100%;
	height:auto;
	margin:2% 0 0 0;
	float:left;
}
#Chara .demo .warrior {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	float:left;
}
/*趙雲*/
#Chara .demo .warrior1 {
    width:100%;
	height:auto;
	margin:0 0 0 0;
	float:left;
}
#Chara .demo .warrior1 .picture1 {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	padding:55% 0 2% 0;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_p5.png);
	background-repeat: no-repeat;
	background-size:100%;
	float:left;
}
#Chara .demo .warrior1 .picture1 .skill {
	width:90%;
	height:auto;
	margin:0 8% 0 0;
	float:right;
}
#Chara .demo .warrior1 .picture1 .skill .skill1 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior1 .picture1 .skill .skill1 img {width:100%;}
#Chara .demo .warrior1 .picture1 .skill .skill2 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior1 .picture1 .skill .skill2 img {width:100%;}
#Chara .demo .warrior1 .history {
	width:82%;
	height:auto;
	margin:0 5%;
	padding:2.5% 4%;
	border:1px solid #fff;
	font-family: "微軟正黑體";
	font-size: 16px;
	line-height: 24px;
	color: #FFF;
	text-align:left;
	float:left;
}
/*趙雲-結束*/
/*諸葛亮*/
#Chara .demo .warrior2 {
    width:100%;
	height:auto;
	margin:0 0 0 0;
	float:left;
}
#Chara .demo .warrior2 .picture2 {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	padding:55% 0 2% 0;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_p2.png);
	background-repeat: no-repeat;
	background-size:100%;
	float:left;
}
#Chara .demo .warrior2 .picture2 .skill {
	width:90%;
	height:auto;
	margin:0 8% 0 0;
	float:right;
}
#Chara .demo .warrior2 .picture2 .skill .skill1 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior2 .picture2 .skill .skill1 img {width:100%;}
#Chara .demo .warrior2 .picture2 .skill .skill2 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior2 .picture2 .skill .skill2 img {width:100%;}
#Chara .demo .warrior2 .history {
	width:82%;
	height:auto;
	margin:0 5%;
	padding:2.5% 4%;
	border:1px solid #fff;
	font-family: "微軟正黑體";
	font-size: 16px;
	line-height: 24px;
	color: #FFF;
	text-align:left;
	float:left;
}
/*諸葛亮-結束*/
/*貂蟬*/
#Chara .demo .warrior3 {
    width:100%;
	height:auto;
	margin:0 0 0 0;
	float:left;
}
#Chara .demo .warrior3 .picture3 {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	padding:55% 0 2% 0;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_p3.png);
	background-repeat: no-repeat;
	background-size:100%;
	float:left;
}
#Chara .demo .warrior3 .picture3 .skill {
	width:90%;
	height:auto;
	margin:0 8% 0 0;
	float:right;
}
#Chara .demo .warrior3 .picture3 .skill .skill1 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior3 .picture3 .skill .skill1 img {width:100%;}
#Chara .demo .warrior3 .picture3 .skill .skill2 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior3 .picture3 .skill .skill2 img {width:100%;}
#Chara .demo .warrior3 .history {
	width:82%;
	height:auto;
	margin:0 5%;
	padding:2.5% 4%;
	border:1px solid #fff;
	font-family: "微軟正黑體";
	font-size: 16px;
	line-height: 24px;
	color: #FFF;
	text-align:left;
	float:left;
}
/*貂蟬-結束*/
/*呂布*/
#Chara .demo .warrior4 {
    width:100%;
	height:auto;
	margin:0 0 0 0;
	float:left;
}
#Chara .demo .warrior4 .picture4 {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	padding:55% 0 2% 0;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_p4.png);
	background-repeat: no-repeat;
	background-size:100%;
	float:left;
}
#Chara .demo .warrior4 .picture4 .skill {
	width:90%;
	height:auto;
	margin:0 8% 0 0;
	float:right;
}
#Chara .demo .warrior4 .picture4 .skill .skill1 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior4 .picture4 .skill .skill1 img {width:100%;}
#Chara .demo .warrior4 .picture4 .skill .skill2 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior4 .picture4 .skill .skill2 img {width:100%;}
#Chara .demo .warrior4 .history {
	width:82%;
	height:auto;
	margin:0 5%;
	padding:2.5% 4%;
	border:1px solid #fff;
	font-family: "微軟正黑體";
	font-size: 16px;
	line-height: 24px;
	color: #FFF;
	text-align:left;
	float:left;
}
/*呂布-結束*/
/*周瑜*/
#Chara .demo .warrior5 {
    width:100%;
	height:auto;
	margin:0 0 0 0;
	float:left;
}
#Chara .demo .warrior5 .picture5 {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	padding:55% 0 2% 0;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_p1.png);
	background-repeat: no-repeat;
	background-size:100%;
	float:left;
}
#Chara .demo .warrior5 .picture5 .skill {
	width:90%;
	height:auto;
	margin:0 8% 0 0;
	float:right;
}
#Chara .demo .warrior5 .picture5 .skill .skill1 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior5 .picture5 .skill .skill1 img {width:100%;}
#Chara .demo .warrior5 .picture5 .skill .skill2 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior5 .picture5 .skill .skill2 img {width:100%;}
#Chara .demo .warrior5 .history {
	width:82%;
	height:auto;
	margin:0 5%;
	padding:2.5% 4%;
	border:1px solid #fff;
	font-family: "微軟正黑體";
	font-size: 16px;
	line-height: 24px;
	color: #FFF;
	text-align:left;
	float:left;
}
/*周瑜-結束*/
/*司馬懿*/
#Chara .demo .warrior6 {
    width:100%;
	height:auto;
	margin:0 0 0 0;
	float:left;
}
#Chara .demo .warrior6 .picture6 {
	width:100%;
	height:auto;
	margin:0 0 2% 0;
	padding:55% 0 2% 0;
	background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_p6.png);
	background-repeat: no-repeat;
	background-size:100%;
	float:left;
}
#Chara .demo .warrior6 .picture6 .skill {
	width:90%;
	height:auto;
	margin:0 8% 0 0;
	float:right;
}
#Chara .demo .warrior6 .picture6 .skill .skill1 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior6 .picture6 .skill .skill1 img {width:100%;}
#Chara .demo .warrior6 .picture6 .skill .skill2 {
	width:12.8%;
	height:auto;
	margin:0 0 0 5%;
	display:inline;
	cursor:pointer;
	float:right;
}
#Chara .demo .warrior6 .picture6 .skill .skill2 img {width:100%;}
#Chara .demo .warrior6 .history {
	width:82%;
	height:auto;
	margin:0 5%;
	padding:2.5% 4%;
	border:1px solid #fff;
	font-family: "微軟正黑體";
	font-size: 16px;
	line-height: 24px;
	color: #FFF;
	text-align:left;
	float:left;
}
/*司馬懿-結束*/

#Chara .demo .warrior_tab {
	width:92%;
	height:auto;
	margin:2% 4% 0 4%;
	float:left;
}
#Chara .demo .warrior_tab ul {
	width:14.6%;
	height:auto;
	margin:0 1%;
	padding:10% 0;
	background-repeat: no-repeat;
	background-size:100%;
	display:inline;
	cursor:pointer;
	float:left;
}
#Chara .demo .warrior_tab .head1 {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab5.png);}
#Chara .demo .warrior_tab .head1r {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab5r.png);}
#Chara .demo .warrior_tab .head2 {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab2.png);}
#Chara .demo .warrior_tab .head2r {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab2r.png);}
#Chara .demo .warrior_tab .head3 {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab3.png);}
#Chara .demo .warrior_tab .head3r {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab3r.png);}
#Chara .demo .warrior_tab .head4 {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab4.png);}
#Chara .demo .warrior_tab .head4r {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab4r.png);}
#Chara .demo .warrior_tab .head5 {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab1.png);}
#Chara .demo .warrior_tab .head5r {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab1r.png);}
#Chara .demo .warrior_tab .head6 {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab6.png);}
#Chara .demo .warrior_tab .head6r {background-image: url(https://banner.9splay.com/GameHTML/XRJP/PreLogin/Images/Chara_tab6r.png);}

/*版宣*/
#copyright {
	width:100%;
	height:auto;
	padding:5% 0 3% 0;
border-top:1px solid #5d5d5d;
background: rgb(43,43,44); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(43,43,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(43,43,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(43,43,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2c', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    float:left;
}
#copyright ul {
	width:20%;
	height:auto;
	margin:0 40% 2.5% 40%;
	display:inline;
	float:left;
}
#copyright ul img {width:100%;}
#copyright li {
	width:100%;
	height:auto;
	margin:1% 2% 0 0;
	display:inline;
	float:right;
	font-family: Arial;
	font-size: 15px;
	line-height: 15px;
	color: #ffffff;
	text-align:center;
	display:inline;
	float:left;
}
#copyright dl {
	width:90%;
	height:auto;
	margin:0% 5% 0 5%;
	display:inline;
	float:right;
	font-family: "FOT-スキップ Std";
	font-size: 13px;
	line-height: 18px;
	color: #ffffff;
	text-align:left;
	display:inline;
	float:left;
}
#copyright #rule {
	position:absolute;
	z-index:2;
	width:25%;
	right:0;
	margin:-1% 1% 0 0;
	font-family: "FOT-スキップ Std";
	font-size: 14px;
	line-height: 16px;
	color: #ffffff;
	text-align:right;
}
#copyright #rule a {color: #ffffff; text-decoration:none;}
#copyright #rule a:hover {color: #ffffff; text-decoration:underline;}
#copyright #privacy_policy {
	position:absolute;
	z-index:2;
	width:40%;
	left:0;
	margin:-1% 0% 0 1.9%;
	font-family: "FOT-スキップ Std";
	font-size: 14px;
	line-height: 16px;
	color: #ffffff;
	text-align:left;
}
#copyright #privacy_policy a {color: #ffffff; text-decoration:none;}
#copyright #privacy_policy a:hover {color: #ffffff; text-decoration:underline;}

/*警視窗文字*/
#message {
	position:absolute;
	z-index:12;
	width:100%;
	height:auto;
	margin:0 0;
	padding:0 0 60% 0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.9) 75%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.9) 75%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.9) 75%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	float:left;
}
#message #close {
	position:absolute;
	z-index:13;
	width:4.2%;
	height:auto;
	margin:2% 0 0 93.8%;
	cursor:pointer;
}
#message #close img {width:100%;}
#message .pop {
	width:69%;
	height:auto;
	margin:10% 10%;
	padding:5% 5% 5% 5%;
	border:2px solid #5d5d5d;
	background: rgb(239,239,239); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(239,239,239,1) 0%, rgba(186,186,186,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(186,186,186,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(239,239,239,1) 0%,rgba(186,186,186,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
	float:left;
}
#message .pop p {
	width:100%;
	height:auto;
	margin:0 0 4% 0;
	font-family: "微軟正黑體";
	font-size: 28px;
	line-height: 42px;
	color: #333; 
	text-align:left;
	float:left;
}
#message .pop ul {
	width:100%;
	height:auto;
	padding:3% 0 3% 0;
	border-top:1px dotted #aaa;
	border-bottom:1px dotted #aaa;
	margin:0 0 0 0;
	float:left;
}
#message .pop ul li {
	width:40%;
	height:auto;
	margin:0 10% 0 0;
	padding:1% 0;
	background: rgb(69,0,0); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(69,0,0,1) 0%, rgba(129,0,2,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(69,0,0,1) 0%,rgba(129,0,2,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(69,0,0,1) 0%,rgba(129,0,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#450000', endColorstr='#810002',GradientType=1 ); /* IE6-9 */
	float:left;
	font-family: "微軟正黑體";
	font-size: 24px;
	line-height: 28px;
	font-weight: bold;
	color: #efefef;
	text-align:center;
	cursor:pointer;
}
#message .pop ul li:hover {position:relative; bottom:2px;}
#message .pop ul li:active {position:relative; top:3px;}
#message .pop ul dl {
	width:40%;
	height:auto;
	margin:0 0 0 10%;
	padding:1% 0;
background: rgb(129,0,2); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(129,0,2,1) 0%, rgba(69,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(129,0,2,1) 0%,rgba(69,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(129,0,2,1) 0%,rgba(69,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#810002', endColorstr='#450000',GradientType=1 ); /* IE6-9 */
	float:right;
	font-family: "微軟正黑體";
	font-size: 24px;
	line-height: 28px;
	font-weight: bold;
	color: #efefef;
	text-align:center;
	cursor:pointer;
}
#message .pop ul dl:hover {position:relative; bottom:2px;}
#message .pop ul dl:active {position:relative; top:3px;}
#message .pop ul dt {
	width:100%;
	height:auto;
	margin:0 10% 0 0;
	padding:3% 0;
	background: rgb(69,0,0); /* Old browsers */
	background: -moz-linear-gradient(left,  rgba(69,0,0,1) 0%, rgba(129,0,2,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(69,0,0,1) 0%,rgba(129,0,2,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(69,0,0,1) 0%,rgba(129,0,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#450000', endColorstr='#810002',GradientType=1 ); /* IE6-9 */
	float:left;
	font-family: "微軟正黑體";
	font-size: 24px;
	line-height: 28px;
	font-weight: bold;
	color: #efefef;
	text-align:center;
	cursor:pointer;
}
#message .pop ul dt:hover {position:relative; bottom:2px;}
#message .pop ul dt:active {position:relative; top:3px;}


/*Loading進度條*/
.loading { 
    position:fixed;
	z-index:9;
	width:100%;
	height:auto;
	top:0;
	left:0;
	margin:0 0;
	padding:25% 0 50% 0;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.9) 75%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.9) 75%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0.9) 75%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	float:left;
}
.loading .LOGO {
	width:60%;
	height:auto;
	margin:0 20% 5% 20%;
	float:left;
}
.loading .LOGO img {width:100%;}
.loading .bar {
	width:48%;
	height:auto;
	margin:0 26% 5% 26%;
	float:left;
	
}
.loading .bar img {width:100%;}