*{
	margin: 0;
	padding: 0;
	list-style:none;
	text-decoration: none;
	box-sizing: border-box;
	font-family: 'Open Sans','微軟正黑體';
}
html{
	position: relative;
	height: 100%;
	width: 100%;
	/* border: 1px solid #000; */
}
body{
	position: relative;
	margin: 0 auto;
	display: none;
	width: 100%;
	height: 100%;
	/* border: 1px solid #f00; */
	max-width: 1920px;
    min-width: 1280px;
    min-height: 658px;
    background-color: #000;
}
.page1{
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* border: 1px solid #00f; */
}
.page1_logo{
	position: absolute;
	display: block;
	z-index: 7;
	top: 2%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 40%;
	height: 25%;
	background: url('../img/page1_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.page1_logo:hover{
	cursor: pointer;
}
/*音樂區域*/
.music_area{
	height: 0px;
}
.sky{
	position: absolute;
	top: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: url('../img/sky.png') center center no-repeat;
	background-size: cover;
}
.thunder1{
	position: absolute;
	top: 0;
	z-index: 1;
	width: 40%;
	height: 50%;
	background: url('../img/thunder1.png') top center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
	opacity: 0;
	animation: thunder1 5s 1s linear infinite;
    -webkit-animation: thunder1 5s 1s linear infinite;
}
@keyframes thunder1 {
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    35%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@-webkit-keyframes thunder1 {
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    35%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.thunder2{
	position: absolute;
	top: 10%;
	left: -30%;
	right: 0;
	margin: 0 auto;
	z-index: 1;
	width: 40%;
	height: 70%;
	background: url('../img/thunder2.png') top center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
	opacity: 0;
	animation: thunder2 7s 2s linear infinite;
    -webkit-animation: thunder2 7s 2s linear infinite;
}
@keyframes thunder2 {
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    35%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@-webkit-keyframes thunder2 {
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    35%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.thunder3{
	position: absolute;
	top: 10%;
	right: 20%;
	z-index: 1;
	width: 30%;
	height: 70%;
	opacity: 0;
	background: url('../img/thunder3.png') top center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
	animation: thunder3 5s 4s linear infinite;
    -webkit-animation: thunder3 5s 4s linear infinite;
}
@keyframes thunder3 {
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    10%{
        opacity: 1;
    }
    25%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

@-webkit-keyframes thunder3 {
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    35%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
.fog{
	position: absolute;
	display: block;
	top: 0;
	left: -50%;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 4;
	width: 80%;
	height: 80%;
	background: url('../img/fog.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
	pointer-events: none;
	animation: fog_ni 70s 0s linear infinite alternate;
    -webkit-animation: fog_ni 70s 0s linear infinite alternate;
}
@-webkit-keyframes fog_ni {
    0%{
        left: -50%;
    }
    100%{
        left: 50%;
    }
}
.bg1{
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 5;
	width: 70%;
	height: 15%;
	background: url('../img/bg1.png') bottom right no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
	pointer-events: none;
}
.bg2{
	position: absolute;
	bottom: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	background: url('../img/bg2.png') bottom center no-repeat;
	background-size: cover;
	/* border: 1px solid #00f; */
	pointer-events: none;
}
/*▼首頁btn*/
.story_btn{
	position: absolute;
	right: 10%;
	left: 0;
	bottom: 40%;
	margin: 0 auto;
	z-index: 2;
	width: 31.5%;
	min-width: 700px;
	height: 35%;
	min-height: 350px;
	background: url('../img/story_btn.png') bottom center no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.story_btn:hover{
	cursor: pointer;
	background: url('../img/story_btn_hover.png') bottom center no-repeat;
	background-size: contain;
}
.race_btn{
	position: absolute;
	right: 10%;
	top: 10%;
	z-index: 2;
	width: 10%;
	height: 20%;
	background: url('../img/race_btn.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.race_btn:hover{
	cursor: pointer;
	background: url('../img/race_btn_hover.png') center center no-repeat;
	background-size: contain;
}
.view_btn{
	position: absolute;
	z-index: 3;
	left: 15%;
	bottom: 1%;
	width: 27%;
	height: 45%;
	background: url('../img/view_btn.png') bottom left no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.view_btn:hover{
	cursor: pointer;
	background: url('../img/view_btn_hover.png') bottom left no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.campaign_btn{
	position: absolute;
	z-index: 3;
	right: 5%;
	bottom: 1%;
	width: 13%;
	height: 30%;
	background: url('../img/campaign_btn.png') bottom right no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
	outline: none !important;
    outline: 0 !important;
}
.campaign_btn:hover{
	cursor: pointer;
	background: url('../img/campaign_btn_hover.png') bottom right no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.character_btn{
	position: absolute;
	z-index: 4;
	right: 15%;
	bottom: 25%;
	width: 13%;
	height: 30%;
	background: url('../img/character_btn.png') bottom center no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.character_btn:hover{
	cursor: pointer;
	background: url('../img/character_btn_hover.png') bottom center no-repeat;
	background-size: contain;
	/* border: 1px solid #00f; */
}
.facebook_like{
	position: absolute;
	z-index: 3;
	top: -20%;
	bottom: 0;
	right: 0%;
	margin: auto 0;
	width: 12%;
	height: 22%;
	transition: .3s;
	background: url('../img/facebook_like.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #0f0; */
	outline: none !important;
    outline: 0 !important;
}
.facebook_like:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
/*▲首頁btn*/
.few_days{
	position: absolute;
	z-index: 5;
	bottom: 10%;
	left: 0;
	right: 0;
	margin: 0 auto;
	/* border: 1px solid #0f0; */
	width: 25%;
	height: 10%;
	text-align: center;
}
.few_days_title{
	position: absolute;
	display: block;
	left: -30%;
	right: 0;
	top: -250%;
	width: 150%;
	height: 250%;
	background: url('../img/few_days_title.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #0f0; */
}
.few_days_text{
	position: absolute;
	display: block;
	bottom: -65%;
	width: 100%;
	height: 60%;
	/* border: 1px solid #f00; */
}
.few_days_text_days{
	background: url('../img/few_days_text_days.png') center center no-repeat;
	background-size: contain;
}
.few_days_text_hour{
	background: url('../img/few_days_text_hour.png') center center no-repeat;
	background-size: contain;
}
.few_days_text_mins{
	background: url('../img/few_days_text_mins.png') center center no-repeat;
	background-size: contain;
}
.few_days_text_secs{
	background: url('../img/few_days_text_secs.png') center center no-repeat;
	background-size: contain;
}
.few_days_num_bg{
	position: relative;
	display: inline-block;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto 3% auto auto;
	/* border: 1px solid #0f0; */
	width: 19%;
	height: 100%;
	background: url('../img/few_days_num_bg.png') center center no-repeat;
	background-size: contain;
	text-align: center;
}
.few_days_num_bg span{
	color: #fff;
	font-weight: bold;
}
.few_days_num_bg span::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
/*▼menu*/
.menu_area{
	position: absolute;
	display: block;
	z-index: 5;
	bottom: 0;
	left: 0;
	/* border: 1px solid #0f0; */
}
.menu_open_close_btn{
	position: absolute;
	display: block;
	top: -15%;
	width: 40%;
	height: 13%;
	/* border: 1px solid #00f; */
	background: url('../img/menu_btn/menu_status_close_btn.png') center center no-repeat;
	background-size: contain;
}
.menu_open_close_btn:hover{
	cursor: pointer;
}
.menu_top{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 77%;
	/* border: 1px solid #00f; */
	background: url('../img/menu_btn/menu_bg.png') center center no-repeat;
	background-size: 100% 100%;
	transition: .3s;
}
.menu_btn{
	position: relative;
	display: block;
	width: 100%;
	height: 16.65%;
	/* border: 1px solid #f00; */
	transition: .3s;
}
.menu_btn:hover{
	cursor: pointer;
}
.menu_home_btn{
	background: url('../img/menu_btn/menu_home_btn.png') center center no-repeat;
	background-size: 100% 100%;
}
.menu_home_btn:hover{
	background: url('../img/menu_btn/menu_home_btn_hover.png') center center no-repeat !important;
	background-size: 100% 100% !important;
}
.menu_story_btn{
	background: url('../img/menu_btn/menu_story_btn.png') center center no-repeat;
	background-size: 100% 100%;
}
.menu_story_btn:hover{
	background: url('../img/menu_btn/menu_story_btn_hover.png') center center no-repeat !important;
	background-size: 100% 100% !important;
}
.menu_race_btn{
	background: url('../img/menu_btn/menu_race_btn.png') center center no-repeat;
	background-size: 100% 100%;
}
.menu_race_btn:hover{
	background: url('../img/menu_btn/menu_race_btn_hover.png') center center no-repeat !important;
	background-size: 100% 100% !important;
}
.menu_character_btn{
	background: url('../img/menu_btn/menu_character_btn.png') center center no-repeat;
	background-size: 100% 100%;
}
.menu_character_btn:hover{
	background: url('../img/menu_btn/menu_character_btn_hover.png') center center no-repeat !important;
	background-size: 100% 100% !important;
}
.menu_view_btn{
	background: url('../img/menu_btn/menu_view_btn.png') center center no-repeat;
	background-size: 100% 100%;
}
.menu_view_btn:hover{
	background: url('../img/menu_btn/menu_view_btn_hover.png') center center no-repeat !important;
	background-size: 100% 100% !important;
}
.menu_campaign_btn{
	background: url('../img/menu_btn/menu_campaign_btn.png') center center no-repeat;
	background-size: 100% 100%;
}
.menu_campaign_btn:hover{
	background: url('../img/menu_btn/menu_campaign_btn_hover.png') center center no-repeat !important;
	background-size: 100% 100% !important;
}
.meun_new_icon{
	position: absolute;
	display: none;
	top: 0;
	bottom: 0;
	right: -60%;
	margin: auto 0;
	width: 60%;
	height: 80%;
	background: url('../img/menu_btn/new_icon.png') center left no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.menu_facebook_btn{
	background: url('../img/menu_btn/menu_facebook_btn.png') center center no-repeat;
	background-size: 100% 100%;
	outline: none !important;
    outline: 0 !important;
}
.menu_facebook_btn:hover{
	background: url('../img/menu_btn/menu_facebook_btn_hover.png') center center no-repeat !important;
	background-size: 100% 100% !important;
}
.menu_bottom{
	position: absolute;
	display: block;
	bottom: 0;
	width: 100%;
	height: 23%;
	/* border: 1px solid #f00; */
	background: url('../img/menu_btn/menu_declaration_area.png') center center no-repeat;
	background-size: 100% 100%;
	text-align: center;
}
.menu_bottom{
	cursor: pointer;
}
.menu_declaration_btn{
	position: relative;
	display: inline-block;
	top: 40%;
	width: 40%;
	height: 50%;
	/* border: 1px solid #f00; */
	margin-right: 1%;
	outline: none !important;
    outline: 0 !important;
}
.menu_declaration_btn:last-child{
	margin-right: 0%;
}
.menu_declaration_human_btn{
	background: url('../img/menu_btn/menu_declaration_human_btn.png') center center no-repeat;
	background-size: contain;
}
.menu_declaration_vampire_btn{
	background: url('../img/menu_btn/menu_declaration_vampire_btn.png') center center no-repeat;
	background-size: contain;
}
/*▲menu*/

.story_content_bg{
	position: absolute;
	display: none;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
}
.story_content{
	position: absolute;
	display: block;
	top: 10%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* border: 1px solid #f00; */
}
.story_back_home_btn{
	position: absolute;
	display: block;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: -17%;
	margin: 0 auto;
	width: 20%;
	height: 8%;
	/* border: 1px solid #f00; */
	background: url('../img/backhome_btn.png') center center no-repeat;
	background-size: contain;
	transition: .3s;
}
.story_back_home_btn:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
.story_logo{
	position: absolute;
	display: block;
	z-index: 2;
	top: -32%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 60%;
	height: 30%;
	background: url('../img/page1_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.story_logo:hover{
	cursor: pointer;
}
.story_text_bg{
	position: absolute;
	display: block;
	z-index: -1;
	top: 0;
	bottom: 0;
	right: -47%;
	margin: auto 0;
	width: 35%;
	height: 65%;
	/* border: 1px solid #f00; */
	background: url('../img/story/story_text_bg.png') center center no-repeat;
	background-size: 100% 100%;
	text-align: center;
	padding-top: 3%;
}
.story_text_title{
	width: 70%;
	margin-bottom: 3%;
}
.story_text{
	width: 80%;
}

.race_content_bg{
	position: absolute;
	display: none;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.7);
}
.race_content{
	position: absolute;
	display: block;
	top: 15%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* border: 1px solid #f00; */
	/* background: url('../img/race/race_select_bg.png') center center no-repeat;
	background-size: 100% 100%; */
}
.race_logo{
	position: absolute;
	display: block;
	z-index: 2;
	top: -40%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 80%;
	height: 38%;
	background: url('../img/page1_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.race_logo:hover{
	cursor: pointer;
}
.race_title{
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	right: 0;
	margin: 0 auto;
	width: 50%;
	height: 10%;
	/* border: 1px solid #f00; */
	background: url('../img/race/race_title.png') center center no-repeat;
	background-size: contain;
}
.race_btn_human{
	position: absolute;
	display: block;
	bottom: -10%;
	left: 0;
	width: 50%;
	height: 90%;
	/* border: 1px solid #f00; */
	background: url('../img/race/race_btn_human.png') center center no-repeat;
	background-size: contain;
	outline: none !important;
    outline: 0 !important;
    animation: race_btn_human_ni 1s 0s linear forwards;
    -webkit-animation: race_btn_human_ni 1s 0s linear forwards;
    -moz-animation: race_btn_human_ni 1s 0s linear forwards;
    -ms-animation: race_btn_human_ni 1s 0s linear forwards;
    opacity: 0;
    bottom: -10%;
}
@-webkit-keyframes race_btn_human_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@-moz-keyframes race_btn_human_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@-o-keyframes race_btn_human_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@-ms-keyframes race_btn_human_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@keyframes race_btn_human_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
.race_btn_human:hover{
	cursor: pointer;
	background: url('../img/race/race_btn_human_hover.png') center center no-repeat;
	background-size: contain;
}
.race_btn_vampire{
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 90%;
	/* border: 1px solid #f00; */
	background: url('../img/race/race_btn_vampire.png') center center no-repeat;
	background-size: contain;
	outline: none !important;
    outline: 0 !important;
    animation: race_btn_vampire_ni 1s .5s linear forwards;
    -webkit-animation: race_btn_vampire_ni 1s .5s linear forwards;
    -moz-animation: race_btn_vampire_ni 1s .5s linear forwards;
    -ms-animation: race_btn_vampire_ni 1s .5s linear forwards;
    opacity: 0;
    bottom: -10%;
}
@-webkit-keyframes race_btn_vampire_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@-moz-keyframes race_btn_vampire_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@-o-keyframes race_btn_vampire_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@-ms-keyframes race_btn_vampire_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
@keyframes race_btn_vampire_ni {
    0%{
        opacity: 0;
        bottom: -10%;
    }
    100%{
        opacity: 1;
        bottom: 0;
    }
}
.race_btn_vampire:hover{
	cursor: pointer;
	background: url('../img/race/race_btn_vampire_hover.png') center center no-repeat;
	background-size: contain;
}
.race_back_home_btn{
	position: absolute;
	display: block;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: -10%;
	margin: 0 auto;
	width: 20%;
	height: 8%;
	/* border: 1px solid #f00; */
	background: url('../img/backhome_btn.png') center center no-repeat;
	background-size: contain;
	transition: .3s;
}
.race_back_home_btn:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
#video1,#video2{
	width: 100% !important;
}
.video_sound{
	position: absolute;
	z-index: 3;
	top: 2%;
	left: 2%;
	color: #fff;
	font-size: 28px;
}
.video_sound:hover{
	cursor: pointer;
	color: #f00;
}

.character_content_bg{
	position: absolute;
	display: none;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.7);
}
.character_content{
	position: absolute;
	display: block;
	top: 15%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* border: 1px solid #f00; */
}
.character_logo{
	position: absolute;
	display: block;
	z-index: 2;
	top: -40%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 80%;
	height: 38%;
	background: url('../img/page1_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.character_logo:hover{
	cursor: pointer;
}
.character_title{
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	right: 0;
	margin: 0 auto;
	width: 50%;
	height: 10%;
	/* border: 1px solid #f00; */
	background: url('../img/character/character_title.png') center center no-repeat;
	background-size: contain;
}
.character_btn_human{
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 50%;
	height: 90%;
	/* border: 1px solid #f00; */
	background: url('../img/character/character_btn_human.png') center center no-repeat;
	background-size: contain;
	outline: none !important;
    outline: 0 !important;
    animation: race_btn_human_ni 1s 0s linear forwards;
    -webkit-animation: race_btn_human_ni 1s 0s linear forwards;
    opacity: 0;
    bottom: -10%;
}
.character_btn_human:hover{
	cursor: pointer;
	background: url('../img/character/character_btn_human_hover.png') center center no-repeat;
	background-size: contain;
}
.character_btn_vampire{
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 90%;
	/* border: 1px solid #f00; */
	background: url('../img/character/character_btn_vampire.png') center center no-repeat;
	background-size: contain;
	outline: none !important;
    outline: 0 !important;
    animation: race_btn_vampire_ni 1s .5s linear forwards;
    -webkit-animation: race_btn_vampire_ni 1s .5s linear forwards;
    opacity: 0;
    bottom: -10%;
}
.character_btn_vampire:hover{
	cursor: pointer;
	background: url('../img/character/character_btn_vampire_hover.png') center center no-repeat;
	background-size: contain;
}
.character_back_home_btn{
	position: absolute;
	display: block;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: -10%;
	margin: 0 auto;
	width: 20%;
	height: 8%;
	/* border: 1px solid #f00; */
	background: url('../img/backhome_btn.png') center center no-repeat;
	background-size: contain;
	transition: .3s;
}
.character_back_home_btn:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
.character_box1_bg{
	position: absolute;
	display: none;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
}
.character_box1{
	position: absolute;
	display: block;
	z-index: 5;
	top: 30%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* border: 1px solid #0f0; */
}
.character_box_bg{
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	width: 80%;
	height: 95%;
	margin: 0 auto;
	/* border: 1px solid #f00; */
	/* background: url('../img/character/race_select_bg.png') center center no-repeat;
	background-size: 100% 100%; */
}
.character_box1_logo{
	position: absolute;
	display: block;
	z-index: 2;
	top: -32%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 60%;
	height: 30%;
	background: url('../img/page1_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.character_box1_logo:hover{
	cursor: pointer;
}
.character_title2{
	position: absolute;
	display: block;
	z-index: 2;
	left: 0;
	top: 0;
	right: 0;
	margin: 0 auto;
	width: 50%;
	height: 8%;
	/* border: 1px solid #f00; */
	background: url('../img/character/character_title.png') center center no-repeat;
	background-size: contain;
}
.character_box_close1{
	position: absolute;
	display: block;
	z-index: 4;
	left: 40%;
	top: 24.5%;
	right: 0;
	margin: 0 auto;
	width: 6%;
	height: 5%;
	/* border: 1px solid #f00; */
	transition: .3s;
	background: url('../img/character/jackie-close2.png') center center no-repeat;
	background-size: contain;
}
.character_box_close1:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
.character_human_area{
	position: absolute;
	display: block;
	z-index: 3;
	left: 0;
	top: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	/* border: 1px solid #00f; */
	background: url('../img/character/content_human_1.png') bottom center no-repeat;
	background-size: contain;
}
.character_human_head_area{
	position: absolute;
	display: block;
	z-index: 4;
	left: 25%;
	top: 25%;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 22%;
	height: 15%;
	/* border: 1px solid #00f; */
}
.head_human{
	position: absolute;
	display: block;
	width: 30%;
	height: 100%;
	/* border: 1px solid #f00; */
}
.head_human:hover{
	cursor: pointer;
}
.head_human_1{
	left: 0;
	background: url('../img/character/head_human_1_hover.png') center center no-repeat;
	background-size: contain;
}
.head_human_2{
	left: 0;
	right: 0;
	margin: 0 auto;
	background: url('../img/character/head_human_2.png') center center no-repeat;
	background-size: contain;
}
.head_human_3{
	right: 0;
	background: url('../img/character/head_human_3.png') center center no-repeat;
	background-size: contain;
}
.character_box2_bg{
	position: absolute;
	display: none;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
}
.character_box2{
	position: absolute;
	display: block;
	z-index: 5;
	top: 30%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* border: 1px solid #0f0; */
}
.character_box_bg{
	position: absolute;
	display: block;
	left: 0;
	right: 0;
	top: 0;
	width: 80%;
	height: 95%;
	margin: 0 auto;
	/* border: 1px solid #f00; */
	/* background: url('../img/character/race_select_bg.png') center center no-repeat;
	background-size: 100% 100%; */
}
.character_box2_logo{
	position: absolute;
	display: block;
	z-index: 2;
	top: -32%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 60%;
	height: 30%;
	background: url('../img/page1_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.character_box2_logo:hover{
	cursor: pointer;
}
.character_title2{
	position: absolute;
	display: block;
	z-index: 2;
	left: 0;
	top: 0;
	right: 0;
	margin: 0 auto;
	width: 50%;
	height: 8%;
	/* border: 1px solid #f00; */
	background: url('../img/character/character_title.png') center center no-repeat;
	background-size: contain;
}
.character_box_close2{
	position: absolute;
	display: block;
	z-index: 4;
	left: 40%;
	top: 24.5%;
	right: 0;
	margin: 0 auto;
	width: 6%;
	height: 5%;
	/* border: 1px solid #f00; */
	transition: .3s;
	background: url('../img/character/jackie-close2.png') center center no-repeat;
	background-size: contain;
}
.character_box_close2:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
.character_vampire_area{
	position: absolute;
	display: block;
	z-index: 3;
	left: 0;
	top: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	/* border: 1px solid #00f; */
	background: url('../img/character/content_vampire_1.png') bottom center no-repeat;
	background-size: contain;
}
.character_vampire_head_area{
	position: absolute;
	display: block;
	z-index: 4;
	left: 25%;
	top: 25%;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 22%;
	height: 15%;
	/* border: 1px solid #00f; */
}
.head_vampire{
	position: absolute;
	display: block;
	width: 30%;
	height: 100%;
	/* border: 1px solid #f00; */
}
.head_vampire:hover{
	cursor: pointer;
}
.head_vampire_1{
	left: 0;
	background: url('../img/character/head_vampire_1_hover.png') center center no-repeat;
	background-size: contain;
}
.head_vampire_2{
	left: 0;
	right: 0;
	margin: 0 auto;
	background: url('../img/character/head_vampire_2.png') center center no-repeat;
	background-size: contain;
}
.head_vampire_3{
	right: 0;
	background: url('../img/character/head_vampire_3.png') center center no-repeat;
	background-size: contain;
}

.view_content_bg{
	position: absolute;
	display: none;
	z-index: 5;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .7);
}
.view_content{
	position: absolute;
	display: block;
	top: 10%;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	/* border: 1px solid #f00; */
}
.view_back_home_btn{
	position: absolute;
	display: block;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: -17%;
	margin: 0 auto;
	width: 20%;
	height: 8%;
	/* border: 1px solid #f00; */
	background: url('../img/backhome_btn.png') center center no-repeat;
	background-size: contain;
	transition: .3s;
}
.view_back_home_btn:hover{
	cursor: pointer;
	transform: scale(1.1, 1.1);
}
.view_logo{
	position: absolute;
	display: block;
	z-index: 2;
	top: -40%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 60%;
	height: 30%;
	background: url('../img/page1_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.view_logo:hover{
	cursor: pointer;
}
.view_title{
	position: absolute;
	display: block;
	z-index: 2;
	top: -12%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 30%;
	height: 10%;
	background: url('../img/view/view_title.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}

/*slider*/
#carousel-id{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	/* border: 1px solid #f00; */
}
#carousel-id .carousel-inner{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	/* border: 1px solid #0f0; */
}
#carousel-id .carousel-inner .item{
	width: 100%;
	height: 100%;
	/* border: 1px solid #00f; */
}
#carousel-id .carousel-inner .item:nth-child(1){
	background: url('../img/story/story1.png') center center no-repeat;
	background-size: contain;
}
#carousel-id .carousel-inner .item:nth-child(2){
	background: url('../img/story/story2.png') center center no-repeat;
	background-size: contain;
}
#carousel-id .carousel-inner .item:nth-child(3){
	background: url('../img/story/story3.png') center center no-repeat;
	background-size: contain;
}
#carousel-id .carousel-inner .item:nth-child(4){
	background: url('../img/story/story4.png') center center no-repeat;
	background-size: contain;
}
#carousel-id .carousel-inner .item:nth-child(5){
	background: url('../img/story/story5.png') center center no-repeat;
	background-size: contain;
}
#carousel-id .carousel-inner .item:nth-child(6){
	background: url('../img/story/story6.png') center center no-repeat;
	background-size: contain;
}
#carousel-id .carousel-inner .item:nth-child(7){
	background: url('../img/story/story7.png') center center no-repeat;
	background-size: contain;
}
#carousel-id .carousel-inner .item:nth-child(8){
	background: url('../img/story/story8.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	/* border: 1px solid #f00; */
}
#carousel-id3 .carousel-inner{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	/* border: 1px solid #0f0; */
}
#carousel-id3 .carousel-inner .item{
	width: 100%;
	height: 100%;
	/* border: 1px solid #00f; */
}
#carousel-id3 .carousel-inner .item:nth-child(1){
	background: url('../img/view/view1.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-inner .item:nth-child(2){
	background: url('../img/view/view2.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-inner .item:nth-child(3){
	background: url('../img/view/view3.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-inner .item:nth-child(4){
	background: url('../img/view/view4.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-inner .item:nth-child(5){
	background: url('../img/view/view5.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-inner .item:nth-child(6){
	background: url('../img/view/view6.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-inner .item:nth-child(7){
	background: url('../img/view/view7.png') center center no-repeat;
	background-size: contain;
}
.carousel_btn{
	position: absolute;
	width: 4%;
	height: 12%;
	/* border: 1px solid #00f; */
}
.carousel_btn:hover{
	opacity: .7;
}
.carousel_btn.left{
	top: 0;
	bottom: 0;
	left: -6%;
	margin: auto 0;
	background: url('../img/slider_arrow_left.png') center center no-repeat;
	background-size: contain;
}
.carousel_btn.right{
	top: 0;
	bottom: 0;
	right: -6%;
	margin: auto 0;
	background: url('../img/slider_arrow_right.png') center center no-repeat;
	background-size: contain;
}
.carousel-indicators{
	height: 4%;
	bottom: -8% !important;
}
.carousel-indicators li{
	width: 5%;
	height: 100%;
	border: none;
}
.carousel-indicators li:last-child{
	margin-right: 0;
}
#carousel-id .carousel-indicators li{
	background: url('../img/slider_dot.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-indicators li{
	background: url('../img/slider_dot.png') center center no-repeat;
	background-size: contain;
}
.carousel-indicators .active{
	width: 5%;
	height: 100%;
}
#carousel-id .carousel-indicators li.active{
	background: url('../img/slider_dot_active.png') center center no-repeat;
	background-size: contain;
}
#carousel-id3 .carousel-indicators li.active{
	background: url('../img/slider_dot_active.png') center center no-repeat;
	background-size: contain;
}

.footer{
	position: relative;
	display: block;
	background-color: #000;
	width: 100%;
	height: 15%;
	/* border: 1px solid #f00; */
	overflow: hidden;
}
.footer_logo{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 1%;
	margin: auto 0;
	height: 65%;
	width: 12%;
	background: url('../img/footer_logo.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.footer_info{
	width: 110%;
}
.footer_info_title{
	position: relative;
	display: inline-block;
	top: 0;
	height: 100%;
	vertical-align: top;
}
.footer_info_content{
	position: relative;
	display: inline-block;
	height: 100%;
	vertical-align: top;
}
.copyright_text_area{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 15%;
	height: 65%;
	width: 35%;
	margin: auto;
	color: #fff;
	/* border: 1px solid #f00; */
	font-size: 12px;
	padding-top: 1%;
}
.icon15{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	right: 41%;
	height: 65%;
	width: 5%;
	margin: auto;
	color: #fff;
	background: url('../img/icon15.png') center center no-repeat;
	background-size: contain;
	/* border: 1px solid #f00; */
}
.icon15_text{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	right: 0;
	height: 90%;
	width: 40%;
	margin: auto;
	color: #fff;
	font-size: 12px;
	padding-top: 1%;
	/* border: 1px solid #0f0; */
}

/*model-------*/
.modal-header{
	position: relative;
	display: block;
	height: 45px;
}
.modal-header > .jackie-close{
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 45px;
	background: url('../img/close-btn.png') center center no-repeat;
	opacity: 1 !important;
	outline: none !important;
    outline: 0 !important;
}
.modal-header > .jackie-close:hover{
	opacity: .5 !important;
	cursor: pointer;
}
.modal-header > .jackie-close2{
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 45px;
	background: url('../img/race/jackie-close1.png') center center no-repeat;
	background-size: contain;
	opacity: 1 !important;
	outline: none !important;
    outline: 0 !important;
}
.modal-header > .jackie-close2:hover{
	opacity: .5 !important;
	cursor: pointer;
}
.modal{
	background-color: rgba(0,0,0,.8);
}
.modal-open .modal{
	overflow-x: auto;
    overflow-y: auto;
}
.modal-open{
	padding-right: 0px !important;
}
.modal-header{
	border-bottom: 1px solid transparent;
}
.modal-content{
	background-color: transparent;
	border:transparent;
    -webkit-box-shadow:transparent !important;
    box-shadow:0px 0px 0px rgba(0,0,0,0) !important;
}
.modal-footer{
	position: relative;
	border-top: none !important;
}
.modal-footer > .jackie-close2{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 140px;
	height: 45px;
	background: url('../img/race/jackie-close1.png') center center no-repeat;
	background-size: contain;
	opacity: 1 !important;
	outline: none !important;
    outline: 0 !important;
}
.modal-footer > .jackie-close2:hover{
	opacity: .5 !important;
	cursor: pointer;
}
.thumbnail{
	background-color: transparent;
	border: 1px solid transparent;
}
.carousel-inner > .item > img{
	max-width: 100%;
	margin: auto;
}
.jackie-modal-content{
	width: 968px;
}
@media (min-width: 768px){
	.modal-dialog {
	    width: 768px;
	}
	.jackie-modal-dialog2{
		width: 968px !important;
	}
}
@media screen and (max-width:768px){
	.modal-dialog {
	    width: 768px;
	}
	.jackie-modal-dialog2{
		width: 925px !important;
	}
	.carousel-inner > .item > img{
		max-width: 95%;
	}
}
@media screen and (max-height: 800px) and (min-width:1650px){
	.story_btn{
		bottom: 50%;
	}
}
@media screen and (max-width:1650px){
	.story_btn{
		right: 12%;
		bottom: 38%;
	}
	.character_btn{
		right: 10%;
	}
}
@media screen and (max-width:1400px){
	.character_btn{
		right: 6%;
	}
}
@media screen and (max-height: 768px) and (max-width:1366px){
	.character_btn{
		right: 13%;
	}
}