body { background-color: #fff; } .ellipsis { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .solution-list-wrap { position: relative; } .solution-cnt { max-width: 1400px; margin: 0 auto; width: 92%; padding: 0 0 105px 0; } .solution-list-wrap h2 { margin: 0px auto 40px auto; } .solution-list-wrap .introduce-box { text-align: center; margin-bottom: 50px; } .solution-list-wrap .introduce-box .title { font-size: 24px; line-height: 30px; font-weight: 700; margin: 35px 0 25px 0; } .solution-list-wrap .introduce-box .text { font-size: 16px; line-height: 22px; } .solution-list-wrap .solution-list { padding-bottom: 40px; } .solution-list-wrap .solution-list-mobile { display: none; } .solution-list-wrap .solution-list .swiper-solution-list .swiper-slide { font-size: 18px; line-height: 26px; width: auto; cursor: pointer; padding: 16px 45px 35px 45px; } .solution-list-wrap .solution-list .swiper-solution-list .swiper-slide::after { content: ""; width: 100%; height: 9px; position: absolute; top: 68px; right: 0; background: url(../home_new_image/line.png) no-repeat; background-position: center; opacity: 0; transition: all 0.4s ease; } .solution-list-wrap .solution-list .swiper-solution-list .swiper-slide::before { content: "/"; color: #333; position: absolute; left: 0; } .solution-list-wrap .solution-list .swiper-solution-list .swiper-slide:first-child:before { display: none; } .solution-list-wrap .solution-list .swiper-solution-list .solution-active { color: #cc0000; font-weight: 600; } .solution-list-wrap .solution-list .swiper-solution-list .solution-active.swiper-slide::after { opacity: 1; top: 68px; } .solution-list-wrap .solution-list .swiper-solution-list .swiper-slide:hover { color: #cc0000; font-weight: 600; } .solution-list-wrap .solution-list .solution-content { display: none; position: relative; background-color: #f7f7f7; padding: 30px 25px; } .solution-list-wrap .solution-list .solution-content .slide-content-active { display: block; } .solution-list-wrap .solution-list .swiper-solution-list .solution-prev, .solution-list-wrap .solution-list .swiper-solution-list .solution-next { background-image: none; font-size: 20px; font-weight: 600; color: #bfbfbf; z-index: 9; } .solution-list-wrap .solution-list .swiper-solution-list .solution-prev:hover, .solution-list-wrap .solution-list .swiper-solution-list .solution-next:hover { color: #cc0000; } .solution-list-wrap .solution-list .swiper-solution-list .solution-prev:focus, .solution-list-wrap .solution-list .swiper-solution-list .solution-next:focus { outline: none; } .solution-list-wrap .solution-list .swiper-solution-list .solution-prev { position: absolute; top: 16px; left: 0; background: #fff; padding-right: 35px; } .solution-list-wrap .solution-list .swiper-solution-list .solution-next { position: absolute; top: 16px; right: 0; left: auto; background: #fff; padding-left: 35px; } .solution-list-wrap .solution-list .solution-content .link { display: block; margin-bottom: 24px; } .solution-list-wrap .solution-list .solution-content .link:last-child { margin-bottom: 0; } .solution-list-wrap .solution-list .solution-content .list-box { display: flex; position: relative; } .solution-list-wrap .solution-list .solution-content .list-box .text-box { width: calc(71% - 34px); margin-left: 34px; } .solution-list-wrap .solution-list .solution-content .list-box .text-box h4 { font-size: 18px; font-weight: 600; margin-bottom: 18px; color: #333; transition: all 0.4s; } .solution-list-wrap .solution-list .solution-content .list-box:hover .text-box h4 { color: #cc0000; } .solution-list-wrap .solution-list .solution-content .list-box .text-box p { font-size: 16px; line-height: 35px; color: #333; } .solution-list-wrap .solution-list .solution-content .list-box .text-box .more-btn { color: #fff; padding: 5px 16px; display: inline-block; border: 1px solid #fff; background-color: #cc0000; border-color: #cc0000; font-size: 14px; line-height: 20px; position: absolute; right: 60px; bottom: 30px; } .solution-list-wrap .solution-list .solution-content .link .iconfont { position: absolute; top: 5px; right: 12px; transition: all 0.4s; } .solution-list-wrap .solution-list .solution-content .link .more-text { margin-right: 12px; } .solution-list-wrap .solution-list .solution-content .link:hover .iconfont { right: 6px; } .solution-list-wrap .solution-list .solution-content .list-box .img-bg { width: 29%; max-width: 372px; height: 239px; overflow: hidden; } .solution-list-wrap .solution-list .solution-content .list-box .img-box { width: 100%; max-width: 372px; height: 239px; transition: all 0.6s; } .solution-list-wrap .solution-list .solution-content .link:hover .list-box .img-box { -webkit-transform: scale(1.1); transform: scale(1.1); } .solution-list-wrap .solution-back { text-align: center; } .solution-list-wrap .back-box { color: #333; display: flex; align-items: center; justify-content: center; } .solution-list-wrap .solution-back .iconfont { display: block; width: 36px; height: 36px; background-color: #fff; border-radius: 50%; box-shadow: 0px 0px 15px 0px rgba(51, 51, 51, 0.15); text-align: center; line-height: 36px; cursor: pointer; transition: all 0.4s; } .solution-list-wrap .solution-back p { margin-left: 10px; cursor: pointer; font-size: 18px; } .solution-list-wrap .solution-back:hover span { box-shadow: 0px 0px 15px 0px rgba(51, 51, 51, 0.25); } .pc-solution-list-disable { display: none; } @media screen and (max-width: 1440px) { .solution-list-wrap .solution-cnt { max-width: 1000px; } .solution-list-wrap h2 { max-width: 1000px; } .solution-list-wrap .solution-list .solution-content .list-box .img-bg, .solution-list-wrap .solution-list .solution-content .list-box .img-box { height: 175px; } .solution-list-wrap .solution-list .solution-content .list-box .text-box .more-btn { bottom: 0; right: 0; } .solution-list-wrap .solution-list .solution-content .list-box .text-box p { line-height: 28px; } .solution-list-wrap .solution-list .solution-content .list-box .text-box h4 { margin-bottom: 12px; } } @media screen and (max-width: 1024px) { .solution-list-wrap .introduce-box { margin-bottom: 24px; } .solution-list-wrap .introduce-box .title { font-size: 18px; margin: 35px 0 12px 0; } .solution-list-wrap .introduce-box .text { font-size: 14px; } .solution-list-wrap .solution-list .solution-content .list-box { flex-wrap: wrap; } .solution-list-wrap .solution-list .solution-content .list-box .img-bg, .solution-list-wrap .solution-list .solution-content .list-box .img-box { width: 100%; max-width: 100%; } .solution-list-wrap .solution-list .solution-content .list-box .text-box { width: 100%; margin: 16px 0 0 0; } .solution-list-wrap .solution-list .solution-content .list-box .text-box h4 { font-size: 16px; } .solution-list-wrap .solution-list .solution-content .list-box .text-box p { font-size: 14px; } .solution-list-wrap .solution-list .swiper-solution-list .swiper-slide { font-size: 16px; padding: 16px 24px 18px 24px; } .solution-list-wrap .solution-list .swiper-solution-list .swiper-slide::after, .solution-list-wrap .solution-list .swiper-solution-list .solution-active.swiper-slide::after { top: 50px; } .solution-list-wrap .solution-back p { font-size: 16px; } .solution-list-wrap .solution-list .solution-content .list-box .text-box .more-btn { position: relative; right: 0; bottom: 0; float: right; margin-top: 24px; } } @media screen and (max-width: 768px) { .solution-cnt { padding: 0 0 40px 0; } .solution-list-wrap h2 { margin: 0px auto; } .solution-list-wrap .solution-list { display: none; } .solution-list-wrap .solution-list-mobile { display: block; margin-top: 40px; } .solution-list-wrap .solution-list-mobile .mobile-ul li { margin-bottom: 10px; } .solution-list-wrap .solution-list-mobile .mobile-ul li .title-box { background-color: #fff; box-shadow: 0px 0px 46px 5px rgba(51, 51, 51, 0.05); padding: 20px 35px; display: flex; align-items: center; justify-content: space-between; } .solution-list-wrap .solution-list-mobile .mobile-ul li .title-box .title { font-size: 16px; line-height: 26px; font-weight: 600; margin-right: 15px; } .solution-list-wrap .solution-list-mobile .mobile-ul li .title-box .iconfont { font-size: 20px; line-height: 26px; } .solution-list-wrap .solution-list-mobile .mobile-list { background-color: #f5f5f5; padding: 20px 35px; } .solution-list-wrap .solution-list-mobile .mobile-list .p-text { margin-bottom: 12px; } .solution-list-wrap .solution-list-mobile .mobile-list .p-text:last-child { margin-bottom: 0; } .solution-list-wrap .solution-list-mobile .mobile-list .p-text .link { font-size: 14px; line-height: 22px; color: #333; } .solution-list-wrap .solution-list-mobile .mobile-list .p-text .link:hover { color: #cc0000; } .solution-list-wrap .solution-list-mobile .mobile-ul .mobile-active { margin-bottom: 0; } .solution-list-wrap .solution-list-mobile .mobile-ul .mobile-active .title { color: #cc0000; } .solution-list-wrap .solution-list-mobile .mobile-ul .mobile-active .iconfont { transform: rotate(180deg); -webkit-transform: rotate(180eg); } .solution-list-wrap .solution-back { margin-top: 24px; } .solution-list-wrap .solution-back .iconfont { width: 30px; height: 30px; line-height: 30px; } }