/*_pc*/
@media all and (min-width:1201px) {	 
    
    .tit-slogan.btn{display:flex;justify-content:space-between;align-items:flex-end;}
    .tit-slogan.w{color:#fff}
    .tit-slogan .tit{font-size:48px;font-weight:600}
    .tit-slogan .desc{margin-top:10px}
    
    .btn-more a{display:flex;align-items:center;position:relative;height:46px;border:1px solid var(--main-color);border-radius:46px;padding:0 20px;font-size:14px;color:var(--main-color);overflow:hidden;transition:0.3s}      
    .btn-more a:before{content:'';display:block;width:9px;height:9px;border:1px solid var(--main-color);background:#fff;border-radius:50%;margin-right:15px}
    .btn-more a:after{content:'';display:block;position:absolute;z-index:-1;left:0;width:0%;top:0;height:100%;background:var(--main-color);color:#fff;transition:0.3s}
    .btn-more a:hover{color:#fff}
    .btn-more a:hover:after{width:100%}
    .btn-more a:not(:hover):after{width:0;left:auto;right:0}

    
    

    .msec1{}
    .msec1 .swiper-container{position:relative;overflow:hidden;border-radius:20px}
    .msec1 .swiper-slide{position:relative;overflow:hidden}
    .msec1 .swiper-slide .bg{transform:scale(1.2);height:770px;transition:5s}
    .msec1 .swiper-slide-active .bg{transform: scale(1);;transition:1s}
    .msec1 .swiper-slide .slogan{position:absolute;z-index:10;bottom:0;left:0;;width:100%;line-height:1.1;padding:90px 85px}
    .msec1 .swiper-slide .slogan > div{position:relative;top:20px;opacity:0}
    .msec1 .swiper-slide .slogan .text1{font-size:70px;font-weight:900;color:#fff;transition:0.5s 1.0s}
    .msec1 .swiper-slide .slogan .text2{font-size:24px;margin-top:20px;color:#fff;transition:0.5s 1.5s}
    .msec1 .swiper-slide-active .slogan .text1{top:0;opacity:1}
    .msec1 .swiper-slide-active .slogan .text2{top:0;opacity:1}
    .msec1 .swiper-pagination{left:85px;bottom:320px;text-align:left}
    .msec1 .swiper-pagination .swiper-pagination-bullet{position:relative;width:30px;height:5px;opacity:1;overflow:hidden;background:rgba(255,255,255,0.5)}
    .msec1 .swiper-pagination .swiper-pagination-bullet:after{content:'';position:absolute;left:0;width:0px;top:0;height:100%;background:#fff;border-radius:5px;transition:width 0s linear}
    .msec1 .swiper-pagination .swiper-pagination-bullet-active{width:60px}
    .msec1 .swiper-pagination .swiper-pagination-bullet-active.on:after{width:100%;transition:width 6s linear}
    

    

    .msec2{margin:150px 0}
    .msec2 .listG{display:flex;gap:50px;margin:80px 0}
    .msec2 .listG li{flex:1;text-align:center;border-left:1px solid #ddd}
    .msec2 .listG li:first-child{border:none}
    .msec2 .listG .picto{height:240px}
    .msec2 .listG .tit{font-size:32px;margin:30px 0;font-weight:600}
    .msec2 .listG .desc{}
    
    
   
    .msec3{background:url('../images/ms3_bg.jpg') no-repeat center /cover;padding:130px 0 260px} 
    .msec3 .container{display:flex;justify-content:space-between;align-items:flex-start}
    .msec3 .tit_area{position:sticky;top:120px;width:33%;color:#fff}
    .msec3 .tit_area .tit{font-size:32px}
    .msec3 .cont_area{flex:1;color:#fff}
    .msec3 .cont_area .listG{display:flex;flex-wrap:wrap;gap:0 13.5%;margin:100px 0 0}
    .msec3 .cont_area .list:nth-child(2n){margin-top:300px}
    .msec3 .cont_area .list{width: calc((100% - 13.5%) / 2);max-width:500px}
    .msec3 .cont_area .list .thumb{}
    .msec3 .cont_area .list .thumb a{display:block;overflow:hidden}
    .msec3 .cont_area .list .thumb a img{transform:scale(1);transition:0.3s}
    .msec3 .cont_area .list .thumb a:hover img{transform:scale(1.1)}
    .msec3 .cont_area .infoG{position:relative;margin:30px 0}
    .msec3 .cont_area .infoG .tit{font-size:36px;font-weight:600;text-transform: uppercase;margin:10px 0}
    .msec3 .cont_area .infoG .desc{}
    .msec3 .cont_area .infoG .more{position:absolute;display:inline-block;margin-top:50px;width:63px;height:63px;background:url('../images/ico_cplus.png') no-repeat center rgba(255,255,255,0.2);border-radius:50%;transition:0s}
    .msec3 .cont_area .infoG .more:hover{background-color:rgba(255,255,255,0.5);transform:rotate(180deg);transition:0.3s}
    
    
    .msec4{margin:100px 0}
    .msec4 .tit-slogan{margin:20px 0}
    .msec4 .listG{border-top:2px solid #000;margin:50px 0}
    .msec4 .list a{display:flex;position:relative;align-items:center;gap:50px;padding:25px 25px;border-bottom:2px solid #bcbcbc;transition:0.3s}
    .msec4 .list a:after{content:'';position:absolute;left:0;width:0%;bottom:-2px;height:2px;background:var(--main-color);transition:1s}
    .msec4 .list a:hover{padding:50px 25px}
    .msec4 .list a:hover:after{width:100%}
    .msec4 .list a:hover .dateG .box{width:136px;height:136px;background:var(--main-color);transform:scale(1)}
    .msec4 .list a:hover .infoG .subject{color:#555;margin-top:-50px}
    .msec4 .list a:hover .infoG .cont{height:auto;opacity:1;margin-top:20px;transition:0.3s 0.3s}
    .msec4 .list a:hover .thumbG{opacity:1;transform:rotate(0deg);}
    
    .msec4 .list a .dateG{display:flex;justify-content: center; width:136px}
    .msec4 .list a .dateG .box{display:flex;flex-direction:column;justify-content:center;align-items:center;width:136px;height:136px;border-radius:50%;background:#d9d9d9;color:#fff;transform:scale(0.7); transition:0.3s}
    .msec4 .list a .dateG .box .year{font-size:22px}
    .msec4 .list a .dateG .box .date{font-size:36px}
    .msec4 .list a .infoG{position:relative;width:50%}
    .msec4 .list a .infoG .subject{font-size:20px;color:#777;font-weight:600;transition:0.3s 0.2s}
    .msec4 .list a .infoG .cont{position:absolute;font-size:16px;color:#777;opacity:0;transition:0.3s}
    .msec4 .list a .thumbG{position:absolute;right:25px;opacity:0;transform:rotate(5deg);transition:0.3s}
    .msec4 .list a .thumbG img{width:233px;height:173px;object-fit:cover;border-radius:10px;overflow:hidden;}
    
    
    .msec5 .box_con{margin:150px 0;background:url('../images/ms5_bg.jpg') no-repeat center /cover;border-radius:20px;padding:150px 0;}
    .msec5 .listG{display:flex;justify-content:center;gap:20px;margin-top:80px}
    .msec5 .listG .list{width:600px;}
    .msec5 .listG .list a{display:flex;align-items:center;color:#fff;background:rgba(255,255,255,0.03);border-radius:10px;transition:0.3s}
    .msec5 .listG .list a .picto{width:134px;height:120px}
    .msec5 .listG .list.s1 a .picto{background:url('../images/ms5_picto1.png') no-repeat center}
    .msec5 .listG .list.s2 a .picto{background:url('../images/ms5_picto2.png') no-repeat center}
    .msec5 .listG .list a .infoG{flex:1}
    .msec5 .listG .list a .infoG .tit{display:block;font-size:24px;font-weight:600}
    .msec5 .listG .list a .infoG .desc{display:block;margin-top:5px}
    .msec5 .listG .list a .more{width:66px;height:66px;background:url('../images/ico_arrow.png') no-repeat center rgba(255,255,255,0.1);border-radius:50%;;transform:rotate(-45deg);margin-right:40px;transition:0.3s}
    .msec5 .listG .list a:hover {background:rgba(255,255,255,0.2)}
    .msec5 .listG .list a:hover .more{background:rgba(255,255,255,0.2);background:url('../images/ico_arrow_b.png') no-repeat center #fff;box-shadow:0 0 7px #66a9ff; transform:rotate(0deg)}
    
}

    

/*_mobile*/
@media all and (max-width:1200px) {


    .tit-slogan.btn{}
    .tit-slogan.w{color:#fff}
    .tit-slogan .tit{font-size:24px;font-weight:600}
    .tit-slogan .desc{margin-top:10px}
    .tit-slogan .btn-more{margin-top:20px}
    
    .btn-more{display:inline-block}
    .btn-more a{display:flex;align-items:center;position:relative;height:38px;border:1px solid var(--main-color);border-radius:36px;padding:0 16px;font-size:12px;color:var(--main-color);overflow:hidden;transition:0.3s}      
    .btn-more a:before{content:'';display:inline-block;width:7px;height:7px;border:1px solid var(--main-color);background:#fff;border-radius:50%;margin-right:10px}
    .btn-more a:after{content:'';position:absolute;z-index:-1;left:0;width:0%;top:0;height:100%;background:var(--main-color);color:#fff;transition:0.3s}
    .btn-more a:hover{color:#fff}
    .btn-more a:hover:after{width:100%}
    .btn-more a:not(:hover):after{width:0;left:auto;right:0}

    
    

    .msec1{}
    .msec1 .swiper-container{position:relative;overflow:hidden;border-radius:10px;}
    .msec1 .swiper-slide{position:relative;overflow:hidden;}
    .msec1 .swiper-slide .bg{transform:scale(1.2);transition:5s}
    .msec1 .swiper-slide-active .bg{height:calc(100vh - 100px);transform: scale(1);;transition:1s}
    .msec1 .swiper-slide .slogan{position:absolute;z-index:10;bottom:0;left:0;;width:100%;line-height:1.1;padding:40px 30px}
    .msec1 .swiper-slide .slogan > div{position:relative;top:20px;opacity:0}
    .msec1 .swiper-slide .slogan .text1{font-size:26px;font-weight:900;color:#fff;transition:0.5s 1.0s}
    .msec1 .swiper-slide .slogan .text2{font-size:14px;margin-top:20px;color:#fff;transition:0.5s 1.5s}
    .msec1 .swiper-slide-active .slogan .text1{top:0;opacity:1}
    .msec1 .swiper-slide-active .slogan .text2{top:0;opacity:1}
    .msec1 .swiper-pagination{left:30px;bottom:200px;text-align:left}
    .msec1 .swiper-pagination .swiper-pagination-bullet{position:relative;width:20px;height:4px;opacity:1;overflow:hidden;background:rgba(255,255,255,0.5)}
    .msec1 .swiper-pagination .swiper-pagination-bullet:after{content:'';position:absolute;left:0;width:0px;top:0;height:100%;background:#fff;border-radius:5px;transition:width 0s linear}
    .msec1 .swiper-pagination .swiper-pagination-bullet-active{width:40px}
    .msec1 .swiper-pagination .swiper-pagination-bullet-active.on:after{width:100%;transition:width 6s linear}
    

    

    .msec2{margin:70px 0}
    .msec2 .listG{margin:40px 0}
    .msec2 .listG li{display:flex;;align-items:center;padding:30px 0;border-bottom:1px solid #ddd}
    .msec2 .listG .picto{width:30%;padding:0 10px}
    .msec2 .listG .infoG{width:70%;padding-left:40px}
    .msec2 .listG .tit{font-size:22px;font-weight:600}
    .msec2 .listG .desc{margin:10px 0 0;}
    
    
   
    .msec3{background:url('../images/ms3_bg.jpg') no-repeat center /cover;padding:60px 0} 
    .msec3 .container{}
    .msec3 .tit_area{color:#fff;margin-bottom:20px}
    .msec3 .tit_area .tit{font-size:18px}
    .msec3 .cont_area{flex:1;color:#fff}
    .msec3 .cont_area .listG{display:flex;flex-wrap:wrap;gap:0 13.5%;margin:40px 0 0}
    .msec3 .cont_area .list{;max-width:500px;padding:0 40px;margin:30px auto}
    .msec3 .cont_area .list .thumb{}
    .msec3 .cont_area .list .thumb a{display:block;overflow:hidden}
    .msec3 .cont_area .list .thumb a img{transform:scale(1);transition:0.3s}
    .msec3 .cont_area .list .thumb a:hover img{transform:scale(1.1)}
    .msec3 .cont_area .infoG{display:flex;flex-wrap:wrap;gap:10px 40px;position:relative;margin:20px 0}
    .msec3 .cont_area .infoG .tit{width:100%;font-size:22px;font-weight:600;text-transform: uppercase}
    .msec3 .cont_area .infoG .desc{flex:1;}
    .msec3 .cont_area .infoG .more{width:40px;display:inline-block;;width:40px;height:40px;background:url('../images/ico_cplus.png') no-repeat center /20px rgba(255,255,255,0.2);border-radius:50%;transition:0s}
    .msec3 .cont_area .infoG .more:hover{background-color:rgba(255,255,255,0.5);transform:rotate(180deg);transition:0.3s}
    
    
    .msec4{margin:50px 0}
    .msec4 .tit-slogan{margin:20px 0}
    .msec4 .listG{border-top:2px solid #000;margin:50px 0}
    .msec4 .list a{display:flex;position:relative;flex-wrap:wrap;align-items:center;gap:10px 30px;padding:25px 0;border-bottom:2px solid #ddd;}
    .msec4 .list a .dateG{display:flex;justify-content: center; width:80px}
    .msec4 .list a .dateG .box{display:flex;flex-direction:column;justify-content:center;align-items:center;width:80px;height:80px;border-radius:50%;background:#d9d9d9;color:#fff;}
    .msec4 .list a .dateG .box .year{font-size:14px}
    .msec4 .list a .dateG .box .date{font-size:18px}
    .msec4 .list a .infoG{flex:1;position:relative;}
    .msec4 .list a .infoG .subject{font-size:16px;color:#000;font-weight:600;}
    .msec4 .list a .infoG .cont{font-size:12px;color:#777;margin:10px 0;}
    .msec4 .list a .thumbG{width:100%;padding-left:110px}
    .msec4 .list a .thumbG img{width:233px;height:173px;object-fit:cover;border-radius:5px;overflow:hidden;}
    
    
    .msec5 .box_con{margin:50px 0;background:url('../images/ms5_bg.jpg') no-repeat center /cover;border-radius:10px;padding:80px 30px}
    .msec5 .listG{margin-top:50px;}
    .msec5 .listG .list{margin:10px 0}
    .msec5 .listG .list a{display:flex;align-items:center;color:#fff;background:rgba(255,255,255,0.2);border-radius:10px;transition:0.3s}
    .msec5 .listG .list a .picto{width:90px;height:90px}
    .msec5 .listG .list.s1 a .picto{background:url('../images/ms5_picto1.png') no-repeat center /40px}
    .msec5 .listG .list.s2 a .picto{background:url('../images/ms5_picto2.png') no-repeat center /40px}
    .msec5 .listG .list a .infoG{flex:1}
    .msec5 .listG .list a .infoG .tit{display:block;font-size:16px;font-weight:600}
    .msec5 .listG .list a .infoG .desc{display:block;margin-top:5px;font-size:12px}
    .msec5 .listG .list a .more{width:40px;height:40px;background:url('../images/ico_arrow.png') no-repeat center /20px rgba(255,255,255,0.1) ;border-radius:50%;;margin-right:20px}


}