a { text-decoration: none; } .et-hero-tabs, .et-slide { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 62vh; position: relative; background: transparent; text-align: center; padding: 0 2em; } .et-slide{padding-top:80px;} .et-hero-tabs h1, .et-slide h1 { font-size: 2rem; margin: 0; letter-spacing: 1rem; font-family: siyuanHeavy; } .et-hero-tabs h3, .et-slide h3 { font-size: 1rem; letter-spacing: 0.3rem; opacity: 0.6; font-family: siyuanHeavy; } #tab-partner .section1600,#tab-awards .section1600{margin:30px auto;} .dowell-content{line-height: 30px;font-size: 16px;text-align: left;box-sizing: border-box;padding:20px;} .dowell-content p{text-indent: 2em;} .et-hero-tabs-container { display: flex; flex-direction: row; position: relative; top: 80px; width: 100%; height: 10vh; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background: #fff; z-index: 10; animation: moveUp 2s normal forwards ease-in; } .et-hero-tab { display: flex; justify-content: center; align-items: center; flex: 1; color: #000; letter-spacing: 0.1rem; transition: all 0.5s ease; font-size: 0.8rem; } .et-hero-tab:hover { color: white; background: #57c1cf; transition: all 0.5s ease; } .et-hero-tab-slider { position: absolute; bottom: 0; width: 0; height: 6px; background: #57c1cf; transition: left 0.3s ease; } .content-title{ font-family: siyuanHeavy; font-size: 3rem; font-weight: 2rem; background-image: url(../picture/bg2.jpg); background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; background-position: 50% 50%; color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; } .content-box{ text-align: center;; justify-content: center; align-items: center; position: relative; top: -20vh; width: 100vw; min-width: 60vw; } .content{ position: relative; left: 20vw; width: 60vw; } #main-title{ color: white; font-size: 60px; animation: fadeIn ease 2s; font-family: siyuanHeavy; font-weight:400 } #main-title-en{ color: white; font-size: 24px; letter-spacing: normal; animation: fadeInEn ease 3s; font-family: siyuanHeavy; margin-top:20px; font-weight: normal } @media (min-width: 800px) { .et-hero-tabs h1, .et-slide h1 { font-size: 3rem; } .et-hero-tabs h3, .et-slide h3 { font-size: 1rem; } .et-hero-tab { font-size: 1rem; } } .menu{ position: fixed; z-index: 10; width: 100%; height: 13vh; margin:0; left: 0; top: 0; background-image: linear-gradient(grey,transparent); } #menulogo{ width: 7em; left: 3vw; position: absolute; } .menulist{ position: absolute; list-style-type: none; margin: 0; /*padding-left: 30vw;*/ top: 2vh; right: 8vw; overflow: hidden; background-color: transparent; /*width: 60vw;*/ height: 13vh; } .catagory{ float: left; } .catagory a{ text-decoration: none; text-align: center; color: white; padding: 1.5vw; font-family: zcoolBold; } .dwabout-bg{ position: absolute; width: 100vw; height: 60vh; overflow: hidden; top: 0; left: 0; margin: 0; /*z-index: 5;*/ background: url("../picture/about.jpg") no-repeat; background-size:cover; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInEn { 0% { opacity: 0; } 100% { opacity: 0.6; } } @-webkit-keyframes moveUp { 0% { bottom:-10vh; opacity: 0; } 50%{ bottom:-10vh; opacity: 0; } 100% { bottom: 0; opacity: 1; } } .dwjj-dowell{width:100%;margin:30px auto;height: 80%;overflow: auto;font-size: 14px;background: #fff;max-width: 1400px;} .honor-swiper { padding-bottom: 50px; margin-bottom: 120px; position: relative; } .honor-swiper .summary { text-align: center; font-size: 20px; line-height: 1.8; color: #666; } .honor-swiper .honor-bg { position: absolute; bottom: 0; left: 0; height: 410px; width: 100%; } .honor-swiper .swiper { padding: 80px 0 70px; background: none !important; } .honor-swiper .swiper .swiper-slide { transition: all 0.5s; } .honor-swiper .swiper .swiper-slide.swiper-slide-prev, .honor-swiper .swiper .swiper-slide.swiper-slide-next { transform: translateY(-20px) scale(1.2); z-index: 1; } .honor-swiper .swiper .swiper-slide.swiper-slide-active { transform: translateY(-40px) scale(1.4); z-index: 5; } .honor-swiper .swiper .swiper-slide img { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); } .honor-swiper .swiper .swiper-slide .title { color: #fff; text-align: center; margin-top: 10px; } .honor-swiper .swiper .swiper-pagination-bullet { opacity: 1; width: 12px; height: 12px; border: 2px solid #fff; background: none; margin: 0 12px; } .honor-swiper .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; } .technology-swiper { padding-bottom: 50px; margin-bottom: 120px; position: relative; } .technology-swiper .summary { text-align: center; font-size: 20px; line-height: 1.8; color: #666; } .technology-swiper .honor-bg { position: absolute; bottom: 0; left: 0; height: 410px; width: 100%; } .technology-swiper .swiper { padding: 80px 0 70px; background: none !important; } .technology-swiper .swiper .swiper-slide { transition: all 0.5s; } .technology-swiper .swiper .swiper-slide.swiper-slide-prev, .technology-swiper .swiper .swiper-slide.swiper-slide-next { transform: translateY(-20px) scale(1.2); z-index: 1; } .technology-swiper .swiper .swiper-slide.swiper-slide-active { transform: translateY(-40px) scale(1.4); z-index: 5; } .technology-swiper .swiper .swiper-slide img { box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1); } .technology-swiper .swiper .swiper-slide .title { color: #fff; text-align: center; margin-top: 10px; } .technology-swiper .swiper .swiper-pagination-bullet { opacity: 1; width: 12px; height: 12px; border: 2px solid #fff; background: none; margin: 0 12px; } .technology-swiper .swiper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; } .item-list { display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); } .item-list .item { background: #fff; overflow: hidden; cursor: pointer; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.02); } .item-list .item .imgBox { /* height: 0; padding-bottom: 140%;*/ height:120px } .item-list .item .imgBox img { position: absolute; transition: 0.5s; } .item-list .item .title { font-size: 16px; text-align: center; margin-top: 10px; } .item-list .item:hover .imgBox img { transition: 0.5s; transform: scale(1.05); }