@charset "utf-8";
* { margin: 0; padding: 0; }
a { text-decoration:none; outline: none; hlbr:expression(this.onFocus=this.blur());}
*: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; text-decoration: none;}
ul, li{ list-style-type:none;}
img, iframe{ border:none;}
body{ -webkit-text-size-adjust: 100%; background: #303030 url(../img/bg.png) repeat; font-family: Arial, Helvetica, sans-serif, "微軟正黑體";}
/* bg */
.ind_bg{ width:100%; height: 834px; background: url(../img/ind_bg.png) center top no-repeat; position:fixed; -moz-background-size: cover;background-size: cover;}
.ind_wrap{ width:100%;}
.ind_td{ width:980px; height:766px; position:relative; z-index:99; left:50%; margin:0 0 0 -650px;}
.ind_td> li{ position:absolute;}
.logo{ width:110px; height:45px; top:30px; left:40px;}
.brain { width: 800px; height: 714px; top:130px; left:50%; margin:0 0 0 -270px; background: url('../img/brain.png') no-repeat; animation: play 0.5s steps(4) forwards; -moz-animation:play 0.5s steps(4) forwards; -webkit-animation:play 0.5s steps(4) forwards; -o-animation: play 0.5s steps(4) forwards;}
@-webkit-keyframes play{ 0% { background-position: 0px; } 100% { background-position: -3200px; }}
@keyframes play { 0% { background-position: 0px; } 100% { background-position: -3200px; }}
.brain > ul{ position:relative;}
.brain > ul > li{ position: absolute; z-index:9; animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s;}
.ind_pic1{ width:155px; height:78px; background:url(../img/ind-pic1.png) no-repeat; left:-25px; top:160px;}
.ind_pic2{ width:97px; height:165px; background:url(../img/ind-pic2.png) no-repeat; left:175px; top:-20px;}
.ind_pic3{ width:47px; height:120px; background:url(../img/ind-pic3.png) no-repeat; left:295px; top:-30px;}
.ind_pic4{ width:128px; height:119px; background:url(../img/ind-pic4.png) no-repeat; left:430px; top:5px;}
.ind_pic5{ width:121px; height:76px; background:url(../img/ind-pic5.png) no-repeat; left:553px; top:35px;}
.ind_pic6{ width:134px; height:99px; background:url(../img/ind-pic6.png) no-repeat; left:645px; top:140px;}
.ind_pic7{ width:185px; height:91px; background:url(../img/ind-pic7.png) no-repeat; left:640px; top:280px;}
.ind_pic8{ width:107px; height:112px; background:url(../img/ind-pic8.png) no-repeat; left:360px; top:185px;}
.ind_pic9{ width:142px; height:72px; background:url(../img/ind-pic9.png) no-repeat; left:400px; top:330px;}
.ind_pic10{ width:159px; height:109px; background:url(../img/ind-pic10.png) no-repeat; left:500px; top:375px;}
.ind_pic11{ width:63px; height:67px; background:url(../img/ind-pic11.png) no-repeat; left:40px; top:610px;}
.ind_pic12{ width:315px; height:303px; background:url(../img/light-2.png) no-repeat; left:10px; top:100px; animation: light 2s infinite alternate; -moz-animation:light 2s infinite alternate; -webkit-animation:light 2s infinite alternate; -o-animation: light 2s infinite alternate; z-index:0;}
@-webkit-keyframes light{ 0% { opacity:1;} 100% { opacity:0.5}}
@keyframeslight { 0% { opacity:1;} 100% { opacity:0.5}}
.ind_tit{ width:267px; height:457px; top:243px; left:295px; z-index:99; animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s;}

.ind_nav_wrap > ul{ position:relative; width:100%;}
.ind_nav_wrap > ul > li{ position: absolute; z-index:99; background: url(../img/btn.png) no-repeat; text-align:center; font-size:1.125em; width:100px; height:100px; padding:28px 0 0 0; left:105px; top:75px; line-height:24px; font-weight: bold;}
.ind_nav_wrap > ul > li a{ color:#fcffe7; display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer;}
.ind_nav_wrap > ul > li :hover{color:#fcffe7; filter: glow(color:#fcffe7, strength=2); text-shadow: 1px 1px 7px #fcffe7;}
.ind_nav_wrap > ul > li.nav1{ top:190px; left:180px;}
.ind_nav_wrap > ul > li.nav2{ top:70px; left:320px;}
.ind_nav_wrap > ul > li.nav3{ top:20px; left:500px;}
.ind_nav_wrap > ul > li.nav4{ top:30px; left:640px;}
.ind_nav_wrap > ul > li.nav5{ top:60px; left:780px;}
.ind_nav_wrap > ul > li.nav6{ top:150px; left:900px;}
.ind_nav_wrap > ul > li.nav7{ top:290px; left:970px;}

.floating:hover{animation: floating 1.5s infinite; -webkit-animation: floating 1.5s infinite; 
-moz-animation:floating 1.5s infinite; -o-animation: floating 1.5s infinite;}

@keyframes floating { 
0% {transform: translateY(0%);}
50% {transform: translateY(8%);}	
100% {transform: translateY(0%);}			
}

@-webkit-keyframes floating {
0% {-webkit-transform: translateY(0%);}
50% {-webkit-transform: translateY(8%);}	
100% {-webkit-transform: translateY(0%);}			
}

.pulse{
animation: pulse 1.5s infinite; -webkit-animation: pulse 1.5s infinite; 
-moz-animation:pulse 1.5s infinite; -o-animation: pulse 1.5s infinite;}

@keyframes pulse {
0% {transform: scale(0); opacity: 0.7;		}
50% {transform: scale(1.5); opacity: 1;}	
100% {transform: scale(0); opacity: 0.7;}			
}

@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0); opacity: 0.7;		}
50% {-webkit-transform: scale(1.5); opacity: 1;}	
100% {-webkit-transform: scale(0);opacity: 0.7;}			
}

.ind_td2{ width:100%; height:345px; float:left; background:#303030 url(../img/ind_light.png) center top no-repeat; -moz-background-size: contain; background-size: contain; position:relative; z-index:9;}
.ind_td3{ width:980px; position:relative; margin:20px 0 0 -490px; left:50%;}
.ind_td3 h3{ color:#b2b2b2; font-size:1em; margin:0 0 20px 0; letter-spacing: 0.2em; font-weight:700;}
.ind_le{ float:left; width:640px; margin:0 40px 40px 0;}
.ind_rig{ float:left; width:300px;}

/* slide */
.slides1_wrap {position: relative; width: 640px; float: left;}
.auto_link {display:none;}
#slides1 {overflow: hidden; }
#slides1 li { list-style: none; width: 640px; padding:0;}
#slides1 li .pic { float: left; width:190px; height:187px; margin:0 0 0 60px;}
#slides1 .s_content {float: left; width:320px; margin:20px}
#slides1 .s_content p a{text-decoration:none; color:#ffe900;}
#slides1 .s_content p a:hover{text-decoration: underline; color:#8e8e82;}
#slides1 li p { font-size:0.813em; padding-top:5px; line-height: 22px; color:#FFF;}
#slides1 h4 { margin:0 0 10px 0; width:100%;}
#slides1 h4 a { color:#ffe900; text-decoration: none;}
#slides1 h4 a:hover{ color:#8e8e82;}
.slides1_wrap .prev { position: absolute; left: 0px; top: 90px; outline: 0;}
.slides1_wrap .next { position: absolute; right: 0px; top: 90px; outline: 0;}
.slides1_wrap a:active { top: 95px;}
.bx_pager { width:140px; margin:40px auto 0 auto;}
.bx_pager a { float: left; background: url(../img/bg_pager.png) no-repeat 0 -10px; width: 10px; height: 10px; color: #fff; font-size: 0; margin-right: 8px; text-decoration:none;}
.bx_pager a:hover, .bx_pager a.active { background-position: 0 0; text-decoration: none;}
.auto_controls a:hover { text-decoration: none;}

/* QA */
.slide_td{ width:300px; float:left; text-align:center; margin:0 0 40px 0;}
.qa_td{ text-align:center; font-size:1.125em; width:90%; height:65px; line-height:30px; font-weight:700; margin:0 auto 10px auto;}
.qa_td a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; color:#ffe900; border:5px solid #ffe900; padding:5px 0 0 0;}
.qa_td a:hover {text-decoration: none; border:5px solid #8e8e82; color:#8e8e82;}
.slide_td .ad img{ margin:0 0 15px 0;}

/* top */
#toTop { display:none; text-decoration:none; position:fixed; bottom:80px; right:20px; overflow:hidden; width:50px; height:50px; border:none; text-indent:100%; background:url(../img/ui.totop.png) no-repeat left top; z-index:9999;}
#toTopHover { background:url(../img/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;}

/* footer */
footer{ background:#151515; width:100%; color:#747474; font-size:0.813em; line-height:22px; text-align:center; padding:10px 0; float:left; position:relative; z-index:99;}
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;}
.sh{ text-align:center; width:30px; height:30px; line-height:30px; background:#353535; -webkit-border-radius: 30px;
-moz-border-radius: 30px; border-radius: 30px;}
.sh a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; color:#8e8e82; background:#353535; -webkit-border-radius: 30px;
-moz-border-radius: 30px; border-radius: 30px;}
.sh a:hover {text-decoration: none; color:#222; background:#ffe900; -webkit-border-radius: 30px;
-moz-border-radius: 30px; border-radius: 30px;}

.m_head{ display:none;}
.ind_rig_td{ display:none;}
.m_brain{ display:none;}

@media screen and (max-width: 1024px) {
.ind_td{ margin:0 0 0 -630px;}
.logo{ top:30px; left:160px;}
}

@media screen and (max-width: 800px) {
.ind_td{ width:768px; height:600px; margin:0 0 0 -500px;}
.logo{ top:50px; left:300px; z-index:99;}
.brain { width: 768px; height:625px; top:50px; margin:0 0 0 -230px; background: url('../img/brain-2.png') no-repeat; animation: play2 0.5s steps(4) forwards; -moz-animation:play2 0.5s steps(4) forwards; -webkit-animation:play2 0.5s steps(4) forwards; -o-animation: play2 0.5s steps(4) forwards;}
@-webkit-keyframes play2{ 0% { background-position: 0px; } 100% { background-position: -2801px; }}
@keyframes play2 { 0% { background-position: 0px; } 100% { background-position: -2801px; }}

.ind_pic1{ left:-25px;}
.ind_pic2{ left:150px;}
.ind_pic3{ left:265px;}
.ind_pic4{ left:370px;}
.ind_pic5{ left:490px; top:25px;}
.ind_pic6{ left:570px;}
.ind_pic7{ left:530px;}
.ind_pic8{ left:290px;}
.ind_pic9{ left:350px; top:280px;}
.ind_pic10{ left:430px; top:325px;}
.ind_pic11{ left:40px; top:520px;}
.ind_pic12{ left:0; top:50px;}
.ind_tit{ top:100px; left:225px;}

.ind_nav_wrap{ display:none;}

.ind_td2{ width:100%; height: auto; overflow:auto;}
.ind_td3{ width:100%; margin:20px 0 0 0; left:0;}
.ind_le{ width:100%; margin:0 0 40px 0; text-align:center;}
.ind_rig{ width:100%; margin:0 0 40px 0; text-align:center;}

.slides1_wrap {width: 300px; border-bottom:1px solid #747474; padding:0 0 40px 0; float:none; margin:0 auto;}
#slides1 li { width: 300px; padding:0;}
#slides1 li .pic { margin:0 55px 20px 55px;}
#slides1 .s_content {width:100%; margin:0;}
.bx_pager { width:140px; margin:30px 0 0 130px;}

.slide_td{ float: none; margin:0 auto 40px auto;}
.qa_td{ height:80px;}

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

@media screen and (max-width: 640px) {
.brain { display:none;}
.logo{ top:25px; left:50%; margin:0 0 0 -55px;}
.ind_tit{ width:100%; text-align:center; height:auto; top:70px; left:0;}
.ind_tit img{ width:200px;}
.m_brain{ display:block; left:0; top:0; text-align:center;}
.m_brain img{ width:100%;}

.ind_td{ width:100%; height:450px; margin:0; left:0;}
.ind_td3{ margin:60px 0 0 0;}
.ind_td3 h3{ font-weight: normal;}
.qa_td{ font-weight: normal;}
#slides1 h4 {font-weight: normal;}
}

@media screen and (max-width: 480px) {
.m_brain{ top:20px;}
.ind_td3{ margin:20px 0 0 0;}
#toTop { bottom:100px;}
}

@media screen and (max-width: 320px) {
.ind_td{ height:320px;}
.ind_tit img{ width:130px;}
.slide_td{ width:100%;}
.pic4{ width:280px;}
.slide_td .ad img{ width:280px;}
.left_td iframe{ height:230px;}
}