/*reset*/
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, form, button, input, select { margin:0; }
ul, ol { padding-left: 0; list-style:none; }
body { font:12px/1.5 Tahoma, Arial, 'Lucida Grande', 'Hiragino Sans GB', 'Microsoft YaHei', \5b8b\4f53, sans-serif; color:#38485a; background:#f2f2f2; }
img { border:0; }
button, input, textarea, select { font-size:100%; font-family:Tahoma, Arial, 'Lucida Grande', 'Hiragino Sans GB', 'Microsoft YaHei', \5b8b\4f53, sans-serif; outline:none; }
table { border-collapse:collapse; border-spacing:0; }
caption, th, em, i { font-style:normal; font-weight:normal; }
caption, th { text-align:left; }
a { text-decoration:none; color:#38485a; }
a:hover { text-decoration:none; color: #f40;}
/*layout*/
.clearfix { *zoom:1;}
.clearfix:after { display:table; content:''; clear:both; }
#header, #content, #footer, .layout { *zoom:1;}
#header:after, #content:after, #footer:after, .layout:after { display:table; content:''; clear:both; }
#header, #content, #footer, .layout { margin-left:auto; margin-right:auto; }
.col-sub, .col-extra { float:left; }
.col-main { float:left; min-height:1px; width:100%; } /*bug fix: 主栏没有内容时，在 Firefox 和 Chrome 等浏览器下，布局不对*/
#content { position:relative; }
.no-scroll { overflow: hidden; }
/*page*/
body{ background: url(http://qhyxpic.image.kujiale.com/static/KONJJ3SDM5CUGQVUABAQAAAA_1920x2724.png) no-repeat center 0px #f2f2f2;}
#content { position: relative;}
.w1180{ width: 1180px; margin-left: auto; margin-right: auto}
.grid{position: relative}
.grid .btn { text-align: center; box-shadow: 0 1px 2px 0 rgba(0,0,0,.25)}
.g1{ height: 500px}
.g1:hover { cursor: pointer}
.para {position: absolute; left: 0}
.p1-1, .p1-2{ left: 530px}
.p1-1 { top: 93px; color: #fff;}
.p1-1 h1{font-size: 43px; line-height: 43px}
.p1-1 p{ padding-top: 43px; font-size: 31px; line-height: 31px}
.p1-1 p.small{font-size: 18px}
.p1-1 em{color: #FFFF00; font-size: 46px}
.p1-2 { top: 340px}
.p1-2 .btn{display: block; padding: 0; width: 240px; height: 70px;  line-height: 70px; font-size: 24px; color: #fff; background-color: #1891D4}
.p1-2 .btn:hover{ background-color: #3AB5F9}
.p1-3{ left: -65px; height: 5px; width: 579px; height: 579px; background: url(http://qhyxpic.image.kujiale.com/static/KONJNXKDM5CUGQVUABAQAAAA_579x579.png) no-repeat;}
.g2{height: 866px}
.p2-1 {top: 140px}
.p2-1 h2{line-height: 28px; font-size: 28px; color: #000}
.p2-1 p{margin-top: 28px; line-height: 16px; font-size: 16px; color: #999}
.p2-2 {top: 290px; width: 1306px}
.p2-2 .box{position: relative; float: left; margin-right: 125px; width: 310px; height: 435px; text-align: center; opacity: 0; filter:alpha(opacity=0)}
.p2-2 .box.active:hover{ cursor: pointer; -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px)
}
.p2-2 .box .num {z-index: 10; position: absolute; left: 0; top: 0; display: block; width: 60px; height: 60px; line-height: 66px; color: #fff; font-size: 34px; border-radius: 50%}
.p2-2 .bd{z-index: 5; position: absolute; top: 30px; width: 280px; color: #000; background-color: #E9E9E9}
.p2-2 .bd, .p2-2 .btn{left: 30px}
.p2-2 .bd h3{padding: 18px; line-height: 18px; font-size: 18px}
.p2-2 .bd .pic{margin: 0 auto; width: 240px; height: 240px}
.p2-2 .bd .pic .mask{ width: 100%; height: 100%; background:#fff; opacity: 0; filter:alpha(opacity=0)}
.p2-2 .box:hover .bd .pic .mask{ width: 100%; height: 100%; background:#fff; opacity: 0.60; filter:alpha(opacity=60)}
.p2-2 .bd  p{padding: 20px; line-height: 16px; font-size: 16px}
.p2-2 .btn{display: block; position: absolute; top: 390px; padding: 0; width: 280px; height: 45px; line-height: 45px; font-size: 18px; color: #fff}
.p2-2 .b1 .num, .p2-2 .b1 .btn{background-color: #F26D7E}
.p2-2 .b1 .num{box-shadow: 0 3px 0 0 #CC4657}
.p2-2 .b1 .pic{background: url(http://qhyxpic.image.kujiale.com/static/KOMVIA2DM5CUGQVUABAQAAAA_240x240.jpg) no-repeat}
.p2-2 .b2 .num, .p2-2 .b2 .btn{background-color: #3AB5F9}
.p2-2 .b2 .num{box-shadow: 0 3px 0 0 #1991D4}
.p2-2 .b2 .pic{background: url(http://qhyxpic.image.kujiale.com/static/KOMVIA2DM5CUGQVUAFAQAAAA_240x240.jpg) no-repeat}
.p2-2 .b3 .num, .p2-2 .b3 .btn{background-color: #EFBE3D}
.p2-2 .b3 .num{box-shadow: 0 3px 0 0 #D29E15}
.p2-2 .b3 .pic{background: url(http://qhyxpic.image.kujiale.com/static/KOMVIA2DM5CUGQVUAJAQAAAA_240x240.jpg) no-repeat}
.g3{ height: 670px; width: 1180px; overflow: hidden;}
.p3-1 {top: 53px}
.p3-1 h2{line-height: 28px; font-size: 28px; color: #000}
.p3-1 p{margin-top: 28px; line-height: 16px; font-size: 16px; color: #999}
.p3-2 {top: 215px; width: 1180px; height: 200px}
.p3-2 .fuli{position: absolute; left: 0; height: 50px; width: 1180px; background: url(http://qhyxpic.image.kujiale.com/static/KONJTXKDM5CUGQVUABAQAAAA_50x40.png) no-repeat left; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%)}
.p3-2 .fuli.active{-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0)}
.p3-2 .f1 {top: 0}
.p3-2 .f2 {top: 50px}
.p3-2 .f3 {top: 100px}
.p3-2 .f4 {top: 150px}
.p3-2 .fuli p{padding-left: 80px; line-height: 50px; font-size: 20px; color: #000}
.p3-3 .btn { display: block; position: absolute; left: 0; top: 522px; width: 246px; height: 70px; line-height: 70px; font-size: 24px; color: #fff; background-color: #E03A4F}
.p3-3:hover .btn{ background-color: #F26D7E}
.g4{height: 718px; overflow: hidden}
.p4-1{top: 53px; color: #fff}
.p4-1 h2{line-height: 28px; font-size: 28px}
.p4-1 p{margin-top: 28px; line-height: 16px; font-size: 16px}
.p4-2 {top: 178px}
.p4-2 .media{display: block; float: left; width: 180px; height: 57px; margin-right: 6px; text-indent: -999px;}
.p4-2 .m1{background: url(http://qhyxpic.image.kujiale.com/static/KOMVIBCDM5CUGQVUAJAQAAAA_180x57.jpg) no-repeat}
.p4-2 .m2{background: url(http://qhyxpic.image.kujiale.com/static/KOMVIBCDM5CUGQVUANAQAAAA_180x57.jpg) no-repeat}
.p4-2 .m3{background: url(http://qhyxpic.image.kujiale.com/static/KOMVIBKDM5CUGQVUABAQAAAA_180x57.jpg) no-repeat}
.p4-2 .m4{background: url(http://qhyxpic.image.kujiale.com/static/KOMVIBKDM5CUGQVUAFAQAAAA_180x57.jpg) no-repeat}
.p4-3 {top: 430px; width: 100%; height: 210px; text-align: center; -webkit-transform: scale(5); -moz-transform: scale(5); -ms-transform: scale(5); -o-transform: scale(5); transform: scale(5); opacity: 0; filter:alpha(opacity=0)}
.p4-3 p{padding: 0; line-height: 30px; font-size: 30px; color: #000}
.p4-3:hover p{ color: #F26D7E}
.p4-3 .btn { display: block; position: absolute; left: 467px; top: 100px; width: 246px; height: 70px; line-height: 70px; font-size: 24px; color: #fff; background-color: #E03A4F}
.p4-3:hover .btn{ background-color: #F26D7E}
.p1-1, .p1-2 .btn, .p1-3, .p2-1, .p2-2 .box, .mask, .p3-1, .fuli, .p4-3, .p4-3 p, .p4-3 .btn{-webkit-transition: all 500ms ease-out 0s; -moz-transition: all 500ms ease-out 0s; -o-transition: all 500ms ease-out 0s; transition: all 500ms ease-out 0s;}
.p1-1, .p1-3, .p2-1, .p3-1{-webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);}
.p2-2 .box.active{-webkit-animation: ANIMATE_TEXT 0.4s cubic-bezier(0.3, 2, 0.35, 1.45); -moz-animation: ANIMATE_TEXT 0.4s cubic-bezier(0.3, 2, 0.35, 1.45); -ms-animation: ANIMATE_TEXT 0.4s cubic-bezier(0.3, 2, 0.35, 1.45); -o-animation: ANIMATE_TEXT 0.4s cubic-bezier(0.3, 2, 0.35, 1.45); animation: ANIMATE_TEXT 0.4s cubic-bezier(0.3, 2, 0.35, 1.45); opacity: 1; filter:alpha(opacity=100) }
.p1-1.active, .p1-3.active, .p2-1.active, .p3-1.active, .p4-3.active{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; filter:alpha(opacity=100)}
@-webkit-keyframes ANIMATE_TEXT {
  from {
    -webkit-transform: scale(0) translateX(-100px);
  }

  to {
    -webkit-transform: scale(1) translateX(0);
  }
}
@keyframes ANIMATE_TEXT {
  from {
    transform: scale(0) translateX(-40%);
  }

  to {
    transform: scale(1) translateX(0%);
  }
}
#footer .wrap{ padding: 10px; text-align: center;}
/*loginbar*/
.close{ color: #fff; font-size: 24px}
.fs18 { font-size:18px; }
.fs14 { font-size:14px; color: #ccc; margin-top: 5px;}
.loginbar-bg{ position: fixed; left: 0; bottom: 0; height: 90px; width: 100%; background: #000; opacity: .8; filter:alpha(opacity=80); z-index: 100; _position: absolute; _top: expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight); z-index: 1000;}
.loginbar{ position: fixed; bottom: 0; height: 90px; width: 100%; z-index: 101; _position: absolute; _top: expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight + 35); z-index: 1001;}
.loginbar .join{ padding-top: 15px; float: left; height: 110px; width: 50%; color: #fff;}
.loginbar .login{ float: left; height: 110px; width: 25%;}
.loginbar .login .email a{ margin: 0 5px; text-decoration: underline;}
.loginbar .like{ position: relative; float: right; height: 95px; padding-top: 10px; width: 210px;}
.loginbar .like .qr{position: absolute; top: 8px; right: 0; }
.loginbar .like .qr img{width: 75px; height: 75px;}
.loginbar .close{position: absolute; right: 0; top: 0; height: 40px; line-height: 40px; width: 40px;}