.ac1 { padding: 4.792vw 22.5vw 5.208vw; background-repeat: no-repeat; background-position: center; background-size: cover; } .ac1 h2 { font-size: 1.25vw; margin-bottom: 0.4em; font-weight: 500; color: #FFFFFF; } .ac1 hr { border: none; width: 100%; height: 0.052vw; background: #FFFFFF; margin-bottom: 0.625vw; } .ac1 p { font-size: 0.833vw; margin-bottom: 0.5em; color: #FFFFFF; } .ap1 { padding: 12.396vw 0; background-repeat: no-repeat; background-position: center; background-size: cover; } .ap1 .intr { width: 43.333vw; padding: 4.688vw 7.656vw 4.167vw 11.417vw; background: rgba(255, 255, 255, 0.9); } .ap1 .intr .pic { width: 10.417vw; margin-bottom: 2.604vw; } .ap1 .intr dt { font-size: 1.25vw; margin-bottom: 1.042vw; font-family: Gotham; color: #505559; } .ap1 .intr dd { font-size: 0.833vw; margin-bottom: 0.4em; padding-left: 1.042vw; position: relative; color: #505559; } .ap1 .intr dd::before { content: ''; display: block; width: 0.313vw; height: 0.313vw; background: #505559; position: absolute; left: 0; top: 0.7em; border-radius: 100%; transform: translateY(-50%); } .at1 { padding: 8.333vw 0; } .at1 .main { margin-top: 3.125vw; } .at1 .ev { width: 46%; height: 17.5vw; margin-left: 1.042vw; position: relative; transition: all ease .3s; box-shadow: inset 0 0 0 0.104vw#E4B35B; } .at1 .ev .intr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 3.125vw 2.083vw 0; transform: translate(-1.042vw, -1.042vw); background: linear-gradient(156deg, #0E6EB8 0%, #bbd4e7 100%); transition: all ease .3s; } .at1 .ev:hover .intr { width: calc(100% + 1.042vw); height: 18.542vw; } .at1 .ev h2 { font-size: 1.25vw; margin-bottom: 1.5em; font-weight: bold; color: #FFFFFF; } .at1 .ev p { margin-bottom: 0.8em; font-size: 0.938vw; color: #FFFFFF; } .at2 { padding: 8.333vw 0; background-repeat: no-repeat; background-position: center; background-size: cover; } .at2 .main { margin-top: 1.302vw; font-size: 0.833vw; line-height: 1.8; color: #505559; } .at3 { padding: 8.333vw 0 12.708vw; } .at3 .main { margin-top: 1.302vw; border-top: 1px solid #C5C5C5; padding: 3.125vw 0 0; } .at3 .ev { width: 45%; margin-bottom: 5.208vw; transition: all ease-out .2s; } .at3 .ev:hover { box-shadow: 0 0 1.042vw #9fa2a5; } .at3 .ev:nth-child(even) { transform: translateY(9.375vw); } .at3 .ev .pic { width: 100%; } .at3 .ev h2 { padding: 0.677vw; text-align: center; font-size: 0.833vw; font-family: Poppins; font-weight: 300; line-height: 1.354vw; color: #FFFFFF; background: rgba(1, 104, 174, 0.4); } .at4 { padding: 8.333vw 0 5.521vw; background-repeat: no-repeat; background-position: center; background-size: cover; } .at4 .tabbar { margin-top: 1.302vw; } .at4 .bar { display: inline-block; padding: 0.625vw 1.563vw; font-size: 0.938vw; margin-right: 1.042vw; color: #0168AE; border: 1px solid #0168AE; transition: all ease-out .3s; cursor: pointer; } .at4 .bar.on, .at4 .bar:hover { background: #0168AE; color: #FFFFFF; } .at4 .main { position: relative; margin-top: 0.521vw; } .at4 .main::before { content: ''; display: block; background: #C5C5C5; width: 100%; height: 0.104vw; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); } .at4 .main .swiper-container { padding: 11.823vw 0; } .at4 .main .wrap { display: none; } .at4 .main .wrap.on { display: block; } .at4 .main .swiper-slide { display: flex; justify-content: center; align-items: center; } .at4 .main .swiper-slide .point { width: 0.625vw; height: 0.625vw; position: relative; cursor: pointer; } .at4 .main .swiper-slide .point span { width: 100%; height: 100%; background: #0168AE; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; transition: all ease 0.5s .3s; } .at4 .main .swiper-slide-active .point span { background: #E4B35B; } .at4 .main .swiper-slide .point::before { content: ''; display: block; width: 1.042vw; height: 1.042vw; background: #FFFFFF; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .at4 .main .swiper-slide .point::after { content: ''; display: block; width: 2.083vw; height: 2.083vw; background: #E4B35B; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.2); z-index: 1; opacity: 0.2; transition: all ease 1s .3s; } .at4 .main .swiper-slide-active .point::after { animation: point 1.5s 1s ease-out infinite; } @keyframes point { 0% { transform: translate(-50%, -50%) scale(0.2); } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0.1; } } .at4 .main .swiper-slide .time { font-size: 0.729vw; color: #0168AE; position: absolute; left: 50%; top: -1.25vw; transform: translate(-50%, -100%); transition: all ease 1s .3s; } .at4 .main .swiper-slide-active .time { font-size: 2.708vw; top: -5.417vw; transition: all ease 1s .3s; } .at4 .main .swiper-slide .intr { width: 12em; font-size: 0.833vw; color: #0168AE; position: absolute; left: 50%; bottom: -3.854vw; opacity: 0; transform: translate(0, 100%); transition: all ease 0.6s .3s; } .at4 .main .swiper-slide-active .intr { opacity: 1; transition: all ease 1.6s .3s; } .at4 .main .wrap { position: relative; } .at4 .main .wrap::after, .at4 .main .wrap::before { content: ''; display: block; width: 3.125vw; height: 0.26vw; background: #0168AE; position: absolute; top: 50%; transform: translateY(-50%); } .at4 .main .wrap::before { right: 100%; } .at4 .main .wrap::after { left: 100%; } .at4 .navigation { width: 3.125vw; height: 3.125vw; position: absolute; transition: all ease .3s; } .at4 .navigation:hover { background: rgba(1, 104, 174, 0.2); } .at4 .navigation.prev { bottom: 50%; right: 100%; } .at4 .navigation.next { top: 50%; left: 100%; transform: rotateY(180deg); cursor: pointer; } /* *======================================================media=============================================================== */ @media screen and (max-width:1919px) {} @media screen and (max-width:1519px) {} @media screen and (max-width:1366px) {} @media screen and (max-width:1250px) {} @media screen and (max-width:991px) { .ac1 { padding: 50px 10%; } .ac1 h2 { font-size: 18px; margin-bottom: 0.4em; } .ac1 hr { height: 1px; margin-bottom: 12px; } .ac1 p { font-size: 14px; margin-bottom: 0.5em; } .ap1 { padding: 130px 0; } .ap1 .intr { width: 90%; padding: 40px 40px 40px 10%; } .ap1 .intr .pic { width: 140px; margin-bottom: 30px; } .ap1 .intr dt { font-size: 20px; margin-bottom: 15px; } .ap1 .intr dd { font-size: 14px; margin-bottom: 0.4em; padding-left: 15px; } .ap1 .intr dd::before { width: 3px; height: 3px; border-radius: 100%; transform: translateY(-50%); } .at1 { padding: 100px 0 60px; } .at1 .main { margin-top: 60px; } .at1 .ev { width: 100%; height: 300px; margin: 0 0 60px 20px; } .at1 .ev .intr { padding: 40px 30px 0; transform: translate(-15px, -15px); } .at1 .ev:hover .intr { width: calc(100% + 15px); height: 315px; } .at1 .ev h2 { font-size: 18px; margin-bottom: 1.5em; } .at1 .ev p { margin-bottom: 0.8em; font-size: 14px; } .at2 { padding: 100px 0; } .at2 .main { margin-top: 20px; font-size: 14px; } .at3 { padding: 100px 0 150px; } .at3 .main { margin-top: 25px; padding: 60px 0 0; } .at3 .ev { width: 45%; margin-bottom: 50px; } .at3 .ev:nth-child(even) { transform: translateY(100px); } .at3 .ev h2 { padding: 13px; font-size: 14px; line-height: 26px; } .at4 { padding: 100px 0 76px; } .at4 .tabbar { margin-top: 25px; } .at4 .bar { padding: 8px 20px; font-size: 14px; margin-right: 20px; } .at4 .main { margin-top: 10px; } .at4 .main::before { height: 2px; } .at4 .main .swiper-container { padding: 180px 0; } .at4 .main .swiper-slide .point { width: 8px; height: 8px; } .at4 .main .swiper-slide .point::before { width: 14px; height: 14px; } .at4 .main .swiper-slide .point::after { width: 30px; height: 30px; } .at4 .main .swiper-slide .time { font-size: 12px; left: 50%; top: -20px; } .at4 .main .swiper-slide-active .time { font-size: 32px; top: -74px; } .at4 .main .swiper-slide .intr { width: 8em; font-size: 14px; left: 50%; bottom: -44px; } .at4 .main .wrap::after, .at4 .main .wrap::before { width: 40px; height: 3px; } .at4 .navigation { width: 40px; height: 40px; } } @media screen and (max-width:768px) { .ac1 { padding: 50px 3%; } .ac1 h2 { font-size: 16px; margin-bottom: 0.4em; } .ac1 hr { height: 1px; margin-bottom: 12px; } .ac1 p { font-size: 12px; margin-bottom: 0.5em; } .ap1 { padding: 100px 0; } .ap1 .intr { width: 90%; padding: 40px; } .ap1 .intr .pic { width: 100px; margin-bottom: 20px; } .ap1 .intr dt { font-size: 18px; margin-bottom: 15px; } .ap1 .intr dd { font-size: 12px; margin-bottom: 0.4em; padding-left: 15px; } .ap1 .intr dd::before { width: 3px; height: 3px; } .at1 .ev { height: 220px; } .at1 .ev:hover .intr { height: 235px; } .at2 { padding: 70px 0; } .at2 .main { margin-top: 20px; font-size: 12px; } .at3 { padding: 70px 0; } .at3 .main { margin-top: 25px; padding: 40px 0 0; } .at3 .ev { width: 70%; margin-bottom: 50px; margin-left: 5%; } .at3 .ev:nth-child(even) { transform: translateY(0px); margin-left: 25%; } .at3 .ev h2 { padding: 13px; font-size: 14px; line-height: 26px; } .at4 { padding: 70px 0; } .at4 .bar { font-size: 12px; } .at4 .main .swiper-container { padding: 160px 0; } .at4 .main .wrap { width: 80%; } .ac1 .flex p { display: block; width: 100%; } } @media screen and (max-width:480px) {}