@charset "utf-8";
/* CSS Document */
body { font: 1em Helvetica; }
li { float: left; }
a { text-decoration: none; outline: none; }
section { position: relative; width: 100%; margin-bottom: 20px; }
.wrapper { width: 960px; position: relative; margin: 0 auto; }
.clear { clear: both; }
/*------------ header --------------*/
#logo { display: block; position: absolute; text-indent: -9999px; left: 50%; top: 20px; margin-left: -64px; width: 128px; height: 95px; background: url(../images/logo.png) no-repeat 0 0; }
header { width: 100%; height: 130px; position: relative; z-index: 50; top: 0; background: url(../images/head-line.jpg) #FFF 0 43px repeat-x; }
header>div.header-wrap { width: 960px; margin: 0 auto; height: 130px; position: relative; }
header nav { width: 625px; height: 30px; margin: 0 auto; padding-top: 30px; overflow: hidden; }
header nav li { display: inline; float: left; padding: 5px 10px; background: #FFF; margin-left: 50px; }
header nav li:first-child { margin-left: 0; }
header nav li+li+li { margin-left: 210px; }
header nav li+li+li+li { margin-left: 50px; }
header nav li a { color: #444444; float: left; text-decoration: none; text-align: center; outline: none; font-size: 13px; font-weight: bold; }
header nav li a.active, header nav li a:hover { border-bottom: #52e399 solid 2px; }
footer { background: url(../images/footer-bg.png) repeat-x 0 0; height: 117px; position: relative; width: 100%; margin-top: 50px; }
footer .wrapper { padding-top: 25px; }
footer .wrapper .left { float: left; width: 430px; font-size: 10px; color: #888; }
footer .wrapper .left>p { margin-bottom: 5px; }
footer .wrapper .left .lng>a { font-weight: bold; font-size: 14px; color: #888; margin: 0 2px; padding: 0 10px; }
footer .wrapper .left .lng>a.active { background: #52e399; color: #FFF; }
footer .wrapper .left .copy>a { color: #52e399; }
footer .wrapper .right { float: right; position: relative; }
footer .wrapper .right .subscribe { width: 105px; float: left; margin-right: 10px; text-align: center; }
footer .wrapper .right .subscribe span { color: #52e399; float: left; font-weight: bold; font-size: 18px; line-height: 30px; }
footer .wrapper .right .subscribe span+span { color: #888888; font-size: 12px; font-weight: normal; line-height: 15px; }
footer .wrapper .right .form-subscribe { float: left; width: 190px; }
footer .wrapper .right .form-subscribe input[type="text"] { width: 150px; height: 27px; float: left; background: #eeeeee; border: none; padding: 0 5px; color: #888; }
footer .wrapper .right .form-subscribe .submit { position: absolute; top: 0; right: 8px; }
footer .wrapper .right .form-subscribe .submit input[type="submit"] { float: left; background: url(../images/arrow.png) no-repeat; width: 23px; height: 27px; float: left; cursor: pointer; border: none; text-indent: -9999px; }
#unsubscribe { width: 200px; float: left; margin-top: 5px; }
#unsubscribe a { display: block; background: url(../images/unsubscribe.png) no-repeat 0 0; width: 20px; height: 17px; border: none; cursor: pointer; float: left; }
#unsubscribe a.active { background-position: 0 bottom; }
#unsubscribe>span { display: block; float: left; font-size: 12px; color: #444; }
#unsubscribe a>input { display: none; }
.banner { margin-bottom: 30px; position: relative; }
.banner img { width: 100%; }
/*------- Home ----------*/
.preload { width: 220px; height: 20px; position: absolute; z-index: 9888; left: 50%; top: 50%; margin-left: -110px; margin-top: -10px; }
#home .banner { min-height: 380px; width: 100%; }
#home .banner >div { display: none;/*	opacity:0;
	filter: alpha(opacity=0);*/
/*	background:url(../images/ajax-loader.gif) no-repeat center;*/
}
.banner-thumb { display: block; width: 100%; float: left; margin: 0 0 20px 0; }
.banner-thumb li { width: 205px; height: 120px; margin-left: 45px; position: relative; background: url(../images/ajax-loader2.gif) no-repeat center; }
.banner-thumb li:first-child { margin-left: 0; }
.banner-thumb li>a>p { display: block; position: absolute; bottom: 0; width: 100%; height: 37px; background: url(../images/bg-opacity.png) repeat 0 0; }
.banner-thumb li>a>p>span { display: block; position: absolute; width: 100%; height: 27px; padding-top: 10px; }
.banner-thumb li>a>p>span:first-child { padding-top: 10px; z-index: 1; color: #444444; text-align: center; font-size: 12px; font-weight: bold; }
.banner-thumb li>a>p>span+span { display: none; background: url(../images/banner-hover.png) repeat-x 0 0; z-index: 2; }
.banner-thumb li.active >a>p>span+span { display: block; }
.how-to { width: 485px; float: left; }
.how-to>h2, .how-to>p>span { color: #444; }
.how-to>h2 { font-size: 14px; font-weight: bold; }
.how-to>p, .social>p { color: #888; }
.how-to>p { font-size: 12px; }
.social { width: 475px; float: left; }
.social>p { float: left; width: 173px; margin-left: 40px; background: url(../images/icon-face.png) no-repeat 0 0; padding-left: 35px; font-size: 11px; }
.social>p:first-child { margin-left: 15px; }
.social>p+p { background: url(../images/icon-twit.png) no-repeat 0 0; }
/*------- company ---------*/
#company{ margin-bottom:0;}
#company .wrapper>p { font-size: 14px; float: left; display: block; color: #444; line-height: 18px; /*width: 205px; height: 150px;*/ border-left: #eeeeee solid 1px; padding: 0 25px; }
#company .wrapper>p+p>span { font-size: 16px; font-weight: bold; display: block; margin: 10px 0; }
#company .wrapper>p+p+p { width: 390px; font-size: 12px; }
/*#company .wrapper>p:first-child { color: #52e399; margin-left: 0; border-left: none; font-size: 19px; line-height: 25px; }*/
#company .wrapper>p:first-child { color: #888; margin-left: 0; border-left: none; font-size: 14px; line-height: 18px; }
#company .wrapper .device { background:url(../images/bg-device-new.png) no-repeat center; width:100%; height:90px; margin:30px 0 0 0; float:left;} 
/*------- career ---------*/
#career .banner>p { background: url(../images/banner_career_stamp.png) no-repeat 0 0; position: absolute; width: 131px; height: 126px; right: 10%; top: 7%; }
#career .wrapper { overflow: hidden; height: 450px; }
#career .wrapper>p { float: left; display: block; color: #444; line-height: 21px; }
#career .wrapper>p:first-child { font-size: 17px; width: 210px; }
#career .wrapper>p:first-child >span { width: 100%; font-weight: bold; display: block; }
#career .wrapper>p+p { width: 700px; margin-left: 50px; font-size: 14px; color: #888; }
#career .wrapper>ul { margin-top: 30px; float: left; display: block; }
#career .wrapper>ul>li, #career .wrapper .view-content .intro { width: 210px; font-size: 12px; color: #444; padding-right: 20px; border-right: #eeeeee solid 1px; margin-right: 18px; height: 340px; position: relative; }
#career .wrapper>ul>li+li+li+li { padding-right: 0; margin-right: 0; border: none; }
#career .wrapper p.title { text-align: center; font-size: 13px; margin-bottom: 20px; line-height: 21px; }
#career .wrapper p.title >span { font-size: 18px; color: #52e399; width: 100%; display: block; font-weight: bold; }
#career .wrapper>ul>li>p+p { text-align: justify; color: #888; text-indent: -9999px; height: 180px; width: 100%; }
#career .wrapper>ul>li>p+p { background: url(../images/career1.png) no-repeat center 0; }
#career .wrapper>ul>li+li>p+p { background: url(../images/career2.png) no-repeat center 0; }
#career .wrapper>ul>li+li+li>p+p { background: url(../images/career3.png) no-repeat center 0; }
#career .wrapper>ul>li+li+li+li>p+p { background: url(../images/career4.png) no-repeat center 0; }
#career .wrapper .view-content>.intro { position: relative; }
#career .wrapper .view-content>.intro, #career .wrapper .view-content>.detail { float: left; }
#career .wrapper .view-content>.detail { width: 700px; font-size: 13px; color: #888; }
#career .wrapper .view-content>.detail h4 { font-size: 13px; color: #444; font-weight: bold; margin-bottom: 3px; }
#career .wrapper .view-content>.detail p, #career .wrapper .view-content>.detail ul { display: inline-block; width: 100%; float: left; margin-bottom: 20px; line-height: 18px; }
#career .wrapper .view-content>.detail ul { padding-left: 15px; }
#career .wrapper .view-content>.detail ul li { list-style: outside disc; width: 100%; }
#career .wrapper .view-content>.detail ol li { margin-right: 20px; }
#career .wrapper .view-content>.detail ol li+li+li+li { margin: 0; }
#career .wrapper .view-content>.detail p>a { text-decoration: underline; font-weight: bold; color: #444; }
#career .wrapper .view-content { position: absolute; /*	top: 70px;
	left:1000px;*/
bottom: -500px; left: 0; background: #FFF; padding: 30px 0; width: 100%; }
#career .wrapper>ul>li a.more, #career .wrapper .view-content a.back { position: absolute; display: block; cursor: pointer; width: 30px; height: 30px; text-indent: -9999px; bottom: 0; left: 50%; margin-left: -15px; }
#career .wrapper>ul>li a.more { background: url(../images/more.png) no-repeat 0 0; }
#career .wrapper .view-content a.back { bottom: 160px; background: url(../images/back.png) no-repeat 0 0; }
/*----- contact ---------*/
#contact h3 { font-size: 12px; font-weight: bold; margin-bottom: 20px; }
#contact>.wrapper>div { float: left; }
#contact .address, #contact .contact { font-size: 14px; color: #444; }
#contact .address { width: 240px; margin-right: 20px; }
#contact .address >p> span { font-weight: bold; }
#contact .address>p { margin-bottom: 35px; color: #888; }
#contact .address >p+p { height: 32px; padding-left: 40px; padding-top: 10px; margin: 10px 0; }
#contact .address >p.tel { background: url(../images/tel.png) no-repeat 0 center; }
#contact .address >p.fax { background: url(../images/fax.png) no-repeat 0 center; }
#contact .address >p.mail { background: url(../images/mail.png) no-repeat 0 center; }
#contact .contact { width: 500px; }
#contact .contact form>ul>li { margin-bottom: 8px; position: relative; }
#contact .contact form>ul>li>label, #contact .contact form>ul>li>input, #contact .contact form>ul>li>textarea { display: block; float: left; }
#contact .contact form>ul>li>label { width: 180px; color: #888; }
#contact .contact form>ul>li>input, #contact .contact form>ul>li>textarea { width: 280px; height: 30px; padding: 0 10px; background-color: #eee; border: none; color: #888; }
#contact .contact form>ul>li>textarea { height: 90px; }
#contact .contact form>ul>li>input.submit, #contact .contact form>ul>li>input.cancel { width: 110px; height: 30px; color: #FFF; font-weight: bold; margin-right: 10px; font-size: 12px; }
#contact .contact form>ul>li>input.submit { background: #52e399; }
#contact .contact form>ul>li>input.cancel { background: #cccccc; }
.capcha>img { float: left; }
.capcha input { width: 160px !important; }