.section1{
    padding-top: 0px;
    padding-bottom: 0px;
    clear: both;
}
.section1 .img-box{
    width: 100%;
    height: calc(100vh - 171px);
    padding-right: 0;
    padding-left: 0;
}
.section1 .box{
    width: 100%;
    color:white;
    position: absolute;
    top: 33%; left:0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.section1 .box .txt{
    font-size: 25px;
    top: 100px;
}
.section1 .box h1{
    font-weight: 300;
    font-size: 70px;
    top: 100px;
    opacity: 0;
}
.section1 .box button{
    background-color: white;
    color:black;
    width: 400px;
    height: 70px;
    margin-top: 40px;
    font-size: 18px;
    opacity: 0;
    top: 100px;
}
.section1 img{width: 100%; height: 100%; object-fit: cover;}
.section1 .box .line{
    width: 65px;
    height: 1px;
    background-color: white;
    margin: 10px 5px 5px;
    opacity: 0;
    top: 100px;
}
.section1 .box{transition: 0.5s;}
.section1 .owl-item.active .box h1{
    opacity: 1;
    top: 0px;
    transition: 0.9s;
}
.section1 .owl-item.active .box .line{
    opacity: 1;
    top: 0px;
    transition: 0.6s;
}
.section1 .owl-item.active .box .txt{
    opacity: 1;
    top: 0px;
    transition: 0.3s;
}
.section1 .owl-item.active .box button{
    opacity: 1;
    top: 0px;
    transition: 1.2s;
}


/* owl-SLIDE */
.slide-1{
    /* border:10px solid pink; */
} 
.slide-1 .img-box{
    /* border:10px solid green; */
    width:100%;   
    height: calc(100vh - 171px);
}
.slide-1 img{width:100%; height: 100%; object-fit: cover;}
.slide-1 .owl-dots{
    /* border:1px solid red; */
    position: absolute;
    bottom:10px;
    left:0;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}
.slide-1 .owl-dot{
    /* border:1px solid blue; */
    width: 50px;
    height: 7px;
    margin: 5px; 
    background-color: rgb(194, 193, 193) !important;
}
.slide-1 .owl-dot.active{
    background-color: rgb(255, 255, 255) !important;
}

/* next, prev btn */
.slide-1 .owl-nav{
    position: absolute;
    top: 49%;
    width: 100%;
}
.slide-1 .owl-nav button{
    width:50px;
    height: 50px;
    border-radius: 50%;           
    /* border:1px solid black !important; */
    position: absolute;
}
.slide-1 .owl-nav button.owl-prev{
    background-image: url(211217_img_a-interior/arrow-500.png) !important;            
    background-size: contain !important;    
    background-position: -1px 2.5px;         
    left: 40px;   
}
.slide-1 .owl-nav button.owl-next{    
    background-image: url(211217_img_a-interior/arrow-600.png) !important;
    background-size: contain !important; 
    background-position: 2px 2.5px;   
    right: 75px;
}
.slide-1 .owl-nav span{
    display: none;
}
.slide-1 .owl-nav button.owl-prev:hover{
    left: 25px;
}
.slide-1 .owl-nav button.owl-next:hover{
    right: 60px;
}

@media(max-width:1540px){
    .section1 .box h1{margin-top: 100px;}
}
@media(max-width:1000px){   
    .section1 .box button{margin-top: 20px;}
    .section1 .box .line{margin: 20px 5px;}  
    .slide-1 .owl-nav button{display: none;} 
}
@media(max-width:770px){  
    .section1 .box{   left: 60px !important; }   
}
@media(max-width:475px){  
    .section1 .box h1{  font-size: 37px !important; margin-top: 18px !important;}  
    .section1 .box .txt{font-size: 20px !important; text-shadow: 0 0 5px rgba(0,0,0,0.4); text-align: center;}   
    .section1 .box button{  width:175px !important; height: 40px !important; font-size: 10px !important; margin-top: 10px !important;}    
    .section1 .box{   
        left: 6% !important; 
        width: 380px;
        top:31% !important;
        /* border:1px solid yellow; */
    }  
    .section1 .img-box{height: 450px;}    
    .slide-1 .owl-dot{    
        width: 20px !important; 
        height: 3px !important;  
    }
    .slide-1 .owl-dots{
        width:400px !important; height:30px; 
        bottom: -67% !important; 
        left: 14px !important;        
    }
    .slide-1{height: 350px !important;}      
    .btn-top{bottom:20px !important; right:32px !important; }
    .section-title h1{font-size: 30px !important;} 

    .section2{top: 244px;}
    .section2 .section-title .tit{padding: 13px 0 !important;}

}
@media(max-width:420px){
    .section1 .box{top:31% !important;}
    .section1 .box button{font-size: 13px !important; }
    .section2 .tit{left: 13px !important;}
    .section2 .logo-group{margin-top: 61px !important;}
    .section3{top: 182px !important;}  
    .section3 .com-title .title-b{
        margin-bottom: -41px !important;       
    }
    .section3 .item .title{font-size: 20px !important;}
    .section3 .item .price{font-size: 15px !important;}  
    .banner{top:134px !important;}
    .banner .btn{height: 44px !important;}
    .key{top:134px !important;}
   
  
    .key .event-tit{font-size: 20px !important; line-height: 35px !important;}
    .key .p-desc{font-size: 11px !important; line-height: 13px !important;}
    footer{padding-top: 208px !important;}
    footer .foot1-wrap {
        padding-top: 65px;
        padding-bottom: 65px;
    }
}
@media(max-width:320px){
    .section1 .box{left:5% !important; width:291px !important;}
    .slide-1 .owl-dots {left:-40px !important;} 
    .section3{top: 182px !important;}
    .section3 .com-title .title-b{       
        font-size: 24px !important;
    }
   


}



/* section2 */
.section2 .section-title{
    /* border:1px solid red;      */
}
.section2 .section-title .tit{
    /* border:1px solid red;     */
    padding: 60px 0;
    left:4px;
    line-height: 48px;
}
.section2 .section-title .img{
    width: 240px;   
    top: 20px;
}

.section2 .flex{
    /* border:1px solid blue;   */
    margin-top: 30px;      
}
.section2 .left{
    /* width: 50%; */   
}
.section2 .left .text{
    margin-bottom: 50px;
    font-size: 16px;
}
.section2 .left img{
    width: 520px;
    height: 500px;
    object-fit: cover;
}
.section2 .left .p-box{
    width: 96%;
    margin-top: 50px;
}
.section2 .left .p-box p{
    font-size: 19px;
}
.section2 .subj{font-weight: 500;}

.section2 .right{}
.section2 .right .text-flex{
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}
.section2 .right .text-flex .text{
    font-size: 16px;
}
.section2 .right img{
    width: 100%;
    height: 800px;
    object-fit: cover;
}
.section2 .right button{
    width: 100%;
    height: 60px;
    background-color: black;
    color:white;
    font-size: 18px;
}

.section2 .logo-group{
    margin-top: 100px;    
}
.section2 .item{
    margin-right: 47.5px;   
    filter: contrast(2%) brightness(150%);
    cursor: pointer;
}
.section2 .item:last-child{
    margin-right: 0px;
}
.section2 .item:hover{
    filter: contrast(100%) brightness(100%);
}

@media(max-width:1000px) and (min-width:771px){
    .section2 .right .text-flex{
        margin-top:40px;
    }
    .section2 .item{
        margin-right: 0px;
        width: 133px;
    }
    .section1 .img-box{
        /* width: 1000px; */
        height: 700px;
    }
    .section1 .box{top:28%;}
}
@media(max-width:770px){    
    .section2 .right .text-flex{
        margin-top:40px;
    }
    .section2 .item{     
        margin-right: 0px;
    }
    .section1 .img-box{       
        height: 600px;
    }
    .section1 .box{top:15%;}    
    .section1 .box h1{font-size: 56px;}
    .section1 .box button{font-size: 19px; margin-top: 15px;}
   
    .section2 .left .text{
        margin-bottom: 10px;
    }
    .section2 .right .text-flex{
        margin-bottom: 10px;
    }
    .section2 .right img {       
        height: 500px;
    }
    .section3 .com-title{
        left:16px;
    }
}

/* section3 */
.section3 .com-title{
    margin-bottom: 60px;
}
.section3 .com-title .title-a{
    font-size: 18px;
    margin-bottom: 25px;
}
.section3 .com-title .title-b{
    font-size: 60px;
    font-weight: 300;
    margin-bottom: 40px;
}

.section3 .grid{
    /* border:1px solid red; */    
}
.section3 .grid .item{
    text-align: center;
}
.section3 .item img{
    width: 355px;
}
.section3 .item .title{
    margin-top: 10px;
    font-size: 24px;
    font-weight: 300;
}
.section3 .item .price{
    font-size: 20px;
    font-weight: 300;
}
.section3 .item:nth-child(4), .section3 .item:nth-child(5), .section3 .item:nth-child(6){
    margin-top: 45px;
}
.section3 .item:nth-child(7), .section3 .item:nth-child(8), .section3 .item:nth-child(9){
    margin-top: 45px;
}
.section3 .item:nth-child(10), .section3 .item:nth-child(11), .section3 .item:nth-child(12){
    margin-top: 45px;
}
.section3 .item .gr{color:#cccaca; margin-left: 15px;}
.section3 .item .br{color:burlywood; margin-left: 15px;}

@media(max-width:990px){
    .section3 .item{
        margin-top: 10px !important;
    }
}
@media(max-width:770px){
    .section3 .item img{
       width:100%;
    }
    .section2 .left img{
        width:100%; height: 100%;
    }
}

.section3 .box{
    display: flex; justify-content: center;
    align-items: center; flex-direction: column;
}
.section3 .box button{
    margin-top: 60px;
    width: 300px;
    height: 50px;
    background-color: black; color:white;
    font-size: 18px;
}
.section3 .box .tit{
    margin-top: 100px;
    color:gray;
    font-size: 20px;
}
.section3 .box .flex{width: 100%; margin-top: 30px;}
.section3 .box .cat{
    background-color: #fafafa;
    border-radius: 10px;
    height: 170px;
    display: flex; justify-content: center;
    align-items: center; flex-direction: column;
    margin-bottom: 20px;
}
.section3 .box .cat i{
    font-size: 35px;
}
.section3 .box .cat .name{
    font-size: 21px;
}
.section3 .icons img{
    width: 80px;    
    margin-bottom: 11px;
    margin-top: 5px;
}

.banner .img-box-banner{height: 820px; }
.banner img{width: 100%; height: 100%; object-fit: cover; }
.banner .btn{
    background-color: rgb(32, 32, 32); color:white;
    height: 60px; font-size: 20px;
    position: absolute; bottom:0; right:15%;
}
.banner i{padding-left: 160px;}
@media(max-width:1200px){
    .banner .img-box-banner{height: 100%;}
    .key{
        padding-top: 50px !important; padding-bottom: 50px !important;
    }    
}
@media(max-width:1000px){
    .key .left{padding-top: 25% !important;}
} 


.key{
    padding-top: 190px; padding-bottom: 190px;
}
/* key-left part */
.key .right{border-bottom-left-radius: 20%; overflow: hidden;}
.key .tit-ttext{
    position: absolute; bottom: 70px;
    color:white; 
    /* border:1px solid red; */
    width: 100%;
    padding-left: 10%;    
}
.key .right img{width: 100%;}
.key .brand-tit{font-size: 20px; font-weight: 400;}
.key .event-tit{font-size: 30px; font-weight: 500; line-height: 70px;}
.key .desc-tit{font-size: 15px; font-weight: 500;}
.slide-2 .owl-stage{overflow: hidden;}
.slide-2 .owl-dots{
    /* border:1px solid red; */
    position: absolute;
    bottom: -35px;
    left:0;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
}
.slide-2 .owl-dot{
    /* border:1px solid blue; */
    width: 10px;
    height: 10px;
    margin: 5px; 
    border-radius: 50%;
    background-color: rgb(194, 193, 193) !important;
}
.slide-2 .owl-dot.active{
    background-color: rgb(82, 82, 82) !important;
}

/* key-right part */
.key .tit-key{font-size: 35px; font-weight: 400; width: 90%; margin:0 auto;}
.key .row{border-bottom: 1px solid #cccaca; line-height: 45px; width: 90%; margin:0 auto;}
.key .row1{border-bottom: 0px solid #cccaca;}
.key .row .btn{float:right; top: 6px; background-color: transparent; color:rgb(228, 197, 140); cursor: pointer;}
.key .hid-menu{display: flex !important; width: 90%; margin:0 auto;}
.key .key-box{margin-right: 3px; 
    /* width: 100%; height: 177px; */
}
.key .hid-menu img, .hid-menu-none img{width: 100%;  }
.key .p-desc{ width: 100%;
    position: absolute; bottom:0;  display: flex; justify-content: center; align-items: center; color:white; text-align: center; line-height: 18px;
}
.key .hid-menu-none{display: none; width: 100%; height: 177px;}
.key .left{padding-top: 8%;}