@charset "utf-8";

a{text-decoration: none;}
i{font-style: normal;}
strong{
  font-weight: 700;
}
img{
  display: inline-block; 
}
body{
  min-width: 1000px;
  font: 12px/1 'Microsoft yahei';
}

.container{
  height: 945px;
}
.bg-head {
  background-color: rgba(51, 51, 51, .4);
  height: 75px;
  background-color: #333\0;
  *background-color: #333;
  filter: alpha(opacity=40);
}
.bg-head-nav {
  width: 1000px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.bg-head-nav a {
  display: inline-block;
  padding: 18px 0;
  text-decoration: none;
  color: #fff;
  text-align: center;
  font: 16px/1.2 'microsoft yahei';
  margin: 0 30px;
}
.bg-head-nav a i {
  font-size: 12px;
  color: #c6c6c6;
}
.bg-head-nav .introlink {
  margin-left: 100px;
}
.bg-head-nav .materiallink {
  margin-right: 100px;
}
.logo {
  position: absolute;
  top: -22px;
  left: 50%;
  margin-left: -166px;
  width: 191px;
  height: 98px;
}

/* decoration */
.decoration-container{
  background: url(../images/decoration_bg.jpg) no-repeat 50% 0;
 }
.container-menu{
  height: 81px;
  text-align: center;
  margin: 75px auto 40px;
}
.container-menu a{
  display: inline-block;
  width: 81px;
  line-height: 81px;
  margin: 0 10px;
  color: #5c6f78;
  font-size: 14px;
  background: url(../images/container_menu.png) no-repeat;
}
.container-menu a:hover, .container-menu .menu-clk{
  color: #fff;
  background: url(../images/container_menu.png) 0 -81px no-repeat;
}
.container-cont{
  text-align: center;
}
.container-cont-tq, .container-cont-yj, .container-cont-bh{
  width: 397px;
}
.container-cont span{
  display: inline-block;
  text-align: center;
}
.tq-cloud{
  width: 397px;
  height: 490px;
  background: url(../images/cloud_tq.png) no-repeat 50% 92%;
  position: relative;
}
.tq-cloud img {

}
.yj-cloud{
  width: 397px;
  height: 490px;
  background: url(../images/cloud_yj.png) no-repeat 50% 92%;
}
.bh-cloud{
  width: 397px;
  height: 490px;
  background: url(../images/cloud_bh.png) no-repeat 50% 92%;
}
.tq-cloud img, .yj-cloud img, .bh-cloud img{
  cursor: pointer;
}
.container-cont .tq-name, .container-cont .yj-name, .container-cont .bh-name{
  width: 170px;
  height: 80px;
  display: block;
  margin: -20px auto 0;
  background: url(../images/decoration_jobname.png) no-repeat 0 0;
}
.container-cont .tq-name{
  margin: -40px auto 0;
}
.container-cont .yj-name{
  background-position: -315px 0;
}
.container-cont .bh-name{
  background-position: -655px 0;
}

/* pet */
.pet-container{
  background: url(../images/pet_bg.jpg) no-repeat 50% 0;
 }
.pet-tab{
  font-size: 0;
 }
.pet-tab a{
  width: 200px;
  height: 70px;
  display: inline-block;
  margin: 0 7px;
  background: url(../images/pet_tab.jpg) no-repeat;
}
.pet-tab .pet-tab2{
  background-position: -210px 0;
}
.pet-tab .pet-tab3{
  background-position: -420px 0;
}
.pet-tab .pet-tab4{
  background-position: -630px 0;
}
.pet-tab .pet-tab1:hover, .pet-tab .pet-tab1.pet-tabhov{
  background-position: 0 -70px;
}
.pet-tab .pet-tab2:hover, .pet-tab .pet-tab2.pet-tabhov{
  background-position: -210px -70px;
}
.pet-tab .pet-tab3:hover, .pet-tab .pet-tab3.pet-tabhov{
  background-position: -420px -70px;
}
.pet-tab .pet-tab4:hover, .pet-tab .pet-tab4.pet-tabhov{
  background-position: -630px -70px;
}
.pet-main, .pet-main div{
  width: 810px;
  height: 400px;
  padding: 50px 0;
  margin: 0 auto;
  overflow: hidden;
}
.pet-main div{
  padding: 0;
}
.pet-main a{
  width: 82px; 
  height: 82px;
  float: left;
  filter:progid:DXImagetransform.Microsoft.Matrix(
    M11=0.707,M12=-0.707,
    M21=0.707,M22=0.707,
    SizingMethod='auto expand'
  );
  transform: rotate(45deg) translate(20px, 20px);
  background: url(../images/pet_shrink.png) no-repeat;
  margin: 0 20px;
  margin/*\**/: 0 18px\9;
  *margin: 0 5px;
  font-size: 0;
}

.pet-main .pet-main-all{
  *padding-left: 40px;
}
.pet-main-all a{
  *margin: 0 -15px;
}
.pet-main-all a:nth-child(3n){margin: 67px -35px;}
.pet-main-all a:nth-child(3n-1){margin: 132px -102px;}
.pet-main .petshrink-xt{
  background-position: -41px -556px;
}
.pet-main .petshrink-xjg{
  background-position: -145px -661px;
}
.pet-main .petshrink-qq{
  background-position: -136px -566px;
}
.pet-main .petshrink-jc{
  background-position: -127px -470px;
}
.pet-main .petshrink-jw{
  background-position: -231px -575px;
}
.pet-main .petshrink-db{
  background-position: -222px -481px;
}
.pet-main .petshrink-hs{
  background-position: -213px -384px;
}
.pet-main .petshrink-dl{
  background-position: -317px -489px;
}
.pet-main .petshrink-cc{
  background-position: -308px -394px;
}
.pet-main .petshrink-sxs{
  background-position: -299px -299px;
}
.pet-main .petshrink-xfs{
  background-position: -403px -403px;
}
.pet-main .petshrink-jl{
  background-position: -394px -308px;
}
.pet-main .petshrink-xem{
  background-position: -384px -212px;
}
.pet-main .petshrink-ml{
  background-position: -489px -317px;
}
.pet-main .petshrink-ss{
  background-position: -480px -222px;
}
.pet-main .petshrink-jm{
  background-position: -471px -127px;
}
.pet-main .petshrink-lh{
  background-position: -575px -231px;
}
.pet-main .petshrink-tl{
  background-position: -566px -136px;
}
.pet-main .petshrink-sis{
  background-position: -556px -41px;
}
.pet-main .petshrink-xts{
  background-position: -661px -145px;
}
.pet-main .pet-main-gj, .pet-main .pet-main-fy, .pet-main .pet-main-fz{
  padding-left: 40px;
}
.pet-main a span{
  width: 82px; 
  height: 82px;
  display: block;
  background-color: #333;
  position: relative;
  z-index: 9;
  filter:progid:DXImagetransform.Microsoft.Matrix(
    M11=0.707,M12=-0.707,
    M21=0.707,M22=0.707,
    SizingMethod='auto expand'
  ), alpha(opacity=60);
  cursor: pointer;
  opacity: .6;
  opacity: 1\9;
}

.detail-ico{
  width: 39px;
  height: 39px;
  display: block;
  margin: auto;
  margin/*\**/: -55px 0 0 38px\9;
  *margin: -84px 0 0 31px;
  background: url(../images/ico2.png) no-repeat 0 -148px;
  transform: rotate(-45deg) translate(43px, -50px);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.detail-tx{
  color: #29afff;
  width: 60px;
  height: 12px;
  font-size: 12px;
  display: block;
  margin/*\**/: 10px 0 0 28px\9;
  transform: rotate(-45deg) translate(69px, -30px);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.pet-page span, .slidepage{
  width: 40px;
  height: 40px;
  display: inline-block;
  background: url(../images/ico2.png) no-repeat 0 -64px;
  cursor: pointer;
  margin: 0 5px;
}
.pet-page .page-left:hover, .slidepage-left:hover{
  background-position: 0 -104px;
}
.pet-page .page-right, .slidepage-right{
  background-position: -50px -64px;
}
.pet-page .page-right:hover, .slidepage-right:hover{
  background-position: -50px -104px;
}

/* mount */
.mount-container{
  background: url(../images/mount_bg.jpg) no-repeat 50% 0;
 }
.mount-main{
  width: 850px;
  margin: auto;
  text-align: center;
}
.mountname{
  color: #f4f6f7;
  font: 14px/44px 'microsoft yahei';
}
.mount-main span{
  width: 150px;
  margin-right: 20px;
  float: left;
 }
.mount-main span .img{
  width: 150px;
  height: 150px;
  cursor: pointer;
}
.mount-main span.mount1 .img {
  background: url(../images/mount1.png);
}
.mount-main span.mount1 .img:hover {
  background: url(../images/mount1h.png);
}
.mount-main span.mount2 .img {
  background: url(../images/mount2.png);
}
.mount-main span.mount2 .img:hover {
  background: url(../images/mount2h.png);
}
.mount-main span.mount3 .img {
  background: url(../images/mount3.png);
}
.mount-main span.mount3 .img:hover {
  background: url(../images/mount3h.png);
}
.mount-main span.mount4 .img {
  background: url(../images/mount4.png);
}
.mount-main span.mount4 .img:hover {
  background: url(../images/mount4h.png);
}
.mount-main span.mount5 .img {
  background: url(../images/mount5.png);
}
.mount-main span.mount5 .img:hover {
  background: url(../images/mount5h.png);
}
.mount-main span.mount6 .img {
  background: url(../images/mount6.png);
}
.mount-main span.mount6 .img:hover {
  background: url(../images/mount6h.png);
}
.mount-main span.mount7 .img {
  background: url(../images/mount7.png);
}
.mount-main span.mount7 .img:hover {
  background: url(../images/mount7h.png);
}
.mount-main span.mount8 .img {
  background: url(../images/mount8.png);
}
.mount-main span.mount8 .img:hover {
  background: url(../images/mount8h.png);
}
.mount-main span.mount9 .img {
  background: url(../images/mount9.png);
}
.mount-main span.mount9 .img:hover {
  background: url(../images/mount9h.png);
}
.mount-main span.mount10 .img {
  background: url(../images/mount10.png);
}
.mount-main span.mount10 .img:hover {
  background: url(../images/mount10h.png);
}


/* decoration-pop */
.mask{
  position: fixed;
  _position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #333;
  opacity: .6;
  filter: alpha(opacity=60);
  z-index: 50;
  display: none;
}
.pop{
  width: 100%;
  position: fixed;
  top: 50%;
  margin-top: -290px;
  background-color: #e9edf4;
  z-index: 51;
  display: none;
}
.pop-main{
  width: 910px;
  padding-top: 40px;
  height: 540px;
  margin: 0 auto;
  position: relative;
}
.pop-x{
  width: 64px;
  height: 64px;
  overflow: hidden;
  display: block;
  position: absolute;
  top: 15px;
  right: -64px;
  cursor: pointer;
  background: url(../images/ico2.png) no-repeat;
}
.decoration-info{
  float: left;
  width: 456px;
  overflow: hidden;
}
.decoration-tab a{
  display: inline-block;
  width: 125px;
  color: #34434d;
  background-color: #bbc2c6;
  text-align: center;
  font: 700 16px/3 'microsoft yahei';
}
.decoration-tab a:hover, .decoration-tab .tab-hov{
  color: #fff;
  background-color: #34434d;
}
.decoration-intro{
  margin-top: 30px;
  color: #434850;
  width: 456px;
}
.decoration-name{
  color: #434850;
  font: 700 46px/1 'microsoft yahei';
}
.decoration-sname{
  display: inline-block;
  width: 64px;
  text-align: center;
  background-color: #838b98;
  font: 12px/23px 'microsoft yahei';
  color: #fff;
}
.decoration-intro h4{
  line-height: 48px;
  border-bottom: 1px solid #a8abaf;
  margin-bottom: 8px;
  display: inline-block;
}
.decoration-intro p, .pet-info p{
  padding-left: 18px;
  line-height: 20px;
}
.decoration-intro .intro-tt, .pet-info .intro-tt{
  background: url(../images/ico2.png) no-repeat -64px 8px;
  font: 700 12px/28px 'microsoft yahei';
}
.intro-tt i{
  font-weight: 400;
}
.decoration-img{
  width: 445px;
  overflow: hidden;
}

/* pet-pop */
.pet-pop .pop-main, .mount-pop .pop-main{
  width: 1000px;
}
.pet-pop .pop-x{
  right: 0;
}
.pet-img, .mount-img{
  float: left;
  margin: -20px 20px 0 0;
}
.petname, .mount-name{
  color: #2b3038;
  font: 700 48px/1 'microsoft yahei';
}
.petclass, .mountclass, .mountcolor{
  padding: 0 6px;
  line-height: 22px;
  display: inline-block;
  background-color: #4486b6;
  text-align: center;
  color: #fff;
  margin: 10px 5px 20px 0;
}
.pet-info{
  float: left;
  width: 510px;
}
.pet-info .intro-tt{
  font-size: 14px;
}
.pet-infotable{
  margin: 12px 0;
}
.pop table th, .pop table td{
  border: 1px solid #636b70;
  color: #636b70;
  line-height: 30px;
  text-align: center;
}
.petskill{
  position: relative;
}
.petskill-tp{
  float: left;
  width: 230px;
}
.petskill-ft{
  float: left;
  width: 200px;
  margin-left: 53px;
}
.petskill-tp .intro-tt, .petskill-ft .intro-tt{
  margin-bottom: 10px;
}
.petskill-tp img, .petskill-ft img{
  float: left;
  width: 57px;
  margin-right: 15px;
}
.skillinfo{
  width: 230px;
  background-color: #5b6168;
  padding: 6px 10px;
  position: absolute;
  left: -90px;
  top: 125px;
  color: #b7bdc4;
  line-height: 1.5;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: 52;
}
.arrow-u{
  width: 0;
  height: 0;
  overflow: hidden;
  border: 8px solid transparent;
  _border: 8px solid #fff;
  border-top: 0;
  border-bottom-color: #5b6168;
  position: absolute;
  left: 50%;
  margin-left: -4px;
  top: -8px;
  z-index: 52;
}
.slide{
  position: relative;
}
.slidepage{
  margin: 0;
  position: absolute;
  top: 50%;
  margin-top: -20px;
}
.slidepage-left{
  left: 0;
}
.slidepage-right{
  right: 0;
}
.slide-cont{
  width: 880px;
  height: 130px;
  margin: auto;
  overflow: hidden;
  position: relative;
}
.slidelist{
  font-size: 0;
  width: 3000px;
  position: absolute;
  left: 0;
}
.slidelist li{
  width: 50px;
  height: 50px;
  float: left;
  opacity: .6;
  opacity: 1\9;
  filter:progid:DXImagetransform.Microsoft.Matrix(
    M11=0.707,M12=-0.707,
    M21=0.707,M22=0.707,
    SizingMethod='auto expand'
  ), alpha(opacity=100);
  transform: rotate(45deg) translate(30px, 30px);
  background: url(../images/slide_pet.jpg) no-repeat;
  margin: 0 20px 0 10px;
  margin/*\**/: 30px 30px 0 0\9;
  *margin: 30px 10px 0 0;
  cursor: pointer;
}

.slidelist li:hover, .slidelist .slideitem-on{
  opacity: 1;
}
.slidelist .petitem-xt{
  background-position: -24px -338px;
}
.slidelist .petitem-xjg{
  background-position: -88px -402px;
}
.slidelist .petitem-qq{
  background-position: -82px -344px;
}
.slidelist .petitem-jc{
  background-position: -77px -286px;
}
.slidelist .petitem-jw{
  background-position: -141px -350px;
}
.slidelist .petitem-db{
  background-position: -135px -292px;
}
.slidelist .petitem-hs{
  background-position: -129px -234px;
}
.slidelist .petitem-dl{
  background-position: -193px -297px;
}
.slidelist .petitem-cc{
  background-position: -197px -239px;
}
.slidelist .petitem-sxs{
  background-position: -181px -181px;
}
.slidelist .petitem-xfs{
  background-position: -245px -245px;
}
.slidelist .petitem-xem{
  background-position: -234px -129px;
}
.slidelist .petitem-ss{
  background-position: -292px -135px;
}
.slidelist .petitem-jm{
  background-position: -286px -77px;
}
.slidelist .petitem-lh{
  background-position: -350px -140px;
}
.slidelist .petitem-sis{
  background-position: -338px -24px;
}
.slidelist .petitem-xts{
  background-position: -402px -88px;
}

/* mount-pop */
.mount-info{
  float: left;
  width: 400px;
  margin-top: 40px;
}
.mountintro{
  font-size: 14px;
  color: #636b70;
}
.mountintro{
  margin: 10px 0 20px;
}
.mountgetmethod{
  margin-top: 20px;
}
.slidelist-mount li{
  background: url(../images/slide_mount.jpg) no-repeat;
}
.slidelist .mountitem-bsjjs{
  background-position: -139px -411px;
}
.slidelist .mountitem-hx{
  background-position: -248px -302px;
}
.slidelist .mountitem-ln{
  background-position: -303px -247px;
}
.slidelist .mountitem-bw{
  background-position: -29px -521px;
}
.slidelist .mountitem-mx{
  background-position: -358px -192px;
}
.slidelist .mountitem-cj{
  background-position: -193px -356px;
}
.slidelist .mountitem-wj{
  background-position: -521px -28px;
}
.slidelist .mountitem-bh{
  background-position: -83px -466px;
}
.slidelist .mountitem-sn{
  background-position: -467px -83px;
}
.slidelist .mountitem-mw{
  background-position: -412px -138px;
}