/*body html*/ .inx{ height:100%; position:relative;} /*ban*/ .inx_pc_ban{ width:100%; height:670px;} .inx_mob_ban{ display: none;} /*swiper*/ .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox;display: -webkit-flex; display: flex; -webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inx .swiper-slide img{ display:block; height:100%; width:100%;} .swiper-button-next, .swiper-button-prev {background: none; font-size:22px; font-weight:bold; font-family:fantasy; right:2.6%; left:auto; color:#FFFFFF; width:44px; text-align:center; height:auto; line-height:24px;} .swiper-button-prev{ margin-top:-82px;} .swiper-pagination.swiper-pagination-fraction, .swiper-pagination.swiper-pagination-fraction span{ color:#FFFFFF; font-size:14px; } .swiper-pagination.swiper-pagination-fraction{ width:44px; left:auto; right:2.6%; top:50%; margin-top:-42px; bottom:auto;} /*mob_ban*/ .inx_mob_ban .swiper-button-next, .inx_mob_ban .swiper-button-prev {background: none; font-size:22px; font-weight:bold; font-family:fantasy; right:2.8%; left:auto; color:#FFFFFF; width:auto; text-align:center; height:auto; line-height:1;bottom: 16px;top: auto;} .inx_mob_ban .swiper-button-prev{ margin-top:0; margin-right:89px;} .inx_mob_ban .swiper-pagination.swiper-pagination-fraction{ top:auto;bottom:15px; font-size:24px; width: auto; line-height:1; right:2.8%; margin-right:28px;} .inx_mob_ban .swiper-pagination.swiper-pagination-fraction span{ font-size:24px;} /*line*/ .line img{ display:block; width:100%;} /*inx_pro*/ .inx_pro .col{ } .inx_pro .col li{ height:226px; width:25%; float:left;position:relative;} .inx_pro .col li a:before{ content:''; width:100%; height:0; display:block; position:absolute; top:0; left:0; background: rgba(0,0,0,0.41); z-index:2;} .inx_pro .col li a span{ position:absolute; right:30px; bottom:25px; color:#FFFFFF; font-size:20px;} .inx_pro .col li a img{ display:block; margin:0 auto; width:100%; height:100%;} /*hover效果*/ @media (min-width:721px){ .inx_pro .col li a:hover:before{height:100%;} } @media only screen and (max-width:720px){ body{ background: #242424;} /*ban*/ .inx_pc_ban{ display:none;} .inx_mob_ban{ display:block;} .inx_mob_ban .swiper-pagination.swiper-pagination-fraction, .inx_mob_ban .swiper-pagination.swiper-pagination-fraction span{ font-size:16px;} .inx_mob_ban .swiper-button-next, .inx_mob_ban .swiper-button-prev{ font-size:16px; display:none;} /*inx_pro*/ .inx_pro{padding:15px 2.8%;} .inx_pro .col li{ height:34.4vw; width:50%; float:left;position:relative;} .inx_pro .col li a span{ position:absolute; right:auto; left:50%; transform:translateX(-50%); bottom:3.47vw; color:#FFFFFF; font-size:3.9vw;} }