/* header */
header{  background-color: rgba(255,255,255,1); }
header .logo img:nth-child(2){ display: none}
header img.p-open-active{ display: block;}
header .menu span{ background-color: #666; }

.panel .sns ul li i{ color: #666; }
.panel{ background-color: rgba(255,255,255,1); }


/* content */
#s-con01{padding-top: 120px;}

#s-con01 .sub-tit{ padding-bottom: 60px;}
#s-con01 .sub-tit .fl:nth-child(1){width: 40%}
#s-con01 .sub-tit .fl:nth-child(2){width: 60%}

#s-con01 .imgwrap{ position: relative; width: 100%; overflow: hidden; padding-bottom: 100px;}
#s-con01 .imgarea{ width: 60%; box-sizing: border-box;  position:relative;  border: 1px solid #bfb7a8; position: relative; left: 20px; top: 20px;}
#s-con01  .imgarea .img{ padding-top: 56.25%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; left: -20px; top: -20px;} 
#s-con01 .deco{ position: relative; width: 40%; height: 400px;  box-sizing: border-box; }

#s-con01 .deco p{ position: absolute; left: 0; bottom: 0;  color: #aaa; line-height: 24px; font-weight: 400; padding-left: 40px;}



#s-con01 .mid-deco{ width: 1695px; position: relative; box-sizing: border-box; overflow: hidden; left: -247.5px;  }
#s-con01 .mid-deco .mid-wrap{ width: 100%; overflow: hidden; }
#s-con01 .mid-deco .mid-wrap li{ padding: 7.5px; box-sizing: border-box; }
#s-con01 .mid-deco .mid-wrap img{ width: 100% }

#s-con01 .mid-deco .decowrap{ padding: 50px 0; max-width: 720px; position: relative; text-align: center; left: 0; right: 0; margin: 70px auto;}
#s-con01 .mid-deco .decowrap img{ position: absolute; }
#s-con01 .mid-deco .decowrap img:first-child{ left: 0; top: 0; }
#s-con01 .mid-deco .decowrap img:last-child{ right: 0; bottom: 0; }
#s-con01 .mid-deco .decowrap p{ color: #aaa; line-height: 30px; }


#s-con01 .mid-deco .mid-bt{ width: 100%;  padding: 0 7.5px; box-sizing: border-box; padding-bottom: 120px;}
#s-con01 .mid-deco .mid-bt .img{ padding-top: 38%; background-repeat: no-repeat; background-position: center; background-size: cover; }

#s-con01 .about-swiper-container{width: 100%; height: auto; overflow: hidden;  position: relative; }
#s-con01 .swiper-wrapper{width: 100%; }

#s-con01 .img{ background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; padding-top: 55.9%; }



#s-con01 .about-pagination{ color: #fff; bottom: 40px}


#s-con01 .about-pagination .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #fff; opacity: 1; }
#s-con01 .about-pagination .swiper-pagination-bullet-active{ opacity: 1; width: 40px; border-radius: 8px; animation: pag .5s ease-in 1; }
@keyframes pag{
    0%{
        transform: scaleX(0);
        border-radius: 100%;
        transform-origin:left;
    }
    100%{
        border-radius: 8px;
        transform: scaleX(1);
    }
}

.about-next, .about-prev{ width: 70px; height: 130px; top: calc(50% - 60px);  background-position: center; background-size: cover; background-repeat: no-repeat; background-color: rgba(38, 38, 38, 0); transition: .3s; }
.about-next:hover, .about-prev:hover{ background-color: rgba(38, 38, 38, 0.4); }
.about-next{ background-image: url(../img/mslider/next_btn.png); right: 30px;}
.about-prev{ background-image: url(../img/mslider/prev_btn.png); left: 30px;}



#s-con02 {padding-bottom: 120px;}
#s-con02 .con02-wrap{ width: 100%; position: relative; overflow: hidden; box-sizing: border-box; left: 0; right: 0; margin: 0 auto;}
#s-con02 .sub-tit{ position: absolute; left: 360px; top: 0; width: 400px; height: 180px; background-color: #fff; border-left: 2px solid #333; color:#333; padding-left: 20px; box-sizing: border-box; }
#s-con02 .sub-tit h4{font-size:50px; height: auto; border-left: none; text-align: left; padding-left: 0; padding-bottom:30px;}

#s-con02 table th{ text-align: left; line-height: 30px; width: 50px;}
#s-con02 .fr{width:1320px; height: 500px; background-color: beige; }
/* ================ 1200px ====================  */
@media (max-width: 1200px) {
    #s-con02 .con02-wrap{ width: 1200px;}
    #s-con02 .sub-tit{ left: 0!important; }
    #s-con02 .fr{width:960px!important;  }
}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
    #s-con01{ padding-top: 10.67vw;}
    
    #s-con01 .sub-tit{ padding-bottom: 8vw;}
    #s-con01 .sub-tit .fl:nth-child(1){width: 100%}
    #s-con01 .sub-tit .fl:nth-child(2){width: 100%}
    #s-con01 .sub-tit p { font-weight: 500;text-align: center; }


    #s-con01 .imgwrap{ padding-bottom: 8vw;}
    
    #s-con01 .imgarea{ width: calc(100% - 2.67vw); box-sizing: border-box;  position:relative;  border: 1px solid #bfb7a8; position: relative; left: 2.67vw; top: 2.67vw; float: none; clear: both;}
    #s-con01  .img{ left: -2.67vw; top: -2.67vw;}
    
    #s-con01 .deco{ position: relative; width: 100%; height: auto; box-sizing: border-box; float: none; clear: both;}
    #s-con01 .deco p{ position: relative; left: 0; bottom: 0;  color: #aaa; line-height: 5.33vw; font-weight: 400; padding-left: 0; padding-top:6.67vw;     text-align: center; }
    
    
    #s-con01 .mid-deco{ width: 100%; padding: 0; left: 0; }
    #s-con01 .mid-deco .decowrap{ padding: 4.67vw 0; position: relative; text-align: center; left: 0; right: 0; margin: 10.67vw 2vw;}
    #s-con01 .mid-deco .decowrap img{ height: 4.67vw; }
    #s-con01 .mid-deco .decowrap p{ line-height: 5.87vw; }
    
    #s-con01 .mid-deco .mid-bt{ padding: 0; padding-bottom: 16vw;}


    #s-con01 .about-swiper-container{width: 100%; height: auto; overflow: visible;  position: relative; padding-bottom: 5vw; }

    #s-con01 .arrow-wrap{ position: absolute; width: 100%; left:auto; bottom: calc(50% - 2.67vw);}
    
    #s-con01  .about-prev, #s-con01 .about-next{ width: 30px; height: 70px; top: calc(50% - 30px);  }
    .about-next{ right: 15px;}
    .about-prev{ left: 15px;}


    #s-con01 .about-pagination{ color: #fff; bottom:0}
    #s-con01 .about-pagination .swiper-pagination-bullet { width: 4px; height: 4px; display: inline-block; border-radius: 100%; background: #6A833B; opacity: 1; }
    #s-con01 .about-pagination .swiper-pagination-bullet-active{ opacity: 1; width: 20px; border-radius: 8px; animation: pag .5s ease-in 1; }




    #s-con02 {padding-bottom: 16vw;}
    #s-con02 .con02-wrap{ width: 100%; position: relative; float: none; overflow: hidden; margin-left: 0; box-sizing: border-box; padding-left: 15px;}
    #s-con02 .sub-tit{ position: relative; left: 0; top: 0; width: 100%; height: auto; background-color: #fff; border-left: none; padding-left: 0; box-sizing: border-box; padding-bottom: 8vw;}
    #s-con02 .sub-tit h4{font-size:40px; height: auto; border-left: none; text-align: left; padding-left: 0; padding-bottom: 8vw;  text-align: center;}

    #s-con02 table{ font-weight: 500;}
    #s-con02 table th{ text-align: left; line-height: 6.4vw; width: 13.33vw;}
    #s-con02 .fr{width:100%; height: 66.67vw; background-color: beige; }
}