﻿*{ margin:0; padding:0; list-style: none; text-decoration: none;  }
.con{ width:100%;overflow: hidden; }
.w1200{ width:1200px; margin:0 auto; height:100%; position:relative;}


.pagination {
    position: absolute;
    z-index: 20;
   
    bottom: 10px;
    text-align: center;
    width:100%;
  }
  .swiper-pagination-switch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #555;
    margin: 0 0px 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
    text-align: center;
    margin:0 6px;
  }
  .swiper-active-switch {
    background: #fff;
  }


.device {
    width: 100%;
    position: relative;
    padding-top: 20%;
    /* overflow: hidden; */
}

.device .arrow-left {
    /* background: url(../image/icon.png) no-repeat 0 -174px; */
    position: absolute;
    left: 0;
    top: 45%;
    margin-top: -15px;
    width: 67px;
    height: 67px;
    z-index: 12;
    background:rgba(0,0,0,0.7);
    border-radius: 50%;
}
.device .arrow-left i,.device .arrow-right i{background:url(../image/icon.png) no-repeat 0 -174px;  display: block; width:17px; height:31px;  margin:0 auto; margin-top:17px;}
.device .arrow-left i{  background-position:-68px -49px; }
.device .arrow-right i{ background-position:-98px -49px;}
.device .arrow-left:hover i{
    background-position:-68px -80px;
}
.device .arrow-right:hover i{
    background-position:-98px -80px;
}

.device .arrow-right {
    position: absolute;
    right: 0;
    top: 45%;
    margin-top: -15px;
    width: 67px;
    height: 67px;
    z-index: 12;
    background:rgba(0,0,0,0.7);
    border-radius: 50%;
}

.device .arrow-left,
.device .arrow-right {
    opacity: 0.85;
    transition: .5s;
    z-index: 2;
   
}

.device .arrow-left:hover,
.device .arrow-right:hover {
    opacity: 1;
}
.index-banner.swiper-container {
    width: 100%;
    height: 100%;
}

.index-banner .content-slide {
    padding: 20px;
    color: #fff;
}

.index-banner .swiper-slide img {
    width: 100%;
}

.device .pagination {
    position: absolute;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 2;
    bottom:20px !important;
}

.device .pagination span {
    display: inline-block;
    width: 15px;
    height: 15px;
    background: #cccccc;
    border-radius: 50%;
    margin: 0 12px;
}

.device .pagination span.swiper-active-switch {
    background: #ff7800;
}

.tab-w{
    width:100%;
    height:520px;
}
.tab-w .crumbs{ width:100%; height:38px;padding-top:10px;}
.tab-w .crumbs i{ display: block;float:left;}
.tab-w .crumbs span{ float:left;}
.tab-w .crumbs i.home{ width:17px;height:16px;}
.tab-w .crumbs i.line{ width:1px; height:29px; background:#a5a5a6;}
.tab-w .crumbs i.yuan{ width:31px; height:31px; background:url(../image/icon1.png) no-repeat 0 -318px; }
.tab-w .price{ width:100%; height:643px;}
.tab-w .price h2{ display: block; width:100%; text-align: center; font-size:30px; color:#4d4d4d; margin-top:50px;}
.tab-w .price .btn{ width:100%; height:65px; line-height: 65px; text-align: center; margin-top:40px;}
.tab-w .price .btn li{ float:left; width:33.33%; height:100%; border:1px solid #d4d4d4;box-sizing: border-box;}
.tab-w .price .btn li a{ display: block; width:100%;height:100%; color:#505050;}
.tab-w .price .btn li.l2{ border-left: none;border-right:none; }
.tab-w .price .btn li.l3{  }
.tab-w .price .btn li.l4{ display: none;}
.tab-w .price .btn li.active a{ background:#ff7800; color:#fff; }

.tab-w .price .buy-con{
    margin-top:53px;
}
.tab-w .price .buy-con .l{
    float:left;
}
.tab-w .price .buy-con .r{
    width:653px;
    padding-left:40px;
    float:left;
    position: relative;
}

.tab-w .price .buy-con .r h4{ font-size:24px; font-weight: normal;}
.tab-w .price .buy-con .r .tag{ display: block; width:100%;overflow: hidden; margin:12px 0;}
.tab-w .price .buy-con .r .tag i{ font-style: normal; display: block; border:1px solid #faa716; padding:8px 10px; float:left; margin:0 10px; font-size:12px;}
.tab-w .price .buy-con .r .tag i:nth-of-type(1){ margin-left:0;}
.tab-w .price .buy-con .r p{ color:#424242; font-size:14px; display: block; margin-top:10px;}
.tab-w .price .buy-con .r .yu{ display: block; width:143px; height:52px; border-radius: 30px; color:#fff; text-align: center; background:#ff7902; line-height:52px; font-size:22px; margin-top:60px;}
.tab-w .price .buy-con .r .code{ width:132px; height:132px;  bottom:-30px; left:220px;}
.tab-w .price .buy-con .r .code img{ width:100%;}
.tab-w .price .buy-con .r .code span{ color:#000; font-size:18px;margin-top:-5px; text-align: center; display: block; width:100%; text-align: center;  font-weight: bold;}

.jin{ width:100%;height:1080px; background:url(../image/jin.jpg) center no-repeat fixed; overflow: hidden;}
.jin .box{ width:100%; height:927px; background:#fff;margin-top:70px; float:left; border-radius: 10px;}
.jin .box h4{ display: block; width:100%; text-align: center; color:#ff7d00; font-size:24px; margin-top:30px; margin-bottom:30px;}
.jin .box .tabel{ display: block; margin:0 auto;margin-top:20px;}

.jin2{ height: auto;}
.jin2 .box{ height:auto; padding-bottom:30px;margin-bottom:60px;}

.price-list{ padding:0 40px; }
.price-list li{ overflow: hidden; border-top:1px solid #dfdfdf;padding:15px 0;position:relative;}
.price-list li:hover{ background:#f7f7f7;}
.price-list li strong{ float:left; color:#444444; margin-left:20px; position:absolute; left:0; color:#444444; padding-top:6px; font-size: 16px; font-weight: bold;}
.price-list li span{ float:left; float:right; color:#ff6c00; padding-top:4px;  font-size: 16px; font-weight: bold; }
.price-list li a{ float:left;float:right; color:#ff6c00; margin-left:100px; margin-right:20px; border:1px solid #ff6c00; border-radius: 20px;font-size:14px; padding:6px 8px;}
.price-list li p{ float:left; margin-left:200px;color:#545454; font-size:14px; display: block; padding:6px; }



.bei{ padding-left:5%;}
.bei .title{ display: block; width:100%; overflow: hidden; margin-bottom:20px; margin-top:20px;}
.bei .title i{ font-style:normal; display: block; width:23px; height:23px; background:#ff7200; text-align: center; border-radius: 50%; color:#fff; float:left;}
.bei .title span{ float:left; margin-left:14px; color:#5e5e5e;}

.bei ul{  border-bottom:1px solid #d7d7d7; width:90%; padding-bottom:20px;position:relative;}
.bei ul li{ display: block; width:100%; overflow: hidden; margin-bottom:20px;}
.bei ul li span{  display: block; width:21px; height:21px; float:left;font-size:12px; line-height: 21px; margin-right:10px; background:#ff7200; border-radius: 50%; text-align: center; color:#fff;}
.bei ul li p{ float:left; color:#5a5a5a; font-size:14px; line-height: 24px;}

.bei ul .bing1{ position:absolute; right:0; top:0;}
.bei ul .bing2{ position:absolute; right:0; top:-30px;}

.bei .vipT{ text-align: left !important;}
.bei .cardBox{ }
.bei .cardBox li{ width:220px; height:207px; float:left; margin-right:34px;}
.bei .cardBox li img{ }
.bei .cardBox li .tx{ display: block; width:100%; text-align: center; margin-top:6px;}
.bei .cardBox li .tx span{ color:#f16600;}





/* 头部盒子 */
.top_case {
    height: 165px;
    width: 100%;
    position: relative;
}

.top_case .buy {
    display: block;
    position: absolute;
    top: 36px;
    right: 0px;
    width: 200px;
    cursor: pointer;
}

.top_case .zs {
    display: block;
    position: absolute;
    top: 7px;
    left: 28px;
    width: 200px;
}

.tab_case {
    height: 55px;
    background: url("https://bj.happyvalley.cn/buy/css/images/new/tab_bg.png") no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    top: 110px;
    width: 100%;
}

.tab_case .tab_item {
    width: 24.56%;
    background: none;
    line-height: 55px;
    height: 55px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.tab_case .active {
    background-color: rgb(226, 67, 19);
}

/* 中部盒子 */
.min_case {
    margin-top: 20px;
    padding:0 50px;
}

.min_case .min .map_case {
    border-top: 1px solid rgb(241, 102, 0);
}

.min_case .min .map_case>.title {
    text-align: center;
    font-size: 24px;
    color: rgb(241, 102, 0);
    height: 100px;
    line-height: 100px;
    font-weight: 600;
}

.min_case .min .map_case .map1 {
    width: 630px;
    display: block;
    margin: 0px auto;
}

.min_case .my_tb {
    width: 100%;
    border-left: 1px solid rgb(146, 146, 146);
    border-top: 3px solid rgb(248, 133, 26)
}

.min_case .my_tb tr td {
    border-right: 1px solid rgb(146, 146, 146);
    border-bottom: 1px solid rgb(146, 146, 146);
    height: 60px;
    text-align: center;
    color: rgb(111, 111, 111);
    font-size: 14px;
}

.min_case .my_tb .head {
    color: rgb(241, 102, 0);
    font-size: 24px;
    padding: 20px;
    text-align: left;
    height: auto;
}

.min_case .my_box {
    width: 100%;
    position: relative;
    border-bottom: 1px solid rgb(241, 102, 0);
    margin-top: 35px;
    padding-bottom: 40px;
}

.min_case .my_box .bg_zs01 {
    position: absolute;
    width: 180px;
    top: 6px;
    right: 10px;
}

.min_case .my_box .bg_zs02 {
    position: absolute;
    width: 180px;
    top: 6px;
    right: 0px;
}

.min_case .my_box .bg_zs03 {
    position: absolute;
    width: 130px;
    top: 6px;
    right: 10px;
}

.min_case .my_box>.title {
    height: 15px;
    border-left: 3px solid rgb(241, 102, 0);
    line-height: 15px;
    font-size: 16px;
    padding-left: 10px;
}

.min_case .my_box ul {
    margin-top: 10px;
    width: 100%;
    height: auto;
}

.min_case .my_box ul li {
    list-style: none;
    height: 21px;
    line-height: 21px;
    margin: 7px 0px;
    font-size: 14px;
    width: 100%;
    height: auto;
}

.min_case .my_box ul li .xh {
    float: left;
    width: 21px;
    height: 21px;
    border-radius: 100%;
    color: #fff;
    background-color: rgb(241, 102, 0);
    margin-left: 15px;
    text-align: center;
}

.min_case .my_box ul li .font {
    float: left;
    margin-left: 10px;
    color: rgb(111, 111, 111);
}

.min_case .my_box ul li .clear {
    clear: both;
}

.min_case .my_box .big_title {
    margin-left: 10px;
    font-size: 24px;
    color: rgb(241, 102, 0)
}

.min_case .my_box>.font {
    margin-left: 10px;
    font-size: 14px;
    color: rgb(86, 86, 86);
    margin-top: 20px;
    line-height: 30px;
}

.min_case .my_box .card_case {
    margin-top: 20px;
    width: 100%;
    text-align: center;
}

.min_case .my_box .card_case .card {
    display: inline-block;
    margin: 0px 15px;
    text-align: center;
    font-size: 18px;
}

.min_case .my_box .card_case .card img {
    width: 220px;
}

.min_case .my_box .card_case .card .font {
    margin-top: 10px;
}

.min_case .my_box .card_case .card .font .org {
    color: rgb(241, 102, 0)
}



.color1{ color:#faa716 !important; border:1px solid #faa716 !important;}

.color2{ color:#9fca28 !important; border:1px solid #9fca28 !important;}
.color3{ color:#eb2727 !important; border:1px solid #eb2727 !important;}
.color4{ color:#f15b47 !important; border:1px solid #f15b47 !important;}
.color5{ color:#ec008c !important; border:1px solid #ec008c !important;}



.crumbs {
    width: 100%;
    height: 54px;
    line-height: 54px;
    border-bottom: 1px solid #cccccc;
    position: relative;
}

.crumbs .i1 {
    display: block;
    width: 17px;
    height: 16px;
    background: url(../image/tong.png);
    float: left;
    position: relative;
    top: 17px;
}

.crumbs .line {
    width: 1px;
    height: 29px;
    display: block;
    float: left;
    background: #a8a8a8;
    margin: 0 2px;
    margin-top: 11px;
    margin-right: 10px;
}

.crumbs .i2 {
    display: block;
    float: left;
    width: 31px;
    height: 31px;
    background: url(../image/tong.png) no-repeat -20px 0;
    position: relative;
    top: 10px;
}

.crumbs .i1,
.crumbs .i2 {
    margin-right: 10px;
}

.crumbs span {
    float: left;
    margin-right: 16px;
    font-size: 16px;
}
#crumbs-la{
    position:absolute; background:#fff; width:120px; top:50px; border:1px solid #ccc; text-align:center;display:none; overflow:hidden;
}
#crumbs-la a{ font-size: 14px; display: block; width:100%; height:100%; color:#666;}
#crumbs-la a:hover{ color:#ff7800;}








#f-top {
    width: 100%;
    height: 114px;
    position: fixed;
    top: -115px;
    left: 0;
    z-index: 20;
    background: #fff;
    border-bottom:1px solid #d4d4d4;
    transition: 1s;
}

#f-top .tw {
    height: 41px;
    width: 100%;
    border: 1px solid #d4d4d4;
}

#f-top .tw li {
    width: 33.33%;
    border-left: 1px solid #d4d4d4;
    float: left;
    height: 100%;
    cursor: pointer;
    text-align: center;
    line-height: 41px;
        box-sizing: border-box;
}

#f-top .tw li a{
    color:#000;
}
#f-top .tw li a{ display: block; width:100%; height:100%;}


#f-top .tw li.active{
    background:#ff7800;
    color:#fff;
}
#f-top .tw li.active a{
    color:#fff;
}

#f-top .tb {
    height: 70px;
   
}

#f-top .l {
    float: left;
}

#f-top .l h4 {
    line-height: 70px;
    float: left;
    color: #4d4d4d;
}

#f-top .l span {
    float: left;
    width: 78px;
    height: 30px;
    border: 1px solid #ccc;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 12px;
    text-align: center;
    line-height: 30px;
}

#f-top .r {
    float: right;
}

#f-top .r a {
    display: block;
    width: 143px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    color: #fff;
    background: #ff7800;
    border-radius: 20px;
    float: right;
    margin-top: 17px;
}

#f-top .r .code {
    float: right;
    margin-left: 30px;
    margin-top: 17px;
    position: relative;
}

#f-top .r .code .h-code {
    position: absolute;
    top: 35px;
    left: -20px;
    display: none;
    width:150px;
}

#f-top .r .code:hover .h-code {
    display: block;
}