@charset "utf-8";
@import url("reset.css");

*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;}

body, html{ height:100%;}
body{ margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei; -webkit-text-size-adjust: 100%; overflow-x:hidden;}
img{ border: 0;}
a{ text-decoration:none; outline: none; hlbr:expression(this.onFocus=this.blur());}
a:link a:visited a:active {text-decoration: none;}
a:hover {text-decoration: underline;}
ul, li{ list-style:none;}

p{ font-size:1.125em; color:#454545; line-height:30px; font-weight:500;}
p a{ color:#009fae;}
p a:hover{ text-decoration: underline;}

/* nav */
#head{float: left; width:100%; height:45px; filter:alpha(opacity=90); -moz-opacity:0.9; opacity: 0.9;  
background: url(../images/nav_bg.png) repeat-x; border-bottom:1px solid #333; position:relative; z-index:999;}
.sticky-wrapper{ width:100%;}
ul.navigation{ width:980px; margin:0 auto; text-align:center; color:#FFF;}
ul.navigation li { position: relative; float: left; line-height:25px;}
ul.navigation li a{ display: block; padding: 10px 25px 11px 25px; color: #FFF;}
ul.navigation li.fb-like { margin:7px 0 0 0;}			
ul.navigation > li > a:hover{ color: #bb8220; text-decoration:none;}	
ul.navigation ul{ display: none; float: left; position: absolute; left: 0; margin: 0;}
ul.navigation li:hover > ul{ display: block;}			
ul.navigation ul li { border-bottom: 1px solid #DDD;}
ul.navigation ul li:last-child { border-bottom: none;}
ul.navigation ul a { padding: 10px 20px; color: #FFF; background: #333; width:100px;}
ul.navigation ul a:hover { background: #bb8220; text-decoration:none;}			
.arrow-bottom { display: inline-block; margin-left: 5px; border-top: 4px solid #FFF; border-right: 4px solid transparent;				 border-left: 4px solid transparent; width: 1px; height: 1px;}
.arrow-right { display: inline-block; margin-left: 12px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #666; width: 1px; height: 1px; }
.arrow-bottom { display: inline-block; margin-left: 5px; border-top: 4px solid #FFF; border-right: 4px solid transparent;				 border-left: 4px solid transparent;	width: 1px; height: 1px;}
.arrow-right { display: inline-block; margin-left: 12px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #666; width: 1px; height: 1px;}

#intro{ width:100%; height:100%; margin: 0 auto; padding: 0; background: url(../images/firstBG.jpg) center center no-repeat;-moz-background-size: cover; background-size: cover; position:relative;}

.ind_wrap{ width:25%; height:100%; position:relative; top:0; left:0; background:url(../images/bg.png) repeat;}
.ind_wrap > ul{ list-style:none;}
.ind_wrap > ul > li{ position:absolute;  left:50%;}
.logo{ width:158px; top:40px; margin:0 0 0 -79px;}
.logo img{ width:100%;}
.tit1{ width:200px; top:130px; margin:0 0 0 -100px;}
.tit1 img{ width:100%;}
.tit2{ width:400px; top:170px; margin:0 0 0 -200px;}
.tit2 img{ width:100%;}
.video{ width:80%; margin:0 0 0 -40%; top:505px; left:50%;}
.video iframe{ width:100%; height:330px; border:10px solid #FFF; box-shadow: 2px 2px 5px #999; -webkit-box-shadow: 2px 2px 5px #999; -moz-box-shadow: 2px 2px 5px #999;}
.cover{ position:absolute; left:24%; top:630px; width:250px;}
.cover img{ width:100%;}


.floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s;animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;}
@keyframes floating {0% {transform: translateY(0%);} 40% {transform: translateY(8%);} 100% { transform: translateY(0%);}			}
@-webkit-keyframes floating {0% {-webkit-transform: translateY(0%);} 40% {-webkit-transform: translateY(8%);} 100% {-webkit-transform: translateY(0%);}}

.fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out;	-webkit-animation-timing-function: ease-in-out;	visibility: visible !important;	}
@keyframes fadeIn { 0%{ opacity: 0.0;} 100%{ opacity: 1;}}
@-webkit-keyframes fadeIn { 0%{ opacity: 0.0;} 100%{ opacity: 1;}}

/* top */
#toTop { display:none; text-decoration:none; position:fixed; bottom:20px; right:20px; overflow:hidden; width:50px; height:50px; border:none; text-indent:100%; background:url(../images/ui.totop.png) no-repeat left top; z-index:9999;}
#toTopHover { background:url(../images/ui.totop.png) no-repeat left -50px; width:50px; height:50px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0);}
#toTop:active, #toTop:focus { outline:none;}

/* m-nav */
.m_head{ display:none;}
.m_brain{ display:none;}

/* footer */
footer{ background:#151515; width:100%; color:#747474; font-size:0.813em; line-height:22px; text-align:center; padding:10px 0; float:left;}
footer a{ color:#747474;}
footer a:hover{ color:#bb8220;}
footer > ul{ float:right;}
footer > ul > li{ float:left; margin:0 20px 0 0; font-size:1.125em;}
.m_footer{ display:none;}
.ad-logo{ width:100%; float:left; padding:10px 0 0 0;}
footer img{ float:center; width:150px; margin:0 0 15px 20px;}


@media screen and (max-width: 1366px) {
#intro{ height:760px;}
.ind_wrap{ width:40%;}
.logo{ width:100px; top:20px; margin:0 0 0 -50px;}
.tit1{ width:200px; top:80px; margin:0 0 0 -100px;}
.tit2{ width:300px; top:115px; margin:0 0 0 -150px;}
.video{ width:80%; margin:0 0 0 -40%; top:375px;}
.video iframe{ height:280px;}
.cover{ left:38%; top:445px; width:250px;}

footer img{ width:110px;}
}


@media screen and (max-width: 1280px) {
footer img{ width:115px;}
}

@media screen and (max-width: 1080px) {
footer img{ width:96px;}

}

@media screen and (max-width: 1024px) {
#intro{ height:730px;}
.cover{ top:450px;}
footer img{ width:122px;}
}

@media screen and (max-width: 800px) {
#intro{ background: url(../images/firstBG.jpg) -160px center no-repeat;-moz-background-size: cover; background-size: cover; height:700px;}
.ind_wrap{ width:60%; height:100%;}
.cover{ left:55%; top:430px;}
.sticky-wrapper{display:none;}

footer{ width:100%; padding:10px 2.5%;}
footer > ul > li{ margin:0 5px;}
footer img{ width:120px;}
}

@media screen and (max-width: 750px) {
#intro{ background: url(../images/firstBG.jpg) -200px center no-repeat;-moz-background-size: cover; background-size: cover;}
footer img{ width:110px;}
}

@media screen and (max-width: 640px) {
#intro{ background: url(../images/firstBG.jpg) -280px center no-repeat;-moz-background-size: cover; background-size: cover;}
footer{ width:100%; padding:10px 0;}
.m_footer{ display: block;}
.pc_footer{ display:none;}
#toTop { bottom:70px;}
.ind_content h2{ font-weight:normal;}
footer img{ width:100px;}
}

@media screen and (max-width: 600px) {
footer img{ width:95px;}
}

@media screen and (max-width: 568px) {
#intro{ background: url(../images/firstBG.jpg) -300px center no-repeat;-moz-background-size: cover; background-size: cover; height:650px;}
.tit1{ width:260px; top:70px; margin:0 0 0 -130px;}
.tit2{ width:260px; top:120px; margin:0 0 0 -130px;}
.cover{ left:54%; top:420px; width:200px;}
.video{ width:90%; margin:0 0 0 -45%; top:350px;}
.video iframe{ height:250px;}
footer img{ width:116px;}
}

@media screen and (max-width: 480px) {
.tit1{ width:230px; top:70px; margin:0 0 0 -115px;}
.tit2{ width:250px; top:125px; margin:0 0 0 -125px;}
#intro{ height:600px;}
.cover{ left:57%; top:390px; width:180px;}
.video iframe{ height:200px;}
footer img{ width:110px;}
}

@media screen and (max-width: 360px) {
#intro{ background: url(../images/firstBG.jpg) center center no-repeat;-moz-background-size: cover; background-size: cover;  height:550px;}
.ind_wrap{ width:100%;}
.cover{ left:55%; top:365px; width:150px;}
.video{ width:50%; top:350px; left:5%;}
.video iframe{ height:150px;}
.w{ width:100%;}
footer img{ width:65px;}
}

@media screen and (max-width: 320px) {
footer img{ width:80px;}
}