/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /*font: inherit;*/
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

*{font-family: Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;}

html, body{
	background-color:#000;
	width: 100%;
	height: 100%;
	margin: 0; 
	padding: 0;
}

header{
    background-color: #000;
    width: 100%;
    min-width: 1200px;
    position: relative;
    z-index: 400;
}
header a{
    color:#FFF;	
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
}
header a:hover{
	color:#a0d9f7;
	text-decoration: none;
}
.headercontent{
	width: 1200px;
	height: 40px;
    margin: 0 auto;
}
.headertext{
	float: left;
    margin-top: 12px;
    margin-left: 16px;
}
.headerfb{
	float: right;
}

/*wrapper*/
.wrapper{ 
	background: url("../images/bg1.jpg") center -40px no-repeat;
	width: 100%;
	max-width: 1920px;
    min-width: 1200px;
	position: relative;
	margin: 0 auto;
}
.title{	  
	position: relative;
    margin: 0 auto;
    overflow: hidden;
    min-height: 1040px;  
}
.bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/bg2.jpg) center -40px no-repeat;
    animation: bgmov .5s infinite alternate linear;
}
@keyframes bgmov {
    0% { 
    opacity: 0;
    }
    100% { 
    opacity: 1;    
    }
}  
.logo{
	background: url(//landing.mangot5.com/template/au/event/common/logo.png) 0 0 no-repeat;
    width: 175px;
    height: 97px;
    font-size: 0px;
    position: absolute;
    left: 50%;
    margin-left: -88px;
    top: 630px;
    cursor: pointer;
    z-index: 1000;
}
.logo:hover{background-position: 0 -97px;}
.img{
    position: absolute;
    left: 50%;
    font-size: 0;
}
.slogan{
    background: url("../images/slogan.png") 0 0 no-repeat;
    width: 891px;
    height: 426px;
    margin-left: -446px;
    top: 180px;
}
.role1{
    background: url("../images/role1.png") 0 0 no-repeat;
    width: 372px;
    height: 930px;
    top: 68px;
    margin-left:-760px;
}
.role2{
    background: url("../images/role2.png") 0 0 no-repeat;
    width: 254px;
    height: 747px;
    top: 278px;
    margin-left: -450px;
}
.role3{
    background: url("../images/role3.png") 0 0 no-repeat;
    width: 296px;
    height: 776px;
    top: 254px;
    margin-left: 200px;
}
.role4{
    background: url("../images/role4.png") 0 0 no-repeat;
    width: 424px;
    height: 931px;
    top: 66px;
    margin-left: 440px;
}
@media screen and (max-width: 1200px){
    .role1{margin-left:-700px;}
    .role2{margin-left:-468px;}
    .role3{margin-left: 220px;}
    .role4{margin-left: 380px;}
}
.flag{
    background: url("../images/flag.png") 0 0 no-repeat;
    width: 709px;
    height: 94px;
    //top: 41px;
    top: 71px;
    margin-left: -354px;
    
}
.flag_tw{
    background: url("../images/flag_tw.png") 0 0 no-repeat;
    width: 210px;
    height: 212px;
    //top: -30px;
    top: 0;
    margin-left: -105px;
    animation: flaglight .5s infinite alternate linear
}
@keyframes flaglight {
    0% { 
    //box-shadow: 0 0 60px #fff;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    100% { 
    //box-shadow: 0 0 10px #fff;   
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
}
.apply{
	background: url("../images/applyall.png") 0 0 no-repeat;
    width: 269px;
    height: 98px;
    margin-left: -135px;
    top: 530px;
    cursor: pointer;
}
.apply:hover{ background: url("../images/applyall.png") 0 -98px no-repeat;}
.apply:active{ margin-top:3px; margin-left: -132px;}

.apply3{
	background: url("../images/applyfb.png") 0 0 no-repeat;
    width: 269px;
    height: 98px;
    margin-left: -135px;
    top: 1280px;
    cursor: pointer;
}
.apply3:hover{ background: url("../images/applyfb.png") 0 -98px no-repeat;}
.apply3:active{ margin-top:3px; margin-left: -132px;}

#scene {
    width: 100%;
    height: 100%;
    position: absolute;
}

#scene li.tag1 {
    margin: 0 auto;
    z-index: 1;
    pointer-events: none;
}

#scene li.tag2 {
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 50%;
    z-index: 2;
    pointer-events: none;
}

#scene li.tag3 {
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 50%;
    z-index: 3;
    pointer-events: none;
}

#scene li.tag4 {
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 50%;
    z-index: 4;
    pointer-events: none;
}
#scene li.tag5 {
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 50%;
    z-index: 5;
    pointer-events: none;
}
#scene li.tag6 {
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 50%;
    z-index: 6;
    pointer-events: auto;
}
#scene li.tag7 {
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 50%;
    z-index: 1;
    pointer-events: none;
}
#scene li.tag8 {
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 50%;
    z-index: 7;
    pointer-events: auto;
}

.arrow{
    background: url("../images/arrow.png") center top repeat;
    width: 131px;
    height: 73px;
    top: 850px;
    margin-left: -65px;
    animation: gotomov .7s infinite alternate linear;
}
@keyframes gotomov{
    0%{
        margin-top:0;
    }
    100%{
        margin-top:20px;
    }
}
/*content*/
.content{
	position:relative;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
    background: url("../images/pagebg.jpg") center top repeat;
}
/*btn*/
.top{
    background: url("../images/topall.png") 0 0 no-repeat;
    width: 153px; 
    height: 121px;
    position: fixed;
    bottom: 184px;
    left: 50%;
    margin-left: 600px;
    cursor: pointer;
    z-index: 20;
	display: none;
}
.top:hover{background-position-y: -121px;}
.applysm{
    background: url("../images/applysm.png") 0 0 no-repeat; 
    width: 131px; 
    height: 80px;
    position: fixed;
    bottom: 110px;
    left: 50%;
    margin-left: 610px;
    cursor: pointer;
    z-index: 20;
    display: none;
}
.applysm:hover{
    background-position-y:-80px; 
}
.btn { 
	background-image: url("../images/btn.png"); 
    background-repeat: no-repeat; 
    /*width: 215px;*/
    height: 98px;  
	z-index: 10;
	display: inline-block;
}
.btn1 { width: 197px; background-position: 0 0;}
.btn1:hover,#tab-1:target ~ #tab > ul li:nth-child(1) a { background-position: -197px 0;}
.btn2 { width: 256px; background-position: -394px 0;}
.btn2:hover,#tab-2:target ~ #tab > ul li:nth-child(2) a { background-position: -650px 0;}
.btn3 { width: 205px; background-position: 0 -98px;}
.btn3:hover,#tab-3:target ~ #tab > ul li:nth-child(3) a { background-position: -205px -98px;}
.btn4 { width: 184px; background-position: -410px -98px;}
.btn4:hover,#tab-4:target ~ #tab > ul li:nth-child(4) a { background-position: -594px -98px;}
.btn5 { width: 265px; background-position: 0 -196px;}
.btn5:hover,#tab-5:target ~ #tab > ul li:nth-child(5) a { background-position: -265px -196px;}
.btn6 { width: 178px; background-position: -530px -196px;}
.btn6:hover,#tab-6:target ~ #tab > ul li:nth-child(6) a { background-position: -708px -196px;}

#tab-1,#tab-2,#tab-3,#tab-4,#tab-5{
	font-size: 0;
}
#tab{
    width: 100%;
}
/* 頁籤ul */
#tab>ul{
    overflow: hidden;
    margin: 0 auto -34px -25px;
    padding: 0;
}
#tab>ul>li{
    list-style-type: none;
    display: inline-block;
    margin-right: -25px;
}
#tab>ul>li>a{
    font-size: 0px;
}
/*頁籤div內容*/
#tab>div {
    clear:both;
    height: 0;
    overflow:hidden;
    visibility:hidden;
}
/* span:target */
#tab-1:target,#tab-2:target,#tab-3:target,#tab-4:target,#tab-5:target,#tab-6:target{}
/*第一筆的底色*/
span:target ~ #tab > ul li:first-child a {}
span:target ~ #tab > div:first-of-type {
    visibility:hidden;
    height:0;
}
/*頁籤變換&第一筆(第1個，而且是li)*/
span ~ #tab > ul li:first-child a,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"],
#tab-5:target ~ #tab > ul li a[href$="#tab-5"],
#tab-6:target ~ #tab > ul li a[href$="#tab-6"]{
}
/*頁籤內容顯示&第一筆(第1個div)*/
span ~ #tab > div:first-of-type,
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4,
#tab-5:target ~ #tab > div.tab-content-5,
#tab-6:target ~ #tab > div.tab-content-6{
    visibility:visible;
    height:auto; 
}
.tab-content-1,.tab-content-2,.tab-content-3,.tab-content-4,.tab-content-5{
	/*position: relative;
    left: 50%;
    margin-left: -612px;*/
}
.tab-content-6{
    position: relative;
    width: 1214px;
    background: url("../images/page5.png") 0 0 no-repeat;
    margin: 0 auto;
    padding: 0 50px;
}
.slider{
    position: relative;
    top: 280px;
    height: 1060px;
    width: 100%;
    margin: 0 auto;
}

/*page2*/
.fblink{
    top: 543px;
    margin-left: 39px;
    font-size: 20px;
    font-weight: 900;
    color: #ff9000;
}
.fblink:hover{color: #8757ff;}
.songli{
    top: 881px;
    margin-left: -492px;
    font-size: 16px;
    font-weight: 900;
    color: #ff9000;
}
.songli:hover{color: #8757ff;}

/*page3*/
.mapicon{
    background: url("../images/map.png") 0 0 no-repeat;
    width: 33px; 
    height: 47px;
    font-size: 0;
}
.mapicon:hover{
    background-position-x:-33px;
}
.mapicon.tyc{
    position: absolute;
    left: 50%;
    margin-left: -48px;
    top: 3952px;
}
.mapicon.tpe{
    position: absolute;
    left: 50%;
    margin-left: -48px;
    top: 4832px;
}
.apply2{
    margin-left: -135px;
    top: 780px;
}
/*page5*/
.coupon{
    bottom: 453px;
    margin-left: -174px;
    font-size: 16px;
    font-weight: 900;
    color: #ff9000;
}
.coupon:hover{color: #8757ff;}
/*page6*/
.flexslider .slides > li {
    height: 620px;
}
/*jump*/
.black{
    background-color: rgba(0,0,0,.8);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 400;
    display: none;
    overflow: hidden;
}
.jumpclose, .jumpclose2{
    background: url(../images/close.png) center top no-repeat;
    width: 54px;    
    height: 54px;
    cursor: pointer;
    font-size: 0px; 
    position: absolute;
    left: 50%;
    z-index: 8;
}
.jumpclose{
    margin-left: 340px;
    margin-top: 138px;
}
.jumpclose2{
    margin-left: 390px;
    margin-top: 48px;
}
.jumpclose:hover, .jumpclose2:hover{
    animation: closemov .5s 1 linear;
}
@keyframes closemov{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
.tycmap, .tpemap{
    position: relative;
    margin: 0 auto;
    width: 800px;
    top: 200px;
    display: none;
}
.tycmap iframe, .tpemap iframe{
  width: 800px;
  height: 600px;
  border: 0;
}

.song iframe{
  width: 900px;
  height: 800px;
  border: 0;
}

.song{
  position: relative;
  margin: 0 auto;
  width: 900px;
  top: 60px;
  display: none;
}
.song h1{
  font-size: 30px;
  text-align: center;
  line-height: 2em;
  letter-spacing: 2px;
  color: #00fffc;
}
.songlist table{
  background: rgba(255, 255, 255, .9);
  border: 2px solid #fff;
  width: 100%;
  text-align: center;
  border-radius: 10px;
}
.songlist tr, .songlist td, .songlist th{
  padding: 5px;
  border: 2px solid #000;
}
.songlist th{
  background: rgba(255, 255, 0, .9);
}
.songlist th:first-of-type{
  border-top-left-radius: 10px;
}
.songlist th:last-of-type{
  border-top-right-radius: 10px;
}
.songlist td:nth-of-type(odd), .songlist th:nth-of-type(odd){
  width: 250px;
}
.songlist td:nth-of-type(even), .songlist th:nth-of-type(even){
  width: 50px;
}

/*footer*/
.footer{
    background-color: #FFF;
    width: 100%;
    min-width: 1200px;
    position: relative;
    margin: 0 auto;
    padding: 20px 0;
    font-size: 0;
    text-align: center; 
}
.flex-direction-nav a:before {
	color: rgba(255, 255, 255, 0.8);
}