.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: 100vh; 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 { font-weight: bold; font-size: 72px; margin-bottom: 30px; color: #fff; } .banner-text h2 { position:relative; margin-top: 1rem; padding-top: 30px; color: #fff; font-size: 20px; font-weight: normal; font-family: arial; } .banner-text h2:before{ content:''; position:absolute; left: 50%; top:0; margin-left: -50px; height:2px; width:100px; background:#fff; z-index:1; } .banner-text h2 span{ font-size: 14px; display: inline-block; margin-top: 40px; letter-spacing: 30px; } .banner-bg-ss { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background: rgba(0, 0, 0, 0.1); } .banner-text { z-index: 10; text-align: center; } .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; display:none; } .small-title { color: #fff; margin-bottom: 1rem; font-size: 40px; font-family: 'Oswald', sans-serif; } /*.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; right: auto; bottom: 14%; height: 70px; left: 50%; margin-left: -150px; color: #fff; display: flex; margin-top: 0px; background: rgba(230,0,18,.8); width: 300px; justify-content: flex-end; 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; } .banner-switch > div { margin: 0.3rem 2rem; } .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: #fff; 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: #fff; 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 (min-width: 1201px) and (max-width: 1440px) { .banner-text { max-width: 1000px; width: 80%; } #w_common_text-1590226008391{ width: auto; max-width: none; min-width: 0px; height: auto; max-height: none; min-height: 0px; margin-top: 10px; margin-left: 0px; margin-right: 0px; margin-bottom: 10px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px;} #w_common_text-1590226008391 div span{font-size: 16px;} } @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; display:none; } .banner-text h2:before { left: calc((100% - 100px)/2); } .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 h2:before { left: calc((100% - 60px)/2); width:60px; MARGIN-LEFT: 0PX; } .banner-text h1 { font-size: 36px; line-height: 1.2; } .banner-text h2 { font-size: 14px; line-height: 1.4; } .small-title { font-size: 2rem; } .banner-text:before { opacity: 0; } .Scroll-tip { bottom: 72px; } } /*banner*/ @media screen and (max-width: 768px) { #w_grid-1567149865008 { width: 100%; max-width: none; min-width: 0px; height: auto; max-height: none; min-height: 10px; margin-top: 50px; } .categrayBox{margin-top:20px;} .moveBtn { width: 100%!important; margin: 0!important; } #content_box-1578053581113-0{width: 20%; float: left;} #content_box-1578053581113-1{width: 80%; float: left;} #content_box-1576314363992-0, #content_box-1576314363992-1, #content_box-1576314363992-2, #content_box-1576314363992-3 {width: 50%; float: left; clear: none!important; display: inline-block;} .btn-primary { color: #fff;width: 100%; background-color: #014895; border-color:#014895; }#w_common_text-1567149865313 p span{ font-size: 25px!important; } #c_portalResNews_category-15762366752784393 { width: auto; max-width: 100%; min-width: 0px; height: auto; max-height: none; min-height: 49px; margin-top: 22px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } #w_grid-1578300595866{margin-top:55px;} #w_common_text-1578301813016 { width: 100%; max-width: none; min-width: 0px; height: auto; max-height: none; min-height: 0px; margin-top: 30px; margin-left: auto; margin-right: auto; margin-bottom: 30px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; }#w_common_text-1578554429929 p, #w_common_text-1578554429141 p, #w_common_text-1578554427933 p, #w_common_text-1578554313622 p, #w_common_text-1578554429926 h2, #w_common_text-1578554427930 h2, #w_common_text-1578554429137 h2, #w_common_text-1578554313622 h2, #w_common_text-1578554371428 h2{ text-align: center;} #w_grid-1572488847140,#w_grid-1593857848327,#w_grid-1592803564863, #w_grid-1572489343351,#w_grid-1590223390278,#w_grid-1576237622504, #w_grid-1604736801991,#w_grid-1572489781176,#w_grid-1609319256652, #w_grid-1572487895503,#w_grid-1572488115554,#w_grid-1604740421031, #w_grid-1604738698947,#w_grid-1604968036856,#w_grid-1604739135890, #w_grid-1604737612608 { width: 100%; max-width: none; min-width: 0px; height: auto; max-height: none; min-height: 200px; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; padding-top: 80px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } #c_portalResProduct_category-15785531691271745,#c_portalResIntro_category-1572489781226,#c_portalResBreadcrumb_nav-1576235311648,#c_portalResIntro_category-1572487895553, #c_portalResIntro_category-1576237565913,#c_portalResIntro_category-1572488115604,#c_portalResBreadcrumb_nav-1572488847205, #c_portalResIntro_category-15724870964176640 { width: auto; max-width: none; min-width: 0px; height: auto; max-height: none; min-height: 45px; margin-top: 22px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; } }