#swiper-banner { width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); .swiper-slide { img { width: 100%; } } .swiper-pagination .swiper-pagination-bullet { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background: #fff; opacity: 1; width: 1.2rem; height: 1.2rem; } .swiper-pagination .swiper-pagination-bullet-active { background: #c82b1d !important; width: 2.4rem; border-radius: 5rem; } } .list { ul { padding: 0 20px; margin: 0; margin-bottom: 3px; @media (min-width: 768px) { margin-bottom: 0; } li { font-size: 16px; line-height: 35px; height: 35px; position: relative; padding-left: 16px; color: #666666; list-style: none; &:before { position: absolute; content: ""; display: inline-block; width: 3px; height: 3px; left: 0; top: 35px / 2 - 3; background-color: #e5e5e5; } a { color: #666666; font-weight: 400; text-overflow: ellipsis; -moz-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; -webkit-box-orient: vertical; } } } &.color-white{ li{ color: #fff; &:before { background-color: #fff; } a{ color: #fff; } } } } .index01{ #swiper-index01 { margin: 0 15px; a:hover, a:active{ text-decoration: none; } .swiper-slide { border:1px solid #f0f0f0; .img { width: 100%; } .text{ padding: 0 15px; h1{ font-size: 16px; text-align: center; position: relative; margin-top: 20px; padding-bottom: 10px; color:#000; &:after{ position: absolute; width: 20px; height: 1px; background-color: #c82b1e; content: ""; bottom: 0; left: calc(~'50% - 10px'); } } p{ font-size: 14px; line-height: 24px; font-weight: 400; color:#666; text-align: center; margin-bottom: 20px; max-height: 44px; } } } @media (min-width: 768px) { margin: 0 92px; margin-top: 27px; overflow: visible; .swiper-wrapper{ display: flex; justify-content: flex-start; flex-wrap: wrap; border-top:1px solid #d7d7d7; } .swiper-slide{ width: 50%; border:1px solid #d7d7d7; border-top:0; display: flex; justify-content: space-between; align-items: center; a{ width: 100%; display: flex; justify-content: space-between; align-items: stretch; } &:nth-child(2n){ border-left:0; } .img{ width: 50%; border-left:0; border-right: 1px solid #d7d7d7; } .text{ width: 50%; display: flex; flex-flow: column; align-items: center; justify-content: center; position: relative; h1{ font-size: 20px; &:after{ width: 28px; left: calc(~'50% - 14px'); } z-index: 2; } p{ color:#a7a7a7; z-index: 2; } .pro_hover{ width: 100%; position: absolute; top: 100%; bottom:0; background-color: #c82b1ed1; transition: all .3s; } } &:hover{ .pro_hover{ top: 0; } h1{ color:#fff; } p{ color:#fff; } } &:nth-child(3),&:nth-child(4){ .img{ border-left:1px solid #d7d7d7; border-right: 0; order:2; } .text{ order:1; } } } } } } .index02{ position: relative; .lists{ &>div{ background-color: #fff; padding-bottom: 24px; &:last-child { background-color: #da0302; .tip{ h1, h3 { color: #fff; } i { &:before, &:after, span { background-color: #fff; } } } .list{ li{ color: #fff; &:before { background-color: #fff; } a{ color: #fff; } } } @media (min-width: 768px) { background-color: #fff; .tip{ h1{ color: #000; } h3 { color: #dc1413; } i { &:before, &:after, span { background-color: #d7d7d7; } } } .list{ li{ color: #666666; &:before { background-color: #e5e5e5; } a{ color: #666666; } } } } } .list{ p{ text-indent:2em; text-align: justify; -webkit-line-clamp: 4; a{ font-size: 14px; color:#666666; line-height: 28px; font-weight: 400; text-align: justify; @media (min-width: 768px) { font-size: 16px; color:#3d3d3d; line-height: 35px; } } } } } } .index02-bg{ position: relative; padding-top:47%; img{ position: absolute; left:0; right:0; top:0; width: 100%; } padding-bottom: 0!important; } @media (min-width: 768px) { margin-top: 40px; padding-top:13%; .lists{ box-shadow: 0 4px 10px rgba(11,2,5,0.07); &>div{ position: relative; height: 400px; &.index02-bg{ position: absolute; } .more{ width: 100%; height: 62px; position: absolute; bottom: 0; right: 0; z-index: 1; div{ position: relative; width: 100%; height: 62px; a{ position: absolute; top:18px; right:calc(~'50% - 42.5px'); background-image: url('../images/index/index02_more2.png'); background-position: left center; background-repeat: no-repeat; background-size: 100%; display: block; width: 85px; height: 29px; line-height: 29px; padding-left: 8px; font-weight: 400; font-family: "Arial"; font-size: 12px; color:#fff; text-decoration: none; transition: all .6s; } } } &:hover,&:active{ background-color: #f3f3f3; .more{ div{ a{ right:20px; background-image: url('../images/index/index02_more.png'); color:#3d3d3d; } } } } .list{ margin: 0 0px; p{ -webkit-line-clamp: 5; margin-bottom: 9px; } } &:nth-child(3){ border:1px solid #f2f2f2; border-top:0; border-bottom: 0; } &:first-child{ .list{ margin: 0 47px; &:hover{ .more{ a{ right:0; } } } } } } } .index02-bg{ top:0; left:0; right:0; padding-top:24%; position: absolute; z-index: -1; &:hover{ background:none!important; } } } } .index03{ @media (min-width: 768px) { .container{ padding: 0 45px; } } .pic-list{ ul{ padding: 0 15px; @media (min-width: 768px) { padding: 0; } } } } .index04 { padding-bottom: 20px; .list li{ //@media (min-width: 768px) { // &:last-child{ // display: none; // } //} } background-color: #666666; @media (min-width: 768px) { padding-bottom: 15px; .container{ padding: 0 45px; } } .input_email{ width: 100%; height: 35px; font-size: 14px; line-height: 24px; padding: 0 15px; margin-bottom: 0px; margin-top: 0px; @media (min-width: 768px) { height: 27px; } &::-webkit-input-placeholder { color: #d6d6d6; font-weight: 400; } } textarea { width: 100%; height: 120px; margin-top: 10px; margin-bottom: 6px; padding: 0px 15px; @media (min-width: 768px) { height: 113px; margin-bottom: 3px; } border: 1px solid #e5e5e5; line-height: 35px; font-size: 14px; &::-webkit-input-placeholder { color: #d6d6d6; font-weight: 400; } } .text-align { text-align: center; @media (min-width: 768px) { text-align: left; } } button { margin: 0 auto; height: 35px; width: 95px; font-weight: 300; @media (min-width: 768px) { height: 27px; width: 76px; margin-right: 0; font-weight: 400; } border: 0; background-color: #333333; color: #fff; margin-bottom: 0px; } } .form-input{ display: flex; margin-bottom: 10px; @media (min-width: 768px) { margin-bottom: 25px; } justify-content: space-between; #commentCaptcha{ line-height: 35px; height: 35px; @media (min-width: 768px) { line-height: 27px; height: 27px; } } #commentCaptchaImg{ height: 35px; margin-left: 15px; @media (min-width: 768px) { height: 27px; } } .l,.r{ display: flex; } .r{ button:last-child{ margin-left: 15px; } } }

map