/*! Main Style by Steven 2015-2-26 */

@charset 'utf-8';
@import 'animations.css';
/*@import 'hover.css';*/

/* =Base
----------------------------------------------------------------------------- */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}ol,ul{list-style:none}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}fieldset,legend,img{border:0}img{vertical-align:middle}svg:not(:root){overflow:hidden}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type='button'],input[type='reset'],input[type='submit']{-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type='checkbox'],input[type='radio']{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto}input[type='search']{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{overflow:auto;resize:vertical}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:inherit}body .fn-hide{display:none}.fn-clear:before,.clearfix:before,.fn-clear:after,.clearfix:after{content:'';display:table}.fn-clear:after,.clearfix:after{clear:both}.fn-cl{clear:left}.fn-cr{clear:right}.fn-cb{clear:both}.fn-fl{float:left}.fn-fr{float:right}.fn-fn{float:none}.fn-ellipsis,.fn-text-overflow{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}.fn-linear{background:-webkit-linear-gradient(top, #fcfcfc, #f1f1f1);background:-moz-linear-gradient(top, #fcfcfc, #f1f1f1);background:-o-linear-gradient(top, #fcfcfc, #f1f1f1);background:-ms-linear-gradient(top, #fcfcfc, #f1f1f1);background:linear-gradient(to bottom, #fcfcfc, #f1f1f1)}.fn-linear-light{background:-webkit-linear-gradient(top, #fcfcfc, #f9f9f9);background:-moz-linear-gradient(top, #fcfcfc, #f9f9f9);background:-o-linear-gradient(top, #fcfcfc, #f9f9f9);background:-ms-linear-gradient(top, #fcfcfc, #f9f9f9);background:linear-gradient(to bottom, #fcfcfc, #f9f9f9)}.fn-rmb{font-family:arial;font-style:normal;padding-right:4px}.fn-webkit-adjust{-webkit-text-size-adjust:none}.fn-arrow{display:inline-block;border:4px solid transparent;width:0;height:0;line-height:0;vertical-align:middle;border-bottom-color:#666}.fn-arrow-up{display:inline-block;border:5px solid transparent;width:0;height:0;line-height:0;vertical-align:middle;border-bottom-color:#666}.fn-arrow-down{display:inline-block;border:5px solid transparent;width:0;height:0;line-height:0;vertical-align:middle;border-top-color:#666}.fn-arrow-left{display:inline-block;border:5px solid transparent;width:0;height:0;line-height:0;vertical-align:middle;border-right-color:#666}.fn-arrow-right{display:inline-block;border:5px solid transparent;width:0;height:0;line-height:0;vertical-align:middle;border-left-color:#666}

/* =Global
----------------------------------------------------------------------------- */
body {
  font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #444;
  background: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: #CD1A1C;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
mark {
  color: #333;
  background: #ffa;
}
textarea[contenteditable] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
hr, .u-hr {
  clear: both;
  margin: 10px 0;
  border: 0;
  border-top: 1px solid #eee;
}
.u-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 111;
  background: rgba(0, 0, 0, .4);
}
.u-img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}
.u-img-rounded {
  border-radius: 6px;
}
.u-img-thumbnail {
  display: inline-block;
  height: auto;
  max-width: 100%;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}
.u-img-circle {
  border-radius: 50%;
}

/* =Helper
----------------------------------------------------------------------------- */
/* common */
.f0 {
  font-size: 0 !important;
}
.p0 {
  padding: 0 !important;
}
.m0 {
  margin: 0 !important;
}
.mt0 {
  margin-top: 0 !important;
}
.mb0 {
  margin-bottom: 0 !important;
}

/* function */
.f-tl {
  text-align: left !important;
}
.f-tc {
  text-align: center !important;
}
.f-tr {
  text-align: right !important;
}
.f-nowrap {
  white-space: nowrap !important;
}
.f-brk {
  word-wrap: break-word !important;
}
.f-lowercase {
  text-transform: lowercase !important;
}
.f-uppercase {
  text-transform: uppercase !important;
}
.f-capitalize {
  text-transform: capitalize !important;
}
.f-dn, .js-hide {
  display: none !important;
}
.f-di {
  display: inline !important;
}
.f-db {
  display: block !important;
}
.f-dib {
  display: inline-block !important;
}
.f-vh {
  visibility: hidden !important;
}
.f-fly {
  margin-left: auto !important;
  margin-right: auto !important;
}
.f-gifhidden {
  position: absolute;
  left: -100%;
}
.f-invisible {
  visibility: hidden;
}
.f-pre {
  overflow: hidden;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-all;
}
.f-wwb {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-all;
}
.f-tdu, .f-tdu:hover {
  text-decoration: underline;
}
.f-tdn, .f-tdn:hover {
  text-decoration: none;
}
.f-toe {
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-usn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/*
两端对齐:
1. IE中要实现块内单行两端对齐需要使用其私有属性 text-align-last: justify 配合，text-align-last 要生效，必须先定义 text-align 为 justify
2. line-height:0 解决标准浏览器容器底部多余的空白
3. 模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用 font-size:0 可清除该空格
4. font-size font-size 设为0，IE8? 两端对齐无效，要设置 text-justify: inter-ideograph 使其生效
5. IE67 下块级元素不能实现两端对齐
*/
.f-tj {
  text-align: justify !important;
  text-justify: distribute-all-lines; /*ie6-8?*/
  text-justify: inter-ideograph;
  text-align-last: justify;
  font-size: 0;
  *font-size: 12px;
  /*line-height: 0;*/
}
.f-tj > * {
  display: inline-block;
  font-size: 12px;
  vertical-align: top;
  text-align: left;
}
.f-tj > .fix {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

/*
1. text-align-last: justify 目前只有IE支持，标准浏览器需要使用 after 伪类模拟类似效果
2. opera 浏览器需要添加 vertical-align: top 才能完全解决底部多余的空白
*/
.f-tj:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  overflow: hidden;
  vertical-align: top;
}

/* =Layout
----------------------------------------------------------------------------- */
.g-wrap {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

#main {
  background: #fff url(../img/bg.png) 50% 0 no-repeat;
}
#main .g-wrap {
  position: relative;
  height: 800px;
}
#main .title,
#main .slogan,
#main .intro,
#main .qrcode,
#main .phone {
  position: absolute;
  visibility: hidden;
}
#main .title {
  top: 96px;
}
#main .title strong,
#main .title span {
  display: inline-block;
  margin-left: 4px;
  margin-bottom: -1px;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Microsoft Yahei', 'Helvetica Neue', SimHei;
  color: #fff;
  line-height: 1;
  vertical-align: bottom;
  _line-height: 1.3;
  _margin-bottom: -2px;
}
#main .title strong {
  margin-left: 10px;
  /*font-size: 30px;*/
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
#main .slogan {
  top: 180px;
  width: 528px;
  height: 74px;
  background: url(../img/slogan.png) no-repeat;
}
#main .intro {
  top: 330px;
  width: 460px;
  height: 159px;
  background: url(../img/intro.png) no-repeat;
}
#main .qrcode {
  top: 600px;
  width: 459px;
  height: 100px;
  background: url(../img/scaning.png) right center no-repeat;
}
#main .qrcode img {
  margin: -11px;
  width: 122px;
  height: 122px;
}
#main .phone {
	right: 0;
  top: 25px;
  width: 362px;
  height: 754px;
  background: url(../img/phone.png) no-repeat;
}
#main .phone .location {
  margin: 107px 0 0 28px;
  width: 308px;
  height: 24px;
  line-height: 24px;
  color: #E20000;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  /*background: rgba(0, 0, 0, .5);*/
}
#main .phone .viewport {
  margin: 9px 0 0 22px;
  width: 320px;
  height: 550px;
  overflow: hidden;
  background: url(../img/loading.gif) 50% 50% no-repeat;
}
#main .phone .viewport img {
  display: block;
  width: 100%;
  height: 100%;
}
#main .phone .viewport iframe {
  border: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* browser-upgrade for ie8- */
.browser-upgrade {
  padding: 8px 0;
  border-color: #EBCCD1;
  background-color: #F2DEDE;
  text-align: center;
  color: #A94442;
  font-size: 14px;
}
.browser-upgrade a {
  color: #A94442;
  font-weight: bold;
  text-decoration: underline;
}

#g-footer a {
  _color: #444;
}