@charset "utf-8";

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

/* CSS Document */
.wrap {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

*:focus{
	outline-style: none;
}

body{
	position: relative;
	font-family: 'Noto Sans TC', 'Microsoft JhengHei' ,sans-serif;
	background-color: #000;
	font-size: 14px;
	color: #FFF;
	background: radial-gradient(ellipse at bottom, #130100 0%, #0
		00 100%);
}
@media screen and (max-width: 900px){
	body{
		font-size: 12px;
	}
}
@media screen and (max-width: 768px){
	body{
		font-size: 10px;
		background-image: url(../images/star.png);
		background-position: center center;
		background-repeat: no-repeat;
	}
}
@media screen and (max-width: 660px){
	body{
		font-size: 8px;
	}
}
@media screen and (max-width: 500px){
	body{

	}
}

header{
	/*padding: 20px;*/
	padding-bottom: 0;
	position: relative;
	/*border-bottom: 1px solid #dedede;*/
	box-shadow: rgba(0,0,0,.1) 0 2px 3px;
	background-color: #fff;
	z-index: 99;
}

header .myv-logo{
	display: inline-block;
}

header .wrap{
	padding: 0.7142em;
	position: relative;
	box-sizing: border-box;
}

header h2 img{
	height: 50px;
	width: auto;
}

header .social{
	position: absolute;
	right: 10px;
	top: 14px;
}

header .social a{
	display: inline-block;
	position: relative;
	color: #121212;
	margin-right: 10px;
}

header .social a span{
	line-height: 42px;
	display: inline-block;
	vertical-align: top;
}

header .social a img{
	display: inline-block;
	width: 42px;
}

@media screen and (max-width: 768px){
	header .social{
		top: 18px;
	}
	header .social a img{
		width: 36px;
	}
	header .social a span{
		line-height: 36px;
	}
}

@media screen and (max-width: 440px){
	header .social{
		/*top: 22px;*/
	}
	header .social a{
		margin-right: 5px;
	}
	header .social a img{
		width: 26px;
	}
	header .social a span{
		line-height: 26px;
		font-size: 13px;
	}	
	header h2 img{
		height: 38px;
	}
}

img {
	display: block;
	width: 100%;
	height: auto;
}

.separator{
	margin: 2em 0;
}

.main-text{
	position: relative;
}

.main-text .sw-logo,
.main-text .main-title-01,
.main-text .main-title-02,
.main-text .time{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
}

.main-text .sw-logo{
	opacity: 1;
}

.films h2{
	color: #FFF;
	text-align: center;
	font-size: 3.1142em;
	line-height: 1.3;
	margin: 0 1%;
}

.films h2 .red{
	color: #FC0D1B;
}

@media screen and (max-width: 520px){
	.films h2{
		font-size: 2.7em;
	}
}

@media screen and (max-width: 435px){
	.films h2{
		font-size: 2.3em;
	}
}

@media screen and (max-width: 370px){
	.films h2{
		font-size: 2em;
	}
}

@media screen and (max-width: 330px){
	.films h2{
		font-size: 1.9em;
	}
}

.films h3{
	color: #FFF;
	text-align: center;
	font-size: 3.1428em;
	line-height: 1.3;
	margin: 0 2%;
}

.films h3 .grey{
	color: #ADADAD;
}

@media screen and (max-width: 430px){
	.films h3{
		font-size: 2.7em;
	}
}

@media screen and (max-width: 370px){
	.films h3{
		font-size: 2.3em;
	}
}

.attend{
	display: block;
	margin: 1.4285em auto .5em auto;
	width: 30em;
	height: 9em;
	background-image: url(../images/attend_on.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: transparent;
	-webkit-transition: opacity .2s ease-out;
	   -moz-transition: opacity .2s ease-out;
	    -ms-transition: opacity .2s ease-out;
	     -o-transition: opacity .2s ease-out;
	        transition: opacity .2s ease-out;
	opacity: 0.8;
}

.attend:hover{
	opacity: 1;
}

@media screen and (max-width: 660px){
	.attend{
		opacity: 1;
	}
}
@media screen and (max-width: 370px){
	.attend{
		width: 21em;
		height: 6.3em;
	}
}

.films .note{
	display: block;
	font-size: 2.5em;
	text-align: center;
	margin-bottom: 1.2em;
}

.video h2{
	color: #FFF;
	text-align: center;
	font-size: 3.4285em;
	line-height: 1.3;
	margin: 0;
	margin-bottom: 0.3571em;	
}

.video iframe {
	width: 96%;
	margin: 0 2%;
	z-index: 100;
	position: relative;
}

footer{
	color: #FFF;
	line-height: 1.5;
}

footer .notice{
	font-size: 2.5em;
	display: block;
	text-align: center;
}

footer p{
	font-size: 1.8em;
	padding: 1.4285em;
	padding-top: 0.7142em;
}

.slider-wrapper{
	margin-top: 1.4285em;
	margin-bottom: 3.5714em;
}

.slider-wrapper .title{
	text-align: center;
	margin-top: 0.7142em;
	line-height: 1.2;
	font-size: 18px;
}

@media screen and (max-width: 660px){
	.slider-wrapper .title{
		font-size: 15px;
	}
}

.slider-wrapper img{
	border: 2px solid #fff;
}

.copyright{
	text-align: center;
	font-size: 1.2em;
	padding-top: 0;
}

.owl-nav{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
}

.owl-carousel .owl-nav .owl-prev{
	position: absolute;
	top: 50%;
	transform: translate(0 , -40px);
	left: -47px;
	width: 4.7857em;
	height: 5.7857em;
	background-image: url(../images/move_bottun_R_on.png);
	-webkit-background-size: 100% 100%;
	     -o-background-size: 100% 100%;
	        background-size: 100% 100%;
	opacity: .8;
	-webkit-transition: opacity .1s ease-out;
	   -moz-transition: opacity .1s ease-out;
	    -ms-transition: opacity .1s ease-out;
	     -o-transition: opacity .1s ease-out;
	        transition: opacity .1s ease-out;
	/*background-position: center -81px;*/
}
.owl-carousel .owl-nav .owl-prev:hover{
	/*background-position: center 0;*/
	opacity: 1;
}

.owl-carousel .owl-nav .owl-next{
	position: absolute;
	top: 50%;
	transform: translate(0 , -40px);
	right: -47px;
	width: 4.7857em;
	height: 5.7857em;
	background-image: url(../images/move_bottun_L_on.png);
	-webkit-background-size: 100% 100%;
	     -o-background-size: 100% 100%;
	        background-size: 100% 100%;	
	opacity: .8;
	-webkit-transition: opacity .1s ease-out;
	   -moz-transition: opacity .1s ease-out;
	    -ms-transition: opacity .1s ease-out;
	     -o-transition: opacity .1s ease-out;
	        transition: opacity .1s ease-out;
}
.owl-carousel .owl-nav .owl-next:hover{
	opacity: 1;
}

@media screen and (max-width: 900px){
	.owl-carousel .owl-nav .owl-prev{
		left: 0;
	}
	.owl-carousel .owl-nav .owl-next{
		right: 0;
	}
}

@media screen and (max-width: 660px){
	.owl-carousel .owl-nav .owl-next,
	.owl-carousel .owl-nav .owl-prev{
		opacity: 1;
	}
}

@media screen and (max-width: 375px){
	.owl-carousel .owl-nav .owl-next,
	.owl-carousel .owl-nav .owl-prev{
		width: 3.3499em;
		height: 4.0499em;
	}
}

@media screen and (max-width: 660px){
	.element-animation{
	  animation: animationFrames linear 2s;
	  animation-iteration-count: infinite;
	  -webkit-animation: animationFrames linear 2s;
	  -webkit-animation-iteration-count: infinite;
	  -webkit-transform-origin: 50% 50%;
	  -moz-animation: animationFrames linear 2s;
	  -moz-animation-iteration-count: infinite;
	  -moz-transform-origin: 50% 50%;
	  -o-animation: animationFrames linear 2s;
	  -o-animation-iteration-count: infinite;
	  -o-transform-origin: 50% 50%;
	  -ms-animation: animationFrames linear 2s;
	  -ms-animation-iteration-count: infinite;
	  -ms-transform-origin: 50% 50%;
	}
}


@keyframes animationFrames{
  0% {
    opacity:0.76;
  }
  5% {
    opacity:1;
  }
  7% {
    opacity:0.83;
  }
  9% {
    opacity:1;
  }
  11% {
    opacity:0.83;
  }
  14% {
    opacity:0.76;
  }
  16% {
    opacity:0.76;
  }
  19% {
    opacity:1;
  }
  21% {
  }
  23% {
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0.76;
  }
  5% {
    opacity:1;
  }
  7% {
    opacity:0.83;
  }
  9% {
    opacity:1;
  }
  11% {
    opacity:0.83;
  }
  14% {
    opacity:0.76;
  }
  16% {
    opacity:0.76;
  }
  19% {
    opacity:1;
  }
  21% {
  }
  23% {
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0.76;
  }
  5% {
    opacity:1;
  }
  7% {
    opacity:0.83;
  }
  9% {
    opacity:1;
  }
  11% {
    opacity:0.83;
  }
  14% {
    opacity:0.76;
  }
  16% {
    opacity:0.76;
  }
  19% {
    opacity:1;
  }
  21% {
  }
  23% {
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0.76;
  }
  5% {
    opacity:1;
  }
  7% {
    opacity:0.83;
  }
  9% {
    opacity:1;
  }
  11% {
    opacity:0.83;
  }
  14% {
    opacity:0.76;
  }
  16% {
    opacity:0.76;
  }
  19% {
    opacity:1;
  }
  21% {
  }
  23% {
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0.76;
  }
  5% {
    opacity:1;
  }
  7% {
    opacity:0.83;
  }
  9% {
    opacity:1;
  }
  11% {
    opacity:0.83;
  }
  14% {
    opacity:0.76;
  }
  16% {
    opacity:0.76;
  }
  19% {
    opacity:1;
  }
  21% {
  }
  23% {
  }
  100% {
    opacity:1;
  }
}