@charset "utf-8";
*: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;}
* { margin: 0; padding: 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; *behavior:url(boxsizing.htc); }
a:link, a:visited ,a:hover ,a:active {text-decoration: none;}
area:focus { outline-width: 0px;}
a{ text-decoration:none; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */}
ul, li{ list-style-type:none;}
img, iframe{ border:none;}

html, body { background:#000 url(../img/alt.png); line-height:1; font-family: 'Roboto Condensed', sans-serif, Microsoft JhengHei; -webkit-animation: fa 2s; animation: fa 2s; height:100%;}

/* head */
.menu  { width:100%; height:70px; -webkit-animation: fa 2s; animation: fa 2s; margin-top:5px;}
.menu  > button { border: none; color:#ff5b1b; background:none; font-size:1.8em; margin:13px 30px 0 0; float:left;}
.menu  > p{ float:left;}
.logo{ width:100px; height:39px; margin:15px 30px 0 100px; background:url(../work/img/logo.png); -moz-background-size: contain; background-size: contain; float:left;}
.logo a{ background:url(../work/img/logo.png);}
.buy{ color:#ff5b1b; font-size:1.8em; margin:19px 30px 0 0;}
.buy a{ color:#ff5b1b;}
.buy a:hover{ color:#fff;}

@-webkit-keyframes fa {
	0%{opacity:0;} 100%{opacity:1;}}

@keyframes fa {
	0%{opacity:0;} 100%{opacity:1;}}

/* share */
.share { position: relative;}
.share-button,
.share-toggle-button { position: absolute; display: inline-block; right: 100px; top: 35px; border-radius: 50%; width: 50px; height: 50px; line-height: 28px; margin-left: -25px; margin-top: -25px; background: #ff5b1b; text-align: center; color: #fff; border: none; outline: none; cursor:pointer;}
.share-button:hover,
.share-toggle-button:hover { color: #fff;}
.share-button { font-size: 1.8em; background: #ff5b1b; -webkit-transform: scale(1, 1); transform: scale(1, 1); color: #fff; line-height: 46px;}
a.share-button { color: #fff;}
a.share-button:hover, 
a.share-button:focus { color: #ff5b1b; background: #fff;}
.share-toggle-button { z-index: 9; background: #ff5b1b; font-size: 20px;}
.share-items { list-style-type: none; padding: 0; margin: 0; }
.share-item { display: inline-block;}

/* foot */
footer{ width:100%; font-size:0.813em; color:#ccc; line-height:1.5em; float:left; padding:30px 3%; position:relative; bottom:0; text-align:left; font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif; background: url(../img/alt.png);}
footer a{ color:#ccc;}
footer a:hover{ color:#fff;}

.topp { width: 40px; height: 40px; text-align:center; line-height:35px; border: 2px solid #ff5b1b; background: #ff5b1b; color:fff; position:absolute; right:40px; bottom:30px; font-size:1.5em; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;}
.topp a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;}
.topp a:hover { text-decoration: none; background:#000; color:#ff5b1b; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px;}

.big_ind{ width:100%; height:100%; position:relative; z-index:9; float:left; background:url(../img/bg3.png) center center; -moz-background-size: cover; background-size: cover;}
.big_tit{display: none;}
.big_tit img { width:100%;}

.tooltip {width: 100px; height: 100px; margin: -15px 0 0 -50px; position: absolute; top:73%; left:50%; z-index:9; border-radius: 50%; border: 2px solid #ff5b1b; -webkit-animation: pulse 0.6s infinite alternate; animation: pulse 0.6s infinite alternate; color:#ff5b1b; text-align:center; font-size:2em; line-height:100px; transition: border 0.5s; -webkit-transition: border 0.5s; -moz-transition: border 0.5s;}
.tooltip a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color:#fff;}
.tooltip:hover { text-decoration: none; animation:none; -webkit-animation:none; border: 2px solid #fff; color:#fff;}


@-webkit-keyframes pulse {
	from { -webkit-transform: scale3d(0.5,0.5,1); }
	to { -webkit-transform: scale3d(1,1,1); }
}

@keyframes pulse {
	from { -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); }
	to { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}


.big_ind2{ width:100%; height:100%; position:relative; z-index:9; float:left; background:#000;}
.big_ind2 li{ float:left; width:25%; height:100%; -moz-background-size: cover; background-size: cover; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3; transition: opacity 1s; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; text-align:center; padding-top:20%;}
.big_ind2 li a { display: block; width: 100%; height: 100%;}
.big_ind2 li:hover { text-decoration: none; filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}

.big_ind2 li.no{ text-decoration: none; filter:alpha(opacity=100); -moz-opacity:1; opacity:1;}

.big_ind2 h2{ font-size:2em; color:#fff; border-bottom:1px solid #ddd; border-top:1px solid #ddd; display:block; width:50%; margin:0 auto; line-height:60px; font-family:Microsoft JhengHei;}
.big_ind2 h3{ font-size:5em; color:#cccccc; margin-bottom:10px; font-weight:700;}

.series1{ background:url(../img/1.jpg) top left;}
.series2{ background:url(../img/2.jpg) top center;}
.series3{ background:url(../img/3.jpg) top center;}
.series4{ background:url(../img/4.jpg) top center;}

.btn { width: 100px; height: 100px; border: 2px solid #ff5b1b; background: #ff5b1b; color:#fff; line-height:92px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; text-align: center; font-size:2em; margin: 20px auto 20px auto;}
.btn a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; color:#fff;}
.btn a:hover { text-decoration: none; background: #fff; color:#ff5b1b;}

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

}

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

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

}

@media screen and (max-width: 1080px) {
.share-button,
.share-toggle-button { right: 20px;}
.logo{ margin:15px 30px 0 20px;}
.buy{ margin:16px 30px 0 0;}
.big_ind2 h2{ width:80%;}
.big_ind2 li{ padding-top:25%;}
.topp { right:10px;}
}

@media screen and (max-width: 1024px) {
.share-button{ line-height:50px;}
}

@media screen and (max-width: 800px) {
.big_tit{display: block; width: 400px; height: 322px; position: absolute; left: 50%; top: 40%; margin: -180px 0 0 -200px; -webkit-animation: fa 2s; animation: fa 2s;}
.big_ind{ background:#122847 url(../img/bg2.jpg); -moz-background-size: cover; background-size: cover;}
.tooltip {top:70%;}
.big_ind2{ height:auto;}
.big_ind2 li{ width:50%; height:400px; padding-top:10%;}
}

@media screen and (max-width: 768px) {
.tooltip {top:60%;}
}

@media screen and (max-width: 640px) {
.big_ind2 h2{ font-weight:normal;}
.big_ind2 h3{ font-weight:normal;}
}

@media screen and (max-width: 600px) {
.tooltip {top:65%;}
}

@media screen and (max-width: 568px) {
.big_tit{width: 300px; height: 242px; top: 40%; margin: -121px 0 0 -150px;}
}

@media screen and (max-width: 480px) {
.logo{ width:70px; height:27px; margin:15px 30px 0 10px;}
.share-button,
.share-toggle-button { right: 10px;}
.big_ind2 h2{ width:80%;}
.tooltip {top:65%;}
}

@media screen and (max-width: 360px) {
.logo{ margin:18px 20px 0 10px;}
.menu  { margin-top:0;}
.buy{ margin:18px 15px 0 0;}
.big_tit{width: 280px; height: 226px; top: 40%; margin: -113px 0 0 -140px;}
.tooltip {top:70%;}
.big_ind2 li{ width:100%; padding-top:20%;}
}

@media screen and (max-width: 320px) {
.logo{ width:50px; height:19px; margin:20px 20px 0 10px;}
}