/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); cwTeXYen*/
@import url(//fonts.googleapis.com/earlyaccess/cwtexyen.css);
.setop { display: none }
/*.footer * { vertical-align: baseline; }*/

body { overflow-y: hidden; }

nav.mainButton { width: 100%; background:#000 }
nav.mainButton ul { text-align: center; }
nav.mainButton ul li { display: inline-block; margin: 10px 0; padding: 0px 20px; font: 100 16px/16px "cwTeXYen"; color: #fff ; cursor: pointer; border-right: 1px solid #fff;
transition: .5s; -webkit-transition: .5s; }
nav.mainButton ul li:hover { color: #fff200 }
nav.mainButton ul li img { vertical-align: top }

.contentBase { position: relative; width: 100%;height: 100vh; white-space:nowrap; overflow: hidden;overflow-y: hidden; overflow-x:hidden;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
.contentBase .contentInner { position:absolute; top:0; left:0; width: 100%; z-index: 10;  width:auto; border-radius: 0; }
.contentBase .contentInner .contentBox { position: relative; display: inline-block; margin:0;padding:0; width: 500px; height: 100vh; text-align: center;
	transition: .5s;-webkit-transition: .5s; letter-spacing: normal; border-right: 1px solid #ddd;}
.contentBase .contentInner .contentBox:hover { transform: scale(1.02); background: #eee } 


.contentBase .contentInner .contentBox .content { margin: 0 auto 0 auto; width: 80% }
.contentBase .contentInner .contentBox.smallType .content { margin-top: 30% }

.contentBase .contentInner .contentBox.header { background: url(../images/header_bg.jpg) #faec29 top center no-repeat; background-size:  100% }
.contentBase .contentInner .contentBox.header .content { text-align: right; }
.contentBase .contentInner .contentBox.header .video { display: inline-block; margin-top: 35%; width: 100%; text-align: left; }
.contentBase .contentInner .contentBox.header .video iframe { display: inline-block; }

.contentBase .contentInner .contentBox p.num { margin: 0 auto 20px auto; font: 200 50px/50px "cwTeXYen"; color: #bbb;vertical-align: bottom; }
.contentBase .contentInner .contentBox p.num small { font: 100 12px/12px "cwTeXYen"; letter-spacing: 2px; vertical-align: baseline; }

.contentBase .contentInner .contentBox h2 { margin-bottom: 0px;  font: 500 50px/50px "arial","cwTeXYen"; text-align: center; color: #000;white-space:normal; }
.contentBase .contentInner .contentBox.smallType h2 { font-size: 23px; }

.contentBase .contentInner .contentBox h3 { margin-bottom: 5px;  font: 500 28px/30px "arial","cwTeXYen"; text-align: center; color: #000 ;white-space:normal;}
.contentBase .contentInner .contentBox.smallType h3 { font-size: 20px; }

.contentBase .contentInner .contentBox p.small,
.contentBase .contentInner .contentBox p.mid {margin-bottom: 12px; font: 500 20px/24px "cwTeXYen"; color: #333; text-align: left;white-space:normal;}
.contentBase .contentInner .contentBox p.small { text-align: center; }
.contentBase .contentInner .contentBox.smallType p.small,
.contentBase .contentInner .contentBox.smallType p.mid { font-size: 18px; line-height: 24px }


.blackCover .cover { position: absolute; top:0; left:0; padding: 40% 0 0 0; width: 100%; height: 100%; 
font: 500 20px/24px "cwTeXYen"; color: #fff; text-align: center;white-space:normal; background: rgba(0,0,0,0.5); z-index: 100; }

.blackCover .content {filter: grayscale(100%) blur(3px); -webkit-filter: grayscale(100%) blur(3px);-moz-filter: grayscale(100%) blur(3px);-ms-filter: grayscale(100%) blur(3px); }

.contentBase .contentInner .contentBox .photo { margin: 0 auto 10px auto; width: 100%; }
.contentBase .contentInner .contentBox .photo img { width: 100%; }

.contentBase .contentInner .contentBox .button { display: inline-block; padding: 5px 20px; border-radius: 99em; transition: .5s; -webkit-transition: .5s; background: #8004e0 }
.contentBase .contentInner .contentBox .button:hover { background:#000  }
.contentBase .contentInner .contentBox .button a { font: 100 16px/16px "cwTeXYen"; color: #fff; letter-spacing: 1px; }


.scrollButton { position: fixed; top:calc(50% - 13px); width: 115px; height: 26px;  background: rgba(0,0,0,0.8); 
	cursor: pointer; transition: .5s;-webkit-transition: .5s;  z-index: 20 }
.scrollButton:hover { transform: translateY(-5px); }
.scrollButton.right { right: 0; padding: 5px 10px 5px 20px; border-radius: 99em 0 0 99em;}
.scrollButton.left { left: 0 ; padding: 5px 20px 5px 10px; border-radius: 0 99em 99em 0;}
.scrollButton.left img { transform: scaleX(-1); }

.moHeader { display: none; width: 100%; }


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


body { overflow-y: auto; }
nav.mainButton { position: sticky; position: -webkit-sticky; top:0; z-index: 10; width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
nav.mainButton ul {position:relative; z-index: 10; padding: 0 0px; white-space:nowrap; width:auto; }

.contentBase .contentInner .contentBox.header .content { margin: 0 auto 0 auto; width: 100% }
.contentBase .contentInner .contentBox.header .video { margin-top: 0%; }
.moHeader { display: block;}

.contentBase { position: relative; width: 100%;height:auto; }
.contentBase .contentInner { position:static; top:0; left:0; width: 100%; z-index: 10;  width:auto; border-radius: 0; }
.contentBase .contentInner .contentBox { display: block; margin-bottom:10%;padding-bottom: 10%; width: 100%; height: auto; text-align: center;
	transition: .5s;-webkit-transition: .5s; letter-spacing: normal; border-right: none; border-bottom: 1px solid #ddd;}
.contentBase .contentInner .contentBox:hover { transform: scale(1.02); background: #eee } 

.contentBase .contentInner .contentBox.header { padding-bottom: 0;}

.contentBase .contentInner .contentBox h2 {  font: 500 24px/30px "arial","cwTeXYen";  }

.scrollButton { display: none }



}