.banner-dots,.banner-dots li button::before,.btn-reset,.btn-categorys,.btn-download,.btn-download p,.btn-setting,.share .btn-share,.share a,.share .share-list,.iv-crumbs ul a,.features-filter input[type="radio"]+label i,.features-filter input[type="checkbox"]+label i,.features-filter input[type="radio"]+label i::before,.features-filter input[type="checkbox"]+label i::before,.color-filter input[type="radio"]+label::before,.color-filter input[type="radio"]+label i,.iv-category .filter-list a,.iv-category .filter-list a::before,.filter-list li a .icon,.sidebar ul li a i::before,.sidebar ul li a i::after,.sidebar ul ul li a,.common-form label,.common-form .forget,.common-form .register,.iv-select .iv-selection--select a,.dropdown .dropdown-menu a,.nav-category a,.nav-category a::before,.nav-category a .icon-icon-select,.nav-sort a,.header .header-cont,.header .lang a,.header .lang .lang-list,.header .btn-user .user--operation,.header .btn-user .user--operation a,.search-form,.mainnav .sidenav>li>a::before,.iv-prod .slick-dots li::before,.iv-prod .slick-dots li::after,.iv-prod .slick-dots li button::before,.diy-list>div a,.prod-list li figure,.prod-list li .popover-zoom,.help-item li h3,.help-item li h3 i::before,.help-item li h3 i::after,.iv-details .prod-filter a,.iv-details .prod-filter a::before,.iv-details .order-form .group input[type='radio']+label,.series-slick .slick-dots li button::before,.series-slick .slick-dots li button::after,.glasses-list a input[type="radio"]+label i::before,.glasses-list a input[type="radio"]+label i::after,.glasses-list a input[type="radio"]+label span,.seri-list li .box::before,.seri-list li .btn-review,.pagination .btn-backlist p,.recom-list li figcaption h3,.work-list .slick-dots li button::before,.wroks-lists .btn-prev,.wroks-lists .btn-next,.common-form .box .btn-email-code,.common-form .box .goto-login a,.common-form .agreement input[type="checkbox"]+label i,.common-form .subscribe input[type="checkbox"]+label i::after,.user-center .setting li a::before,.user-center .setting li a i,.logged .account a,.iv-tables a,.common-meta .btn-back,.comment-form .score .star a,.comment-form .score .star span,.comment-form .anonymous input[type="checkbox"]+label,.iv-selected input[type="checkbox"]+label i,.iv-selected input[type="checkbox"]+label i::before,.iv-address .selected input[type="radio"]+label,.iv-address .btn-change,.iv-pay .pay-list input[type="radio"]+label,.iv-invoice .print-invoice,.invoice-list .nav-tabs li a,.label-subcate,.label-subcate>span,.label-structure .default,.label-structure .checked,.si-active,.btn-backhome,.diy-tables .box figcaption,.diy-tables .box .text,.diy-tables .box figcaption::before,.diy-tables .box .text::before,.diy-operation .share a,.footer .link a,.footer .share .share-code {
    -webkit-transition: all .3s;
    transition: all .3s
}

.diy-handle-tab>span,.diy-threecate label {
    -webkit-transition: color .3s;
    transition: color .3s
}

.diy-handle-tab>span::after,.diy-threecate label::after {
    -webkit-transition: background .3s;
    transition: background .3s
}

.banner-dots li button::before,.iv-wrap .iv-wrap--content,.sidebar ul li a i,.mainnav .sidenav>li>a::before,.beer-slider .img-box .beer-img,.prod-list li .generate img,.help-item li h3 i,.popup .container .box,.wroks-lists .btn-prev,.wroks-lists .btn-next,.common-form .box .select::before,.common-form .subscribe input[type="checkbox"]+label i::after,.user-center .setting li a::before,.iv-tables .iv-selected,.common-meta .btn-back,.popover-form .box .select::before,.address-form .box .select::before,.diy-info .tips i,.btn-backtop {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.color-filter input[type="radio"]+label i,.sidebar ul li a i::before,.sidebar ul li a i::after,.group-list .ban-content .caption,.video-layer .btn-video::before,.header .logo,.iv-prod .slick-dots li button::after,.beer-slider .beer-handle img,.help-item li h3 i::before,.help-item li h3 i::after,.iv-counter .btn-cut::before,.iv-counter .btn-add::before,.iv-counter .btn-add::after,.popup-rotate .container .product-rotate,.popup-rotate .container .btn-play::before,.glasses-list a input[type="radio"]+label i::after,.iv-since .ban-content .caption,.work-list .slick-dots li button::after,.user-list li figcaption,.user-list li figcaption .box,.iv-pay .pay-list img,.diy-confirm .diy-product--pic figcaption,.diy-tables .box,.diy-tables .box .img-box img,.popup .contain {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

@font-face {
    font-family: 'UtopiaStd-Regular';
    src: url("../fonts/utopiastd-regular.eot");
    src: url("../fonts/utopiastd-regular.eot") format("embedded-opentype"),url("../fonts/utopiastd-regular.svg#utopiastd-regular") format("svg"),url("../fonts/utopiastd-regular.ttf") format("truetype"),url("../fonts/utopiastd-regular.woff") format("woff"),url("../fonts/utopiastd-regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 80px, 0);
        transform: translate3d(0, 80px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 80px, 0);
        transform: translate3d(0, 80px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmall;
    animation-name: fadeInUpSmall
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-40px, 0, 0);
        transform: translate3d(-40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInLeftSmall {
    -webkit-animation-name: fadeInLeftSmall;
    animation-name: fadeInLeftSmall
}

@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(40px, 0, 0);
        transform: translate3d(40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeInRightSmall {
    from {
        opacity: 0;
        -webkit-transform: translate3d(40px, 0, 0);
        transform: translate3d(40px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeInRightSmall {
    -webkit-animation-name: fadeInRightSmall;
    animation-name: fadeInRightSmall
}

@-webkit-keyframes fadeUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.fadeUp {
    -webkit-animation-name: fadeUp;
    animation-name: fadeUp
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms
}

.animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

@media (prefers-reduced-motion) {
    .animated {
        -webkit-animation: unset !important;
        animation: unset !important;
        -webkit-transition: none !important;
        transition: none !important
    }
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: 0
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track::after,.slick-track::before {
    display: table;
    content: ""
}

.slick-track::after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    outline: 0
}

.slick-slide a {
    outline: 0
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto
}

.slick-arrow.slick-hidden {
    display: none
}

.banner-dots {
    position: absolute;
    top: 50%;
    right: 4.16667vw;
    font-size: 0;
    text-align: center
}

.banner-dots li {
    display: block
}

.banner-dots li button {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    font-size: 0;
    background-color: transparent;
    outline: 0;
    cursor: pointer;
    width: 2.8125vw;
    height: 20px
}

.banner-dots li button::before {
    content: "";
    display: block;
    width: 1.40625vw;
    height: 4px;
    background-color: #000;
    position: absolute;
    top: 50%;
    right: 0
}

.banner-dots li button::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #000
}

.banner-dots li.slick-active button::before {
    width: 100%;
    height: 10px
}

@media (max-width: 1024px) {
    .banner-dots {
        display:none !important;
        bottom: 20px
    }

    .banner-dots li {
        margin-right: 10px;
        margin-left: 10px
    }

    .banner-dots li button::before {
        width: 30px
    }
}

/*!
 * Cropper v3.1.3
 * https://github.com/fengyuanchen/cropper
 *
 * Copyright (c) 2014-2017 Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2017-10-21T10:03:37.133Z
 */
.kmhj_img {
    width: 100%;
    text-align: center;
    /* border-bottom: 1px solid #00000096; */
    margin-top: 15%;
}

.a-po {
    position: absolute;
    top: 30%;
    left: 25%;
    color: #000;
}

.ljh_o {
    position: absolute;
    top: 30%;
    left: 25%;
    color: #fff;
}

.img_idnex_cp p {
    text-align: center;
    font-size: 50px;
    margin-top: 2%;
}

.poi_tr {
    width: 250px;
    height: 60px;
    margin: auto;
}

.poi_tr a {
    text-align: center;
    line-height: 60px;
    display: block;
    margin-top: 15%;
    border: 2px solid #999;
    border-radius: 10px;
}

.poi_tr a:hover {
    background-color: #E61727;
    border-color: #E61727;
    transform: scale(1.1);
    transition: all .4s ease-in;
    color: #fff;
}

.poi_tr a {
    color: #000;
    transform: scale(1.0);
    transition: all .4s ease-in;
}

.xia_h {
    width: 55%;
    height: 1px;
    background: #9e9e9ebf;
    margin: auto;
    margin-top: 5%;
}

.news_idnex_po {
    width: 55%;
    margin: auto;
    margin-top: 3%;
}

.news_idnex_po ul li {
    text-align: center;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    overflow: hidden;
}

.footn_re {
    padding-top: 10%;
    text-align: center;
}

.footn_re h3 {
    padding-top: 8%;
    padding-bottom: 5%;
}

.lkiuy_img img {
    width: 100%;
}

.lkiuy_img2 img {
    width: 100%;
}

.lkiuy_img {
    width: 50%;
    float: left;
    padding-top: 10%;
    padding-left: 53px;
}

.sjhgt {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.lkiuy_img p {
    padding-top: 5%;
    text-align: center;
}

.lkiuy_img2 p {
    padding-top: 5%;
    text-align: center;
}

.lkiuy_img2 {
    width: 35%;
    float: right;
    padding-top: 10%;
}

.ime_Lkjs {
    width: 47px;
    height: 47px;
    margin: auto;
}

.ertyu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 3%;
    padding-bottom: 2%;
}

.ertyu li:first-child {
    border-left: 0;
}

.ertyu li a {
    color: #000;
    display: block;
}

.ertyu li {
    width: 10%;
    float: left;
    border-left: 2px solid #999;
    text-align: center;
}

.zuidi_sd {
    text-align: center;
    padding-bottom: 2%;
    padding-top: 2%;
    background-color: #000000;
    color: #FFF;
    height: auto;
    font-size: 14px;
}

.zuidi_sd a {
    color: #ffffff;
    font-size: 14px;
}

.news_idnex_po li a {
    color: #000;
}

.cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cropper-container img {
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%
}

.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.cropper-canvas,.cropper-wrap-box {
    overflow: hidden
}

.cropper-drag-box {
    background-color: #fff;
    opacity: 0
}

.cropper-modal {
    background-color: #000;
    opacity: .5
}

.cropper-view-box {
    display: block;
    height: 100%;
    outline-color: rgba(51,153,255,0.75);
    outline: 1px solid #39f;
    overflow: hidden;
    width: 100%
}

.cropper-dashed {
    border: 0 dashed #eee;
    display: block;
    opacity: .5;
    position: absolute
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: 33.33333%;
    left: 0;
    top: 33.33333%;
    width: 100%
}

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: 33.33333%;
    top: 0;
    width: 33.33333%
}

.cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: .75;
    position: absolute;
    top: 50%;
    width: 0
}

.cropper-center:after,.cropper-center:before {
    background-color: #eee;
    content: " ";
    display: block;
    position: absolute
}

.cropper-center:before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px
}

.cropper-center:after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px
}

.cropper-face,.cropper-line,.cropper-point {
    display: block;
    height: 100%;
    opacity: .1;
    position: absolute;
    width: 100%
}

.cropper-face {
    background-color: #fff;
    left: 0;
    top: 0
}

.cropper-line {
    background-color: #39f
}

.cropper-line.line-e {
    cursor: e-resize;
    right: -3px;
    top: 0;
    width: 5px
}

.cropper-line.line-n {
    cursor: n-resize;
    height: 5px;
    left: 0;
    top: -3px
}

.cropper-line.line-w {
    cursor: w-resize;
    left: -3px;
    top: 0;
    width: 5px
}

.cropper-line.line-s {
    bottom: -3px;
    cursor: s-resize;
    height: 5px;
    left: 0
}

.cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: .75;
    width: 5px
}

.cropper-point.point-e {
    cursor: e-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%
}

.cropper-point.point-n {
    cursor: n-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px
}

.cropper-point.point-w {
    cursor: w-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%
}

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px
}

.cropper-point.point-ne {
    cursor: ne-resize;
    right: -3px;
    top: -3px
}

.cropper-point.point-nw {
    cursor: nw-resize;
    left: -3px;
    top: -3px
}

.cropper-point.point-sw {
    bottom: -3px;
    cursor: sw-resize;
    left: -3px
}

.cropper-point.point-se {
    bottom: -3px;
    cursor: se-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px
}

@media (min-width: 768px) {
    .cropper-point.point-se {
        height:15px;
        width: 15px
    }
}

@media (min-width: 992px) {
    .cropper-point.point-se {
        height:10px;
        width: 10px
    }
}

@media (min-width: 1200px) {
    .cropper-point.point-se {
        height:5px;
        opacity: .75;
        width: 5px
    }
}

.cropper-point.point-se:before {
    background-color: #39f;
    bottom: -50%;
    content: " ";
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%
}

.cropper-invisible {
    opacity: 0
}

.cropper-bg {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
}

.cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0
}

.cropper-hidden {
    display: none !important
}

.cropper-move {
    cursor: move
}

.cropper-crop {
    cursor: crosshair
}

.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point {
    cursor: not-allowed
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    border: 0;
    font-size: 100%;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1;
    text-size-adjust: none
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote::after,blockquote::before,q::after,q::before {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input,select,textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box
}

a {
    outline: 0;
    text-decoration: none
}

a:hover {
    text-decoration: none
}

body,input,textarea {
    font-family: "PingFangSC-Regular","PingFang SC","Microsoft YaHei","STSong","SimSun",Arial,sans-serif
}

input[type='text']:-webkit-autofill {
    box-shadow: 0 0 0 1000px #fff inset
}

* {
    touch-action: pan-y
}

[class*=' icon-'],[class^=icon-] {
    font-family: "iconfont";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    speak: none;
    text-transform: none
}

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear {
    display: none
}

figure {
    display: block;
    margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}

.wow {
    visibility: hidden
}

.no-cssanimations .wow {
    visibility: visible
}

body {
    font-size: 16px;
    overflow-x: hidden
}

.mt-10 {
    margin-top: 10px
}

.mt-20 {
    margin-top: 20px
}

.mt-30 {
    margin-top: 30px
}

.mt-40 {
    margin-top: 40px
}

.mt-50 {
    margin-top: 50px
}

.mt-60 {
    margin-top: 60px
}

.mt-70 {
    margin-top: 70px
}

.mt-80 {
    margin-top: 80px
}

.mt-90 {
    margin-top: 90px
}

.mt-100 {
    margin-top: 100px
}

.mt-110 {
    margin-top: 110px
}

.mt-120 {
    margin-top: 120px
}

.mt-130 {
    margin-top: 130px
}

.mt-140 {
    margin-top: 140px
}

.mt-150 {
    margin-top: 150px
}

.mt-170 {
    margin-top: 170px
}

.mt-190 {
    margin-top: 190px
}

.mt-200 {
    margin-top: 200px
}

.pt-10 {
    padding-top: 10px
}

.pt-20 {
    padding-top: 20px
}

.pt-30 {
    padding-top: 30px
}

.pt-40 {
    padding-top: 40px
}

.pt-50 {
    padding-top: 50px
}

.pt-60 {
    padding-top: 60px
}

.pt-70 {
    padding-top: 70px
}

.pt-80 {
    padding-top: 80px
}

.pt-90 {
    padding-top: 90px
}

.pt-100 {
    padding-top: 100px
}

.pt-110 {
    padding-top: 110px
}

.pt-120 {
    padding-top: 120px
}

.pt-130 {
    padding-top: 130px
}

.pt-140 {
    padding-top: 140px
}

.pt-150 {
    padding-top: 150px
}

.pt-160 {
    padding-top: 160px
}

.pt-170 {
    padding-top: 170px
}

.pt-180 {
    padding-top: 180px
}

.pt-190 {
    padding-top: 190px
}

.pt-200 {
    padding-top: 200px
}

.pt-220 {
    padding-top: 220px
}

.pt-240 {
    padding-top: 240px
}

.pt-270 {
    padding-top: 270px
}

.pt-280 {
    padding-top: 280px
}

.pt-290 {
    padding-top: 290px
}

.sm-hidden {
    display: none
}

.sm-visible {
    display: block
}

@media (max-width: 1440px) {
    .mt-10 {
        margin-top:10px
    }

    .mt-20 {
        margin-top: 20px
    }

    .mt-30 {
        margin-top: 30px
    }

    .mt-40 {
        margin-top: 40px
    }

    .mt-50 {
        margin-top: 40px
    }

    .mt-60 {
        margin-top: 40px
    }

    .mt-70 {
        margin-top: 40px
    }

    .mt-80 {
        margin-top: 40px
    }

    .mt-90 {
        margin-top: 50px
    }

    .mt-100 {
        margin-top: 50px
    }

    .mt-110 {
        margin-top: 50px
    }

    .mt-120 {
        margin-top: 60px
    }

    .mt-130 {
        margin-top: 60px
    }

    .mt-140 {
        margin-top: 70px
    }

    .mt-150 {
        margin-top: 70px
    }

    .mt-170 {
        margin-top: 80px
    }

    .mt-190 {
        margin-top: 80px
    }

    .mt-200 {
        margin-top: 100px
    }

    .pt-10 {
        padding-top: 10px
    }

    .pt-20 {
        padding-top: 20px
    }

    .pt-30 {
        padding-top: 30px
    }

    .pt-40 {
        padding-top: 40px
    }

    .pt-50 {
        padding-top: 40px
    }

    .pt-60 {
        padding-top: 40px
    }

    .pt-70 {
        padding-top: 40px
    }

    .pt-80 {
        padding-top: 40px
    }

    .pt-90 {
        padding-top: 50px
    }

    .pt-100 {
        padding-top: 50px
    }

    .pt-110 {
        padding-top: 50px
    }

    .pt-120 {
        padding-top: 60px
    }

    .pt-130 {
        padding-top: 60px
    }

    .pt-140 {
        padding-top: 70px
    }

    .pt-150 {
        padding-top: 70px
    }

    .pt-160 {
        padding-top: 80px
    }

    .pt-170 {
        padding-top: 80px
    }

    .pt-180 {
        padding-top: 90px
    }

    .pt-190 {
        padding-top: 90px
    }

    .pt-200 {
        padding-top: 100px
    }

    .pt-220 {
        padding-top: 110px
    }

    .pt-240 {
        padding-top: 120px
    }

    .pt-270 {
        padding-top: 130px
    }

    .pt-280 {
        padding-top: 140px
    }

    .pt-290 {
        padding-top: 150px
    }
}

@media (max-width: 1024px) {
    .mt-10 {
        margin-top:1.33333vw
    }

    .mt-20 {
        margin-top: 2.66667vw
    }

    .mt-30 {
        margin-top: 4vw
    }

    .mt-40 {
        margin-top: 5.33333vw
    }

    .mt-50 {
        margin-top: 6.66667vw
    }

    .mt-60 {
        margin-top: 8vw
    }

    .mt-70 {
        margin-top: 9.33333vw
    }

    .mt-80 {
        margin-top: 10.66667vw
    }

    .mt-90 {
        margin-top: 12vw
    }

    .mt-100 {
        margin-top: 13.33333vw
    }

    .mt-110 {
        margin-top: 14.66667vw
    }

    .mt-120 {
        margin-top: 16vw
    }

    .mt-130 {
        margin-top: 17.33333vw
    }

    .mt-140 {
        margin-top: 18.66667vw
    }

    .mt-150 {
        margin-top: 20vw
    }

    .mt-170 {
        margin-top: 22.66667vw
    }

    .mt-190 {
        margin-top: 25.33333vw
    }

    .mt-200 {
        margin-top: 26.66667vw
    }

    .mt-none {
        margin-top: 0
    }

    .pt-10 {
        padding-top: 1.33333vw
    }

    .pt-20 {
        padding-top: 2.66667vw
    }

    .pt-30 {
        padding-top: 4vw
    }

    .pt-40 {
        padding-top: 5.33333vw
    }

    .pt-50 {
        padding-top: 6.66667vw
    }

    .pt-60 {
        padding-top: 8vw
    }

    .pt-70 {
        padding-top: 9.33333vw
    }

    .pt-80 {
        padding-top: 10.66667vw
    }

    .pt-90 {
        padding-top: 12vw
    }

    .pt-100 {
        padding-top: 13.33333vw
    }

    .pt-110 {
        padding-top: 14.66667vw
    }

    .pt-120 {
        padding-top: 16vw
    }

    .pt-130 {
        padding-top: 10.66667vw
    }

    .pt-140 {
        padding-top: 18.66667vw
    }

    .pt-160 {
        padding-top: 21.33333vw
    }

    .pt-150 {
        padding-top: 20vw
    }

    .pt-170 {
        padding-top: 22.66667vw
    }

    .pt-180 {
        padding-top: 24vw
    }

    .pt-190 {
        padding-top: 14.66667vw
    }

    .pt-200 {
        padding-top: 18.66667vw
    }

    .pt-220 {
        padding-top: 29.33333vw
    }

    .pt-240 {
        padding-top: 25.33333vw
    }

    .pt-270 {
        padding-top: 26.66667vw
    }

    .pt-280 {
        padding-top: 37.33333vw
    }

    .pt-290 {
        padding-top: 38.66667vw
    }

    .pt-none {
        padding-top: 0
    }

    .sm-hidden {
        display: block
    }

    .sm-visible {
        display: none
    }
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.d-inline-block {
    display: inline-block
}

.d-none {
    display: none
}

.d-block {
    display: block
}

.v-left {
    float: left
}

.v-right {
    float: right
}

.v-rl {
    writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl
}

.v-lr {
    writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr
}

.contact-map .BMapLabel {
    border: 0
}

.contact-map .anchorBL {
    display: none
}

.list {
    position: relative;
    font-size: 0
}

.list>li {
    display: inline-block;
    vertical-align: top
}

.list-1>li {
    width: 100%
}

.list-2>li {
    width: 50%
}

.list-3>li {
    width: 33.3333%
}

.list-4>li {
    width: 25%
}

.list-5>li {
    width: 20%
}

.list-6>li {
    width: 16.66667%
}

.img-box {
    position: relative
}

.img-box::before {
    content: "";
    display: block
}

.img-box>img {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.bg-white {
    position: relative;
    z-index: 10;
    background-color: #fff
}

.bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

.bg-contain {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain
}

.wx-share {
    margin-top: -130px;
    margin-left: -120px;
    border-radius: 3px;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    padding: 20px 10px;
    width: 240px;
    height: 244px;
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.1)
}

.wx-share img {
    display: block;
    width: 80%;
    margin-left: auto;
    margin-right: auto
}

.wx-share p {
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 500;
    color: #000;
    margin-top: 10px
}

.wx-share i {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5;
    text-align: center;
    color: #000
}

.clearfix {
    zoom:1}

.clearfix:after {
    content: "";
    display: block;
    clear: both
}

input:focus,button:focus {
    outline: none
}

.wrapper {
    min-height: 80vh
}

.page-404 {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

img.img_thumbnail {
    background-image: url(../images/loading.gif);
    background-repeat: no-repeat;
    background-position: center center
}

.col-mini {
    padding-left: 3.125vw;
    padding-right: 3.125vw
}

@media only screen and (max-width: 1024px) {
    .col-mini {
        padding-left:5.33333vw;
        padding-right: 5.33333vw
    }
}

.iv-wd {
    max-width: 1188px;
    margin-left: auto;
    margin-right: auto
}

.btn-reset {
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    opacity: .5;
    opacity: .9
}

@media only screen and (max-width: 1024px) {
    .btn-reset {
        font-size:2.93333vw
    }
}

.btn-reset .icon-icon-reset {
    font-size: 16px
}

.btn-reset .icon-icon-reset::before {
    content: "\e62c"
}

.btn-reset i {
    margin-right: 10px
}

.btn-categorys {
    display: none;
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    opacity: .5;
    opacity: .9
}

@media only screen and (max-width: 1024px) {
    .btn-categorys {
        font-size:2.93333vw
    }
}

.btn-categorys i {
    margin-right: 5px
}

.group-btns .btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px
}

.btn-default,.btn-past {
    padding: 0;
    border: none;
    background: none;
    display: block;
    width: 200px;
    height: 54px;
    line-height: 54px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    font-size: .875em;
    letter-spacing: .03em;
    color: #000;
    text-align: center;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .btn-default,.btn-past {
        font-size:2.93333vw
    }
}

.btn-default::before,.btn-past::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    border: 1px solid #111;
    border-radius: 5px;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

.btn-default.btn-sg,.btn-past.btn-sg {
    padding: 0;
    width: 154px;
    height: 54px;
    line-height: 54px
}

.btn-default.btn-lg,.btn-past.btn-lg {
    width: 246px;
    height: 60px;
    line-height: 60px
}

.btn-default.btn-noclick,.btn-past.btn-noclick {
    cursor: auto;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 1.125em;
    text-align: left
}

.btn-default.btn-noclick::before,.btn-past.btn-noclick::before {
    display: none
}

.btn-default.btn-noclick img,.btn-past.btn-noclick img {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    margin-right: 10px
}

.btn-default span,.btn-default small,.btn-past span,.btn-past small {
    position: relative;
    z-index: 200
}

.btn-secondary {
    padding: 0;
    border: none;
    background: none;
    display: block;
    position: relative;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    font-size: .875em;
    color: #000;
    letter-spacing: .03em;
    padding: 12px 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .btn-secondary {
        font-size:2.93333vw
    }
}

.btn-secondary.btn-reg {
    width: 138px;
    height: 44px;
    line-height: 44px;
    padding: 0
}

.btn-secondary.btn-lg {
    padding: 0;
    width: 200px;
    height: 54px;
    line-height: 54px
}

.btn-secondary.btn-sg {
    padding: 0;
    width: 154px;
    height: 54px;
    line-height: 54px
}

.btn-secondary.btn-ng {
    width: 9.16667vw;
    height: 54px;
    line-height: 54px;
    padding: 0
}

.btn-secondary.btn-noclick {
    cursor: auto;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 1.125em;
    text-align: left
}

.btn-secondary.btn-noclick::before {
    display: none
}

.btn-secondary.btn-noclick img {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    margin-right: 10px
}

.btn-secondary::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    border: 1px solid #000;
    border-radius: 5px;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

.btn-secondary input {
    display: none
}

.btn-secondary span,.btn-secondary small,.btn-secondary label {
    position: relative;
    z-index: 20
}

.btn-secondary label {
    display: block;
    width: 100%;
    height: 100%
}

.btn-dark {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: none;
    background: none;
    width: 246px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: .875em;
    letter-spacing: .03em;
    color: #000;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

@media only screen and (max-width: 1024px) {
    .btn-dark {
        font-size:2.93333vw
    }
}

.btn-dark.btn-ng {
    width: 200px;
    height: 54px;
    line-height: 54px
}

.btn-dark.btn-sg {
    padding: 0;
    width: 154px;
    height: 54px;
    line-height: 54px
}

.btn-dark.btn-lg {
    padding: 0;
    width: 120px;
    height: 40px;
    line-height: 40px
}

.btn-dark.btn-noclick {
    cursor: auto;
    margin-left: 0;
    margin-right: 0;
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 1.125em;
    text-align: left
}

.btn-dark.btn-noclick::before {
    display: none
}

.btn-dark.btn-noclick img {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    margin-right: 10px
}

.btn-dark::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    background-color: #000;
    border-radius: 5px;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

.btn-dark span,.btn-dark small {
    position: relative;
    z-index: 20
}

.btn-download {
    display: inline-block;
    vertical-align: middle;
    color: #111;
    margin-right: 30px;
    padding: 0;
    width: 138px;
    height: 44px;
    line-height: 44px;
    text-align: center
}

.btn-download.none-marg {
    margin-right: 0
}

.btn-download .icon-download {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    position: relative
}

.btn-download .icon-download::before {
    content: "\e617"
}

.btn-download p {
    display: inline-block;
    vertical-align: middle;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111
}

@media only screen and (max-width: 1024px) {
    .btn-download p {
        font-size:2.93333vw
    }
}

.disable {
    cursor: not-allowed
}

.disable::before {
    background-color: #989898
}

.search-prod {
    text-align: center
}

.search-prod .search-wrap {
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

.search-prod h3 {
    font-size: 3em;
    line-height: 1.66667;
    color: #111;
    letter-spacing: .03em
}

@media only screen and (max-width: 1680px) {
    .search-prod h3 {
        font-size:2.5vw
    }
}

@media only screen and (max-width: 1440px) {
    .search-prod h3 {
        font-size:2.5vw
    }
}

@media only screen and (max-width: 1280px) {
    .search-prod h3 {
        font-size:2.5vw
    }
}

@media only screen and (max-width: 1024px) {
    .search-prod h3 {
        font-size:6.4vw
    }
}

.search-prod p {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .search-prod p {
        font-size:2.93333vw
    }
}

.search-prod p span {
    color: #E61727
}

.btn-setting {
    display: block;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    text-decoration: underline !important;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .btn-setting {
        font-size:3.73333vw
    }
}

.btn-setting.default {
    text-decoration: none !important
}

.iv-wrap {
    position: relative;
    height: calc(100vh - 79px);
    overflow: hidden
}

.iv-wrap .iv-wrap--content {
    position: absolute;
    top: 50%;
    background-color: #fff;
    width: 50%
}

.iv-wrap .iv-wrap--content figcaption {
    font-size: 1em;
    line-height: 1.5;
    color: #000;
    margin-left: 11.82292vw;
    width: 20.52083vw;
    padding-bottom: 60px
}

@media only screen and (max-width: 1440px) {
    .iv-wrap .iv-wrap--content figcaption {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-wrap .iv-wrap--content figcaption {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-wrap .iv-wrap--content figcaption {
        font-size:2.93333vw
    }
}

.iv-wrap .iv-wrap--content figcaption h3 {
    font-size: 3.14286em;
    line-height: 1.90909;
    color: #000;
    line-height: 1.3;
    margin-bottom: 17px
}

@media only screen and (max-width: 1680px) {
    .iv-wrap .iv-wrap--content figcaption h3 {
        font-size:2.38095vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-wrap .iv-wrap--content figcaption h3 {
        font-size:2.29167vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-wrap .iv-wrap--content figcaption h3 {
        font-size:2.29167vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-wrap .iv-wrap--content figcaption h3 {
        font-size:5.86667vw
    }
}

.iv-wrap .iv-wrap--content figcaption h3 span {
    display: block;
    font-weight: 100
}

.iv-wrap .iv-wrap--thumbs {
    display: block;
    width: 50%
}

.iv-wrap .iv-wrap--thumbs figure {
    height: calc(100vh - 79px)
}

.iv-text {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111
}

@media only screen and (max-width: 1024px) {
    .iv-text {
        font-size:2.93333vw
    }
}

.iv-flag {
    display: inline-block;
    vertical-align: middle;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898;
    color: #989898;
    border: 1px solid rgba(112,112,112,0.24);
    border-radius: 5px;
    padding: 0 10px;
    margin-left: 10px
}

@media only screen and (max-width: 1024px) {
    .iv-flag {
        font-size:2.93333vw
    }
}

.iv-mini {
    padding-left: 3.125vw;
    padding-right: 3.125vw
}

@media only screen and (max-width: 1024px) {
    .iv-mini {
        padding-left:5.33333vw;
        padding-right: 5.33333vw
    }
}

.iv-title {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .iv-title {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-title {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-title {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-title {
        font-size:4vw
    }
}

.heading {
    font-size: 2em;
    line-height: .9375;
    color: #000;
    letter-spacing: .03em
}

@media only screen and (max-width: 1680px) {
    .heading {
        font-size:1.66667vw
    }
}

@media only screen and (max-width: 1440px) {
    .heading {
        font-size:1.66667vw
    }
}

@media only screen and (max-width: 1280px) {
    .heading {
        font-size:1.66667vw
    }
}

@media only screen and (max-width: 1024px) {
    .heading {
        font-size:5.6vw
    }
}

.pagetitle {
    font-size: 3.14286em;
    line-height: 1.90909;
    color: #000;
    margin-bottom: 0
}

@media only screen and (max-width: 1680px) {
    .pagetitle {
        font-size:2.38095vw
    }
}

@media only screen and (max-width: 1440px) {
    .pagetitle {
        font-size:2.29167vw
    }
}

@media only screen and (max-width: 1280px) {
    .pagetitle {
        font-size:2.29167vw
    }
}

@media only screen and (max-width: 1024px) {
    .pagetitle {
        font-size:5.86667vw
    }
}

.headtitle {
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1440px) {
    .headtitle {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .headtitle {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .headtitle {
        font-size:2.93333vw
    }
}

.share {
    text-align: center;
    position: relative
}

.share a {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.25em;
    color: #000;
    margin: 0 .72917vw
}

@media only screen and (max-width: 1440px) {
    .share a {
        font-size:1.04167vw
    }
}

@media only screen and (max-width: 1280px) {
    .share a {
        font-size:1.04167vw
    }
}

@media only screen and (max-width: 1024px) {
    .share a {
        font-size:3.73333vw
    }
}

.share a span {
    display: block;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #313131
}

@media only screen and (max-width: 1024px) {
    .share a span {
        font-size:2.93333vw
    }
}

.share .share-list {
    position: absolute;
    top: 0;
    right: -13px;
    width: 200px;
    text-align: right
}

.share .share-list a {
    margin: 0 10px !important
}

.iv-crumbs ul {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    padding-top: 10px;
    padding-top: 20px;
    padding-top: 0
}

.iv-crumbs ul li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px
}

.iv-crumbs ul li:last-child a::after {
    display: none
}

.iv-crumbs ul a {
    display: block;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .iv-crumbs ul a {
        font-size:2.93333vw
    }
}

.iv-crumbs ul a::after {
    display: inline-block;
    content: "/";
    color: #989898;
    margin: 0 5px
}

.iv-filter {
    font-size: 0
}

.iv-filter .filter-clear {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    font-size: 16px
}

.iv-filter .filter-clear a {
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    opacity: .5
}

@media only screen and (max-width: 1024px) {
    .iv-filter .filter-clear a {
        font-size:2.93333vw
    }
}

.iv-filter .filter-clear a i {
    margin-right: 10px
}

.iv-filter .filter-result {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    font-size: 16px;
    text-align: right;
    opacity: .5
}

@media only screen and (max-width: 1024px) {
    .iv-filter .filter-result {
        font-size:2.93333vw
    }
}

.features-filter {
    font-size: 0;
    text-align: center;
    padding: 40px 0;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

.features-filter a {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: 0 1.5625vw;
    cursor: pointer
}

.features-filter input[type="radio"],.features-filter input[type="checkbox"] {
    display: none
}

.features-filter input[type="radio"]+label,.features-filter input[type="checkbox"]+label {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .05em;
    color: #000;
    line-height: 2.16667;
    letter-spacing: 0;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .features-filter input[type="radio"]+label,.features-filter input[type="checkbox"]+label {
        font-size:2.93333vw
    }
}

.features-filter input[type="radio"]+label i,.features-filter input[type="checkbox"]+label i {
    display: inline-block;
    vertical-align: -3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #000;
    margin-right: 8px;
    position: relative
}

.features-filter input[type="radio"]+label i::before,.features-filter input[type="checkbox"]+label i::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #E61727;
    opacity: 0;
    visibility: hidden
}

.features-filter input[type="radio"]:checked+label i,.features-filter input[type="checkbox"]:checked+label i {
    border-color: #E61727
}

.features-filter input[type="radio"]:checked+label i::before,.features-filter input[type="checkbox"]:checked+label i::before {
    opacity: 1;
    visibility: visible
}

.color-filter {
    font-size: 0;
    text-align: center;
    padding: 40px 0;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

.color-filter a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 7px
}

.color-filter input[type="radio"] {
    display: none
}

.color-filter input[type="radio"]+label {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer
}

.color-filter input[type="radio"]+label::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden
}

.color-filter input[type="radio"]+label i {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%
}

.color-filter input[type="radio"]:checked+label::before {
    opacity: 1;
    visibility: visible
}

.filter-options>div {
    display: none
}

.iv-category .filter-list {
    width: 100%
}

.iv-category .filter-list a {
    position: relative
}

.iv-category .filter-list a::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -27px;
    left: 50%;
    width: 20px;
    width: 0;
    margin-left: -10px;
    height: 6px;
    background-color: #E61727
}

.iv-category .filter-list a.active {
    color: #E61727
}

.iv-category .filter-list a.active::before {
    width: 20px
}

.filter-list {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    text-align: center;
    font-size: 0
}

.filter-list li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 1.09375vw;
    font-size: 16px
}

.filter-list li a {
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .filter-list li a {
        font-size:2.93333vw
    }
}

.filter-list li a .icon {
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -21px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 12px solid rgba(112,112,112,0.24);
    opacity: 0;
    visibility: hidden
}

.filter-list li a .icon::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #fff
}

.filter-list li .active .icon {
    opacity: 1;
    visibility: visible
}

.iv-line {
    width: 100%;
    height: 1px;
    background-color: rgba(112,112,112,0.24);
    margin-top: 26px
}

.iv-caption h5 {
    font-size: 1.875em;
    line-height: 1;
    color: #000;
    line-height: 1.6;
    margin-bottom: 20px
}

@media only screen and (max-width: 1680px) {
    .iv-caption h5 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-caption h5 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-caption h5 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-caption h5 {
        font-size:4.8vw
    }
}

.iv-caption h3 {
    font-size: 1.875em;
    line-height: 1;
    color: #000;
    word-break: break-word;
    white-space: nowrap
}

@media only screen and (max-width: 1680px) {
    .iv-caption h3 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-caption h3 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-caption h3 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-caption h3 {
        font-size:4.8vw
    }
}

.iv-caption article {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111
}

@media only screen and (max-width: 1024px) {
    .iv-caption article {
        font-size:2.93333vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-caption article {
        font-size:2.93333vw
    }
}

.iv-caption .btn-secondary {
    margin-left: 0;
    margin-right: 0
}

.sidebar {
    width: 164px;
    width: 128px
}

.sidebar ul li a {
    display: block;
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .sidebar ul li a {
        font-size:2.93333vw
    }
}

.sidebar ul li a i {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 10px;
    height: 10px
}

.sidebar ul li a i::before,.sidebar ul li a i::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #707070
}

.sidebar ul li a i::before {
    width: 100%;
    height: 1px
}

.sidebar ul li a i::after {
    width: 1px;
    height: 100%
}

.sidebar ul li .active i::after {
    opacity: 0;
    visibility: hidden
}

.sidebar ul ul {
    display: none;
    margin-top: 10px
}

.sidebar ul ul li {
    padding: 2px 0
}

.sidebar ul ul li a {
    color: #707070
}

.sidebar>ul>li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

.sidebar>ul>li:last-child {
    border-bottom: none
}

.pulldown .btn-pulldown {
    display: none
}

.panel {
    margin-right: 164px
}

.subpage {
    position: absolute;
    top: 135px;
    left: 0;
    font-size: 0;
    z-index: 1000
}

.subpage .iv-crumbs {
    display: inline-block;
    vertical-align: top
}

.subpage .iv-crumbs ul {
    padding-top: 0
}

.subpage .dropdown {
    font-size: 16px;
    vertical-align: top;
    margin-left: 75px
}

.subpage .dropdown .dropdown-menu {
    background: none
}

.group-list {
    font-size: 0
}

.group-list>li {
    position: relative;
    font-size: 16px;
    padding-top: 40px;
    padding-bottom: 40px
}

.group-list li:last-child {
    padding-bottom: 0
}

.group-list .item-wrap {
    position: relative
}

.group-list .ban-content {
    position: relative
}

.group-list .ban-content::before {
    content: "";
    display: block
}

.group-list .ban-content .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%
}

.group-list .ban-pic .btn-video {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 20
}

.group-list .ban-pic .btn-video.pause {
    display: none
}

.common-form legend {
    display: block;
    font-size: 2.25em;
    line-height: 1.11111;
    color: #000;
    letter-spacing: .03em;
    color: #000;
    text-align: center;
    margin-bottom: 40px
}

@media only screen and (max-width: 1680px) {
    .common-form legend {
        font-size:1.90476vw
    }
}

@media only screen and (max-width: 1440px) {
    .common-form legend {
        font-size:1.875vw
    }
}

@media only screen and (max-width: 1280px) {
    .common-form legend {
        font-size:1.875vw
    }
}

@media only screen and (max-width: 1024px) {
    .common-form legend {
        font-size:5.86667vw
    }
}

.common-form .group-control {
    position: relative;
    margin-bottom: 30px
}

.common-form .on label:not(.error) {
    opacity: 0;
    visibility: hidden
}

.common-form .agreement.on label:not(.error),.common-form .subscribe.on label:not(.error) {
    opacity: 1;
    visibility: visible
}

.common-form label {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: .05em;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 20
}

@media only screen and (max-width: 1024px) {
    .common-form label {
        font-size:2.93333vw
    }
}

.common-form label.error {
    color: #E61727;
    font-size: 12px;
    top: 56px;
    right: 0;
    left: auto
}

.common-form .control,.common-form .flatpickr-input {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    border-bottom: 1px solid #575757;
    width: 100%;
    height: 50px
}

@media only screen and (max-width: 1024px) {
    .common-form .control,.common-form .flatpickr-input {
        font-size:2.93333vw
    }
}

.common-form .forget {
    float: left;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #575757;
    text-decoration: underline
}

@media only screen and (max-width: 1024px) {
    .common-form .forget {
        font-size:2.93333vw
    }
}

.common-form .account {
    float: right;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #575757
}

@media only screen and (max-width: 1024px) {
    .common-form .account {
        font-size:2.93333vw
    }
}

.common-form .register {
    color: #575757;
    text-decoration: underline
}

.common-form .btn-primaty {
    margin-right: 0
}

.iv-selection .iv-selection--option {
    display: none
}

.iv-meta {
    position: relative;
    z-index: 3000
}

.iv-meta>.btn-secondary {
    position: absolute;
    top: 50%;
    right: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.iv-meta .btns {
    position: absolute;
    top: 50%;
    right: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.iv-select {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin-left: 60px;
    margin-top: 10px
}

.iv-select a {
    font-size: .875em;
    line-height: 1.85714;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .iv-select a {
        font-size:2.93333vw
    }
}

.iv-select a i {
    margin-left: 5px
}

.iv-select .iv-selection--option {
    display: block
}

.iv-select .iv-selection--select {
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    padding-top: 30px
}

.iv-select .iv-selection--select a {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .iv-select .iv-selection--select a {
        font-size:2.93333vw
    }
}

.nav-tabs {
    position: relative;
    z-index: 5000
}

.nav-tabs .pt-50 {
    display: none
}

.nav-tabs .pt-70 {
    display: none
}

.nav-tabs .placeholder {
    height: 53px
}

.nav-tabs .nav-tabs--wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 3.125vw;
    padding-right: 3.125vw
}

@media only screen and (max-width: 1024px) {
    .nav-tabs .nav-tabs--wrap {
        padding-left:5.33333vw;
        padding-right: 5.33333vw
    }
}

.nav-tabs .nav-tabs--wrap.fix {
    position: fixed;
    z-index: 5000;
    bottom: auto;
    top: 99px;
    top: 79px;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding-left: 3.125vw;
    padding-right: 3.125vw
}

@media only screen and (max-width: 1024px) {
    .nav-tabs .nav-tabs--wrap.fix {
        padding-left:5.33333vw;
        padding-right: 5.33333vw
    }
}

.nav-tabs .nav-tabs--wrap.fix .nav-filter {
    padding-top: 40px
}

.nav-tabs .nav-filter {
    position: relative
}

.nav-tabs .filter-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 3500
}

.nav-stacked {
    position: relative;
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(112,112,112,0.24);
    z-index: 3400
}

.nav-stacked .find-result {
    position: absolute;
    top: 0;
    left: 0
}

.nav-stacked .dropdown {
    position: absolute;
    top: 0;
    left: 0
}

.nav-stacked .nav-category {
    display: inline-block;
    vertical-align: middle
}

.nav-stacked .btn-reset {
    position: absolute;
    top: 0;
    right: 0
}

.dropdown {
    text-align: left
}

.dropdown .dropdown-toggle {
    display: block;
    font-size: .875em;
    line-height: 1.85714;
    letter-spacing: .03em;
    color: #000;
    position: relative;
    padding-right: 30px
}

@media only screen and (max-width: 1024px) {
    .dropdown .dropdown-toggle {
        font-size:2.93333vw
    }
}

.dropdown .dropdown-toggle::before {
    content: "\e71f";
    font-family: "iconfont";
    position: absolute;
    top: 50%;
    right: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.dropdown .dropdown-menu {
    background-color: #fff;
    padding-top: 5px;
    padding-right: 30px;
    padding-bottom: 10px
}

.dropdown .dropdown-menu a {
    display: block;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898;
    padding: 5px 0
}

@media only screen and (max-width: 1024px) {
    .dropdown .dropdown-menu a {
        font-size:2.93333vw
    }
}

.nav-category {
    font-size: 0
}

.nav-category>div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px
}

.nav-category>div input[type='radio'],.nav-category>div input[type='checkbox'] {
    display: none
}

.nav-category li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px
}

.nav-category a {
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    position: relative;
    margin: 0 1.19792vw;
    padding-bottom: 31px
}

@media only screen and (max-width: 1024px) {
    .nav-category a {
        font-size:2.93333vw
    }
}

.nav-category a::before {
    content: "";
    display: block;
    positioN: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    width: 20px;
    width: 0;
    height: 6px;
    background-color: #E61727;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.nav-category a .icon-icon-select {
    display: inline-block
}

.nav-category .current a,.nav-category .active a {
    color: #E61727
}

.nav-category .current a::before,.nav-category .active a::before {
    width: 20px
}

.nav-category a.active {
    color: #E61727
}

.nav-category a.active::before {
    width: 20px
}

.nav-category a.on .icon-icon-select {
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.nav-sort {
    font-size: 0
}

.nav-sort>div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 55px
}

.nav-sort a {
    display: block;
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .nav-sort a {
        font-size:4.8vw
    }
}

.nav-sort .current {
    color: #000
}

.find-result {
    font-size: .875em;
    line-height: 1.625;
    letter-spacing: .03em;
    color: #000;
    font-size: 16px;
    opacity: .5
}

@media only screen and (max-width: 1024px) {
    .find-result {
        font-size:2.93333vw
    }
}

.video-layer .btn-video {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 1px solid #000;
    position: relative
}

.video-layer .btn-video::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 4px solid transparent;
    border-left: 6px solid #000;
    border-bottom: 4px solid transparent;
    border-top: 8px solid transparent;
    border-left: 12px solid #000;
    border-bottom: 8px solid transparent;
    margin-left: 4px
}

.video-layer .btn-video.pause::before {
    border: none;
    width: 16px;
    height: 16px;
    background-color: #000;
    margin: 0
}

.video-layer .btn-video.play {
    border-color: #fff;
    background-color: #fff
}

.video-layer .btn-video.play::before {
    border-left-color: #000
}

.video-layer .video_wrapper {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.video-layer .btn_video_pause {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    color: #E61727;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    cursor: pointer;
    z-index: 300
}

.video-layer video {
    display: block;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    z-index: 20
}

@-webkit-keyframes animate {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50%, 60% {
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0)
    }

    61% {
        opacity: 0;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }

    62% {
        opacity: 1;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes animate {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50%, 60% {
        -webkit-transform: translate(100%, 0);
        transform: translate(100%, 0)
    }

    61% {
        opacity: 0;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }

    62% {
        opacity: 1;
        -webkit-transform: translate(-100%, 0);
        transform: translate(-100%, 0)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@media only screen and (max-width: 1440px) and (min-width: 1024px) {
    .btn-default,.btn-past {
        width:10.41667vw;
        height: 2.8125vw;
        line-height: 2.8125vw
    }

    .btn-default.btn-sg,.btn-past.btn-sg {
        width: 8.02083vw;
        height: 2.8125vw;
        line-height: 2.8125vw
    }

    .btn-default.btn-lg,.btn-past.btn-lg {
        width: 12.8125vw;
        height: 3.125vw;
        line-height: 3.125vw
    }

    .btn-download {
        width: 9.58333vw;
        height: 2.77778vw;
        line-height: 2.77778vw;
        padding: 0 !important
    }

    .btn-secondary {
        padding: 6px 20px
    }

    .btn-secondary.btn-reg {
        padding: 0;
        width: 9.58333vw;
        height: 2.77778vw;
        line-height: 2.77778vw
    }

    .btn-secondary.btn-lg {
        width: 10.41667vw;
        height: 2.8125vw;
        line-height: 2.8125vw
    }

    .btn-secondary.btn-ng {
        width: 9.16667vw;
        width: 8.76667vw;
        height: 2.8125vw;
        line-height: 2.8125vw
    }

    .btn-secondary.btn-sg {
        width: 10.41667vw;
        height: 2.8125vw;
        line-height: 2.8125vw
    }

    .btn-dark {
        width: 12.8125vw;
        height: 3.125vw;
        line-height: 3.125vw
    }

    .btn-dark.btn-ng {
        width: 10.41667vw;
        height: 2.8125vw;
        line-height: 2.8125vw
    }

    .btn-dark.btn-sg {
        width: 10.69444vw;
        height: 3.75vw;
        line-height: 3.75vw
    }

    .btn-dark.btn-lg {
        width: 6.25vw;
        height: 2.08333vw;
        line-height: 2.08333vw
    }

    .iv-wrap {
        height: calc(100vh - 69px)
    }

    .iv-wrap .iv-wrap--thumbs figure {
        height: calc(100vh - 69px)
    }

    .common-form legend {
        margin-bottom: 20px
    }

    .common-form .group-control {
        margin-bottom: 10px
    }

    .common-form label {
        top: 10px;
        left: 0
    }

    .common-form .control {
        height: 40px
    }

    .subpage {
        top: 90px
    }

    .nav-tabs .nav-tabs--wrap.fix {
        top: 69px
    }

    .nav-stacked {
        padding-bottom: 15px
    }

    .iv-wd {
        max-width: 1188px;
        width: 70%;
        width: 60%;
        width: 80%;
        margin-left: auto;
        margin-right: auto
    }

    .nav-category a {
        margin: 0 .69444vw;
        padding-bottom: 16px
    }

    .iv-crumbs ul {
        padding-top: 0
    }

    .nav-tabs .pt-50,.nav-tabs .pt-70 {
        padding-top: 0
    }

    .nav-tabs .nav-tabs--wrap.fix .nav-filter {
        padding-top: 0
    }

    .group-list .ban-content .caption {
        width: 73%
    }
}

@media only screen and (min-width: 1025px) {
    .iv-category .filter-list a:hover {
        color:#E61727
    }

    .iv-category .filter-list a:hover::before {
        width: 20px
    }

    .btn-hov--default i::before {
        display: inline-block;
        vertical-align: middle;
        -webkit-animation-duration: .55s;
        animation-duration: .55s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards
    }

    .btn-hov--default:hover {
        color: #fff;
        border-color: #E61727;
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1)
    }

    .btn-hov--default:hover::before,.btn-hov--default:hover::after {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    .btn-hov--default:hover::after {
        -webkit-transition-delay: 0.175s;
        transition-delay: 0.175s
    }

    .btn-hov--default:hover i::before {
        -webkit-animation-name: animate;
        animation-name: animate
    }

    .btn-hov--button:hover {
        background-color: #E61727 !important
    }

    .btn-download:hover {
        color: #E61727
    }

    .btn-download:hover p {
        color: #E61727
    }

    .share a:hover {
        color: #E61727
    }

    .share .share-list {
        opacity: 0;
        visibility: hidden;
        -moz-transform: translate(-10px, 0) scale(0, 1);
        -ms-transform: translate(-10px, 0) scale(0, 1);
        -webkit-transform: translate(-10px, 0) scale(0, 1);
        transform: translate(-10px, 0) scale(0, 1);
        transform-origin: right top;
        -webkit-transform-origin: right top;
        -moz-transform-origin: right top;
        -ms-transform-origin: right top;
        -o-transform-origin: right top
    }

    .share:hover .btn-share {
        opacity: 0;
        visibility: hidden
    }

    .share:hover .share-list {
        opacity: 1;
        visibility: visible;
        -moz-transform: translate(0, 0) scale(1, 1);
        -ms-transform: translate(0, 0) scale(1, 1);
        -webkit-transform: translate(0, 0) scale(1, 1);
        transform: translate(0, 0) scale(1, 1)
    }

    .group-list .ban-pic {
        position: absolute;
        top: 0
    }

    .group-list li:nth-child(odd) .ban-pic {
        left: 0
    }

    .group-list li:nth-child(even) .ban-pic {
        right: 0
    }

    .iv-select .iv-selection--select {
        opacity: 0;
        visibility: hidden;
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
        -webkit-transition: all .3s;
        transition: all .3s;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top
    }

    .iv-select .iv-selection--select a:hover {
        color: #E61727
    }

    .iv-select:hover .iv-selection--select {
        opacity: 1;
        visibility: visible;
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    .dropdown .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        height: 0;
        -moz-transform: scale(1, 0);
        -webkit-transform: scale(1, 0);
        transform: scale(1, 0);
        -webkit-transition: all .3s;
        transition: all .3s;
        transform-origin: left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top
    }

    .dropdown .dropdown-menu a:hover {
        color: #E61727
    }

    .dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        height: auto;
        -moz-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    .nav-category a:hover {
        color: #E61727
    }

    .nav-category a:hover::before {
        width: 100%;
        width: 20px
    }

    .btn-link:hover {
        color: #fff
    }

    .btn-link:hover::after {
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: 1;
        visibility: visible
    }

    .btn-reset:hover {
        color: #E61727
    }

    .btn-secondary:not(.disable):hover,.btn-default:not(.disable):hover,.btn-dark:not(.disable):hover {
        color: #fff
    }

    .btn-secondary:not(.disable):hover::before,.btn-default:not(.disable):hover::before,.btn-dark:not(.disable):hover::before {
        background-color: #E61727;
        border-color: #E61727;
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1)
    }

    .btn-secondary.btn-noclick:hover,.btn-default.btn-noclick:hover,.btn-dark.btn-noclick:hover {
        color: #000
    }

    .btn-secondary.btn-noclick:hover::before,.btn-default.btn-noclick:hover::before,.btn-dark.btn-noclick:hover::before {
        background: none;
        border-color: #000;
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    .btn-setting:hover {
        color: #E61727
    }

    .btn-past:hover {
        cursor: not-allowed;
        color: #fff
    }

    .btn-past:hover::before {
        background-color: #989898;
        border-color: #989898
    }

    .iv-crumbs ul a:hover {
        color: #E61727
    }

    .item-box figure {
        overflow: hidden
    }

    .item-box figure img {
        -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
        -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
        -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
        transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000)
    }

    .item-box:hover figure img {
        -moz-transform: scale(1.08, 1.08);
        -ms-transform: scale(1.08, 1.08);
        -webkit-transform: scale(1.08, 1.08);
        transform: scale(1.08, 1.08)
    }

    .sidebar ul ul li a:hover,.sidebar ul ul li a.active {
        color: #E61727
    }

    .nav-sort a:not(.current):hover {
        color: #E61727
    }

    .common-form .register:hover,.common-form .forget:hover {
        color: #E61727
    }

    .common-form .has label:not(.error) {
        opacity: 1;
        visibility: visible;
        -moz-transform: translate(0, -20px);
        -ms-transform: translate(0, -20px);
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
        color: #E61727;
        font-size: 12px
    }
}

@media only screen and (max-width: 1024px) {
    .wrapper {
        min-height:40vh
    }

    .iv-wrap {
        height: auto
    }

    .iv-wrap .iv-wrap--content {
        position: relative;
        top: 0;
        width: auto;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .iv-wrap .iv-wrap--content figcaption {
        margin-left: 0;
        width: 100%
    }

    .iv-wrap .iv-wrap--thumbs {
        display: block;
        width: 100%
    }

    .iv-wrap .iv-wrap--thumbs figure {
        height: auto
    }

    .btn-default,.btn-past {
        width: 38.26667vw;
        height: 10.66667vw;
        line-height: 10.66667vw;
        margin-left: auto;
        margin-right: auto
    }

    .btn-default span,.btn-past span {
        font-size: 12px;
        font-size: 2.93333vw
    }

    .btn-past {
        cursor: not-allowed;
        color: #fff
    }

    .btn-past::before {
        background-color: #989898;
        border-color: #989898
    }

    .btn-primaty {
        width: 32.8vw;
        height: 12vw;
        line-height: 12vw;
        margin-right: 1.86667vw
    }

    .btn-default {
        width: 26.66667vw;
        height: 7.2vw;
        line-height: 7.2vw;
        width: 38.26667vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-default.btn-lg {
        width: 32.8vw;
        height: 12vw;
        line-height: 12vw
    }

    .btn-default.btn-sg {
        width: 32.8vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-secondary {
        padding: 6px 20px
    }

    .btn-secondary.btn-lg {
        width: 32.26667vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-secondary.btn-sg {
        width: 32.26667vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-secondary.btn-ng {
        width: 24vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-secondary.btn-noclick {
        width: 21.33333vw;
        height: 10.66667vw;
        line-height: 10.66667vw;
        font-size: 4vw
    }

    .btn-secondary.btn-noclick img {
        width: 5.6vw
    }

    .btn-dark {
        width: 32.8vw;
        height: 12vw;
        line-height: 12vw
    }

    .btn-dark.btn-ng {
        width: 26.66667vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-dark.btn-sg {
        width: 20.53333vw;
        height: 7.2vw;
        line-height: 7.2vw;
        width: 32.8vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-dark.btn-lg {
        width: 16vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .btn-download {
        width: 37.33333vw;
        height: 10.66667vw;
        line-height: 11.6vw;
        padding: 0;
        margin: 0 1.33333vw
    }

    .btn-download.none-marg {
        margin-right: 0;
        margin-left: 0
    }

    .iv-wd {
        width: 100%;
        margin-left: 0;
        margin-right: 0
    }

    .group-list li {
        margin-bottom: 10.66667vw;
        margin-bottom: 0;
        padding-top: 5.33333vw;
        padding-bottom: 5.33333vw
    }

    .group-list li:nth-child(odd) .ban-pic {
        float: none;
        clear: both;
        position: relative
    }

    .group-list li:nth-child(odd) .ban-content {
        float: none;
        clear: both
    }

    .group-list li:nth-child(even) .ban-pic {
        float: none;
        clear: both;
        position: relative
    }

    .group-list li:nth-child(even) .ban-content {
        float: none;
        clear: both
    }

    .group-list .ban-content {
        margin-top: 6.66667vw
    }

    .group-list .ban-content .caption {
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .iv-caption h5 {
        margin-bottom: 2.66667vw
    }

    .iv-crumbs {
        display: block
    }

    .iv-crumbs ul {
        padding-top: 2.66667vw
    }

    .subpage {
        padding-left: 3.125vw;
        padding-right: 3.125vw;
        padding-right: 0 !important;
        top: 70px;
        top: 15vw;
        width: 100%
    }
}

@media only screen and (max-width: 1024px) and (max-width: 1024px) {
    .subpage {
        padding-left:5.33333vw;
        padding-right: 5.33333vw
    }
}

@media only screen and (max-width: 1024px) {
    .subpage .iv-crumbs {
        display:inline-block;
        vertical-align: top;
        padding-left: 0;
        padding-right: 0;
        margin-right: 2.66667vw;
        margin-right: 0
    }

    .subpage .iv-crumbs ul {
        margin-top: -2px
    }

    .subpage .dropdown {
        margin-left: 2.66667vw;
        margin-right: 0;
        padding-right: 0;
        display: inline-block;
        vertical-align: top
    }

    .subpage .dropdown .dropdown-menu {
        display: none;
        background-color: #F1F1F1;
        padding-left: 2.66667vw;
        margin-left: -2.66667vw
    }

    .dropdown .dropdown-menu {
        display: none;
        padding-right: 0
    }

    .dropdown .dropdown-toggle {
        padding-right: 5.33333vw
    }

    .iv-selection {
        margin-top: 4.53333vw
    }

    .iv-selection {
        position: relative;
        z-index: 3000;
        width: 100%;
        margin-left: 0
    }

    .iv-selection .iv-selection--option {
        position: relative;
        display: block;
        height: 12vw;
        line-height: 12vw;
        border: 1px solid #C9C9C9;
        text-align: center;
        font-size: 2.93333vw;
        letter-spacing: .03em;
        color: #707070
    }

    .iv-selection .iv-selection--option::before {
        content: "\e71f";
        font-family: 'iconfont';
        position: absolute;
        top: 50%;
        right: 2.4vw;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .iv-selection .iv-selection--select {
        display: none;
        position: absolute;
        top: 12vw;
        left: 0;
        width: 100%;
        background-color: #fff;
        border: 1px solid rgba(112,112,112,0.1);
        padding: 0 2.66667vw
    }

    .iv-select a i {
        display: none
    }

    .iv-filter .filter-clear {
        display: none
    }

    .iv-filter .iv-line {
        display: none
    }

    .iv-filter .filter-result {
        display: block;
        width: 100%;
        text-align: left;
        margin-top: 2.66667vw
    }

    .btn-button {
        width: 24vw;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .iv-line {
        margin-top: 5.06667vw
    }

    .btn-link {
        width: 32.26667vw;
        height: 8vw;
        line-height: 8vw
    }

    .nav-stacked {
        padding-bottom: 4vw;
        padding-bottom: 0
    }

    .nav-stacked .nav-category {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        background-color: #fff;
        margin-left: -2.66667vw
    }

    .nav-stacked .nav-category.open {
        right: 0
    }

    .nav-stacked .btn-reset {
        top: 44px;
        top: auto
    }

    .nav-stacked .find-result {
        top: 42px;
        top: auto;
        bottom: -5vw;
        z-index: 200
    }

    .nav-category>div {
        display: block;
        padding: 2.66667vw 0
    }

    .nav-category a {
        padding-bottom: 0;
        margin: 0 2.66667vw
    }

    .nav-category a::before {
        display: none
    }

    .nav-tabs .placeholder {
        height: 7.06667vw;
        display: none
    }

    .nav-tabs .nav-tabs--wrap {
        position: relative;
        z-index: 20000;
        padding-left: 0;
        padding-right: 0
    }

    .nav-tabs .nav-tabs--wrap.fix {
        z-index: 20000;
        top: 13.33333vw
    }

    .nav-tabs .nav-tabs--wrap.fix .nav-filter {
        padding-top: 5.33333vw
    }

    .nav-inner-tabs .placeholder {
        height: 7.06667vw;
        display: block;
        height: 23.86667vw;
        height: 38.76667vw;
        height: 24.46667vw;
        height: 16.06667vw
    }

    .nav-inner-tabs .nav-tabs--wrap {
        position: fixed;
        top: 13.6vw;
        top: 19.6vw;
        top: 20.1vw;
        top: 22.9vw;
        top: 22.7vw;
        height: auto;
        bottom: auto;
        width: 100%;
        padding-left: 5.33333vw;
        padding-right: 5.33333vw
    }

    .nav-inner-tabs .nav-tabs--wrap.fix {
        top: 19.6vw;
        top: 20.1vw;
        top: 22.9vw;
        top: 22.7vw;
        top: 13.6vw;
        top: 13.1vw
    }

    .nav-inner-tabs .nav-tabs--wrap.fix::before {
        content: "";
        display: block;
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff
    }

    .nav-inner-tabs .nav-tabs--wrap.fix .nav-filter {
        padding-top: 2.66667vw
    }

    .nav-inner-tabs .nav-filter {
        padding-top: 2.66667vw
    }

    .btn-categorys {
        display: inline-block
    }

    .btn-download {
        margin-right: 0
    }

    .features-filter {
        padding: 1.33333vw 2.66667vw;
        padding-top: 0;
        padding-bottom: 0;
        text-align: left
    }

    .features-filter a {
        width: 33.333333%;
        margin: 1.33333vw 0;
        text-align: left
    }

    .features-filter input[type="radio"]+label i,.features-filter input[type="checkbox"]+label i {
        width: 3.2vw;
        height: 3.2vw;
        margin-right: 1.86667vw;
        vertical-align: -1px
    }

    .features-filter input[type="radio"]+label i::before,.features-filter input[type="checkbox"]+label i::before {
        width: 1.6vw;
        height: 1.6vw
    }

    .color-filter {
        padding: 1.33333vw 2.66667vw;
        padding-top: 0;
        padding-bottom: 0;
        text-align: left;
        text-align: left
    }

    .color-filter a {
        margin: 1.33333vw 0;
        text-align: left
    }

    .color-filter input[type="radio"]+label,.color-filter input[type="checkbox"]+label {
        width: 4.8vw;
        height: 4.8vw
    }

    .color-filter input[type="radio"]+label i,.color-filter input[type="checkbox"]+label i {
        width: 2.4vw;
        height: 2.4vw;
        margin-right: 1.06667vw
    }

    .pulldown {
        position: relative;
        z-index: 10000;
        width: 100%;
        top: 0;
        background-color: #fff;
        border-bottom: none
    }

    .pulldown .btn-pulldown {
        display: block;
        width: 100%;
        height: 12vw;
        line-height: 12vw;
        text-align: center;
        border: 1px solid #C9C9C9;
        position: relative;
        border-radius: 5px
    }

    .pulldown .btn-pulldown::before {
        content: "\e71f";
        position: absolute;
        top: 50%;
        right: 4vw;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #989898
    }

    .pulldown .btn-pulldown h3 {
        font-size: 3.2vw;
        letter-spacing: .03em;
        color: #989898;
        position: absolute;
        top: 50%;
        width: 100%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .pulldown .pulldown-select {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        border: 1px solid #C9C9C9;
        border-top: none;
        padding: 0 4vw;
        border-radius: 5px;
        margin-left: 0;
        margin-right: 0
    }

    .sidebar>ul>li {
        padding: 2.66667vw 0;
        border-bottom: none
    }

    .sidebar>ul>li>a i {
        display: none
    }

    .video-layer .btn-video {
        width: 13.33333vw;
        height: 13.33333vw
    }

    .video-layer .btn-video::before {
        border-top: 1.33333vw solid transparent;
        border-left: 1.86667vw solid #000;
        border-bottom: 1.33333vw solid transparent;
        margin-left: 2px
    }

    .nav-sort>div {
        display: block;
        margin-right: 0;
        text-align: center;
        padding: 2.66667vw 0
    }

    .nav-sort>div a {
        color: #000;
        font-size: 2.93333vw
    }

    .nav-sort>div a.current {
        color: #E61727
    }
}

.header {
    height: 99px;
    /* height:79px */
}

.header .header-cont {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9000;
    padding-top: 30px;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-bottom: 20px;
    background-color: #fff
}

.header .btn-menu {
    font-size: .875em;
    line-height: 2.85714;
    color: #000;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .header .btn-menu {
        font-size:2.93333vw
    }
}

.header .btn-menu::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.header .btn-menu span {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    margin-right: .52083vw
}

.header .btn-menu.open span::before {
    content: "\e73e"
}

.header .logo {
    position: absolute;
    top: 50%;
    left: 50%
}

.header .logo img {
    display: block
}

.header .tools {
    display: block;
    float: right;
    font-size: 0
}

.header .line {
    display: inline-block;
    vertical-align: middle;
    width: 3.59375vw;
    height: 1px;
    background-color: rgba(0,0,0,0.2);
    margin-right: .9375vw
}

.header .shop,.header .lang,.header .search {
    font-size: 16px;
    vertical-align: middle;
    position: relative
}

.header .shop {
    margin-right: 1.04167vw
}

.header .shop a {
    display: inline-block;
    vertical-align: middle;
    font-size: 1em;
    color: #000;
    margin: 0 .41667vw
}

@media only screen and (max-width: 1024px) {
    .header .shop a {
        font-size:2.93333vw
    }
}

.header .search {
    margin: 0 .41667vw
}

.header .search a {
    display: block;
    font-size: 1em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .header .search a {
        font-size:2.93333vw
    }
}

.header .lang {
    position: relative
}

.header .lang a {
    display: block;
    font-size: .875em;
    line-height: 2.85714;
    color: #000;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .header .lang a {
        font-size:2.93333vw
    }
}

.header .lang .lang-list {
    position: absolute;
    top: 26px;
    left: 0;
    width: 100%;
    transform-origin: left top;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -moz-transform: translate(0, 10px);
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
    opacity: 0;
    visibility: hidden
}

.header .btn-cart {
    position: relative
}

.header .btn-cart span {
    position: absolute;
    top: -12px;
    right: -18px;
    width: 18px;
    height: 18px;
    background-color: #E61727;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    color: #fff
}

.header .btn-user {
    position: relative
}

.header .btn-user .btn-account span {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .header .btn-user .btn-account span {
        font-size:2.93333vw
    }
}

.header .btn-user .user--operation {
    position: absolute;
    top: 21px;
    left: 0;
    width: 100px;
    padding-top: 8px
}

.header .btn-user .user--operation a {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .header .btn-user .user--operation a {
        font-size:2.93333vw
    }
}

.fix-height {
    position: absolute;
    width: 0;
    opacity: 0;
    visibility: hidden;
    height: 192px;
    height: 172px
}

.search.open .search-form {
    width: 260px
}

.search.open .btn-search::before {
    content: "\e733"
}

.search-form {
    position: absolute;
    top: 0;
    right: 20px;
    width: 260px;
    width: 0;
    overflow: hidden
}

.search-form .group-control {
    position: relative;
    margin-left: 30px
}

.search-form .on label {
    display: none
}

.search-form input {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    width: 100%;
    font-size: 16px;
    color: #111
}

.search-form label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    color: #111
}

.search-form button {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font-size: 1em;
    color: #000;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    text-align: right;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .search-form button {
        font-size:2.93333vw
    }
}

.page-list .header .header-cont {
    background: transparent
}

.body-page .header .header-cont {
    background-color: #fff
}

.page-open .header .header-cont {
    background-color: #fff
}

.page-diy .header .header-cont {
    background-color: #efefef
}

.page-diy .header .btn-menu,.page-diy .header .tools {
    opacity: 0
}

.mainnav {
    display: none;
    position: fixed;
    top: 99px;
    top: 79px;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid rgba(112,112,112,0.24);
    z-index: 6000;
    padding-left: 3.125vw;
    padding-right: 3.125vw;
    padding-bottom: 120px;
    padding-top: 56px;
}

@media only screen and (max-width: 1024px) {
    .mainnav {
        padding-left:5.33333vw;
        padding-right: 5.33333vw
    }
}

.mainnav .btn-close {
    display: none
}

.mainnav .topnav {
    position: relative;
    margin-left: 1.5625vw
}

.mainnav .sidenav {
    width: 164px;
    position: relative;
    z-index: 1000;
    top: -3px
}

.mainnav .sidenav::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    bottom: 3px;
    right: 0;
    width: 1px;
    height: auto;
    background-color: rgba(112,112,112,0.24)
}

.mainnav .sidenav>li {
    margin: 32px 0
}

.mainnav .sidenav>li>a {
    display: block;
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: normal;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .mainnav .sidenav>li>a {
        font-size:4.8vw
    }
}

.mainnav .sidenav>li>a::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 20px;
    background-color: #E61727;
    height: 0
}

.mainnav .sidenav>li.active>a {
    color: #E61727
}

.mainnav .sidenav>li.active>a::before {
    height: 20px
}

.mainnav .sidenav>li:first-child {
    margin-top: 0
}

.mainnav .sidenav>li:last-child {
    margin-bottom: 0
}

.mainnav .sidenav .drop-down {
    display: none
}

.mainnav .subnav {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    height: 108%;
    width: 100%;
    padding-left: 14.16667vw;
    z-index: 500
}

.mainnav .subnav .subnav-wrap {
    height: 240px;
    position: relative;
    overflow: hidden;
}

.mainnav .subnav ul {
    display: none
}

.mainnav .nav {
    font-size: 0;
    margin-left: -.52083vw;
    margin-right: -.52083vw
}

.mainnav .nav li {
    display: inline-block;
    vertical-align: middle;
    width: 25%;
    font-size: 16px
}

.mainnav .nav li a {
    display: block;
    margin: 0 .52083vw
}

.mainnav .nav li a .img-box::before {
    padding-top: 61.62465%
}

.mainnav .nav li a figcaption {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    margin-top: 10px
}

@media only screen and (max-width: 1024px) {
    .mainnav .nav li a figcaption {
        font-size:3.73333vw
    }
}

.mainnav .pro-nav {
    font-size: 0;
    margin-left: -.52083vw;
    margin-right: -.52083vw
}

.mainnav .pro-nav li {
    display: inline-block;
    vertical-align: top;
    width: 10%;
    font-size: 16px;
    margin-bottom: 5px
}

.mainnav .pro-nav li a {
    display: block;
    margin: 0 .52083vw
}

.mainnav .pro-nav li a .img-box::before {
    padding-top: 61.36364%
}

.mainnav .pro-nav li a figcaption {
    font-size: .875em;
    line-height: 1.4;
    letter-spacing: .03em;
    color: #000;
    margin-top: 5px
}

@media only screen and (max-width: 1024px) {
    .mainnav .pro-nav li a figcaption {
        font-size:3.73333vw
    }
}

.mainnav .tools {
    display: none
}

.guide {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E61727;
    z-index: 10000
}

.guide img {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 300px
}

@media only screen and (max-width: 1440px) and (min-width: 1024px) {
    .header {
        height:69px
    }

    .header .header-cont {
        padding-top: 15px;
        padding-bottom: 15px
    }

    .header .logo img {
    }

    .fix-height {
        height: 107px
    }

    .mainnav {
        top: 69px;
        padding-bottom: 100px;
        padding-top: 10px;
    }

    .mainnav .sidenav li {
        margin: 17px 0
    }

    .mainnav .sidenav>li>a {
        font-size: 1.25vw
    }

    .mainnav .nav li a figcaption {
        font-size: .97222vw
    }

    .mainnav .pro-nav li a figcaption {
        font-size: .97222vw
    }
}

@media only screen and (min-width: 1025px) {
    .header .lang .lang-list {
        transform-origin:left top;
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        -moz-transform: translate(0, 10px);
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
        visibility: hidden
    }

    .header .lang .lang-list a:hover {
        color: #E61727
    }

    .header .lang:hover>a {
        color: #E61727
    }

    .header .lang:hover .lang-list {
        -moz-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible
    }

    .header.topid .header-cont {
        padding-top: 15px;
        padding-bottom: 15px
    }

    .header .btn-user .user--operation {
        opacity: 0;
        visibility: hidden;
        -moz-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px)
    }

    .header .btn-user:hover .user--operation {
        opacity: 1;
        visibility: visible;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .header .btn-user:hover .user--operation a:hover {
        color: #E61727
    }
}

@media only screen and (max-width: 1024px) {
    .guide img {
        width:40vw
    }

    .header {
        height: 13.6vw
    }

    .header .line {
        display: none
    }

    .header .lang {
        display: none
    }

    .header .search {
        margin: 0 2vw
    }

    .header .search a {
        font-size: 4vw
    }

    .header .shop {
        margin-right: -2vw
    }

    .header .shop .btn-alike {
        display: none
    }

    .header .shop a {
        font-size: 4vw;
        margin: 0 2vw
    }

    .header .shop .btn-account {
        display: none
    }

    .header .logo {
        width: 19.06667vw
    }

    .header .logo img {
        width: 100%
    }

    .header .btn-menu {
        display: block;
        float: left;
        font-size: 0;
        padding: 10px;
        margin-left: -10px
    }

    .header .btn-menu span {
        width: 4.8vw;
        height: 2.93333vw;
        line-height: 2.93333vw;
        font-size: 2.8vw
    }

    .header .tools {
        margin-top: 7px
    }

    .header .header-cont {
        padding-top: 2.66667vw;
        padding-bottom: 2.66667vw;
        z-index: 25000
    }

    .header .btn-user .user--operation {
        display: none
    }

    .mainnav {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 30000;
        padding-top: 0;
        padding-left: 4vw;
        padding-right: 10.66667vw;
        padding-top: 2.66667vw;
        overflow-y: scroll
    }

    .mainnav .btn-close {
        display: block;
        width: 4.8vw;
        font-size: 4.8vw;
        position: absolute;
        top: 6.66667vw;
        right: 4vw;
        text-align: center;
        color: #040000;
        z-index: 1000
    }

    .mainnav .btn-close::before {
        font-family: "iconfont";
        content: "\e73e"
    }

    .mainnav .search {
        display: block;
        width: 100%;
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        margin: 0
    }

    .mainnav .search-form {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.2)
    }

    .mainnav .search-form .group-control {
        margin-left: 0;
        margin-left: 6.66667vw
    }

    .mainnav .search-form .control {
        height: 10.66667vw;
        border-bottom: none
    }

    .mainnav .search-form label {
        font-size: 3.2vw;
        color: #989898;
        top: 50%;
        left: 0;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .mainnav .search-form button {
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 4vw;
        width: 6.66667vw;
        text-align: left
    }

    .mainnav .topnav {
        margin-left: 0;
        margin-top: 6.66667vw
    }

    .mainnav .subnav {
        display: none
    }

    .mainnav .sidenav {
        width: 100%;
        top: 20vw;
        top: 0
    }

    .mainnav .sidenav::before {
        display: none
    }

    .mainnav .sidenav>li {
        margin: 5.33333vw 0
    }

    .mainnav .sidenav>li>a {
        position: relative;
        font-size: 4vw
    }

    .mainnav .sidenav>li>a::before {
        display: none
    }

    .mainnav .sidenav>li>a::after {
        font-family: "iconfont";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        content: "\e71f";
        position: absolute;
        top: 50%;
        right: -8px;
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .mainnav .sidenav>li.active>a {
        color: #000
    }

    .mainnav .sidenav .drop-down {
        padding: 0 5.86667vw;
        padding-top: 2.66667vw
    }

    .mainnav .sidenav .drop-down ul li {
        padding: 2.66667vw 0
    }

    .mainnav .sidenav .drop-down figure {
        display: none
    }

    .mainnav .sidenav .drop-down figcaption {
        font-size: 3.2vw;
        line-height: .91667;
        color: #989898;
        letter-spacing: .05em
    }

    .mainnav .tools {
        display: block;
        float: none;
        clear: both;
        margin-top: 6.66667vw
    }

    .mainnav .tools .shop {
        padding: 4vw 0
    }

    .mainnav .tools .shop a {
        font-size: 3.2vw;
        color: #000;
        line-height: 4vw;
        margin: 0
    }

    .mainnav .tools .shop a::before {
        display: inline-block;
        font-size: 4vw;
        margin-right: 2.66667vw;
        width: 4vw
    }

    .mainnav .langs a {
        font-size: 3.2vw;
        color: #000;
        position: relative;
        margin-right: 5.33333vw
    }

    .mainnav .langs .btn-link--cn::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #000
    }

    .mainnav .langs .btn-link--en {
        color: #989898
    }

    .fix-height {
        height: 26.66667vw
    }
}

.iv-banner .iv-wrap--content {
    left: 0
}

.iv-banner .iv-wrap--content figcaption {
    width: 37.52083vw
}

.iv-banner .iv-wrap--content article {
    width: 60%
}

.iv-banner .iv-wrap--thumbs {
    margin-left: 50%
}

.iv-banner .btn-default {
    margin-left: 0;
    margin-right: 0
}

.projects__clock {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5
}

.projects__panel_left {
    right: 50%;
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

.projects__panel_right {
    left: 50%;
    -webkit-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
    transform-origin: 0% 50%
}

.projects__panel {
    display: none;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 200vw;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.clock {
    width: 23.54167vw;
    height: 23.54167vw;
    width: 452px;
    height: 452px;
    margin: auto
}

.clock__dial {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.clock__dial .clock__dial__default {
    stroke: #111;
    opacity: .4
}

.clock__dial .clock__dial__progress {
    stroke: #111;
    opacity: 1
}

.clock__dial .clock__dial__hours {
    pointer-events: none;
    fill-opacity: 0;
    stroke-width: 1;
    stroke-opacity: .4;
    stroke: currentColor
}

.clock__dial .clock__dial__hour {
    cursor: pointer;
    pointer-events: all;
    fill: rgba(255,255,255,0);
    fill-opacity: 1;
    stroke: none
}

.clock__dial .clock__dial__hour__circle {
    fill: #000
}

.clock__dial .clock__dial__minutes {
    opacity: .4
}

.clock__dial .clock__dial__minutes line {
    stroke: #111
}

.iv-prod .iv-wrap--content {
    right: 0
}

.iv-prod .iv-wrap--content figcaption {
    margin-left: 19.79167vw
}

.iv-prod .iv-wrap--prod {
    position: absolute;
    top: 15vh;
    top: 50%;
    left: 50%;
    margin-left: -11.97917vw;
    background-color: #fff;
    width: 23.95833vw;
    padding: 25px;
    box-shadow: 0 11px 30px rgba(33,40,39,0.1);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.iv-prod .iv-wrap--prod .img-box::before {
    padding-top: 92.68293%
}

.iv-prod .iv-wrap--prod figcaption {
    margin-top: 25px
}

.iv-prod .iv-wrap--prod figcaption h3 {
    font-size: 2.25em;
    line-height: 1.11111;
    color: #000;
    margin-bottom: 3px
}

@media only screen and (max-width: 1680px) {
    .iv-prod .iv-wrap--prod figcaption h3 {
        font-size:1.90476vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-prod .iv-wrap--prod figcaption h3 {
        font-size:1.875vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-prod .iv-wrap--prod figcaption h3 {
        font-size:1.875vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-prod .iv-wrap--prod figcaption h3 {
        font-size:5.86667vw
    }
}

.iv-prod .iv-wrap--prod figcaption p {
    font-size: .875em;
    line-height: 1.71429;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .iv-prod .iv-wrap--prod figcaption p {
        font-size:2.93333vw
    }
}

.iv-prod .btn-default {
    margin-left: 0;
    margin-right: 0
}

.iv-prod .slick-dots {
    position: absolute;
    bottom: 38px;
    left: 0;
    width: 100%;
    padding: 0 2.60417vw;
    padding-left: 2.29167vw;
    font-size: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.iv-prod .slick-dots li {
    display: inline-block;
    vertical-align: middle;
    position: relative
}

.iv-prod .slick-dots li::before,.iv-prod .slick-dots li::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 34px;
    right: 0;
    width: auto;
    height: 1px;
    background-color: #fff
}

.iv-prod .slick-dots li::before {
    background-color: rgba(255,255,255,0.5)
}

.iv-prod .slick-dots li::after {
    width: 0;
    background-color: #fff
}

.iv-prod .slick-dots li button {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    font-size: 0;
    background: none;
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer
}

.iv-prod .slick-dots li button::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden
}

.iv-prod .slick-dots li button::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff
}

.iv-prod .slick-dots li.slick-active::after {
    width: calc(100% - 34px);
    transition-duration: 3s;
    -webkit-transition-duration: 3s
}

.iv-prod .slick-dots li.slick-active button::before {
    opacity: 1;
    visibility: visible
}

.iv-prod .slick-dots.slick-dots--1 li {
    width: calc(100% - 12px)
}

.iv-prod .slick-dots.slick-dots--2 li {
    width: calc(50% - 12px)
}

.iv-prod .slick-dots.slick-dots--3 li {
    width: calc(33.333333% - 12px)
}

.iv-prod .slick-dots.slick-dots--4 li {
    width: calc(25% - 12px)
}

.iv-prod .slick-dots.slick-dots--5 li {
    width: calc(20% - 12px)
}

.iv-diy .iv-wrap--thumbs {
    margin-left: 50%
}

.iv-diy .btn-default {
    margin-left: auto;
    margin-right: auto
}

.iv-diy .iv-wrap--content {
    margin-top: -60px
}

.diy-list {
    font-size: 0;
    text-align: center
}

.diy-list>div {
    display: inline-block;
    vertical-align: middle;
    margin: 0 .36458vw;
    width: 70px
}

.diy-list>div a {
    display: block;
    opacity: .2
}

.diy-list>div a.active {
    opacity: 1
}

.diy-list>div .img-box::before {
    padding-top: 42.85714%
}

.diy-mater {
    width: 29.375vw;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.diy-mater::before {
    content: "";
    display: block;
    padding-top: 41.05114%
}

.diy-mater>div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.beer-slider {
    position: relative;
    overflow: hidden
}

.beer-slider .img-box::before {
    padding-top: 41.05114%
}

.beer-slider .img-box .beer-img {
    top: 50%
}

.beer-slider .img-box .beer-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 200
}

.beer-slider .beer-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 400
}

.beer-slider .beer-handle {
    position: absolute;
    top: 0;
    width: 106px;
    height: 100%;
    margin-left: -53px;
    z-index: 600
}

.beer-slider .beer-handle::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(0%, rgba(0,0,0,0)),color-stop(100%, #000000));
    background-image: -moz-linear-gradient(right, rgba(0,0,0,0),#000000);
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0),#000000);
    background-image: linear-gradient(to left, rgba(0,0,0,0),#000000);
    opacity: .2;
    opacity: .1
}

.beer-slider .beer-handle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    width: 1px;
    height: 100%;
    border-left: 1px dashed #000
}

.beer-slider .beer-handle>div {
    width: 56px;
    height: 56px;
    line-height: 56px;
    border-radius: 50%;
    border: 1px solid #000;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 200
}

.beer-slider .beer-handle img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 200;
    width: 30px
}

@media only screen and (max-width: 1440px) and (min-width: 1024px) {
    .iv-diy .iv-wrap--content h4 {
        width:60%;
        margin-left: auto;
        margin-right: auto
    }

    .clock {
        width: 23.54167vw;
        height: 23.54167vw
    }

    .beer-slider .beer-handle>div {
        width: 3.88889vw;
        height: 3.88889vw;
        line-height: 3.88889vw
    }

    .beer-slider .beer-handle img {
        width: 2.08333vw
    }
}

@media only screen and (min-width: 1025px) {
    .animate h3,.animate article,.animate .btn-default {
        -webkit-animation-duration:1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        visibility: hidden;
        -webkit-animation-name: none;
        animation-name: none
    }

    .animate article {
        -webkit-animation-delay: .3s;
        animation-delay: .3s
    }

    .animate .btn-default {
        -webkit-animation-delay: .6s;
        animation-delay: .6s
    }

    .slick-slide.slick-current.slick-active .animate h3,.slick-slide.slick-current.slick-active .animate article,.slick-slide.slick-current.slick-active .animate .btn-default {
        -webkit-animation-name: fadeUp;
        animation-name: fadeUp;
        visibility: visible
    }
}

@media only screen and (max-width: 1024px) {
    .iv-banner .iv-wrap--thumbs {
        margin-left:0
    }

    .iv-banner .iv-wrap--thumbs figure {
        padding-top: 95.9vw
    }

    .iv-banner .iv-wrap--content {
        margin-top: 34.66667vw;
        margin-left: 10.66667vw;
        margin-right: 10.66667vw
    }

    .iv-banner .iv-wrap--content figcaption {
        text-align: center;
        padding-bottom: 0;
        width: 100%
    }

    .iv-banner .iv-wrap--content article {
        width: 100%
    }

    .iv-banner .btn-default {
        margin-left: auto;
        margin-right: auto
    }

    .iv-prod {
        margin-top: 13.33333vw
    }

    .iv-prod .iv-wrap--thumbs figure {
        padding-top: 96.3vw
    }

    .iv-prod .iv-wrap--prod {
        width: 44.8vw;
        padding: 2.26667vw;
        top: 96.3vw;
        margin-top: -24.1vw;
        margin-left: 0;
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .iv-prod .iv-wrap--prod figcaption {
        margin-top: 2.66667vw
    }

    .iv-prod .iv-wrap--content {
        width: auto;
        margin-left: 10.66667vw;
        margin-right: 10.66667vw;
        margin-top: 50.93333vw;
        margin-top: 30.83333vw
    }

    .iv-prod .iv-wrap--content figcaption {
        margin-left: 0;
        text-align: center
    }

    .iv-prod .slick-dots {
        position: relative;
        bottom: 0
    }

    .iv-prod .btn-default {
        margin-left: auto;
        margin-right: auto
    }

    .clock {
        width: 52.8vw;
        height: 52.8vw
    }

    .iv-diy {
        margin-top: 24vw;
        margin-top: 4vw;
        margin-bottom: 24vw
    }

    .iv-diy .iv-wrap--thumbs {
        margin-left: 0
    }

    .iv-diy .iv-wrap--thumbs figure {
        padding-top: 96.3vw
    }

    .iv-diy .iv-wrap--content {
        margin-top: 12vw;
        margin-left: 4vw;
        margin-right: 4vw
    }

    .diy-mater {
        width: 100%
    }
}

.iv-prod--wrap {
    position: relative
}

.iv-prod--wrap .sidebar {
    position: absolute;
    top: -12px;
    right: 0
}

.iv-prod--wrap .sidebar.fix {
    top: 240px;
    right: 45px;
    position: fixed;
    background-color: #fff
}

.iv-prod--wrap .panel {
    padding-left: 4.6875vw
}

.iv-prod--wrap .prod-item {
    margin-bottom: 50px
}

.iv-prod--wrap .prod-item:last-child {
    margin-bottom: 0
}

.iv-prod--wrap .prod-item:last-child .iv-line {
    display: none
}

.iv-prod--wrap .meta h3 {
    display: inline-block;
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .iv-prod--wrap .meta h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-prod--wrap .meta h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-prod--wrap .meta h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-prod--wrap .meta h3 {
        font-size:4vw
    }
}

.iv-prod--wrap .meta .btn-button {
    position: relative;
    top: -10px
}

.prod-item>h3 {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .prod-item>h3 {
        font-size:3.73333vw
    }
}

.prod-list {
    margin-left: -.41667vw;
    margin-right: -.41667vw;
    font-size: 0
}

.prod-list li {
    display: inline-block;
    vertical-align: middle;
    width: 12.5%;
    font-size: 16px;
    position: relative
}

.prod-list li a {
    display: block;
    margin: .41667vw;
    position: relative;
    color: #000
}

.prod-list li .img-box {
    overflow: hidden
}

.prod-list li .img-box::before {
    padding-top: 50%
}

.prod-list li .material {
    border-radius: 5px
}

.prod-list li .material img {
    border-radius: 5px
}

.prod-list li .generate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    overflow: hidden
}

.prod-list li .generate img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}

.prod-list li .popover-zoom {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 300%;
    margin: 0;
    background-color: #f8f8f8;
    z-index: 20000;
    opacity: 0;
    visibility: hidden;
    -moz-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    -webkit-transform: translate(0, 20px);
    transform: translate(0, 20px);
    padding: 30px
}

.prod-list li .popover-zoom .box {
    position: relative;
    overflow: hidden
}

.prod-list li .popover-zoom .box::before {
    content: "";
    display: block;
    padding-top: 50%;
    overflow: hidden
}

.prod-list li .popover-zoom .box>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto
}

.prod-list li.active .popover-zoom {
    opacity: 1;
    visibility: visible;
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.prod-list li:nth-child(8n+7) .popover-zoom {
    left: -100%
}

.prod-list li:nth-child(8n+8) .popover-zoom {
    left: -200%
}

.prod-list li:first-child .popover-zoom {
    display: block
}

.prod-search--list li {
    width: 10%
}

.series-list li {
    width: 16.666666%
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .iv-prod--wrap .sidebar.fix {
        top:140px
    }
}

@media only screen and (min-width: 1025px) {
    .prod-list li a:hover .material {
        opacity:0;
        visibility: hidden
    }

    .prod-list li a:hover .generate {
        opacity: 1;
        visibility: visible
    }
}

@media only screen and (max-width: 1024px) {
    .inner-prod {
        margin-top:42vw;
        margin-top: 50vw
    }

    .iv-prod--wrap .sidebar {
        display: block;
        position: fixed;
        top: 13.6vw;
        top: 25.9vw;
        width: auto;
        left: 5.33333vw;
        right: 5.33333vw
    }

    .iv-prod--wrap .sidebar.fix {
        top: 13.6vw;
        left: 5.33333vw;
        right: 5.33333vw
    }

    .iv-prod--wrap .sidebar.fix::before {
        content: "";
        display: block;
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff
    }

    .iv-prod--wrap .panel {
        padding-left: 0;
        margin-left: 0;
        margin-top: 10.66667vw;
        padding-left: 0;
        margin-right: 0;
    }

    .iv-prod--wrap .meta .btn-button {
        top: 0
    }

    .iv-prod--wrap .prod-item {
        margin-bottom: 10.66667vw
    }

    .prod-nav--tabs {
        position: fixed;
        top: 25.6vw;
        top: 37.9vw;
        left: 5.33333vw;
        right: 5.33333vw;
        padding-left: 0;
        padding-right: 0;
        width: auto;
        z-index: 9000;
        background-color: #fff;
        padding-bottom: 10.66667vw
    }

    .prod-nav--tabs.fix {
        top: 25.6vw
    }

    .prod-nav--tabs.fix::before {
        content: "";
        display: block;
        position: absolute;
        top: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff
    }

    .prod-nav--tabs .nav-stacked {
        border-bottom: none
    }

    .series-nav--tabs .nav-stacked {
        text-align: right;
        padding-bottom: 5.33333vw;
        border-bottom: none
    }

    .series-nav--tabs .nav-stacked .dropdown {
        position: relative;
        top: 0;
        left: 0
    }

    .series-nav--tabs .nav-stacked .btn-reset {
        position: relative;
        top: 0;
        left: 0
    }

    .series-nav--tabs .nav-tabs--wrap {
        position: fixed;
        top: 13.6vw;
        top: 22.7vw;
        left: 5.33333vw;
        right: 5.33333vw;
        padding-left: 0;
        padding-right: 0;
        width: auto;
        z-index: 9000;
        background-color: #fff;
        bottom: auto
    }

    .series-nav--tabs .nav-filter {
        padding-top: 4vw
    }

    .prod-list {
        margin-top: 5.33333vw;
        margin-left: -.66667vw;
        margin-right: -.66667vw
    }

    .prod-list li {
        width: 25%
    }

    .prod-list li a {
        margin: .66667vw
    }

    .prod-list li .popover-zoom {
        display: none
    }

    .prod-item .iv-line {
        margin-top: 12vw
    }

    .prod-series {
        margin-top: 26.66667vw;
        margin-top: 34.66667vw;
        margin-top: 42.46667vw
    }

    .prod-series .seri-list {
        margin-top: 10.66667vw
    }
}

.faq-list .help-item:first-child {
    padding-top: 0
}

.faq-list .help-item:last-child {
    padding-bottom: 0
}

.help-item {
    padding-top: 50px;
    padding-bottom: 50px
}

.help-item ul {
    border-top: 1px solid #000
}

.help-item li {
    border-bottom: 1px solid rgba(0,0,0,0.24)
}

.help-item li a {
    display: block;
    padding: 30px 0
}

.help-item li h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .help-item li h3 {
        font-size:4.8vw
    }
}

.help-item li h3 i {
    position: absolute;
    top: 50%;
    right: 0;
    width: 16px;
    height: 16px
}

.help-item li h3 i::before,.help-item li h3 i::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #000
}

.help-item li h3 i::before {
    width: 100%;
    height: 1px
}

.help-item li h3 i::after {
    width: 1px;
    height: 100%
}

.help-item li a.active h3 i::after {
    opacity: 0;
    visibility: hidden
}

.help-item li .content {
    display: none;
    padding: 30px;
    padding-right: 60px;
    padding-bottom: 0;
    padding-top: 10px;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .help-item li .content {
        font-size:3.73333vw
    }
}

.help-item li .content img {
    display: inline-block;
    max-width: 100%
}

@media only screen and (min-width: 1025px) {
    .help-item li a:hover h3 {
        color:#E61727
    }
}

@media only screen and (max-width: 1024px) {
    .help-item {
        padding-top:6.66667vw;
        padding-bottom: 6.66667vw
    }

    .help-item ul li {
        padding: 4vw 0
    }

    .help-item ul li a {
        padding: 4vw 0;
        padding: 0
    }

    .help-item ul li h3 {
        padding-right: 6.66667vw;
        font-size: 3.2vw
    }

    .help-item ul li h3 i {
        width: 2.13333vw;
        height: 2.13333vw
    }

    .help-item ul li .content {
        padding: 4vw;
        font-size: 2.4vw
    }

    .iv-help {
        margin-top: 13.33333vw
    }
}

.iv-details .prod-detail--wrap {
    font-size: 0
}

.iv-details .prod-detail--pic {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    font-size: 16px
}

.iv-details .prod-detail--pic .prod-pic--wrap {
    position: relative;
    background-color: #F8F8F8;
    padding: 70px 20px;
}

.iv-details .prod-detail--pic .btn-choise {
    position: absolute;
    top: 24px;
    left: 30px;
    width: 88px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    border: 1px solid rgba(112,112,112,0.24);
    border-radius: 5px
}

.iv-details .prod-detail--pic .btn-choise img {
    display: inline-block;
    vertical-align: middle;
    width: 24px
}

.iv-details .prod-detail--pic .btn-choise i {
    display: inline-block;
    vertical-align: middle;
    color: #989898;
    margin-left: -4px
}

.iv-details .prod-detail--pic .controls {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 300
}

.iv-details .prod-detail--pic .controls a {
    display: inline-block;
    vertical-align: middle;
    color: #000;
    margin-left: 14px;
    font-size: 22px;
    font-size: 16px
}

.iv-details .prod-detail--pic .controls .icon-like-o {
    color: #E61727
}

.iv-details .prod-detail--pic .check {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    text-align: center
}

.iv-details .prod-detail--pic .check a {
    display: inline-block;
    vertical-align: middle;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    margin: 0 24px
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--pic .check a {
        font-size:2.93333vw
    }
}

.iv-details .prod-detail--pic .check a sub {
    display: inline-block;
    vertical-align: 2px;
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8)
}

.iv-details .prod-detail--pic .check a i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    font-size: 24px
}

.iv-details .prod-detail--pic .check a .spin {
    font-size: 12px;
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
    margin-right: 5px
}

.iv-details .prod-detail--pic .prod-pic {
    font-size: 0
}

.iv-details .prod-detail--pic .prod-pic--big {
    display: inline-block;
    vertical-align: middle;
    width: 87.61329%
}

.iv-details .prod-detail--pic .prod-pic--big::before {
    padding-top: 50%
}

.iv-details .prod-detail--pic .prod-pic--big>img {
    display: none
}

.iv-details .prod-detail--pic .prod-pic--big canvas {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    width: 100%;
    height: 100%
}

.iv-details .prod-detail--pic .prod-pic--small {
    display: inline-block;
    vertical-align: middle;
    width: 6.0423%;
    margin-left: 6.34441%
}

.iv-details .prod-detail--pic .prod-pic--small::before {
    padding-top: 725%
}

.iv-details .prod-detail--pic .prod-pic--small img {
    width: auto;
    height: 100%;
    border-radius: 5px
}

.iv-details .series-product--pic {
    vertical-align: middle
}

.iv-details .series-product--pic .prod-pic--wrap {
    padding: 0
}

.iv-details .series-product--pic .prod-pic--wrap .img-box::before {
    padding-top: 55.55556%;
    padding-top: 66.69922%
}

.iv-details .prod-detail--info {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    font-size: 16px;
    padding-left: 4.16667vw;
    background-color: #fff;
    position: relative
}

.iv-details .prod-detail--info .property {
    display: inline-block;
    vertical-align: middle;
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--info .property {
        font-size:2.93333vw
    }
}

.iv-details .prod-detail--info .property span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-right: 14px;
    margin-right: 6px
}

.iv-details .prod-detail--info .property span::before {
    content: "";
    display: block;
    width: 1px;
    height: 10px;
    background-color: #111;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -5px
}

.iv-details .prod-detail--info .property span:last-child::before {
    display: none
}

.iv-details .prod-detail--info .current {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 20px;
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    color: #989898;
    background-color: #F2F2F2;
    background-color: rgba(242,242,242,0.5);
    border-radius: 6px
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--info .current {
        font-size:2.93333vw
    }
}

.iv-details .prod-detail--info h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 2.625em;
    line-height: 1.42857;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .iv-details .prod-detail--info h1 {
        font-size:2.2619vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-details .prod-detail--info h1 {
        font-size:2.1875vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-details .prod-detail--info h1 {
        font-size:2.1875vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--info h1 {
        font-size:6.13333vw
    }
}

.iv-details .prod-detail--info .sign {
    display: inline-block;
    vertical-align: middle;
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    color: #E61727;
    padding: 5px 20px;
    background-color: #F2F2F2;
    border-radius: 6px
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--info .sign {
        font-size:2.93333vw
    }
}

.iv-details .prod-detail--info .price {
    position: absolute;
    top: 140px;
    right: 0
}

.iv-details .prod-detail--info .price span {
    display: inline-block;
    vertical-align: middle
}

.iv-details .prod-detail--info .price .counter {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .iv-details .prod-detail--info .price .counter {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-details .prod-detail--info .price .counter {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-details .prod-detail--info .price .counter {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--info .price .counter {
        font-size:4vw
    }
}

.iv-details .prod-detail--info .price .unit {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--info .price .unit {
        font-size:3.73333vw
    }
}

.iv-details .prod-detail--info .share {
    position: absolute;
    top: 7px;
    right: 0
}

.iv-details .prod-detail--info .share a {
    margin: 0;
    font-size: 14px
}

.iv-details .prod-detail--info .list {
    font-size: 0
}

.iv-details .prod-detail--info .list li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 3.125vw
}

.iv-details .prod-detail--info .list li a {
    display: block;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--info .list li a {
        font-size:2.93333vw
    }
}

.iv-details .prod-detail--info .list li a i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    color: #707070;
    font-size: 14px
}

.iv-details .series-product--info {
    vertical-align: middle
}

.iv-details .prod-filter {
    text-align: left;
    margin-left: 16px;
    margin-right: 16px
}

.iv-details .prod-filter li {
    margin: 20px 0
}

.iv-details .prod-filter span {
    display: block;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 36px
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-filter span {
        font-size:3.73333vw
    }
}

.iv-details .prod-filter .item-title {
    display: inline-block;
    vertical-align: top
}

.iv-details .prod-filter .prod-scroll {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 40px);
    padding-left: 10px
}

.iv-details .prod-filter .items {
    display: inline-block;
    vertical-align: top
}

.iv-details .prod-filter a {
    display: block;
    margin: 0 5px;
    padding: 6px;
    position: relative
}

.iv-details .prod-filter a img {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%
}

.iv-details .prod-filter a::before {
    content: "";
    display: block;
    border: 4px solid rgba(51,51,51,0.24);
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 50%;
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0)
}

.iv-details .prod-filter .active {
    opacity: 1
}

.iv-details .prod-filter .active::before {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
}

.iv-details .order-form .group {
    margin-bottom: 20px
}

.iv-details .order-form .group span {
    display: inline-block;
    vertical-align: middle;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898;
    width: 74px
}

@media only screen and (max-width: 1024px) {
    .iv-details .order-form .group span {
        font-size:2.93333vw
    }
}

.iv-details .order-form .group span.attr {
    display: block;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    width: 100%
}

@media only screen and (max-width: 1024px) {
    .iv-details .order-form .group span.attr {
        font-size:2.93333vw
    }
}

.iv-details .order-form .group p {
    display: inline-block;
    vertical-align: middle
}

.iv-details .order-form .group input[type='radio'] {
    display: none
}

.iv-details .order-form .group input[type='radio']+label {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    color: rgba(0,0,0,0.5);
    border: 1px solid rgba(112,112,112,0.24);
    border-radius: 5px;
    padding: 3px 18px;
    margin-right: 10px;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .iv-details .order-form .group input[type='radio']+label {
        font-size:2.93333vw
    }
}

.iv-details .order-form .group input[type='radio']:checked+label {
    border-color: #000;
    color: #000
}

.iv-details .order-form .group .tips {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898;
    margin-left: 10px
}

@media only screen and (max-width: 1024px) {
    .iv-details .order-form .group .tips {
        font-size:2.93333vw
    }
}

.iv-details .order-form .btns .btn {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px
}

.iv-details .prod-pic .img-box {
    border-radius: 5px;
    overflow: hidden
}

.detail-panel h1 {
    font-size: 3.375em;
    line-height: 1;
    color: #000;
    text-align: center
}

@media only screen and (max-width: 1680px) {
    .detail-panel h1 {
        font-size:2.85714vw
    }
}

@media only screen and (max-width: 1440px) {
    .detail-panel h1 {
        font-size:2.8125vw
    }
}

@media only screen and (max-width: 1280px) {
    .detail-panel h1 {
        font-size:2.8125vw
    }
}

@media only screen and (max-width: 1024px) {
    .detail-panel h1 {
        font-size:7.2vw
    }
}

.detail-panel h2 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: 0;
    text-align: center
}

@media only screen and (max-width: 1680px) {
    .detail-panel h2 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .detail-panel h2 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .detail-panel h2 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .detail-panel h2 {
        font-size:4vw
    }
}

.detail-panel article {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    text-align: center
}

@media only screen and (max-width: 1024px) {
    .detail-panel article {
        font-size:2.93333vw
    }
}

.detail-panel article img {
    display: inline-block;
    max-width: 100%;
    width: auto !important;
    height: auto !important
}

.series-slick {
    width: 86.19529%;
    width: 70.89529%;
    width: 76.99529%;
    margin-left: auto;
    margin-right: auto
}

.series-slick .img-box::before {
    padding-top: 66.69922%
}

.series-slick .slick-dots {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0
}

.series-slick .slick-dots li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    margin: 0 5px;
    cursor: pointer
}

.series-slick .slick-dots li button {
    padding: 0;
    border: none;
    background: none;
    width: 8px;
    height: 8px;
    width: 12px;
    height: 12px;
    position: relative;
    font-size: 0;
    cursor: pointer
}

.series-slick .slick-dots li button::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #989898;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.series-slick .slick-dots li.slick-active button::before {
    opacity: 1;
    visibility: visible
}

.series-slick .slick-dots li.slick-active button::after {
    background-color: #E61727
}

.series-det-slick {
    width: 100%
}

.iv-counter {
    width: 119px;
    height: 32px;
    border: 1px solid rgba(112,112,112,0.24);
    border-radius: 5px;
    position: relative
}

.iv-counter .number {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    width: 45px;
    height: 100%;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    position: absolute;
    left: 37px;
    right: 37px;
    text-align: center
}

@media only screen and (max-width: 1024px) {
    .iv-counter .number {
        font-size:2.93333vw
    }
}

.iv-counter .btn {
    display: block;
    width: 37px;
    height: 32px;
    position: relative
}

.iv-counter .btn-cut {
    float: left
}

.iv-counter .btn-cut::before {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%
}

.iv-counter .btn-add {
    float: right
}

.iv-counter .btn-add::before {
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%
}

.iv-counter .btn-add::after {
    content: "";
    display: block;
    width: 2px;
    height: 10px;
    background-color: #000;
    position: absolute;
    top: 50%;
    left: 50%
}

.popup-details {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    width: 50%;
    height: 100%;
    overflow-y: scroll
}

.popup-details .btn-close {
    position: absolute;
    top: 30px;
    right: 24px;
    font-size: 30px;
    color: #000;
    z-index: 3000
}

.popup-details--common .wrap {
    margin-left: 3.33333vw;
    margin-right: 3.33333vw
}

.popup-details--common .mate {
    position: relative
}

.popup-details--common .btn-download {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    line-height: 1.57143;
    letter-spacing: .1em;
    color: #707070;
    position: absolute;
    top: 55px;
    right: 0
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .btn-download {
        font-size:2.93333vw
    }
}

.popup-details--common .btn-download i {
    display: inline-block;
    vertical-align: middle;
    margin-right: -2px;
    font-size: 22px
}

.popup-details--common .title {
    margin: 0;
    padding: 0;
    border: none;
    margin-block-start:0px;margin-block-end:0px;margin-inline-start:0px;margin-inline-end:0px;font-size: 2em;
    line-height: .9375;
    color: #000;
    letter-spacing: .03em;
    padding-top: 48px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

@media only screen and (max-width: 1680px) {
    .popup-details--common .title {
        font-size:1.66667vw
    }
}

@media only screen and (max-width: 1440px) {
    .popup-details--common .title {
        font-size:1.66667vw
    }
}

@media only screen and (max-width: 1280px) {
    .popup-details--common .title {
        font-size:1.66667vw
    }
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .title {
        font-size:5.6vw
    }
}

.popup-details--common .attri li {
    display: inline-block;
    vertical-align: middle;
    width: 45%;
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: .05em;
    line-height: 1.375;
    margin: 10px 0
}

@media only screen and (max-width: 1440px) {
    .popup-details--common .attri li {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .popup-details--common .attri li {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .attri li {
        font-size:2.93333vw
    }
}

.popup-details--common .attri li span {
    display: inline-block;
    vertical-align: middle;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: .1em;
    line-height: 1.57143;
    color: #989898;
    width: 80px
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .attri li span {
        font-size:3.73333vw
    }
}

.popup-details--common .prod-pic {
    font-size: 0;
    margin-left: -.52083vw;
    margin-right: 0;
    overflow: hidden
}

.popup-details--common .prod-pic>div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: 0 .52083vw
}

.popup-details--common .prod-pic>div p {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: .1em;
    line-height: 1.57143;
    color: #989898;
    text-align: center;
    margin-top: 12px
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .prod-pic>div p {
        font-size:3.73333vw
    }
}

.popup-details--common .prod-pic .prod-big {
    width: 44.58651%
}

.popup-details--common .prod-pic .prod-big .img-box::before {
    padding-top: 50%
}

.popup-details--common .prod-pic .prod-small {
    width: 3.42698%
}

.popup-details--common .prod-pic .prod-small .img-box::before {
    padding-top: 648.27586%
}

.popup-details--common .prod-pic .prod-small .img-box>img {
    width: auto;
    height: 100%
}

.popup-details--common .prod-pic .prod-small p {
    width: 39px;
    margin-left: -5px
}

.popup-details--common .frame-pic {
    font-size: 0
}

.popup-details--common .frame-pic>div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    overflow: hidden
}

.popup-details--common .frame-pic>div p {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: .1em;
    line-height: 1.57143;
    color: #989898;
    text-align: center;
    margin-top: 12px
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .frame-pic>div p {
        font-size:3.73333vw
    }
}

.popup-details--common .frame-pic .face-pic {
    width: 45.80802%;
    margin-right: 4.6875vw
}

.popup-details--common .frame-pic .face-pic .img-box::before {
    padding-top: 31.83024%;
    padding-top: 50%
}

.popup-details--common .frame-pic .leg-pic {
    width: 32.92831%
}

.popup-details--common .frame-pic .leg-pic .img-box::before {
    padding-top: 18.45018%;
    padding-top: 50%
}

.popup-details--common .parameter h3 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000;
    line-height: .91667;
    letter-spacing: .05em;
    padding-bottom: 36px;
    border-bottom: 1px solid #707070
}

@media only screen and (max-width: 1680px) {
    .popup-details--common .parameter h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .popup-details--common .parameter h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .popup-details--common .parameter h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .parameter h3 {
        font-size:4vw
    }
}

.popup-details--common .parameter table {
    width: 100%
}

.popup-details--common .parameter table tr th {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    line-height: .91667;
    letter-spacing: .1em;
    color: #989898;
    padding: 20px 0;
    border-bottom: 1px solid rgba(112,112,112,0.24);
    text-align: left
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .parameter table tr th {
        font-size:2.93333vw
    }
}

.popup-details--common .parameter table tr th:first-child {
    width: 18%
}

.popup-details--common .parameter table tr td {
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000;
    line-height: .91667;
    letter-spacing: .05em;
    padding: 20px 0;
    text-align: left;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

@media only screen and (max-width: 1440px) {
    .popup-details--common .parameter table tr td {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .popup-details--common .parameter table tr td {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .parameter table tr td {
        font-size:2.93333vw
    }
}

.popup-details--common .parameter table tr td:last-child {
    width: 27%;
    width: 50%
}

.popup-details--common .parameter table tbody th:nth-child(1) {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    line-height: .91667;
    letter-spacing: .1em;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .parameter table tbody th:nth-child(1) {
        font-size:2.93333vw
    }
}

.popup-details--common .parameter table tbody th {
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000;
    line-height: .91667;
    letter-spacing: .05em;
    color: #000
}

@media only screen and (max-width: 1440px) {
    .popup-details--common .parameter table tbody th {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .popup-details--common .parameter table tbody th {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .parameter table tbody th {
        font-size:2.93333vw
    }
}

.popup-details--common .structure h3 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000;
    line-height: .91667;
    letter-spacing: .05em;
    padding-bottom: 46px
}

@media only screen and (max-width: 1680px) {
    .popup-details--common .structure h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .popup-details--common .structure h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .popup-details--common .structure h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .popup-details--common .structure h3 {
        font-size:4vw
    }
}

.popup-details--common .structure .box {
    font-size: 0
}

.popup-details--common .structure .box>div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    overflow: hidden
}

.popup-details--common .structure .pic-big {
    width: 49.93925%
}

.popup-details--common .structure .pic-big .img-box::before {
    padding-top: 19.38776%
}

.popup-details--common .structure .pic-small {
    position: relative;
    left: 1.5625vw;
    width: 49.93925%
}

.popup-details--common .structure .pic-small .img-box::before {
    padding-top: 16.2963%
}

.popup-details--common .pic-img {
    height: 190px;
    position: relative
}

.popup .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    height: auto
}

.popup .container .btn-close {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 30px;
    color: #000
}

.popup .container .box {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%
}

.popup-rotate .container {
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 1240px;
    height: 700px
}

.popup-rotate .container .product-rotate {
    width: 46.77419%;
    position: absolute;
    top: 50%;
    left: 50%
}

.popup-rotate .container .btn-play {
    display: block;
    width: 52px;
    height: 52px;
    text-align: center;
    line-height: 52px;
    border: 1px solid #000;
    border-radius: 50%;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.popup-rotate .container .btn-play::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 4px solid transparent;
    border-left: 6px solid #000;
    border-bottom: 4px solid transparent;
    border-top: 6px solid transparent;
    border-left: 10px solid #000;
    border-bottom: 6px solid transparent;
    margin-left: 3px
}

.popup-rotate .container .btn-play i {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    margin-left: 3px
}

.popup-rotate .container .img-box {
    overflow: hidden;
    border-radius: 5px
}

.popup-rotate .container .img-box::before {
    padding-top: 50%
}

.popup-glasses .container {
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 810px;
    max-width: 1248px;
    height: 530px
}

.popup-glasses .container .box {
    display: block
}

.popup-glasses .container .btns .btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px
}

.popup-temp .container {
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 810px;
    height: 530px
}

.popup-temp .btns p {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898;
    line-height: 1.83333;
    letter-spacing: .05em;
    margin-top: 20px
}

@media only screen and (max-width: 1024px) {
    .popup-temp .btns p {
        font-size:2.93333vw
    }
}

.glasses-list {
    font-size: 0;
    text-align: center
}

.glasses-list a {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: 0 .78125vw
}

.glasses-list a input[type="radio"] {
    display: none
}

.glasses-list a input[type="radio"]+label {
    display: block;
    cursor: pointer
}

.glasses-list a input[type="radio"]+label .img-box {
    width: 18vw;
    width: 12vw
}

.glasses-list a input[type="radio"]+label .img-box::before {
    padding-top: 35.2459%
}

.glasses-list a input[type="radio"]+label .img-box img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    width: 100%;
    width: 90%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.glasses-list a input[type="radio"]+label .box {
    display: block;
    width: 200px;
    height: 100px;
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.glasses-list a input[type="radio"]+label .box img {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.glasses-list a input[type="radio"]+label i {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 14px
}

.glasses-list a input[type="radio"]+label i::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid #989898;
    border-radius: 50%
}

.glasses-list a input[type="radio"]+label i::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: #E61727;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    visibility: hidden
}

.glasses-list a input[type="radio"]+label span {
    display: inline-block;
    vertical-align: middle;
    font-size: .875em;
    line-height: 1.85714;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: .05em;
    color: #989898;
    margin-top: 14px;
    margin-left: 10px
}

@media only screen and (max-width: 1024px) {
    .glasses-list a input[type="radio"]+label span {
        font-size:2.93333vw
    }
}

.glasses-list a input[type="radio"]:checked+label i::before {
    border-color: #E61727
}

.glasses-list a input[type="radio"]:checked+label i::after {
    opacity: 1;
    visibility: visible
}

.glasses-list a input[type="radio"]:checked+label span {
    color: #E61727
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .popup-rotate .container {
        width:64%;
        height: 445px
    }

    .popup .container .btn-close {
        top: 1.5625vw;
        right: 1.5625vw;
        font-size: 1.5625vw
    }

    .popup-glasses .container {
        width: 64%;
        height: 445px
    }

    .iv-details .prod-detail--pic .prod-pic--wrap {
        padding: 105px 60px
    }
}

@media only screen and (max-width: 1024px) {
    .iv-details .prod-detail--wrap {
        margin-top:2.66667vw
    }

    .iv-details .prod-detail--pic {
        display: block;
        width: 100%
    }

    .iv-details .prod-detail--pic .prod-pic--wrap {
        padding: 14vw 15.33333vw;
        padding: 20px;
        height: 80vh;
    }

    .iv-details .prod-detail--pic .prod-pic {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin-left: 6.66667vw;
        margin-right: 6.66667vw;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .iv-details .prod-detail--pic .prod-pic--small img {
        width: 100%;
        height: 100%
    }

    .iv-details .prod-detail--pic .btn-choise {
        top: 9.33333vw;
        left: 7.73333vw;
        width: 18.13333vw;
        height: 6.66667vw;
        line-height: 6.4vw;
        line-height: 6.3vw;
        font-size: 0;
        padding-left: 1.33333vw
    }

    .iv-details .prod-detail--pic .btn-choise img {
        width: 5.33333vw
    }

    .iv-details .prod-detail--pic .btn-choise i {
        font-size: 3.2vw;
        margin-left: 0;
        margin-top: .8vw
    }

    .iv-details .prod-detail--pic .controls {
        top: 10.4vw;
        right: 7.73333vw
    }

    .iv-details .prod-detail--pic .check {
        bottom: 12vw
    }

    .iv-details .prod-filter {
        text-align: left;
        height: 60px;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        position: relative
    }

    .iv-details .prod-filter li {
        font-size: 0
    }

    .iv-details .prod-filter a {
        margin: 0 1.2vw
    }

    .iv-details .prod-filter a img {
        width: 4.26667vw;
        height: 4.26667vw
    }

    .iv-details .prod-filter a:last-child {
        margin-right: 0
    }

    .iv-details .prod-filter span {
        line-height: 28px
    }

    .iv-details .prod-filter .item-title {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%
    }

    .iv-details .prod-filter .item-title span {
        display: block;
        line-height: normal;
        padding: 4px 0
    }

    .iv-details .prod-filter .prod-scroll {
        width: 90%;
        margin-left: 10%
    }

    .iv-details .prod-filter .prod-scroll .prod-scroll-wrap {
        width: 120vw
    }

    .iv-details .prod-detail--info {
        display: block;
        width: 100%;
        margin-top: 14.66667vw;
        padding-left: 0
    }

    .iv-details .prod-detail--info .meta {
        margin-top: 5.33333vw
    }

    .iv-details .prod-detail--info .current,.iv-details .prod-detail--info .sign {
        padding: .66667vw 2.66667vw
    }

    .iv-details .prod-detail--info .price {
        top: 18.66667vw;
        top: 21.66667vw;
        position: relative;
        top: 0;
        right: 0;
        margin-top: 4vw;
        margin-bottom: 8vw
    }

    .iv-details .prod-detail--info .list li a i {
        margin-left: 1.33333vw
    }

    .iv-details .prod-detail--info .share .btn-share {
        display: none
    }

    .iv-details .prod-detail--info .share .share-list {
        top: 47px
    }

    .iv-details .prod-detail--info .share .share-list a {
        margin: 0 1.33333vw !important
    }

    .iv-details .order-form .group {
        margin-bottom: 4vw
    }

    .iv-details .order-form .group span {
        width: 9.86667vw;
        width: 14.86667vw
    }

    .iv-details .order-form .group input[type='radio']+label {
        padding: .4vw 2.4vw;
        margin-right: 1.33333vw
    }

    .iv-details .order-form .group .tips {
        margin-left: 14.86667vw
    }

    .iv-details .order-form .btns {
        margin-top: 9.33333vw;
        font-size: 0;
        margin-left: -1.86667vw;
        margin-right: -1.86667vw
    }

    .iv-details .order-form .btns .btn {
        width: calc(50% - 3.73334vw);
        margin: 0 1.86667vw
    }

    .iv-details .series-product--pic .prod-pic--wrap {
        height: auto
    }

    .iv-details .series-product--pic .prod-pic {
        position: relative;
        top: 0;
        margin-left: 0;
        margin-right: 0;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .iv-prods {
        margin-top: 0
    }

    .iv-counter {
        width: 21.6vw;
        height: 8vw;
        border: 1px solid #989898;
        border-radius: 5px
    }

    .iv-counter .btn {
        width: 6.93333vw;
        height: 8vw
    }

    .iv-counter .btn-cut::before {
        width: 1.33333vw;
        height: .26667vw
    }

    .iv-counter .btn-add::before {
        width: 1.33333vw;
        height: .26667vw
    }

    .iv-counter .btn-add::after {
        width: .26667vw;
        height: 1.33333vw
    }

    .iv-counter .number {
        width: calc(100% - 6.93333vw - 6.93333vw);
        left: 6.93333vw;
        right: 6.93333vw
    }

    .iv-series .detail-panel {
        margin-top: 26.66667vw
    }

    .iv-series .detail-panel h3 {
        margin-top: 0
    }

    .series-list li {
        width: 33.333333%
    }

    .popup-glasses .container {
        width: 90%;
        height: 70vh
    }

    .popup-glasses .btns .btn {
        margin: 0 1.33333vw
    }

    .glasses-list a input[type="radio"]+label .img-box {
        width: 19vw
    }

    .glasses-leg .glasses-list a input[type="radio"]+label .img-box {
        width: 60vw
    }

    .series-slick {
        width: 100%
    }

    .series-slick .slick-dots {
        bottom: 1.33333vw
    }

    .series-slick .slick-dots li {
        margin: 0 1.06667vw
    }

    .series-slick .slick-dots li button {
        width: 1.6vw;
        height: 1.6vw
    }

    .popup-temp .container {
        max-width: 100%;
        width: 90%;
        height: 58vh
    }

    .glasses-list a {
        margin: 0
    }

    .glasses-list a input[type="radio"]+label .box {
        width: 34.66667vw;
        height: 13.33333vw
    }

    .glasses-list a input[type="radio"]+label .box img {
        max-width: 100%;
        width: 80%
    }

    .popup-details {
        width: 90%
    }

    .popup-details .btn-close {
        top: 8%
    }

    .popup-details--common .title {
        padding-top: 12vw;
        padding-bottom: 5.33333vw
    }

    .popup-details--common .wrap {
        margin-left: 4vw;
        margin-right: 4vw
    }

    .popup-details--common .btn-download {
        top: 47px
    }

    .popup-details--common .attri {
        font-size: 0
    }

    .popup-details--common .attri li {
        width: 100%
    }

    .popup-details--common .attri li span {
        width: 13.33333vw;
        width: 21.73333vw
    }

    .popup-details--common .prod-pic {
        margin: 0
    }

    .popup-details--common .prod-pic>div {
        margin: 0;
        vertical-align: top
    }

    .popup-details--common .prod-pic .prod-big .img-box {
        margin: 0 .66667vw
    }

    .popup-details--common .prod-pic .prod-small .img-box::before {
        padding-top: 219.27586%;
        padding-top: 623.97586%
    }

    .popup-details--common .prod-pic .prod-small .img-box>img {
        width: 100%;
        height: 100%
    }

    .popup-details--common .prod-pic .prod-small p {
        width: 20vw;
        text-align: left
    }

    .popup-details--common .pic-img {
        height: 26.66667vw
    }

    .popup-rotate .container {
        width: 90%;
        height: 70vh
    }

    .popup-rotate .container .product-rotate {
        width: 80%
    }
}

.iv-series .series-item {
    margin-bottom: 100px
}

.iv-series .btns {
    text-align: center
}

.iv-series .btns .btn-secondary {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px
}

.seri-list li {
    display: inline-block;
    vertical-align: middle
}

.seri-list li .box {
    margin: .9375vw .41667vw;
    padding: 20px;
    position: relative
}

.seri-list li .box img {
    border-radius: 5px
}

.seri-list li .box::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: auto;
    height: auto;
    border: 1px solid rgba(112,112,112,0.24);
    opacity: 0;
    visibility: hidden;
    -moz-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    border-radius: 5px
}

.seri-list li .btn-review {
    display: block;
    width: 43px;
    height: 43px;
    background-color: #E61727;
    border-radius: 50%;
    line-height: 43px;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    opacity: 0;
    visibility: hidden;
    -moz-transform: translateY(-50%) scale(0.6, 0.6);
    -ms-transform: translateY(-50%) scale(0.6, 0.6);
    -webkit-transform: translateY(-50%) scale(0.6, 0.6);
    transform: translateY(-50%) scale(0.6, 0.6)
}

.seri-list .box>a {
    display: block;
    font-size: 16px;
    position: relative
}

.seri-list .box>a .img-box::before {
    padding-top: 66.49874%
}

.seri-list .box>a h3 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .seri-list .box>a h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .seri-list .box>a h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .seri-list .box>a h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .seri-list .box>a h3 {
        font-size:4vw
    }
}

.seri-list .box>a p {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    line-height: normal
}

@media only screen and (max-width: 1024px) {
    .seri-list .box>a p {
        font-size:2.93333vw
    }
}

.seri-list .box ul {
    font-size: 0;
    margin-left: -.20833vw;
    margin-right: -.20833vw;
    margin-top: .41667vw;
    margin-bottom: 15px
}

.seri-list .box ul li {
    display: inline-block;
    vertical-align: middle;
    width: 16.666666%;
    font-size: 16px
}

.seri-list .box ul a {
    display: block;
    margin: 0 .20833vw
}

.seri-list .box ul a .img-box::before {
    padding-top: 60.65574%
}

@media only screen and (min-width: 1025px) {
    .seri-list li .box:hover::before {
        opacity:1;
        visibility: visible;
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
    }

    .seri-list li .box:hover .btn-review {
        opacity: 1;
        visibility: visible;
        -moz-transform: translateY(-50%) scale(1, 1);
        -ms-transform: translateY(-50%) scale(1, 1);
        -webkit-transform: translateY(-50%) scale(1, 1);
        transform: translateY(-50%) scale(1, 1)
    }
}

@media only screen and (max-width: 1024px) {
    .iv-series .btns .btn-secondary {
        margin-right:0
    }

    .seri-list li {
        width: 100%
    }

    .seri-list li .box {
        margin: 0;
        padding: 0
    }

    .seri-list>li {
        margin-bottom: 12vw
    }

    .seri-list>li:last-child {
        margin-bottom: 0
    }

    .seri-list .box ul {
        margin-top: .93333vw;
        margin-left: -.93333vw;
        margin-right: -.93333vw;
        margin-bottom: 2.66667vw
    }

    .seri-list .box ul a {
        margin: .93333vw
    }
}

.page-list .header {
    height: auto
}

.series-ban {
    height: 900px;
    position: relative;
    padding-top: 158px
}

.series-ban::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 63.125%;
    height: 100%;
    background-color: #F1F1F1;
    z-index: -10
}

.series-ban .ban-content {
    display: block;
    width: 63.125%;
    height: 100%;
    position: relative
}

.series-ban .ban-content .caption {
    margin-left: 11.04167vw;
    margin-top: 8.85417vw
}

.series-ban .ban-content h3 {
    font-size: 3.14286em;
    line-height: 1.90909;
    color: #000;
    line-height: 1.2
}

@media only screen and (max-width: 1680px) {
    .series-ban .ban-content h3 {
        font-size:2.38095vw
    }
}

@media only screen and (max-width: 1440px) {
    .series-ban .ban-content h3 {
        font-size:2.29167vw
    }
}

@media only screen and (max-width: 1280px) {
    .series-ban .ban-content h3 {
        font-size:2.29167vw
    }
}

@media only screen and (max-width: 1024px) {
    .series-ban .ban-content h3 {
        font-size:5.86667vw
    }
}

.series-ban .ban-content h3 span {
    display: block;
    font-weight: 100
}

.series-ban .ban-content p {
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000;
    color: #000;
    width: 374px;
    margin-top: 20px
}

@media only screen and (max-width: 1440px) {
    .series-ban .ban-content p {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .series-ban .ban-content p {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .series-ban .ban-content p {
        font-size:2.93333vw
    }
}

.series-ban .ban-pic {
    position: absolute;
    top: 158px;
    right: 11.35417vw;
    width: 48.69792vw;
    overflow: hidden
}

.series-ban .ban-pic .img-box::before {
    padding-top: 66.31016%
}

.iv-since li {
    position: relative;
    margin-top: 110px;
    padding-bottom: 138px
}

.iv-since .ban-content {
    width: 41.66667%;
    background-color: #F1F1F1;
    position: relative
}

.iv-since .ban-content::before {
    content: "";
    display: block;
    padding-top: 67.125%
}

.iv-since .ban-content .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%
}

.iv-since .ban-content h3 {
    font-size: 3.75em;
    line-height: 1;
    color: #000;
    font-family: "PingFangSC-Regular","PingFang SC","Microsoft YaHei","STSong","SimSun",Arial,sans-serif
}

@media only screen and (max-width: 1680px) {
    .iv-since .ban-content h3 {
        font-size:3.21429vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-since .ban-content h3 {
        font-size:3.125vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-since .ban-content h3 {
        font-size:3.125vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-since .ban-content h3 {
        font-size:8vw
    }
}

.iv-since .ban-content article {
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1440px) {
    .iv-since .ban-content article {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-since .ban-content article {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-since .ban-content article {
        font-size:2.93333vw
    }
}

.iv-since .ban-pic {
    width: 41.66667%;
    position: absolute;
    top: 7.29167vw
}

.iv-since .ban-pic .img-box::before {
    padding-top: 66.75%
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .series-ban {
        height:110vh
    }

    .series-ban .ban-content .caption {
        width: 20vw
    }

    .series-ban .ban-content p {
        width: auto
    }

    .series-ban .ban-content .btn-video {
        width: 3.75vw;
        height: 3.75vw
    }

    .series-ban .ban-content .btn-video::before {
        border-top: 6px solid transparent;
        border-left: 8px solid #000;
        border-bottom: 6px solid transparent;
        margin-left: 2px
    }

    .series-ban .ban-content .btn-video.pause::before {
        border: none;
        width: 10px;
        height: 10px;
        background-color: #000;
        margin: 0
    }
}

@media only screen and (min-width: 1025px) {
    .iv-since li:nth-child(odd) .ban-content {
        margin-left:47.5%;
        margin-right: 11.35417vw
    }

    .iv-since li:nth-child(odd) .ban-pic {
        left: 11.19792vw
    }

    .iv-since li:nth-child(even) .ban-content {
        margin-left: 11.19792vw
    }

    .iv-since li:nth-child(even) .ban-pic {
        right: 11.35417vw
    }
}

@media only screen and (max-width: 1024px) {
    .series-ban {
        height:auto;
        margin-top: 8vw;
        margin-top: 0;
        padding-top: 30vw
    }

    .series-ban::before {
        width: 100%;
        height: 120vh;
        height: 250vh
    }

    .series-ban .ban-content {
        width: 80.13333%;
        padding-left: 5.33333vw;
        padding-bottom: 10.26667vw
    }

    .series-ban .ban-content .caption {
        position: relative;
        top: 0;
        left: 0;
        padding-left: 14.13333vw;
        padding-right: 9.33333vw
    }

    .series-ban .ban-content p {
        width: auto
    }

    .series-ban .ban-content .btn-video {
        width: 9.6vw;
        height: 9.6vw
    }

    .series-ban .ban-content .btn-video::before {
        border-top: 5px solid transparent;
        border-left: 7px solid #000;
        border-bottom: 5px solid transparent;
        margin-left: 2px
    }

    .series-ban .ban-content .btn-video.pause::before {
        width: 10px;
        height: 10px;
        margin-left: 0;
        border: none
    }

    .series-ban .ban-pic {
        position: relative;
        top: 0;
        right: 0;
        width: auto;
        margin-left: 5.33333vw;
        margin-right: 5.33333vw
    }

    .iv-since li {
        margin-top: 10.66667vw;
        margin-bottom: 13.33333vw;
        padding-bottom: 0
    }

    .iv-since li:last-child {
        margin-bottom: 0
    }

    .iv-since li:nth-child(odd) .ban-content {
        margin-left: 19.6vw;
        padding-left: 7.73333vw;
        padding-right: 10.66667vw
    }

    .iv-since li:nth-child(even) .ban-content {
        margin-right: 18.66667vw;
        padding-left: 12vw;
        padding-right: 7.73333vw
    }

    .iv-since .ban-content {
        width: auto;
        padding-top: 16vw;
        padding-bottom: 14.93333vw
    }

    .iv-since .ban-content::before {
        padding-top: 0
    }

    .iv-since .ban-content .caption {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .iv-since .ban-pic {
        position: relative;
        top: 0;
        width: auto;
        margin-left: 5.33333vw;
        margin-right: 5.33333vw
    }

    .iv-since .btn-secondary {
        margin-top: 16vw
    }
}

.news-list .ban-content {
    width: 52.22222%
}

.news-list .ban-content .caption article {
    width: 42.55319%;
    width: 70%;
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.news-list .ban-content::before {
    padding-top: 72.34043%
}

.news-list .ban-pic {
    width: 47.77778%
}

.news-list .ban-pic .img-box::before {
    padding-top: 79.06977%
}

@media only screen and (min-width: 1025px) {
    .news-list li:nth-child(odd) .ban-content {
        margin-left:47.77778%
    }
}

@media only screen and (max-width: 1024px) {
    .news-list {
        margin-bottom:5.33333vw
    }

    .news-list li {
        margin-bottom: 0;
        padding-bottom: 10.66667vw;
        padding-top: 10.66667vw
    }

    .news-list .ban-content {
        width: 100%;
        margin-top: 12vw
    }

    .news-list .ban-content::before {
        padding-top: 0
    }

    .news-list .ban-content .caption {
        width: auto;
        margin-left: 5.33333vw;
        margin-right: 5.33333vw
    }

    .news-list .ban-content .caption h5 {
        margin-bottom: 2.66667vw
    }

    .news-list .ban-content .caption article {
        margin-top: 5.33333vw
    }

    .news-list .ban-pic {
        width: 100%;
        position: relative
    }
}

.detail-editor {
    text-align: left
}

.detail-editor article {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.detail-editor h1 {
    font-size: 3em;
    line-height: 1.66667;
    color: #111;
    letter-spacing: .03em;
    text-align: center
}

@media only screen and (max-width: 1680px) {
    .detail-editor h1 {
        font-size:2.5vw
    }
}

@media only screen and (max-width: 1440px) {
    .detail-editor h1 {
        font-size:2.5vw
    }
}

@media only screen and (max-width: 1280px) {
    .detail-editor h1 {
        font-size:2.5vw
    }
}

@media only screen and (max-width: 1024px) {
    .detail-editor h1 {
        font-size:6.4vw
    }
}

.detail-editor .contorls {
    text-align: center
}

.detail-editor .contorls time,.detail-editor .contorls span {
    display: inline-block;
    vertical-align: middle;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    color: #707070;
    margin: 0 20px
}

@media only screen and (max-width: 1024px) {
    .detail-editor .contorls time,.detail-editor .contorls span {
        font-size:3.73333vw
    }
}

.detail-editor article img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    max-width: 900px !important;
    height: auto !important
}

.detail-editor article p {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    color: #707070
}

@media only screen and (max-width: 1024px) {
    .detail-editor article p {
        font-size:3.73333vw
    }
}

.detail-editor article h5 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000;
    line-height: 2
}

@media only screen and (max-width: 1680px) {
    .detail-editor article h5 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .detail-editor article h5 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .detail-editor article h5 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .detail-editor article h5 {
        font-size:4vw
    }
}

.detail-editor article h6 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000;
    margin-top: 20px
}

@media only screen and (max-width: 1680px) {
    .detail-editor article h6 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .detail-editor article h6 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .detail-editor article h6 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .detail-editor article h6 {
        font-size:4vw
    }
}

.detail-editor article ol li {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    color: #707070
}

@media only screen and (max-width: 1024px) {
    .detail-editor article ol li {
        font-size:3.73333vw
    }
}

.detail-editor .share a {
    margin: 0 40px
}

.detail-editor .share a span {
    margin-top: 12px
}

.pagination {
    font-size: 0;
    border-top: 1px solid rgba(112,112,112,0.24);
    border-bottom: 1px solid rgba(112,112,112,0.24);
    padding-top: 40px;
    padding-bottom: 50px;
    position: relative
}

.pagination a {
    display: inline-block;
    vertical-align: middle;
    width: 40%
}

.pagination a .img-box {
    display: inline-block;
    vertical-align: middle;
    width: 31%
}

.pagination a .img-box::before {
    padding-top: 69.53642%
}

.pagination a figcaption {
    width: 56%;
    display: inline-block;
    vertical-align: middle;
    padding-left: 2.08333vw;
    font-size: 16px
}

.pagination a span {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    letter-spacing: .1em
}

@media only screen and (max-width: 1024px) {
    .pagination a span {
        font-size:3.73333vw
    }
}

.pagination a span i {
    font-size: 16px
}

.pagination a h3 {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286
}

@media only screen and (max-width: 1024px) {
    .pagination a h3 {
        font-size:3.73333vw
    }
}

.pagination a h3 span {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 92%,#000000 0%);
    background-size: 0 100%;
    background-repeat: no-repeat;
    text-decoration: none;
    -moz-transition: background-size 0.36s cubic-bezier(0.32, 0.17, 0, 1);
    -o-transition: background-size 0.36s cubic-bezier(0.32, 0.17, 0, 1);
    -webkit-transition: background-size 0.36s cubic-bezier(0.32, 0.17, 0, 1);
    transition: background-size 0.36s cubic-bezier(0.32, 0.17, 0, 1)
}

.pagination .btn-backlist {
    position: absolute;
    top: 54px;
    right: 0;
    width: auto;
    font-size: 16px
}

.pagination .btn-backlist p {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    letter-spacing: .1em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .pagination .btn-backlist p {
        font-size:3.73333vw
    }
}

.pagination .btn-backlist p i {
    margin-right: 8px
}

.recom-list li {
    display: inline-block;
    vertical-align: top;
    font-size: 0
}

.recom-list li a {
    display: block;
    margin: 0 4.16667vw
}

.recom-list li .img-box {
    overflow: hidden
}

.recom-list li .img-box::before {
    padding-top: 69.74596%
}

.recom-list li figcaption {
    font-size: 16px;
    text-align: center;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 20px
}

.recom-list li figcaption h3 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .recom-list li figcaption h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .recom-list li figcaption h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .recom-list li figcaption h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .recom-list li figcaption h3 {
        font-size:4vw
    }
}

.recom-list li figcaption article {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #111;
    margin-top: 10px
}

@media only screen and (max-width: 1024px) {
    .recom-list li figcaption article {
        font-size:2.93333vw
    }
}

.recom-list li figcaption time {
    display: block;
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    margin-top: 10px
}

@media only screen and (max-width: 1024px) {
    .recom-list li figcaption time {
        font-size:2.93333vw
    }
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .detail-editor {
        max-width:1188px;
        width: 70%;
        width: 60%;
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (min-width: 1025px) {
    .pagination .btn-backlist:hover p {
        color:#E61727
    }

    .pagination a:hover h3 span {
        background-size: 100% 100%
    }

    .recom-list li a:hover figcaption h3 {
        color: #E61727
    }
}

@media only screen and (max-width: 1024px) {
    .iv-detail {
        margin-top:6.66667vw
    }

    .detail-editor .contorls {
        font-size: 0
    }

    .detail-editor .contorls time,.detail-editor .contorls span {
        margin: 0 2.66667vw
    }

    .detail-editor .share {
        margin-top: 13.33333vw
    }

    .detail-editor .share a {
        margin: 0 2.66667vw
    }

    .detail-editor article {
        max-width: 100%
    }

    .detail-editor article img {
        max-width: 100% !important;
        width: 100% !important
    }

    .detail-editor article video {
        width: 100% !important;
        height: auto !important
    }

    .pagination {
        padding-top: 2.66667vw;
        padding-bottom: 6.66667vw
    }

    .pagination a {
        width: 100%;
        margin: 2.66667vw 0
    }

    .pagination a .img-box {
        width: 33.62319%
    }

    .pagination a figcaption {
        width: 66.37681%;
        padding-left: 7.73333vw
    }

    .pagination .btn-backlist {
        position: relative;
        top: 0;
        left: 0;
        right: 0
    }

    .recom-list {
        margin-top: 6.66667vw
    }

    .recom-list li {
        width: 100%;
        margin-bottom: 21.33333vw
    }

    .recom-list li a {
        margin: 0
    }

    .recom-list li figcaption {
        padding-left: 6.66667vw;
        padding-right: 6.66667vw;
        padding-top: 6.66667vw
    }

    .recom-list li figcaption article {
        margin-top: 4vw
    }

    .recom-list li:last-child {
        margin-bottom: 0
    }
}

.work-list .ban-pic {
    width: 49.22222%
}

.work-list .ban-pic .img-box::before {
    padding-top: 79.11964%
}

.work-list .ban-content {
    width: 50.77778%
}

.work-list .ban-content::before {
    padding-top: 76.69584%
}

.work-list .ban-content .caption {
    width: 80%
}

.work-list .ban-content .iv-caption {
    padding-bottom: 40px
}

.work-list .ban-content .iv-caption article {
    display: block;
    width: 20.83333vw;
    width: 90%;
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.work-list .slick-dots {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    padding: 0 8.07292vw;
    font-size: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.work-list .slick-dots li {
    display: inline-block;
    vertical-align: middle;
    position: relative
}

.work-list .slick-dots li::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 38px;
    right: 38px;
    width: 11.566666vw;
    height: 1px;
    background-color: #fff
}

.work-list .slick-dots li button {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    font-size: 0;
    background: none;
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer
}

.work-list .slick-dots li button::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid #fff;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden
}

.work-list .slick-dots li button::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff
}

.work-list .slick-dots li.slick-active button::before {
    opacity: 1;
    visibility: visible
}

.work-list .slick-dots li:last-child::before {
    display: none
}

.exhibit-list .ban-pic .img-box::before {
    padding-top: 56.25%
}

.exhibit-list .ban-content::before {
    padding-top: 54.52681%
}

.exhibit-list .ban-content .iv-caption {
    text-align: center
}

.wroks-lists {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 20.83333vw
}

.wroks-lists>div {
    margin-left: -.26042vw;
    margin-right: -.26042vw
}

.wroks-lists .btn-prev,.wroks-lists .btn-next {
    position: absolute;
    top: 50%;
    padding: 0;
    border: none;
    background: none;
    background: none;
    cursor: pointer
}

.wroks-lists .btn-prev {
    left: -80px
}

.wroks-lists .btn-next {
    right: -80px
}

.wroks-lists a {
    display: block;
    margin: 0 5px
}

.wroks-lists .img-box::before {
    padding-top: 61.70213%
}

.iv-contacts .contact-wrap {
    position: relative
}

.iv-contacts .allMap {
    width: 49.22222%;
    height: 689px
}

.iv-contacts .anchorBL {
    display: none
}

.iv-contacts .address {
    width: 50.77778%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%
}

.iv-contacts .address h3 {
    font-size: 1.875em;
    line-height: 1;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .iv-contacts .address h3 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-contacts .address h3 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-contacts .address h3 {
        font-size:1.97917vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-contacts .address h3 {
        font-size:4.8vw
    }
}

.iv-contacts .address h1 {
    font-size: 3.75em;
    line-height: 1;
    color: #000;
    margin-top: 7px
}

@media only screen and (max-width: 1680px) {
    .iv-contacts .address h1 {
        font-size:3.21429vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-contacts .address h1 {
        font-size:3.125vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-contacts .address h1 {
        font-size:3.125vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-contacts .address h1 {
        font-size:8vw
    }
}

.iv-contacts .address .company {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    margin-bottom: 50px;
    margin-top: 10px
}

@media only screen and (max-width: 1024px) {
    .iv-contacts .address .company {
        font-size:4.8vw
    }
}

.iv-contacts .address .info {
    margin-bottom: 30px
}

.iv-contacts .address .info i.icon-icon-tel,.iv-contacts .address .info i.icon-icon-map {
    font-size: 22px
}

.iv-contacts .address .info span,.iv-contacts .address .info a {
    display: block;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    letter-spacing: .1em;
    color: #111;
    margin-top: 8px
}

@media only screen and (max-width: 1024px) {
    .iv-contacts .address .info span,.iv-contacts .address .info a {
        font-size:2.93333vw
    }
}

.iv-contacts .address .info:last-child {
    margin-bottom: 0
}

.iv-contacts .address .box {
    position: absolute;
    top: 5.20833vw;
    top: 50%;
    left: 50%;
    width: 80%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.office-list {
    font-size: 0;
    text-align: center
}

.office-list li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px
}

.office-list li .box {
    margin: 0 6.25vw
}

.office-list li h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    color: #000;
    margin-bottom: 5px
}

@media only screen and (max-width: 1024px) {
    .office-list li h3 {
        font-size:4.8vw
    }
}

.office-list li p {
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    letter-spacing: .1em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .office-list li p {
        font-size:2.93333vw
    }
}

.office-list li p a {
    color: #000
}

@media only screen and (min-width: 1921px) {
    .office-list li .box {
        margin:0 6.25vw
    }
}

@media only screen and (max-width: 1920px) {
    .office-list li .box {
        margin:0 4.16667vw
    }
}

@media only screen and (max-width: 1680px) {
    .work-list .ban-content .iv-caption article {
        width:100%
    }

    .office-list {
        margin-left: -3.125vw;
        margin-right: -3.125vw
    }

    .office-list li .box {
        margin: 0 3.125vw
    }
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .office-list {
        margin-left:-3.125vw;
        margin-right: -3.125vw
    }

    .office-list li .box {
        margin: 0 2.08333vw
    }

    .wroks-lists .btn-prev {
        left: -40px
    }

    .wroks-lists .btn-next {
        right: -40px
    }
}

@media only screen and (min-width: 1025px) {
    .work-list li:nth-child(odd) .ban-content {
        margin-left:49.22222%
    }

    .work-list li:nth-child(even) .ban-content {
        margin-left: 0
    }

    .work-list .btn-prev:hover,.work-list .btn-next:hover {
        color: #E61727
    }
}

@media only screen and (max-width: 1024px) {
    .work-list .ban-pic {
        width:100%
    }

    .work-list .ban-content {
        width: 100%
    }

    .work-list .ban-content::before {
        padding-top: 0
    }

    .work-list .ban-content .caption {
        width: auto
    }

    .work-list .ban-content .iv-caption {
        padding-bottom: 5.33333vw
    }

    .work-list .ban-content .iv-caption article {
        width: 100%
    }

    .work-list .slick-dots {
        display: none !important
    }

    .wroks-lists {
        width: 80%
    }

    .wroks-lists .btn-prev {
        left: -8vw
    }

    .wroks-lists .btn-next {
        right: -8vw
    }

    .iv-contacts {
        margin-top: 12vw
    }

    .iv-contacts .allMap {
        width: 100%;
        height: 91.86667vw
    }

    .iv-contacts .address {
        position: relative;
        width: 100%;
        height: auto;
        margin-top: 10.66667vw
    }

    .iv-contacts .address .box {
        position: relative;
        top: 0;
        left: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        width: 100%
    }

    .iv-contacts .address .company {
        margin-bottom: 6.66667vw;
        margin-top: 1.33333vw
    }

    .iv-contacts .address .info {
        margin-bottom: 4vw
    }

    .office-list li {
        margin: 10vw 0
    }

    .office-list li:first-child {
        margin-top: 0
    }

    .office-list li:last-child {
        margin-bottom: 0
    }
}

.common-form .box {
    font-size: 0;
    margin-left: -1.04167vw;
    margin-right: -1.04167vw
}

.common-form .box .group-control {
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    font-size: 16px;
    position: relative
}

.common-form .box .col-12 {
    width: calc(100% - 40px)
}

.common-form .box .btn-email-code {
    padding: 0;
    border: none;
    background: none;
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 12px;
    color: #989898;
    text-decoration: underline;
    cursor: pointer;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.common-form .box .goto-login {
    display: inline-block;
    vertical-align: middle;
    margin-left: 25px;
    font-size: .875em;
    line-height: 1.71429;
    color: #000;
    line-height: 1.42857;
    letter-spacing: .03em;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .common-form .box .goto-login {
        font-size:2.93333vw
    }
}

.common-form .box .goto-login a {
    color: #575757;
    text-decoration: underline
}

.common-form .box .select {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 100%;
    height: 50px
}

.common-form .box .select::before {
    content: "\e71f";
    font-family: 'iconfont';
    position: absolute;
    top: 50%;
    right: 0;
    color: #707070;
    font-size: 12px;
    z-index: 200
}

.common-form .box select {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid #575757
}

.common-form .box select:focus {
    outline: none
}

.common-form .box .p-date {
    display: block
}

.common-form .box .m-date {
    display: none
}

.common-form .agreement {
    float: left
}

.common-form .agreement label {
    display: block;
    position: static;
    cursor: pointer
}

.common-form .agreement input[type="checkbox"] {
    display: none
}

.common-form .agreement input[type="checkbox"]+label {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111
}

@media only screen and (max-width: 1024px) {
    .common-form .agreement input[type="checkbox"]+label {
        font-size:2.93333vw
    }
}

.common-form .agreement input[type="checkbox"]+label a {
    display: inline-block;
    vertical-align: middle;
    color: #575757;
    margin-left: 5px
}

.common-form .agreement input[type="checkbox"]+label i {
    color: #707070
}

.common-form .agreement input[type="checkbox"]:checked+label i {
    color: #E61727
}

.common-form .subscribe {
    float: right
}

.common-form .subscribe label {
    display: block;
    position: static;
    cursor: pointer
}

.common-form .subscribe input[type="checkbox"] {
    display: none
}

.common-form .subscribe input[type="checkbox"]+label {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111
}

@media only screen and (max-width: 1024px) {
    .common-form .subscribe input[type="checkbox"]+label {
        font-size:2.93333vw
    }
}

.common-form .subscribe input[type="checkbox"]+label i {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 14px;
    position: relative
}

.common-form .subscribe input[type="checkbox"]+label i::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #707070;
    border-radius: 10px
}

.common-form .subscribe input[type="checkbox"]+label i::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 50%;
    left: 4px;
    border-radius: 50%;
    background-color: #707070
}

.common-form .subscribe input[type="checkbox"]:checked+label i::before {
    border-color: #E61727
}

.common-form .subscribe input[type="checkbox"]:checked+label i::after {
    -moz-transform: translate(5px, -50%);
    -ms-transform: translate(5px, -50%);
    -webkit-transform: translate(5px, -50%);
    transform: translate(5px, -50%);
    background-color: #E61727
}

.user-form .box select {
    border-bottom: 1px solid rgba(112,112,112,0.1)
}

.user-form .control {
    border-bottom: 1px solid rgba(112,112,112,0.1)
}

.iv-register--success h1 {
    display: block;
    font-size: 2.25em;
    line-height: 1.11111;
    color: #000;
    letter-spacing: .03em;
    color: #000;
    text-align: center;
    margin-bottom: 10px;
    text-align: center
}

@media only screen and (max-width: 1680px) {
    .iv-register--success h1 {
        font-size:1.90476vw
    }
}

@media only screen and (max-width: 1440px) {
    .iv-register--success h1 {
        font-size:1.875vw
    }
}

@media only screen and (max-width: 1280px) {
    .iv-register--success h1 {
        font-size:1.875vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-register--success h1 {
        font-size:5.86667vw
    }
}

.iv-register--success h2 {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    text-align: center
}

@media only screen and (max-width: 1024px) {
    .iv-register--success h2 {
        font-size:2.93333vw
    }
}

.iv-register--success .success {
    position: relative;
    height: 400px
}

.iv-register--success .success img {
    display: block;
    max-width: 100%;
    width: 150px;
    width: 400px;
    margin-left: auto;
    margin-right: auto
}

.iv-register--success .success .number {
    font-size: 170px;
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "UtopiaStd-Regular"
}

.popover-treaty {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000
}

.popover-treaty .bgcolor {
    display: block;
    background-color: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%
}

.popover-treaty .contents {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 200
}

.popover-treaty .btn-close--popover {
    position: absolute;
    top: 10vh;
    right: 30px;
    font-size: 30px;
    color: #000;
    z-index: 200;
    margin-top: 35px
}

.popover-treaty .box {
    display: block;
    width: 60vw;
    height: 80vh;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    overflow-y: scroll;
    background-color: #ffff;
    padding: 5%
}

@media only screen and (min-width: 1025px) {
    .common-form .box .goto-login a:hover {
        color:#E61727
    }

    .common-form .box .btn-email-code:hover {
        color: #E61727
    }
}

@media only screen and (max-width: 1024px) {
    .common-form legend {
        margin-bottom:4vw
    }

    .common-form .box {
        margin-left: 0;
        margin-right: 0
    }

    .common-form .box .group-control {
        width: 100%;
        margin-bottom: 4vw;
        margin-left: 0;
        margin-right: 0
    }

    .common-form .box .goto-login {
        display: block;
        margin-left: 0;
        margin-top: 4vw
    }

    .common-form .box .p-date {
        display: none
    }

    .common-form .box .m-date {
        display: block
    }

    .common-form .box .select {
        height: 12vw
    }

    .common-form .box .select input {
        height: 100%
    }

    .common-form .control {
        height: 10.66667vw
    }

    .common-form label {
        top: 4px
    }

    .common-form .agreement {
        float: none;
        clear: both
    }

    .common-form .subscribe {
        float: none;
        clear: both;
        margin-top: 2.66667vw
    }

    .common-form .flatpickr-input+label {
        display: none
    }

    .common-form .flatpickr-input {
        height: 12vw;
        border-bottom: 1px solid rgba(112,112,112,0.1)
    }
}

.user-center {
    font-size: 0
}

.user-center .btn-menu {
    display: none
}

.user-center .toolbar {
    display: inline-block;
    vertical-align: top;
    width: 280px;
    border-right: 1px solid rgba(112,112,112,0.1);
    font-size: 16px
}

.user-center .contents {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 280px);
    font-size: 16px
}

.user-center .contents-none {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    text-align: center;
    color: #989898;
    padding: 5vh 0
}

@media only screen and (max-width: 1024px) {
    .user-center .contents-none {
        font-size:2.93333vw
    }
}

.user-center .username .img-box {
    width: 89px;
    position: relative;
    border-radius: 50%;
    overflow: hidden
}

.user-center .username .img-box::before {
    padding-top: 100%
}

.user-center .username .img-box .file {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    border: none;
    margin: 0;
    background: none;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0
}

.user-center .username .img-box>img {
    width: 50vw;
    width: 180px;
    width: 100%;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.user-center .userinfo {
    position: relative;
    width: 8.75vw
}

.user-center .userinfo h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 1.5;
    color: #000;
    margin-bottom: 5px
}

@media only screen and (max-width: 1024px) {
    .user-center .userinfo h3 {
        font-size:4.8vw
    }
}

.user-center .userinfo p {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 1.5;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .user-center .userinfo p {
        font-size:3.73333vw
    }
}

.user-center .userinfo .btn-editor {
    position: absolute;
    top: 4px;
    right: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(152,152,152,0.12);
    text-align: center;
    line-height: 26px;
    color: #989898;
    font-size: 22px
}

.user-center .user-ident {
    display: none
}

.user-center .iv-line {
    width: 8.75vw;
    margin-top: 30px
}

.user-center .setting li a {
    display: block;
    position: relative;
    display: block;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #989898;
    margin: 30px 0
}

@media only screen and (max-width: 1024px) {
    .user-center .setting li a {
        font-size:2.93333vw
    }
}

.user-center .setting li a::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 6px;
    height: 20px;
    height: 0;
    background-color: #E61727
}

.user-center .setting li a i {
    display: inline-block;
    vertical-align: middle;
    color: #989898;
    margin-right: 20px;
    position: relative
}

.user-center .setting li a i::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    opacity: 0;
    visibility: hidden
}

.user-center .setting li a .icon-person::after {
    content: "\e75c"
}

.user-center .setting li a .icon-address::after {
    content: "\e760"
}

.user-center .setting li a .icon-cart::after {
    content: "\e759"
}

.user-center .setting li a .icon-order::after {
    content: "\e75e"
}

.user-center .setting li a .icon-bill::after {
    content: "\e758"
}

.user-center .setting li a .icon-comment::after {
    content: "\e75b"
}

.user-center .nav-stacked {
    text-align: left
}

.user-center .nav-stacked .nav-category {
    margin-left: -1.19792vw
}

.logged {
    text-align: center
}

.logged article {
    text-align: center;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .logged article {
        font-size:3.73333vw
    }
}

.logged .account {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .logged .account {
        font-size:3.73333vw
    }
}

.logged .account a {
    text-decoration: underline;
    color: #989898
}

.user-lists {
    margin-left: -.52083vw;
    margin-right: -.52083vw
}

.user-lists li a {
    display: block;
    position: relative;
    margin: 0 .52083vw
}

.user-lists li .p-img {
    display: block
}

.user-lists li .m-img {
    display: none
}

.user-lists li figcaption {
    font-size: 16px
}

.user-lists li figcaption h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .user-lists li figcaption h3 {
        font-size:4.8vw
    }
}

.user-lists li figcaption span {
    display: inline-block;
    vertical-align: middle;
    width: 88px;
    height: 30px;
    text-align: center;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 30px;
    color: #989898;
    position: relative;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

@media only screen and (max-width: 1024px) {
    .user-lists li figcaption span {
        font-size:3.73333vw
    }
}

.user-lists li figcaption span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #989898;
    border-radius: 5px;
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1.000)
}

.user-lists li figcaption span i {
    position: relative;
    z-index: 200
}

.user-list li .img-box::before {
    padding-top: 112.00924%
}

.user-list li figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 73.903%;
    height: 167px;
    background-color: #fff;
    text-align: center
}

.user-list li figcaption .box {
    position: absolute;
    top: 50%;
    left: 50%
}

.info-list li a {
    font-size: 0
}

.info-list li .img-box {
    width: 108px
}

.info-list li .img-box::before {
    padding-top: 100%
}

.info-list li figure,.info-list li figcaption {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px
}

.info-list li figcaption {
    margin-left: 1.82292vw
}

.iv-tables {
    margin-left: 8.85417vw;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(87,87,87,0.24);
    position: relative
}

.iv-tables ul {
    font-size: 0
}

.iv-tables li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 3.38542vw
}

.iv-tables a {
    display: block;
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .iv-tables a {
        font-size:4.8vw
    }
}

.iv-tables .current {
    color: #000
}

.iv-tables .iv-selected {
    position: absolute;
    top: 50%;
    right: 0
}

.iv-secure form {
    display: none
}

.cart-table table tbody {
    border-bottom: none
}

.common-table {
    width: 100%
}

.common-table th {
    text-align: left;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .common-table th {
        font-size:2.93333vw
    }
}

.common-table th:last-child {
    text-align: center
}

.common-table td:last-child {
    text-align: center
}

.common-table td {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .common-table td {
        font-size:3.73333vw
    }
}

.common-table thead tr {
    border-bottom: 1px solid rgba(119,119,119,0.24);
    border-bottom: none
}

.common-table thead th {
    padding: 16px 0
}

.common-table tbody tr {
    border-bottom: 1px solid rgba(112,112,112,0.1)
}

.common-table tbody td {
    padding: 60px 0
}

.common-table tfoot td {
    padding-top: 60px
}

.common-table time {
    color: #989898
}

.common-table .btns .btn-setting {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px
}

.common-table .btn-tips {
    margin-bottom: 20px
}

.common-table .order-submit {
    margin-top: 16px
}

.common-table .btns-shops .btn-setting {
    display: inline-block;
    vertical-align: middle
}

.common-table .adpat-m {
    display: none
}

.order-table {
    width: auto;
    position: relative;
    z-index: 3500
}

.order-table table {
    width: 100%
}

.order-table table thead tr {
    border-bottom: none
}

.order-table table tbody {
    border-bottom: 1px solid rgba(112,112,112,0.1)
}

.order-table table tbody tr {
    border-bottom: none
}

.order-table table tbody td:last-child {
    text-align: right
}

.order-table table tbody:last-child {
    border-bottom: none
}

.order-table table tfoot tr td {
    text-align: right !important
}

.order-table table tfoot tr p {
    margin: 3px 0
}

.order-table table tr th {
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    letter-spacing: .1em;
    color: #989898;
    text-align: center
}

@media only screen and (max-width: 1024px) {
    .order-table table tr th {
        font-size:2.93333vw
    }
}

.order-table table tr th:first-child {
    text-align: left
}

.order-table table tr td:first-child {
    text-align: left
}

.order-table table tr td {
    vertical-align: middle;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    text-align: center;
    padding: 0
}

@media only screen and (max-width: 1024px) {
    .order-table table tr td {
        font-size:3.73333vw
    }
}

.order-table table tr th:last-child {
    text-align: right
}

.order-table table .btns .btn {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px
}

.order-table table .order-submit {
    margin-top: 16px
}

.order-table .order-info {
    margin-top: 50px;
    margin-bottom: 30px
}

.order-table .order-info span {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898;
    margin-right: 3px
}

@media only screen and (max-width: 1024px) {
    .order-table .order-info span {
        font-size:2.93333vw
    }
}

.order-table .order-info span::after {
    content: "";
    display: inline-block;
    vertical-align: -1px;
    width: 1px;
    height: 10px;
    background-color: #989898;
    -moz-transform: rotate(32deg);
    -ms-transform: rotate(32deg);
    -webkit-transform: rotate(32deg);
    transform: rotate(32deg);
    margin-left: 10px
}

.order-table .order-info .type {
    display: inline-block;
    vertical-align: middle;
    width: 76px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    border: 1px solid rgba(112,112,112,0.24);
    border-radius: 5px
}

.order-table .order-info .type::after {
    display: none
}

.order-table .order-info .status {
    color: #E61727
}

.order-table .order-info .status::after {
    display: none
}

.order-table .product-info {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    margin-top: 20px;
    margin-bottom: 20px
}

.order-table .product-info a.box {
    display: block
}

.order-table .product-info .img-box {
    display: inline-block;
    vertical-align: middle;
    width: 134px
}

.order-table .product-info .img-box::before {
    padding-top: 61.19403%
}

.order-table .product-info .info {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-left: 2.08333vw
}

.order-table .product-info .info .id {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .order-table .product-info .info .id {
        font-size:3.73333vw
    }
}

.order-table .product-info .info span {
    display: block;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .order-table .product-info .info span {
        font-size:2.93333vw
    }
}

.order-table .product-info .info a {
    color: #E61727
}

.order-table .pay {
    font-size: 16px;
    text-align: right;
    margin-bottom: 75px
}

.order-table .pay .price {
    display: block;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .order-table .pay .price {
        font-size:3.73333vw
    }
}

.order-table .subtotal {
    color: #E61727
}

.order-table .iv-counter {
    margin-left: auto;
    margin-right: auto;
    border: none
}

.order-table .iv-counter .btn-cut::before {
    background-color: #989898
}

.order-table .iv-counter .btn-add::before,.order-table .iv-counter .btn-add::after {
    background-color: #989898
}

.order-table .iv-selected {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px
}

.order-table .all-selected {
    position: absolute;
    top: -112px;
    right: 0;
    margin-right: 0
}

.order-table .totalPrice {
    display: block;
    font-size: 1.875em;
    line-height: 1.33333;
    letter-spacing: .03em;
    color: #E61727
}

@media only screen and (max-width: 1680px) {
    .order-table .totalPrice {
        font-size:1.54762vw
    }
}

@media only screen and (max-width: 1440px) {
    .order-table .totalPrice {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .order-table .totalPrice {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .order-table .totalPrice {
        font-size:5.33333vw
    }
}

.order-table .payMent {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.875em;
    line-height: 1.33333;
    letter-spacing: .03em;
    color: #E61727
}

@media only screen and (max-width: 1680px) {
    .order-table .payMent {
        font-size:1.54762vw
    }
}

@media only screen and (max-width: 1440px) {
    .order-table .payMent {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .order-table .payMent {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .order-table .payMent {
        font-size:5.33333vw
    }
}

.order-table .mode {
    font-size: 0
}

.order-table .mode>div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-left: 50px
}

.order-table .mode input[type="radio"] {
    display: none
}

.order-table .mode input[type="radio"]+label {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    color: #000;
    color: #989898;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .order-table .mode input[type="radio"]+label {
        font-size:2.93333vw
    }
}

.order-table .mode input[type="radio"]+label i {
    margin-right: 10px
}

.order-table .mode input[type="radio"]:checked+label {
    color: #000
}

.order-table .mode input[type="radio"]:checked+label i {
    color: #E61727
}

.commons-table>div {
    display: none
}

.shop-table .adpat-m {
    display: none
}

.confirm-table {
    font-size: 16px;
    margin-left: 0
}

.confirm-table>h3 {
    padding-bottom: 20px;
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

@media only screen and (max-width: 1024px) {
    .confirm-table>h3 {
        font-size:4.8vw
    }
}

.confirm-table table tbody {
    border-bottom: none
}

.comment-list-table .commit-prod {
    width: 346px;
    width: 18.02083vw;
    padding: 20px;
    background-color: #f2f2f2;
    border-radius: 5px;
    font-size: 0;
    vertical-align: top
}

.comment-list-table .commit-prod img {
    display: inline-block;
    vertical-align: middle;
    width: 33%;
    border-radius: 5px
}

.comment-list-table .commit-info {
    vertical-align: top;
    margin-left: 30px
}

.comment-list-table .comment-infor {
    margin-left: 0;
    padding: 0 7.29167vw
}

.comment-list-table .commit-contents {
    padding: 0 5.20833vw
}

.comment-list-table .commit-contents p {
    word-break: break-word;
    white-space: break-spaces
}

.comment-list-table .comment-status {
    padding: 0 3.125vw
}

.comment-list-table table thead th:last-child {
    text-align: right
}

.comment-list-table table tr td {
    vertical-align: top
}

.comment-list-table table tr td:last-child {
    text-align: right
}

.comment-list-table table tbody td {
    padding-bottom: 40px;
    padding-top: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

.comment-list-table table tbody tr:last-child td {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0
}

.comment-list-table .no-order {
    color: #E61727
}

.order-detail-table {
    margin-left: 0
}

.order-detail-table .sn-title {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    letter-spacing: .1em;
    color: #000;
    margin-bottom: 6px;
    position: relative;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(87,87,87,0.24)
}

@media only screen and (max-width: 1024px) {
    .order-detail-table .sn-title {
        font-size:3.73333vw
    }
}

.order-detail-table table tbody {
    border-bottom: none
}

.btn-detail {
    display: inline-block;
    vertical-align: middle;
    width: 154px;
    height: 54px;
    text-align: center;
    border-radius: 5px;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 54px;
    margin-top: 10px;
    border: 1px solid #111;
    color: #111;
    margin-left: 10px
}

@media only screen and (max-width: 1024px) {
    .btn-detail {
        font-size:3.73333vw
    }
}

.iv-pull--left {
    margin-left: 8.85417vw
}

.iv-comment {
    margin-left: 8.85417vw
}

.iv-comment .comment {
    font-size: 0
}

.iv-comment .comment-info {
    display: inline-block;
    vertical-align: top;
    width: 27.12108%;
    font-size: 16px;
    height: 352px;
    border-left: 1px solid rgba(112,112,112,0.1);
    padding-left: 4.6875vw
}

.iv-comment .comment-info h3 {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    letter-spacing: .1em;
    color: #000;
    margin-bottom: 6px
}

@media only screen and (max-width: 1024px) {
    .iv-comment .comment-info h3 {
        font-size:3.73333vw
    }
}

.iv-comment .comment-info p {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .iv-comment .comment-info p {
        font-size:2.93333vw
    }
}

.order-detail ul {
    font-size: 0
}

.order-detail ul li {
    display: inline-block;
    vertical-align: top;
    width: 33.333333%;
    font-size: 16px
}

.order-detail .comment-info h3 {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    letter-spacing: .1em;
    color: #000;
    margin-bottom: 6px
}

@media only screen and (max-width: 1024px) {
    .order-detail .comment-info h3 {
        font-size:3.73333vw
    }
}

.order-detail .comment-info p {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .order-detail .comment-info p {
        font-size:2.93333vw
    }
}

.common-meta {
    position: relative;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(87,87,87,0.24)
}

.common-meta h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .common-meta h3 {
        font-size:4.8vw
    }
}

.common-meta p {
    position: absolute;
    top: 50%;
    right: 0;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #989898;
    margin-top: -10px
}

@media only screen and (max-width: 1024px) {
    .common-meta p {
        font-size:2.93333vw
    }
}

.common-meta p span {
    color: #E61727
}

.common-meta .btn-back {
    position: absolute;
    top: 50%;
    right: 0;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    letter-spacing: .1em;
    color: #000;
    margin-top: -9px
}

@media only screen and (max-width: 1024px) {
    .common-meta .btn-back {
        font-size:2.93333vw
    }
}

.comment-form {
    display: inline-block;
    vertical-align: top;
    width: 75.97892%;
    width: 72.87892%;
    font-size: 16px
}

.comment-form .score {
    font-size: 0
}

.comment-form .score>div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 4.6875vw
}

.comment-form .score>div span {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .comment-form .score>div span {
        font-size:3.73333vw
    }
}

.comment-form .score>div:last-child {
    margin-right: 0
}

.comment-form .score .star {
    font-size: 0;
    margin-top: 10px
}

.comment-form .score .star a {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin-right: 10px;
    color: #707070
}

.comment-form .score .star span {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin-right: 10px;
    color: #707070
}

.comment-form .score .star .active {
    color: #E61727
}

.comment-form .score .star a:last-child {
    margin-right: 0
}

.comment-form .score .star span:last-child {
    margin-right: 0
}

.comment-form .score .grade {
    margin-left: 3.64583vw;
    vertical-align: -25px
}

.comment-form .score .grade .number {
    font-size: 3.75em;
    line-height: 1;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .comment-form .score .grade .number {
        font-size:3.21429vw
    }
}

@media only screen and (max-width: 1440px) {
    .comment-form .score .grade .number {
        font-size:3.125vw
    }
}

@media only screen and (max-width: 1280px) {
    .comment-form .score .grade .number {
        font-size:3.125vw
    }
}

@media only screen and (max-width: 1024px) {
    .comment-form .score .grade .number {
        font-size:8vw
    }
}

.comment-form .score .grade .text {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    letter-spacing: .1em;
    margin-left: 8px
}

@media only screen and (max-width: 1024px) {
    .comment-form .score .grade .text {
        font-size:3.73333vw
    }
}

.comment-form .message {
    position: relative;
    margin-right: 5.67708vw
}

.comment-form .message .msg {
    display: block;
    padding: 0;
    border: 0;
    margin: 0;
    background: none;
    resize: none;
    border: 1px solid #707070;
    border-radius: 5px;
    width: 100%;
    height: 232px;
    padding: 22px
}

.comment-form .message .msg:focus {
    outline: none
}

.comment-form .message label {
    position: absolute;
    top: 19px;
    left: 22px;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    letter-spacing: .1em;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .comment-form .message label {
        font-size:3.73333vw
    }
}

.comment-form .message span {
    position: absolute;
    bottom: 22px;
    right: 36px;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .comment-form .message span {
        font-size:3.73333vw
    }
}

.comment-form .message.on label {
    display: none
}

.comment-form .anonymous label {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898;
    line-height: 1.83333;
    letter-spacing: .1em;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .comment-form .anonymous label {
        font-size:2.93333vw
    }
}

.comment-form .anonymous input[type="checkbox"] {
    display: none
}

.comment-form .anonymous input[type="checkbox"]:checked+label i {
    color: #E61727
}

.comment-form .comment-tips {
    padding: 60px 0;
    margin-right: 5.67708vw
}

.comment-form .comment-tips li {
    border-bottom: 1px solid rgba(112,112,112,0.1);
    padding: 30px 0
}

.comment-form .comment-tips time {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #989898
}

.comment-form .comment-tips article {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    color: #707070;
    margin-top: 10px
}

.iv-progress ul {
    font-size: 0;
    text-align: center
}

.iv-progress ul li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    position: relative;
    margin-right: 112px
}

.iv-progress ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 31px;
    width: 99px;
    height: 1px;
    background-color: rgba(0,0,0,0.24)
}

.iv-progress ul li span {
    position: absolute;
    top: -49px;
    left: 50%;
    width: 78px;
    height: 33px;
    text-align: center;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    line-height: 33px;
    color: #989898;
    margin-left: -39px;
    border-radius: 5px
}

@media only screen and (max-width: 1024px) {
    .iv-progress ul li span {
        font-size:2.93333vw
    }
}

.iv-progress ul li span::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-top: 6px solid #000;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    opacity: 0;
    visibility: hidden
}

.iv-progress ul li i {
    display: block;
    width: 24px;
    height: 24px;
    position: relative
}

.iv-progress ul li i::before {
    content: "";
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #E61727;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden
}

.iv-progress ul li i::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -4px;
    margin-left: -4px;
    background-color: #989898;
    border-radius: 50%
}

.iv-progress ul li:last-child {
    margin-right: 0
}

.iv-progress ul li:last-child::before {
    display: none
}

.iv-progress ul .pass span {
    color: #000
}

.iv-progress ul .pass i::after {
    background-color: #E61727
}

.iv-progress ul .current span {
    color: #fff;
    background-color: #000
}

.iv-progress ul .current span::before {
    opacity: 1;
    visibility: visible
}

.iv-progress ul .current i::before {
    opacity: 1;
    visibility: visible
}

.iv-progress ul .current i::after {
    background-color: #E61727;
    opacity: 1;
    visibility: visible
}

.iv-selected input[type="checkbox"] {
    display: none
}

.iv-selected input[type="checkbox"]+label {
    font-size: .875em;
    line-height: 1.85714;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.14286;
    letter-spacing: .1em;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .iv-selected input[type="checkbox"]+label {
        font-size:2.93333vw
    }
}

.iv-selected input[type="checkbox"]+label i {
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(112,112,112,0.24);
    position: relative
}

.iv-selected input[type="checkbox"]+label i::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #E61727;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden
}

.iv-selected input[type="checkbox"]:checked+label i {
    border-color: #E61727
}

.iv-selected input[type="checkbox"]:checked+label i::before {
    opacity: 1;
    visibility: visible
}

.all-selected input[type="checkbox"]+label i {
    margin-right: 10px
}

.iv-address {
    font-size: 16px;
    margin-left: 8.85417vw
}

.iv-address>h3 {
    padding-bottom: 20px;
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

@media only screen and (max-width: 1024px) {
    .iv-address>h3 {
        font-size:4.8vw
    }
}

.iv-address ul {
    padding-top: 12px
}

.iv-address ul li {
    font-size: 0;
    padding: 12px 0;
    position: relative
}

.iv-address ul .btns {
    font-size: 16px;
    position: absolute;
    top: 0;
    right: 0
}

.iv-address .loading ul {
    padding-top: 0
}

.iv-address .selected {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px
}

.iv-address .selected input[type="radio"] {
    display: none
}

.iv-address .selected input[type="radio"]+label {
    display: block;
    color: #111;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    padding-left: 45px
}

@media only screen and (max-width: 1024px) {
    .iv-address .selected input[type="radio"]+label {
        font-size:2.93333vw
    }
}

.iv-address .selected input[type="radio"]+label i {
    position: absolute;
    top: 9px;
    left: 0
}

.iv-address .selected input[type="radio"]:checked+label {
    color: #E61727
}

.iv-address .address {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-left: 30px;
    margin-left: 0
}

.iv-address .address span {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    line-height: 2.14286;
    letter-spacing: .05em;
    color: #575757
}

@media only screen and (max-width: 1024px) {
    .iv-address .address span {
        font-size:2.93333vw
    }
}

.iv-address .btn-change {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    line-height: 2.14286;
    letter-spacing: .1em;
    color: #575757;
    text-decoration: underline
}

@media only screen and (max-width: 1024px) {
    .iv-address .btn-change {
        font-size:2.93333vw
    }
}

.iv-goods--address {
    margin-left: auto;
    margin-right: auto
}

.iv-goods--address .btn-setting {
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px
}

.iv-pay {
    font-size: 16px
}

.iv-pay .mate h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(112,112,112,0.24)
}

@media only screen and (max-width: 1024px) {
    .iv-pay .mate h3 {
        font-size:4.8vw
    }
}

.iv-pay .mate p {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    line-height: 1.57143;
    color: #575757;
    margin-top: 30px
}

@media only screen and (max-width: 1024px) {
    .iv-pay .mate p {
        font-size:2.93333vw
    }
}

.iv-pay .mate p span {
    color: #E61727
}

.iv-pay .pay-way h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .iv-pay .pay-way h3 {
        font-size:4.8vw
    }
}

.iv-pay .pay-list {
    margin-left: -.67708vw;
    margin-right: -.67708vw
}

.iv-pay .pay-list a {
    display: block;
    font-size: 16px;
    margin: .67708vw
}

.iv-pay .pay-list input[type="radio"] {
    display: none
}

.iv-pay .pay-list input[type="radio"]+label {
    display: block;
    width: 100%;
    height: 68px;
    text-align: center;
    background-color: rgba(152,152,152,0.1);
    position: relative;
    cursor: pointer;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 68px;
    color: #000;
    border-radius: 5px
}

@media only screen and (max-width: 1024px) {
    .iv-pay .pay-list input[type="radio"]+label {
        font-size:2.93333vw
    }
}

.iv-pay .pay-list input[type="radio"]:checked+label {
    background-color: #fff
}

.iv-pay .pay-list input[type="radio"]:checked+label .si-active {
    visibility: visible;
    opacity: 1
}

.iv-pay .pay-list img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%
}

.iv-pay .good-way h3 {
    font-size: 1.125em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .iv-pay .good-way h3 {
        font-size:4.8vw
    }
}

.iv-pay .btns {
    position: relative
}

.iv-pay .btns::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: calc(50% - 104px);
    height: 1px;
    background-color: rgba(112,112,112,0.24);
    margin-top: -1px
}

.iv-pay .btns::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: calc(50% - 104px);
    height: 1px;
    background-color: rgba(112,112,112,0.24);
    margin-top: -1px
}

.iv-pay .btns .btn {
    margin-top: 0;
    position: relative;
    z-index: 200
}

.iv-pay .payment-way .payment-info {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

.iv-pay .payment-way .money {
    font-size: 1.875em;
    line-height: 1.33333;
    letter-spacing: .03em;
    color: #E61727
}

.iv-pay .payment-way .payment-code {
    display: block;
    text-align: center;
    margin-top: 100px
}

.iv-pay .payment-way .payment-code img {
    display: inline-block;
    max-width: 100%
}

.good-list li {
    width: 40%
}

.popover-form .box .group-control-address {
    display: block;
    width: auto;
    font-size: 0;
    margin-left: 0;
    margin-right: 0
}

.popover-form .box .group-control-info {
    width: calc(100% - 40px)
}

.popover-form .box .select {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: calc(25% - 40px);
    height: 50px;
    margin-left: 20px;
    margin-right: 20px
}

.popover-form .box .select::before {
    content: "\e71f";
    font-family: 'iconfont';
    position: absolute;
    top: 50%;
    right: 0;
    color: #707070;
    font-size: 12px;
    z-index: 200
}

.popover-form .box select {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid #575757
}

.popover-form .box select:focus {
    outline: none
}

.popover-form .box .btns .btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px
}

.address-form .box .group-control-address {
    display: block;
    width: auto;
    font-size: 0;
    margin-left: 0;
    margin-right: 0
}

.address-form .box .group-control-info {
    width: calc(100% - 40px)
}

.address-form .box .select {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: calc(33.33333% - 40px);
    width: 100%;
    height: 50px
}

.address-form .box .select::before {
    content: "\e71f";
    font-family: 'iconfont';
    position: absolute;
    top: 50%;
    right: 0;
    color: #707070;
    font-size: 12px;
    z-index: 200
}

.address-form .box .group {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: calc(33.33333% - 40px);
    height: 50px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 16px
}

.address-form .box select {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0
}

.address-form .box select:focus {
    outline: none
}

.address-form .box .btns .btn {
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px
}

.forget-form {
    width: 468px;
    margin-left: auto;
    margin-right: auto
}

.forget-form .box .group-control {
    width: 100%;
    margin-left: 0;
    margin-right: 0
}

.forget-form label {
    left: 0
}

.forget-form .control {
    border-bottom: 1px solid #575757;
    padding: 0 15px;
    padding: 0
}

.iv-message {
    text-align: center
}

.iv-message article {
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 1.4;
    color: #111;
    text-align: center
}

@media only screen and (max-width: 1024px) {
    .iv-message article {
        font-size:3.73333vw
    }
}

.iv-invoice .group-control .btn-dark {
    display: inline-block;
    vertical-align: middle
}

.iv-invoice .print-invoice {
    display: inline-block;
    vertical-align: middle;
    font-size: .875em;
    line-height: 1.71429;
    color: #000;
    line-height: 1.42857;
    letter-spacing: .03em;
    color: #989898;
    text-decoration: underline;
    margin-left: 30px
}

@media only screen and (max-width: 1024px) {
    .iv-invoice .print-invoice {
        font-size:2.93333vw
    }
}

.iv-invoice .invoice-unpaid {
    height: 60px;
    border: 1px solid rgba(112,112,112,0.1);
    padding-left: 40px;
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    line-height: 60px;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .iv-invoice .invoice-unpaid {
        font-size:2.93333vw
    }
}

.iv-invoice .invoice-unpaid .title {
    display: inline-block
}

.iv-invoice .invoice-unpaid .name {
    display: inline-block;
    padding: 2px 20px;
    background-color: #E61727;
    line-height: normal;
    border-radius: 5px;
    color: #fff;
    margin-left: 20px
}

.iv-invoice .invoice-unpaid .end {
    position: absolute;
    right: 30px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.invoice-list {
    font-size: 0
}

.invoice-list .invoice-item {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 40px);
    width: 100%;
    font-size: 16px
}

.invoice-list .invoice-item h3 {
    font-size: 1.125em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .invoice-list .invoice-item h3 {
        font-size:4.8vw
    }
}

.invoice-list .invoice-item h4 {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    margin-top: 10px
}

@media only screen and (max-width: 1024px) {
    .invoice-list .invoice-item h4 {
        font-size:2.93333vw
    }
}

.invoice-list .nav-tabs {
    font-size: 0;
    height: 28px
}

.invoice-list .nav-tabs li {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-right: 60px
}

.invoice-list .nav-tabs li a {
    display: block;
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1440px) {
    .invoice-list .nav-tabs li a {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .invoice-list .nav-tabs li a {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .invoice-list .nav-tabs li a {
        font-size:2.93333vw
    }
}

.invoice-list .nav-tabs li.active a {
    color: #E61727;
    text-decoration: underline
}

.invoice-list .tabs-contents .text {
    display: none;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .invoice-list .tabs-contents .text {
        font-size:2.93333vw
    }
}

.invoice-list--en .invoice-item {
    width: calc(30% - 40px)
}

.invoice-list--en .invoice-item:last-child {
    width: calc(10% - 40px);
    text-align: right
}

.invoice-list--en .tabs-contents .text {
    display: block
}

.user-invoice {
    height: 80vh;
    padding-top: 10vw;
    padding: 3vw 120px;
    overflow-y: scroll
}

.invoice-form .invoice-cate {
    font-size: 0
}

.invoice-form .invoice-sort {
    display: block;
    font-size: 16px;
    margin-bottom: 20px
}

.invoice-form input[type="radio"] {
    display: none
}

.invoice-form input[type="radio"]+label {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    color: #000;
    color: #989898;
    margin-right: 30px;
    cursor: pointer
}

@media only screen and (max-width: 1024px) {
    .invoice-form input[type="radio"]+label {
        font-size:2.93333vw
    }
}

.invoice-form input[type="radio"]+label i {
    margin-right: 10px
}

.invoice-form input[type="radio"]:checked+label {
    color: #000
}

.invoice-form input[type="radio"]:checked+label i {
    color: #E61727
}

.search-query {
    font-size: 0;
    text-align: right
}

.search-query .group-control {
    display: inline-block;
    vertical-align: middle;
    width: 360px;
    height: 54px;
    font-size: 16px;
    position: relative
}

.search-query .group-control.on label {
    display: none
}

.search-query .group-control .control {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(112,112,112,0.1);
    font-size: 16px;
    color: #111;
    padding: 0 10px
}

.search-query .group-control input+label {
    position: absolute;
    top: 20px;
    left: 10px;
    font-size: 16px;
    color: #111
}

.search-query .btns {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin-left: 20px
}

.favorites-list {
    margin-left: -.41667vw;
    margin-right: -.41667vw
}

.favorites-list li {
    width: 16.66667%
}

.favorites-list li a {
    display: block;
    margin: .41667vw;
    font-size: 16px
}

.favorites-list li .img-box {
    overflow: hidden
}

.favorites-list li .img-box::before {
    padding-top: 50%
}

.favorites-list li .img-box img {
    border-radius: 5px
}

.favorites-list li figcaption {
    padding: 20px 0
}

.favorites-list li figcaption h3 {
    font-size: .875em;
    line-height: 1.71429;
    letter-spacing: .03em;
    color: #111;
    color: #575757
}

@media only screen and (max-width: 1024px) {
    .favorites-list li figcaption h3 {
        font-size:2.93333vw
    }
}

.favorites-list li figcaption h4 {
    font-size: 1em;
    line-height: 1.75;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1440px) {
    .favorites-list li figcaption h4 {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1280px) {
    .favorites-list li figcaption h4 {
        font-size:.83333vw
    }
}

@media only screen and (max-width: 1024px) {
    .favorites-list li figcaption h4 {
        font-size:2.93333vw
    }
}

@media only screen and (min-width: 1025px) {
    .user-center .setting li a:hover,.user-center .setting li .current {
        color:#E61727
    }

    .user-center .setting li a:hover::before,.user-center .setting li .current::before {
        height: 20px
    }

    .user-center .setting li a:hover i,.user-center .setting li .current i {
        color: #E61727
    }

    .user-center .setting li a:hover i::after,.user-center .setting li .current i::after {
        opacity: 1;
        visibility: visible
    }

    .common-meta .btn-back:hover {
        color: #E61727
    }

    .iv-address .btn-change:hover {
        color: #E61727
    }

    .logged .account a:hover {
        color: #E61727
    }

    .user-lists li a:hover figcaption span {
        color: #fff
    }

    .user-lists li a:hover figcaption span::before {
        background-color: #E61727;
        border-color: #E61727;
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1)
    }

    .iv-invoice .print-invoice:hover {
        color: #E61727
    }

    .invoice-list .nav-tabs li a:hover {
        color: #E61727
    }
}

.success-message {
    text-align: center
}

.success-message h1 {
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1680px) {
    .success-message h1 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .success-message h1 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .success-message h1 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .success-message h1 {
        font-size:4vw
    }
}

.success-message .message {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #989898
}

@media only screen and (max-width: 1024px) {
    .success-message .message {
        font-size:2.93333vw
    }
}

@media only screen and (max-width: 1680px) and (min-width: 1025px) {
    .comment-list-table .commit-prod {
        width:11.02083vw;
        padding: 1.19048vw
    }

    .user-center--comment .comment-list-table .comment-infor {
        display: inline-block;
        margin-top: 0;
        padding: 0;
        margin-left: 4.16667vw
    }
}

@media only screen and (max-width: 1440px) and (min-width: 1025px) {
    .user-lists li figcaption h3 {
        font-size:1.25vw
    }

    .comment-list-table .commit-info {
        margin-left: 0;
        margin-top: 10px;
        margin-top: 0
    }

    .comment-form .score>div {
        margin-top: 20px;
        margin-bottom: 20px;
        display: block;
        margin-right: 0
    }

    .user-center--comment .toolbar {
        width: 180px
    }

    .user-center--comment .contents {
        width: calc(100% - 180px)
    }

    .user-center--comment .iv-pull--left {
        margin-left: 3.45417vw
    }

    .user-center--comment .comment-list-table .commit-info {
        display: inline-block;
        margin-left: 4.16667vw;
        margin-top: 0
    }
}

@media only screen and (max-width: 1380px) and (min-width: 1025px) {
    .comment-list-table .commit-prod {
        display:block;
        width: 18vw
    }

    .comment-list-table .commit-info {
        display: block;
        margin-top: 20px
    }
}

@media only screen and (max-width: 1200px) and (min-width: 1025px) {
    .user-center--comment .toolbar {
        width:150px
    }

    .user-center--comment .contents {
        width: calc(100% - 150px)
    }

    .user-center--comment .comment-list-table .commit-info {
        margin-left: 0.98333vw;
        margin-left: 2.28333vw;
        margin-left: 9px
    }

    .user-center--comment .iv-pull--left {
        margin-left: 2.45417vw;
        margin-left: 1.15417vw
    }
}

@media only screen and (max-width: 1024px) {
    .iv-user {
        margin-top:7.33333vw;
        padding-bottom: 24vw
    }

    .user-center {
        position: relative
    }

    .user-center .toolbar {
        position: fixed;
        top: 0;
        top: 13.6vw;
        left: 0;
        width: 37.33333vw;
        width: 50%;
        width: 60%;
        background-color: #fff;
        z-index: 3000;
        height: calc(100% - 13.6vw);
        padding-left: 4vw;
        padding-right: 4vw;
        padding-top: 8vw;
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 20000;
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .user-center .toolbar.open {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    .user-center .btn-menu {
        display: block;
        position: absolute;
        top: -14.63333vw;
        right: 0;
        text-align: right
    }

    .user-center .btn-menu a {
        display: inline-block;
        vertical-align: middle;
        color: #000;
        font-size: 5.6vw
    }

    .user-center .username {
        padding-right: 0;
        font-size: 0;
        position: relative
    }

    .user-center .username .img-box {
        display: inline-block;
        vertical-align: top;
        width: 16.8vw
    }

    .user-center .userinfo {
        display: inline-block;
        vertical-align: top;
        width: auto;
        margin-left: 4.8vw;
        margin-left: 0
    }

    .user-center .userinfo .btn-editor {
        width: 7.33333vw;
        height: 7.33333vw;
        line-height: 7.33333vw;
        font-size: 2.93333vw;
        border-radius: 50%;
        background-color: rgba(152,152,152,0.12);
        top: -3px;
        right: -16px
    }

    .user-center .user-comment::before {
        content: "\e745"
    }

    .user-center .user-order::before {
        content: "\e746"
    }

    .user-center .user-person::before {
        content: "\e735"
    }

    .user-center .iv-line {
        display: none;
        width: auto;
        margin-right: 4vw;
        margin-top: 4vw
    }

    .user-center .setting {
        margin-top: 10.66667vw
    }

    .user-center .setting li a {
        padding: 2vw 0;
        margin: 0
    }

    .user-center .contents {
        width: 100%
    }

    .user-center .comment-info {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(112,112,112,0.1);
        height: auto;
        margin-top: 10.66667vw;
        padding-top: 10.66667vw
    }

    .user-center .effect-sort {
        margin-top: 8vw
    }

    .iv-progress {
        display: none
    }

    .iv-progress ul li {
        margin-right: 14.93333vw
    }

    .iv-progress ul li::before {
        left: 4.13333vw;
        width: 13.2vw
    }

    .iv-progress ul li i {
        width: 3.2vw;
        height: 3.2vw
    }

    .iv-progress ul li i::after {
        width: 1.06667vw;
        height: 1.06667vw
    }

    .iv-tables {
        border-bottom: none;
        padding-bottom: 0;
        margin-left: 0
    }

    .order-table {
        margin-left: 0
    }

    .order-table table {
        display: block
    }

    .order-table table thead {
        display: none
    }

    .order-table table tbody {
        display: block
    }

    .order-table table tfoot {
        display: block;
        margin-top: 10.66667vw
    }

    .order-table table tfoot tr {
        border-bottom: none;
        padding-bottom: 0
    }

    .order-table table tfoot tr td:nth-child(1) {
        width: 100%
    }

    .order-table table tr {
        display: block;
        padding: 7.73333vw 0;
        position: relative;
        border-bottom: 1px solid rgba(119,119,119,0.24)
    }

    .order-table table tr td {
        display: block;
        position: relative
    }

    .order-table table tr td:nth-child(1) {
        width: 80%
    }

    .order-table table tr td:nth-child(2) {
        display: none
    }

    .order-table table tr td:nth-child(3) {
        display: none
    }

    .order-table table tr td:nth-child(4) {
        width: auto;
        position: absolute;
        bottom: 7.73333vw;
        right: 0
    }

    .order-table table tr td:nth-child(5) {
        width: auto;
        position: absolute;
        top: 7.73333vw;
        right: 0
    }

    .order-table table tr:first-child {
        padding-top: 0
    }

    .order-table table tr:first-child td:nth-child(5) {
        top: 0
    }

    .order-table .totalPrice {
        display: inline-block
    }

    .order-table .product-info {
        margin-top: 0;
        margin-bottom: 0
    }

    .order-table .product-info .img-box {
        width: 110px
    }

    .order-table .iv-selected {
        margin-right: 2.66667vw
    }

    .order-table .all-selected {
        top: 0;
        left: 0;
        right: auto
    }

    .order-table .iv-counter {
        border: 1px solid #989898
    }

    .order-table .order-info {
        display: block
    }

    .order-table .subtotal {
        text-align: right
    }

    .common-table table tr:last-child {
        border-bottom: none
    }

    .common-table table tr:last-child td {
        width: 100%
    }

    .common-table table tr td:nth-child(4) {
        bottom: auto;
        top: 13.33333vw
    }

    .common-table table tbody {
        margin-top: 0
    }

    .common-table .pay {
        margin-bottom: 0
    }

    .common-table .adpat-m {
        display: block
    }

    .common-table .tle {
        display: inline-block;
        vertical-align: middle;
        width: 30%
    }

    .common-table .text {
        display: inline-block;
        vertical-align: middle;
        width: 68%;
        text-align: right
    }

    .common-table .adpat-m-hide {
        display: none
    }

    .common-table .operation {
        text-align: right;
        margin-top: 8vw
    }

    .common-table td {
        font-size: 3.2vw
    }

    .comment-list-table .commit-prod {
        width: 50.02083vw;
        padding: 2.66667vw
    }

    .comment-list-table table tbody td {
        padding-top: 5.33333vw;
        padding-bottom: 5.33333vw
    }

    .shop-table .adpat-m {
        display: block
    }

    .shop-table .tle {
        display: inline-block;
        vertical-align: middle;
        width: 30%
    }

    .shop-table .text {
        display: inline-block;
        vertical-align: middle;
        width: 68%;
        text-align: right
    }

    .shop-table .adpat-m-hide {
        display: none
    }

    .shop-table table thead {
        display: none
    }

    .shop-table table tbody tr {
        padding: 0
    }

    .shop-table table tbody td {
        display: none;
        border-bottom: none;
        padding-top: 5.33333vw;
        padding-bottom: 5.33333vw;
        margin-top: 0;
        margin-bottom: 0
    }

    .shop-table table tbody td:first-child {
        display: table-cell;
        display: block;
        width: 100%
    }

    .shop-table table tbody tr {
        border-bottom: 1px solid rgba(119,119,119,0.24)
    }

    .shop-table table tbody tr td {
        font-size: 3.2vw
    }

    .shop-table table tfoot {
        margin-top: 0
    }

    .shop-table .tr {
        padding: 2.66667vw 0
    }

    .shop-table .iv-counter {
        display: inline-block;
        vertical-align: middle
    }

    .shop-table .product-info .img-box {
        display: inline-block;
        width: 110px;
        overflow: hidden
    }

    .shop-table .product-info .img-box::before {
        display: none;
        padding-top: 0
    }

    .shop-table .product-info .info {
        display: block
    }

    .shop-table .product-info a.box {
        margin: 2.66667vw 0
    }

    .shop-table .img-box::before {
        display: none;
        padding-top: 0
    }

    .shop-table .img-box>img {
        position: relative;
        top: 0;
        left: 0
    }

    .shop-table .comment-infor {
        margin-left: 0;
        padding: 0 7.29167vw;
        padding: 0;
        margin-top: 2.66667vw
    }

    .shop-table .order-info {
        margin-top: 6.66667vw;
        margin-bottom: 6.66667vw
    }

    .shop-table .order-info .type {
        display: block
    }

    .shop-table .order-info .time {
        display: block
    }

    .shop-table .order-info span::after {
        display: none
    }

    .btn-pay {
        width: 20.53333vw;
        height: 7.2vw;
        line-height: 7.2vw;
        margin-top: 0
    }

    .btn-detail {
        width: 20.53333vw;
        height: 7.2vw;
        line-height: 7.2vw;
        margin-top: 0
    }

    .iv-selected input[type="checkbox"]+label i {
        width: 3.2vw;
        height: 3.2vw
    }

    .iv-selected input[type="checkbox"]+label i::before {
        width: 1.6vw;
        height: 1.6vw
    }

    .all-selected input[type="checkbox"]+label i {
        margin-right: 1.33333vw
    }

    .comment-form {
        display: block;
        width: 100%
    }

    .comment-form .score {
        position: relative
    }

    .comment-form .score>div {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-top: 1.33333vw;
        margin-bottom: 1.33333vw
    }

    .comment-form .score>div span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 1.33333vw
    }

    .comment-form .score .star {
        display: inline-block;
        vertical-align: middle;
        margin-top: 0
    }

    .comment-form .score .grade {
        margin-left: 0;
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        margin-bottom: 0;
        width: auto
    }

    .comment-form .message {
        margin-right: 0
    }

    .iv-address {
        width: auto;
        margin-left: 0;
        margin-right: 0
    }

    .iv-address>h3 {
        padding-bottom: 2.66667vw
    }

    .iv-address .address .add {
        display: block
    }

    .iv-address .selected input[type="radio"]+label {
        padding-left: 26px
    }

    .iv-address .selected input[type="radio"]+label i {
        top: 8px
    }

    .iv-address ul li {
        margin: 3.33333vw 0
    }

    .iv-address ul .btns {
        position: relative;
        text-align: right
    }

    .iv-pay {
        margin-top: 8vw
    }

    .iv-pay .mate h3 {
        padding-bottom: 2.66667vw
    }

    .iv-pay .mate p {
        margin-top: 5.33333vw
    }

    .iv-pay .btns .btn {
        width: 26.66667vw;
        height: 9.86667vw;
        line-height: 9.86667vw
    }

    .iv-pay .btns .btn::before,.iv-pay .btns .btn::after {
        width: 4.66667vw
    }

    .iv-pay .btns .btn::before {
        left: -4.66667vw
    }

    .iv-pay .btns .btn::after {
        right: -4.66667vw
    }

    .good-list {
        margin-top: 2vw
    }

    .good-list li {
        width: 100% !important
    }

    .iv-comment {
        margin-left: 0;
        margin-top: 8vw
    }

    .iv-comment .common-meta {
        padding-bottom: 2.66667vw
    }

    .user-lists li .p-img {
        display: none
    }

    .user-lists li .m-img {
        display: block
    }

    .user-lists li .img-box::before {
        padding-top: 40.08746%
    }

    .user-lists li figcaption {
        width: 36.23188%;
        height: 22.66667vw;
        width: 80%
    }

    .user-lists li figcaption h3 {
        font-size: 4vw
    }

    .user-lists li figcaption span {
        width: 19.2vw;
        height: 6.4vw;
        line-height: 6.4vw;
        font-size: 3.2vw
    }

    .user-list {
        margin-left: 0;
        margin-right: 0;
        margin-top: 3.73333vw
    }

    .user-list li {
        width: 100%
    }

    .user-list li a {
        margin: 1.6vw 0
    }

    .info-list {
        margin-left: -.8vw;
        margin-right: -.8vw;
        margin-top: 1.6vw
    }

    .info-list li a {
        margin: 0 .8vw
    }

    .info-list li .img-box {
        width: 100%
    }

    .info-list li .img-box::before {
        padding-top: 100%
    }

    .info-list li figcaption {
        width: 100%;
        height: auto;
        margin-left: 0;
        margin-top: 2.66667vw
    }

    .iv-secure {
        margin-left: 0
    }

    .iv-pull--left {
        margin-left: 0
    }

    .success-message+.group-btns .btn {
        margin: 0 .52083vw
    }

    .common-meta {
        padding-bottom: 2.66667vw
    }

    .common-meta p {
        top: auto;
        bottom: -10vw;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .favorites-list {
        margin-left: -2.66667vw;
        margin-right: -2.66667vw
    }

    .favorites-list li {
        width: 50%
    }

    .favorites-list li a {
        margin: 5.33333vw 2.66667vw;
        margin-bottom: 0
    }

    .favorites-list li .btn-setting {
        font-size: 3.73333vw;
        margin-top: 0;
        margin-bottom: 5.33333vw
    }

    .favorites-list li figcaption {
        padding: 2.66667vw 0
    }

    .address-table {
        margin-top: 20vw
    }

    .address-table thead {
        display: none
    }

    .address-table thead th {
        display: none
    }

    .address-table thead th:first-child {
        display: table-cell
    }

    .address-table tbody td {
        display: none
    }

    .address-table tbody td:first-child {
        display: table-cell
    }

    .common-table tbody td {
        padding: 8vw 0
    }

    .address-form .box .group-control-info {
        width: 100%
    }

    .search-query {
        text-align: left
    }

    .search-query .group-control {
        width: 80%;
        height: 10.66667vw
    }

    .search-query .group-control .control {
        width: 100%;
        font-size: 3.73333vw
    }

    .search-query .group-control input+label {
        top: 50%;
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        font-size: 4vw
    }

    .search-query .btns {
        width: 20%;
        margin-left: 0
    }

    .search-query .btns .btn-dark {
        width: 100%;
        height: 10.66667vw;
        line-height: 10.66667vw
    }

    .order-detail ul li {
        display: block;
        width: 100%
    }

    .order-detail ul li:first-child .comment-info {
        border-top: none
    }

    .conmon-meta--back .btns {
        margin-top: 5.33333vw;
        text-align: right
    }

    .conmon-meta--back .btn-back {
        display: inline-block;
        vertical-align: top;
        position: relative;
        top: 0;
        right: 0;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .user-invoice {
        padding: 8vw
    }

    .common-meta-none {
        padding-bottom: 0;
        border-bottom: none
    }

    .iv-pay .payment-way .money {
        font-size: 5.86667vw
    }

    .iv-pay .payment-way .payment-code {
        margin-top: 13.33333vw;
        width: 180px;
        margin-left: auto;
        margin-right: auto
    }

    .comment-form .comment-tips {
        padding: 8vw 0;
        margin-right: 0
    }

    .comment-form .comment-tips li {
        padding: 4vw 0
    }
}

@media only screen and (max-width: 768px) {
    .pay-list {
        margin-left:-2vw;
        margin-right: -2vw
    }

    .pay-list li {
        width: 50%
    }

    .iv-pay .pay-list a {
        margin: 2vw
    }
}

.diy-body {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #efefef;
    min-width: 1200px
}

.diy-step {
    display: block;
    width: 100%;
    height: 100%
}

.diy-complete {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

.diy-complete .logo {
    position: absolute;
    top: 22px;
    left: 50%;
    z-index: 20000;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.diy-product {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68.4%;
    position: fixed;
    z-index: 10000;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.diy-product::before {
    padding-top: 100%
}

.diy-product.left {
    -webkit-transform: translate(-100%, -50%);
    transform: translate(-100%, -50%)
}

.diy-product.left .diy-pro-box {
    -webkit-transform: translate(-25%, -50%);
    transform: translate(-25%, -50%)
}

.diy-product .btn-handle {
    position: absolute;
    top: 50%;
    right: -28px;
    width: 55px;
    height: 55px;
    background-color: #fff;
    border-radius: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    line-height: 55px;
    color: #000000;
    font-size: 18px
}

.diy-product .btn-handle::before {
    font-family: "iconfont";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    content: "\e725"
}

.diy-pro-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%
}

.diy-pro-box {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 46.44859%
}

.diy-pro-box canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.diy-pro-box::before {
    padding-top: 40.625%;
    padding-top: 42.20779%;
    padding-top: 42.40779%;
    padding-top: 40.98361%
}

.diy-pro-shadow {
    position: absolute;
    top: 110%;
    right: 13%;
    left: 13%;
    height: 13%;
    border-radius: 50%;
    background-image: url('../fonts/76d1d3315ee64e7fb8762c33c8aaa182.woff');
    background-size: 100%;
    background-image: -moz-radial-gradient(50% 50%, #b9b9b9 0%,rgba(185,185,185,0) 100%);
    background-image: -webkit-radial-gradient(50% 50%, #b9b9b9 0%,rgba(185,185,185,0) 100%);
    background-image: radial-gradient(50% 50%, #b9b9b9 0%,rgba(185,185,185,0) 100%);
    -webkit-filter: blur(3px);
    filter: blur(3px)
}

.diy-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%
}

.diy-handle-body {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.diy-handle-tab {
    font-size: 0;
    text-align: center
}

.diy-handle-tab>span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 30px;
    font-size: 18px;
    line-height: 1.25;
    color: #989898
}

.diy-handle-tab>span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #000;
    opacity: 0
}

.diy-handle-tab>span.current {
    color: #000
}

.diy-handle-tab>span.current::after {
    opacity: 1
}

.radio-subcate {
    display: none
}

.diy-subcate {
    font-size: 0;
    text-align: center
}

.diy-subcate--filter {
    display: inline-block;
    vertical-align: middle
}

.label-subcate {
    display: inline-block;
    vertical-align: top;
    padding: 0 2em;
    margin-right: 9px;
    margin-left: 9px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 36px;
    background-color: rgba(255,255,255,0.42);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer
}

.label-subcate>span {
    display: inline-block;
    vertical-align: top;
    line-height: 36px;
    font-size: 12px;
    margin-right: 5px;
    color: #A2A2A2
}

.radio-subcate:checked+.label-subcate {
    background-color: #fff
}

.radio-subcate:checked+.label-subcate>span {
    color: #D73636
}

.radio-subcate:checked+.label-subcate>span::before {
    content: '\e600'
}

.region-filter .label-subcate {
    background-color: #94979c
}

.region-filter .radio-subcate:checked+.label-subcate {
    background-color: #94979c
}

.bg--filter .label-subcate {
    background-color: #f0e04d
}

.bg--filter .radio-subcate:checked+.label-subcate {
    background-color: #f0e04d
}

.list-structrue {
    margin-right: auto;
    margin-left: auto;
    width: 500px
}

.list-structrue>li:nth-of-type(n+3) {
    margin-top: 13px
}

.structure-item {
    margin-right: 5px;
    margin-left: 5px
}

.radio-structure {
    display: none
}

.radio-structure:checked+label .si-active,.radio-structure.checked+label .si-active {
    visibility: visible;
    opacity: 1
}

.radio-structure:checked+label .si-img .default,.radio-structure.checked+label .si-img .default {
    opacity: 0;
    visibility: hidden
}

.radio-structure:checked+label .si-img .checked,.radio-structure.checked+label .si-img .checked {
    opacity: 1;
    visibility: visible
}

.label-structure {
    display: block;
    position: relative;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer
}

.label-structure::before {
    padding-top: 50%
}

.label-structure .checked {
    opacity: 0;
    visibility: hidden
}

.si-active {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #E61727;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden
}

.si-active::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 32px 30px 0;
    border-color: transparent #E61727 transparent transparent
}

.si-active::after {
    content: "\e601";
    font-family: 'iconfont';
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    line-height: 16px;
    width: 16px;
    color: #fff
}

.si-intro {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.si-img {
    width: 88px;
    margin-right: auto;
    margin-left: auto
}

.si-img::before {
    padding-top: 40.90909%
}

.si-img.frametype {
    width: 110px
}

.si-img.frametype::before {
    padding-top: 36.36364%
}

.si-title {
    font-size: 12px;
    line-height: 1;
    color: #989898;
    margin-top: 16px;
    font-weight: normal
}

.si-title span::after {
    display: inline-block;
    content: "+"
}

.si-title span:last-child::after {
    display: none
}

.diy-btn {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 6px;
    margin-left: 6px;
    width: 160px;
    height: 50px;
    background-color: #000;
    border-radius: 4px;
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    cursor: pointer
}

.diy-btn.prev {
    background-color: transparent;
    color: #000
}

.diy-btn.prev::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid #000;
    border-radius: 4px
}

.radio-threecate {
    display: none
}

.radio-threecate:checked+label {
    color: #000
}

.radio-threecate:checked+label::after {
    opacity: 1
}

.diy-threecate {
    font-size: 0;
    text-align: center
}

.diy-threecate label {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 20px;
    font-size: 14px;
    line-height: 1.25;
    color: #989898;
    cursor: pointer
}

.diy-threecate label::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #000;
    opacity: 0
}

.diy-materail-box {
    width: 640px;
    height: 280px;
    overflow-y: auto;
    margin-right: auto;
    margin-left: auto
}

.diy-materail-box::-webkit-scrollbar {
    width: 6px
}

.diy-materail-box::-webkit-scrollbar-track {
    background-color: #fff
}

.diy-materail-box::-webkit-scrollbar-thumb {
    background: #E61727
}

.list-diym>li:nth-of-type(n+6) {
    margin-top: 24px
}

.diym-item {
    margin-right: 6px;
    margin-left: 6px
}

.diym-item input {
    display: none
}

.label-diym {
    display: block;
    cursor: pointer
}

.label-diym::before {
    padding-top: 50%
}

.label-diym img {
    border-radius: 5px
}

.input-diym:checked+label .si-active {
    visibility: visible;
    opacity: 1
}

.btn-backhome {
    position: fixed;
    top: 35px;
    left: 3.125vw;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000;
    line-height: 2.85714;
    color: #000;
    letter-spacing: 0;
    z-index: 50000
}

@media only screen and (max-width: 1024px) {
    .btn-backhome {
        font-size:2.93333vw
    }
}

.btn-backhome i {
    display: inline-block;
    vertical-align: middle;
    width: 38px;
    height: 28px;
    background-color: #fff;
    line-height: 28px;
    text-align: center;
    margin-right: 17px;
    border-radius: 5px
}

.diy-confirm {
    position: relative
}

.diy-confirm .diy-product--pic {
    position: relative
}

.diy-confirm .diy-product--pic figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3.6%;
    font-size: 37.5em;
    line-height: 1.00667;
    letter-spacing: .03em;
    color: #fff;
    font-family: "UtopiaStd-Regular";
    opacity: .51
}

@media only screen and (max-width: 1680px) {
    .diy-confirm .diy-product--pic figcaption {
        font-size:31.25vw
    }
}

@media only screen and (max-width: 1280px) {
    .diy-confirm .diy-product--pic figcaption {
        font-size:31.25vw
    }
}

@media only screen and (max-width: 1440px) {
    .diy-confirm .diy-product--pic figcaption {
        font-size:31.25vw
    }
}

.diy-confirm .diy-product--box {
    position: relative;
    width: 46.12121%;
    margin-left: auto;
    margin-right: auto;
    z-index: 200;
    padding-top: 3.64583vw
}

.diy-confirm .diy-product--box .img-box::before {
    padding-top: 40.99869%
}

.diy-pdf {
    display: block;
    position: absolute;
    top: -300vh;
    left: 0;
    width: 100%;
    height: 100vh
}

.diy-pdf .logo {
    position: absolute;
    top: 22px;
    left: 50%;
    z-index: 20000;
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

.diy-tables {
    font-size: 0;
    width: 802px;
    height: 140px;
    margin-left: auto;
    margin-right: auto
}

.diy-tables a,.diy-tables .item-box {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    width: 33.333333%;
    height: 100%;
    position: relative;
    background-color: #fff;
    position: relative
}

.diy-tables a::before,.diy-tables .item-box::before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: 0;
    width: 1px;
    background-color: rgba(112,112,112,0.24)
}

.diy-tables a:last-child::before,.diy-tables .item-box:last-child::before {
    display: none
}

.diy-tables .box {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center
}

.diy-tables .box .img-box {
    width: 130px;
    margin-left: auto;
    margin-right: auto
}

.diy-tables .box .img-box::before {
    padding-top: 50%
}

.diy-tables .box .img-box img {
    max-width: 100%;
    width: auto;
    top: 50%;
    left: 50%;
    width: 100px
}

.diy-tables .box .img-box .stru {
    margin-top: -10px;
    margin-left: -10px
}

.diy-tables .box figcaption,.diy-tables .box .text {
    display: inline-block;
    vertical-align: middle;
    font-size: .875em;
    letter-spacing: .03em;
    color: #000;
    line-height: normal;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .diy-tables .box figcaption,.diy-tables .box .text {
        font-size:2.93333vw
    }
}

.diy-tables .box figcaption::before,.diy-tables .box .text::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #000
}

.diy-info {
    position: absolute;
    width: 224px;
    left: 0;
    bottom: -60px
}

.diy-info h3 {
    font-size: 18px;
    color: #000;
    line-height: 1.66667;
    margin-bottom: 15px
}

.diy-info h3 span {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #000;
    line-height: 1.75;
    text-transform: uppercase;
    margin-right: 5px
}

.diy-info>div {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111;
    color: #707070;
    padding: 5px 0;
    border-bottom: 1px solid rgba(112,112,112,0.2);
    color: #111
}

@media only screen and (max-width: 1024px) {
    .diy-info>div {
        font-size:2.93333vw
    }
}

.diy-info>div span {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    color: #707070
}

.diy-info>div .structure {
    vertical-align: top
}

.diy-info>div .list {
    display: inline-block;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .03em;
    color: #111
}

@media only screen and (max-width: 1024px) {
    .diy-info>div .list {
        font-size:2.93333vw
    }
}

.diy-info>div label {
    display: block
}

.diy-info .tips {
    position: relative;
    padding-left: 47px
}

.diy-info .tips i {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 39px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(152,152,152,0.22)
}

.diy-info .tips i::before {
    content: " ! ";
    font-size: 24px;
    color: #707070
}

.diy-info .tips p {
    border-bottom: none;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .05em;
    color: #fff;
    line-height: 1.66667;
    color: #707070;
    padding: 0
}

@media only screen and (max-width: 1024px) {
    .diy-info .tips p {
        font-size:2.93333vw
    }
}

.diy-operation {
    position: absolute;
    right: 0;
    bottom: -35px
}

.diy-operation .share a {
    display: block;
    color: #989898;
    margin: 50px 0
}

.diy-operation .share .icon-icon-facebock {
    font-size: 28px
}

.diy-operation .diy-keep {
    margin-top: 100px
}

.diy-operation .diy-keep .line {
    display: block;
    width: 1px;
    height: 70px;
    background-color: #000;
    margin-left: auto;
    margin-right: auto
}

.diy-operation .diy-keep p {
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #000;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px
}

@media only screen and (max-width: 1024px) {
    .diy-operation .diy-keep p {
        font-size:2.93333vw
    }
}

.diy-operation .diy-keep p span {
    display: inline-block;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.diy-operation .diy-keep .btn-keep {
    display: block;
    width: 49px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    background-color: #E61727;
    border-radius: 50%;
    margin-top: 20px;
    color: #fff;
    font-size: 16px
}

@media only screen and (max-width: 1440px) and (min-width: 1024px) {
    .diy-pro-box {
        width:54.04859%
    }

    .list-structrue {
        width: 80%
    }

    .diy-materail-box {
        width: 80%;
        height: 120px
    }
}

@media only screen and (min-width: 1025px) {
    .btn-backhome:hover {
        color:#E61727
    }

    .diy-operation .share a:hover {
        color: #E61727
    }

    .diy-tables a:hover .box figcaption {
        color: #E61727
    }

    .diy-tables a:hover .box figcaption::before {
        background-color: #E61727
    }
}

* {
    margin: 0;
    padding: 0
}

.l-btn {
    display: inline-block;
    outline: none;
    resize: none;
    border: none;
    padding: 5px 10px;
    background: #8C85E6;
    background: #E61727;
    color: #fff;
    border: solid 1px #8C85E6;
    border: solid 1px #E61727;
    border-radius: 3px;
    font-size: 14px
}

.l-btn:hover {
    background: #8078e3;
    background: #E61727;
    animation: anniu 1s infinite
}

.l-btn:active {
    box-shadow: 0 2px 3px rgba(0,0,0,0.2) inset
}

.hidden {
    display: none
}

.tailoring-container,.tailoring-container div,.tailoring-container p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

.tailoring-container {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100000;
    top: 0;
    left: 0
}

.tailoring-container .black-cloth {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #111;
    opacity: .9;
    z-index: 1001
}

.tailoring-container .tailoring-content {
    position: absolute;
    width: 768px;
    height: 560px;
    background: #fff;
    z-index: 1002;
    left: 0;
    top: 0;
    border-radius: 10px;
    box-shadow: 0 0 10px #000;
    padding: 10px
}

.tailoring-content-one {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #DDD
}

.tailoring-content .choose-btn {
    float: left
}

.tailoring-content .close-tailoring {
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    background: #eee;
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 30px;
    float: right;
    cursor: pointer
}

.tailoring-content .close-tailoring:hover {
    background: #ccc
}

.tailoring-content .tailoring-content-two {
    width: 100%;
    height: 460px;
    position: relative;
    padding: 5px 0
}

.tailoring-content .tailoring-box-parcel {
    width: 520px;
    height: 450px;
    position: absolute;
    left: 0;
    border: solid 1px #ddd
}

.tailoring-content .preview-box-parcel {
    display: inline-block;
    width: 228px;
    height: 450px;
    position: absolute;
    right: 0;
    padding: 4px 14px
}

.preview-box-parcel p {
    color: #555
}

.previewImg {
    width: 200px;
    height: 200px;
    overflow: hidden
}

.preview-box-parcel .square {
    margin-top: 10px;
    border: solid 1px #ddd
}

.preview-box-parcel .circular {
    border-radius: 100%;
    margin-top: 10px;
    border: solid 1px #ddd
}

.tailoring-content .tailoring-content-three {
    width: 100%;
    height: 40px;
    border-top: 1px solid #DDD;
    padding-top: 10px
}

.sureCut {
    float: right
}

@media all and (max-width: 768px) {
    .tailoring-container .tailoring-content {
        width:100%;
        min-width: 320px;
        height: 460px
    }

    .tailoring-content .tailoring-content-two {
        height: 360px
    }

    .tailoring-content .tailoring-box-parcel {
        height: 350px
    }

    .tailoring-container .tailoring-box-parcel {
        width: 100%
    }

    .tailoring-container .preview-box-parcel {
        display: none
    }
}

.footer {
    background-color: #fff;
    border-top: 1px solid rgba(87,87,87,0.24);
    overflow: hidden
}

.footer .validate {
    width: 26.77083vw;
    margin-left: auto;
    margin-right: auto
}

.footer .validate legend,.footer .validate h3 {
    display: block;
    width: 100%;
    font-size: 1.5em;
    line-height: 1.66667;
    letter-spacing: .03em;
    color: #000;
    text-align: center
}

@media only screen and (max-width: 1680px) {
    .footer .validate legend,.footer .validate h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1440px) {
    .footer .validate legend,.footer .validate h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1280px) {
    .footer .validate legend,.footer .validate h3 {
        font-size:1.5625vw
    }
}

@media only screen and (max-width: 1024px) {
    .footer .validate legend,.footer .validate h3 {
        font-size:4vw
    }
}

.footer .validate .group-control {
    position: relative;
    padding-right: 74px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 5px
}

.footer .validate .on label {
    display: none
}

.footer .validate label {
    position: absolute;
    top: 10px;
    left: 24px;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .footer .validate label {
        font-size:2.93333vw
    }
}

.footer .validate .control {
    display: block;
    padding: 0;
    border: none;
    background: none;
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    font-size: .875em;
    line-height: 2;
    letter-spacing: .03em;
    color: #000
}

@media only screen and (max-width: 1024px) {
    .footer .validate .control {
        font-size:2.93333vw
    }
}

.footer .validate .subscribe {
    display: block;
    padding: 0;
    border: none;
    background: none;
    margin: 0;
    width: 74px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #000;
    cursor: pointer;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .05em;
    color: #fff
}

@media only screen and (max-width: 1024px) {
    .footer .validate .subscribe {
        font-size:2.93333vw
    }
}

.footer .link a {
    display: inline-block;
    vertical-align: middle;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .05em;
    color: #000;
    position: relative;
    padding-right: 14px;
    margin-right: 8px
}

@media only screen and (max-width: 1024px) {
    .footer .link a {
        font-size:2.93333vw
    }
}

.footer .link a::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 10px;
    background-color: #000;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.footer .link a:last-child::before {
    display: none
}

.footer .copyright {
    background-color: #000;
    padding-left: 3.125vw;
    padding-right: 3.125vw;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px
}

@media only screen and (max-width: 1024px) {
    .footer .copyright {
        padding-left:5.33333vw;
        padding-right: 5.33333vw
    }
}

.footer .copy {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff
}

@media only screen and (max-width: 1024px) {
    .footer .copy {
        font-size:2.93333vw
    }
}

.footer .copy a {
    color: #fff
}

.footer .site {
    position: absolute;
    top: 50%;
    right: 3.125vw;
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media only screen and (max-width: 1024px) {
    .footer .site {
        font-size:2.93333vw
    }
}

.footer .site a {
    color: #fff
}

.footer .noti {
    display: inline-block;
    vertical-align: middle;
    width: 60%
}

.footer .noti span {
    display: inline-block;
    vertical-align: middle;
    font-size: .75em;
    line-height: 2;
    letter-spacing: .05em;
    color: #fff;
    position: relative;
    padding-right: 14px;
    margin-right: 14px
}

@media only screen and (max-width: 1024px) {
    .footer .noti span {
        font-size:2.93333vw
    }
}

.footer .noti span::before {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    width: 1px;
    height: 10px;
    background-color: #fff
}

.footer .noti a {
    font-size: .75em;
    line-height: 2;
    letter-spacing: .05em;
    color: #fff
}

@media only screen and (max-width: 1024px) {
    .footer .noti a {
        font-size:2.93333vw
    }
}

.footer .noti span:last-child::before {
    display: none
}

.footer .share>div {
    position: relative
}

.footer .share>div img {
    display: inline-block;
    max-width: 180px;
    margin: 0 10px
}

.footer .share>div p {
    font-size: .875em;
    line-height: 1.71429;
    color: #000;
    font-weight: 700
}

@media only screen and (max-width: 1024px) {
    .footer .share>div p {
        font-size:2.93333vw
    }
}

.footer .share .share-code {
    position: absolute;
    top: -220px;
    left: 50%;
    width: 400px;
    font-size: 0;
    text-align: center;
    margin-left: -200px;
    opacity: 0;
    visibility: hidden;
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    background-color: #fff
}

.footer .share .share-code .code {
    font-size: 16px
}

.btn-backtop {
    display: none;
    position: fixed;
    bottom: 100px;
    bottom: 60px;
    right: 3.125vw;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    background-color: #E61727;
    overflow: hidden;
    z-index: 3000;
    z-index: 3500;
    font-size: 24px
}

.btn-backtop::before {
    display: inline-block;
    -webkit-animation-duration: .55s;
    animation-duration: .55s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.login-box {
    background-color: #f8f8f8
}

@-webkit-keyframes backtop {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50%, 60% {
        -webkit-transform: translate(0, -100%);
        transform: translate(0, -100%)
    }

    61% {
        opacity: 0;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }

    62% {
        opacity: 1;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

@keyframes backtop {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    50%, 60% {
        -webkit-transform: translate(0, -100%);
        transform: translate(0, -100%)
    }

    61% {
        opacity: 0;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }

    62% {
        opacity: 1;
        -webkit-transform: translate(0, 100%);
        transform: translate(0, 100%)
    }

    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12000
}

.popup .mask {
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4)
}

.popup .contain {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1240px;
    background-color: #fff
}

.popup .contain .btn-close {
    position: absolute;
    top: 35px;
    right: 30px;
    font-size: 30px;
    color: #000;
    z-index: 200
}

.popup .popover-form {
    display: block;
    margin: 150px 180px;
    margin: 120px 180px
}

.login {
    font-size: 0;
    position: relative
}

.login .cover-pic {
    width: 40.08065%
}

.login .cover-pic .img-box::before {
    padding-top: 140%
}

.login .contents {
    display: block;
    width: 59.91935%;
    font-size: 16px;
    background-color: #fff;
    padding: 0 9.42708vw;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding-top: 7.325vw
}

.login .other-login p {
    font-size: .75em;
    line-height: 1.83333;
    letter-spacing: .05em;
    color: #fff;
    color: #575757;
    text-align: center;
    position: relative
}

@media only screen and (max-width: 1024px) {
    .login .other-login p {
        font-size:2.93333vw
    }
}

.login .other-login p span {
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    background-color: #fff;
    position: relative;
    z-index: 20
}

.login .other-login p::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(87,87,87,0.24)
}

.login .login-type {
    text-align: center
}

.login .login-type a {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin: 0 14px;
    border: 1px solid rgba(112,112,112,0.4);
    border-radius: 50%;
    color: #989898
}

@media only screen and (max-width: 1440px) and (min-width: 1024px) {
    .popup .contain {
        width:64%
    }

    .popup .contain .btn-close {
        top: 1.82292vw;
        right: 1.5625vw;
        font-size: 1.5625vw
    }

    .popup .popover-form {
        margin: 48px 100px
    }

    .login .contents {
        padding: 0 9.42708vw;
        padding: 0 7.32708vw;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        padding-top: 4.025vw
    }

    .login .login-type a {
        width: 2.08333vw;
        height: 2.08333vw;
        line-height: 2.08333vw;
        margin: 0 7px;
        font-size: 12px
    }

    .footer .share .share-code {
        top: -160px
    }

    .footer .share>div img {
        max-width: 120px
    }

    .btn-backtop {
        width: 3.47222vw;
        height: 3.47222vw;
        line-height: 3.47222vw
    }
}

@media only screen and (min-width: 1025px) {
    .footer .link a:hover {
        color:#E61727
    }

    .footer .share .corps:hover .share-code {
        opacity: 1;
        visibility: visible;
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .btn-backtop:hover::before {
        -webkit-animation-name: backtop;
        animation-name: backtop
    }
}

@media only screen and (max-width: 1024px) {
    .footer .validate {
        width:auto;
        margin-left: 4vw;
        margin-right: 4vw
    }

    .footer .validate .group-control {
        height: 10.66667vw;
        padding-right: 12vw
    }

    .footer .validate .subscribe {
        width: 12vw
    }

    .footer .validate label {
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    .footer .link {
        font-size: 0
    }

    .footer .link a {
        padding-right: 1.33333vw;
        margin-right: 1.33333vw
    }

    .footer .link a::before {
        height: 2.4vw
    }

    .footer .noti {
        display: block;
        width: 100%;
        font-size: 0
    }

    .footer .noti span {
        padding-right: 1.33333vw;
        margin-right: 1.33333vw
    }

    .footer .noti span::before {
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        height: 2.4vw
    }

    .footer .noti span:last-child {
        padding-right: 0;
        margin-right: 0
    }

    .footer .copyright {
        padding-top: 5.33333vw;
        padding-bottom: 5.33333vw
    }

    .footer .copy {
        display: block;
        width: 100%;
        text-align: center
    }

    .footer .btn-backtop {
        width: 10.66667vw;
        height: 10.66667vw;
        line-height: 10.66667vw;
        bottom: 21.33333vw;
        font-size: 4vw;
        right: 5.33333vw
    }

    .footer .site {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        text-align: center;
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -webkit-transform: translateY(0px);
        transform: translateY(0px)
    }

    .footer .site a {
        display: inline-block
    }

    .popup .contain {
        width: 90%
    }

    .popup .contain .btn-close {
        position: absolute;
        top: 14px;
        right: 12px;
        font-size: 4vw
    }

    .popup .popover-form {
        margin: 5.33333vw 2.66667vw
    }

    .login .cover-pic {
        display: none;
        width: 100%
    }

    .login .contents {
        width: 100%;
        position: relative;
        padding-top: 0;
        padding: 5.33333vw 2.66667vw
    }
}

/*# sourceMappingURL=app.css.map */