/* 头部 */ .header{ height: 85px; background-color: #FFFFFF; box-shadow: 0 0 8px rgba(28,72,157,.1); position: fixed; left: 0; top: 0; z-index: 999; } .head{ display: flex; align-items: center; } /* logo */ .logo{ display: flex; align-items: center; width: 190px; height: 85px; } .logo img{ height: 60px; } .logo>ins{ font-family: 'SourceHanSansSC-Medium'; color: #1d2088; margin-left: 10px; } .logo span{ display: block; font-size: 28px; line-height: 1.5; } .logo em{ display: block; font-size: 13px; line-height: 1.5; } /* 导航 */ .nav{ display: flex; justify-content: flex-end; align-items: center; width: calc(100% - 405px); padding: 0 4px; } .nav>a{ margin: 0 25px; font-size: 17px; line-height: 5; transition: all .6s; } .nav>a.active{ color: #1c489d; font-weight: bold; transition: all .6s; } .nav>a:hover{ color: #1c489d; transition: all .6s; } /* 搜索 */ .search{ display: flex; align-items: center; width: 215px; height: 38px; border: 1px solid #c2d2e5; border-radius: 19px; } .search>input{ width: calc(100% - 47px); border: 0; background: none; padding: 0 14px; font-size: 14px; line-height: 36px; opacity: .8; } .search>span{ display: flex; justify-content: center; align-items: center; width: 47px; height: 37px; background-color: #1c489d; border-radius: 18px; } .search>span img{ width: 19px; } /* 手机端导航按钮 */ .head .head-btn{ display: none; width: 20px; float: right; position: relative; cursor: pointer; margin-top: 5px; z-index: 999;} .head .head-btn i{ display: block; width: 100%; height: 2px; float: left; background-color: #0094da; border-radius: 50px; transition: all .5s ease 0s; -webkit-transition: all .5s ease 0s; -moz-transition: all .5s ease 0s; } .head .head-btn i.bar-top{ margin-top: 0;} .head .head-btn i.bar-cen{ margin-top: 5px;} .head .head-btn i.bar-bom{ margin-top: 5px;} .head .head-btn.cur i{background-color: #0094da;} .head .head-btn.cur i.bar-cen{ opacity: 0;} .head .head-btn.cur i.bar-top{ -webkit-transform:rotate(45deg) translate(5px, 5px);transform:rotate(45deg) translate(5px, 5px);} .head .head-btn.cur i.bar-bom{ -webkit-transform: rotate(-45deg) translate(5px, -5px);transform: rotate(-45deg) translate(5px, -5px);} /* 轮播样式 */ .banner-swiper { height: 760px; position: relative; background-color: #FFFFFF; margin-top: 80px; overflow: hidden; } .banner-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } .banner-title{ position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%,-50%); } .banner-title>span{ display: block; font-family: 'sourcehansansSC-Bold'; font-size: 32px; color: #1c489d; line-height: 1.5; } .banner-title>span em{ font-family: 'SourceHanSansSC-Heavy'; font-size: 68px; line-height: 1.4; margin-right: 15px; color: #00a0e9; } .banner-title>ins{ display: block; font-family: 'SourceHanSansSC-Heavy'; font-size: 42px; line-height: 1.5; color: #1c489d; } /* 分页器 */ .banner-swiper>.swiper-pagination-bullets{ bottom: 14px; } .banner-swiper .swiper-pagination-bullet { width: 31px; height: 3px; background-color: #1c489d; border-radius: 0; margin: 0 5px; opacity: 1; } .banner-swiper .swiper-pagination-bullet-active{ background-color: #00a0e9; } /* 产品中心 */ .index-title h2{ font-size: 36px; line-height: 1.2; margin-bottom: 5px; text-align: center; } .index-title span{ font-family: 'sourcehansansSC-Bold'; display: flex; justify-content: center; align-items: center; font-size: 26px; line-height: 1.5; color: #1c489d; } .index-title span>ins{ width: 5px; height: 5px; background-color: #1c489d; border-radius: 100%; margin: 0 8px; } .index-product-bg{ padding-top: 50px; } .index-product-item{ display: flex; align-items: center; margin-top: 40px; } .index-product-item li{ width: 25%; text-align: center; cursor: pointer; } .index-product-item li>span{ display: block; width: 78px; height: 78px; margin: 0 auto; overflow: hidden; } .index-product-item li img:nth-of-type(1){ height: 78px; opacity: 1; transition: all .6s; } .index-product-item li img:nth-of-type(2){ height: 78px; opacity: 0; transition: all .6s; } .index-product-item li p{ font-size: 18px; line-height: 1.5; font-weight: bold; margin: 15px 0; transition: all .6s; } .index-product-item li.active img:nth-of-type(1), .index-product-item li:hover img:nth-of-type(1){ margin-top: -78px; opacity: 0; transform: rotateY(360deg); transition: all .6s; } .index-product-item li.active img:nth-of-type(2), .index-product-item li:hover img:nth-of-type(2){ opacity: 1; transform: rotateY(360deg); transition: all .6s; } .index-product-item li.active p, .index-product-item li:hover p{ color: #00a0e9; transition: all .6s; } .index-product-item li ins{ display: block; width: 32px; height: 20px; margin: 0 auto; border-left: 16px solid rgba(31,86,168,0); border-right: 16px solid rgba(31,86,168,0); border-top: 10px solid rgba(31,86,168,0); border-bottom: 10px solid rgba(31,86,168,1); opacity: 0; } .index-product-item li.active ins{ opacity: 1; transition: all .6s; } .index-product-list li{ display: none; } .index-product-list li.cur{ display: block; position: relative; } .index-product-list li>img{ width: 100%; } .index-product-txt{ display: flex; justify-content: space-between; padding-top: 90px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .index-product-txt .left{ width: 52%; color: #FFFFFF; } .index-product-txt .left h3{ font-size: 36px; line-height: 1.5; } .index-product-txt .left ins{ display: block; width: 36px; height: 3px; background-color: #FFFFFF; opacity: .3; margin: 26px 0; } .index-product-txt .left p{ font-size: 15px; line-height: 2; } .index-product-txt .left a{ display: flex; align-items: center; font-size: 14px; line-height: 1.5; color: #FFFFFF; margin-top: 45px; opacity: .5; } .index-product-txt .left a>em{ width: 21px; height: 21px; margin-left: 8px; border: 1px solid #FFFFFF; border-radius: 100%; font-size: 16px; line-height: 18px; text-align: center; } .index-product-txt .right{ width: 42.18%; max-height: 289px; margin-top: 10px; overflow: hidden; } .index-product-txt .right img{ width: 100%; min-height: 100%; } /* 解决方案 */ .index-case-bg{ padding: 65px 0 70px; background-image: url(../images/case-bg.jpg); background-size: cover; } .index-case{ display: flex; align-items: center; margin-top: 64px; } .index-case li{ width: calc(33.33% - 23px); padding: 25px; margin-right: 34.5px; background-color: #FFFFFF; } .index-case li:nth-child(3n){ margin-right: 0; } .index-case li span{ font-family: impact; display: block; font-size: 42px; line-height: 1.2; color: #1c489d; transition: all .6s; } .index-case li ins{ display: block; width: 25px; height: 3px; background-color: #1c489d; margin: 14px 0 28px; transition: all .6s; } .index-case li h3{ font-size: 20px; line-height: 1.4; } .index-case li p{ font-size: 14px; line-height: 1.9; text-align: justify; margin: 20px 0 30px; opacity: .9; } .index-case li em{ display: block; width: 72px; height: 83px; overflow: hidden; } .index-case li em>img:nth-of-type(1){ height: 83px; opacity: 1; transition: all .6s; } .index-case li em>img:nth-of-type(2){ height: 83px; opacity: 0; transition: all .6s; } .index-case li:hover span{ color: #00a0e9; transition: all .6s; } .index-case li:hover ins{ background-color: #00a0e9; transition: all .6s; } .index-case li:hover em>img:nth-of-type(1){ transform: rotateY(360deg); margin-top: -83px; opacity: 0; transition: all .6s; } .index-case li:hover em>img:nth-of-type(2){ transform: rotateY(360deg); opacity: 1; transition: all .6s; } /* 运维服务 */ .index-service-bg{ padding: 65px 0 0; } .index-service{ display: flex; align-items: center; margin-top: 64px; } .index-service li{ width: calc(25% - 15px); margin-right: 20px; position: relative; } .index-service li:nth-of-type(4n){ margin-right: 0; } .index-service-txt{ width: 100%; height: 60px; position: absolute; left: 0; bottom: 0; transition: all .6s; } .index-service-txt>span{ display: block; width: 106px; height: 0; opacity: 0; overflow: hidden; transition: all .6s; } .index-service-txt>span img{ max-width: 90%; width: 0; height: 0; } .index-service-txt h3{ font-size: 20px; line-height: 1.5; text-align: center; color: #FFFFFF; } .index-service li:hover .index-service-txt{ height: 100%; background-color: rgba(0,166,233,.5); transition: all .6s; } .index-service li:hover .index-service-txt>span{ display: flex; justify-content: center; align-items: center; height: 121px; margin: 87px auto 20px; background-image: url(../images/icon-dbx.png); background-size: 106px 121px; opacity: 1; transition: all .6s; } .index-service li:hover .index-service-txt>span img{ width: auto; height: auto; } .my-customer-bg{ padding: 65px 0 100px; background-image: url(../images/customer-bg.jpg); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; } .my-customer{ display: flex; flex-wrap: wrap; margin-top: 30px; } .my-customer li{ display: flex; justify-content: center; align-items: center; width: calc(14.285% - 13.5px); background-color: #FFFFFF; margin: 15px 15.75px 0 0; border: 1px solid #ebebeb; } .my-customer li:nth-of-type(7n){ margin-right: 0; } .my-customer li img{ max-width: 96%; transition: all .6s; } .my-customer li:hover img{ transform: rotateX(360deg); transition: all .6s; } /* 尾部 */ .foot{ display: flex; background-image: url(../images/foot-bg.jpg); background-size: cover; } .bottom-nav{ display: flex; width: 56.25%; padding: 40px 0 40px calc(56.25% - 760px); } .bottom-nav li{ width: 25%; } .bottom-nav li>span{ display: block; font-size: 16px; line-height: 1.8; color: #FFFFFF; margin-bottom: 10px; } .bottom-nav li>a{ display: block; font-size: 14px; line-height: 2.5; color: #FFFFFF; opacity: .7; } .bottom-cantact{ width: 43.75%; padding: 40px calc(43.75% - 520px) 40px 50px; background-color: rgba(0,0,0,.12); } .bottom-cantact p, .bottom-cantact a{ font-size: 14px; line-height: 2.5; color: rgba(255,255,255,.77); } .copyright-bg{ background-color: #0a1b3d; }.copyright{ display: flex; justify-content: space-between; align-items: center; height: 68px; } .copyright p, .copyright span, .copyright a{ font-size: 14px; color: rgba(255,255,255,.3); } /* 产品中心页面 */ /* banner */ .pull-banner{ margin-top: 85px; position: relative; } .pull-banner img{ width: 100%; } .pull-banner-title{ font-family: 'SourceHanSansSC-Heavy'; text-align: center; color: #FFFFFF; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .pull-banner-title h2{ font-size: 42px; line-height: 1.4; } .pull-banner-title p{ font-size: 28px; line-height: 2.2; } /* 当前位置 */ .pull-current-bg{ border-bottom: 1px solid #eee; } .pull-current{ display: flex; justify-content: space-between; align-items: center; height: 66px; } .point{ display: flex; align-items: center; } .point>img{ height: 19px; margin-right: 10px; } .point p, .point p>a{ font-size: 14px; line-height: 1.5; color: #7c7c7c; } .nav-item{ display: flex; justify-content: flex-end; } .nav-item a{ font-size: 16px; line-height: 66px; margin: 0 2px; padding: 0 30px; transition: all .6s; } .nav-item a:last-child{ padding-right: 0; margin-right: 0; } .nav-item a.active, .nav-item a:hover{ background-color: #1c489d; color: #FFFFFF; padding: 0 30px; transition: all .6s; } /* 标题 */ .product-title{ font-size: 36px; line-height: 1.2; font-weight: bold; text-align: center; } /* 介绍 */ .product-introduce-bg{ padding: 40px 0; position: relative; } .product-introduce-txt{ margin-top: 25px; } .product-introduce-txt p{ font-size: 16px; line-height: 2; text-align: center; color: #262626; } .product-introduce-txt img{ max-width: 100%; margin: 35px auto 0; } .side-left{ width: 120px; position: absolute; left: 50%; top: 27px; margin-left: -790px; } .side-left a{ display: flex; justify-content: center; line-height: 52px; margin-top: 7px; background-color: #eeeeee; font-size: 16px; color: #262626; transition: all .6s; } .side-left a.active, .side-left a:hover{ background-color: #00a0e9; color: #FFFFFF; transition: all .6s; } /* 特点 */ .product-characteristic-bg{ padding: 40px 0; background-image: url(../images/product-characteristic-bg.jpg); background-size: cover; } .characteristic-list{ display: flex; align-items: center; flex-wrap: wrap; } .characteristic-list li{ width: 32%; margin: 2% 2% 0 0; background-color: #FFFFFF; padding: 30px 20px; color: #262626; text-align: center; } .characteristic-list li:nth-of-type(3n){ margin-right: 0; } .characteristic-list li>span{ display: flex; justify-content: center; align-items: center; width: 100%; height: 65px; text-align: center; } .characteristic-list li>span img{ max-height: 65px; } .characteristic-list li h3{ font-size: 22px; line-height: 1.5; margin: 15px; } .characteristic-list li p{ font-size: 14px; line-height: 1.7; opacity: .9; } /* 场景 */ .product-scene-bg{ padding: 40px 0; } .scene-list{ margin-top: 35px; } .scene-list li{ margin-bottom: 11px; } .scene-list li h3{ display: flex; justify-content: space-between; align-items: center; padding: 0 20px 0 32px; font-size: 18px; line-height: 52px; background-color: #f2f2f2; color: #262626; } .scene-list li h3>ins{ display: block; width: 18px; height: 11px; background-image: url(../images/arrow-down.png); background-repeat: no-repeat; background-size: 18px 11px; transition: all .6s; } .product-scene-txt{ display: none; height: 0; overflow: hidden; transition: all .6s; } .product-scene-txt .txt{ font-size: 15px; line-height: 2; color: #262626; } .product-scene-txt .txt strong{ display: block; line-height: 1.5; font-size: 18px; } .product-scene-txt .img{ max-width: 55%; } .product-scene-txt .img img{ width: 100%; } .scene-list li.active h3{ background-color: #1c489d; color: #FFFFFF; } .scene-list li.active ins{ -webkit-filter: invert(100%) grayscale(100%) brightness(1000%); -moz-filter: invert(100%) grayscale(100%) brightness(1000%); -ms-filter: invert(100%) grayscale(100%) brightness(1000%); -o-filter: invert(100%) grayscale(100%) brightness(1000%); filter: invert(100%) grayscale(100%) brightness(1000%); transform: rotateX(180deg); transition: all .6s; } .product-scene-txt.cur{ display: flex; justify-content: space-between; height: auto; padding: 32px; border: 1px solid #c0cce4; transition: all .6s; } /* 案例 */ .product-case-bg{ padding: 40px 0; background-image: url(../images/product-case-bg.jpg); background-size: cover; } .case-list-bg{ position: relative; padding-bottom: 60px; margin-top: 35px; overflow: hidden; } .product-case-swiper{ overflow: hidden; } .product-case-swiper .swiper-slide{ padding: 20px; background-color: #FFFFFF; } .product-case-swiper .swiper-slide h3{ font-size: 20px; color: #1c489d; line-height: 1.5; padding-bottom: 10px; border-bottom: 1px solid #ededed; } .case-txt{ font-size: 14px; color: #262626; line-height: 1.9; height: 100px; overflow: hidden; transition: all .6s; } .case-txt.open{ height: auto; transition: all .6s; } .case-txt strong{ display: block; margin-top: 20px; } .case-btns{ display: flex; align-items: center; justify-content: center; margin: 26px auto 6px; width: 130px; height: 44px; border-radius: 22px; border: 1px solid #1c489d; color: #1c489d; cursor: pointer; transition: all .6s; } .case-btns:hover{ background-color: #1c489d; color: #FFFFFF; transition: all .6s; } .case-list-bg .swiper-pagination{ left: 50%; bottom: 0; } .case-list-bg .swiper-pagination .swiper-pagination-bullet{ width: 11px; height: 11px; background-color: #1c489d; margin: 0 4px; opacity: 1; } .case-list-bg .swiper-pagination .swiper-pagination-bullet-active{ background-color: #00a0e9; } .case-list-bg .swiper-button-prev{ width: 52px; height: 52px; background-color: #dbdbdb; background-image: url(../images/arrow-left.png); background-repeat: no-repeat; background-size: 15px 23px; background-position: center; margin-bottom: 0; left: 0; margin-top: -56px; } .case-list-bg .swiper-button-next{ width: 52px; height: 52px; background-color: #dbdbdb; background-image: url(../images/arrow-right.png); background-repeat: no-repeat; background-size: 15px 23px; background-position: center; margin-bottom: 0; left: auto; right: 0; margin-top: -56px; } /* 关于我们 */ /* 简介 */ .about-bg{ padding: 65px 0; } .about{ display: flex; justify-content: space-between; align-items: center; } .about-txt{ max-width: 45%; } .about-txt>strong{ display: block; font-size: 24px; line-height: 1.5; color: #262626; margin-bottom: 6px; } .about-txt>h3{ font-size: 32px; line-height: 1.5; color: #1c489d; margin-bottom: 18px; } .about-txt>p{ font-size: 15px; line-height: 2.15; text-align: justify; color: #262626; } .about-img{ max-width: 52%; } .about-img img{ width: 100%; } /* 大事件 */ .memorabilia-bg{ background-image: url(../images/memorabilia-bg.jpg); background-size: cover; padding: 60px 0; } .memorabilia-thumbnail-bg{ height: 120px; margin-bottom: 50px; background-image: url(../images/memorabilia-item.png); background-repeat: repeat-x; background-position: center left; background-size: 12.8px auto; overflow: hidden; } .memorabilia-thumbnail-swiper .swiper-slide{ cursor: pointer; } .memorabilia-thumbnail-swiper .swiper-slide>span{ display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; border-radius: 100%; background-color: rgba(115,115,115,.5); margin: 50px auto 22px; } .memorabilia-thumbnail-swiper .swiper-slide>span em{ width: 8px; height: 8px; background-color: #737373; border-radius: 100%; } .memorabilia-thumbnail-swiper .swiper-slide>p{ font-size: 16px; line-height: 1.5; color: #737373; text-align: center; } .memorabilia-thumbnail-swiper .swiper-slide-thumb-active>span{ background-color: rgba(28,72,157,.5); } .memorabilia-thumbnail-swiper .swiper-slide-thumb-active>span em{ background-color: #1c489d; } .memorabilia-thumbnail-swiper .swiper-slide-thumb-active>p{ color: #1c489d; font-weight: bold; } .memorabilia-swiper{ overflow: hidden; } .memorabilia-swiper .swiper-slide{ background-color: #FFFFFF; padding: 40px 38px; display: flex; justify-content: space-between; } .memorabilia-img{ width: 37.5%; height: 250px; overflow: hidden; } .memorabilia-img img{ width: 100%; min-height: 250px; } .memorabilia-txt{ width: 60%; } .memorabilia-txt h3{ font-size: 28px; line-height: 1.5; margin-top: 24px; color: #1c489d; } .memorabilia-txt ins{ display: block; width: 100px; height: 1px; background-color: #1c489d; margin: 14px 0; } .memorabilia-txt p{ font-size: 18px; line-height: 1.8; color: #262626; font-weight: bold; } .memorabilia-swiper .swiper-button-prev{ width: 55px; height: 52px; background-color: #00a0e9; background-image: url(../images/arrow-left.png); background-repeat: no-repeat; background-position: center; background-size: 15px 23px; left: auto; top: auto; right: 59px; bottom: 0; } .memorabilia-swiper .swiper-button-next{ width: 55px; height: 52px; background-color: #00a0e9; background-image: url(../images/arrow-right.png); background-repeat: no-repeat; background-position: center; background-size: 15px 23px; left: auto; top: auto; right: 0; bottom: 0; } .memorabilia-swiper .swiper-button-prev:hover, .memorabilia-swiper .swiper-button-next:hover{ background-color: #1c489d; } /* 加入我们 */ .join-bg{ display: flex; align-items: center; } .join-list{ display: flex; justify-content: flex-end; width: 42.1875%; background-image: url(../images/join-bg.jpg); background-size: cover; position: relative; } .join-thumbnail-bg{ width: 490px; padding: 58px 0 92px; } .join-title h2{ color: #FFFFFF; text-align: left; } .join-title span{ color: #FFFFFF; justify-content: flex-start; } .join-title span>ins{ background-color: #FFFFFF; } .join-thumbnail-swiper{ height: 511px; overflow: hidden; margin-top: 14px; } .join-thumbnail-swiper .swiper-slide{ display: flex; justify-content: space-between; align-items: center; height: 64px; cursor: pointer; } .join-thumbnail-swiper .swiper-slide p{ font-size: 18px; line-height: 1.5; color: #FFFFFF; } .join-thumbnail-swiper .swiper-slide:hover p{ font-weight: bold; } .join-thumbnail-swiper .swiper-slide img{ height: 11px; margin-right: 35px; } .join-thumbnail-swiper .swiper-slide-thumb-active p{ font-weight: bold; } .join-btns-bg{ display: flex; justify-content: flex-end; width: 100%; height: 58px; background-color: #00a0e9; position: absolute; left: 0; bottom: 0; z-index: 1; } .join-btns{ width: 490px; position: relative; } .join-btns .swiper-button-prev{ width: 33px; height: 15px; background-image: url(../images/arrow-prev.png); background-repeat: no-repeat; background-position: center; background-size: 33px 15px; left: 2px; top: auto; bottom: 16px; } .join-btns .swiper-button-next{ width: 33px; height: 15px; background-image: url(../images/arrow-next.png); background-repeat: no-repeat; background-position: center; background-size: 33px 15px; left: 77px; top: auto; bottom: 16px; } .join-content{ width: 57.8125%; } .join-swiper{ overflow: hidden; } .join-swiper .swiper-slide{ padding: 60px 65px; color: #262626; } .join-swiper .swiper-slide>h3{ font-size: 28px; line-height: 1.5; } .join-swiper .swiper-slide>p{ font-size: 15px; line-height: 2; } .join-swiper .swiper-slide>p strong{ display: block; margin-top: 20px; } .join-swiper .swiper-slide>h5{ font-size: 15px; line-height: 2; margin-top: 40px; } /* 联系我们 */ .contact-bg{ padding: 34px 0 74px; background-image: url(../images/contact-bg.jpg); background-size: cover; } .contact-list li{ display: flex; align-items: center; margin-top: 40px; } .contact-txt{ width: 38%; height: 360px; padding: 48px; background-color: #FFFFFF; } .contact-txt p{ font-size: 16px; color: #262626; line-height: 1.6; margin-top: 25px; } .contact-txt p>a{ color: #262626; } .contact-txt p:first-child{ margin-top: 0; } .contact-txt p img{ margin-bottom: 5px; } .contact-map{ width: 62%; height: 360px; } /* 云服务 */ .yfw-list li{ padding: 43px 0; } .yfw-section{ display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; } .yfw-list li:nth-of-type(even){ background-image: url(../images/yfw-bg.jpg); background-size: cover; } .yfw-list li:nth-of-type(even) .yfw-section{ flex-direction: row; } .yfw-txt{ width: 46%; color: #262626; } .yfw-txt strong{ display: block; font-size: 24px; line-height: 1.5; } .yfw-txt h3{ font-size: 32px; line-height: 1.5; color: #1c489d; margin: 10px 0 16px; } .yfw-txt p{ font-size: 15px; line-height: 2.1; } .yfw-img{ width: 48%; height: 342px; overflow: hidden; } .yfw-img img{ width: 100%; min-height: 342px; transition: all .6s; } .yfw-img:hover img{ transform: scale(1.2); transition: all .6s; } /* 响应式样式 */ @media screen and (max-width:1760px){ } @media screen and (max-width:1680px){ } @media screen and (max-width:1600px){ } @media screen and (max-width:1520px){ } @media screen and (max-width:1440px){ } @media screen and (max-width:1360px){ } @media screen and (max-width:780px){ /* 头部 */ .header{ height: 50px; background-color: rgba(255,255,255,1); } .header .head{ justify-content: space-between; width: calc(100% - 30px); margin: 0 auto; height: 50px; } .logo{ width: auto; height: 40px; margin: 0; } .logo img{ width: auto; height: 40px; margin: 0; } .head .head-btn{ display: block; margin: 0; } .head .nav{ display: block; width: 38vw; height: 100vh; background-color: #FFFFFF; position: fixed; padding-top: 50px; top: 0px; right: -38vw; z-index: 9999; transition: all .6s; } .head .nav.active{ right: 0; transition: all .6s; } .head .nav-bg{ width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; z-index: 200; transition: all .6s; } .head .nav-bg.active{ display: block; opacity: 1; transition: all .6s; } .head .nav li{ margin: 0; padding: 0; height: auto; } .head .nav li>a{ width: 100%; font-size: 15px; margin: 0; padding: 0; line-height: 40px; text-align: center; } .head .nav li.active>a{ font-weight: normal; border: 0; background-color: #0094da; color: #FFFFFF; } /* banner */ .banner-swiper{ width: 100%; height: 300px; margin-top: 50px; } .banner-swiper .swiper-slide{ background-color: #f4f4f4; } .banner-swiper .swiper-slide video{ width: 100%; height: 300px; } .banner-title{ width: calc(100% - 30px); left: 20px; top: 25%; } .banner-title p{ font-size: 17px; } .banner-title h2{ font-size: 25px; margin-top: 5px; } .banner-title span{ width: 100%; font-size: 13px; } .banner-swiper .swiper-pagination-bullet{ font-size: 14px; } } @media screen and (max-width:414px){ } @media screen and (max-width:350px){ }