@charset "utf-8";
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
* { margin: 0; padding: 0; } 
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 */}
*: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;}
ul, li{ list-style-type:none;}
img, iframe{ border:none;}
body{ font-family: Microsoft JhengHei, Arial, Helvetica, sans-serif; background:#020100;}
body, html{ height:100%;}


/* head */
.menu  { width:100%; height:70px; background:#122847 url(../img/nav_bg.png);}
.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(../img/logo.png); -moz-background-size: contain; background-size: contain; float:left;}
.logo a{ background:url(../img/logo.png);}
.buy{ color:#ff5b1b; font-size:1.8em; margin:13px 30px 0 0;}
.buy a{ color:#ff5b1b;}
.buy a:hover{ color:#fff;}
.m_head{ display:none;}

/* 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;}
.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:94%; font-size:0.813em; color:#ccc; line-height:1.5em; float:left; padding:10px 3% 30px 3%; position:relative; text-align:left;}
footer a{ color:#ccc;}
footer a:hover{ color:#fff;}
.art_sh{ display:block; margin:0; padding:0; float:left; width:100%;}
.art_sh li{ float:left; margin:0 5px 5px 0;}
.m_fb{ float:left; height:30px;}
.m_line{ display:none;}
.m_line img{ width:100px;}

.topp { width: 40px; height: 40px; text-align:center; line-height:35px; border: 2px solid #ff5b1b; background: #ff5b1b; color:fff; position:absolute; right:40px; bottom:50px; 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;}


/* map */
.clearfix{display:inline-table;}/* Hides from IE-mac */
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
/* section */
.section{width:100%; float:left;}
.section ul li{float:left; display:inline; overflow:hidden; position:relative; }
.map1{width:25%; background:#f8de39 url(../img/map1.png) center center no-repeat; -webkit-animation: fa 1.5s; animation: fa 1.5s; -moz-background-size: contain; background-size: contain;}
.map2{width:25%; background:#96dbdc url(../img/map2.png) center center no-repeat; -webkit-animation: fa 2s; animation: fa 2s;}
.map3{width:25%; background:#f4c9c6 url(../img/map3.png) center center no-repeat; -webkit-animation: fa 1s; animation: fa 1s;}
.map4{width:25%; background:#f66d60 url(../img/map4.png) center center no-repeat; -webkit-animation: fa 2s; animation: fa 2s;}
.map5{width:25%; background:#9695a2 url(../img/map5.png) center center no-repeat; -webkit-animation: fa 2s; animation: fa 2s;}
.map6{width:25%; background:#db3f31 url(../img/map6.png) center center no-repeat; -webkit-animation: fa 1s; animation: fa 1s;}
.map7{width:25%; background:#8fa7ce url(../img/map7.png) center center no-repeat; -webkit-animation: fa 2.5s; animation: fa 2.5s;}
.map8{width:25%; background:#76c552 url(../img/map8.png) center center no-repeat; -webkit-animation: fa 1.5s; animation: fa 1.5s;}
.map9{ display:none;}

.photo{width:100%; height:350px; overflow:hidden; text-align:center;}
.rsp{width:100%; height:100%; overflow:hidden;position: absolute; background:#000; top:0px; left:0px; display: block; opacity: 0;}
.text{position:absolute; width:100%; left: -500px; top:0px; overflow:hidden; text-align:center; padding-top:12%;}
.text h2{ font-size:4em; font-weight:700; color:#fff; line-height:1.25em;}
.text h3{ font-size:1.5em; font-weight:700; color:#a3a3a3; line-height:1em;}

.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;}

.tooltip {	width: 30px; height: 30px; margin: -15px 0 0 -15px; position: absolute; border-radius: 50%; border: 2px solid #fff600; -webkit-animation: pulse 0.6s infinite alternate; animation: pulse 0.6s infinite alternate;}
.t1{ left: 50%; top: 50%;}
.t2{ left: 40%; top: 20%;}
.t3{ left: 40%; top: 60%;}
.t4{ left: 70%; top: 80%;}
.t5{ left: 30%; top: 80%;}
.t6{ left: 70%; top: 68%;}
.t7{ left: 20%; top: 40%;}
.t8{ left: 65%; top: 35%;}
.t9{ left: 85%; top: 35%;}

@-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); }
}


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

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

.ind_wrap{ width:100%; height:200px; background:url(../img/map.png);}
.ind_tit{ float:left; margin:30px 0 0 10%; -webkit-animation: fa 4s; animation: fa 4s;}
.ind_tit img{width:80%;}
.ind_tw{ float:left; position:relative; -webkit-animation: fa 5s; animation: fa 5s;}
.ind_tw_w{ float:left; margin:45px 0 0 0; text-align:center;}
.ind_wrap h2{ font-size:4em; font-weight:700; color:#fff; line-height:1.25em; }
.ind_wrap h3{ font-size:1.5em; font-weight:700; color:#a3a3a3; line-height:1em; }
.ind_tw img{ float:left; margin:15px 0 0 10px; width:175px; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s;}
.ind_tw img:hover{ filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7;}

.ind_wrap2{ width:100%; min-height:500px; background: #000 url(../img/bg2.jpg); -moz-background-size: contain; background-size: contain; float:left;}
.list_wrap{ width:100%; text-align:center; padding:40px 0 30px 0; float:left;}
.list_wrap li{ display:block; margin:0 auto;}
.list_pic{ width:50px; height:50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background:#122847; color:#CCC; line-height:46px; font-size:1.8em;}
.list_wrap h2{ font-size:1.8em; color:#fff; font-weight:700; margin:5px 0 0 0; letter-spacing:2px;}
.list_wrap h3{ font-size:1em; color:#a3a3a3; font-weight:700; margin:0;}

.ind_td{ width:70%; margin:0 auto;}
.list_td2{ background:#fff; width:23%; float:left; margin:0 1% 30px 1%;}
.list_td2 li{ display:block; float:none;}
.list_td2_pic{ margin:0 auto 10px auto;}
.list_td2_pic img{ width:100%; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s;}
.list_td2_pic img:hover{ filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
.list_td2_w{ width:90%; margin:0 auto;}
.list_td2 h2{ font-size:1.5em; line-height:1.2em; color:#333333; font-weight:700; margin:20px 0 10px 0; display:block; }
.list_td2 h2 a{ color:#333333;}
.list_td2 h2 a:hover{ color:#ff5b1b;}
.list_td2 p{font-size:1.125em; line-height:1.8em; color:#333333; font-weight:300; margin:0 0 20px 0; display:block;}
.list_td2_tips{ background:#ff5b1b; color:#fff; padding:5px 10px; text-align:center; font-size:1em; font-weight:700; float:left;}

@media screen and (max-width: 1680px) {
.topp { right:-20px;}

}

@media screen and (max-width: 1366px) {
.text{ padding-top:20%;}
.photo{ height:400px;}
.ind_tit{ margin:30px 0 0 7%; width:60%;}
.ind_tit img{width:100%;}
.ind_tw_w{ margin:55px 0 0 30px;}
.ind_wrap h2{ font-size:3em;}
.ind_wrap h3{ font-size:1.5em;}
.ind_tw img{ margin:20px 0 0 10px; width:150px;}

.ind_td{ width:90%;}
}

@media screen and (max-width: 1280px) {
.text{ padding-top:14%;}
.photo{ height:300px;}
.map1{-moz-background-size: contain; background-size: contain;}
.map2{-moz-background-size: cover; background-size: cover;}
.map3{-moz-background-size: cover; background-size: cover;}
.map4{-moz-background-size: contain; background-size: contain;}
.map5{-moz-background-size: contain; background-size: contain;}
.map6{-moz-background-size: cover; background-size: cover;}
.map7{-moz-background-size: cover; background-size: cover;}
.map8{-moz-background-size: contain; background-size: contain;}
.text h2{ font-size:3em;}
}

@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;}
.menu  > button { margin:16px 30px 0 0;}

.photo{ height:290px;}
.text{ padding-top:18%;}
.text h3{ font-size:1em;}
.map4{-moz-background-size: cover; background-size: cover;}
.map5{-moz-background-size: cover; background-size: cover;}
.ind_wrap h3{ font-size:1em;}
.ind_wrap h2{ font-size:3em; line-height:1.5em;}
.ind_wrap{ height:150px;}
.ind_tit{ margin:25px 0 0 5%; width:60%;}
.ind_tw{ margin:0 0 0 30px;}
.ind_tw_w{ margin:25px 0 0 30px;}
.ind_tw img{ margin:20px 0 0 10px; width:120px;}

.ind_td{ width:98%;}
}

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

@media screen and (max-width: 800px) {
.menu  {background:#fff url(../img/nav_bg2.png);}
.menu  > button { color:#ff5b1b; margin:16px 30px 0 0;}
.nav_tit{ display:none;}	
.logo{ background:url(../img/logo2.png); -moz-background-size: contain; background-size: contain; margin:15px 30px 0 10px;}
.logo a{ background:url(../img/logo2.png);}
.m_head{ display:block; width:100%; background:#122847 url(../img/nav_bg.png); text-align:center; float:left; padding:20px 0;}
.m_head img{ width:350px;}
.buy{ margin:15px 30px 0 0;}

.ind_wrap{ width:0; height:0; display: none;}
.ind_wrap2{ background:#000 url(../img/bg2-2.jpg);}
.text h2{ font-size:2.8em;}

.map1{ width:33%;}
.map2{ width:33%;}
.map3{ width:34%;}
.map4{ width:33%;}
.map5{ width:33%;}
.map6{ width:34%;}
.map7{ width:33%;}
.map8{ width:33%;}
.map9{ display:block; width:34%; background:#f8de39 url(../img/map9-2.png); -moz-background-size: cover; background-size: cover; -webkit-animation: fa 1s; animation: fa 1s;}
.list_td2{ width:48%;}
.t9{ left: 35%; top: 35%;}
}

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

}

@media screen and (max-width: 640px) {
.text h2{ font-weight: normal;}
.text h3{ font-weight: normal;}
.ind_wrap h2{ font-weight: normal;}
.ind_wrap h3{ font-weight: normal;}
.list_wrap h2{ font-weight: normal;}
.list_wrap h3{ font-weight: normal;}
.list_td2 h2{ font-weight: normal;}
.list_td2_tips{ font-weight: normal;}
}

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

}

@media screen and (max-width: 568px) {
.text h2{ font-size:2.2em; line-height:1.5em;}
.map1{ width:50%;}
.map2{ width:50%;}
.map3{ width:50%;}
.map4{ width:50%;}
.map5{ width:50%;}
.map6{ width:50%;}
.map7{ width:50%;}
.map8{ width:50%;}
.map9{ width:100%;}
.t_m9{ padding-top:10%;}
}

@media screen and (max-width: 480px) {
.art_sh li{ margin:0 10px 5px 0;}
.m_line{ display:block;}
.topp{ bottom:80px; right:-10px;}
.logo{ width:70px; height:27px; margin:24px 30px 0 10px;}
.share-button,
.share-toggle-button { right: 10px;}
.list_td2{ width:98%;}
}

@media screen and (max-width: 360px) {
.menu  > button { margin:18px 15px 0 0;}
.logo{ margin:22px 15px 0 10px;}
.buy{ margin:18px 15px 0 0;}
.m_head img{ width:260px;}

}

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