.page-swiper { height: 100vh; } .page-swiper > .swiper-wrapper > .swiper-slide { height: 100vh; } .page-swiper > .swiper-wrapper > .swiper-slide[data-hash="slide5"] { display: flex; flex-direction: column; justify-content: center; } .page-swiper > .swiper-wrapper > .swiper-slide:last-of-type { height: auto; } .page-swiper > .swiper-wrapper > .swiper-slide section { display: flex; width: 100%; height: 100%; } body main section { padding: 0; } .index-swiper * { color: #fff; } .index-swiper .slide-inner { width: 100%; height: 100%; transition: all linear; } .index-swiper .slide-inner > img { display: block; width: 100%; height: 100%; object-fit: cover; } .index-swiper .swiper-slide { position: relative; background-color: #333; height: 100vh; overflow: hidden; } .index-swiper .swiper-slide .flex { position: absolute; top: 0; left: 50%; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 12rem; transform: translatex(-50%); } .index-swiper .swiper-slide .flex .text { position: initial; transform: none; padding: 0; } .index-swiper .swiper-slide .text { position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 0 12rem; transform: translatex(-50%); } .index-swiper .swiper-slide .text p { font-size: 2.4rem; margin-bottom: 1.6rem; line-height: 1.4; } .index-swiper .swiper-slide .text h2 { font-size: 1.2rem; line-height: 1.4; } .index-swiper .swiper-slide .text a { display: flex; align-items: center; margin-top: 8rem; } .index-swiper .swiper-slide .text a .icon { width: 2rem; height: 2rem; margin-right: 1rem; } .index-swiper .swiper-slide .text a span { font-size: 1rem; } .index-swiper .swiper-slide .home-text { position: absolute; top: 0; left: 50%; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 12rem; transform: translatex(-50%); } .index-swiper .swiper-slide .home-text * { color: #fff; } .index-swiper .swiper-slide .home-text .l h2 { font-size: 2.4rem; line-height: 1.2; font-family: "font-h"; } .index-swiper .swiper-slide .home-text .l p { font-size: 1.2rem; margin-top: 1rem; } .index-swiper .swiper-slide .home-text .l .data { display: flex; gap: 3rem; margin-top: 6rem; } .index-swiper .swiper-slide .home-text .l .data .item p { font-size: 3.6rem; margin-bottom: 0.5rem; } .index-swiper .swiper-slide .home-text .l .data .item span { font-size: 1rem; } .index-swiper .swiper-slide .home-text .r { width: 20rem; } .index-swiper .swiper-slide .home-text .r .item { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.9); } .index-swiper .swiper-slide .home-text .r .item .i { width: 2rem; } .index-swiper .swiper-slide .home-text .r .item span { font-size: 1.2rem; } .index-swiper .swiper-slide .lab { display: grid; gap: 2rem; padding-right: 3rem; } .index-swiper .swiper-slide .lab .item { display: flex; align-items: center; } .index-swiper .swiper-slide .lab .item .i { width: 5rem; } .index-swiper .swiper-slide .lab .item p { margin-left: 2rem; font-size: 0.9rem; color: #fff; white-space: nowrap; } .index-swiper .swiper-slide.swiper-slide { z-index: 1; } .index-swiper .swiper-nav { position: absolute; bottom: 0; left: 50%; display: flex; width: calc(100% - 5.85rem * 2); transform: translatex(-50%); z-index: 10; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .index-swiper .swiper-nav a { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 6rem; padding-left: 3.3rem; padding-right: 1.35rem; border-right: 1px solid rgba(255, 255, 255, 0.2); } .index-swiper .swiper-nav a:last-of-type { border: none; } .index-swiper .swiper-nav a .i { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background-image: .png"); background-size: 100% 100%; } .index-swiper .swiper-nav a .i i { font-size: 0.9rem; } .index-swiper .swiper-pagination .swiper-pagination-bullet { width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: #fff; } .main-1 { position: relative; padding: 0 !important; } .main-1 .main-center { display: flex; flex-direction: column; justify-content: center; padding-top: 6rem; } .main-1 .con .top { position: relative; } .main-1 .con .top > img { display: block; width: 70%; margin: 0 auto; } .main-1 .con .top .txt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .main-1 .con .top .txt h3 { font-size: 4.2rem; color: #203e80; text-align: center; } .main-1 .con .top .txt p { font-size: 1.6rem; line-height: 1.8; color: #203e80; text-align: center; } .main-1 .swiper-content .swiper-slide { background-size: cover; background-repeat: no-repeat; } .main-1 .swiper-content .swiper-slide .content h3 { font-size: 4.2rem; color: #203e80; } .main-1 .swiper-content .swiper-slide .content p { font-size: 1.6rem; line-height: 1.8; color: #203e80; text-align: center; } .main-1 .swiper-content .swiper-slide .content .more { margin-top: 2.2rem; } .main-1 .swiper-content .swiper-button { width: 4.3rem; height: 4.3rem; border-radius: 50%; border: 1px dashed #fff; background-color: transparent; } .main-1 .swiper-content .swiper-button.swiper-button-prev { left: 12rem; } .main-1 .swiper-content .swiper-button.swiper-button-next { right: 12rem; } .main-1 .swiper-control { width: calc(100% - 2rem); } .main-1 .swiper-control .swiper-slide { cursor: pointer; } .main-1 .swiper-control .swiper-slide.swiper-slide-thumb-active .txt .i { background-color: #203e80; } .main-1 .swiper-control .swiper-slide.swiper-slide-thumb-active .txt h6, .main-1 .swiper-control .swiper-slide.swiper-slide-thumb-active .txt p { color: #203e80; } .main-1 .swiper-control .swiper-slide .i { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; margin: 0 auto 1rem; border-radius: 50%; } .main-1 .swiper-control .swiper-slide .i .f_t { display: none; } .main-1 .swiper-control .swiper-slide .txt h6, .main-1 .swiper-control .swiper-slide .txt p { color: #9bb0cb; text-align: center; } .main-1 .swiper-control .swiper-slide .txt h6 { font-size: 1.5rem; margin-bottom: 0.5rem; } .main-1 .swiper-control .swiper-slide .txt p { font-size: 1.2rem; text-align: center; line-height: 1.6; color: #203e80; } .main-1 .swiper-control .swiper-slide:hover .i .f { display: none; } .main-1 .swiper-control .swiper-slide:hover .i .f_t { display: block; } .main-1 .swiper-control .swiper-slide:hover .txt * { color: #203e80; } .main-2 .main-center { display: flex; flex-direction: column; justify-content: center; } .main-2 .content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.32rem; } .main-2 .content .item { background-color: #fff; border-radius: 1.5rem; position: relative; overflow: hidden; } .main-2 .content .item:hover > img { transform: scale(1.06); } .main-2 .content .item > img { display: block; width: 100%; } .main-2 .content .item .txt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 4rem 2rem 3.4rem; background-color: rgba(0, 0, 0, 0.5); } .main-2 .content .item h6, .main-2 .content .item p { color: #fff; } .main-2 .content .item h6 { position: relative; font-size: 1.8rem; margin-bottom: 2rem; } .main-2 .content .item p { line-height: 1.4; } .main-3 { position: relative; } .main-3 .content { position: relative; padding: 0 12rem; display: flex; flex-direction: column; justify-content: center; width: 100%; } .main-3 .content .main-title { position: initial; } .main-3 .content .swiper { width: 100%; padding: 2rem 0; } .main-3 .content .swiper-slide { position: relative; width: 30rem; } .main-3 .content .swiper-slide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); opacity: 1; z-index: 1; transition: all ease 0.3s; } .main-3 .content .swiper-slide.swiper-slide-active::before { opacity: 0; display: none; } .main-3 .content .swiper-slide.swiper-slide-active .more-btn, .main-3 .content .swiper-slide.swiper-slide-active h6 { opacity: 1 !important; } .main-3 .content .swiper-slide .img { height: 20rem; border-radius: 1.5rem; overflow: hidden; background-color: #ccc; } .main-3 .content .swiper-slide .text { position: relative; padding-top: 2rem; } .main-3 .content .swiper-slide .text * { text-align: center; } .main-3 .content .swiper-slide .text h6 { font-size: 1.1rem; margin-bottom: 1.5rem; opacity: 0; } .main-3 .content .swiper-slide .text p { line-height: 1.6; } .main-3 .content .swiper-slide .text .more-btn { margin: 1rem auto 0; opacity: 0; } .main-3 .content .swiper-button-wrap .swiper-button { position: absolute; } .main-4 { padding-top: 0; height: auto !important; } .main-4 .main-center { display: flex; flex-direction: column; justify-content: center; } .main-4 .content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .main-4 .content .news-link { height: 14rem; } .main-5 { height: auto !important; margin-top: 2rem; } .main-5 .main-center { display: flex; flex-direction: column; justify-content: center; } .main-5 .content .swiper { padding-bottom: 2rem; } .main-5 .content .swiper .swiper-wrapper { transition: linear; } .main-5 .content .swiper .swiper-slide { height: 3.5rem; } .main-5 .content .swiper .swiper-slide img { width: 100%; height: 100%; object-fit: scale-down; } .main-5 .content .img { height: 6.5rem; border-radius: 1rem; box-shadow: 0 0 0.3rem #ebebeb; } .main-5 .content .img img { width: 100%; height: 100%; object-fit: scale-down; } @media screen and (max-width: 768px) { .index-swiper .swiper-slide .home-text { padding: 0 2% 1rem; flex-direction: column; justify-content: space-around; } .index-swiper .swiper-slide .home-text .l h2 { font-size: 1.6rem; } .index-swiper .swiper-slide .home-text .l p { font-size: 1rem; } .index-swiper .swiper-slide .home-text .l .data { margin-top: 1rem; } .index-swiper .swiper-slide .home-text .l .data .item p { font-size: 2rem; } .index-swiper .swiper-slide .home-text .r { width: 100%; } .index-swiper .swiper-slide .home-text .r .item { padding: 0.5rem 0; } .index-swiper .swiper-slide .text { padding: 40% 2% 0; justify-content: flex-start; } .index-swiper .swiper-slide .text p { font-size: 1.6rem; } .index-swiper .swiper-slide .text a { margin-top: 2rem; } .index-swiper .swiper-slide .lab .item .i { width: 3rem; } .index-swiper .swiper-slide .lab .item p { margin-left: 1rem; } .index-swiper .swiper-slide .flex { padding: 40% 2% 0; justify-content: flex-start; flex-direction: column; align-items: flex-start; } .index-swiper .swiper-slide .flex .text { height: auto; } .index-swiper .swiper-slide .flex .lab { margin-top: 2rem; } .index-swiper .swiper-button { display: none; } .main-1 .con .top { margin-bottom: 2rem; } .main-1 .con .top > img { width: 100%; } .main-1 .con .top .txt { position: initial; transform: none; margin-top: 1rem; margin-bottom: 2rem; } .main-1 .con .top .txt h3 { font-size: 1.4rem; } .main-1 .con .top .txt p { font-size: 1.2rem; line-height: 1.4; } .main-1 .main-center { padding-top: 3rem; padding-bottom: 3.5rem; justify-content: flex-start; } .main-1 .swiper-control .swiper-slide .i { width: 4rem; height: 4rem; margin-bottom: 1rem; } .main-1 .swiper-control .swiper-slide .txt h6 { font-size: 1.2rem; margin-bottom: 0; } .main-1 .swiper-control .swiper-slide .txt p { font-size: 1rem; } .main-2 .main-center { justify-content: flex-start; } .main-2 .content { grid-template-columns: repeat(2, 1fr); gap: 0.5remq; } .main-2 .content .item h6 { font-size: 1.4rem; margin-bottom: 1rem; } .main-2 .content .item .txt { padding: 2rem !important; } .main-3 .content { padding-left: 0.5rem; padding-right: 0.5rem; justify-content: flex-start; } .main-3 .content .swiper-button-wrap { right: 0; display: none; } .main-3 .content .swiper-slide { width: 100%; } .main-3 .content .swiper-slide .img { margin-bottom: 2rem; } div[data-hash="slide5"] { display: flex; flex-direction: column; justify-content: flex-start !important; height: auto !important; } .main-4 .content { display: flex; overflow: auto; } .main-4 .content .news-link { width: 40%; flex-shrink: 0; } .main-5 { margin-top: 2rem; } }