@charset "utf-8";

/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline; list-style: none;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5; font-size: 14px; font-family: Microsoft YaHei; }
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
select, input, img { vertical-align: middle; outline: none;border:0 }
a { text-decoration: none;  blr: expression(this.onFocus=this.blur());outline: none; }
a:hover {  text-decoration: none; }
a:focus{ outline: none;}
.ovf{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-ms-text-overflow: ellipsis;-o-text-overflow: ellipsis;-moz-binding: url("ellipsis.xml#ellipsis");}
.cl:after { content: ""; display: block; clear: both; }
.cl { zoom: 1; }
.fl { float: left; }
.fr { float: right;}
.mb2{margin-bottom: 20px;}
.pt230{ padding-top: 230px;}
.ptb{ padding: 168px 0 78px 0;}
.pt54{ padding-top:54px;}
.wrap1050{ width: 1050px; margin: 0 auto; position: relative; z-index: 2;}
.wrap1200{ width: 1200px; margin: 0 auto; position: relative; z-index: 2;}

.container{ position: relative; z-index: 9; min-height: 1030px;}
.star{ }
.star span{ display: inline-block; width: 4px; height: 4px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #fff; -webkit-box-shadow:0 0 10px rgba(255, 255, 255, .8); -moz-box-shadow:0 0 10px rgba(255, 255, 255, .8); box-shadow:0 0 10px rgba(255, 255, 255, .8);}
.home{ background: url(http://m.laohu.com/_s/m12/body.png) no-repeat center top; min-height: 1080px;}
.cover{ background: url(http://m.laohu.com/_s/m12/cover.jpg) no-repeat center top; min-height: 1080px;}
.logo{ display: inline-block; width: 105px; height: 131px; background: url(http://m.laohu.com/_s/m12/LOGO.png) no-repeat; position: absolute;  top:23px; left:-38px;}
.enter{ display: inline-block; width: 130px; height: 55px; background: url(http://m.laohu.com/_s/m12/enter.png) no-repeat; position: absolute; top:28px; right: -32px;z-index: 3}
.enter:hover{ background: url(http://m.laohu.com/_s/m12/enter-hover.png) no-repeat;}
.faq{ display: inline-block; width: 130px; height: 55px; background: url(http://m.laohu.com/_s/m12/FAQ.png) no-repeat; position: absolute; top:100px; right: -32px;z-index: 3}
.faq:hover{ background: url(http://m.laohu.com/_s/m12/FAQ-hover.png) no-repeat; }
.tit0{ padding-bottom: 10px; position: relative;  width: 1050px; height: 370px; text-align: center;}
.home .desc{ text-align: center; margin-bottom: 56px;}
.cover .logo{ left:37px;}
.cover .enter,.cover .faq{ right:43px;}


.btnList { height: 60px; text-align: center;}
.btnList .abtn{ width: 236px; height: 60px; display: inline-block; margin: 0 22px;}
.btnList .btn1{ background: url(http://m.laohu.com/_s/m12/btn1.png) no-repeat center 0;}
.btnList .btn1:hover{ background: url(http://m.laohu.com/_s/m12/btn1.png) no-repeat center -73px;}
.btnList .btn2{ background: url(http://m.laohu.com/_s/m12/btn2.png) no-repeat center 0;}
.btnList .btn2:hover{ background: url(http://m.laohu.com/_s/m12/btn2.png) no-repeat center -73px;}
.btnList .btn3{ background: url(http://m.laohu.com/_s/m12/btn3.png) no-repeat center 0; position: relative;}
.btnList .btn3:hover{ background: url(http://m.laohu.com/_s/m12/btn3.png) no-repeat center -73px;}

.btnList .btn3 img{ width: 200px; height: 200px; position: absolute; left:50%; top:70px; margin-left: -100px; display: none;}
.btnList .btn3:hover img{ display: block;}
.tit2{ text-align: center;}
.cardBox{ height: 477px;}
.cardTab{ height: 116px; line-height: 116px; background: url(http://m.laohu.com/_s/m12/split.png) no-repeat center center;margin-top: -72px; float: left; width: 100%;}
.cardTab ul{  width: 510px; margin: 0 auto;vertical-align: middle; font-size: 0;}
.cardTab li{ width: 116px; height: 116px; float: left; text-align: center; line-height: 116px; margin-right: 15px; cursor: pointer; position: relative; display: inline-block;}
.cardTab li img{ position: relative; z-index: 3;}
.cardTab li{ background: url(http://m.laohu.com/_s/m12/tabbg.png) no-repeat center center;}
.cardTab .tabhover{ position: absolute; width: 100%; height: 100%; left:0; top:0; background: url(http://m.laohu.com/_s/m12/tabhover.png) no-repeat center top; display: none;}
.cardTab li:hover .tabhover{ display: block; -webkit-animation: movecircle 5s linear infinite;-moz-animation: movecircle 5s linear infinite;-ms-animation: movecircle 5s linear infinite;-o-animation: movecircle 5s linear infinite;animation: movecircle 5s linear infinite;}
.cardTab li.on{background: url(http://m.laohu.com/_s/m12/tabhover.png) no-repeat center top;}
.cardTab li.on:hover .tabhover{ display: none;}
.cardTab .tab4{ margin-right: 0;}


.cardBox li{ width: 310px; height: 477px; float: left; margin-right: -10px; cursor: pointer; transition: all 0.6s; -webkit-transform: all 0.6s;-ms-transform: all 0.6s;-moz-transform: all 0.6s;-0-transform: all 0.6s;}
.cardBox li:hover{transform: scale(1.2); -webkit-transform: scale(1.2);  -ms-transform:scale(1.2); -moz-transform: scale(1.2);-0-transform: scale(1.2);}
.cardBox .item{ display: none;}
.cardBox .card5,.cardBox .card6,.cardBox .card7{width: 320px; margin-right: 0;}
.cardBox .card5 img{ margin: -77px 0 0 0;}
.cardBox .card5{ margin-left: 110px;}
.cardBox .center{ text-align: center;}
.cardBox .desc p{ font-size: 20px; color: #fff; line-height: 36px;}
.cardBox .desc{ padding-bottom: 30px; padding-top: 4px;}

.prompt{ width: 1920px; height: 580px; background: url(http://m.laohu.com/_s/m12/prompt.png) no-repeat center top; position: fixed; left:0; top:50%; margin-top: -200px; z-index: 9999; display: none;}
.prompt .close{ width: 83px; height: 95px; line-height: 95px; text-align: center; position: fixed; left:50%; margin-left: -41px; top:50%; background:url(http://m.laohu.com/_s/m12/closebg.png) no-repeat center center; margin-top: 272px; display: inline-block;}
.prompt .closehover{ position: absolute; width: 83px; height: 95px; background: url(http://m.laohu.com/_s/m12/closehover.png) no-repeat center center;} 
.prompt .close img{ position: relative; z-index: 9;}
.prompt .close:hover .closehover{-webkit-animation: movecircle 5s linear infinite;-moz-animation: movecircle 5s linear infinite;-ms-animation: movecircle 5s linear infinite;-o-animation: movecircle 5s linear infinite;animation: movecircle 5s linear infinite;}

.popbox{ width: 1080px; position: fixed; margin: 0 auto; height: 388px; left:50%; margin-left: -540px; top:50%; margin-top: -120px;}
.left{ width: 698px; height: 387px; background: url(http://m.laohu.com/_s/m12/left.png) no-repeat center top; float: left; overflow: hidden;}
.right{ width: 440px; float: left; margin-left: -40px; height: 100px;}
.left img{ width: 596px; height: 335px; margin: 30px 0 0 20px;}

.area{ height: 388px; position: relative; }
.area .row{ width: 110%; height: 388px; position: absolute; left:0; top:0; opacity: 0; filter:alpha(opacity=0); z-index: 3; overflow: hidden;}
.right .tit5{ padding-top: 84px; text-align: center; height: 70px; background: url(http://m.laohu.com/_s/m12/titbg.png) no-repeat center bottom; margin-bottom: 24px;}
.right .desc{ color: #b2d0ea; font-size: 18px;}
.right .desc p{ line-height: 36px; padding-left: 10px;}

.button{ width: 73px; height: 47px; display: inline-block; position: absolute; top:50%; margin-top: -24px; z-index: 99; cursor: pointer;}
.btnNext{ right:-100px; background: url(http://m.laohu.com/_s/m12/btnRight.png) no-repeat center top;}
.btnNext:hover{ right:-100px; background: url(http://m.laohu.com/_s/m12/btnRight-hover.png) no-repeat center top;}
.btnPrev{ left:-100px; background: url(http://m.laohu.com/_s/m12/btnLeft.png) no-repeat center top;}
.btnPrev:hover{ left:-100px; background: url(http://m.laohu.com/_s/m12/btnLeft-hover.png) no-repeat center top;}
.area{ display: none;}
.layer{ position: fixed; left:0; top:0; width: 100%;height: 100%; background: rgba(0,0,0,.0); z-index: 999; display: none;}
.tit2.animate{animation:fadeInDownBig 0.4s ease-out 0s forwards; -webkit-animation: fadeInDownBig 0.4s ease-out 0s forwards;}
.animate ul{animation:fadeInDownBig 1s ease-out 0s forwards; -webkit-animation: fadeInDownBig 1s ease-out 0s forwards;}
.animate .group1{animation:fadeInDownBig 0.6s ease-out 0s forwards; -webkit-animation: fadeInDownBig 0.6s ease-out 0s forwards;}
.animate .group2{animation:fadeInDownBig 1.6s ease-out 0s forwards; -webkit-animation: fadeInDownBig 1.6s ease-out 0s forwards;}
.animate .group3{animation:fadeInDownBig 3s ease-out 0s forwards; -webkit-animation: fadeInDownBig 3s ease-out 0s forwards;}
.animate .tit4,.animate .group4{animation:fadeInDownBig 0.6s ease-out 0s forwards; -webkit-animation: fadeInDownBig 0.6s ease-out 0s forwards;}

.animate .star1{ position: absolute; left:18%; top:40%; animation: starFlick 2s ease-out infinite;  
    -webkit-animation: starFlick 2s ease-out infinite;}
.animate .star2{ position: absolute; left:5%; top:18%; animation: starFlick 3s ease-out infinite;  
    -webkit-animation: starFlick 3s ease-out infinite;}
.animate .star3{ position: absolute; left:36%; top:20%; animation: starFlick 5s ease-out infinite;  
    -webkit-animation: starFlick 5s ease-out infinite;}
.animate .star4{ position: absolute; left:80%; top:40%; animation: starFlick 4s ease-out infinite;  
    -webkit-animation: starFlick 4s ease-out infinite;}
.animate .star5{ position: absolute; left:10%; top:96%; animation: starFlick 2s ease-out infinite;  
    -webkit-animation: starFlick 2s ease-out infinite;}
.animate .star6{ position: absolute; right:20%; top:16%; animation: starFlick 6s ease-out infinite;  
    -webkit-animation: starFlick 6s ease-out infinite;}
.animate .star7{ position: absolute; right:10%; top:40%; animation: starFlick 7s ease-out infinite;  
    -webkit-animation: starFlick 7s ease-out infinite;}
.animate .star8{ position: absolute; right:10%; top:60%; animation: starFlick 5s ease-out infinite;  
    -webkit-animation: starFlick 5s ease-out infinite;}
.animate .star9{ position: absolute; right:10%; top:80%; animation: starFlick 6s ease-out infinite;  
    -webkit-animation: starFlick 6s ease-out infinite;}
.animate .star10{ position: absolute; right:35%; top:90%; animation: starFlick 5s ease-out infinite;  
    -webkit-animation: starFlick 5s ease-out infinite;}

.tit0.animate{animation: fadeInDownBig 0.6s ease-out forwards;  
    -webkit-animation: fadeInDownBig 0.6s ease-out forwards;}
.animate.deschome{animation: fadeInDownBig 1.6s ease-out forwards;  
    -webkit-animation: fadeInDownBig 1.6s ease-out forwards;}
.btnList.animate{animation: fadeInUpBig 2s ease-out forwards;  
    -webkit-animation: fadeInUpBig 2s ease-out forwards;}

.light.animate .drift{animation: sunshine 3s ease-out 2s forwards;  
    -webkit-animation: sunshine 3s ease-out 2s forwards;}
.light{ width: 1052px; height: 450px; position: absolute; overflow: hidden; left:0; top:230px;}
.light .drift{position: absolute; width:200px; height: 100%; top: 0; left: -400px; overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
-webkit-transform: skewX(-25deg);
-moz-transform: skewX(-25deg); }


/**360度选装**/
@-webkit-keyframes movecircle{
  0%{-webkit-transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes movecircle{
  0%{-moz-transform:rotate(0deg)}
  100%{-moz-transform:rotate(360deg)}
}
@-ms-keyframes movecircle{
  0%{-ms-transform:rotate(0deg)}
  100%{-ms-transform:rotate(360deg)}
}
@-moz-keyframes movecircle{
  0%{-moz-transform:rotate(0deg)}
  100%{-moz-transform:rotate(360deg)}
}
@keyframes movecircle{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}


@-webkit-keyframes fadeInDownBig
{
  0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}
  100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInDownBig{
  0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}
  100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes fadeInUpBig
{
    0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes fadeInUpBig{
    0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}
    100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
}

@keyframes sunshine {  
    0% {  
        left: -400px;  
    }
    100%{
        left: 1500px;
    } 
}
@-webkit-keyframes sunshine {  
    0% {  
        left: -400px;  
    }
    100%{
        left: 1500px;
    } 
}

@keyframes starFlick {  
    0% {  
        opacity: 1;  
    }
    33%{
        opacity: 0.2;
    }  
    66% {  
        opacity: 1;  
    } 
    100%{
        opacity: 0.2
    } 
}
@-webkit-keyframes starFlick {  
    0% {  
        opacity: 1;  
    }
    33%{
        opacity: 0.2;
    }  
    66% {  
        opacity: 1;  
    } 
    100%{
        opacity: 0.2
    } 
}