@charset "utf-8";
/* CSS Document */

ul.nav li{ margin:0 0.7em;}

@media only screen and (max-width:1440px){

ul.nav li{ margin:0;}
ul.nav li a{ margin:0 0.8em;}

}

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

.main ul.yyList li a{ background:#0489BB;}
.main ul.yyList li a p{ padding:6em 1.2em 2em; background-image:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.8));}
.main ul.yyList li a:hover p{ transform:translateY(0);}
.main ul.yyList li a:hover p span,
.main ul.yyList li a:hover p font{ transform:translateY(-16px);}

.box4 .yingyong .swiper-slide a{ background:#0489BB;}
.box4 .yingyong .swiper-slide a p{ padding:6em 1.2em 2em; background-image:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.8));}
.box4 .yingyong .swiper-slide a:hover p{ transform:translateY(0);}
.box4 .yingyong .swiper-slide a:hover p span,
.box4 .yingyong .swiper-slide a:hover p font{ transform:translateY(-16px);}

}


@media only screen and (max-width:768px){

ul.nav li:nth-child(9){ transition-delay:0.7s;}
ul.nav li:nth-child(10){ transition-delay:0.8s;}
ul.nav li:nth-child(11){ transition-delay:0.9s;}
ul.nav li:nth-child(12){ transition-delay:1.0s;}

.main ul.yyList li a{ background:#0489BB;}
.main ul.yyList li a p{ padding:5em 1em 1em; background-image:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.8));}
.main ul.yyList li a p span{ -webkit-line-clamp:1;}
.main ul.yyList li a p font{ display:none;}
.main ul.yyList li a:hover p{ transform:translateY(0);}

.box4 .yingyong .swiper-slide a{ background:#0489BB;}
.box4 .yingyong .swiper-slide a p{ padding:8em 1.2em 2.25em; background-image:linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.8));}
.box4 .yingyong .swiper-slide a p span{ -webkit-line-clamp:1;}
.box4 .yingyong .swiper-slide a p font{ display/:none; margin-top:1.25em;}
.box4 .yingyong .swiper-slide a:hover p{ transform:translateY(0);}

}