body, html, header, section, div, ul, li, div, a, p, h1 { padding: 0; margin: 0; font-family: "寰蒋闆呴粦", "Microsoft yahei", "Hiragino Sans GB", "鍐潚榛戜綋绠€浣撲腑鏂 w3", "Microsoft Yahei", "Hiragino Sans GB", "鍐潚榛戜綋绠€浣撲腑鏂 w3", STXihei, "鍗庢枃缁嗛粦", SimSun, "瀹嬩綋", Heiti, "榛戜綋", sans-serif !important; } html, body { position: relative; height: 100%; } body { -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } body.active { opacity: 1; } *::-webkit-scrollbar { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ display: none; /* Chrome Safari */ } .wrapper { height: 260px; position: relative; width: 100%; overflow: auto; } div, section, a, p, li, ul, span, h1, h2, h3, h4, h5, time { /* -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;*/ } .am-container { max-width: 86%; } .am-container::before { display: none; } .am-container::after { display: none; } /*澶撮儴瀵艰埅*/ header { position: absolute; left: 0; top: 0; z-index: 999; width: 100%; } header .am-container { max-width: 90%; } header .inner { /*display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;*/ height: 100px; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } header .inner .logo img { /*height: 60px;*/ } header .inner .menu { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .inner .menu nav > ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .inner .menu nav > ul li { text-align: center; list-style-type: none; padding: 0 15px; position: relative; } header .inner .menu nav > ul li a { display: block; font-size: 24px; font-weight: lighter; letter-spacing: 1px; cursor: pointer; color: #a4a4a4; padding-bottom: 3px; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative; text-decoration: none; padding-bottom: 10px; } header .inner .menu nav > ul li a::after { content: ''; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; width: 0; height: 2px; background-color: #fff; } header .inner .menu nav > ul li a:hover { color: #fff; } header .inner .menu nav > ul li a:hover::after { width: 100%; } header .inner .menu nav > ul li.current-menu-item a { color: #fff; text-decoration: none; } header .inner .menu nav > ul li.current-menu-item a::after { width: 100%; } header .inner .menu .lng > ul { display: none; position: absolute; background-color: #333; } header .inner .menu .lng > ul li { padding: 5px 35px; } header .inner .menu .lng > ul li a { display: inline-block; position: relative; line-height: 30px; color: #a4a4a4; } header .inner .menu .lng > ul li a::after { content: ''; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; display: block; width: 0; height: 2px; background-color: #fff; } header .inner .menu .lng > ul li a.active, header .inner .menu .lng > ul li a:hover { color: #fff; font-weight: 600; } header .inner .menu .lng > ul li a.active::after, header .inner .menu .lng > ul li a:hover::after { width: 100%; } header .inner .menu .lng > a { color: #a4a4a4; font-size: 16px; font-weight: 600; border-left: 2px solid #a4a4a4; padding-left: 15px; } header .inner .menu .lng:hover > ul { display: block; } header.fixed { position: fixed; background-color: #0d1429; } .news-back { position: fixed; left: 30px; bottom: 30px; z-index: 9; } .news-back a { text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 20px; color: #fff; color: #8c8c8c; } .news-back a i { margin-right: 5px; } #m-header { display: none; position: fixed; top: 0; z-index: 1200; width: 100%; -webkit-transition: none; -o-transition: none; transition: none; } #m-header.fixed { position: fixed; background-color: #101010; } #m-header .mb-top { width: 100%; height: 100px; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; z-index: 1100; } #m-header .mb-top .logo a img { height: 60px; } #m-header .mb-top .menu { width: 32px; cursor: pointer; margin: 0; z-index: 1300; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #m-header .mb-top .menu .icon { height: 23px; } #m-header .mb-top .menu .icon > span { display: block; background-color: #fff; height: 3px; width: 32px; position: absolute; -webkit-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; border-radius: 2px; } #m-header .mb-top .menu .icon > span:first-child { top: 0; } #m-header .mb-top .menu .icon > span:nth-child(2) { top: 10px; right: 0; } #m-header .mb-top .menu .icon > span:nth-child(3) { top: 20px; } #m-header .mb-mcontainer { position: fixed; width: 0; height: 100%; overflow: scroll; background-color: #000; left: 0; top: 0; z-index: 1200; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #m-header .mb-mcontainer .mlogo { position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #m-header .mb-mcontainer .mlogo a { display: block; } #m-header .mb-mcontainer .mlogo a img { height: 80px; max-width: none } #m-header .mb-mcontainer .lng { -webkit-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); opacity: 0; position: absolute; bottom: 50px; right: 80px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } #m-header .mb-mcontainer .lng a { font-size: 20px; color: #6d6d6d; position: relative; } #m-header .mb-mcontainer .lng a:after { content: ""; width: 0; height: 8px; left: -5%; bottom: 10%; position: absolute; z-index: -1; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; background: rgba(121, 121, 121, 0.6); } #m-header .mb-mcontainer .lng a:hover { color: #fff; } #m-header .mb-mcontainer .lng a:hover:after { width: 90px; } #m-header .mb-mcontainer .lng a.active { color: #fff; font-weight: 600; } #m-header .mb-mcontainer .lng a.active:after { width: 90px; } #m-header .mb-mcontainer .mb-content { width: 100%; text-align: left; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; -webkit-flex-flow: column; flex-flow: column; position: absolute; top: 15%; } #m-header .mb-mcontainer .mb-content ul { padding-left: 0; /*width: 0;*/ margin-top: 0; } #m-header .mb-mcontainer .mb-content ul.syst { margin-top: 30px; } #m-header .mb-mcontainer .mb-content ul li { margin: 0 auto; list-style-type: none; -webkit-transform: skew(0, 0) rotate3d(0, 0, 0, 30deg); transform: skew(0, 0) rotate3d(0, 0, 0, 30deg); opacity: 1; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; /*width: 500px;*/ } #m-header .mb-mcontainer .mb-content ul li a { color: #9e9e9e; font-size: 20px; font-weight: 600; line-height: 2.5; /*letter-spacing: 2px;*/ display: block; padding: 0 3.5rem; position: relative; text-decoration: none; } #m-header .mb-mcontainer .mb-content ul li a i { position: absolute; right: 20px; bottom: 10px; font-size: 20px; } #m-header .mb-mcontainer .mb-content ul li a:after { content: ""; width: 0; height: 16px; left: -5%; top: 45%; position: absolute; z-index: -1; -webkit-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; background: rgba(121, 121, 121, 0.6); } /*#m-header .mb-mcontainer .mb-content ul li a:hover:after { width: 110%; }*/ #m-header .mb-mcontainer .mb-content ul li.current-menu-item > a { position: relative; color: #e8e8e8; } /*#m-header .mb-mcontainer .mb-content ul li.current-menu-item > a:after { width: 110%; }*/ #m-header .mb-mcontainer .mb-content ul li .ernav { background-color: #292727; display: none; /*margin-bottom: 20px;*/ } #m-header .mb-mcontainer .mb-content ul li .ernav ul li a { font-size: 16px; line-height: 42px; font-weight: normal; margin-left: 2rem; border-top: 1px solid #464444; letter-spacing: 0px; } #m-header .mb-mcontainer .mb-content ul li .sannav { display: none; } #m-header .mb-mcontainer .mb-content ul li .sannav ul li a { font-size: 14px; margin-left: 3.5rem; letter-spacing: 0px } #m-header.active { overflow: unset; } #m-header.active .mb-mcontainer, #m-header.active nav { width: 100%; } #m-header.active .mb-top .menu .icon > span:first-child { -webkit-transform: rotate(405deg); -ms-transform: rotate(405deg); transform: rotate(405deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; top: 6px; } #m-header.active .mb-top .menu .icon > span:nth-child(2) { right: -40px; opacity: 0; } #m-header.active .mb-top .menu .icon > span:last-child { -webkit-transform: rotate(-405deg); -ms-transform: rotate(-405deg); transform: rotate(-405deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; top: 6px; } #m-header.active .lng { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } /*#m-header.active .mb-content ul { width: 100%; }*/ /* #m-header.active .mb-content ul li { opacity: 1; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } #m-header.active .mb-content ul li:nth-child(2) { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } #m-header.active .mb-content ul li:nth-child(3) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } #m-header.active .mb-content ul li:nth-child(4) { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } #m-header.active .mb-content ul li:nth-child(5) { -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; } #m-header.active .mb-content ul li:nth-child(6) { -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } #m-header.active .mb-content ul li:nth-child(7) { -webkit-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s; } #m-header.active .mb-content ul li:nth-child(8) { -webkit-transition-delay: 0.8s; -o-transition-delay: 0.8s; transition-delay: 0.8s; }*/ #m-header.active .mng { opacity: 1 !important; } #m-header .am-container { padding: 0 20px; } #m-header .mb-top { height: 80px; padding: 0; } #m-header .mb-top .logo a img { height: 80px; } #m-header .mb-top .menu { width: 28px; } #m-header .mb-top .menu .icon > span { width: 28px; height: 2px; } #m-header .mb-top .menu .icon > span:nth-child(2) { top: 10px; } #m-header .mb-top .menu .icon > span:nth-child(3) { top: 20px; } #m-header .mb-mcontainer .mlogo a img { /*height: 50px;*/ } #m-header .mb-mcontainer .lng { right: 40px; bottom: 30px; } #m-header .mb-mcontainer .lng a { font-size: 18px; } #m-header .mb-mcontainer .lng a:hover { width: 80px; } #m-header .mb-mcontainer .lng a.active::after { width: 80px; } /*#m-header .mb-mcontainer .mb-content ul li a:after { height: 8px; } #m-header .mb-mcontainer .mb-content ul li.current-menu-item > a:after { width: 110%; height: 8px; }*/ #fp-nav ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } #fp-nav ul li { margin-bottom: 5px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } #fp-nav ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; } #fp-nav ul li a span { width: 18px; height: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; border-radius: 50%; -webkit-transition: none; -o-transition: none; transition: none; } #fp-nav ul li a span::before { content: ''; display: block; width: 4px; height: 4px; background-color: #ffffff; border-radius: 10px; overflow: hidden; } #fp-nav ul li a.active span { border: 2px solid #fff; background-color: rgba(0, 0, 0, 0); } li { list-style: none; } a { text-decoration: none; } #home { position: relative; width: 100%; height: 100%; } #home > .swiper-pagination .swiper-pagination-bullet { background-color: rgba(0, 0, 0, 0); margin: 5px 0; width: 18px; height: 18px; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; outline: none; } #home > .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 2px solid #fff; } #home > .swiper-pagination .swiper-pagination-bullet::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; display: block; } #home > .swiper-wrapper { position: relative; width: 100%; height: 100%; } #home > .swiper-wrapper > .swiper-slide { overflow: hidden; width: 100%; height: 100%; background-color: #1a1a1a !important; } #home > .swiper-wrapper > .swiper-slide.s1 { width: 100%; height: 100%; background-size: cover; background-position: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; } #home > .swiper-wrapper > .swiper-slide.s1 .am-container { position: relative; } #home > .swiper-wrapper > .swiper-slide.s1 .am-container h1 { font-size: 72px; color: #fff; line-height: 1.1; letter-spacing: 8px; font-weight: 500; margin-bottom: 0; opacity: 0; padding-left: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-transform: translate(0, -100px); -ms-transform: translate(0, -100px); transform: translate(0, -100px); } #home > .swiper-wrapper > .swiper-slide.s1 .am-container h1 .t2 { padding-left: 11px; } #home > .swiper-wrapper > .swiper-slide.s1 .am-container h1::before { content: ''; display: block; position: absolute; top: 8px; left: 0; height: 60px; width: 8px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #home > .swiper-wrapper > .swiper-slide.s1 .am-container h2 { padding-left: 20px; font-size: 48px; color: #fff; line-height: 1; font-weight: 100; margin-top: 20px; letter-spacing: 4px; width: 600px; opacity: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } #home > .swiper-wrapper > .swiper-slide.s1 .am-container .down { cursor: pointer; margin-top: 100px; opacity: 0; -webkit-animation: down1 1.2s linear infinite; animation: down1 1.2s linear infinite; } #home > .swiper-wrapper > .swiper-slide.s1 .am-container .down img { height: 60px; opacity: 0.5; } #home > .swiper-wrapper > .swiper-slide.s1.swiper-slide-active { opacity: 1; } #home > .swiper-wrapper > .swiper-slide.s1.swiper-slide-active .am-container h1 { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #home > .swiper-wrapper > .swiper-slide.s1.swiper-slide-active .am-container h2 { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; } #home > .swiper-wrapper > .swiper-slide.s1.swiper-slide-active .am-container .down { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } #home > .swiper-wrapper > .swiper-slide.s2 { background-color: #1a1a1a; padding-top: 120px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #home > .swiper-wrapper > .swiper-slide.s2 .am-container { max-width: 80%; } #home > .swiper-wrapper > .swiper-slide.s2 .title { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: left; z-index: 3; -webkit-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); opacity: 0; padding-left: 10px; margin-bottom: 20px; } #home > .swiper-wrapper > .swiper-slide.s2 .title h2 { font-size: 36px; margin: 0; color: #fff; padding-left: 15px; } #home > .swiper-wrapper > .swiper-slide.s2 .title::before { content: ''; display: block; height: 40px; width: 5px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #home > .swiper-wrapper > .swiper-slide.s2 .inner { position: relative; padding-bottom: 100px; top: 100px; opacity: 0; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: absolute; width: 100%; bottom: 30px; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-pagination { position: relative; top: unset; left: unset; right: unset; bottom: unset; margin: 0 20px; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-pagination .swiper-pagination-bullet { background-color: #ffffff; margin: 0 4px; outline: none; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-button-prev, #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-button-next { outline: none; position: relative; top: unset; left: unset; right: unset; bottom: unset; width: 32px; margin: 0 5px; height: 32px; border: 1px solid #fff; border-radius: 50%; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-button-prev::after, #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-button-next::after { font-size: 18px; font-weight: 600; color: #fff; font: normal normal normal 1.6rem/1 FontAwesome, sans-serif; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-button-prev::after { content: "\f104"; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .nav .swiper-button-next::after { content: "\f105"; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .swiper-container .swiper-wrapper .swiper-slide { border-radius: 5px; overflow: hidden; cursor: pointer; position: relative; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); } #home > .swiper-wrapper > .swiper-slide.s2 .inner .swiper-container .swiper-wrapper .swiper-slide img { -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .swiper-container .swiper-wrapper .swiper-slide .bd { overflow: hidden; padding: 30px 20px; background-color: #fff; border-bottom: 10px solid #fff; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .swiper-container .swiper-wrapper .swiper-slide .bd h3 { white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; width: 100%; font-size: 18px; color: #333; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .swiper-container .swiper-wrapper .swiper-slide .bd p { font-size: 15px; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #home > .swiper-wrapper > .swiper-slide.s2 .inner .swiper-container .swiper-wrapper .swiper-slide:hover { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #home > .swiper-wrapper > .swiper-slide.s2 .inner .swiper-container .swiper-wrapper .swiper-slide:hover .bd { border-bottom: 10px solid #D93244; } #home > .swiper-wrapper > .swiper-slide.s2.swiper-slide-active .inner { top: 0; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #home > .swiper-wrapper > .swiper-slide.s2.swiper-slide-active .title { opacity: 1; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #home > .swiper-wrapper > .swiper-slide.s3 { width: 100%; height: 100%; background-color: #1a1a1a; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #home > .swiper-wrapper > .swiper-slide.s3 .am-container { max-width: 1200px; padding-top: 150px; } #home > .swiper-wrapper > .swiper-slide.s3 .am-container .title { text-align: center; width: 100%; z-index: 2; opacity: 0; } #home > .swiper-wrapper > .swiper-slide.s3 .am-container .title h3 { color: #b8b8b8; font-size: 24px; } #home > .swiper-wrapper > .swiper-slide.s3 .am-container .title h2 { font-size: 36px; color: #fff; margin-top: 0; letter-spacing: 5px; display: inline-block; line-height: 1; display: flex; justify-content: center; } #home > .swiper-wrapper > .swiper-slide.s3 .am-container .title h2::before { content: ''; display: block; position: relative; height: 36px; width: 5px; top: 0; left: -8px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #home > .swiper-wrapper > .swiper-slide.s3 .am-container .title hr { width: 50px; border: 0; height: 5px; margin: 0 auto; background-image: -o-linear-gradient(left, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, right top, from(#D93244), to(#9D2333)); background-image: linear-gradient(90deg, #D93244 0%, #9D2333 100%); } #home > .swiper-wrapper > .swiper-slide.s3 .am-container .inner { text-align: center; margin: 0 auto; max-width: 800px; z-index: 1; opacity: 0; margin-top: 80px; -webkit-transform: translate(0, 200px); -ms-transform: translate(0, 200px); transform: translate(0, 200px); } #home > .swiper-wrapper > .swiper-slide.s3 .am-container .inner img { margin: 0 auto; max-width: 90%; height: auto; } #home > .swiper-wrapper > .swiper-slide.s3.swiper-slide-active .am-container .title { opacity: 1; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #home > .swiper-wrapper > .swiper-slide.s3.swiper-slide-active .am-container .inner { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-transition-duration: 1.5s; -o-transition-duration: 1.5s; transition-duration: 1.5s; } #home > .swiper-wrapper > .swiper-slide.s4 { height: 100%; width: 100%; /*display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;*/ -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-top: 190px; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container { /*display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;*/ -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .left { padding: 0 40px 0 0; width: 58%; -webkit-transform: translate(50%, -1000px); -ms-transform: translate(50%, -1000px); transform: translate(50%, -1000px); position: relative; z-index: 2; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .left img { max-width: 100%; height: auto; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right { width: 42%; padding: 0px; -webkit-transform: translate(-50%, -1000px); -ms-transform: translate(-50%, -1000px); transform: translate(-50%, -1000px); position: relative; z-index: 1; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right p { color: #e7e7e7; font-size: 16px; line-height: 2; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb { display: flex; justify-content: space-between; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; opacity: 0; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn span { color: #fff; margin-right: 15px; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn .cic { width: 60px; height: 60px; position: relative; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn .cic .circle1 { width: 60px; height: 60px; border: 2px solid #5f5f5f; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; left: 0; z-index: 1; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn .cic .circle2 { width: 60px; height: 60px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2px solid transparent; border-right: 2px solid transparent; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); position: absolute; top: 0; left: 0; z-index: 2; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn .cic .circle2::before { content: ''; display: block; width: 8px; height: 8px; background-color: #FF1C2B; position: absolute; right: -3px; top: 2px; z-index: 9; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); border-radius: 50%; z-index: 10; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn .cic img { position: absolute; top: 50%; left: 50%; width: 18px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 20; } #home > .swiper-wrapper > .swiper-slide.s4 .am-container .right .bb .primary-btn:hover .cic .circle2 { z-index: 99; border-top: 2px solid #FF1C2B; border-left: 2px solid #FF1C2B; -webkit-transform: rotate(405deg); -ms-transform: rotate(405deg); transform: rotate(405deg); -webkit-transition-duration: 1.1s; -o-transition-duration: 1.1s; transition-duration: 1.1s; } #home > .swiper-wrapper > .swiper-slide.s4.swiper-slide-active .left { -webkit-animation: move1 2s 0.4s forwards; animation: move1 2s 0.4s forwards; } #home > .swiper-wrapper > .swiper-slide.s4.swiper-slide-active .right { -webkit-animation: move2 2s 0.4s forwards; animation: move2 2s 0.4s forwards; } #home > .swiper-wrapper > .swiper-slide.s4.swiper-slide-active .right .bb .primary-btn { opacity: 1; -webkit-transition-delay: 2.4s; -o-transition-delay: 2.4s; transition-delay: 2.4s; } #home > .swiper-wrapper > .swiper-slide.s5 { background-color: #1a1a1a; background-size: cover; background-position: center bottom; position: relative; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; cursor: pointer; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn span { color: #fff; margin-right: 15px; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn .cic { width: 80px; height: 80px; position: relative; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn .cic .circle1 { width: 80px; height: 80px; border: 2px solid #5f5f5f; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 0; left: 0; z-index: 1; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn .cic .circle2 { width: 80px; height: 80px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-bottom: 2px solid transparent; border-right: 2px solid transparent; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); transform: rotate(225deg); position: absolute; top: 0; left: 0; z-index: 2; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn .cic .circle2::before { content: ''; display: block; width: 8px; height: 8px; background-color: #FF1C2B; position: absolute; right: 4px; top: 2px; z-index: 9; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); transform: translate(-50%, 50%); border-radius: 50%; z-index: 10; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn .cic img { position: absolute; top: 50%; left: 50%; width: 25px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 20; } #home > .swiper-wrapper > .swiper-slide.s5 .primary-btn:hover .cic .circle2 { z-index: 99; border-top: 2px solid #FF1C2B; border-left: 2px solid #FF1C2B; -webkit-transform: rotate(405deg); -ms-transform: rotate(405deg); transform: rotate(405deg); -webkit-transition-duration: 1.1s; -o-transition-duration: 1.1s; transition-duration: 1.1s; } #home > .swiper-wrapper > .swiper-slide.s5 .f1 { max-width: 600px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100vh; opacity: 0; } #home > .swiper-wrapper > .swiper-slide.s5 .f1 .left { margin-top: -100px; padding: 40px; width: 50%; -webkit-transform: translate(50%, 0) scale(0.6); -ms-transform: translate(50%, 0) scale(0.6); transform: translate(50%, 0) scale(0.6); position: relative; z-index: 2; } #home > .swiper-wrapper > .swiper-slide.s5 .f1 .left img { max-width: 100%; height: auto; } #home > .swiper-wrapper > .swiper-slide.s5 .f1 .right { margin-top: -100px; width: 50%; padding: 40px; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); position: relative; z-index: 1; opacity: 0; } #home > .swiper-wrapper > .swiper-slide.s5 .f1 .right p { color: #e7e7e7; font-size: 16px; line-height: 2; } #home > .swiper-wrapper > .swiper-slide.s5 .f2 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; margin: 0 auto; padding: 0 40px; bottom: 30px; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #home > .swiper-wrapper > .swiper-slide.s5 .f2.am-container { max-width: 1024px; } #home > .swiper-wrapper > .swiper-slide.s5 .f2 .item { width: 33.333%; opacity: 0; padding-right: 15px; } #home > .swiper-wrapper > .swiper-slide.s5 .f2 .item h3 { color: #fff; } #home > .swiper-wrapper > .swiper-slide.s5 .f2 .item .ewm img { width: 100px; } #home > .swiper-wrapper > .swiper-slide.s5 .f2 .item ul li { color: #9a9a9a; line-height: 2; font-size: 14px; } #home > .swiper-wrapper > .swiper-slide.s5 .f2 .item ul li a { color: #9a9a9a; font-size: 14px; } #home > .swiper-wrapper > .swiper-slide.s5.swiper-slide-active .f1, #home > .swiper-wrapper > .swiper-slide.s5.swiper-slide-active .f2 { opacity: 1; } #home > .swiper-wrapper > .swiper-slide.s5.swiper-slide-active .left { -webkit-animation: move3 2s 0.8s forwards; animation: move3 2s 0.8s forwards; } #home > .swiper-wrapper > .swiper-slide.s5.swiper-slide-active .right { -webkit-animation: move4 2s 0.8s forwards; animation: move4 2s 0.8s forwards; } #home > .swiper-wrapper > .swiper-slide.s5.swiper-slide-active .f2 .item { opacity: 1; -webkit-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; } #product { height: 100vh; background-color: #1a1a1a; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; } #product .item { position: relative; opacity: 0; width: 20%; height: 100vh; overflow: hidden; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-left: 20px; padding-right: 20px; background-color: #1a1a1a; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-animation-duration: 0.4s !important; animation-duration: 0.4s !important; } #product .item:nth-child(1) { z-index: 5; } #product .item:nth-child(2) { z-index: 4; } #product .item:nth-child(3) { z-index: 3; } #product .item:nth-child(4) { z-index: 2; } #product .item:nth-child(5) { z-index: 1; } #product .item .cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background-color: rgba(0, 0, 0, 0.3); } #product .item .cover .bd { width: 100%; position: absolute; bottom: 100px; left: 0; text-align: center; } #product .item .cover .bd .left { position: relative; text-align: center; } #product .item .cover .bd .left h3 { color: #ccc; font-size: 24px; margin-bottom: 0; } #product .item .cover .bd .left p { font-size: 16px; color: #ccc; } #product .item:not(:last-child) { border-right: 1px solid #464646; } #product .item img { margin: 0 auto; max-width: 100%; flex-shrink: 0; height: auto; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #product .item:hover { width: 35%; } #product .item:hover img { max-width: 100%; } #product .item:hover .cover { background-color: rgba(0, 0, 0, 0); } #single-product { position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 1; } #single-product > .swiper-pagination .swiper-pagination-bullet { background-color: rgba(0, 0, 0, 0); margin: 10px 0; width: 18px; height: 18px; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; outline: none; } #single-product > .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 2px solid #fff; } #single-product > .swiper-pagination .swiper-pagination-bullet::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; display: block; } #single-product > .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; -webkit-box-sizing: content-box; box-sizing: content-box; } #single-product > .swiper-wrapper > .swiper-slide { overflow: hidden; width: 100%; height: 100%; background-color: #1a1a1a !important; } #single-product > .swiper-wrapper > .swiper-slide.f1 { background-color: #1a1a1a; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #single-product > .swiper-wrapper > .swiper-slide.f1 .down { cursor: pointer; position: absolute; bottom: 10px; left: 50%; opacity: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-animation: down 1.2s linear infinite; animation: down 1.2s linear infinite; } #single-product > .swiper-wrapper > .swiper-slide.f1 .down img { height: 40px; opacity: 0.5; } #single-product > .swiper-wrapper > .swiper-slide.f1 .news-back { opacity: 0; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; max-width: 1200px; position: relative; padding-top: 80px; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .cover { position: absolute; width: 100%; left: 0; top: 0; -webkit-animation: ss 8s linear infinite; animation: ss 8s linear infinite; z-index: 1; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .cover img { max-width: 100%; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding-top: 20px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 2; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left { width: 50%; position: relative; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .title { text-align: left; width: 100%; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); padding-left: 15px; border-left: 5px solid; border-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%) 30 30; margin-bottom: 20px; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .title h3 { color: #b8b8b8; font-size: 24px; margin-bottom: 0; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .title h2 { font-size: 36px; color: #fff; margin-top: 0; letter-spacing: 5px; display: inline-block; margin-bottom: 0; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .wrapper { opacity: 0; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left p { max-width: 720px; font-size: 16px; color: #e8e8e8; line-height: 2; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .bot { margin-top: 120px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; opacity: 0; -webkit-transform: translate(-40px, 50px); -ms-transform: translate(-40px, 50px); transform: translate(-40px, 50px); } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .bot .item { width: 25%; text-align: center; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .bot .item img { height: 30px; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .left .bot .item h4 { color: #fff; margin-top: 15px; } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .right { width: 50%; padding-left: 40px; opacity: 0; -webkit-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } #single-product > .swiper-wrapper > .swiper-slide.f1.type1 .am-container .inner .right img { margin: 0 auto; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; max-width: 1200px; position: relative; padding-top: 60px; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .cover { position: absolute; width: 100%; top: 10%; left: 0; -webkit-animation: ss 8s linear infinite; animation: ss 8s linear infinite; z-index: 1; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .cover img { max-width: 100%; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .top { text-align: center; opacity: 0; margin-bottom: 60px; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); position: relative; z-index: 2; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .top h3 { color: #b8b8b8; font-size: 24px; margin-bottom: 0; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .top h2 { font-size: 36px; color: #fff; margin-top: 0; letter-spacing: 5px; display: inline-block; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .top hr { width: 40px; border: 0; height: 5px; margin: 0 auto; background-image: -o-linear-gradient(left, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, right top, from(#D93244), to(#9D2333)); background-image: linear-gradient(90deg, #D93244 0%, #9D2333 100%); } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .mid { max-width: 600px; margin: 30px auto; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); position: relative; z-index: 2; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .mid img { margin: 0 auto; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .bot { opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); max-width: 820px; margin: 0 auto; margin-top: 40px; margin-bottom: 40px; position: relative; z-index: 2; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .bot p { text-align: center; color: #ccc; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .dd { position: relative; z-index: 2; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); max-width: 820px; margin: 0 auto; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .dd .inner { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .dd .inner .item { width: 25%; text-align: center; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .dd .inner .item img { height: 30px; } #single-product > .swiper-wrapper > .swiper-slide.f1.type2 .am-container .dd .inner .item h4 { color: #fff; margin-top: 15px; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .down { opacity: 1; -webkit-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .news-back { opacity: 1; transition-delay: 3s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type1 .am-container .inner .left .title { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type1 .am-container .inner .left p, #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type1 .am-container .inner .left .wrapper { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type1 .am-container .inner .left .bot { opacity: 1; -webkit-transform: translate(-40px, 0); -ms-transform: translate(-40px, 0); transform: translate(-40px, 0); -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type1 .am-container .inner .right { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type2 .news-back { opacity: 1; -webkit-transition-delay: 4s; -o-transition-delay: 4s; transition-delay: 4s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type2 .down { opacity: 1; -webkit-transition-delay: 4s; -o-transition-delay: 4s; transition-delay: 4s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type2 .am-container .inner .top { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type2 .am-container .inner .mid { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type2 .am-container .inner .bot { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active.type2 .am-container .inner .dd { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-delay: 3.5s; -o-transition-delay: 3.5s; transition-delay: 3.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #single-product > .swiper-wrapper > .swiper-slide.f2 { background-color: #1a1a1a; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #single-product > .swiper-wrapper > .swiper-slide.f2 .news-back { opacity: 0; } #single-product > .swiper-wrapper > .swiper-slide.f2 .xs { opacity: 0; } #single-product > .swiper-wrapper > .swiper-slide.f2 .left { width: -webkit-calc(0%); width: calc(50% - 50px); height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: relative; } #single-product > .swiper-wrapper > .swiper-slide.f2 .left img { flex-shrink: 0; max-width: 80%; margin-top: 100px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .mid { width: 100vh; height: 100px; position: absolute; top: 50%; left: 50%; background-color: #252525; -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); text-align: center; color: #fff; line-height: 100px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .mid .bd span { cursor: pointer; margin: 0 10px; color: #666; } #single-product > .swiper-wrapper > .swiper-slide.f2 .mid .bd span.active, #single-product > .swiper-wrapper > .swiper-slide.f2 .mid .bd span:hover { color: #fff; font-weight: 600; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right { width: -webkit-calc(0%); width: calc(50% - 50px); height: 100%; color: #fff; padding: 10% 40px 0 80px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .title { opacity: 0; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px); } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .title h3 { font-size: 36px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .title hr { text-align: left; width: 50px; border: 0; height: 5px; background-image: -o-linear-gradient(left, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, right top, from(#D93244), to(#9D2333)); background-image: linear-gradient(90deg, #D93244 0%, #9D2333 100%); } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100%; margin-top: 60px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner .item { width: 50%; margin-bottom: 50px; position: relative; opacity: 0; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px); padding-right: 15px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.pz { counter-reset: count; margin-top: 80px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.pz .item::before { content: "0" counter(count); counter-increment: count; font-size: 38px; color: #414141; display: inline-block; line-height: 1; z-index: -1; font-weight: 600; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.pz .item p { font-size: 20px; color: #d2d2d2; position: relative; z-index: 2; font-weight: 600; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.pz .item h4 { margin-top: 5px; font-size: 15px; font-weight: normal; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.tx .item { margin-bottom: 40px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.tx .item h4 { color: #8c8c8c; font-size: 16px; margin-bottom: 0; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.tx .item p { font-size: 16px; } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.yy ul li { line-height: 2.2; font-size: 16px; list-style-type: disc; opacity: 0; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px); } #single-product > .swiper-wrapper > .swiper-slide.f2 .right .inner.yy ul li span { color: #d1d1d1; } #single-product > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .news-back { opacity: 1; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transform: none; -ms-transform: none; transform: none; } #single-product > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .mid { opacity: 1; -webkit-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; -webkit-transition-duration: 0; -o-transition-duration: 0; transition-duration: 0; } #single-product > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .right .title { opacity: 1; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transform: none; -ms-transform: none; transform: none; } #single-product > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .right .inner .item { opacity: 1; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transform: none; -ms-transform: none; transform: none; } #single-product > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .right .inner.yy ul li { opacity: 1; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transform: none; -ms-transform: none; transform: none; } #solution { position: relative; width: 100%; height: 100%; } #solution > .swiper-pagination .swiper-pagination-bullet { background-color: rgba(0, 0, 0, 0); margin: 10px 0; width: 18px; height: 18px; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; outline: none; } #solution > .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 2px solid #fff; } #solution > .swiper-pagination .swiper-pagination-bullet::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; display: block; } #solution > .swiper-wrapper { position: relative; width: 100%; height: 100%; } #solution > .swiper-wrapper > .swiper-slide { overflow: hidden; width: 100%; height: 100%; background-color: #1a1a1a !important; } #solution > .swiper-wrapper > .swiper-slide.f1 { background-color: #1a1a1a; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #solution > .swiper-wrapper > .swiper-slide.f1 .down { cursor: pointer; position: absolute; bottom: 20px; left: 50%; opacity: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); -webkit-animation: down 1.2s linear infinite; animation: down 1.2s linear infinite; } #solution > .swiper-wrapper > .swiper-slide.f1 .down img { height: 40px; opacity: 0.5; } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .title { text-align: center; width: 100%; opacity: 0; -webkit-transform: scale(0.5, 0.5); -ms-transform: scale(0.5, 0.5); transform: scale(0.5, 0.5); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .title h3 { color: #b8b8b8; font-size: 18px; letter-spacing: 2px; margin-top: 10px; } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .title h2 { font-size: 32px; color: #fff; margin-top: 0; letter-spacing: 5px; display: inline-block; } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .title hr { width: 50px; border: 0; height: 5px; margin: 0 auto; background-image: -o-linear-gradient(left, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, right top, from(#D93244), to(#9D2333)); background-image: linear-gradient(90deg, #D93244 0%, #9D2333 100%); } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .inner { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding-top: 10px; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .inner .left { width: 50%; padding: 20px 40px; } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .inner .left > img { opacity: 0; -webkit-transform: translate(-100px, 0); -ms-transform: translate(-100px, 0); transform: translate(-100px, 0); } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .inner .right { width: 50%; padding: 20px 40px; opacity: 0; -webkit-transform: translate(100px, 0); -ms-transform: translate(100px, 0); transform: translate(100px, 0); } #solution > .swiper-wrapper > .swiper-slide.f1 .am-container .inner .right p { color: #bbb; font-size: 16px; line-height: 2; } #solution > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .down { opacity: 1; -webkit-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } #solution > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .title { opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } #solution > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .inner .left > img { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #solution > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .inner .left .bot { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #solution > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .inner .right { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #research { height: 100vh; overflow: hidden; background-size: cover; background-position: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; } #research .am-container { max-width: 1400px; } #research .am-container .top { text-align: center; opacity: 0; -webkit-transform: translate(0, -50px); -ms-transform: translate(0, -50px); transform: translate(0, -50px); } #research .am-container .top.active { opacity: 1; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #research .am-container .top .btn { height: 55px; width: 360px; background: #393939; -webkit-box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.8); box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.8); border-radius: 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: -webkit-inline-flex; display: inline-flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; position: relative; } #research .am-container .top .btn::before { content: ''; width: 50%; border-radius: 30px; height: 55px; background-color: #fff; position: absolute; top: 0; left: 0; z-index: 1; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; } #research .am-container .top .btn span { color: #fff; font-weight: 600; letter-spacing: 1px; z-index: 2; font-size: 16px; line-height: 55px; width: 50%; text-align: center; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; cursor: pointer; } #research .am-container .top .btn span.a1 { color: #000; } #research .am-container .top .btn.active::before { -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transform: translate(180px, 0); -ms-transform: translate(180px, 0); transform: translate(180px, 0); } #research .am-container .top .btn.active span.a1 { color: #fff; } #research .am-container .top .btn.active span.a2 { color: #000; } #research .am-container .inner { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; color: #fff; text-align: center; margin-top: 120px; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #research .am-container .inner .left { width: 33.333%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; opacity: 0; -webkit-transform: translate(-150px, 0); -ms-transform: translate(-150px, 0); transform: translate(-150px, 0); -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #research .am-container .inner .left .item { width: 50%; margin-bottom: 60px; } #research .am-container .inner .left .item img { height: 50px; } #research .am-container .inner .left .item p { color: #fff; font-size: 16px; letter-spacing: 1px; margin-top: 15px; } #research .am-container .inner .mid { width: 33.333%; text-align: center; position: relative; opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); } #research .am-container .inner .mid.active { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #research .am-container .inner .mid .c1 { width: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(30deg); -ms-transform: translate(-50%, -50%) rotate(30deg); transform: translate(-50%, -50%) rotate(30deg); z-index: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #research .am-container .inner .mid .c1::before { content: ''; display: block; width: 24px; height: 24px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); position: absolute; border-radius: 50%; left: 0; top: 50%; -webkit-transform: translate(-50%, 0) rotate(0); -ms-transform: translate(-50%, 0) rotate(0); transform: translate(-50%, 0) rotate(0); } #research .am-container .inner .mid .c2 { max-width: 88%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } #research .am-container .inner .mid .c3 { max-width: 80%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; } #research .am-container .inner .mid .c4 { position: absolute; width: 100%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 4; } #research .am-container .inner .mid .c4 p { color: #4A4A4A; font-size: 18px; line-height: 2.2; font-weight: 600; } #research .am-container .inner .right { width: 33.333%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-transform: translate(150px, 0); -ms-transform: translate(150px, 0); transform: translate(150px, 0); opacity: 0; } #research .am-container .inner .right .item { width: 50%; margin-bottom: 60px; } #research .am-container .inner .right .item img { height: 50px; } #research .am-container .inner .right .item p { color: #fff; font-size: 16px; letter-spacing: 1px; margin-top: 15px; } #research .am-container .inner.active .left .left { opacity: 1; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #research .am-container .inner.active .mid .c1 { -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(-50%, -50%) rotate(155deg); -ms-transform: translate(-50%, -50%) rotate(155deg); transform: translate(-50%, -50%) rotate(155deg); } #research .am-container .inner.active .right { -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } #research::before { content: ''; height: 100vw; width: 100vw; display: block; background: rgba(42, 42, 42, 0.8); border: 4px solid rgba(255, 255, 255, 0.32); border-radius: 50%; position: absolute; left: -50vw; top: -25vw; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #research.load .am-container .inner .left { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #research.active::before { left: 50vw; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #about { position: relative; width: 100%; height: 100%; } #about > .swiper-pagination .swiper-pagination-bullet { background-color: rgba(0, 0, 0, 0); margin: 10px 0; width: 18px; height: 18px; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; outline: none; } #about > .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { border: 2px solid #fff; } #about > .swiper-pagination .swiper-pagination-bullet::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; display: block; } #about > .swiper-wrapper { position: relative; width: 100%; height: 100%; } #about > .swiper-wrapper > .swiper-slide { overflow: hidden; width: 100%; height: 100%; background-color: #1a1a1a !important; } #about > .swiper-wrapper > .swiper-slide.f1 { background-color: #1a1a1a; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #about > .swiper-wrapper > .swiper-slide.f1 .ss { width: 100%; position: absolute; } #about > .swiper-wrapper > .swiper-slide.f1 .ss img { margin: 0 auto; -webkit-animation: ss 8s linear infinite; animation: ss 8s linear infinite; } #about > .swiper-wrapper > .swiper-slide.f1 .am-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; position: relative; } #about > .swiper-wrapper > .swiper-slide.f1 .am-container h1 { font-size: 64px; color: #fff; line-height: 1.1; letter-spacing: 5px; font-weight: 600; margin-bottom: 0; opacity: 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #about > .swiper-wrapper > .swiper-slide.f1 .am-container h1 span { padding-left: 20px; } #about > .swiper-wrapper > .swiper-slide.f1 .am-container h1::before { content: ''; display: block; position: relative; height: 64px; width: 8px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #about > .swiper-wrapper > .swiper-slide.f1 .am-container h2 { font-size: 48px; font-weight: 100; color: #fff; letter-spacing: 5px; margin-top: 15px; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); } #about > .swiper-wrapper > .swiper-slide.f1 .am-container .down { cursor: pointer; margin-top: 100px; opacity: 0; -webkit-animation: down1 1.2s linear infinite; animation: down1 1.2s linear infinite; } #about > .swiper-wrapper > .swiper-slide.f1 .am-container .down img { height: 60px; opacity: 0.5; } #about > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .am-container h1 { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #about > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .am-container h2 { opacity: 1; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #about > .swiper-wrapper > .swiper-slide.f1.swiper-slide-active .am-container .down { opacity: 1; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #about > .swiper-wrapper > .swiper-slide.f2 { background-color: #1a1a1a; width: 100%; height: 100%; padding-top: 100px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #about > .swiper-wrapper > .swiper-slide.f2 .am-container { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; max-width: 1200px; } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .left { opacity: 0; width: 50%; background-color: #252525; padding: 40px; position: relative; -webkit-transform: translate(-100px, 0); -ms-transform: translate(-100px, 0); transform: translate(-100px, 0); } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .left h2 { color: #fff; font-size: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .left h2 span { padding-left: 15px; } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .left h2::before { position: relative; content: ''; display: block; height: 36px; width: 5px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .left p { font-size: 16px; font-weight: 600; color: #9e9e9e; } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .left hr { width: 30px; border: 0; height: 5px; background-image: -o-linear-gradient(left, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, right top, from(#D93244), to(#9D2333)); background-image: linear-gradient(90deg, #D93244 0%, #9D2333 100%); } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .right { width: 50%; padding: 40px 0 40px 80px; } #about > .swiper-wrapper > .swiper-slide.f2 .am-container .right p { font-size: 16px; color: #d2d2d2; line-height: 2; margin: 20px 0; opacity: 0; } #about > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .am-container .left { opacity: 1; -webkit-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #about > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .am-container .right p { opacity: 1; } #about > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .am-container .right p:nth-child(1) { -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #about > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .am-container .right p:nth-child(2) { -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #about > .swiper-wrapper > .swiper-slide.f2.swiper-slide-active .am-container .right p:nth-child(3) { -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #about > .swiper-wrapper > .swiper-slide.f3 { background-size: cover; background-position: center; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #about > .swiper-wrapper > .swiper-slide.f3 .am-container .title { margin-bottom: 40px; opacity: 0; -webkit-transform: translate(-100px, 0); -ms-transform: translate(-100px, 0); transform: translate(-100px, 0); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; } #about > .swiper-wrapper > .swiper-slide.f3 .am-container .title::before { content: ''; display: block; position: relative; height: 40px; width: 5px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #about > .swiper-wrapper > .swiper-slide.f3 .am-container .title h2 { color: #fff; font-size: 42px; margin-bottom: 0; padding-left: 15px; } #about > .swiper-wrapper > .swiper-slide.f3 .am-container .title h4 { font-size: 30px; font-weight: 600; color: #9e9e9e; margin-top: 10px; } #about > .swiper-wrapper > .swiper-slide.f3 .am-container .title hr { width: 40px; border: 0; height: 5px; background-image: -o-linear-gradient(left, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, right top, from(#D93244), to(#9D2333)); background-image: linear-gradient(90deg, #D93244 0%, #9D2333 100%); } #about > .swiper-wrapper > .swiper-slide.f3 .am-container p { margin-left: 20px; font-size: 18px; font-weight: bold; max-width: 520px; color: #fff; line-height: 2; opacity: 0; -webkit-transform: translate(0, 60px); -ms-transform: translate(0, 60px); transform: translate(0, 60px); } #about > .swiper-wrapper > .swiper-slide.f3.swiper-slide-active { opacity: 1; } #about > .swiper-wrapper > .swiper-slide.f3.swiper-slide-active .am-container .title { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; } #about > .swiper-wrapper > .swiper-slide.f3.swiper-slide-active .am-container p { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } #contact { background-color: #151515; height: 100vh; width: 100%; position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #contact .am-container { width: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-top: 60px; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } #contact .am-container .left { width: 50%; position: relative; } #contact .am-container .left::before { content: ''; display: block; width: 3px; height: 100vh; background-color: #282828; position: absolute; top: 0; z-index: 1; } #contact .am-container .left .job { position: relative; z-index: 2; background-color: rgba(0, 0, 0, 0.38); padding: 40px; opacity: 0; -webkit-transform: translate(-100px, 0); -ms-transform: translate(-100px, 0); transform: translate(-100px, 0); } #contact .am-container .left .job h2 { color: #fff; font-size: 32px; margin-bottom: 10px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } #contact .am-container .left .job h2 span { padding-left: 15px; } #contact .am-container .left .job h2::before { content: ''; display: block; position: relative; height: 40px; width: 5px; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #contact .am-container .left .job h4 { font-size: 18px; font-weight: 600; color: #9e9e9e; margin-top: 0px; } #contact .am-container .left .job hr { width: 40px; border: 0; height: 5px; background-image: -o-linear-gradient(left, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, right top, from(#D93244), to(#9D2333)); background-image: linear-gradient(90deg, #D93244 0%, #9D2333 100%); } #contact .am-container .left .job p { margin-top: 20px; font-weight: 500; font-size: 16px; color: #fff; line-height: 2; } #contact .am-container .left .contact { position: absolute; z-index: 2; bottom: 0; left: 0; padding-left: 40px; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); } #contact .am-container .left .contact p { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; margin: 15px 0 0; color: #898989; } #contact .am-container .left .contact p img { margin-left: 3px; margin-right: 18px; } #contact .am-container .left .contact p:nth-child(1) img { margin-left: 0; margin-right: 15px; } #contact .am-container .right { width: 50%; } #contact .am-container .right::after { content: ''; display: block; width: 3px; height: 100vh; background-color: #282828; position: absolute; top: 0; z-index: 1; } #contact .am-container .right .top { cursor: pointer; opacity: 0; -webkit-transform: translate(100px, 0); -ms-transform: translate(100px, 0); transform: translate(100px, 0); } #contact .am-container .right .top img { max-width: 80%; -webkit-animation: ss 8s linear infinite; animation: ss 8s linear infinite; } #contact .am-container .right .bot { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-top: 100px; padding-left: 100px; opacity: 0; -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); position: relative; z-index: 2; } #contact .am-container .right .bot::before { content: ''; display: block; position: absolute; top: 0; left: -1px; height: 50px; width: 6px; z-index: 2; background-image: -o-linear-gradient(top, #D93244 0%, #9D2333 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#D93244), to(#9D2333)); background-image: linear-gradient(180deg, #D93244 0%, #9D2333 100%); } #contact .am-container .right .bot .item { width: 50%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #contact .am-container .right .bot .item img { margin-right: 15px; } #contact .am-container .right .bot .item:nth-child(2) img { margin-right: 16px; } #contact .am-container .right .bot .item .bd h3 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 16px; color: #fff; } #contact .am-container .right .bot .item .bd p { color: #fff; } #contact #map { position: absolute; left: 0; z-index: 9; width: 100%; bottom: -800px; } #contact #map > img { cursor: pointer; } #contact #map #bj { text-align: center; } #contact #map #bj img { height: 30px; cursor: pointer; } #contact #map.active { bottom: 0; } #contact.active .am-container .left .job { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #contact.active .am-container .left .contact { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #contact.active .am-container .right .top { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #contact.active .am-container .right .bot { opacity: 1; -webkit-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } #single-news .am-container { padding-top: 200px; max-width: 860px; opacity: 0; -webkit-transform: translate(0, 100px); -ms-transform: translate(0, 100px); transform: translate(0, 100px); } #single-news .am-container .title { margin-bottom: 40px; } #single-news .am-container .title h2 { color: #fff; font-size: 32px; } #single-news .am-container .inner { padding-bottom: 40px; } #single-news .am-container .inner p { color: #a3a3a3; line-height: 1.8; margin: 1.5rem 0; font-size: 18px; } #single-news .am-container .inner h4 { color: #fff; margin-top: 0; } #single-news .am-container .inner h5 { text-align: center; color: #a3a3a3; margin-top: 0; font-size: 14px; max-width: 70%; margin: 0 auto; } #single-news .am-container .inner img { max-width: 100%; margin: 1.5rem auto 0; } #single-news .am-container .nav { padding-bottom: 40px; } #single-news .am-container .nav .bd { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } #single-news .am-container .nav .bd a { font-size: 18px; width: 150px; margin: 0 20px; height: 40px; border: 1px solid #6d6d6d; text-align: center; line-height: 40px; color: #6d6d6d; text-transform: uppercase; } #single-news .am-container .nav .bd a:hover { color: #fff; background-color: rgba(0, 0, 0, 0.3); } #single-news.active .am-container { opacity: 1; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } @-webkit-keyframes bounce-down { 25% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(3px); transform: translateY(3px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounce-down { 25% { -webkit-transform: translateY(-3px); transform: translateY(-3px); } 50% { -webkit-transform: translateY(0); transform: translateY(0); } 75% { -webkit-transform: translateY(3px); transform: translateY(3px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes ss { 25% { opacity: 0.6; } 50% { opacity: 1; } 75% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes ss { 25% { opacity: 0.6; } 50% { opacity: 1; } 75% { opacity: 0.6; } 100% { opacity: 1; } } @-webkit-keyframes down { 25% { -webkit-transform: translate(-50%, -5px); transform: translate(-50%, -5px); } 50% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } 75% { -webkit-transform: translate(-50%, 5px); transform: translate(-50%, 5px); } 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @keyframes down { 25% { -webkit-transform: translate(-50%, -5px); transform: translate(-50%, -5px); } 50% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } 75% { -webkit-transform: translate(-50%, 5px); transform: translate(-50%, 5px); } 100% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } @-webkit-keyframes down1 { 25% { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 75% { -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes down1 { 25% { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 75% { -webkit-transform: translate(0, 5px); transform: translate(0, 5px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } /*鍏叡*/ @-webkit-keyframes move1 { 0% { -webkit-transform: translate(330px, -1000px); transform: translate(330px, -1000px); } 20% { -webkit-transform: translate(330px, 0); transform: translate(330px, 0); } 40% { -webkit-transform: translate(330px, -50px); transform: translate(330px, -50px); } 60% { -webkit-transform: translate(330px, 0px); transform: translate(330px, 0px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes move2 { 0% { -webkit-transform: translate(-330px, -1000px); transform: translate(-330px, -1000px); } 20% { -webkit-transform: translate(-330px, 0); transform: translate(-330px, 0); } 40% { -webkit-transform: translate(-330px, -50px); transform: translate(-330px, -50px); } 60% { -webkit-transform: translate(-330px, 0px); transform: translate(-330px, 0px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes move1 { 0% { -webkit-transform: translate(50%, -1000px); transform: translate(50%, -1000px); } 20% { -webkit-transform: translate(50%, 0); transform: translate(50%, 0); } 40% { -webkit-transform: translate(50%, -50px); transform: translate(50%, -50px); } 60% { -webkit-transform: translate(50%, 0px); transform: translate(50%, 0px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes move2 { 0% { -webkit-transform: translate(-50%, -1000px); transform: translate(-50%, -1000px); opacity: 0; } 20% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; } 40% { -webkit-transform: translate(-50%, -50px); transform: translate(-50%, -50px); opacity: 0; } 60% { -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); opacity: 0; } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @-webkit-keyframes move3 { 0% { -webkit-transform: translate(50%, 0) scale(0.6); transform: translate(50%, 0) scale(0.6); } 50% { -webkit-transform: translate(50%, 0px) scale(1); transform: translate(50%, 0px) scale(1); } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } } @keyframes move3 { 0% { -webkit-transform: translate(50%, 0) scale(0.6); transform: translate(50%, 0) scale(0.6); } 50% { -webkit-transform: translate(50%, 0px) scale(1); transform: translate(50%, 0px) scale(1); } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } } @-webkit-keyframes move4 { 0% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; } 50% { -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); opacity: 0; } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } } @keyframes move4 { 0% { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; } 50% { -webkit-transform: translate(-50%, 0px); transform: translate(-50%, 0px); opacity: 0; } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1; } }