/*优势*/ /*$$ {"color":[{"val":"#555555","title":"标题颜色+标题引文颜色+正文"}, {"val":"#226659","title":"标题颜色"}, {"val":"rgba(85,85,85,.6)","title":"了解更多默认文字颜色"}], "background":[{"val":"#f08519","title":"标题横线"}], "border":[{"val":"rgba(240,133,25,.6)","title":"了解更多默认边框"} ]} $$*/ #advantage_149 { width: 1200px; margin: 0 auto; padding: 40px 0; } #advantage_149 .indexTit { width: 100%; } #advantage_149 .indexTit .indexLine { width: 1px; height: 45px; margin: 0 auto; background: #f08519; } #advantage_149 .indexTit .indexTitBold { margin-top: 10px; font-size: 28px; font-weight: bold; line-height: 46px; color: #555555; text-align: center; } #advantage_149 .indexTit .indexTitBold span { color: #226659; } #advantage_149 .indexTit .indexTitChar { font-size: 18px; line-height: 46px; color: #555555; text-align: center; } #advantage_149 .advantageBody { width: 100%; margin-top: 40px; } #advantage_149 .advantageBody ul { width: 50%; margin: 0 auto; overflow: hidden; } #advantage_149 .advantageBody ul li { width: 33.3%; float: left; } #advantage_149 .advantageBody ul li img { width: 21%; display: block; margin: 0 auto; } #advantage_149 .advantageBody ul li p { font-size: 18px; font-weight:bold; text-align: center; line-height: 46px; color: #555555; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin-top: 15px; } #advantage_149 .advantageBody p { font-size: 14px; line-height: 36px; text-align: center; color: #555555; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin-top: 45px; } #advantage_149 .advantageBody img { width: 30px; height: auto; display: block; margin: 0 auto; margin-top: 35px; } #advantage_149 .advMore { width: 17%; margin: 0 auto; margin-top: 30px; cursor: pointer; position: relative; } #advantage_149 .advMore a{ border:rgba(240,133,25,.6) 1px solid; height: 50px; line-height: 48px; width: 100%; display: block; text-align: center; color:rgba(85,85,85,.6); font-size: 18px; letter-spacing: 3px; text-align: center; } #advantage_149 .advMore:hover a{ color: #555555; border: none; } #advantage_149 .advMore.btnAnimat .inner{ position:absolute; top:0; left:0; width:100%; height:100%; border-radius: 5px; } #advantage_149 .advMore.btnAnimat:before, #advantage_149 .advMore.btnAnimat:after, #advantage_149 .advMore.btnAnimat .inner:before, #advantage_149 .advMore.btnAnimat .inner:after{ background:#f08519; z-index: 100; } #advantage_149 .advMore.btnAnimat:before, #advantage_149 .advMore.btnAnimat:after, #advantage_149 .advMore.btnAnimat .inner:before, #advantage_149 .advMore.btnAnimat .inner:after{ position:absolute; content:""; display:block; -webkit-transition:-webkit-transform 0.3s; transition:-webkit-transform 0.3s; transition:transform 0.3s; transition:transform 0.3s,-webkit-transform 0.3s; } #advantage_149 .advMore.btnAnimat:before, #advantage_149 .advMore.btnAnimat:after{ left:0; width:100%; height:1px; -webkit-transform:scaleX(0); transform:scaleX(0); } #advantage_149 .advMore.btnAnimat .inner:before, #advantage_149 .advMore.btnAnimat .inner:after{ top:0; width:1px; height:100%; -webkit-transform:scaleY(0); transform:scaleY(0); } #advantage_149 .advMore.btnAnimat .inner:before{ left:0; } #advantage_149 .advMore.btnAnimat .inner:after{ right:0; } #advantage_149 .advMore.btnAnimat .inner:hover:before, #advantage_149 .advMore.btnAnimat .inner:hover:after{ -webkit-transform:scaleY(1);transform:scaleY(1); } #advantage_149 .advMore.btnAnimat:before{ top:0; } #advantage_149 .advMore.btnAnimat:after{ bottom:0; } #advantage_149 .advMore.btnAnimat:hover:before, #advantage_149 .advMore.btnAnimat:hover:after{ -webkit-transform:scaleX(1);transform:scaleX(1); } #advantage_149 .advMore.btnAnimat:hover .inner:before, #advantage_149 .advMore.btnAnimat:hover .inner:after{ -webkit-transform:scaleY(1);transform:scaleY(1); } #advantage_149 .advMore.btnAnimat.clockwise .inner:before{ -webkit-transform-origin:top center; transform-origin:top center; } #advantage_149 .advMore.btnAnimat.clockwise .inner:after{ -webkit-transform-origin:bottom center; transform-origin:bottom center; } #advantage_149 .advMore.btnAnimat.clockwise:before{ -webkit-transform-origin:right center; transform-origin:right center; } #advantage_149 .advMore.btnAnimat.clockwise:after{ -webkit-transform-origin:left center; transform-origin:left center; } #advantage_149 .advMore.btnAnimat.clockwise:hover .inner:before{ -webkit-transform-origin:bottom center; transform-origin:bottom center; } #advantage_149 .advMore.btnAnimat.clockwise:hover .inner:after{ -webkit-transform-origin:top center; transform-origin:top center; } #advantage_149 .advMore.btnAnimat.clockwise:hover:before{ -webkit-transform-origin:left center; transform-origin:left center; } #advantage_149 .advMore.btnAnimat.clockwise:hover:after{ -webkit-transform-origin:right center; transform-origin:right center; } @media screen and (max-width:1200px) { #advantage_149 { width: 90%; } } /* ipad */ @media screen and (max-width:992px) { #advantage_149 { width: 90%; } #advantage_149 .advantageBody p{ margin-top: 25px; } #advantage_149 .advantageBody ul{ width: 65%; } } /* 手机 */ @media screen and (max-width: 767px) { #advantage_149 { width: 96%; padding: 20px 0; } #advantage_149 .advantageBody ul { width: 100%; } #advantage_149 .advantageBody { margin-top: 15px; } #advantage_149 .advantageBody p { margin-top: 10px; line-height: 24px; max-height: 72px; } #advantage_149 .advantageBody ul li img { width: 30%; } #advantage_149 .advMore { width: 40%; margin-top: 15px; line-height: 36px; font-size: 14px; } #advantage_149 .indexTit .indexTitBold{ font-size: 22px; line-height: 36px; } #advantage_149 .indexTit .indexTitChar{ font-size: 16px; line-height: 30px; } #advantage_149 .advantageBody ul li p{ margin-top: 10px; line-height: 30px; } #advantage_149 .advantageBody img{ margin-top: 15px; } #advantage_149 .indexTit .indexLine{ height: 30px; } }