@charset "utf-8";

body {
    min-width: 1000px;
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
    font-family: "微軟正黑體", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #fff;
}

body,
html {
    width: 100%;
    background: #000;
}

::selection {
	background: #633c66;
	color: #c4a4c0;
}

::-moz-selection {
	background: #633c66;
	color: #c4a4c0;
}

p {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a:hover,
a:focus,
a:active,
a:visited {
    text-decoration: none;
}
.wrapper {
    min-width: 1000px;
    overflow: hidden;
}
.open_pop {
    position: fixed;
    bottom: 50px;
    right: 50px;
    cursor: pointer;
    z-index: 11;
    display: block;
    width: 50px;
    height: 50px;
    transform: scaleY(-1);
}

.open_pop.close_pop {
    transform: scaleY(1);
}

/* mp3 */
.jp-audio .jp-controls {
    width: 100%;
}

.jp-play {
    width: 100%;
    height: 22px;
    background: url(../images/sidebtn_hover.png) no-repeat 50% -310px; 
    cursor: pointer;
}

.jp-pause {
    width: 100%;
    height: 22px;
    background: url(../images/sidebtn.png) no-repeat 50% -310px;
    cursor: pointer;
}

/* mp3 */

.btnBox {
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    z-index: 999;
    width: 860px;
    padding: 15px 0;
    margin: 0 auto;
    /* background: rgb(0, 0, 0, 0.7); */
}

.btnBox:before {
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.btnBox:after {
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    background: -o-linear-gradient(0deg, rgba(0, 0, 0, 0.7)50%, rgba(255, 255, 255, 0)100%);
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.btnBox .goHome {
    width: 26px;
    height: 24px;
    background: transparent url(../images/btn.png) no-repeat 0 0;
    display: block;
    left: 50%;
    margin-left: -13px;
    position: absolute;
    text-indent: -99999em;
    bottom: 25px;
}

.btnBox ul {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
}

.btnBox ul>li {
    display: inline-block;
    margin: 0 40px;
}

.btnBox ul>li>a {
    width: 198px;
    height: 58px;
    display: block;
    background: transparent url(../images/btn.png) 0 -82px no-repeat;
    text-indent: -99999em;
}

.btnBox ul>li:last-child a {
    background-position-y: -140px;
}

.open_pop:hover,
.btnBox ul>li>a:hover,
.btnBox .goHome:hover,
.movieArea .start:hover,
.movieArea .btnclose:hover,
.infoBtn:hover {
    filter: brightness(130%);
}

.div-gradient {
    background: linear-gradient(0deg, rgba(0, 0, 0, 1)50%, rgba(255, 255, 255, 0)100%);
    background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 1)50%, rgba(255, 255, 255, 0)100%);
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 1)50%, rgba(255, 255, 255, 0)100%);
    background: -o-linear-gradient(0deg, rgba(0, 0, 0, 1)50%, rgba(255, 255, 255, 0)100%);
}

.container-x {
    min-width: 1000px;
    width: 1200px;
    position: relative;
    margin: 0 auto;
}

.nav>li>a:focus,
.nav>li>a:hover {
    background-color: transparent;
}

.movieArea .btnclose {
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.open_pop,
.btnBox ul>li>a,
.sideBtn ul>li>a,
.btnBox .goHome,
.movieArea .start,
#tabiconList1 ul>li>a,
#tabiconList2 ul>li>a,
.infoBtn {
    -moz-transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.sideBtn {
    position: fixed;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 999;
}

.sideBtn ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sideBtn ul>li {
    margin: 0 0 10px;
}

.sideBtn ul>li>a {
    background: transparent url(../images/sidebtn.png) no-repeat 50% 0;
    display: block;
    width: 210px;
    height: 62px;
    text-indent: -99999em;
    padding: 0;
}

.sideBtn ul>li>a:hover,
.sideBtn ul>li.active a {
    background: transparent url(../images/sidebtn_hover.png) no-repeat 50% 0;
}

.sideBtn ul>li:nth-child(2)>a,
.sideBtn ul>li:nth-child(2)>a:hover {
    background-position-y: -62px;
}

.sideBtn ul>li:nth-child(3)>a,
.sideBtn ul>li:nth-child(3)>a:hover {
    background-position-y: -124px;
}

.sideBtn ul>li:nth-child(4)>a,
.sideBtn ul>li:nth-child(4)>a:hover {
    background-position-y: -186px;
}

.sideBtn ul>li:nth-child(5)>a,
.sideBtn ul>li:nth-child(5)>a:hover {
    background-position-y: -248px;
}

.s0 {
    position: relative;
    height: 100vh;
}

.main_tit {
    position: absolute;
    left: 0;
    right: 0;
    width: 767px;
    margin: 0 auto;
    bottom: 200px;
    text-align: center;
    z-index: 7;
}

.date {
    text-align: right;
}

.fullscreen-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

.fullscreen-bg:after, .s0 .fullscreen-bg:before {
    position: absolute;
    content: '';
    background: rgba(0, 0, 0, .25) url(../images/ptn2.png) 50% 0 repeat;
    height: 100%;
    width: 100%;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    display: block;
}
.s0 .fullscreen-bg:before {
    background: url(../images/overlay_mask.png) 50% 0 no-repeat;
    background-size: cover;
    z-index: 1; 
}
.s0 .fullscreen-bg:after {
    background: url(../images/overlay.png) 50% 0 repeat; 
}
.youtubeArea iframe {
    border: 2px solid #c4a4c0;
}

.myVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tit {
    background: transparent url(../images/con_tit.png) no-repeat 50% 0;
    display: block;
    width: 367px;
    height: 57px;
    text-indent: -99999em;
    margin: 0 auto;
    position: relative;
    z-index: 88;
}

#s1 {
    background: url(../images/s1.jpg) no-repeat 50% 0;
    height: 1017px;
    position: relative;
    padding: 50px 0;
    z-index: 1;
}
#s1 .wm {
    width: 1543px;  
    right: 306px;
    left: auto;
    top: -51px;
    z-index: 3;
}
#s1 .emblem {
    width: 392px;
    position: absolute;
    z-index: 2;
    right: 65px;
    top: 47px;
}
#s1 .futureTit {
    position: absolute;
    left: 50%;
    top: 424px;
    z-index: 5;
    margin: 0;
    margin-left: -387px;
}
#s1 .con {
    position: absolute;
    left: 50%;
    top: 438px;
    z-index: 5;
    width: 456px;
    margin-left: 66px;
}
.downloadBtn {
    position: absolute;
    left: 50%;
    margin-left: -472px;
    top: 595px;
    width: 58px;
    height: 58px;
    background: transparent url(../images/btn.png) no-repeat 0 -24px;
    text-indent: -99999em;
    z-index: 99;
    animation: move 3s cubic-bezier(.4, 0, .2, 1) 2.2s infinite normal;
}

#s1 .content {
    position: absolute;
    right: 38px;
    top: -60px;
    z-index: 6;
    width: 1782px;
}

#s2,
#s4 {
    height: 100vh;
    position: relative;
    padding: 50px 0;
}

#s2 .tit {
    background-position-y: -61px;
}

/* video */
.movieArea {
    width: 100%;
    height: 100%;
}

.movieArea .youtubeArea {
    display: none;
    z-index: 1070;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 1000px;
    height: 563px;
}

.movieArea .start {
    background: transparent url(../images/btn.png) no-repeat 0 -256px;
    width: 163px;
    height: 163px;
    position: absolute;
    cursor: pointer;
    z-index: 1;
    left: 50%;
    top: 50%;
    margin-left: -81.5px;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.movieArea .btnclose {
    position: absolute;
    right: 0px;
    top: -75px;
    display: block;
    z-index: 1070;
}

.movieArea .btnclose:hover {
    transform: rotateZ(180deg);
}

.movieArea .btnclose button {
    display: block;
    text-indent: -99999em;
    width: 60px;
    height: 63px;
    background: transparent url(../images/btn.png) no-repeat 0 100%;
    cursor: pointer;
    padding: 0;
    border: none;
    outline: none;
}

.overlay {
    z-index: 1050;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, .75);
}

/* video */

#s3 {
    height: 950px;
    background: url(../images/s3.jpg) no-repeat 50% 0;
    padding: 50px 0;
    position: relative;
}

#s3 .tit {
    background-position-y: -118px;
}

.wm {
    width: 523px;
    position: absolute;
    left: 0;
    top: -30px;
    z-index: 5;
}

.storyTxt {
    width: 650px;
    height: 750px;
    background: transparent url(../images/txt_bg.png) repeat 0 0;
    border: 1px solid #c79edc;
    padding: 30px;
    position: absolute;
    right: 90px;
    top: 30px;
    z-index: 8;
}

.storyTxt:before {
    width: 30px;
    height: 30px;
    border: 1px solid #c79edc;
    content: '';
    position: absolute;
    left: -15px;
    top: -15px;
}

.storyTxt:after {
    width: 30px;
    height: 30px;
    border: 1px solid #c79edc;
    content: '';
    position: absolute;
    right: -15px;
    bottom: -15px;
}

.storyTxt p {
    color: #fff;
    font-size: 16px;
    margin: 0;
    overflow-y: scroll;
    height: 100%;
    padding-right: 15px;
    /* text-align: justify; */
}

.storyTxt p::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #6e5b75;
}

.storyTxt p::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}

.storyTxt p::-webkit-scrollbar-thumb {
    background-color: #a443db;
    border: 2px solid #c68ada;
    height: 10px;
}

#s4 .tit {
    background-position-y: -175px;
}

#s4 .movieArea .start {
    margin-top: -100px;
}

.tabBox {
    width: 652px;
    margin: 0 auto;
    position: absolute;
    bottom: 258px;
    left: 0;
    right: 0;
    z-index: 990;
}

.tabSelect {
    width: 145px;
    float: left;
}

.tabSelect ul {}

.tabSelect ul>li {
    display: block;
    margin: 0 0 5px;
}

.tabSelect ul>li>a {
    display: block;
    width: 100%;
    height: 35px;
    background: transparent url(../images/change.png) no-repeat 0 0;
}

.tabSelect ul>li:last-child>a {
    background-position-y: -35px;
}

.tabSelect ul>li:first-child.active a {
    background-position-y: -70px;
}

.tabSelect ul>li:last-child.active a {
    background-position-y: -105px;
}

#tabiconList1,
#tabiconList2 {
    position: absolute;
    margin: -2px 0 0;
    top: 50%;
    left: 170px;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

#tabiconList1 ul>li,
#tabiconList2 ul>li {
    display: block;
    float: left;
    margin: 0 3px;
}

#tabiconList1 ul>li>a,
#tabiconList2 ul>li>a {
    width: 73px;
    height: 73px;
    display: block;
    background: transparent url(../images/icon.png) no-repeat 0 0;
}

#tabiconList1 ul>li.active>a,
#tabiconList2 ul>li.active>a {
    background: transparent url(../images/icon_hover.png) no-repeat 0 0;
}

#tabiconList2 ul>li>a {
    background-position-y: -73px !important;
}

#tabiconList1 ul>li:nth-child(2)>a,
#tabiconList2 ul>li:nth-child(2)>a {
    background-position-x: -73px;
}

#tabiconList1 ul>li:nth-child(3)>a,
#tabiconList2 ul>li:nth-child(3)>a {
    background-position-x: -146px;
}

#tabiconList1 ul>li:nth-child(4)>a,
#tabiconList2 ul>li:nth-child(4)>a {
    background-position-x: -219px;
}

#tabiconList1 ul>li:nth-child(5)>a,
#tabiconList2 ul>li:nth-child(5)>a {
    background-position-x: -292px;
}

#tabiconList1 ul>li:nth-child(6)>a {
    background-position-x: -365px;
}

.tabContent {
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 991;
    height: 250px;
}

.tabContainer {
    width: 896px;
    margin: 0 auto;
}

.tabTxt {}

.tabTxt h1 {
    font-size: 24px;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    position: relative;
    color: #c4a4c0;
    padding: 15px 0 10px 42px;
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}

.tabTxt h1:before {
    position: relative;
    content: '';
    background: transparent url(../images/change.png) no-repeat 0 -140px;
    width: 68px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
    margin: -6px 6px 0;
}

.tabTxt h1.passive:before {
    position: relative;
    content: '';
    background: transparent url(../images/change.png) no-repeat 0 100%;
    width: 68px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
    margin: -6px 6px 0;
}

.tabTxtContent {
    padding: 15px 70px 0;
}

.tabTxtContent p {}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

#s5 {
    background: url(../images/s5_bg.jpg) repeat-x 0 0;
    height: 1067px;
    padding: 50px 0;
    position: relative;
}

#s5 .tit {
    background-position-y: -232px;
}

#s5 .wm {
    width: 703px;
    left: auto;
    right: 30px;
    top: 74px;
}

.eventBox {
    width: 648px;
    margin: 55px auto 0;
    z-index: 7;
    position: relative;
}

.eventBox ul>li {
    display: block;
    text-indent: -99999em;
    background: transparent url(../images/s5_txt.png) no-repeat 0 0;
    width: 100%;
    height: 135px;
    margin-bottom: 50px;
}

.eventBox ul>li:first-child,
.eventBox ul>li:last-child {
    margin-left: -123px;
}

.eventBox ul>li:nth-child(2) {
    margin-left: 30px;
    background-position-y: -163px;
}
.eventBox ul>li:last-child {
    background-position-y: -342px;
    height: 156px;
}
.info {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    height: 219px;
    padding: 30px 0;
    z-index: 2;
}

.infoTxt {
    width: 605px;
    margin: 0 auto;
    text-align: left;
    
}
.infoBtn {
    background: transparent url(../images/btn.png) no-repeat 0 -198px;
    width: 238px;
    height: 58px;
    text-indent: -99999em;
    display: block;
    margin: 17px auto 0;
}
.ft {
    background: #000;
    height: 80px;
    text-align: center;
}
@media screen and (max-width: 1199px) {
    .container-x {
        width: 100%;
    }
    .wm {
        left: -105px;
    }
    #s1 .futureTit {
        margin-left: -458px;
    }
    #s1 .con {
        margin-left: 0;
    }
    #s5 .wm { 
        display: none;
    }
    .downloadBtn {
        top: 0;
    }
}