@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

*{
	margin: 0;
	padding: 0;
	list-style:none;

}

html,
body {
    height: 100% !important;
    margin: 0;
    padding: 0
}


.banner-wrapper{
	width: 100%;
	max-width: 1400px;
	height:510px;
	margin:0 auto;
	position: relative;
}

.banner-wrapper *{
	/*font-family: 'Noto Sans TC', sans-serif;*/
	font-family:'Microsoft jhenghei', Arial;
	font-weight: bold;
}

.box{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.box::after{
	content: '';
	width: 100%;
	height: 64px;
	display: inline-block;
	vertical-align: bottom;
	background: url(../images/banner-bg-shadow.png) no-repeat bottom;
	background-size: contain;

	position: absolute;
	bottom: -23px;
	left:0;
}

.banner-bg{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	width: 574px;
	height: 485px;
}

.banner-bg div{
	opacity: 0;
	filter: alpha(opacity=0);
	position: absolute;
	top: 0;
	left:auto;
	right: auto;
}

.banner-bg div:nth-child(1) {
	animation: round-01 2s;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;

	-webkit-animation: round-01 2s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 0.2s;

	z-index: 1;
}

.banner-bg div:nth-child(2) {
    -webkit-animation: round-02 2s;
	animation: round-02 2s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	-webkit-animation-delay: 1.5s;
	        animation-delay: 1.5s;
	z-index: -1;
}

.banner-bg img{
	max-width: none !important;
	width: auto !important;
}

@keyframes round-01 {
    0% {
    	right: -100%;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    70% {
    	right: 50%;
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(-30px);
    }
    
    100% {
    	right: 50%;
        opacity: .8;
        filter: alpha(opacity=80);
        transform: translateX(60px);
    }
}

@-webkit-keyframes round-01 {
    0% {
    	right: -100%;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    70% {
    	right: 50%;
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(-30px);
    }
    
    100% {
    	right: 50%;
        opacity: .8;
        filter: alpha(opacity=80);
        transform: translateX(60px);
    }
}

@keyframes round-02 {
    0% {
    	right: -100%;
        opacity: 0;
        filter: alpha(opacity=0);
    }
    
	70% {
    	right: 3%;
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(100px);
    }

    100% {
    	right: 3%;
        opacity: .8;
        filter: alpha(opacity=80);
        transform: translateX(120px);
    }
}

@-webkit-keyframes round-02 {
    0% {
    	right: -100%;
        opacity: 0;
        filter: alpha(opacity=0);
    }
    
	70% {
    	right: 3%;
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateX(100px);
    }

    100% {
    	right: 3%;
        opacity: .8;
        filter: alpha(opacity=80);
        transform: translateX(120px);
    }
}

.banner-carousel{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left:auto;
	right: 5px;
	
	overflow: hidden;
	transform: translateY(-10px);
	-webkit-transform: translateY(-10px);
}

.banner-carousel div{
	position: absolute;
	width: auto;
	top: 0;
	left:auto;
	right: 0;
	text-align: right;
	opacity: 0;
	filter: alpha(opacity=0);

	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
	-webkit-animation: carouse-img 15s linear infinite;
	        animation: carouse-img 15s linear infinite;
}

.banner-carousel div img{
	display: inline-block;
}

.banner-carousel div:nth-child(1) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.banner-carousel div:nth-child(3) {
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
}

.banner-carousel div:nth-child(2) {
	-webkit-animation: carouse-img-02 15s linear infinite;
    animation: carouse-img-02 15s linear infinite;
    -webkit-animation-delay: 6s;
            animation-delay: 6s;
}

@keyframes carouse-img {
    15% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(0px);
    }
    23%,45% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateY(30px);
    }

    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(30px);
    }
}

@keyframes carouse-img-02{
	 15% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(150px);
    }
    23%,45% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateY(100px);
    }

    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(100px);
    }
}

@-webkit-keyframes carouse-img {
    15% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(0px);
    }
    23%,45% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateY(30px);
    }

    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(30px);
    }
}

@-webkit-keyframes carouse-img-02{
	 15% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(55px);
    }
    23%,45% {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translateY(20px);
    }

    50% {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: translateY(20px);
    }
}

.banner-carousel-img01,
.banner-carousel-img02{
    display: block;
    overflow: hidden;
    position: absolute;
    z-index: 5;
    top: 0px;
    left: 0px;
}

.banner-carousel-img02{
	z-index: 4;
    top: 50px;
}

.banner-text{
	position:absolute;
	top:20px;
	bottom:0;
	left:0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	z-index: 2;
}

.banner-text-list{
	width: 100%;
	max-width: 400px;
	height: 320px;
	line-height: 160px;
	position: absolute;
	top: 50%;
	left: 5%;
	-webkit-transform: translate3d(0%,-50%,0);
	transform: translate3d(0%,-50%,0);

	font-size: 26px;
	color: #36a3d5;
	font-weight: bold;
	font-family: '微軟正黑體';
	overflow: hidden;
}

.banner-text-list .fade-Up,
.banner-text-list .fade-Up.right{
	opacity: 0;
	-webkit-animation-duration: 3s;
	        animation-duration: 3s;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-iteration-count: linear;
	        animation-iteration-count: linear;
	-webkit-animation-timing-function:cubic-bezier(.42,.18,.69,.79);
	        animation-timing-function:cubic-bezier(.42,.18,.69,.79);
}

.banner-text-list .fade-Up{
	-webkit-animation-name: fadeUptoDown;
			animation-name: fadeUptoDown;
}

@keyframes fadeUptoDown{
	0%{ opacity: 0; transform: translateX(10px) translateY(50px); }
	50%,100%{ opacity: 1; transform: translateX(10px) translateY(-15px); }
}

@-webkit-keyframes fadeUptoDown{
	0%{ opacity: 0; transform: translateX(10px) translateY(50px); }
	50%,100%{ opacity: 1; transform: translateX(10px) translateY(-15px); }
}

.banner-text-list .fade-Up.right{
	text-align: right;
	-webkit-animation-name: fadeUptoDownright;
	animation-name: fadeUptoDownright;
	-webkit-animation-delay: 5s;
	        animation-delay: 5s;
}

@keyframes fadeUptoDownright{
	0%{ opacity: 0; transform: translateX(-45px) translateY(0); }
	50%,100%{ opacity: 1; transform: translateX(-45px) translateY(-55px); }
}

@-webkit-keyframes fadeUptoDownright{
	0%{ opacity: 0; transform: translateX(-45px) translateY(0); }
	50%,100%{ opacity: 1; transform: translateX(-45px) translateY(-55px); }
}

.fade-In-text{
	position: absolute;
	top: 50px;
	left: 50px;
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 45px;
	color: #034c7e;
}

.masked{
	position: relative;
	width: 100%;
	height: 120px;
	max-width: 300px;
	overflow: hidden;
}

.masked span{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;

	font-size: 40px;
	font-weight: bold;

	animation-duration: 2s;
	animation-iteration-count: linear;
	animation-fill-mode: forwards;
	animation-timing-function:cubic-bezier(.15,.5,.81,.91);
	opacity: 0;
}

.first-word{
	-webkit-animation-name: animate-word-first;
	animation-name: animate-word-first;
	-webkit-animation-delay: .1s;
	        animation-delay: .1s;
}

.second-word{
	-webkit-animation-name: animate-word-second;
	animation-name: animate-word-second;
	-webkit-animation-delay: .5s;
	        animation-delay: .5s;
}

.fiveth-word{
	-webkit-animation-name: animate-word-fiveth;
	animation-name: animate-word-fiveth;
	-webkit-animation-delay: 1.5s;
	        animation-delay: 1.5s;
}

.sixth-word{
	-webkit-animation-name: animate-word-sixth;
	animation-name: animate-word-sixth;
	-webkit-animation-delay: 2s;
	        animation-delay: 2s;
}

.third-word{
	-webkit-animation-name: animate-word-third;
	animation-name: animate-word-third;
	-webkit-animation-delay: 3s;
	        animation-delay: 3s;
}

.fourth-word{
	-webkit-animation-name: animate-word-fourth;
	animation-name: animate-word-fourth;
	-webkit-animation-delay: 3.5s;
	        animation-delay: 3.5s;
}

@keyframes animate-word-first{
	0%{
		opacity: 0;
		transform: translateX(40px);
	}

	50%,100%{
		opacity:1;
		transform: translateX(0px);
	}
}

@keyframes animate-word-second{
	0%{
		opacity: 0;
		transform: translateX(0px);
	}

	50%,100%{
		opacity:1;
		transform: translateX(35px);
	}
}

@keyframes animate-word-third{
	0%{
		opacity: 0;
		transform: translateX(100px);
	}

	50%,100%{
		opacity:1;
		transform: translateX(70px);
	}
}

@keyframes animate-word-fourth{
	0%{
		opacity: 0;
		transform: translateX(75px);
	}

	50%,100%{
		opacity:1;
		transform: translateX(106px);
	}
}

@keyframes animate-word-fiveth{
	0%{
		opacity: 0;
		transform: translateX(165px);
	}

	50%,100%{
		opacity:1;
		transform: translateX(141px);
	}
}

@keyframes animate-word-sixth{
	0%{
		opacity: 0;
		transform: translateX(140px);
	}

	50%,100%{
		opacity:1;
		transform: translateX(175px);
	}
}



.masked01{
     background:url(http://www.zhangxinxu.com/study/image/paint.png);

    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text;
    -webkit-animation-name:masked-animation;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
    color: #121417;
}

@-webkit-keyframes masked-animation {
    0% {background-position:left bottom;}
    100% {background-position:right bottom;}
}

@keyframes masked-animation {
    0% {background-position:left bottom;}
    100% {background-position:right bottom;}
}

@media screen and (min-width:801px) and (max-width: 1100px) {
	.banner-text-list{ left: 1% }
}

@media screen and (max-width:800px){

	.box::after{
		bottom: 0;
		background-size: cover
	}
	
	.banner-wrapper{ height:70vw }

	.banner-text-list {
		height: 240px;
		line-height: 120px;
		font-size: 150%;
		text-align: center !important;
		top: 0;
		left: 50%;
		transform: translate3d(-50%, 0%, 0);
	}

	.fade-In-text { transform: translateX(-32%); top: 38px; left: 50% }

	.banner-text-list .fade-Up.right{ text-align: center; }
	
	.banner-carousel div img{
		width: 55%;
		max-width:100%;
	}

	.banner-text{
		top: 0px
	}

	.banner-carousel div{
	    width: 100%;
	    right: auto;
	    text-align: center;
	}

	.banner-carousel { top: 25%; }

	@keyframes fadeUptoDownright{
		0%{ opacity: 0; transform: translateX(0px) translateY(0); }
		50%,100%{ opacity: 1; transform: translateX(0px) translateY(-30px); }
	}

	@-webkit-keyframes fadeUptoDownright{
		0%{ opacity: 0; transform: translateX(0px) translateY(0); }
		50%,100%{ opacity: 1; transform: translateX(0px) translateY(-30px); }
	}
}

@media screen and (max-width:640px){

	.banner-wrapper{ height: 95vw; margin-bottom: -50px; }

	.banner-bg{  }

	.banner-bg img { width: auto !important; height: 35vh; }

	@keyframes round-01 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }

	    70% {
	    	right: 50%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-30px);
	    }
	    
	    100% {
	    	right: 50%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(60px);
	    }
	}

	@-webkit-keyframes round-01 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }

	    70% {
	    	right: 50%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-30px);
	    }
	    
	    100% {
	    	right: 50%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(60px);
	    }
	}

	@keyframes round-02 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }
	    
		70% {
	    	right: 3%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-15px);
	    }

	    100% {
	    	right: 3%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(-10px);
	    }
	}

	@-webkit-keyframes round-02 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }
	    
		70% {
	    	right: 3%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-15px);
	    }

	    100% {
	    	right: 3%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(-10px);
	    }
	}

	.fade-In-text { transform: translateX(-31%); }

	.banner-carousel { top: 30%; }

	.banner-carousel div img{ width: 60%; max-width:100%; }

	.masked span{
		top: -25px
	}

	@keyframes fadeUptoDown{
		0%{ opacity: 0; transform: translateX(0px) translateY(50px); }
		50%,100%{ opacity: 1; transform: translateX(0px) translateY(-30px); }
	}

	@-webkit-keyframes fadeUptoDown{
		0%{ opacity: 0; transform: translateX(0px) translateY(50px); }
		50%,100%{ opacity: 1; transform: translateX(0px) translateY(-30px); }
	}

	@keyframes fadeUptoDownright{
		0%{ opacity: 0; transform: translateX(0px) translateY(0); }
		50%,100%{ opacity: 1; transform: translateX(0px) translateY(-60px); }
	}

	@-webkit-keyframes fadeUptoDownright{
		0%{ opacity: 0; transform: translateX(0px) translateY(0); }
		50%,100%{ opacity: 1; transform: translateX(0px) translateY(-60px); }
	}

	@keyframes carouse-img-02{
		 15% {
	        opacity: 0;
	        filter: alpha(opacity=0);
	        transform: translateY(0px);
	    }
	    23%,45% {
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateY(65px);
	    }

	    50% {
	        opacity: 0;
	        filter: alpha(opacity=0);
	        transform: translateY(65px);
	    }
	}

	@-webkit-keyframes carouse-img-02{
		 15% {
	        opacity: 0;
	        filter: alpha(opacity=0);
	        transform: translateY(0px);
	    }
	    23%,45% {
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateY(65px);
	    }

	    50% {
	        opacity: 0;
	        filter: alpha(opacity=0);
	        transform: translateY(65px);
	    }
	}

	.banner-bg{
		width: 100%;
	}

	
}

@media screen and (max-width:450px){

	.banner-bg img { height: 30vh; }

	@keyframes round-01 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }

	    70% {
	    	right: 50%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-30px);
	    }
	    
	    100% {
	    	right: 50%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(50px);
	    }
	}

	@-webkit-keyframes round-01 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }

	    70% {
	    	right: 50%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-30px);
	    }
	    
	    100% {
	    	right: 50%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(50px);
	    }
	}

	@keyframes round-02 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }
	    
		70% {
	    	right: 3%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-15px);
	    }

	    100% {
	    	right: 3%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(10px);
	    }
	}

	@-webkit-keyframes round-02 {
	    0% {
	    	right: -100%;
	        opacity: 0;
	        filter: alpha(opacity=0);
	    }
	    
		70% {
	    	right: 3%;
	        opacity: 1;
	        filter: alpha(opacity=100);
	        transform: translateX(-15px);
	    }

	    100% {
	    	right: 3%;
	        opacity: .8;
	        filter: alpha(opacity=80);
	        transform: translateX(10px);
	    }
	}
}