﻿.site_menu{display: none;}
.wrap_1660{width: 1660px;}
.fnt_42{font-size: 0.42rem;}

.jz_title{margin-bottom: 0.5rem;}
.jz_title h2{color:#373737;line-height: 1.25em;}
.jz_title p{color:#373737;line-height: 1.33em;padding-top: 0.2rem;}


.jz_top{padding: 0.4rem 0 0.3rem 0;}
/* .jz_top{overflow: hidden;} */
.jz_top .left{float: left;color: #666666;}
.jz_top .left p{margin-bottom: 0.2rem;    opacity: 0 !important;}
.jz_top .left h2{width: 2.75rem;}
.jz_top .left h2 img{width: 100%;}
.jz_top .right{float: right;padding-top: 0.65rem;}
.jz_top .right h3{line-height: 1em;color: #373737;}
.jz_bottom img{width: 100%;}

.jz_02{padding:1.1rem 0;overflow: hidden;}
.jz_02 .jz_title{margin-bottom: 0.2rem;padding: 0 4.2rem;}

.jz_brand{padding: 0 0.28rem 0 0.18rem;}
.jz_brand ul{position: relative;height: 7.4rem;}
.jz_brand li img{width: 100%;}
.jz_brand li{position: absolute;top:0;border-radius: 0.2rem;overflow: inherit;}
.jz_brand li:nth-child(1){width: 2.31rem;height: 1.99rem; }
.jz_brand li:nth-child(2){width: 6.78rem;height: 4.12rem;left: 1.75rem;top:2.54rem}
.jz_brand li:nth-child(3){width: 3.78rem;height: 3.21rem;left: 8.78rem;top:0.55rem}
.jz_brand li:nth-child(4){width: 4.3rem;height: 3.15rem;left:9.7rem;top:4.25rem}
.jz_brand li:nth-child(5){width: 2.74rem;height: 11.78rem;left: 13.38rem;top:1.45rem}

.jz_03{padding-bottom: 1.1rem;}
.jz_03 .jz_title{margin-bottom:0;}

.jz_03 .left{float: left;width: 29.5%;    position: -webkit-sticky; position: sticky;top:1.2rem;}
.jz_03 .right{float: right;width: 67.2%;margin-top: 1.1rem;border-radius: 0.4rem;}
.jz_03 .right img{width: 100%;}


.jz_04 .jz_title{padding-left: 9.7rem;}
.jz_flavor li{margin-bottom: 0.4rem;}
.jz_flavor li:last-child{margin-bottom: 0;}
.jz_flavor dt{border-radius: 0.5rem;}

.jz_fash{padding:1.6rem 0 2.2rem 0;}
.jz_fashimg{width: 12.94rem;margin: auto;position: relative;text-align: center;}
.jz_fash_ic{position: absolute; }
.jz_fash_ic img{width: 100%;height: 100%;}
.jz_fash_ic01{width: 3.23rem;height: 1.88rem; left: 3.57rem;top:-0.45rem}
.jz_fash_ic02{width: 1.84rem;height: 0.92rem;top:-0.03rem;right: -0.6rem;}
.jz_fash_ic03{width: 8.24rem;height: 4.06rem;bottom: -1.5rem;right: -1.3rem;}
/* .jz_fash_ic01{width: 3.23rem;height: 1.88rem; left: 0;top:0}
.jz_fash_ic02{width: 1.84rem;height: 0.92rem;top:-0.03rem;right: -2rem;}
.jz_fash_ic03{width: 8.24rem;height: 4.06rem;bottom: -1.5rem;right: -3rem;} */
@media only screen and (min-width:1025px) {
/* .jz_fash_ic{opacity: 0;}
.jz_fash_ic01{left: 0;top:0}
.jz_fash_ic02{top:0;right:0;}
.jz_fash_ic03{bottom: 0;right:0;} 


.jz_fashimg>img{width: 50%;opacity: 0.8;} */
}


.jz_05{padding: 1.3rem 0;}
.jz_05 .jz_title{text-align: center;}
.jz_global{width: 60.2%;margin: auto;}
.jz_global li img{width: 100%;}
.jz_global li{float: left;width: 33.6%;  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.4);}
.jz_global li:nth-child(1){width: 17.4%;margin-right:13.3% ;margin-top: 1.65rem;}
.jz_global li:nth-child(3){width: 21.9%;float: right;margin-top: 1.3rem;}

.jz_06{padding: 1rem 0;text-align: center;padding-top: 0; }
.jz_06 h3{line-height: 1.2em;}


@media only screen and (max-width:767px) {
    .jz_02{padding: 40px 0;}
    .jz_02 .jz_title{padding: 0;}
    .jz_03{padding-bottom: 40px;}
    .jz_05{padding: 40px 0;}
    .jz_06{padding-bottom: 40px;}

    .jz_top .left,.jz_top .right{float: none;}
    .jz_top .left{margin-bottom: 10px;overflow: hidden;line-height: 50px;}
    .jz_top .left p{float: left;margin-bottom: 0;}
    .jz_top .left h2{width: 80px;float: right;}
    .jz_top .right{padding-top: 0;}
    .jz_top .right h3{line-height: 1.3em;}
    
    .jz_brand{padding: 0;}
    .jz_brand ul{height: auto;}
    .jz_brand li{position: static;width: 100% !important;height: auto !important;margin-bottom: 10px;}
    .jz_brand li:last-child{margin-bottom: 0;}

    
    .jz_03 .left,.jz_03 .right{float: none;width: 100%;}
    .jz_03 .left{    position: static;position: static;}
    .jz_03 .right{margin-top: 20px;}

    .jz_04{overflow: hidden;}
    .jz_04 .jz_title{padding: 0;}
    .jz_fashimg{width: 100%;}
    .jz_fash{padding: 1rem 0;}
    .jz_fash_ic01{width: 1.5rem;height: auto;}
    .jz_fash_ic02{width: 1.5rem;height: auto;right: 0;top:-0.2rem}
    .jz_fash_ic03{width: 3rem;height: auto;right: 0;bottom: -0.5rem;}
    .jz_global{width: 100%;}
    .jz_global li{width: 40%; }
.jz_global li:nth-child(1){width: 23%;margin-right:5% ;margin-top: 0.6rem;}
.jz_global li:nth-child(3){width: 27%;margin-top: 1.3rem;margin-top: 0.6rem;}
}




@keyframes site-zfj {
    0% {opacity: 1;  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);}
    10% {opacity: 0.8; transform: translate3d(-100px, 0px, 0) rotate(10deg) scale(0.7);}
    35% {opacity: 0.6; transform: translate3d(100px, 0px, 0) rotate(30deg) scale(0.4);}
    50% {opacity: 0.4; transform: translate3d(0, 0, 0) rotate(360deg) scale(0);}
    80% {opacity: 0.2; transform: translate3d(0, 0, 0) rotate(720deg) scale(1);}
    90% {opacity: 0.1; transform: translate3d(0, 0, 0) rotate(3600deg) scale(6);}
    100% {opacity: 1; transform: translate3d(0, 0, 0) rotate(3600deg) scale(1);}
  }

  @-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(200px);
        transform: translateY(200px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(200px);
        -ms-transform: translateY(200px);
        transform: translateY(200px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@media only screen and (min-width:1024px) {
    
/*.jz_top .left h2{-webkit-animation-name: site-zfj; animation-name: site-zfj; -webkit-animation-duration: 3s; animation-duration: 3s;  -webkit-animation-timing-function: linear; animation-timing-function: linear;}*/

}
@media only screen and (min-width:767px) {

    .jz_flavor li{position: sticky;top:1.1rem;}
    .public-img{    display: block;
        position: relative;
        z-index: 1;
        overflow: hidden;}
    .zz {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background: #f5f7f9;
    }
    
    
    .jz_bottom{width: 100%; height:7.73rem;position: relative;overflow: hidden;border-radius: 0.2rem;}
    .jz_bottom_in{width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translateY(-1.5rem)}
    .jz_bottom img { width: 100%;height: 100%;object-fit: cover;}
    
}

























