@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, "微軟正黑體"; -webkit-text-size-adjust: 100%;}
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:960px; 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 30px 11px 30px; color: #FFF;}
ul.navigation li.fb-like { margin:7px 0 0 0;}			
ul.navigation > li > a:hover{ color: #21b8ce; 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: #21b8ce; 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;}

.sp_td1{ top:180px; left:33%; position:absolute;}
.sp_td1 > ul{ position:relative; text-align:center;}
.sp1{background:#FFF; padding:20px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 2px 2px 5px #999; -webkit-box-shadow: 2px 2px 5px #999; -moz-box-shadow: 2px 2px 5px #999; font-size:1.25em; text-align:center; font-weight:bold; color:#E880A9;}
.sp1 a{ color:#E880A9;}
.sp1 a:hover{ color:#D9266D;}
.sp1 img{ float:left; margin: 0 5px 0 0;}
.triangle{width: 0; height: 0; border-style: solid; border-width: 0 0 25px 25px; border-color: transparent transparent #ffffff transparent; margin:0 0 0 200px;}
.pic1 img{ width:300px;}

.sp_td2{ top:500px; left:67%; position:absolute;}
.sp_td2 > ul{ position:relative; text-align:center;}
.sp2{background:#FFF; padding:20px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; box-shadow: 2px 2px 5px #999; -webkit-box-shadow: 2px 2px 5px #999; -moz-box-shadow: 2px 2px 5px #999; font-size:1.25em; text-align:center; font-weight:bold; color:#E880A9; text-align:left;}
.sp2 a{ color:#E880A9;}
.sp2 a:hover{ color:#D9266D;}
.sp2 img{ float:left; margin: 0 5px 0 0;}
.pic2 img{ width:250px;}


.ind_wrap{ width:30%; 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%;}
.tit3{ width:300px; top:430px; margin:0 0 0 -150px;}
.tit3 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:28%; top:630px; width:250px;}
.cover img{ width:100%;}
.down{ position:absolute; width:70px; height:70px; text-align:center; font-size:50px; line-height:75px; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; border:5px double #FFF; right:20px; bottom:90px; -webkit-border-radius: 70px; -moz-border-radius: 70px; border-radius: 70px; color:#FFF;}
.down a{ width:100%; display:block;}

.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% { transform: scale(0); opacity: 0.0;} 60% {transform: scale(1.1);} 80% { transform: scale(0.9); opacity: 1;} 100% { transform: scale(1); opacity: 1;}}
@-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0;} 60% { -webkit-transform: scale(1.1);} 80% { -webkit-transform: scale(0.9); opacity: 1;} 100% { -webkit-transform: scale(1); opacity: 1;}}

#ad{ background:url(../images/fourBG.jpg); margin: 0 auto; padding:60px 0 40px 0; overflow:auto; width:100%;}

.ind_content{ width:80%; margin:0 10%; float:left;}
.ind_content h2{ font-size:1.375em; color:#009fae; line-height:30px; margin:0 0 10px 0;}
.ind_content h2 a{ color:#009fae;}
.ind_content h2 a:hover{ color:#00D7E8;}
.ind_content p{ font-size:1em; margin:0 0 10px 0;}
.ind_content span a{ text-decoration:underline;}
.ind_content span a:hover{ text-decoration:underline; color:#00D7E8;}

.box{ width:44%; float:left; margin:20px; background: #FFF; padding:10px; box-shadow: 2px 2px 5px #999; -webkit-box-shadow: 2px 2px 5px #999; -moz-box-shadow: 2px 2px 5px #999;}
.box > ul{ float:left; width:100%;}
.box > ul > li{ float:left;}
.pic{ margin:0 20px 0 0; float:left; width:45%;}
.pic img{ width:100%;}
.w{ float:left; width:50%;}
.box_bor{ border:5px solid #F66;}
.box_bor2{ border:5px solid #FFF;}

/* 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:#ffe900;}
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:left; width:150px; margin:0 0 15px 20px;}


@media screen and (max-width: 1366px) {
.sp_td1{ display:none;}
.sp_td2{ display:none;}
#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;}
.tit3{ width:300px; top:310px; 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;}
.down{ bottom:100px;}

.ind_content{ width:90%; margin:0 5%;}
.box{ width:44%;}
footer img{ width:110px;}
}


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

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

@media screen and (max-width: 1024px) {
.down{ border:5px double #222; bottom:50px; color:#222;}
.box{ width:42%;}
.pic{ margin:0 20px 0 0; width:40%;}
#intro{ height:730px;}
.cover{ top:450px;}
footer img{ width:122px;}
}

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

footer{ width:100%; text-align: left; padding:10px 2.5%;}
footer > ul > li{ margin:0 5px;}
footer img{ width:120px;}
.box{ width:44%;}
}

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

@media screen and (max-width: 640px) {
#intro{ background: url(../images/firstBG.jpg) -550px center no-repeat;-moz-background-size: cover; background-size: cover;}
.box{ width:100%; margin:20px 0;}
footer{ width:100%; text-align: center; 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) center 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;}
.tit3{ width:260px; top:290px; 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;}
#ad{ padding:40px 0;}
footer img{ width:116px;}
}

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

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

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