@charset "UTF-8"; /*主色调*/ /*文字文本*/ /*单行省略号*/ /*多行省略号*/ /*箭头*/ /**a标签hoverboder效果**/ /**使用vw适配**/ .banner { position: relative; } .banner a { display: block; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 15%; width: 150px; height: 38px; line-height: 38px; font-size: 14px; text-align: center; color: #fff; border: 1px solid #fff; z-index: 1; overflow: hidden; } @media (min-width: 768px) { .banner a { width: 180px; height: 48px; line-height: 48px; font-size: 18px; } } .banner a:after { content: ''; position: absolute; z-index: -1; -webkit-transition: width 0.3s, opacity 0.3s; transition: width 0.3s, opacity 0.3s; width: 0; height: 530px; top: 50%; left: 50%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity: 0; background: #000000; background: rgba(0, 0, 0, 0.2); -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .banner a:hover:after, .banner a:active:after { width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } .banner img { width: 100%; } h2.title { color: #333; font-size: 24px; text-align: center; } @media (min-width: 768px) { h2.title { font-size: 36px; } } @media (min-width: 1200px) { h2.title { font-size: 46px; } } .media-review { padding: 50px 0; } @media (min-width: 768px) { .media-review { padding: 70px 0; } } @media (min-width: 1200px) { .media-review { padding: 100px 0; } } .media-review .row { margin-top: 30px; } @media (min-width: 768px) { .media-review .row { margin-top: 50px; } } @media (min-width: 1200px) { .media-review .row { margin-top: 80px; } } .media-review .img a { display: block; overflow: hidden; } .media-review .img a img { width: 100%; -webkit-transition: all .5s ease; transition: all .5s ease; } .media-review .img a:hover img, .media-review .img a:active img { -webkit-transform: scale(1.05); transform: scale(1.05); } .media-review .txt { margin-top: 16px; } .media-review .txt:after { content: ''; display: block; clear: both; } @media (min-width: 768px) { .media-review .txt { margin-top: 26px; } } .media-review .txt h2 { float: left; color: #111; font-size: 16px; } @media (min-width: 768px) { .media-review .txt h2 { font-size: 22px; } } @media (min-width: 1200px) { .media-review .txt h2 { font-size: 26px; } } .media-review .txt a { float: right; color: #ed4747; font-size: 14px; } @media (min-width: 768px) { .media-review .txt a { margin-top: 5px; } } .media-review .txt a i { display: inline-block; width: 30px; height: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; background: url("/assets/image/arrow-color.png") no-repeat center; } .media-review .txt a:hover i, .media-review .txt a:active i { background-position: center right; } .media-review ul { padding-left: 0; padding-top: 25px; } @media (min-width: 768px) { .media-review ul { padding-top: 0; padding-left: 50px; } } @media (min-width: 1200px) { .media-review ul { padding-left: 100px; } } .media-review ul li { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ddd; } @media (min-width: 768px) { .media-review ul li { padding-top: 0; padding-bottom: 28px; } } .media-review ul li h2 { line-height: 1.4; color: #111; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; } @media (min-width: 768px) { .media-review ul li h2 { font-size: 22px; } } @media (min-width: 1200px) { .media-review ul li h2 { font-size: 26px; } } .media-review ul li span { display: inline-block; margin-top: 10px; color: #ed4747; font-size: 14px; } .media-review ul li span i { display: inline-block; width: 30px; height: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; background: url("/assets/image/arrow-color.png") no-repeat center; } .media-review ul li:hover h2, .media-review ul li:active h2 { color: #ed4747; } .media-review ul li:hover span i, .media-review ul li:active span i { background-position: center right; } .media-review ul li ~ li { padding-top: 20px; } @media (min-width: 768px) { .media-review ul li ~ li { padding-top: 28px; } } .social { height: 220px; background: url("/assets/image/banner-social.jpg") no-repeat center; background-size: cover; } @media (min-width: 768px) { .social { height: 400px; } } @media (min-width: 1200px) { .social { height: 610px; } } .social .container { height: 100%; font-size: 0; } .social .container:after { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .social .txt { display: inline-block; vertical-align: middle; } .social .txt span { color: #ed4747; font-size: 14px; } @media (min-width: 768px) { .social .txt span { font-size: 16px; } } .social .txt h2 { color: #fff; line-height: 1.5; font-size: 18px; margin: 20px 0 30px; } @media (min-width: 768px) { .social .txt h2 { margin: 30px 0 70px; font-size: 36px; } } @media (min-width: 1200px) { .social .txt h2 { margin: 50px 0 100px; font-size: 46px; } } .social .txt a { font-size: 14px; color: #ed4747; } @media (min-width: 768px) { .social .txt a { font-size: 16px; } } .social .txt a:hover, .social .txt a:active { text-decoration: underline; } .industry { padding: 50px 0; } @media (min-width: 768px) { .industry { padding: 70px 0; } } @media (min-width: 1200px) { .industry { padding: 100px 0; } } .industry h2.title { margin-bottom: 10px; } @media (min-width: 768px) { .industry h2.title { margin-bottom: 20px; } } @media (min-width: 1200px) { .industry h2.title { margin-bottom: 50px; } } .industry ul li { padding: 15px 0; border-bottom: 1px solid #e0e0e0; -webkit-transition: all .5s ease; transition: all .5s ease; } .industry ul li:after { content: ''; display: block; clear: both; } @media (min-width: 768px) { .industry ul li { padding: 30px 0; } } .industry ul li .time { width: 80%; float: left; font-size: 14px; color: #666; margin-top: 5px; margin-bottom: 5px; } @media (min-width: 768px) { .industry ul li .time { margin-top: 8px; width: 20%; } } .industry ul li .txt { float: left; width: 100%; } @media (min-width: 768px) { .industry ul li .txt { width: 80%; } } .industry ul li .txt a { display: inline-block; -webkit-transition: all .5s ease; transition: all .5s ease; } .industry ul li .txt a:hover h2, .industry ul li .txt a:active h2 { display: inline-block; color: #ed4747; } .industry ul li .txt h2 { color: #111; line-height: 1.6; -webkit-transition: all .5s ease; transition: all .5s ease; font-size: 16px; } @media (min-width: 768px) { .industry ul li .txt h2 { font-size: 22px; } } @media (min-width: 1200px) { .industry ul li .txt h2 { font-size: 24px; } } .industry ul li .txt span { display: block; margin-top: 5px; color: #999; font-size: 14px; } .industry ul li:hover, .industry ul li:active { background: #eee; } .view-industry:after { content: ''; display: block; clear: both; } .view-industry a { display: block; float: right; color: #ed4747; margin-top: 15px; } .view-industry a i { display: inline-block; width: 30px; height: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; background: url("/assets/image/arrow-color.png") no-repeat center; } .view-industry a:hover i, .view-industry a:active i { background-position: center right; } .dynamic { background: #fff; max-width: 940px; padding: 0 15px; margin: 0 auto 60px; } @media (min-width: 768px) { .dynamic { margin: 0 auto 100px; } } @media (min-width: 1200px) { .dynamic { margin: 0 auto 120px; } } .dynamic h2.title { margin-bottom: 30px; } @media (min-width: 768px) { .dynamic h2.title { margin-bottom: 50px; } } @media (min-width: 1200px) { .dynamic h2.title { margin-bottom: 80px; } } .dynamic ul li { margin-top: 20px; -webkit-transition: all .5s ease; transition: all .5s ease; } .dynamic ul li:after { content: ''; display: block; clear: both; } @media (min-width: 768px) { .dynamic ul li { margin-top: 30px; } } .dynamic ul li:hover { -webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.2); } .dynamic ul li .left { float: left; padding: 0 8px; background: #f86363; color: #fff; text-align: center; width: 100%; } @media (min-width: 768px) { .dynamic ul li .left { width: 22%; } } .dynamic ul li .left .time { padding: 10px 0; } @media (min-width: 768px) { .dynamic ul li .left .time { padding: 20px 0; min-height: 180px; } } @media (min-width: 1200px) { .dynamic ul li .left .time { min-height: 210px; } } .dynamic ul li .left .time .day { font-family: "Publico-Headline-Medium"; font-size: 40px; } @media (min-width: 768px) { .dynamic ul li .left .time .day { font-size: 72px; } } @media (min-width: 1200px) { .dynamic ul li .left .time .day { font-size: 94px; } } .dynamic ul li .left .time .year { font-size: 14px; } @media (min-width: 768px) { .dynamic ul li .left .time .year { font-size: 20px; } } .dynamic ul li .left .from { font-size: 14px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; height: 50px; line-height: 50px; border-top: 1px solid #fff; } .dynamic ul li .right { float: right; padding: 0 20px; width: 100%; background: #f2f2f2; } @media (min-width: 768px) { .dynamic ul li .right { width: 78%; padding: 0 30px; } } .dynamic ul li .right .operate { line-height: 50px; height: 50px; } .dynamic ul li .right .operate:after { content: ''; display: block; clear: both; } .dynamic ul li .right .operate .share { float: left; font-size: 0; } .dynamic ul li .right .operate .share > span { cursor: pointer; color: #ed4747; display: inline-block; vertical-align: middle; font-size: 14px; padding-left: 25px; background: url("/assets/image/share.png") no-repeat left; -webkit-transition: all .5s ease; transition: all .5s ease; } .dynamic ul li .right .operate .share .share-box { display: inline-block; vertical-align: middle; display: none; -webkit-transition: all .5s ease; transition: all .5s ease; } .dynamic ul li .right .operate .share .share-box.showIn { display: inline-block; } .dynamic ul li .right .operate .detail { display: block; float: right; color: #ed4747; font-size: 14px; } .dynamic ul li .right .operate .detail i { display: inline-block; width: 30px; height: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; background: url("/assets/image/arrow-color.png") no-repeat center; } .dynamic ul li .right .operate .detail:hover i, .dynamic ul li .right .operate .detail:active i { background-position: center right; } .dynamic ul li .right .txt { padding: 15px 0; } @media (min-width: 768px) { .dynamic ul li .right .txt { min-height: 180px; padding: 26px 0; } } @media (min-width: 1200px) { .dynamic ul li .right .txt { min-height: 210px; } } .dynamic ul li .right .txt span { display: block; color: #ed4747; font-size: 14px; margin-bottom: 14px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } .dynamic ul li .right .txt a:hover h2, .dynamic ul li .right .txt:active h2 { color: #ed4747; } .dynamic ul li .right .txt h2 { color: #111; line-height: 1.4; -webkit-transition: all .5s ease; transition: all .5s ease; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 18px; margin-bottom: 5px; } @media (min-width: 768px) { .dynamic ul li .right .txt h2 { font-size: 24px; margin-bottom: 15px; } } @media (min-width: 1200px) { .dynamic ul li .right .txt h2 { font-size: 28px; } } .dynamic ul li .right .txt .p1, .dynamic ul li .right .txt p { display: block; color: #333; font-size: 14px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } @media (min-width: 768px) { .dynamic ul li .right .txt .p1, .dynamic ul li .right .txt p { font-size: 18px; } } .social-share a { border: 0 !important; color: #ed4747 !important; } .social-share a:hover, .social-share a:active { background: #ed4747 !important; color: #fff !important; } @media (min-width: 768px) { .repository { background: -webkit-gradient(linear, left top, right top, color-stop(50%, #ffffff), color-stop(50%, #eeeeee), to(#eeeeee)); background: linear-gradient(to right, #ffffff 50%, #eeeeee 50%, #eeeeee); } } .repository .dynamic { padding: 0; } @media (min-width: 768px) { .repository .dynamic { padding-right: 15px; } } .repository .industry { padding-top: 0; } @media (max-width: 767px) { .repository .industry { padding-bottom: 60px; } .repository .industry .list-title { padding-top: 10px; margin-bottom: 0; } } @media (min-width: 768px) { .repository .industry { padding-bottom: 100px; } } @media (min-width: 1200px) { .repository .industry { padding-bottom: 120px; } } .repository .industry ul li { -webkit-transition: all .5s ease; transition: all .5s ease; } .repository .industry ul li:hover, .repository .industry ul li:active { padding-left: 8px; } @media (min-width: 768px) { .repository .industry ul li:hover, .repository .industry ul li:active { padding-left: 38px; } } @media (min-width: 768px) { .repository .industry ul { margin-right: -15px; } .repository .industry ul li { padding-left: 30px; padding-right: 30px; } } .repository .list { background: #fff; padding-top: 20px; } @media (min-width: 768px) { .repository .list { padding-top: 50px; } } .repository .list-title { font-size: 24px; color: #111; border-bottom: 1px solid #eee; padding: 40px 0 20px; margin-bottom: 20px; } @media (min-width: 768px) { .repository .list-title { margin-bottom: 20px; font-size: 36px; padding: 50px 0; margin-right: -15px; } } @media (min-width: 1200px) { .repository .list-title { font-size: 44px; margin-bottom: 30px; } } .repository .back-nav { color: #ed4747; font-size: 14px; cursor: pointer; display: inline-block; } @media (max-width: 767px) { .repository .back-nav { margin-bottom: 30px; } } .repository .back-nav i { display: inline-block; width: 30px; height: 10px; -webkit-transition: all .5s ease; transition: all .5s ease; background: url("/assets/image/arrow-color-left.png") no-repeat center; } .repository .back-nav:hover i, .repository .back-nav:active i { background-position: center left; } .repository .category { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #f8f8f8; z-index: 1010; padding: 30px; overflow: auto; background: #eee; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all .5s ease; transition: all .5s ease; -webkit-overflow-scrolling: touch; } .repository .category.showIn { -webkit-transform: translateX(0); transform: translateX(0); } @media (min-width: 768px) { .repository .category { position: relative; top: auto; left: auto; right: auto; bottom: auto; -webkit-transform: translateX(0); transform: translateX(0); z-index: 1; } } .repository .category .total { padding: 30px 0 20px; border-bottom: 1px solid #e0e0e0; } @media (min-width: 768px) { .repository .category .total { padding: 36px 0; } } .repository .category .total span { color: #333; font-size: 16px; } .repository .category .total p { color: #c6c6c6; font-family: "Publico-Headline-Medium"; font-weight: lighter; margin-top: 5px; font-size: 50px; } @media (min-width: 768px) { .repository .category .total p { font-size: 60px; } } .repository .category ul { margin: 0 -15px; margin-top: 30px; } @media (min-width: 768px) { .repository .category ul { margin-top: 65px; } } .repository .category ul li { margin: 15px 0; } .repository .category ul li a { display: inline-block; color: #666; padding: 10px 30px; font-size: 16px; border-left: 2px solid #eee; -webkit-transition: all .5s ease; transition: all .5s ease; } @media (min-width: 768px) { .repository .category ul li a { font-size: 14px; } } .repository .category ul li a:hover, .repository .category ul li a.active, .repository .category ul li a.cur { color: #ed4747; border-color: #ed4747; } .service-main { padding-bottom: 60px; } @media (min-width: 768px) { .service-main { padding-bottom: 100px; } } @media (min-width: 768px) { .service-main { padding-bottom: 120px; } } .service-main .tit { font-size: 24px; color: #333; padding: 50px 0; } @media (max-width: 1920px) { .service-main .tit { font-size: 24px; } } @media (max-width: 1200px) { .service-main .tit { font-size: 20px; } } @media (max-width: 768px) { .service-main .tit { font-size: 18px; } } .service-main .srv-list { font-size: 16px; line-height: 2; } @media (max-width: 1920px) { .service-main .srv-list { font-size: 16px; } } @media (max-width: 1200px) { .service-main .srv-list { font-size: 15px; } } @media (max-width: 768px) { .service-main .srv-list { font-size: 14px; } } .service-main .srv-list li ~ li { padding-top: 30px; } .service-main .complaint-inline-list li { display: inline-block; margin-right: 50px; } @media (max-width: 768px) { .service-main .complaint-inline-list li { display: block; margin-right: 0px; } .service-main .complaint-inline-list br { display: none; } } .service-main .img { width: 100%; text-align: center; padding-bottom: 30px; } .service-main .img img { max-width: 100%; } .service-main .insure { width: 70%; margin: 0 auto; } @media (max-width: 768px) { .service-main .insure { width: 90%; } } .service-main .ash { font-size: 14px; color: #666666; line-height: 30px; } @media (max-width: 768px) { .service-main .ash { font-size: 13px; } } .service-main .srv-table { width: 100% !important; margin: 50px 0 30px; text-align: center; line-height: 1.8; } .service-main .srv-table tr p { padding: 30px 10px; } .table-compensate td[rowspan] { vertical-align: top; } .table-compensate td[rowspan] p { font-weight: bold; text-align: left; } .table-well td:first-child { text-align: left; } .table-well .td-h { vertical-align: top; } .table-well .td-r { padding-left: 100px !important; } @media (max-width: 768px) { .table-well .td-r { padding-left: 10px !important; } }