.flex-box-v { display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: center; justify-content: center; } /*banner*/ .Banner-container { height: 800px; min-height: 600px; max-height: 1600px; width: 100%; } .banner-background { background-size: cover; background-position: center; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .banner-slide { display: flex; flex-flow: column; justify-content: center; overflow: hidden; } .banner-text { margin: 0 auto; width: 90%; max-width: 1200px; transform: translate3d(0, 0, 0); will-change: transform; } .banner-text h1 { width:30%; font-weight: bold; font-size: 46px; margin-bottom: 30px; color: #fff; font-size:24px; background-color:#07773d; padding:20px; } .banner-text h2 { margin-top: 1rem; color: #fff; font-size: 18px; font-weight: normal; font-family: arial; } .banner-bg-ss { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background: rgba(0, 0, 0, 0); } .banner-text { z-index: 10; display:none; } .banner-text:before { content: ""; position: absolute; width: 300px; height: 400px; display: block; border: 10px solid rgba(255, 255, 255, 0.2); top: 4.5rem; margin-top: -200px; left: -6rem; } .small-title { color: #fff; margin-bottom: 1rem; font-size: 40px; font-family: 'Oswald', sans-serif; text-shadow: 0 0 20px #000, 0 0 20px rgba(10, 175, 230, 0); } /*.banner-warpper.swiper-wrapper { transition-timing-function: cubic-bezier(0.75, 0.22, 0.25, 1); } .banner-warpper.swiper-wrapper .banner-background { transition-timing-function: cubic-bezier(0.75, 0.22, 0.25, 1); will-change: transform; }*/ .banner-switch { position: absolute; z-index: 30; left: auto; top: 50%; height: 80px; right: 2rem; color: #333; display: grid; margin-top: -25px; grid-template-columns: 1fr; width: auto; align-content: center; align-items: center; text-transform: uppercase; } .banner-switch > div > * { display: inline-block; vertical-align: middle; } .sL_icon { background-size: contain; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; } .banner-switch > div > span { margin: 0 0.5rem; font-size: 0.825rem; color:#fff; } .banner-switch > div { margin: 0.3rem 0; } .banner-switch > div { cursor: pointer; transition: 0.5s; } .swiper-button-disabled { opacity: 0.4; } .Scroll-tip { position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100px; color: #333; text-align: center; } .Tipss { text-transform: uppercase; font-size: 0.825rem; } .tip_anim { display: inline-block; margin: 0.75rem 0; height: 30px; } .Tipss span { display: block; } .tip_anim span { display: inline-block; width: 1px; height: 100%; background: #333; animation-name: scrollTip; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.82, 0.24, 0.25, 1); } .Banner-A1 { z-index: 1; } @keyframes scrollTip { 0% { transform: scale(1, 0); transform-origin: top; } 49% { transform: scale(1, 1); transform-origin: top; } 51% { transform: scale(1, 1); transform-origin: bottom; } 100% { transform: scale(1, 0); transform-origin: bottom; } } .banner-background { transition: 1s 2.5s; transform: perspective(1000px) translate3d(0, 0, 100px); } .swiper-slide.banner-slide.swiper-slide-active .banner-background { transition: 5s 0s; transform: perspective(1000px) translate3d(0, 0, 0px); } .banner-text:before { transition-delay: 2s; transition-duration: 2s; transform: translate3d(-80px, 0, 0); opacity: 0; } .swiper-slide.banner-slide.swiper-slide-active .banner-text:before { transition-delay: 1.3s; transform: translate3d(0px, 0, 0); opacity: 1; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(1) { transition-delay: 0.5s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(2) { transition-delay: 0.7s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(3) { transition-delay: 0.9s; } .banner-text * { transition-delay: transform 2s, opacity 0s; transition-duration: 2s; transform: translate3d(0, 80px, 0); opacity: 0; } .swiper-slide.banner-slide.swiper-slide-active .banner-text * { transform: translate3d(0, 0px, 0); opacity: 1; } @media screen and (max-width: 1600px) { .banner-text { max-width: 1000px; width: 80%; } } @media screen and (max-width: 1200px) { .banner-text:before { content: ""; position: absolute; width: 300px; height: 400px; display: block; border: 10px solid rgba(255, 255, 255, 0.2); top: 4.5rem; margin-top: -200px; left: 50%; margin-left: -150px; } .banner-text { text-align: center; } .banner-text h2 { font-size: 1.5rem; } } @media screen and (max-width: 769px) { .banner-switch { top: auto; bottom: 2rem; left: 5%; right: 5%; justify-content: center; align-items: center; display: none; } .banner-text h1 { font-size: 26px; line-height: 1.2; } .banner-text h2 { font-size: 14px; line-height: 1.4; } .small-title { font-size: 1.75rem; } .banner-text:before { opacity: 0; } } /*banner*/ #w_fimg-1561706760160 img{ width:60px;} #w_fimg-1561709286816 img{ width:60px;} #w_fimg-1561709563110 img{ width:45px; margin-top:10px; } #w_fimg-1561709827409 img{ width:50px;}