body {
    background: #f5f5f5
}

.box {
    overflow     : hidden;
    margin-top   : 30px;
    padding      : 0 25px 40px;
    border-radius: 3px;
    background   : #fff
}

.box .choosen {
    position  : relative;
    margin-top: 30px
}

.box .choosen a {
    position     : relative;
    margin-right : 25px;
    padding      : 2px 6px;
    border-radius: 15px;
    background   : #bdaf81;
    color        : #fff;
    font-size    : 12px
}

.box .choosen a:after {
    position     : absolute;
    top          : -7px;
    right        : -7px;
    display      : block;
    width        : 14px;
    height       : 14px;
    border-radius: 50%;
    background   : #adaaa4;
    color        : #fff;
    content      : '×';
    text-align   : center;
    font-size    : 13px;
    line-height  : 12px
}

.box .choosen .clear {
    position: absolute;
    top     : 0;
    right   : -20px;
    padding : 5px 6px
}

.box .choosen .clear:after {
    display: none
}

.box .choose {
    margin-top: 10px;
    color     : #3d3d3d
}

.box .choose .select {
    padding      : 22px 0 12px;
    border-bottom: 1px dashed #e9e9e9
}

.box .choose .select .name {
    float: left;
    width: 160px
}

.box .choose .select .options {
    float: left
}

.box .choose .select .options a {
    margin-right: 30px;
    padding     : 2px 6px;
    color       : #3d3d3d;
    font-size   : 12px
}

.box .choose .select .options a:hover {
    border-radius: 15px;
    background   : #e9e9e9
}

.box .choose .select .options .active {
    border-radius: 15px;
    background   : #e9e9e9
}

.products {
    margin-top: 20px;
    padding   : 5px 15px 15px;
    background: #fff
}

.products .product {
    float        : left;
    overflow     : hidden;
    margin-top   : 10px;
    margin-left  : 15px;
    width        : 380px;
    border-radius: 4px;
    transition   : .5s
}

.products .product:hover {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1)
}

.products .product .picture {
    width   : 380px;
    height  : 380px;
    position: relative;
}

.products .product img {
    position  : absolute;
    display   : block;
    max-width : 100%;
    max-height: 100%;
    height    : unset;
    width     : unset;
    z-index   : 2;
    top       : 50%;
    left      : 50%;
    transform : translate3d(-50%, -50%, 0);
}

.products .product p {
    width      : 100%;
    height     : 40px;
    color      : #2b2b2b;
    text-align : right;
    font-size  : 14px;
    line-height: 40px;
}

.products .product:nth-child(3n-2) {
    margin-left: 0
}

.layout {
    overflow  : hidden;
    background: #fff
}

.layout .product-info {
    margin-top : 20px;
    padding-top: 20px
}

.layout .product-info .main {
    margin-bottom: 20px
}

.layout .product-info .main .left {
    position: relative;
    float   : left;
    width   : 650px
}

.layout .product-info .main .left .swiperShow {
    float      : left;
    margin-left: 20px;
    width      : 450px;
    height     : 450px;
    position   : relative;
}

.layout .product-info .main .left .swiperShow img {
    position  : absolute;
    display   : block;
    max-width : 100%;
    max-height: 100%;
    height    : unset;
    width     : unset;
    z-index   : 2;
    top       : 50%;
    left      : 50%;
    transform : translate3d(-50%, -50%, 0);
}

.layout .product-info .main .left .swiperCtrl {
    position: relative;
    float   : left;
    overflow: hidden;
    width   : 158px;
    padding : 25px 15px;
    height  : 450px;
    border  : 1px solid #c4c4c4
}

.layout .product-info .main .left .swiperCtrl .swiper-wrapper {
    margin: 0 auto
}

.layout .product-info .main .left .swiperCtrl .swiper-wrapper .swiper-slide {
    width              : 126px;
    background-position: center;
    background-size    : cover
}

.layout .product-info .main .left .swiperCtrl .swiper-wrapper .swiper-slide img {
    position  : absolute;
    display   : block;
    max-width : 100%;
    max-height: 100%;
    height    : unset;
    width     : unset;
    z-index   : 2;
    top       : 50%;
    left      : 50%;
    transform : translate3d(-50%, -50%, 0);
}

.layout .product-info .main .left .swiperCtrl .ctrlNext,
.layout .product-info .main .left .swiperCtrl .ctrlPrev {
    position  : absolute;
    right     : 0;
    left      : 0;
    z-index   : 99;
    margin-top: 0;
    width     : 158px;
    height    : 20px
}

.layout .product-info .main .left .swiperCtrl .ctrlPrev {
    top            : 0;
    background     : #fff url(../images/home/top.png) no-repeat center center;
    background-size: contain
}

.layout .product-info .main .left .swiperCtrl .ctrlNext {
    top            : inherit;
    bottom         : 0;
    background     : #fff url(../images/home/bottom.png) no-repeat center center;
    background-size: contain
}

.layout .product-info .main .right {
    float: right;
    width: 480px
}

.layout .product-info .main .right .top {
    margin-bottom : 30px;
    padding-bottom: 20px;
    border-bottom : 1px dashed #ccc;
    color         : #1a1f23;
    font-weight   : 600;
    font-size     : 16px
}

.layout .product-info .main .right .top span {
    float: right;
    color: #1a1f23
}

.layout .product-info .main .right .desc {
    margin-bottom: 30px;
    color        : #1a1f23;
    line-height  : 24px
}

.layout .product-info .main .right .dl {
    margin-bottom: 35px
}

.layout .product-info .main .right .dl .dt {
    float: left;
    width: 80px;
    color: #adadad
}

.layout .product-info .main .right .dl .dd {
    float: left;
    color: #2b2b2b
}

.layout .product-info .line {
    margin-top : 40px;
    height     : 60px;
    background : #e6e6e6;
    color      : #fff;
    line-height: 60px
}

.layout .product-info .line a {
    position               : relative;
    float                  : left;
    margin-top             : 5px;
    width                  : 200px;
    height                 : 55px;
    border-top-right-radius: 4px;
    border-top-left-radius : 4px;
    color                  : #adadad;
    text-align             : center;
    line-height            : 55px
}

.layout .product-info .line .active {
    background: #fff;
    color     : #2b2b2b;
    font-size : 16px
}

.layout .product-info .line .active:after {
    position   : absolute;
    bottom     : 10px;
    left       : 50%;
    display    : block;
    margin-left: -20px;
    width      : 40px;
    height     : 3px;
    background : #2b2b2b;
    content    : ''
}

.layout .product-info .extra {
    padding-bottom: 50px;
    background    : #f5f5f5
}

.layout .product-info .extra .container {
    padding   : 50px;
    background: #fff
}

.layout .product-info .extra .container .richtext {
    overflow: hidden;
    width   : 100%
}

.layout .product-info .extra .container .richtext img {
    max-width: 100%
}

.layout .product-info .extra .container .used {
    display : none;
    overflow: hidden;
    width   : 100%
}

.layout .product-info .extra .container .used .swiper-slide {
    height    : 485px;
    object-fit: cover
}

.layout .product-info .extra .container .used .swiper-pagination-bullet {
    margin    : 0 8px;
    width     : 12px;
    height    : 12px;
    background: #2b2c2b;
    transition: .5s
}

.layout .product-info .extra .container .used .swiper-pagination {
    bottom: 30px
}

.layout .product-info .extra .container .used .swiper-pagination-bullet-active {
    width        : 30px;
    border-radius: 30px
}