.banner { --swiper-navigation-color: #d4d4d5; --swiper-pagination-color: #02489c; } .banner .swiper-slide { width: 100vw; height: 49.4791666667vw; } .banner .swiper-slide .m { display: none; } .banner .swiper-slide img { width: 100%; height: 100%; } .banner .swiper-button-prev { left: 4.1666666667vw; } .banner .swiper-button-prev::after { font-family: "iconfont"; content: "\e629"; } .banner .swiper-button-next { right: 4.1666666667vw; } .banner .swiper-button-next::after { font-family: "iconfont"; content: "\e628"; } .banner .swiper-pagination { height: 5.4166666667vw; display: flex; justify-content: center; align-items: center; width: 100vw; bottom: 0; } .banner .swiper-pagination .swiper-pagination-bullet { width: 0.4166666667vw; height: 0.4166666667vw; margin: 0 0.9375vw; position: relative; } .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { content: ""; display: block; width: 1.4583333333vw; height: 1.4583333333vw; box-sizing: border-box; border: 1px solid var(--swiper-pagination-color); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; } .index-content { width: 100vw; box-sizing: border-box; padding: 0 11.4583333333vw; } .index-content .big-title { font-size: 2.5vw; font-weight: bold; color: #00479d; } .index-content .big-title ~ .en-title { color: #00479d; font-size: 0.8333333333vw; } .index-content.content-01 { display: flex; padding-top: 6.7708333333vw; padding-bottom: 5.8333333333vw; background-color: #f5f5f5; } .index-content.content-01 .about { display: flex; width: 0; flex-grow: 1; flex-direction: column; justify-content: space-between; color: #333; } .index-content.content-01 .about .title { font-size: 2.7083333333vw; font-weight: bold; color: #00479d; } .index-content.content-01 .about .desc { font-size: 1.0416666667vw; line-height: 1.875vw; } .index-content.content-01 .about .desc br { display: none; } .index-content.content-01 .about .more { display: block; box-sizing: border-box; width: 8.8541666667vw; height: 2.3958333333vw; transform: skew(-10deg); border: 0.1041666667vw solid #00479d; border-radius: 0.78125vw 0 0.78125vw 0; } .index-content.content-01 .about .more span { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; transform: skew(10deg); font-size: 0.8333333333vw; color: #00479d; } .index-content.content-01 .about .more span::after { content: "\e628"; font-family: "iconfont"; font-weight: bold; } .index-content.content-01 img { width: 38.8020833333vw; height: 24.3229166667vw; margin-left: 4.1666666667vw; border-radius: 4.1666666667vw 0 4.1666666667vw 0; } .index-content.content-02 { padding-top: 3.125vw; padding-bottom: 6.5625vw; background-color: #fff; } .index-content.content-02 .title { display: flex; height: 7.8125vw; justify-content: space-between; align-items: center; border-bottom: 0.2083333333vw solid #e1e1e1; position: relative; margin-bottom: 2.6041666667vw; } .index-content.content-02 .title::after { content: ""; display: block; width: 100%; border-bottom: 1px solid #e1e1e1; position: absolute; left: 0; bottom: -0.3125vw; } .index-content.content-02 .title .left { display: inline-flex; flex-direction: column; } .index-content.content-02 .title .right { text-align: right; line-height: 1.3541666667vw; font-size: 0.8333333333vw; color: #999; } .index-content.content-02 .brands { display: flex; justify-content: space-between; width: 100%; height: 25.2083333333vw; } .index-content.content-02 .brands .logos { display: flex; flex-direction: column; position: initial; width: 22.7083333333vw; transform: none; margin-right: 3.75vw; } .index-content.content-02 .brands .logos li { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 6.3020833333vw; box-sizing: border-box; border-bottom: 0.0520833333vw solid #e6e6e6; cursor: pointer; } .index-content.content-02 .brands .logos li * { transition: all 0.3s ease-in-out; } .index-content.content-02 .brands .logos li img { filter: grayscale(100%); opacity: 0.5; } .index-content.content-02 .brands .logos li:nth-child(1) .pc-logo { width: 8.6979166667vw; height: 1.5625vw; } .index-content.content-02 .brands .logos li:nth-child(2) .pc-logo { width: 4.375vw; height: 2.8645833333vw; } .index-content.content-02 .brands .logos li:nth-child(3) .pc-logo { width: 8.125vw; height: 2.7083333333vw; } .index-content.content-02 .brands .logos li:nth-child(4) .pc-logo { width: 4.2708333333vw; height: 4.1666666667vw; } .index-content.content-02 .brands .logos li .name { font-size: 0.9375vw; color: #999; } .index-content.content-02 .brands .logos li .m-logo { display: none; } .index-content.content-02 .brands .logos li.active { border-bottom: 0.1041666667vw solid #4d4d4d; } .index-content.content-02 .brands .logos li.active img { filter: grayscale(0%); opacity: 1; } .index-content.content-02 .brands .logos li.active .name { color: #333; } .index-content.content-02 .brands .contents { width: 0; flex-grow: 1; position: relative; } .index-content.content-02 .brands .contents li { display: flex; opacity: 0; visibility: hidden; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; transition: all 0.3s ease-in-out; } .index-content.content-02 .brands .contents li.active { opacity: 1; visibility: visible; z-index: 10; } .index-content.content-02 .brands .contents li .img-block { position: relative; z-index: 10; width: 19.6875vw; } .index-content.content-02 .brands .contents li .img-block img { width: 26.0416666667vw; height: auto; position: absolute; bottom: 0; left: 0; } .index-content.content-02 .brands .contents li:nth-child(1) { --content-bg-color: #00479d; } .index-content.content-02 .brands .contents li:nth-child(2) { --content-bg-color: #2259a9; } .index-content.content-02 .brands .contents li:nth-child(3) { --content-bg-color: #e43c2f; } .index-content.content-02 .brands .contents li:nth-child(4) { --content-bg-color: #f3bc31; } .index-content.content-02 .brands .contents li::after { content: ""; display: block; width: 200%; height: 12.5vw; background-color: var(--content-bg-color); transform: skew(-10deg); position: absolute; bottom: 0; left: 2.2916666667vw; z-index: 1; border-radius: 3.125vw 0 0 0; } .index-content.content-02 .brands .contents li .main-content { display: flex; flex-direction: column; justify-content: space-between; width: 0; flex-grow: 1; box-sizing: border-box; padding: 2.0833333333vw 0 0 5.7291666667vw; position: relative; z-index: 10; } .index-content.content-02 .brands .contents li .main-content h2 { font-size: 1.875vw; } .index-content.content-02 .brands .contents li .main-content h3 { font-weight: normal; font-size: 1.4583333333vw; margin-bottom: 2.3958333333vw; } .index-content.content-02 .brands .contents li .main-content .desc { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; height: 12.5vw; padding: 1.8229166667vw 1.25vw 1.8229166667vw 0; color: #fff; } .index-content.content-02 .brands .contents li .main-content .desc p { line-height: 1.5625vw; font-size: 0.8333333333vw; } .index-content.content-02 .brands .contents li .main-content .desc .more { display: inline-flex; width: 7.2916666667vw; height: 2.3958333333vw; justify-content: center; align-items: center; transform: skew(-10deg); background-color: #fff; border-radius: 0.5208333333vw 0 0.5208333333vw 0; } .index-content.content-02 .brands .contents li .main-content .desc .more span { transform: skew(10deg); font-size: 0.7291666667vw; color: var(--content-bg-color); } .index-content.content-02 .brands .contents li .main-content .desc .more span::after { content: "\e628"; font-family: "iconfont"; font-weight: bold; } .index-content.content-03 { height: 49.4270833333vw; background: url("../images/index/content_03_bg.png") repeat-x 0 0; background-size: auto 100%; box-sizing: border-box; padding: 4.6875vw 0 0 0; text-align: center; } .index-content.content-03 .brandpdt { --swiper-navigation-color: #00479d; padding-top: 8.3333333333vw; } .index-content.content-03 .brandpdt .swiper-slide { display: flex; justify-content: center; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list { display: flex; width: 83.3333333333vw; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li { width: 25%; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li * { transition: all 0.3s ease-in-out; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li .thumb { width: 20.8333333333vw; height: 20.8333333333vw; background-repeat: no-repeat; background-size: cover; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li .pdt-name { font-size: 1.25vw; color: #262626; margin-top: 0.5208333333vw; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li .pdt-brief { line-height: 1.7708333333vw; font-size: 0.9375vw; color: #666; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li .more { display: inline-block; font-size: 0.8333333333vw; color: #00479d; margin-top: 0.8333333333vw; line-height: 1.3541666667vw; border-bottom: 0.1041666667vw solid #00479d; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li .more::after { content: "\e628"; font-family: "iconfont"; font-weight: bold; } .index-content.content-03 .brandpdt .swiper-slide .pdt-list li a:hover .pdt-name { color: #00479d; } .index-content.content-03 .brandpdt .swiper-pagination { top: 0; display: flex; align-items: center; justify-content: center; height: 8.3333333333vw; } .index-content.content-03 .brandpdt .swiper-pagination .swiper-pagination-bullet { display: inline-flex; justify-content: center; align-items: center; width: 6.7708333333vw; height: 2.6041666667vw; border-radius: 0.5208333333vw 0 0.5208333333vw 0; transform: skew(-10deg); background-color: #fff; color: #00479d; opacity: 1; margin: 0 0.3125vw; } .index-content.content-03 .brandpdt .swiper-pagination .swiper-pagination-bullet label { transform: skew(10deg); font-size: 0.9375vw; } .index-content.content-03 .brandpdt .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color: #fff; background-color: #00479d; } .index-content.content-03 .brandpdt .swiper-button-prev { left: 4.1666666667vw; } .index-content.content-03 .brandpdt .swiper-button-prev::after { font-family: "iconfont"; content: "\e629"; } .index-content.content-03 .brandpdt .swiper-button-next { right: 4.1666666667vw; } .index-content.content-03 .brandpdt .swiper-button-next::after { font-family: "iconfont"; content: "\e628"; } .index-content.content-03 .m { display: none; } .index-content.content-04 { padding: 4.6875vw 0; background-color: #fff; text-align: center; } .index-content.content-04 .news-list li { margin-bottom: 0; } @media screen and (max-width: 768px) { .banner .swiper-slide { height: 173.3333333333vw; } .banner .swiper-slide .m { display: block; } .banner .swiper-slide .pc { display: none; } .banner .swiper-pagination { height: 13.3333333333vw; } .banner .swiper-pagination .swiper-pagination-bullet { width: 1.0666666667vw; height: 1.0666666667vw; margin: 0 2.1333333333vw; } .banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after { width: 3.7333333333vw; height: 3.7333333333vw; } .index-content { padding: 8vw 6.6666666667vw; } .index-content .big-title { font-size: 7.2vw; } .index-content .big-title ~ .en-title { font-size: 2.9333333333vw; } .index-content.content-01 { padding-top: 9.3333333333vw; padding-bottom: 13.3333333333vw; flex-direction: column; align-items: center; } .index-content.content-01 .about { width: 100%; align-items: center; } .index-content.content-01 .about .title { font-size: 7.4666666667vw; } .index-content.content-01 .about .desc { margin: 2.6666666667vw 0; text-align: center; line-height: 5.3333333333vw; font-size: 3.7333333333vw; } .index-content.content-01 .about .desc br { display: block; } .index-content.content-01 .about .more { width: 29.0666666667vw; height: 7.7333333333vw; border: 0.2666666667vw solid #00479d; border-radius: 2vw 0 2vw 0; margin: 5.3333333333vw 0 9.3333333333vw 0; } .index-content.content-01 .about .more span { font-size: 2.4vw; } .index-content.content-01 > img { margin: 0; width: 83.4666666667vw; height: auto; border-radius: 9.3333333333vw 0 9.3333333333vw 0; } .index-content.content-02 .title { flex-direction: column; height: auto; text-align: center; margin-bottom: 0; border-bottom: 0; } .index-content.content-02 .title .right { line-height: 5.0666666667vw; font-size: 2.4vw; text-align: center; padding: 2.6666666667vw 0 4vw 0; } .index-content.content-02 .brands { flex-direction: column; height: auto; } .index-content.content-02 .brands .logos { flex-direction: row; width: 100%; height: 17.3333333333vw; box-sizing: border-box; margin-right: 0; margin-bottom: 7.7333333333vw; border-top: 0.2666666667vw solid #e6e6e6; border-bottom: 0.2666666667vw solid #e6e6e6; } .index-content.content-02 .brands .logos li { display: inline-flex; align-items: center; justify-content: center; border-bottom: 0; width: 25%; height: 100%; position: relative; } .index-content.content-02 .brands .logos li .pc-logo, .index-content.content-02 .brands .logos li .name { display: none; } .index-content.content-02 .brands .logos li .m-logo { display: block; height: auto; position: relative; z-index: 10; } .index-content.content-02 .brands .logos li:nth-child(1) .m-logo { width: 13.3333333333vw; } .index-content.content-02 .brands .logos li:nth-child(2) .m-logo { width: 14.4vw; } .index-content.content-02 .brands .logos li:nth-child(3) .m-logo { width: 10.5333333333vw; } .index-content.content-02 .brands .logos li:nth-child(4) .m-logo { width: 12vw; } .index-content.content-02 .brands .logos li::before { content: ""; display: block; position: absolute; transition: all 0.3s ease-in-out; width: 25.8666666667vw; height: 23.3333333333vw; top: -2.5333333333vw; left: 50%; transform: translateX(-50%); z-index: 1; background: url("../images/m/index/content_02_logo_active.png") no-repeat; background-size: cover; opacity: 0; } .index-content.content-02 .brands .logos li.active { border-bottom: 0; } .index-content.content-02 .brands .logos li.active::before { opacity: 1; } .index-content.content-02 .brands .contents { width: 100%; height: 102.6666666667vw; } .index-content.content-02 .brands .contents li .main-content { padding: 0; justify-content: flex-start; } .index-content.content-02 .brands .contents li .main-content h2 { line-height: 9.3333333333vw; font-size: 6.4vw; } .index-content.content-02 .brands .contents li .main-content h3 { line-height: 7.2vw; font-size: 4.5333333333vw; margin: 1.3333333333vw 0 1.6vw 0; } .index-content.content-02 .brands .contents li .main-content .desc { height: auto; color: #333; padding: 0; } .index-content.content-02 .brands .contents li .main-content .desc p { line-height: 5.3333333333vw; font-size: 3.2vw; } .index-content.content-02 .brands .contents li .main-content .desc .more { width: 29.0666666667vw; height: 7.7333333333vw; margin-top: 5.3333333333vw; margin-left: 1.3333333333vw; border-radius: 2vw 0 2vw 0; background-color: var(--content-bg-color); } .index-content.content-02 .brands .contents li .main-content .desc .more span { font-size: 2.6666666667vw; color: #fff; } .index-content.content-02 .brands .contents li .img-block { position: absolute; bottom: -2.1333333333vw; left: 26.4vw; line-height: 0; width: 66.6666666667vw; height: 61.3333333333vw; } .index-content.content-02 .brands .contents li .img-block img { position: initial; width: 66.6666666667vw; height: 61.3333333333vw; } .index-content.content-02 .brands .contents li::after { height: 30.9333333333vw; left: 13.3333333333vw; border-radius: 8vw 0 8vw 0; } .index-content.content-03 { height: auto; padding-bottom: 13.3333333333vw; background-image: url("../images/m/index/content_03_bg.png"); } .index-content.content-03 .pc { display: none; } .index-content.content-03 .m { display: block; } .index-content.content-03 .m.brandpdts { padding-top: 18.6666666667vw; } .index-content.content-03 .m.brandpdts > .swiper-slide { z-index: 1; overflow: hidden; } .index-content.content-03 .m.brandpdts > .swiper-slide-active { z-index: 10; } .index-content.content-03 .m.brandpdts > .swiper-pagination { top: 0; display: flex; align-items: center; justify-content: center; height: 18.6666666667vw; } .index-content.content-03 .m.brandpdts > .swiper-pagination .swiper-pagination-bullet { display: inline-flex; justify-content: center; align-items: center; width: 21.3333333333vw; height: 8.2666666667vw; border-radius: 2vw 0 2vw 0; margin: 0 1.0666666667vw; transform: skew(-10deg); background-color: #fff; color: #00479d; opacity: 1; } .index-content.content-03 .m.brandpdts > .swiper-pagination .swiper-pagination-bullet label { transform: skew(10deg); font-size: 3.4666666667vw; } .index-content.content-03 .m.brandpdts > .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color: #fff; background-color: #00479d; } .index-content.content-03 .m.brandpdts .brand-swiper { width: 90%; margin: 0 auto; --swiper-navigation-color: #02489c; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide { position: relative; z-index: 1; opacity: 0; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide a { display: block; width: 90vw; transform-origin: 50% 50%; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide a .thumb { width: 90vw; height: 90vw; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide a .thumb img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide a .info { display: none; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-prev, .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-next { opacity: 0.6; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-prev a { transform: scale(0.6) translateX(-60%); } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-next a { transform: scale(0.6) translateX(-50%); } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active { z-index: 100; opacity: 1; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active a { margin-left: 50%; transform: scale(1) translateX(-50%); } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active a .info { height: 20vw; display: flex; flex-direction: column; align-items: center; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active a .info .pdt-name { font-size: 5.0666666667vw; color: #262626; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active a .info .pdt-brief { line-height: 6.9333333333vw; font-size: 3.7333333333vw; color: #666; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active a .info .more { display: inline-block; font-size: 2.9333333333vw; color: #00479d; line-height: 5.6vw; border-bottom: 0.2666666667vw solid #00479d; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active a .info .more::after { content: "\e628"; font-family: "iconfont"; font-weight: bold; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-slide.swiper-slide-active a .info a:hover .pdt-name { color: #00479d; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-next, .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-prev { width: 12vw; height: 100%; align-items: flex-end; top: initial; bottom: 0; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-next::after, .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-prev::after { line-height: 20vw; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-prev { left: 0; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-prev::after { font-family: "iconfont"; content: "\e629"; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-next { right: 0; } .index-content.content-03 .m.brandpdts .brand-swiper .swiper-button-next::after { font-family: "iconfont"; content: "\e628"; } .index-content.content-04 { padding: 8vw 6.6666666667vw; } .index-content.content-04 .news-list { margin-top: 5.3333333333vw; } .index-content.content-04 .news-list li { margin-bottom: 2.6666666667vw; } .index-content.content-04 .news-list li:last-child { margin-bottom: 0; } }/*# sourceMappingURL=index.css.map */