.home1 .intr { padding: 14.219vw 0 5.208vw; } .home1 .intr h3 { font-size: 2.708vw; font-family: Gotham; font-weight: normal; line-height: 1.2; color: #0E6EB8; opacity: 0.8; } .home1 .intr h2 { font-size: 2.708vw; font-weight: 600; color: #0168AE; } .home1 .interactive { width: 100%; height: 100%; overflow: hidden; position: relative; } .home1 .interactive .pic { width: 100%; height: 100%; } .home1 .interactive .pic img { width: 100%; height: 100%; object-fit: cover; } .home1 .interactive .move { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; } .home1 .interactive .move .img { background-position: center; background-size: 300% 100%; background-repeat: no-repeat; width: 100%; height: 100%; } .home2 { padding: 8.333vw 0 7.656vw; } .home2 p { margin-top: 1.563vw; font-size: 0.833vw; color: #505559; line-height: 1.7; max-width: 52.083vw; } .home2 .C-more { margin-top: 3.125vw; } .home3 { overflow: hidden; } .home3 .ev { width: 100%; height: 8.854vw; transition: all ease 1s; background-position: top center; background-size: cover; background-repeat: no-repeat; } .home3 .ev.on { height: 33.333vw; } .home3 .ev .intr { background: rgba(0, 0, 0, 0.4); box-shadow: 0 -0.26vw 20.26vw #505559; padding: 3.125vw 0; transition: all ease .3s; height: 100%; } .home3 .ev.on .intr { padding: 8.333vw 0 0; box-shadow: 0 0vw 0vw #505559; } .home3 .ev:hover .intr { background: rgba(0, 0, 0, 0.08); box-shadow: 0 0vw 0vw #505559; } .home3 .ev h2 { position: relative; font-size: 1.875vw; font-weight: 600; color: #FFFFFF; } .home3 .ev.on h2 { padding-bottom: 1.563vw; } .home3 .ev .flex-xend::before { content: ''; display: block; width: 100%; height: 0.104vw; background: #FFFFFF; opacity: 0; } .home3 .ev.on .flex-xend::before { opacity: 0.26; } .home3 .ev ul { padding: 2.5vw 0; display: none; } .home3 .ev ul li { margin-bottom: 0.521vw; font-size: 1.25vw; font-weight: 600; color: #FFFFFF; opacity: 0; transition: all ease .5s; } .home3 .ev ul li:hover { transform: translateX(-1em); } .home3 .ev.on ul li { opacity: 1; } .home4 { padding: 8.333vw 0 8.333vw 15.365vw; } .home4 .swiper-container { margin-top: 3.125vw; } .home4 .swiper-slide { width: 28.073vw; height: 17.5vw; padding: 3.125vw 2.083vw 0; position: relative; border: 1px solid #dfdfdf; box-shadow: 0vw 0.156vw 20vw rgba(0, 0, 0, 0.05); } .home4 .swiper-slide::after { display: block; content: ''; width: 100%; height: 100%; z-index: -1; position: absolute; left: 0; top: 0; opacity: 0; transition: all ease .3s; background: linear-gradient(156deg, #0E6EB8 0%, #bbd4e7 100%); } .home4 .swiper-slide:hover:after { opacity: 1; } .home4 .swiper-slide .text { font-size: 1.25000vw; height: 2.8em; display: -webkit-box; display: box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #111111; } .home4 .swiper-slide:hover .text { color: #FFFFFF; } .home4 .swiper-slide .time { font-size: 6.25vw; line-height: 3.125vw; margin-top: 4.583vw; font-family: Gotham; font-weight: normal; color: #C5C5C5; text-align: right; opacity: 0.3; } .home4 .swiper-slide:hover .time { color: #0E6EB8; } .home4 .swiper-button { margin: 3.125vw 0.938vw 0 0; width: 2.188vw; height: 2.188vw; display: flex; align-items: center; justify-content: center; border: 1px solid #EFEFEF; cursor: pointer; } .home4 .swiper-button:hover { border: 1px solid #0168AE; } .home4 .swiper-button span { display: block; width: 50%; height: 50%; background: url('/img/jt-z.svg') no-repeat center/contain; } .home4 .swiper-button:hover span { background: url('/img/jt-z-b.svg') no-repeat center/contain; } .home4 .swiper-button.next span { transform: rotateY(180deg); } .home5 { background: #F7F7F7; padding: 8.333vw 0; } .home5 .main { margin-top: 2.813vw; } .home5 .ev { width: 44%; padding: 1.042vw 0 3.646vw; border-top: 1px solid #D6D6D6; position: relative; cursor: pointer; } .home5 .ev::before { content: ''; display: block; width: 0%; height: 2px; position: absolute; left: 0; top: -2px; background: #0168AE; transition: all ease .4s; } .home5 .ev:hover::before { width: 100%; } .home5 .ev h2 { font-size: 0.938vw; line-height: 1.5; height: 3em; color: #111111; transition: all ease .2s; } .home5 .ev:hover h2 { color: #0168AE; } .home5 .ev p { font-size: 0.729vw; margin-top: 2em; color: #C5C5C5; } /* *======================================================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) { .home1 .intr { padding: 150px 0 80px; } .home1 .intr h3 { font-size: 32px; } .home1 .intr h2 { font-size: 30px; } .home2 { padding: 100px 0 80px; } .home2 p { margin-top: 30px; font-size: 14px; max-width: 90%; } .home2 .C-more { margin-top: 60px; } .home3 .ev { height: 100px; } .home3 .ev.on { height: 440px; } .home3 .ev .intr { box-shadow: 0 -5px 25px #505559; padding: 36px 0; } .home3 .ev.on .intr { padding: 50px 0 0; } .home3 .ev h2 { font-size: 22px; } .home3 .ev.on h2 { padding-bottom: 20px; } .home3 .ev .flex-xend::before { height: 2px; } .home3 .ev ul { padding: 28px 0; } .home3 .ev ul li { margin-bottom: 10px; font-size: 18px; font-weight: normal; } .home4 { padding: 100px 0 100px 10%; } .home4 .swiper-container { margin-top: 40px; } .home4 .swiper-slide { width: 400px; height: 273px; padding: 60px 40px 0; box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.05); } .home4 .swiper-slide .text { font-size: 16px; } .home4 .swiper-slide .time { font-size: 70px; line-height: 70px; margin-top: 60px; } .home4 .swiper-button { margin: 40px 10px 0 0; width: 32px; height: 32px; } .home5 { padding: 100px 0; } .home5 .main { margin-top: 44px; } .home5 .ev { width: 44%; padding: 20px 0 50px; } .home5 .ev h2 { font-size: 15px; } .home5 .ev p { font-size: 12px; } } @media screen and (max-width:768px) { .home1 .intr { padding: 120px 0 60px; } .home1 .intr h3 { font-size: 22px; } .home1 .intr h2 { font-size: 20px; } .home2 { padding: 70px 0 60px; } .home2 p { margin-top: 20px; font-size: 12px; max-width: 90%; } .home2 .C-more { margin-top: 60px; } .home3 .ev { height: 80px; } .home3 .ev.on { height: 300px; } .home3 .ev .intr { box-shadow: 0 -5px 25px #505559; padding: 26px 0; } .home3 .ev.on .intr { padding: 30px 0 0; } .home3 .ev h2 { font-size: 18px; } .home3 .ev.on h2 { padding-bottom: 20px; } .home3 .ev .flex-xend::before { height: 2px; } .home3 .ev ul { padding: 28px 0; } .home3 .ev ul li { margin-bottom: 10px; font-size: 16px; font-weight: normal; } .home4 { padding: 70px 0 70px 3%; } .home4 .swiper-container { margin-top: 40px; } .home4 .swiper-slide { width: 300px; height: 203px; padding: 40px 30px 0; box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.05); } .home4 .swiper-slide .text { font-size: 14px; } .home4 .swiper-slide .time { font-size: 60px; line-height: 60px; margin-top: 40px; } .home4 .swiper-button { margin: 40px 10px 0 0; width: 32px; height: 32px; } .home5 { padding: 70px 0; } .home5 .main { margin-top: 44px; } .home5 .ev { width: 100%; padding: 20px 0 50px; } .home5 .ev h2 { font-size: 15px; } .home5 .ev p { font-size: 12px; } } @media screen and (max-width:480px) { .home3 .ev ul { padding: 18px 0; } .home3 .ev ul li { margin-bottom: 10px; font-size: 14px; } .home5 .ev { width: 100%; padding: 15px 0 40px; } .home5 .ev h2 { font-size: 14px; } .home5 .ev p { font-size: 12px; } }