.banner{ display: none; } .column{ position: relative; overflow: hidden; } .column p{ font-size: 18px; font-weight:normal; color: #84898E; line-height: 2; margin-bottom: 20px; } .button-next:after, .button-prev:after{ font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none!important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; --swiper-navigation-size: 15px; position: absolute; left: 50%; top: 50%; margin-top: -7px; margin-left: -4px; } .column h2{ font-size:40px; /*font-weight:600;*/ color: #000; line-height: normal; } .column1{ height: 100vh; } .column1 .column-stage{ float: left; width: 100%; background: #000; } .column2 .column-stage video, .column1 .column-stage video { visibility: visible; margin:0 auto; width:100%; height: 100%; object-fit: cover } .column1 .column-slogan{ position: absolute; width: 100%; text-align: center; color: #fff; z-index: 1; top: 50%; margin-top: -100px; padding-top: 65px; } .column1 .column-slogan > h1{ margin-bottom: 34px; } .column1 .column-slogan > h2{ font-size:52px; font-weight:600; color: #fff; line-height: normal; margin-bottom: 34px; opacity: 0.8; } .column2{ height: 744px; overflow: hidden; } .column2 .column-stage { float: left; width: 100%; height: 100%; } .column2 .column-slogan{ position: absolute; bottom: 0; background: rgba(255, 255, 255, 0.8); text-align: right; width: 50%; min-width: 960px; color: #fff; height: 100%; z-index: 1; top: 0; display: flex; justify-content: center; align-items: center; } .column2 .column-slogan > div{ display: inline-block; width: 60%; text-align: left; } .column2 .column-slogan > div > h2{ margin-bottom: 13px; } .column2 .column-slogan > div > p{ } .column3{ color: #fff; padding: 80px 0; } .column3 ul.tab{ display: flex; justify-content: center; margin-bottom: 100px; } .column3 ul.tab > li{ margin: 0 20px; padding: 5px 15px; cursor: pointer; } .column3 ul.tab > li h2{ font-size: 18px; /*font-weight: 500;*/ color: #6D7278; font-weight: 600; } .column3 ul.tab > li.active h2, .column3 ul.tab > li:hover h2{ color: #000000; } .column3 .content{ display: none; justify-content: center; align-items: center; } .column3 .content.active{ display: flex; } .column3 .content .column-stage{ position: relative; } .column3 .content .column-slogan{ width: 452px; margin-right: 20px; } .column3 .content .column-slogan>h2{ margin-bottom: 13px; } .column3 .content .column-slogan>p{ margin-bottom: 57px; } .column3 .content .column-slogan>ul{ display: flex; flex-wrap: wrap; } .column3 .content .column-slogan>ul>li{ margin-bottom: 28px; width: 50%; flex:1 auto; flex-wrap: wrap; } .column3 .content .column-slogan>ul>li>img{ vertical-align: middle; margin-right: 7px; } .column3 .content .column-slogan>ul>li>span{ font-size: 16px; font-weight: 500; color: #000000; white-space: nowrap; } .column3 .content .column-slogan a{ font-size: 16px; font-weight: 500; color: #F7B500; } .column4{ padding: 100px 0; background: url("/v4/images/index/column4.png") no-repeat; background-size: cover; } .column4 .inner{ position: relative; } .column4 h2{ margin-bottom: 10px; } .column4 .swiper-container .column-slogan>.line{ display: inline-block; width: 60px; border-top: 2px #DCDCDC solid; } .column4 .logo-list.swiper-pagination-clickable{ position: absolute; bottom: 60px; left: 0; z-index: 1; margin-left: -24px; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet{ width: 96px; height: 44px; display: inline-block; border-radius: 0; background: transparent; opacity: 1; margin-right: 20px; /*border: 1px #eee solid;*/ } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet[aria-label='Go to slide 1']{ background: url("/v4/images/index/column4-1.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet[aria-label='Go to slide 2']{ background: url("/v4/images/index/column4-2.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet[aria-label='Go to slide 3']{ background: url("/v4/images/index/column4-3.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet[aria-label='Go to slide 4']{ background: url("/v4/images/index/column4-4.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet[aria-label='Go to slide 5']{ background: url("/v4/images/index/column4-5.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active[aria-label='Go to slide 1']{ background: url("/v4/images/index/column4-1-active.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active[aria-label='Go to slide 2']{ background: url("/v4/images/index/column4-2-active.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active[aria-label='Go to slide 3']{ background: url("/v4/images/index/column4-3-active.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active[aria-label='Go to slide 4']{ background: url("/v4/images/index/column4-4-active.png") no-repeat; background-size: cover; } .column4 .logo-list.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active[aria-label='Go to slide 5']{ background: url("/v4/images/index/column4-5-active.png") no-repeat; background-size: cover; } .swiper-container-fade .swiper-slide, .swiper-container-fade .swiper-slide .swiper-slide { opacity: 0!important; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { opacity: 1!important; } .column4 .swiper-container .swiper-slide{ display: flex; justify-content: center; } .column4 .swiper-container .swiper-slide .column-slogan{ margin-right: 160px; } .column4 .swiper-container .swiper-slide .column-stage{ width: 327px; height: 396px; flex-shrink: 0; } .column4 .swiper-container .swiper-slide .column-stage>img{ width: 100%; height: auto; } .column4 .button{ position: absolute; bottom: 0px; right: -50px; display: flex; color: #D2D2D2; z-index: 1; } .column4 .button .button-prev{ margin-right: 1px; } .column4 .button .button-prev, .column4 .button .button-next{ display: inline-block; width: 50px; height: 50px; background: #F6F6F6; cursor: pointer; position: relative; } .column4 .button .button-next{ background: #1F6CEE; } .column4 .button .button-prev:hover, .column4 .button .button-next:hover{ color: #fff; background: #1F6CEE; } .column4 .button .button-prev.swiper-button-disabled, .column4 .button .button-next.swiper-button-disabled{ opacity: .5; cursor: auto; pointer-events: none; } .column4 .button .button-next:after{ content: 'next'; } .column4 .button .button-prev:after{ content: 'prev'; } .column5{ display: flex; justify-content: flex-start; padding: 128px 0 160px; background: url("/v4/images/index/column5.png") no-repeat; background-size: cover; } .column5 .column-stage{ width: 450px; margin-right: 50px; flex-shrink: 0; display: flex; justify-content: flex-end; } .column5 .column-stage h2{ width: 50px; } .column5 .column-slogan{ flex: 1; overflow: hidden; } .column5 .column-slogan .more{ position: absolute; top: 60px; right: 380px; } .column5 .column-slogan .button{ position: absolute; bottom: 89px; right: 300px; display: flex; color: #D2D2D2; } .column5 .column-slogan .button .button-prev{ margin-right: 1px; } .column5 .column-slogan .button .button-prev, .column5 .column-slogan .button .button-next{ display: inline-block; width: 50px; height: 50px; background: #F6F6F6; cursor: pointer; position: relative; } .column5 .column-slogan .button .button-prev:hover, .column5 .column-slogan .button .button-next:hover{ color: #fff; background: #1F6CEE; } .column5 .column-slogan .button .button-prev.swiper-button-disabled, .column5 .column-slogan .button .button-next.swiper-button-disabled{ opacity: .5; cursor: auto; pointer-events: none; } .column5 .column-slogan .button .button-next:after{ content: 'next'; } .column5 .column-slogan .button .button-prev:after{ content: 'prev'; } .column5 .column-slogan .swiper-container a{ display: inline-block; padding: 20px; height: 480px; background: #fff; position: relative; } .column5 .column-slogan .swiper-container a img{ width: 100%; object-fit: cover; margin-bottom: 20px; height: 200px; } .column5 .column-slogan .swiper-container a p{ /*font-size: 14px;*/ font-weight: 400; color: #131415; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; } .column5 .column-slogan .swiper-container a>span{ position: absolute; bottom: 20px; left: 20px; display: inline-block; padding-top: 4px; border-top: 2px #4a4a4a solid; color: #6D7278; font-size: 18px; } .column6{ background: linear-gradient(360deg, #FFFFFF 0%, #F7FBFF 100%); padding: 50px 0; } .column6 .column-slogan{ } .column6 .column-slogan h2{ margin-bottom: 30px; text-align: center; } .column6 .column-slogan>.ul-content{ width: 100%; display: flex; flex-direction: column; height: 480px; } .column6 .column-slogan>.ul-content>ul{ width: 100%; height: 100%; position: relative; overflow: hidden; display: none; padding: 20px 0; } .column6 .column-slogan>.ul-content>ul>li{ width: 119px; height: 119px; background: #FFFFFF; box-shadow: 6px 11px 24px 0px #E4E7ED; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; left: 0; transition: opacity 1s ease-in-out; margin-right: 20px; overflow: hidden; padding: 10px; } .column6 .column-slogan>.ul-content>ul>li>img{ width: 80%; height: auto; max-height: 80%; } .column7{ background: #F8F8F8; padding: 120px 0 100px; } .column7 .column-slogan{ text-align: center; } .column7 .column-slogan h2{ margin-bottom: 30px; } @media only screen and (max-width: 1400px) { } @media only screen and (max-width: 860px) { .banner{ display: block; } .column1{ height: auto; } .column1 .column-stage video { margin-top: 60px; } .column2{ /*height: auto;*/ } .column2 .column-slogan{ width: 100%; min-width: auto; } .column2 .column-slogan > div { width: 100%; text-align: center; padding: 15px ; } .column3 { color: #fff; padding: 40px 0; } .column3 ul.tab{ margin-bottom: 20px; } .column3 ul.tab > li{ margin: 0; } .column3 .content { flex-direction: column; } .column3 .content .column-stage { width: 100%; margin-right: 0; } .column3 .content .column-stage img { width: 100%; height: auto; } .column3 .content .column-stage>ul>li { width: 80px; height: 50px; line-height: 50px; } .column3 .content .column-stage>ul>li:nth-child(1){ top: 3%; left: 50%; margin-left: -40px; animation: opacityShow 4s linear 0s infinite alternate; } .column3 .content .column-stage>ul>li:nth-child(2){ top: 20%; right: 10%; animation: opacityShow 4s linear 1s infinite alternate; } .column3 .content .column-stage>ul>li:nth-child(3){ top: 43%; right: 50%; margin-right: -40px; animation: opacityShow 4s linear 2s infinite alternate; } .column3 .content .column-stage>ul>li:nth-child(4){ top: 20%; left: 10%; animation: opacityShow 4s linear 3s infinite alternate; } .column3 .content .column-slogan { width: 100%; text-align: center; padding: 0 15px; margin-right: 0; } .column3 .content .column-slogan>p { margin-bottom: 30px; } .column3 .content .column-slogan>ul { justify-content: space-around; } .column3 .content .column-slogan>ul>li { margin-right: 0; } .column4 { padding: 50px 0; } .column4>.inner>p{ text-align: center; } .column4 .swiper-container .swiper-slide { flex-direction: column; padding: 0 15px; } .column4 .swiper-container .swiper-slide .column-slogan { margin-right: 0; text-align: center; } .column4 .swiper-container .swiper-slide .column-stage { width: 100%; height: auto; } .column4 .logo-list{ display: none; } .column4 .button { display: none; } .column4 .swiper-container .swiper-slide .column-stage>img { width: 100%; max-height: 400px; } .column5 { padding: 40px 15px; flex-direction: column; } .column5 .column-stage { width: auto; margin-right: 0; margin-bottom: 30px; justify-content: flex-start; } .column5 .column-stage h2 { width: auto; text-align: center; } .column5 .column-slogan .more { top: 60px; right: 15px; } .column5 .column-slogan .button { display: none; } .column7{ padding: 50px 15px; } } @keyframes animation-left { 0% { transform: translateX(0px); } 100% { transform: translateX(-100%); } } @keyframes animation-up-down { 0% { transform: translateY(0px); } 50% { transform: translateY(10); } 100% { transform: translateY(0); } } @keyframes opacityShow{ 0% { opacity: 0.83; } 75% { opacity: 0.83; } 100% { opacity: 1; } }