/*外連字型*/

/*Noto+Sans|Open Sans*/
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/* CSS Document */
body{font-family:'Arial','Noto Sans TC';line-height:1.6;color:#FFF;font-weight:300;}

a{ font-size: 16px;}
a:hover{transition: all 0.7s}

/*wp*/
.btn-home{position:fixed;top:2%;left:2%;z-index:9999;width:30%;}
#wp{background:#000;padding-top:50px;}

.text{text-align:right;margin:0 5% 0 20%;padding-top:100px;margin-bottom:100px;}
.text img{width:100%}

.txt51{width:50%;float:right;margin-top:2%;margin-bottom:5%;}


/*footer*/

footer{background-color:#ff671f;color:#000;font-size:20px;padding:30px 0;
         width: 100%;left:0;bottom:0;position:absolute;}
footer .container{width:100%;}

footer.ft2{position:static;margin-top:100px;}

footer h4{margin:0;font-weight:200;font-size:30px;}
footer h6{margin:0;font-weight:200;font-size:15px;}

footer .CR{text-align:right;}
footer p{margin:0}
footer p>a{color:#000;padding:0 .5em;border-left:1px solid #000;font-size:20px;}
footer p>a:last-child{border-right: 1px solid #000;}
footer p>a:hover{color:#fff}

footer h4,footer p{margin-bottom:5px;}

/*loading bg*/
.loadingbg{background-image:url(../images/loading-bg.jpg);height:100%;position:relative;}
.loading-logo{width:50%;left:25%;position:absolute;
                    top:12%;
                    -webkit-mask-image: url(../images/mask.png);
                     -webkit-mask-size: auto;
                     -webkit-mask-repeat: no-repeat;
                      -webkit-mask-position:center center;
                      z-index: 99;
                    }

.loading-logo.loading{
    -webkit-mask-position:center -110%;
    animation-name: logoLoading;
    animation-duration: 3s;
    animation-fill-mode: forwards;
 }

 @keyframes logoLoading{
    from{}
    to{ -webkit-mask-position:center center;}
}


/*contents*/
#fp-nav{display:none;}

.tip{position:fixed;top:0;left:5%;z-index:9999}
.tip img{width:80px;}

.menu {position:fixed;bottom:150px;left:5%;z-index:9999}
.menu a{background-color:#8bc34a;border-radius:50%;text-align:center;margin-bottom:20px;
             display:block;width:80px;line-height:80px;height:80px;}
.menu a:hover{background-color:#f06292}
.menu a img{width:60%;}

a.btnTop img{transform:rotate(180deg);}


/*full page*/
.section  {background-color:#000;}

.section .bg-section{width:100%;height:50%;position:absolute;top:0;left: 0;overflow:hidden;}
#bg0{height:100%;}

.section .bg-section .bg{height:100%;}

#section0 .bg{background-image:url(../images/bg1.jpg);}
#section1 .bg{background-image:url(../images/bg2.jpg);}
#section2 .bg{background-image:url(../images/bg3.jpg);}
#section3 .bg{background-image:url(../images/bg4.jpg);}
#section4 .bg{background-image:url(../images/bg5.jpg);}
#section5 .bg{background-image:url(../images/bg6.jpg);}

.intro{width:100%;height:50%;position:absolute;bottom:0;left: 0;text-align:center;}
.intro aside{position:absolute;text-align:center;}
.intro h1{font-size:50px;font-weight:200;line-height:1.5;margin:2em auto 0;display:inline-block;text-align:left;}
.intro .btnMore{color:#fff;background:#ea5e00;padding:.5em;display:inline-block;font-size:35px;margin-top:1em;}
.intro .title{right:5px;bottom:5%;width:30%;}
.intro .title img{width:100%;}

.intro0{height:100%;}

.img01{right:1%;top:5%;width:75%;}
.img01 img{width:100%;}

.img02{right:5%;bottom:5%;width:70%;}
.img02 img{width:100%;}

.intro .title.img51{bottom:150px;right:5%;}

/*fullpageLibrary*/
#fp-nav ul li a span, .fp-slidesNav ul li a span{background:#ff671f}

/************************** Movie *******************************/

.bg-section aside{opacity:0;transform:translateX(-50%)}
/*
.bg-section:before{content: "";width:100%;height:100%;background:#000;position:absolute;z-index:10}
*/

.bg-section.animated aside{
    animation-name: fadeIn;
    animation-duration: 10s;
    animation-delay: 0;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    /*animation-iteration-count:infinite;*/
}

/*
.bg-section.animated:before{
    animation-name: bgfadeOut;
    animation-duration: .5s;
    animation-delay: 0;
    animation-fill-mode: forwards;
    /*animation-timing-function:cubic-bezier(0.165, 0.84, 0.44, 1);
}
*/



@keyframes fadeIn{
    from{}
    4%{opacity:.9;transform:translateX(0)}
    to{transform:scale(1.1);opacity:1;}
}

@keyframes bgfadeOut{
    from{}
    to{transform:translateX(100%);}
}

@keyframes bgfadeOutRight{
    from{}
    to{transform:translateX(-100%);}
}

@keyframes introfadeIn{
    from{opacity:0;}
    to{opacity:1;transform:translateX(0);}

}

.section .intro aside {opacity:0;transform:translateX(150px);
                                animation-fill-mode: forwards;}

.section .intro h1 {opacity:0;transform:translateX(-150px);
                             animation-fill-mode: forwards;}

.section.animated .intro h1{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .3s;
}

.section.animated .img01{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .3s;
  
}

.section.animated .img02{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .5s;
}


.section.animated .img11{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .3s;
  
}

.section.animated .img21{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .5s;
}

.section.animated .img31{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .3s;
  
}


.section.animated .img41{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .3s;
  
}


.section.animated .img51{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .3s;
  
}

.section.animated .img52{
    animation-name: introfadeIn;
    animation-duration: .7s;
    animation-delay: .5s;
}