html{margin: 0px; padding: 0px; width: 100%; overflow-x: hidden;}
body{margin: 0px; padding: 0px; background-color: #fff; overflow-x: hidden;}

.relative{position: relative;}
.absolute{position: absolute;}

img.full{display: block; width: 100%;}

.box{display: -webkit-flex; display: flex;}
.flex-direction-row{flex-direction: row;}
.flex-direction-row-r{flex-direction: row-reverse;}
.flex-direction-column{flex-direction: column;}
.flex-direction-column-r{flex-direction: column-reverse;}
.flex-wrap-now{flex-wrap: nowrap}
.flex-wrap-wrap{flex-wrap: wrap}
.flex-wrap-wrap-r{flex-wrap: wrap-reverse}
.justify-content-start{justify-content: flex-start}
.justify-content-end{justify-content: flex-end}
.justify-content-center{justify-content: center}
.justify-content-between{justify-content: space-between}
.justify-content-around{justify-content: space-around}
.align-items-start{align-items: flex-start}
.align-items-end{align-items: flex-end}
.align-items-center{align-items: center}
.align-items-baseline{align-items: baseline}
.align-items-stretch{align-items: stretch}
.align-content-start{align-content: flex-start}
.align-content-end{align-content: flex-end}
.align-content-center{align-content: center}
.align-content-between{align-content: space-between}
.align-content-around{align-content: space-around}
.align-content-stretch{align-content: stretch}

.w1920{max-width: 1600px; width: 100%; margin: 0px auto;}
.w1218{max-width: 990px; width: 100%; margin: 0px auto;}

.product-content{
    width: 60%;
    position: absolute;
    left: 20%;
    top: 0%;
    height: 100%;
}

/* .w1218{height: 100%;} */

#wrap{max-width: 1440px; width: 100%; margin: 0px auto;}
.block{position: absolute; width: 64%; top: 0px; left: 50%; margin-left: -32%; height: 100%;}



#navbar .block{top: -5%; width: 59%; left: 50%; margin-left: -29.5%; position: absolute;}
#bar{width: 100%; margin: 0px auto;}
#bar .block{width: 60%; margin-left: -30%;}

.menu{position: absolute; top: 0%; width: 100%; left: 0%;}
.menu a{padding: 0px; display: block; position: relative; flex: 1;}
.menu a:hover{opacity: 1;}

.menu a .active{display: block; width: 100%;}
.menu a:hover .active{display: none;}

.menu a .hover{display: none; width: 100%;}
.menu a:hover .hover{display: block;}


@media (max-width:750px){
    /* .contentBlock{width: 150%; margin-left: -25%;} */
    #navbar .block{top: -5%; width: 90%; left: 5%; margin-left: 0%; position: absolute;}
}

._buuttonList{position: absolute; width: 41.5%; font-size: 0px;}
._buuttonList .button{display: inline-block; width: 50%; box-sizing: border-box; padding: 0px 2px; position: relative; border: 0px;}

#imgBlock01 ._buuttonListLeft{top: 75.5%; left: 4.8%;}
#imgBlock01 ._buuttonListRight{top: 75.5%; left: 53.1%;}

#imgBlock02 ._buuttonListLeft{top: 68.5%; left: 4.8%;}
#imgBlock02 ._buuttonListRight{top: 68.5%; left: 53.1%;}

#imgBlock03 ._buuttonListLeft{top: 69.5%; left: 4.8%;}
#imgBlock03 ._buuttonListRight{top: 69.5%; left: 53.1%;}

#imgBlock04 ._buuttonListLeft{top: 69.5%; left: 4.8%;}
#imgBlock04 ._buuttonListRight{top: 69.5%; left: 53.1%;}

#imgBlock05 ._buuttonListLeft{top: 69.5%; left: 4.8%;}
#imgBlock05 ._buuttonListRight{top: 69.5%; left: 53.1%;}

#imgBlock06 ._buuttonListLeft{top: 56%; left: 4.8%;}
#imgBlock06 ._buuttonListRight{top: 56%; left: 53.1%;}

#imgBlock07 ._buuttonListLeft{top: 68.5%; left: 4.8%;}
#imgBlock07 ._buuttonListRight{top: 68.5%; left: 53.1%;}

#imgBlock08 ._buuttonListLeft{top: 74%; left: 4.8%;}
#imgBlock08 ._buuttonListRight{top: 74%; left: 53.1%;}

#imgBlock09 ._buuttonListLeft{top: 69%; left: 4.8%;}
#imgBlock09 ._buuttonListRight{top: 69%; left: 53.1%;}

#imgBlock10 ._buuttonListLeft{top: 57%; left: 4.8%;}

.sub_buuttonList{width: 100%; position: absolute; top: 100%; padding-top: 10px; display: none; text-align: center; z-index: 2;}
.sub_buuttonList a{margin: 5px 0px; display: block; height: auto;}
.sub_buuttonList a:hover{opacity: 1;}


@media (max-width:750px){

    ._buuttonList{position: absolute; width: 45.5%; font-size: 0px;}

    .product-content{
        width: 90%;
        position: absolute;
        left: 5%;
        top: 0%;
        height: 100%;
    }

    #imgBlock01 ._buuttonListLeft{top: 33.5%; left: 4%;}
    #imgBlock01 ._buuttonListRight{top: 76.5%; left: 50.4%;}

    #imgBlock02 ._buuttonListLeft{top: 23.5%; left: 4%;}
    #imgBlock02 ._buuttonListRight{top: 73.5%; left: 50.4%;}

    #imgBlock03 ._buuttonListLeft{top: 23.5%; left: 4%;}
    #imgBlock03 ._buuttonListRight{top: 73.5%; left: 50.4%;}

    #imgBlock04 ._buuttonListLeft{top: 23.5%; left: 4%;}
    #imgBlock04 ._buuttonListRight{top: 73.5%; left: 50.4%;}

    #imgBlock05 ._buuttonListLeft{top: 23%; left: 4%;}
    #imgBlock05 ._buuttonListRight{top: 73%; left: 50.4%;}

    #imgBlock06 ._buuttonListLeft{top: 19.5%; left: 4%;}
    #imgBlock06 ._buuttonListRight{top: 62%; left: 50.4%;}

    #imgBlock07 ._buuttonListLeft{top: 30.5%; left: 50.4%;}
    #imgBlock07 ._buuttonListRight{top: 73%; left: 4%;}

    #imgBlock08 ._buuttonListLeft{top: 31.5%; left: 50.4%;}
    #imgBlock08 ._buuttonListRight{top: 76%; left: 4%;}

    #imgBlock09 ._buuttonListLeft{top: 22.5%; left: 50.4%;}
    #imgBlock09 ._buuttonListRight{top: 73%; left: 4%;}

    #imgBlock10 ._buuttonListLeft{top: 36.5%; left: 50.4%;}

    .sub_buuttonList{width: 100%; position: absolute; top: 20%; padding-top: 10px; display: none; text-align: center; z-index: 2;}

}


#pcKv{display: block; position: relative;}
#mobileKv{display: none; position: relative;}

#pcKv .imgBlock{position: absolute; top: 0px; left: 0px; width: 64%; top: 0px; left: 50%; margin-left: -32%; height: 100%; display: flex;}
#pcKv .imgBlock .title,
#pcKv .imgBlock .chahua{padding: 0px 20px;}

@media (max-width:750px){
    #pcKv{display: none;}
    #mobileKv{display: block;}
    /* .sub_buuttonList{background-color: #fff; border: 1px solid #c38e64; border-radius: 10px; overflow: hidden; z-index: 100;} */
}

.menu-nav{display: block; position: absolute; top: 0px; width: 100%;}

.buttonBlock{display: block; width: 100%; position: absolute; top: 0%; left: 0%;}

#imgSwiper{width: 35%; position: absolute; top: 38%; left: 12%;}
#imgSwiper .imgSwiperItem{display: none; position: absolute; top: 0px; left: 0px; width: 100%;}

.erButtonList{position: absolute; height: 50%; top: 20%; width: 27%; left: 48%;}
.erButtonList .erButton{display: block; width: 33%; height: 100%; float: left;}

#erPop{position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgba(0,0,0,0.8); z-index: 1000; display: none;}
.erPopBlock{width: 40%; left: 50%; margin-left: -20%; top: 50%; margin-top: -25%; position: absolute;}

.menuList{
    width: 60.677%;
    height: 79.54%;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -30.1085%;
}

.menuList a{
    display: block;
    width: 25%;
    float: left;
    height: 100%;
    position: relative;
}

.menuList a:hover{
    opacity: 1;
}

.menuList a span{
    display: inline-block;
    width: 50%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    background-color: #e3c4c9;
    color: #000;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    position: absolute;
    bottom: -1px;
    left: 25%;
    text-align: center;
}

.menuList a:hover span{
    background-color: #c5000b;
    color: #fff;
}

@media (max-width:750px){
    .menuList a span{
        height: 14px;
        line-height: 14px;
        font-size: 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
}

.back-to-top{
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.back-to-top svg{
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
}

.back-to-top:hover{
    transform: translateY(-2px);
}

.back-to-top.is-hidden-by-footer{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width:750px){
    .back-to-top{
        right: 16px;
        bottom: 16px;
        width: 40px;
        height: 40px;
    }
}