/*首页轮播*/ .index_banner{ width: 100%; overflow: hidden; position: relative; } .index_banner .swiper-container{ width: 100%; height: 100%; } .index_banner .swiper-pagination-bullet { width: 12px; height: 12px; display: inline-block; border-radius: 100%; background: none; border: 1px solid #fff; opacity: 1; } .index_banner .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background-color: #fff; } .index_banner .swiper-slide img:last-of-type{ display: none; } .index_banner img{ width: 100%; } @media only screen and (max-width:767px ) { .index_banner .swiper-slide img:last-of-type{ display: inline-block; } .index_banner .swiper-slide img:first-of-type{ display: none; } .index_banner img{ width: 100%; } } @media only screen and (min-width:1200px ) { .index_banner .swiper-pagination-bullets{ bottom: 40px; } } /*首页内容*/ .index_content{ width: 100%; overflow: hidden; } .index_quality{ width: 100%; height: 280px; overflow: hidden; background: url(/uploads/image/idiimages/index_quality_02.jpg) no-repeat; background-position: 50% 0; background-size: 100%; text-align: center; } .index_quality_title{ width: 745px; overflow: hidden; margin: 75px auto 0; font-size: 14px; color: #9d9d9d; } .index_quality_title h1{ font-size: 36px; margin-bottom: 15px; color: #333; } .index_quality_title h1 br{ display: none; } .index_quality_title a{ display: block; width: 150px; line-height: 43px; border: 1px solid #000; margin: 35px auto 0; color: #000; transition: all 0.5s; } .index_quality_title a:hover{ background-color: #c8000f; color: #fff; border-color: #fff; } .index_quality_title h1 span:last-of-type{ margin-left: 30px; } @media only screen and (max-width:767px ) { .index_quality{ width: 100%; height: 190px; } .index_quality_title{ width: 100%; overflow: hidden; margin: 25px auto 0; font-size: 12px; color: #9d9d9d; line-height: 20px; } .index_quality_title h1{ font-size: 24px; margin-bottom: 15px; color: #333; } .index_quality_title h1 span:last-of-type{ margin-left: 0; } .index_quality_title a{ display: block; width: 150px; line-height: 33px; border: 1px solid #000; margin: 15px auto 0; color: #000; } .index_quality_title p{ height: 40px; overflow: hidden; } .index_quality_title h1 br{ display: block; } } /*走进石化*/ .index_about{ width: 100%; height: 660px; background-color: #f3f4f6; } .index_about_title{ width: 635px; overflow: hidden; margin: 50px auto; font-size: 12px; color: #9c9c9c; text-align: center; } .index_about_title h1{ font-size: 40px; margin-bottom: 15px; color: #000; } .index_about .container>ul{ width: 100%; overflow: hidden; } .index_video{ padding-right: 24px; } .video_img{ width: 100%; height: 320px; overflow: hidden; position: relative; cursor: pointer; } .video_img h4{ width: 100%; height: 50px; position: absolute; left: 0; bottom: 0; z-index: 20; background-color: rgba(0,0,0,0.58); color: #fff; text-align: center; line-height: 50px; font-size: 16px; } .video_img>img{ width: 100%; } .video_img .video_mask{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; background-color: rgba(0,0,0,0.42); text-align: center; line-height: 310px; } .index_video_box{ width: 100%; overflow: hidden; margin-top: 12px; } .index_video_box li{ width: 135px; overflow: hidden; float: left; margin-left: 12px; color: #000; line-height: 20px; } .index_video_box li .video_smimg{ width: 100%; position: relative; height: 73px; overflow: hidden; } .video_smimg>img{ width: 100%; } .index_video_box li:first-of-type{ margin-left: 0; } .index_video_box li .video_mask{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; background-color: #000; text-align: center; line-height: 73px; opacity: 0.42; transition: all 0.5s; } .index_video_box li .video_mask img{ width: 35px; } .index_video_box li.video_now .video_mask{ opacity: 1; background-color: transparent; border: 2px solid #c8000f; } .index_video_box li.video_now .video_mask img{ display: none; } .index_video_box li:hover .video_mask{ opacity: 1; background-color: transparent; border: 2px solid #c8000f; } @media only screen and (max-width:767px ) { .index_about_title{ width: 100%; overflow: hidden; margin: 33px auto; font-size: 12px; color: #9c9c9c; text-align: center; } .index_about_title h1{ font-size: 30px; margin-bottom: 15px; color: #000; } .index_about{ width: 100%; height: auto; overflow: hidden; padding-bottom: 40px; background-color: #f3f4f6; } .video_img{ width: 100%; height: 260px; overflow: hidden; position: relative; cursor: pointer; } .video_img .video_mask{ line-height: 260px; } .index_video{ padding-bottom: 20px; padding-right: 0; } .index_video_box li{ width: calc(50% - 6px); overflow: hidden; float: left; margin-left: 12px; color: #000; line-height: 20px; margin-bottom: 10px; } .index_video_box li:nth-of-type(2n 1){ margin-left: 0; } .index_video_box li .video_smimg{ width: 100%; position: relative; /*height:auto;*/ overflow: hidden; } .index_video_box li .video_mask{ line-height: 1; } .index_video_box li .video_mask img{ position: relative; top:50%; margin-top: -17.5px; } } @media only screen and (min-width:768px ) { .index_about{ width: 100%; height: auto; overflow: hidden; padding-bottom: 40px; background-color: #f3f4f6; } .video_img{ width: 100%; height: 400px; overflow: hidden; position: relative; cursor: pointer; } .video_img .video_mask{ line-height: 400px; } .index_video{ padding-bottom: 30px; padding-right: 0; } .index_video_box li{ width: 175px; overflow: hidden; float: left; margin-left: 12px; color: #000; line-height: 20px; } .index_video_box li .video_smimg{ width: 100%; position: relative; height:95px; overflow: hidden; } .index_video_box li .video_mask{ line-height: 95px; } } @media only screen and (min-width:992px ) { .index_video_box li{ width: 112px; overflow: hidden; float: left; margin-left: 12px; color: #000; line-height: 20px; } .video_img{ width: 100%; height: 320px; overflow: hidden; position: relative; cursor: pointer; } .video_img .video_mask{ line-height: 310px; } .index_video{ padding: 0px; } .index_video_box li .video_mask{ line-height: 61px; } .index_video_box li .video_mask img{ width: 25px; } .index_video_box li .video_smimg{ width: 100%; position: relative; height: 61px; overflow: hidden; } .index_about{ width: 100%; height: 660px; background-color: #f3f4f6; padding: 0; } } @media only screen and (min-width:1200px ) { .index_video_box li{ width: 135px; overflow: hidden; float: left; margin-left: 12px; color: #000; line-height: 20px; } .index_video_box li .video_mask{ line-height: 73px; } .index_video{ padding-right: 24px; } .index_video_box li .video_mask img{ width: 35px; } .index_video_box li .video_smimg{ width: 100%; position: relative; height: 73px; overflow: hidden; } } /*首页新闻*/ .index_about .container>ul>li:last-of-type{ padding-left: 11px; overflow: hidden; } .index_news{ width: 100%; height: 413px; overflow: hidden; } .index_news a{ display: block; width: 100%; height: 365px; overflow: hidden; background-color: #fff; } .news_img{ width: 100%; overflow: hidden; } .news_img img{ width: 100%; transition: all 0.5s; } .news_text{ width: 100%; overflow: hidden; padding: 15px; color: #9d9d9d; font-size: 12px; line-height: 18px; } .news_text h4{ font-size: 14px; font-weight: bold; color: #000; line-height: 18px; } .index_news a:hover img{ transform: scale(1.1); } .index_news a:hover h4{ color: #c8000f; } .news_text .news_time{ width: 100%; line-height: 40px; border-bottom: 1px solid #e5e5e5; margin-bottom: 10px; } .swiper-button-next.swiper-button-disabled { background-image: ; opacity: 1; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-disabled { background-image: ; opacity: 1; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: ; left: auto; bottom: 0px; right: 45px; width: 35px; height: 25px; margin-top: 0; top: auto; background-size: 15px 15px; border: 1px solid #9facbc; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: ; right: 0px; margin-top: 0; top: auto; bottom: 0px; left: auto; width: 35px; height: 25px; background-size: 15px 15px; border: 1px solid #9facbc; } @media only screen and (max-width:767px ) { .index_about .container>ul>li:last-of-type{ padding-left:0px; } .index_news{ height: auto; padding-bottom: 40px; } .index_news a{ height: auto; padding-bottom: 5px; } } @media only screen and (min-width:768px ) { .index_about .container>ul>li:last-of-type{ padding-left:0px; } .index_news{ height: 450px; } .index_news a{ height: 420px; } } @media only screen and (min-width:992px ) { .index_about .container>ul>li:last-of-type{ padding-left:11px; } .index_news{ height: 423px; } .index_news a{ height: 385px; } } /*首页产品系列*/ .index_product{ width: 100%; height: 640px; overflow: hidden; position: relative; } .product_bg{ width: 100%; height: 390px; background: url(/uploads/image/idimg/index_product.jpg) no-repeat top center; background-size: 100%; position: absolute; top:0; left: 0; z-index: 10; } .index_product .container{ position: relative; z-index: 11; } .productimg_lg{ overflow: hidden; } .productimg_lg a{ display: block; width: 100%; height: 640px; line-height: 640px; display: none; } .productimg_lg a img{ width: 100%; position: relative; left:0; } .product_box{ color: #fff; height: 640px; padding:80px 0 0 35px; font-size: 14px; line-height: 25px; position: relative; } .product_box h1{ font-size: 36px; font-weight: bold; margin-bottom: 15px; } .productimg_text{ width: 100%; overflow: hidden; } .productimg_text li{ width: 100%; overflow: hidden; display: none; } .productimg_text li:first-of-type{ display: block; } .productimg_text a{ display: block; width: 150px; height: 45px; border: 1px solid #fff; line-height: 43px; text-align: center; color: #fff; margin-top: 40px; transition: all 0.5s; } .productimg_text li a:hover { background-color: #c8000f; border-color:#c8000f ; } .product_nav{ width: 100%; position: absolute; left: 0; bottom: 43px; padding-left: 35px; } .product_nav li{ width: 117px; height: 125px; line-height: 121px; border: 2px solid #e6e6e6; text-align: center; float: left; margin-right: 12.6px; position: relative; transition: line-height 0.5s; } .product_nav li.product_now{ height: 142px; line-height: 138px; border: 2px solid #c8000f; top: -17px; } .product_nav li span{ display: block; padding:0 5px; font-size: 20px; width: 32px; height: 20px; line-height: 20px; background-color: #fff; color: #c8000f; position: absolute; bottom: -10px; left: 50%; margin-left: -16px; display: none; font-family: "arial, helvetica, sans-serif"; } .product_nav li.product_now span{ display: block; } .product_nav li:last-of-type{ margin-right: 0; font-size: 80px; font-weight: 100; font-family: "arial, helvetica, sans-serif"; color: #bbb; } .product_nav img{ width: 90px; } .product_sm{ width: 100%; overflow: hidden; padding: 45px 0 25px; display: none; } .product_title{ width: 100%; overflow: hidden; color: #999; line-height: 20px; margin-bottom: 30px; } .product_title h1{ font-size: 30px; text-align: center; color: #b72024; font-weight: bold; margin-bottom: 15px; } .product_smbox{ width: 100%; overflow: hidden; } .product_smbox a{ display: block; width: -moz-calc(50% - 5px); width: -webkit-calc(50% - 5px); width: calc(50% - 5px); height: 240px; overflow: hidden; float: left; background-color: #f3f4f6; padding: 30px 15px 20px; margin: 0 10px 10px 0; } .product_smbox a:nth-of-type(2n){ margin: 0 0px 10px; } .product_smbox a h4{ font-size: 14px; text-align: center; } .valve_sm{ width: 100%; overflow: hidden; margin-bottom: 20px; } .valve_sm img{ width: 100%; } .valve_smmore{ width: 70px; height: 70px; border-radius: 50%; background-color: #c8000f; text-align: center; line-height: 70px; margin: 50px auto 0; } .valve_smmore img{ margin-top: -5px; } @media only screen and (max-width:767px ) { .index_product{ height: auto; } .product_bg{ display: none; } .productimg_lg{ display: none; } .product_box{ display: none; } .product_sm{ display: block; } } @media only screen and (min-width:768px ) { .product_nav li{ width: 106px; margin-right: 10px; } .product_nav li:nth-of-type(4){ display: none; } .product_nav li:nth-of-type(5){ display: none; } } @media only screen and (min-width:992px ) { .product_nav li{ width: 114px; margin-right: 10px; } .product_nav li:nth-of-type(4){ display: block; } } @media only screen and (min-width:1200px) { .product_nav li{ width: 117px; margin-right: 12.6px; } .product_nav li:nth-of-type(5){ display: block; } } /*底部证书*/ .index_certificate{ width:100%; height: 160px; overflow: hidden; background-color: #f3f4f6; padding-top: 27px; } .index_certificate ul{ width: 100%; overflow: hidden; text-align: center; } /*.index_certificate ul li{ width: 14% !important; }*/ .index_certificate img{ width: 70px; margin-bottom: 10px; } @media only screen and (max-width:767px ) { .index_certificate{ display: none; } } @media only screen and (min-width:768px ) { .index_certificate ul li{ transform: scale(0.85); opacity: 0; } } @media only screen and (min-width:992px ) { .index_certificate ul li{ transform: scale(1); } }