@charset "utf-8";
/* CSS Document */
.s1{text-align: center;color: #000;overflow: auto;font-size:16pt; }
.s2{text-align: center;color: #FFF;overflow: auto;font-size:15pt; }
body{ background-color: #000}

.bt {text-indent: -999px;overflow: hidden;cursor:pointer;}
.wrap {width:1200px;margin: 0 auto;position: relative;}
.min_w{;min-width:1200px;}
.wrap-box{position:absolute;width:1.00rem;height: 100%; left: 50%;top: 50%;padding:0; margin-left:-190px; margin-top:-190px;z-index: 100;}
/********************************主外框********************************/

.page00_bg {width:100%;height: 100%;;background: url(../images/bg_top.jpg) top no-repeat;margin:0; padding:0;bottom: 0;right: 0;background-position: center center;background-size: 100% 100%;}
.page01_bg {width:100%;height: 100%;background: url(../images/bg_world.jpg) top no-repeat;margin:0; padding:0;bottom: 0;right: 0;background-position: center center;background-size: 100% 100%; overflow: hidden}
.page02_bg {width:100%;height: 100%;background: url(../images/bg-character-archer.jpg) top no-repeat;margin:0; padding:0;bottom: 0;right: 0;background-position: center center;background-size: 100% 100%;}


.bg_black{width:100%;height:100%;background: url(../images/mask_pattern.png)repeat;;position: absolute; bottom: 0px}
#myVideo{width: 1920px;height: 1080px;overflow: hidden; position:absolute;top: 0;left: 50%;margin-left: -960px; }
#myVideo02{width: 1920px;height: 1080px;overflow: hidden; position:absolute;top: 0;left:50%;margin-left: -960px;}

/********************************bar********************************/
.bar-box{ width: 100%; height: 40px; background-color: #FFFFFF; position: fixed;z-index: 2000;padding: 0; border-bottom:#000  2px solid}
.bar_icon{width:6.5rem;background-position: center center;background-size: 100% auto; position:absolute; left: 15px;  top:5px;}
.bar-box h1 {margin-left: 130px; margin-top: 3px; font-size: 10px;color:#9E9E9E;text-overflow: ellipsis;white-space: nowrap;}
.bar-box p { margin-left: 130px;font-size:18px;line-height:10px;color:#000;padding-top:5px;word-break: break-all;font-weight:500;letter-spacing:2px}
/*----- fullPage  menu 樣式------ */
#menu{width: 50rem; float: right; right: 0;padding: 0; top:0; margin: -35px 0 0 0; }
#menu li {display:inline-block;height: 31px; float: right; padding: 10px 10px 0 20px;margin:0 0 0 0px; font-size: 14pt; letter-spacing :0.5px;cursor: pointer;  }
#menu li a{display:block;color: #888888;}
#menu li a:hover,#menu li:hover { background-color: #d8d8d8; color: #fff}
#menu li.active,#menu li.active a:hover{ background-color: #d8d8d8; color: #fff}

.menu_top{ width: 50px;height: 30px; padding:0 0 0 0;   }
.menu_world{width: 80px;height:30px; margin:0 0 0 0; }
.menu_character{ width: 130px;height: 30px; margin:0 0 0 0;}

.bar-box .parts.parts-twitter {top: 350px;background-image: url(../images/bar-twitter-bg.png);}
.bar-box .parts.is-open {left: 0;}
.bar-box .parts {position: absolute;left: -285px;width: 329px; height: 251px;z-index: 9;background-repeat: no-repeat;background-position: right 0,0 0;background-size: contain,auto 100%; -webkit-transition: left .4s cubic-bezier(.215,.61,.355,1);transition: left .4s cubic-bezier(.215,.61,.355,1);}
.bar-box  .parts .parts-twitter .parts-container { }
.bar-box  .parts .parts-container {position: absolute;top: 10px;left: 8px;width: 270px;height: 231px;background: #fff; overflow: hidden;overflow-y: scroll; }
.bar-box  .parts .parts-hit {position: absolute;display: block;top: 0;right: 0;width: 42px;height: 100%;cursor: pointer;}

/********************************page00 top內容********************************/
.bg-white01{width: 40rem;position: absolute; margin:0 0 0 0 ;z-index: 1000; right: 0px; top: 30px; }
.bg-white02{width: 40rem;position: absolute; margin:0 0 0 0 ;z-index: 1000; left: -10px; bottom: -40px; }

.img_logo {width: 30rem;margin:0 0 10px -100px;padding:0;background-position: center center;background-size: 100% auto;animation:scaleOn 3s ease-out ;}
.button_box{width:30rem;height: auto; left: 0;  top:0;margin:0 0 0 200px ; }

.slogan-w{width: 40rem; position: absolute; margin: -30px 0 0 -350px; display: block;animation:fadeIn 2s ease-in ;}

.bt_twitter{width:84px;height:85px; background: url(../images/bt_twitter.png) no-repeat; position: absolute; margin: 30px 0 0 -140px;display: block; z-index: 50; animation:leftIn 2s ease-out }
.bt_twitter:hover{  background: url(../images/bt_twitter_r.png) no-repeat; }

#audioBtn{width: 84px;height: 85px;background: url(../images/btn_sound.png)bottom no-repeat;position: absolute; margin:  30px 0 0 -20px;display: block;animation:rightIn 2s ease-out ; }

#audioBtn.active{ background-position:top}

.button_box hr {width: 46rem; height: 1px; background-color: #FFFDFD;border: 0;position: absolute;}
.button_box hr.hr01{margin: 0 0 0 -1090px ;animation:leftIn 3s ease-in;}
.button_box hr.hr02 {margin: 0 0 0 295px;animation:rightIn 3s ease-in;}


/*----- world  內容 動態------ */
#section2 .world-title{width:45rem;position:relative;transition: all 1000ms ease-out 0.3s;top:-10%; margin-left: -220px; opacity: 0;z-index: 100;} 
body.fp-viewing-secondPage  #section2 .world-title{opacity: 1; margin-left: 220px;}

#section2 .world-content{width:45rem;position:relative;transition: all 1000ms ease-out 0.8s;top:-5%; margin-left: -120px; opacity: 0;z-index: 100;} 
body.fp-viewing-secondPage #section2 .world-content{opacity: 1; margin-left: 220px;}

.bg_cloud{width:100%;position: absolute; margin:0 0 0 0 ;z-index:10; right: 0px; bottom: -5px}

 #section2 .bg_leaf{width:100%;position: absolute; margin:0 0 0 0 ;z-index:5; right: 0px; top:0;transition: all 1000ms ease-out 1.5s; opacity: 0;}
body.fp-viewing-secondPage #section2 .bg_leaf{opacity: 1;}

.bg_black_trian{width: 100%; height:auto;z-index: 5; position: absolute;opacity: 0.5;border-bottom:900px solid #000;border-left: 2000px solid transparent;}

/* content-fairy 腳色介紹*/
.content-fairy{position: relative;height: 900px;min-width: 1200px;max-width: 1920px;padding-top:0;margin: -350px 0 0 -410px;}
.fairy-job{position: relative;z-index: 1;padding-top: 0px;width: 1200px;height:900px;margin: 0 auto;}

.img_character{width: 70rem; top: 150px; left: 40px; position: absolute;transition: all 1000ms ease-out 1s; opacity: 0; z-index: 300}
body.fp-viewing-3rdPage  #section3 .img_character{opacity: 1; }




.job-tab.j{ position: absolute;left: 0px; top: 700px; width: 1000px; height: 120px; z-index: 500;}
.j  li{height:121px;width:113px; float: left ;position: absolute;text-indent: -999px;}


.bt_role01{background:url(../images/chr_archer_bt.png) no-repeat top;margin: 0 0 0 0px;}
.bt_role02{background:url(../images/chr_cleric_bt.png) no-repeat top;margin: 0 0 0  120px;}
.bt_role03{background:url(../images/chr_master_bt.png) no-repeat top;margin: 0 0 0 240px;}
.bt_role04{background:url(../images/chr_wizard_bt.png) no-repeat top;margin: 0 0 0 360px;}
.bt_role05{background:url(../images/chr_barbarian_bt.png) no-repeat top;margin: 0 0 0 480px;}
.bt_role06{background:url(../images/chr_vulpine_bt.png) no-repeat top;margin:0 0 0 600px; left: 600px}
.bt_role06_no{background:url(../images/chr_vulpine_bt_no.png) no-repeat top;margin:0 0 0 600px; left: 600px}

.job-tab li:hover{background-position:bottom;}
.active.fairy-tab-btn-bg{background-position:bottom;}
.fairy-tab-btn-bg:last-of-type{margin: 0;}

.job-wrap,
.friends-wrap{position: absolute;width: 1200px;left: 0; top:200px;}
.wrap-item{position: relative;width: 100%;}
.wrap-item .char_img01{ height: auto;top: -10px;right: -200px;-webkit-animation: leftIn 1.5s ;animation: leftIn 1.5s ease-in-out ;position: absolute;}
.wrap-item .char_img02{ height: auto;top: -10px;right:-200px;-webkit-animation: leftIn 1.5s ;animation: leftIn 1.5s ease-in-out ;position: absolute;}
.wrap-item .char_img03{ height: auto;top: -10px;right:-200px;-webkit-animation: leftIn 1.5s ;animation: leftIn 1.5s ease-in-out ;position: absolute;}
.wrap-item .char_img04{ height: auto;top: -10px;right:-200px;-webkit-animation: leftIn 1.5s ;animation: leftIn 1.5s ease-in-out ;position: absolute;}
.wrap-item .char_img05{ height: auto;top: -10px;right:-200px;-webkit-animation: leftIn 1.5s ;animation: leftIn 1.5s ease-in-out ;position: absolute;}
.wrap-item .char_img06{ height: auto;top: -10px;right:-200px;-webkit-animation: leftIn 1.5s ;animation: leftIn 1.5s ease-in-out ;position: absolute;}

.wrap-item hr{ width:550px; height: 1px; background-color: #000000;;position: absolute;  margin: 310px 0 0 0;animation: fadeIn 2s ease-in-out ;}


.fairy-video-bg{height:66px;width:63px;position: absolute;top: 670px;left: -200px;overflow: hidden; border-radius: 50%; z-index: 100;animation: fadeIn 2s ease-in ;}

.wrap-text{position: absolute;}
.wrap-text{height:120px;width: 120px;top:  170px;left:400px; text-indent: -9999px;animation: fadeIn 2s linear; z-index: 50;}
.wrap-slide1 .wrap-text{background: url(../images/chr_archer_icon.png)no-repeat;}
.wrap-slide2 .wrap-text{background: url(../images/chr_cleric_icon.png)no-repeat;}
.wrap-slide3 .wrap-text{background: url(../images/chr_master_icon.png)no-repeat;}
.wrap-slide4 .wrap-text{background: url(../images/chr_wizard_icon.png)no-repeat}
.wrap-slide5 .wrap-text{background: url(../images/chr_barbarian_icon.png)no-repeat;}
.wrap-slide6 .wrap-text{background: url(../images/chr_vulpine_icon.png)no-repeat;}


.name-text{position: absolute;}
.name-text{height:244px;width: 441px;top: 50px;left: -25px; text-indent: -9999px;animation: rightIn  1s linear; z-index: 50;}
.wrap-slide1 .name-text{background: url(../images/chr_archer_w.png)no-repeat;}
.wrap-slide2 .name-text{background: url(../images/chr_cleric_w.png)no-repeat;}
.wrap-slide5 .name-text{background: url(../images/chr_barbarian_w.png)no-repeat;}
.wrap-slide6 .name-text{background: url(../images/chr_vulpine_w.png)no-repeat;}
.wrap-slide3 .name-text{background: url(../images/chr_master_w.png)no-repeat;}
.wrap-slide4 .name-text{background: url(../images/chr_wizard_w.png)no-repeat;}

.des-text{position: absolute;}
.des-text{height:161px;width:572px;top:330px;left: 0px; text-indent: -9999px;animation: rightIn 1.5s linear; z-index: 50;}
.wrap-slide1 .des-text{background: url(../images/chr_archer_content.png)no-repeat;}
.wrap-slide2 .des-text{background: url(../images/chr_cleric_content.png)no-repeat;}
.wrap-slide5 .des-text{background: url(../images/chr_barbarian_content.png)no-repeat;}
.wrap-slide6 .des-text{background: url(../images/chr_vulpine_content.png)no-repeat;}
.wrap-slide3 .des-text{background: url(../images/chr_master_content.png)no-repeat;}
.wrap-slide4 .des-text{background: url(../images/chr_wizard_content.png)no-repeat;}

.bg_img{ width: 1920px; height: auto; min-width: 1200px; margin-left: -360px; margin-top: -130px; }


#footer{height: 250px!important;}
.footer_wrap {	width: 100%;height: 250px;background:#fff;padding:0;font-size: 12px;font-family: "Microsoft YaHei", Verdana, Geneva, sans-serif, \5b8b\4f53; bottom:0;position: absolute;z-index: 1000;}
.footer_wrap hr{ margin-top: -0.5px}
.footer {width: 1000px;height: auto;margin: 70px auto;color:#777777}
.foot_icon {float: left; display: block;width:7rem;margin: -5px 20px 0 0; position:relative}
.footer em {float: left;width: 1px;height: 110px;background-color:#A3A3A3;margin: 0px 20px;}
.foot_rightbox{float: left;width: 800px; }
.foot_middle{float: left;}
.foot_middle p{line-height:23px; font-size: 9pt;text-align:left}
.foot_right{float: right; text-align: center;position:relative  }
.foot_right img{margin: 10px 0 15px -10px; }
.foot_right h1{letter-spacing: 8px ;}


/*-- 影片彈跳視窗 start--*/
#video-popup-container {display:none;position: fixed;z-index: 996;width: 60%;left: 50%;margin-left: -30%;top: 20%;background-color: #fff;}
#video-popup-close {cursor: pointer;position: absolute;right: -10px;top: -10px;z-index: 998;width: 58px;height: 58px;background: url(../images/close.png) no-repeat 0 0;}
#video-popup-iframe-container {position: absolute;z-index: 997;width: 100%;padding-bottom: 56.25%; border: 2px solid #000;border-radius: 2px;background-color: #000;}
#video-popup-iframe {z-index: 999;position: absolute;width: 100%;height: 100%;left: 0;top: 0; background-color: #000;}
#video-popup-overlay {display: none; position: fixed;z-index: 995;top: 0;background-color: #000;opacity: 0.8;width: 100%;height: 100%;}
/*-- 影片彈跳視窗 end--*/
/*-- 彈跳視窗_app--*/
.box_event1 {width:629px;height: 328px;position: fixed;display: block;left: 48%;top:45%;margin-left: -300px;margin-top: -110px;z-index:500;}
.box_event1 {background: url(../images/coming_img.jpg) no-repeat; }
a.btn_close {width:90px;height:90px;position: absolute;display: block;right: 15px;top: 10px;}
.UPUP{transition:all 0.5s ease-out;transform:translate3d(0%,-1000%,0px);-webkit-transition:all 1s ease-out;-webkit-transform:translate3d(0%,-1000%,0px);}
.DOWNDOWN{transition:all 1s ease-out;transform:translate3d(0%,0%,0px);-webkit-transition:all 1s ease-out;-webkit-transform:translate3d(0%,0%,0px);}

/*-- media width: 1440px--*/
@media (max-width: 1440px){
	.wrap-box{  margin-left:-150px; margin-top:-180px;}
	 #section2 .world-title{transform: scale(.8); margin-left: -220px;} 
     body.fp-viewing-secondPage  #section2 .world-title{ margin-left: 100px;}
     #section2 .world-content{transform: scale(.9);top:-10%; margin-left: -120px;} 
     body.fp-viewing-secondPage #section2 .world-content{opacity: 1; margin-left: 50px;}
	 #menu{transform: scale(.9);}
	.content-fairy{transform: scale(.8);}
}