/*pc*/
@media all and (min-width:1024px) {	 
    .msec1{}
    .msec1 .swiper-slide{height:810px}
    .msec1 .slogan{position:absolute;z-index:10;width:1050px;left:50%;top:48%;transform:translate(-50%,-50% );text-align:center;color:#fff}
    .msec1 .slogan .text{display:inline-block}
    .msec1 .slogan .text span{position:relative;font-size:50px;font-weight:500;top:10px;opacity:0;transition:0.5s 0.5s; text-shadow:2px 2px 3px #292929;}
    .msec1 .slogan .text:after{display:inline-block;position:relative;content:'';height:1px;width:1%;border-top:1px solid #fff;margin:15px 0;transition:0.5s}
    .msec1 .slogan .text2{position:relative;font-size:22px;top:-10px;opacity:0;transition:0.5s 1s}
    .msec1 .slogan .text,
    .msec1 .slogan .text2{text-shadow:2px 2px 2px #292929;}
    .msec1 .slogan ul{position:relative;margin-top:120px;margin-left:-4.33%;top:-10px;opacity:0;transition:0.5s 1.5s}
    .msec1 .slogan ul li{float:left;width:29%;margin-left:4.33%;}
    .msec1 .slogan ul li a{display:block;padding:25px 20px;min-height:300px;background:rgba(0,0,0,0.3);border:1px solid #fff;}
    .msec1 .slogan ul li a:hover{background:#0d4a9a;border:1px solid #0d4a9a}
    .msec1 .slogan ul li span{display:block;color:#fff;line-height:1.2}
    .msec1 .slogan ul li .tit{font-size:26px;min-height:75px}
    .msec1 .slogan ul li .pictogram{display:inline-block;width:100px;height:100px;margin:10px 0}
    .msec1 .slogan ul li .desc{font-size:18px}
    .msec1 .slogan ul li:nth-child(1) .pictogram{background:url(../images/ms1_pictogram1.png) no-repeat center}
    .msec1 .slogan ul li:nth-child(2) .pictogram{background:url(../images/ms1_pictogram2.png) no-repeat center}
    .msec1 .slogan ul li:nth-child(3) .pictogram{background:url(../images/ms1_pictogram3.png) no-repeat center}

    .msec1 .slogan.on .text span{top:0;opacity:1}
    .msec1 .slogan.on .text:after{width:100%}
    .msec1 .slogan.on .text2{top:0;opacity:1}
    .msec1 .slogan.on ul{top:0;opacity:1}

}

    

/*mobile*/
@media all and (max-width:1023px) {
    .msec1{}
    .msec1 .swiper-slide{height:calc(100vh - 60px)}
    .msec1 .slogan{position:absolute;z-index:10;width:90%;left:50%;top:48%;transform:translate(-50%,-50% );text-align:center;color:#fff}
    .msec1 .slogan .text{display:inline-block}
    .msec1 .slogan .text span{position:relative;font-size:24px;font-weight:500;top:10px;opacity:0;transition:0.5s 0.5s;text-shadow:2px 2px 3px #292929;}
    .msec1 .slogan .text:after{display:inline-block;position:relative;content:'';height:1px;width:1%;border-top:1px solid #fff;margin:15px 0;transition:0.5s}
    .msec1 .slogan .text2{position:relative;font-size:14px;top:-10px;opacity:0;transition:0.5s 1s}
    .msec1 .slogan .text,
    .msec1 .slogan .text2{text-shadow:2px 2px 2px #292929;}
    .msec1 .slogan ul{position:relative;width:80%;margin:0 auto;margin-top:40px;top:-10px;opacity:0;transition:0.5s 1.5s}
    .msec1 .slogan ul li{text-align:left;margin:5px 0}
    .msec1 .slogan ul li a{display:block;min-height:70px;position:relative;padding:15px 0 15px 70px;background:rgba(0,0,0,0.3);border:1px solid #fff;}
    .msec1 .slogan ul li a:hover{background:#0d4a9a;border:1px solid #0d4a9a}
    .msec1 .slogan ul li span{display:block;color:#fff;line-height:1.2}
    .msec1 .slogan ul li .tit{font-size:16px}
    .msec1 .slogan ul li .pictogram{position:absolute;left:10px;top:0;width:50px;height:50px;margin:10px 0}
    .msec1 .slogan ul li .desc{font-size:12px;margin-top:5px}
    .msec1 .slogan ul li:nth-child(1) .pictogram{background:url(../images/ms1_pictogram1.png) no-repeat center /cover}
    .msec1 .slogan ul li:nth-child(2) .pictogram{background:url(../images/ms1_pictogram2.png) no-repeat center /cover}
    .msec1 .slogan ul li:nth-child(3) .pictogram{background:url(../images/ms1_pictogram3.png) no-repeat center /cover}

    .msec1 .slogan.on .text span{top:0;opacity:1}
    .msec1 .slogan.on .text:after{width:100%}
    .msec1 .slogan.on .text2{top:0;opacity:1}
    .msec1 .slogan.on ul{top:0;opacity:1}


}