* { margin: 0; padding: 0; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-overflow-scrolling: touch; -o-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -moz-overflow-scrolling: touch; outline: none; -webkit-tap-highlight-color: transparent } *[cur] { cursor: pointer } body, html { background-color: #fff; font-size: 12px; /*font-family: -apple-system, blinkmacsystemfont, arial, helvetica, sans-serif, 'segoe ui', roboto, oxygen, ubuntu, cantarell, 'open sans', 'helvetica neue', sans-serif*/ font-family: "微软雅黑" } .bgcc, *[bgcc] { background-size: cover; background-position: center } form, label { display: block } ol, ul, li, dl, dt, dd { list-style: none } input, button, select { border-radius: 0 } input[type="submit"], input [type="button"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background: none } a, a:hover, a:active, a:visited, a:link, a:focus { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; outline: none; background: none; text-decoration: none } a { color: inherit; text-decoration: none } img { display: block; width: 100%; height: 100%; border: none } .cb::after, .cb::before { display: block; clear: both; content: '' } .fl { float: left } .fr { float: right } .media-wrap { position: relative } .media-wrap img, .media-wrap video, .media-wrap iframe { display: block; width: 100%; height: 100% } .media-wrap img[abs] { position: absolute; top: 0; left: 0 } .page { overflow: hidden } .inner { width: 1200px; margin: 0 auto } .text_wrap, .line1 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden } .line2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } .table { display: table; width: 100%; height: 100% } .table .table-cell { display: table-cell; width: 100%; height: 100%; vertical-align: middle } .index-title-container { height: 40px; padding-left: 21px; position: relative; margin-bottom: 28px } .index-title-container::before { width: 7px; height: 100%; background: #c70f04; left: 0; top: 0; content: ''; position: absolute } .index-title-container .index-title { font-size: 24px; font-weight: bold; color: #333333; line-height: 40px } .index-title-container .btn-container { padding-top: 3px } .index-title-container .btn { line-height: 30px; border-radius: 5px; padding: 0 4px; border-radius: 6px; font-size: 14px; font-weight: 400; color: #000000; margin-right: 3px } @media screen and (min-width: 750px) { .index-title-container .btn:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) } } .index-title-container .btn:last-child { margin-right: 0 } .index-title-container .btn.active { background: #c70f04; color: #fff } @media screen and (min-width: 750px) { .index-title-container .btn.active:hover { box-shadow: 0 0 10px rgba(199, 15, 4, 0.2) } } .new-slide-title { width: -moz-calc(100% - 120px); width: calc(100% - 120px); color: #222222; line-height: 56px; font-size: 20px; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .new-slide-date { width: 120px; color: #222222; font-size: 20px; line-height: 56px; text-align: right; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .new-slide:hover .new-slide-title { color: #c70f04; padding-left: 10px } .new-slide:hover .new-slide-date { color: #c70f04 } } .scope-item { display: none; pointer-events: none; -webkit-animation: fadein 0.5s linear 0s 1 normal both; -moz-animation: fadein 0.5s linear 0s 1 normal both; animation: fadein 0.5s linear 0s 1 normal both } .scope-item.active { display: block; pointer-events: auto } .main-left { width: 734px } .main-right { width: 380px } .nav2-item { width: 172px; height: 50px; border: 1px solid #3986d4; border-radius: 5px 4px 4px 5px; float: left; color: #3986d4; font-size: 16px; text-align: center; line-height: 48px; margin-right: 16px; overflow: hidden; position: relative; z-index: 1 } .nav2-item .top { display: block; position: relative; z-index: 2; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s } .nav2-item::after { width: 0; height: 0; left: 50%; top: 50%; border-radius: 100%; background-color: #3986d4; content: ''; position: absolute; z-index: -1; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: width .5s, height .5s; -moz-transition: width .5s, height .5s; transition: width .5s, height .5s } @media screen and (min-width: 750px) { .nav2-item:hover { color: #fff; box-shadow: 0 0 10px rgba(57, 134, 212, 0.6) } .nav2-item:hover::after { width: 300px; height: 300px } } .nav2-item.active { color: #fff; box-shadow: 0 0 10px rgba(57, 134, 212, 0.6) } .nav2-item.active::after { width: 300px; height: 300px } .dev-slide-container { margin-top: 30px } .title2-line-container .title2-line { width: 10px; height: 61px; background: #3986d4 } .title2-line-container .title2-line-con { margin-left: 22px; line-height: 1.56 } .title2-line-container .title2-title { font-size: 24px } .title2-line-container .title2-text { font-size: 16px } .title2-line-container .more { font-size: 18px; color: #616161; margin-top: 18px } @media screen and (min-width: 750px) { .title2-line-container .more:hover { text-decoration: underline } } .notic-include { line-height: 53px; margin-top: 30px; margin-bottom: 30px } .notic-include .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .notic-include .swiper-slide { border: 1px solid #d1d1d1; border-top: none; border-left: none; border-right: none } .notic-include .swiper-slide[data-index="0"] .num { color: #c50000 } .notic-include .swiper-slide[data-index="1"] .num { color: #c50000 } .notic-include .swiper-slide[data-index="2"] .num { color: #dbcd24 } @media screen and (min-width: 750px) { .notic-include .swiper-slide:hover .title { color: #c70f04 } } .notic-include .num { width: 40px; font-size: 30px; font-weight: 300; font-family: "宋体"; color: #a58888; text-align: left } .notic-include .title { width: -moz-calc(100% - 40px); width: calc(100% - 40px); font-size: 16px; color: #000000 } .zhuanti-include { margin-top: 30px } .zhuanti-include .swiper-container { margin-top: 17px } .zhuanti-include .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .zhuanti-include .swiper-slide { margin-bottom: 16px } @media screen and (min-width: 750px) { .zhuanti-include .swiper-slide:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) } } .zhuanti-include .swiper-slide .media-wrap { overflow: hidden } .zhuanti-include .swiper-slide .media-wrap *[scale] { -webkit-transition: .5s; -moz-transition: .5s; transition: .5s } .zhuanti-include .swiper-slide .media-wrap:hover *[scale] { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05) } .pagination { text-align: center; line-height: 0; font-size: 0; color: #616161; padding: 3% 0 } .pagination a, .pagination span, .pagination i { display: inline-block; font-style: normal; padding: 0 6px; line-height: 1.6; vertical-align: top; font-size: 14px; margin: 0 3px } .pagination a { border: 1px solid #3986d4; color: #3986d4; border-radius: 3px; opacity: .8 } .pagination a:hover { opacity: 1 } .pagination [shi] { background-color: #3986d4; color: #fff } .pagination[dj] a { border: 1px solid #e20c20; color: #e20c20 } .pagination[dj] [shi] { background-color: #e20c20; color: #fff } .work-title-container { line-height: 35px; padding-top: 30px } .work-title-container .work-title { font-size: 26px; font-weight: bold; padding-left: 30px; position: relative } .work-title-container .work-title::before { width: 7px; height: 35px; background: #c70f03; position: absolute; content: ''; left: 0; top: 0 } .work-title-container .work-more { font-size: 18px; font-weight: 400; color: #7a7a7a } @media screen and (min-width: 750px) { .work-title-container .work-more:hover { text-decoration: underline } } .work-title-container .work-title-btn-container { margin-left: 20px } .work-title-container .work-title-btn-container .work-title-btn { height: 34px; border-radius: 5px; line-height: 34px; margin-right: 16px; font-size: 18px; color: #7b7b7b; padding: 0 16px; cursor: pointer; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .work-title-container .work-title-btn-container .work-title-btn:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) } } .work-title-container .work-title-btn-container .work-title-btn.active { background: #c70f04; color: #fff } .list-add-more { display: block; width: 241px; border: 1px solid #3986d4; border-radius: 1px; line-height: 48px; color: #3986d4; margin: 30px auto 0; font-size: 18px; text-align: center; border-radius: 0; -webkit-transition: .4s; -moz-transition: .4s; transition: .4s } @media screen and (min-width: 750px) { .list-add-more:hover { border-radius: 12px; color: #3986d4; border-color: #3986d4; -webkit-animation: rubberband 1s linear 0s 1 normal both; -moz-animation: rubberband 1s linear 0s 1 normal both; animation: rubberband 1s linear 0s 1 normal both; box-shadow: 0 0 10px rgba(57, 134, 212, 0.6) } } .list-add-more-container { padding: 12px 0 } .list-add-more-container .list-add-more { margin: 0 } @media screen and (max-width: 1024px) { .index-title-container { height: 30px; line-height: 30px; font-size: 20px; padding-left: 14px; margin-bottom: 20px } .index-title-container::before { width: 4px } .index-title-container .index-title { line-height: 30px; font-size: 18px; position: relative } .new-slide-title { font-size: 14px; line-height: 30px; width: -moz-calc(100% - 80px); width: calc(100% - 80px) } .new-slide-date { font-size: 14px; line-height: 30px; width: 80px } .nav2 .inner { width: 100% } .nav2-item { width: auto; padding: 0 12px; line-height: 32px; font-size: 16px; height: 32px; margin-right: 6px } .main-left { width: 100% } .main-right { width: 100% } .main-right .swiper-wrapper { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .title2-line-container .title2-line { width: 3px; height: 30px } .title2-line-container .title2-title { float: left; line-height: 30px; font-size: 16px } .title2-line-container .title2-line-con { margin-left: 12px } .title2-line-container .title2-text { float: left; font-size: 14px; line-height: 30px; margin-left: 12px } .title2-line-container .more { font-size: 12px; line-height: 30px; margin: 0; padding: 0 12px } .notic-include { margin: 20px 0 } .zhuanti-include { margin: 20px 0 0 } .zhuanti-include .swiper-slide { margin-bottom: 0 } .work-title-container { line-height: 30px; padding-top: 12px } .work-title-container .work-title { font-size: 18px; padding-left: 12px } .work-title-container .work-title::before { height: 100%; width: 4px } .work-title-container .work-title-btn-container { margin-left: 12px } .work-title-container .work-title-btn-container .work-title-btn { font-size: 14px; height: 30px; line-height: 30px; padding: 0 12px; margin-right: 6px } .work-title-container .work-more { font-size: 14px; padding: 0 6px } .list-add-more { width: 150px; line-height: 40px; font-size: 14px } } @-webkit-keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadein { 0% { opacity: 0 } 100% { opacity: 1 } } header { padding: 37px 0 32px 0; background-image: url(/uploads/image/tpjdimages/header_bg97b82.png) } header .logo { width: 30.89312%; display: block } header .from { width: 385px; height: 33px; border: 1px solid #888888; margin-top: 33px; position: relative; overflow: hidden; background-color: #fff } header .from input[type='text'] { width: 100%; height: 100%; border: none; background: none; padding: 0 30px; font-size: 14px } header .from input[type='text']::-webkit-input-placeholder { color: #606060 } header .from input[type='text']::-moz-placeholder { color: #606060 } header .from input[type='text']:-ms-input-placeholder { color: #606060 } header .from input[type='text']::-ms-input-placeholder { color: #606060 } header .from input[type='text']::placeholder { color: #606060 } header .submit { width: 80px; height: 31px; position: absolute; background: #fff center no-repeat; right: 0; top: 0; text-indent: 100px; cursor: pointer } header .submit:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) } nav { background: #3985d3; text-align: center; padding-top: 12px } nav .item { width: 11.11111%; height: 100px; float: left; position: relative; font-size: 18px; color: #ffffff } nav .item:nth-child(9n) .text::after { display: none } nav .top { width: 52px; height: 52px; margin: 0 auto } nav .text { position: relative } nav .text::after { width: 2px; height: 100%; background-color: #fff; right: 0; top: 0; content: ''; position: absolute } .article { font-size: 50px; font-weight: normal; color: #c71004; padding: 36px 0; text-align: center; line-height: 62px } .swiper-news .swiper-pagination { text-align: right; padding-right: 30px; width: auto; left: auto; right: 0; font-size: 0; line-height: 0; padding-bottom: 12px } .swiper-news .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: #bebebe; border-radius: 0; opacity: 1 } .swiper-news .swiper-pagination .swiper-pagination-bullet-active { background: #fff } .swiper-news .container-left { width: 680px } .swiper-news .swiper-news-swiper { font-size: 23px; font-weight: bold; color: #ffffff } .swiper-news .swiper-news-swiper .text { padding: 0 180px 0 23px; position: absolute; bottom: 0; left: 0; z-index: 2; line-height: 64px; width: 100%; background: rgba(0, 0, 0, 0.5) } .swiper-news .notice { height: 104px; border: 1px solid #ededed; margin-top: 13px } .swiper-news .notice .left { font-size: 34px; font-weight: bold; color: #c70f04; line-height: 39px; letter-spacing: .1em; padding: 13px; padding-right: 0 } .swiper-news .notice .right { width: -moz-calc(100% - 13px - 90px); width: calc(100% - 13px - 90px); height: 100%; padding-right: 13px; padding-top: 13px } .swiper-news .notice .item { font-size: 18px; font-weight: 400; line-height: 40px } @media screen and (min-width: 750px) { .swiper-news .notice .item:hover { color: #c70f04 } } .swiper-news .notice .item .fl { width: -moz-calc(100% - 100px); width: calc(100% - 100px); -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .swiper-news .notice .item .fr { width: 100px; text-align: right; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .swiper-news .container-right { width: 660px } .swiper-news .container-right .new-ul-date li { margin-bottom: 42px } .swiper-news .container-right .new-ul-date li:last-child { margin-bottom: 0 } @media screen and (min-width: 750px) { .swiper-news .container-right .new-ul-date li:hover .date-wrap .date, .swiper-news .container-right .new-ul-date li:hover .date-wrap .year { color: #c70f04 } .swiper-news .container-right .new-ul-date li:hover .text-container .title { padding-left: 12px; color: #c70f04 } .swiper-news .container-right .new-ul-date li:hover .text-container .text { color: #c70f04 } } .swiper-news .container-right .new-ul-date .date-wrap { width: 100px; text-align: center } .swiper-news .container-right .new-ul-date .date-wrap .date { font-size: 47px; color: #333333; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .swiper-news .container-right .new-ul-date .date-wrap .year { font-size: 14px; color: #212121; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .swiper-news .container-right .new-ul-date .text-container { width: -moz-calc(100% - 100px); width: calc(100% - 100px); padding-top: 4px } .swiper-news .container-right .new-ul-date .text-container .title { color: #000; font-size: 20px; line-height: 2; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .swiper-news .container-right .new-ul-date .text-container .text { color: #666; font-size: 14px; line-height: 2; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .card-container { padding: 2.70833% 0 } .card-container .item { width: 23.42606%; height: 162px; position: relative; margin-right: 2.04978% } .card-container .item .box { -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; width: 100%; height: 100%; overflow: hidden; border-radius: 9px 9px 9px 9px } @media screen and (min-width: 750px) { .card-container .item .box:hover { -webkit-transform: translatey(-10px); -moz-transform: translatey(-10px); -ms-transform: translatey(-10px); transform: translatey(-10px) } } .card-container .item:nth-child(1) .box { background: #3985d3 } .card-container .item:nth-child(2) .box { background: #4763d7 } .card-container .item:nth-child(3) .box { background: #c70067 } .card-container .item:nth-child(4) { margin-right: 0 } .card-container .item:nth-child(4) .box { background: #c70b00 } .card-container .title { font-size: 22px; font-weight: bold; color: #ffffff; line-height: 32px } .card-container .text { font-size: 14px; color: #ffffff; line-height: 20px } .card-container .text-container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: #fff; padding: 20px } .card-container img { width: 31.94888%; position: absolute; top: 0; right: 2%; bottom: 0; margin: auto 0; height: auto; opacity: .5 } .weiquan .container { width: 49% } .weiquan .email-top { font-size: 24px; font-weight: 400; color: #040404; line-height: 81px } .weiquan .email-top .item { width: -moz-calc(81px 24px 97px); width: calc(81px 24px 97px); float: left; margin-right: -moz-calc(((100% - (81px 24px 97px) * 3) - 1px) / 2); margin-right: calc(((100% - (81px 24px 97px) * 3) - 1px) / 2) } .weiquan .email-top .item:nth-child(3n) { margin-right: 0 } @media screen and (min-width: 750px) { .weiquan .email-top .item:hover .text { color: #c70f04 } } .weiquan .email-top .text { width: 121px; text-align: center; float: left; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .weiquan .email-top .media-wrap { width: 81px; height: 81px; float: left } .weiquan .law .top { font-size: 20px; font-weight: 400; color: #040404; line-height: 74px } @media screen and (min-width: 750px) { .weiquan .law .top .fr:hover { color: #c70f04 } } .weiquan .law .bottom .media-wrap { width: 279px; height: 172px } .weiquan .law .bottom .text-container { width: -moz-calc(100% - 279px - 30px); width: calc(100% - 279px - 30px) } .weiquan .law .bottom .item { padding: 10px 0; line-height: 2 } @media screen and (min-width: 750px) { .weiquan .law .bottom .item:hover .title { color: #c70f04 } } .weiquan .law .bottom .title { font-size: 18px; font-weight: 400; color: #333333 } .weiquan .law .bottom .text { font-size: 14px; font-weight: 400; color: #000000 } .weiquan .dev-con.pc { display: block } .weiquan .dev-con.touch { display: none } .weiquan .dev-con .ref { display: none } .weiquan .dev-con .ref.active { display: block } .dev-item { font-size: 18px; font-weight: 400; color: #ffffff; text-align: center; margin-bottom: 3px } .dev-item-left { width: 202px; height: 107px; padding-top: 18px; background: #d6d9d8; position: relative; -webkit-transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); cursor: pointer } .dev-item-left:last-child { margin-bottom: 0 } .dev-item-left::before { width: 0; height: 0; border: 12px solid transparent; border-left-color: #d6d9d8; position: absolute; left: -moz-calc(100% - 12px); left: calc(100% - 12px); bottom: 0; top: 0; margin: auto 0; content: ''; opacity: 0; -webkit-transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); -moz-transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) } .dev-item-left.active { background: #c70f04; z-index: 2 } .dev-item-left.active::before { border-left-color: #c70f04; left: 100%; opacity: 1 } .dev-item-left.active .ref { display: block } .dev-item-right { height: 100%; display: block; margin-bottom: 3px; -webkit-animation: fadein 0.5s linear 0s 1 normal both; -moz-animation: fadein 0.5s linear 0s 1 normal both; animation: fadein 0.5s linear 0s 1 normal both } .dev-item-right:last-child { margin-bottom: 0 } @media screen and (min-width: 750px) { .dev-item-right:hover .title { color: #c70f04 } } .dev-item .ref { width: -moz-calc(669px - 202px - 30px); width: calc(669px - 202px - 30px); height: 100%; position: absolute; top: 0; left: -moz-calc(100% 30px); left: calc(100% 30px); text-align: left; display: none; z-index: 3 } .dev-item:nth-child(1) .ref { top: -moz-calc((-100% * (1 - 1)) - (3px * 1)); top: calc((-100% * (1 - 1)) - (3px * 1)) } .dev-item:nth-child(2) .ref { top: -moz-calc((-100% * (2 - 1)) - (3px * 2)); top: calc((-100% * (2 - 1)) - (3px * 2)) } .dev-item:nth-child(3) .ref { top: -moz-calc((-100% * (3 - 1)) - (3px * 3)); top: calc((-100% * (3 - 1)) - (3px * 3)) } .dev-item .media-wrap { width: 45px; height: 45px; margin: 0 auto } .dev-item .title { font-size: 18px; font-weight: 400; color: #1a1a1a; line-height: 2; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .dev-item .text { font-size: 14px; font-weight: 400; color: #000000; line-height: 18px; height: 36px; margin: 3px 0 } .dev-item .date { font-size: 14px; font-weight: 400; color: #000000; line-height: 32px } .fast-nav { padding: 40px 0 } .fast-nav .card-li { width: 8.19912%; height: 112px; border: 2px solid #3986d4; border-radius: 20px; float: left; margin-right: 4.90483%; padding-top: 22px } .fast-nav .card-li:nth-child(1) { -webkit-transition-delay: .1s; -moz-transition-delay: .1s; transition-delay: .1s } .fast-nav .card-li:nth-child(2) { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .fast-nav .card-li:nth-child(3) { -webkit-transition-delay: .3s; -moz-transition-delay: .3s; transition-delay: .3s } .fast-nav .card-li:nth-child(4) { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .fast-nav .card-li:nth-child(5) { -webkit-transition-delay: .5s; -moz-transition-delay: .5s; transition-delay: .5s } .fast-nav .card-li:nth-child(6) { -webkit-transition-delay: .6s; -moz-transition-delay: .6s; transition-delay: .6s } .fast-nav .card-li:nth-child(7) { -webkit-transition-delay: .7s; -moz-transition-delay: .7s; transition-delay: .7s } .fast-nav .card-li:nth-child(8) { -webkit-transition-delay: .8s; -moz-transition-delay: .8s; transition-delay: .8s } .fast-nav .card-li:nth-child(8n) { margin-right: 0 } .fast-nav .card-li .media-wrap { width: 50px; height: 40px; margin: 0 auto; position: relative } .fast-nav .card-li .media-wrap img { position: absolute } .fast-nav .card-li .media-wrap img:nth-child(1) { opacity: 1 } .fast-nav .card-li .media-wrap img:nth-child(2) { opacity: 0 } .fast-nav .card-li .text { text-align: center; font-size: 16px; font-weight: 400; color: #3986d4 } @media screen and (min-width: 750px) { .fast-nav .card-li:hover { background-color: #3986d4; box-shadow: 0 0 10px 5px rgba(57, 134, 212, 0.5); -webkit-transition: .4s; -moz-transition: .4s; transition: .4s } .fast-nav .card-li:hover .text { color: #fff } .fast-nav .card-li:hover .media-wrap img:nth-child(1) { opacity: 0 } .fast-nav .card-li:hover .media-wrap img:nth-child(2) { opacity: 1 } } .act .container { width: 49% } .act .container .top { margin-bottom: 30px; position: relative } .act .container .swiper-video-swiper-prev, .act .container .swiper-video-swiper-next { top: 0; bottom: 0; margin: auto 0; width: 24px; height: 37px; position: absolute; z-index: 2; cursor: pointer } .act .container .swiper-video-swiper-prev { background-position: center; background-repeat: no-repeat; background-image: ; left: 0 } @media screen and (min-width: 750px) { .act .container .swiper-video-swiper-prev:hover { background-position: center; background-repeat: no-repeat; background-image: } } .act .container .swiper-video-swiper-next { background-position: center; background-repeat: no-repeat; background-image: ; right: 0 } @media screen and (min-width: 750px) { .act .container .swiper-video-swiper-next:hover { background-position: center; background-repeat: no-repeat; background-image: } } .act .container-left .top .media-wrap { width: 296px; height: 216px } .act .container-left .top .text-container { width: -moz-calc(100% - 296px - 30px); width: calc(100% - 296px - 30px) } .act .container-left .top .text-container .title { font-size: 17px; color: #c70f04; line-height: 30px; height: 60px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .act .container-left .top .text-container .text { font-size: 18px; color: #000000; line-height: 35px; height: 140px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; margin-top: 10px } .act .container-right .swiper-container { height: 216px; width: -moz-calc(100% - 74px); width: calc(100% - 74px); margin: 0 auto } .act .container-right .swiper-container .swiper-slide { height: 216px; cursor: pointer } .act .container-right .swiper-container .btn { top: 56px; left: 0; right: 0; margin: 0 auto; position: absolute; width: 76px; height: auto } .act .container-right .abs { line-height: 45px; background-color: rgba(0, 0, 0, 0.5); padding: 0 24px; position: absolute; left: 0; bottom: 0; width: 100% } .act .container-right .text { font-size: 17px; color: #ffffff } .act .container-right .new-slide { padding-left: 66px; padding-right: 36px; background-image: ; background-position: 32px center; background-repeat: no-repeat; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .act .container-right .new-slide:hover { background-image: ; background-position: 42px center } } .ones-heart { padding: 30px 0 } .ones-heart .item { width: 31.8448%; margin-right: 2.19619%; float: left } .ones-heart .item:nth-of-type(3n) { margin-right: 0 } .ones-heart .item .media-wrap { padding-top: 35.86207%; position: relative; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .ones-heart .item .media-wrap:hover { -webkit-transform: translatey(-12px); -moz-transform: translatey(-12px); -ms-transform: translatey(-12px); transform: translatey(-12px); box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.3) } } .ones-heart .item .media-wrap img { position: absolute; top: 0; left: 0 } .img-text { margin-top: 30px } .img-text .container { width: 49% } .img-text .top .media-wrap { width: 294px; height: 250px } .img-text .top .text-container { width: -moz-calc(100% - 294px - 30px); width: calc(100% - 294px - 30px) } .img-text .top .text-container .item { font-size: 22px; font-weight: 400; line-height: 60px; border-bottom: 1px solid #e4e4e4 } @media screen and (min-width: 750px) { .img-text .top .text-container .item:hover { color: #c70f04 } } .book { margin-top: 30px } .book .item { width: 31.11274%; margin-right: 3.07467%; float: left } .book .item:nth-of-type(3n) { margin-right: 0 } .book .item .media-wrap { padding-top: 55.29412%; position: relative } .book .item .media-wrap img { position: absolute; top: 0; left: 0 } .book .item .text-container { margin-top: 16px } .book .item .title { font-size: 19px; color: #000000; line-height: 34px } .book .item .text { font-size: 16px; color: #000000; line-height: 34px } .unit { margin-top: 30px } .unit .item { width: 33.33333%; border: 1px solid #dbdbdb; border-right: none; float: left } .unit .item:nth-child(3n) { border-right: 1px solid #dbdbdb } .unit .item a { display: block; padding: 20px 20px 6px 20px } .unit .item .com { font-size: 20px; padding: 12px 0 } .unit .item .com .fr { color: #929292; width: 100px; text-align: right } .unit .item .com .fl { width: -moz-calc(100% - 100px); width: calc(100% - 100px) } .unit .item .text { font-size: 18px; line-height: 32px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; height: 96px } @media screen and (min-width: 750px) { .unit .item:hover { background-color: #f3f3f3 } .unit .item:hover .com .fl { color: #3986d4 } } .nav-link { padding: 30px 0; font-size: 16px; font-weight: 400; color: #5a5a5a } .nav-link .inner { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .nav-link .msg { font-size: 18px; font-weight: bold; color: #010101; line-height: 32px } .nav-link .shot { width: 21px; height: 15px; display: inline-block; vertical-align: middle; background-image: ; margin-top: -2px } .nav-link select { width: 137px; height: 28px; border: 1px solid #d1d1d1; -webkit-appearance: none; -moz-appearance: none; appearance: none; -moz-text-align-last: center; text-align-last: center } .footer { text-align: center; border-top: 4px solid #c70f04; background-color: #f9f9f9; font-size: 15px; font-weight: 400; color: #202020; line-height: 37px } .footer .inner { padding: 30px 0 48px } .footer img { width: 129px; margin: 30px auto 0 } .bread { font-size: 14px; color: #5e5e5e; padding: 30px 0 } .dev-slide-container .dev-slide { background: #f7f7f7; width: 47.9564%; margin-bottom: 3.81471% } @media screen and (min-width: 750px) { .dev-slide-container .dev-slide:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) } } .dev-slide-container .dev-slide:nth-child(2n) { float: right } .dev-slide-container .dev-slide a { display: block } .dev-slide-container .dev-slide .media-wrap { padding-top: 57.38636%; position: relative } .dev-slide-container .dev-slide .title { font-size: 18px; color: #282828; line-height: 31px; height: 62px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .dev-slide-container .dev-slide .text-container { padding: 16px } .dev-slide-container .dev-slide .date { margin-top: 16px; font-size: 14px; color: #777 } .dev-invite-container { margin-top: 30px } .dev-invite-container .dev-invite { position: relative } .dev-invite-container .dev-invite::after { width: 0; height: 2px; bottom: -1px; left: 0; right: 0; margin: 0 auto; position: absolute; background-color: #3986d4; content: ''; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } /*@media screen and (min-width: 750px) {*/ /* .dev-invite-container .dev-invite:hover::after {*/ /* width: 100%*/ /* }*/ /*}*/ .dev-invite-container .dev-invite a { display: block; line-height: 42px; padding-left: 20px; position: relative; padding: 0px 0 0px 13px } .dev-invite-container .dev-invite a::before { /*width: 4px;*/ /*height: 4px;*/ /*background: #777;*/ background: none; position: absolute; top: 0; height: auto; bottom: auto; /*bottom: 0;*/ /*height: 0;*/ /*left: 3px;*/ content: '•'; /*margin: auto 0;*/ border-radius: 4px; left: 0; font-size: 18px; } .dev-invite-container .dev-invite .title { font-size: 18px; color: #000; width: -moz-calc(100% - 140px); width: calc(100% - 140px) } .dev-invite-container .dev-invite .date { font-size: 18px; color: #000; width: 120px; text-align: right } .dev-invite-container.team .dev-invite { width: 50%; float: left } .dev-invite-container.team .dev-invite .title { width: -moz-calc(100% - 20px); width: calc(100% - 20px) } .dev-invite-container.notop { margin-top: 0 } .stagger-top { height: 135px; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 25px } .stagger-top .line { position: absolute; top: 0; bottom: 0; margin: auto 0; border-top: 1px dashed #3986d4; width: 100%; height: 0 } .stagger-top .stagger { width: 269px; height: 72px; background: #ffffff; border: 2px solid #3986d4; border-radius: 10px 10px 10px 10px; line-height: 68px; text-align: center; font-size: 26px; font-weight: bold; color: #3986d4; position: relative; z-index: 2 } .stagger-top .item { width: 96px; height: 96px; background: #3986d4; border-radius: 50%; font-size: 26px; line-height: 96px; text-align: center; color: #fff; position: relative; z-index: 3; cursor: pointer; display: block } .stagger-top .item::before, .stagger-top .item::after { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; content: ''; background: #3986d4; opacity: .2; border-radius: 50%; z-index: -1; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .stagger-top .item.active::before { top: -10px; left: -10px; right: -10px; bottom: -10px } .stagger-top .item.active::after { top: -20px; left: -20px; right: -20px; bottom: -20px } @media screen and (min-width: 750px) { .stagger-top .item:hover::before { top: -10px; left: -10px; right: -10px; bottom: -10px } .stagger-top .item:hover::after { top: -20px; left: -20px; right: -20px; bottom: -20px } } .stagger-container { box-shadow: 0px 0px 21px 0px rgba(6, 0, 1, 0.1); padding: 60px; margin-top: 40px; font-size: 18px; color: #585858; line-height: 40px } .stagger-container .title { font-size: 22px; font-weight: bold; color: #2d2d2d; padding: 12px 0 } .stagger-container img { max-width: 50% } .stagger-sw { position: fixed; top: 0; bottom: 0; right: 60px; height: 365px; margin: auto 0; width: 96px; text-align: right; color: #6f6f6f; font-size: 20px; opacity: 0; pointer-events: none; background-color: rgba(255, 255, 255, 0.7) } .stagger-sw.active { opacity: 1; pointer-events: all } .stagger-sw::before { width: 11px; height: 7px; left: 0; top: 0; position: absolute; content: ''; z-index: 3; background-image: } .stagger-sw::after { width: 11px; height: 7px; left: 0; bottom: 0; position: absolute; content: ''; z-index: 3; background-image: } .stagger-sw .line { position: absolute; left: 5px; top: 3px; bottom: 3px; background-color: #eee; width: 2px } .stagger-sw .swiper-container { height: 100% } .stagger-sw .swiper-container-vertical .swiper-slide { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative } .stagger-sw .swiper-container-vertical .swiper-slide::before { top: 0; bottom: 0; position: absolute; content: ''; left: 1px; width: 10px; height: 10px; background: #eee; border-radius: 50%; margin: auto 0 } .stagger-sw .swiper-container-vertical .swiper-slide-active { color: #3986d4 } .stagger-sw .swiper-container-vertical .swiper-slide-active::before { background-color: #3986d4 } .stagger-sw .swiper-container-vertical .stagger-sw-button { position: absolute; left: 0; cursor: pointer; z-index: 2 } .stagger-sw .swiper-container-vertical .stagger-sw-button-prev { top: 0 } .stagger-sw .swiper-container-vertical .stagger-sw-button-next { bottom: 0 } @media screen and (max-width: 1024px) { .bread { padding: 18px 0 } .dev-invite-container { margin-top: 20px } .dev-invite-container .dev-invite a { line-height: 30px; font-size: 12px } .dev-invite-container .dev-invite a .title { font-size: 14px } .dev-invite-container .dev-invite a .date { font-size: 14px } .dev-slide-container .dev-slide .text-container { padding: 12px } .dev-slide-container .dev-slide .title { font-size: 14px; line-height: 24px; height: 48px } .dev-slide-container .dev-slide .date { margin-top: 6px } .stagger-top { height: 90px } .stagger-top .item { width: 50px; height: 50px; font-size: 12px; line-height: 50px } .stagger-top .item.active::before { top: -6px; left: -6px; right: -6px; bottom: -6px } .stagger-top .item.active::after { top: -12px; left: -12px; right: -12px; bottom: -12px } .stagger-top .stagger { height: 60px; width: 100px; font-size: 14px; display: none } .stagger-container { margin-top: 12px; padding: 12px; font-size: 14px; line-height: 2 } .stagger-sw { right: 6px; width: 66px; z-index: 10; height: 260px } } .work-slide-container { margin-top: 30px } .work-slide-container .work-slide { margin-bottom: 30px; height: 192px; background: #f1f1f1 } .work-slide-container .media-wrap { width: 284px; height: 192px } @media screen and (min-width: 750px) { .work-slide-container .media-wrap:hover { overflow: hidden } .work-slide-container .media-wrap:hover *[scale] { -webkit-transition: .5s; -moz-transition: .5s; transition: .5s } .work-slide-container .media-wrap:hover:hover *[scale] { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05) } } .work-slide-container .text-container { padding: 30px 30px; width: -moz-calc(100% - 284px); width: calc(100% - 284px) } .work-slide-container .title { font-size: 20px; line-height: 32px } .work-slide-container .text { font-size: 14px; color: #595959; line-height: 32px; height: 64px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .work-slide-container .date { font-size: 14px; line-height: 32px } @media screen and (max-width: 1024px) { .work-slide-container { margin-top: 20px } .work-slide-container .work-slide { padding: 10px; border-radius: 6px; height: auto; margin-bottom: 12px } .work-slide-container .work-slide .media-wrap { width: 113.6px; height: 76.8px; border-radius: 6px; overflow: hidden } .work-slide-container .work-slide .text-container { width: -moz-calc(100% - 284px *.4); width: calc(100% - 284px *.4); padding: 0 12px } .work-slide-container .work-slide .text-container .title { font-size: 16px; line-height: 30px } .work-slide-container .work-slide .text-container .text { font-size: 14px; line-height: 20px; height: 20px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1 } .work-slide-container .work-slide .text-container .date { font-size: 12px } } .party-construction-container { position: relative; margin-top: 30px } .party-construction-container::before { position: absolute; width: 1px; height: 100%; left: 130px; content: ''; background-color: #e4e4e4 } .party-construction-container .party-construction-slide { margin-bottom: 30px } .party-construction-container .party-construction-slide:last-child { margin-bottom: 0 } @media screen and (min-width: 750px) { .party-construction-container .party-construction-slide:hover .left .year { color: #c70f04 } } .party-construction-container .left { width: 170px; margin-top: 50px; z-index: 2; position: relative } .party-construction-container .left .dot { width: 19px; height: 19px; background: #ffffff; border: 3px solid #c4c4c4; border-radius: 50%; margin: 0 auto; position: absolute; left: 120px; top: 20px; bottom: 0 } .party-construction-container .left .year { color: #5a5a5a; font-size: 41px; font-weight: bold } .party-construction-container .left .date { font-size: 18px; color: #5a5a5a } .party-construction-container .right { width: -moz-calc(100% - 170px); width: calc(100% - 170px); padding: 20px; border: 1px solid #ebebeb; background-color: #fbfbfb; position: relative } .party-construction-container .right::before { width: 0; height: 0; z-index: 2; border: 10px solid rgba(0, 0, 0, 0); border-right-color: #fbfbfb; position: absolute; right: 100%; top: 70px } .party-construction-container .right::after { width: 0; height: 0; z-index: 1; border: 10px solid rgba(0, 0, 0, 0); border-right-color: #ebebeb; position: absolute; right: -moz-calc(100% 1px); right: calc(100% 1px); top: 70px } .party-construction-container .right .t1 { line-height: 34px; padding: 16px 0; font-size: 20px } .party-construction-container .right .t1 span { font-size: 20px; padding: 0 15px; display: inline-block; background-color: #3986d4; color: #fff; border-radius: 15px; margin-right: 6px } .party-construction-container .right .t1 i { color: #3a3a3a; font-style: normal } .party-construction-container .right .t2 { font-size: 16px; color: #7b7b7b; line-height: 41px } @media screen and (min-width: 750px) { .party-construction-container .right .t2 .line1:hover { text-decoration: underline } } .party-construction-container .right .t2 .line1 { width: 48%; float: left } .party-construction-container .right .t2 .line1:nth-child(2n) { float: right } .party-construction-container .right .title { width: -moz-calc(100% - 160px); width: calc(100% - 160px) } .party-construction-container .container-left { width: 265px; height: 287px; background: #e4e4e4 } .party-construction-container .container-right { width: -moz-calc(100% - 265px - 30px); width: calc(100% - 265px - 30px) } .party-construction-container .t1.redall span { background-color: #c70f04 } .party-construction-container .t1.redall i { color: #c70f04 } .party-construction-container .t1.blueall span { background-color: #3986d4 } .party-construction-container .t1.blueall i { color: #3986d4 } .party-construction-container .t1.red span { background-color: #c70f04 } .party-construction-container .t1.blue span { background-color: #3986d4 } @media screen and (max-width: 1024px) { .party-construction-container::before { left: 4px } .party-construction-container .left { width: -moz-calc(100% - 18px); width: calc(100% - 18px); margin-left: 18px; margin-top: 0; margin-bottom: 6px; padding-left: 18px } .party-construction-container .left .dot { left: -23px; top: 6px } .party-construction-container .left .year { float: left; font-size: 18px; line-height: 30px; margin-right: 6px } .party-construction-container .left .date { float: left; font-size: 18px; line-height: 30px } .party-construction-container .right { width: -moz-calc(100% - 18px); width: calc(100% - 18px); padding: 6px; margin-left: 18px } .party-construction-container .right .t1 { font-size: 16px; line-height: 26px; padding: 6px 0; margin-top: 6px } .party-construction-container .right .t1 span { font-size: 16px } .party-construction-container .right .t2 { font-size: 14px; line-height: 2.5 } .party-construction-container .container-left { width: 100%; height: auto } .party-construction-container .container-left .media-wrap { padding-top: 40%; position: relative } .party-construction-container .container-left .media-wrap img { position: absolute; top: 0; left: 0 } .party-construction-container .container-right { width: 100% } } .dantutor-sw { margin-top: 30px; position: relative } .dantutor-sw .top .item { display: none; -webkit-animation: fadein 1s linear 0s 1 normal both; -moz-animation: fadein 1s linear 0s 1 normal both; animation: fadein 1s linear 0s 1 normal both } .dantutor-sw .top .item.active { display: block } .dantutor-sw .left { width: 482px; height: 408px } .dantutor-sw .left .media-wrap { width: 100%; height: 100% } .dantutor-sw .right, .dantutor-sw .dantutor-sw-container { width: -moz-calc(100% - 482px - 30px); width: calc(100% - 482px - 30px); float: right } .dantutor-sw .more { color: #c70f04; line-height: 2; font-size: 16px } @media screen and (min-width: 750px) { .dantutor-sw .more:hover { text-decoration: underline } } .dantutor-sw .title { font-size: 22px; color: #c70f04; line-height: 2 } .dantutor-sw .date { font-size: 16px; color: #000; margin: 12px 0 } .dantutor-sw .text { font-size: 16px; color: #7b7b7b; line-height: 2; height: 96px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 } .dantutor-sw .dantutor-sw-container { position: absolute; right: 0; bottom: 0; z-index: 2 } .dantutor-sw .dantutor-sw-container .swiper-container { width: -moz-calc(100% - 100px); width: calc(100% - 100px); margin: 0 auto } .dantutor-sw .dantutor-sw-container .swiper-slide { height: 147px; width: 25%; cursor: pointer } .dantutor-sw .dantutor-sw-btn { position: absolute; top: 0; bottom: 0; margin: auto 0; width: 20px; height: 40px; z-index: 2; cursor: pointer } .dantutor-sw .dantutor-sw-btn-prev { left: 0; background-position: center; background-repeat: no-repeat; background-image: } @media screen and (min-width: 750px) { .dantutor-sw .dantutor-sw-btn-prev:hover { background-position: center; background-repeat: no-repeat; background-image: } } .dantutor-sw .dantutor-sw-btn-next { right: 0; background-position: center; background-repeat: no-repeat; background-image: } @media screen and (min-width: 750px) { .dantutor-sw .dantutor-sw-btn-next:hover { background-position: center; background-repeat: no-repeat; background-image: } } .card-3d { overflow: hidden; margin-top: 30px } .card-3d .left { width: 380px; height: 461px; z-index: 3; padding-right: 30px } .card-3d .left .item { padding: 17px 0 } .card-3d .right { width: -moz-calc(100% - 390px); width: calc(100% - 390px); height: 461px; position: relative; margin-right: -40px } .card-3d .right .item { width: 55.63525%; height: 461px; position: absolute; top: 0; bottom: 0; margin: auto 0; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; opacity: 1 } .card-3d .right .item:nth-child(4) { right: 0%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); z-index: 1 } .card-3d .right .item:nth-child(3) { right: 16.39344%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); z-index: 2 } .card-3d .right .item:nth-child(2) { right: 32.78689%; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); z-index: 3 } .card-3d .right .item:nth-child(1) { right: 49.18033%; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index: 4 } .card-3d .right .item:nth-child(1) .abs { opacity: 1 } .card-3d .date-wrap { width: 63px } .card-3d .text-container { width: -moz-calc(100% - 63px); width: calc(100% - 63px) } .card-3d .date { font-size: 47px } .card-3d .year { font-size: 14px } .card-3d .title { font-size: 20px; color: #010101; margin-bottom: 6px } .card-3d .text { font-size: 14px; color: #7b7b7b; line-height: 26px; height: 52px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .card-3d .active .title { color: #c70f04 } .card-3d .abs { position: absolute; bottom: 0; left: 0; width: 100%; line-height: 50px; background-color: rgba(0, 0, 0, 0.5); padding: 0 12px; font-size: 20px; color: #fff; opacity: 0 } .card-3d .abs .t1 { width: -moz-calc(100% - 150px); width: calc(100% - 150px) } .card-3d .abs .t2 { width: 120px; text-align: right } .video-slide-container { margin-top: 30px } .video-slide-container .video-slide { width: 24.01171%; margin-right: 1.02489%; margin-bottom: 1.02489%; float: left } .video-slide-container .video-slide:nth-child(4n) { margin-right: 0; -webkit-transition-delay: .6s; -moz-transition-delay: .6s; transition-delay: .6s } .video-slide-container .video-slide:nth-child(4n-1) { -webkit-transition-delay: .4s; -moz-transition-delay: .4s; transition-delay: .4s } .video-slide-container .video-slide:nth-child(4n-2) { -webkit-transition-delay: .2s; -moz-transition-delay: .2s; transition-delay: .2s } .video-slide-container .video-slide a { display: block; position: relative } .video-slide-container .video-slide .top-img { padding-top: 73.08869% } .video-slide-container .video-slide .abs { line-height: 50px; background-color: rgba(0, 0, 0, 0.5); padding: 0 20px; position: absolute; bottom: 0; left: 0; width: 100%; font-size: 16px; color: #fff } .video-slide-container .video-btn { width: 25.68807%; margin: 19.26606% auto 0; position: absolute; top: 0; left: 0; right: 0 } @media screen and (max-width: 1024px) { .dantutor-sw .left { height: auto; width: 100% } .dantutor-sw .left .media-wrap { padding-top: 50% } .dantutor-sw .right { width: 100% } .dantutor-sw .title { font-size: 16px; padding-top: 6px } .dantutor-sw .text { font-size: 14px; line-height: 2; height: 84px } .dantutor-sw .date { font-size: 12px; margin: 6px 0 } .dantutor-sw .more { float: left; font-size: 12px } .dantutor-sw .dantutor-sw-container { position: relative; width: 100%; float: none; margin-top: 6px } .dantutor-sw .dantutor-sw-container .swiper-container { width: -moz-calc(100% - 60px); width: calc(100% - 60px) } .card-3d .right { width: 100%; margin: 0; height: auto; padding-top: 50%; position: relative } .card-3d .right .item { padding-top: 50%; position: absolute; top: 0; left: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; width: 100%; height: 100%; display: none } .card-3d .right .item:nth-child(1) { display: block } .card-3d .right .item:nth-child(1) { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } .card-3d .right .item:nth-child(2) { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } .card-3d .right .item:nth-child(3) { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } .card-3d .right .item:nth-child(4) { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none } .card-3d .right .item .abs .t1 { font-size: 12px; line-height: 3; width: -moz-calc(100% - 70px); width: calc(100% - 70px) } .card-3d .right .item .abs .t2 { font-size: 12px; line-height: 3; width: 70px } .card-3d .left { width: 100%; padding: 0; height: auto } .card-3d .left .item { padding: 6px 0 } .card-3d .date-wrap { text-align: center; padding-top: 8px } .card-3d .date-wrap .date { font-size: 36px } .card-3d .title { font-size: 18px; line-height: 30px; margin-bottom: 0 } .card-3d .text { line-height: 24px; height: 48px } .video-slide-container .video-slide { width: 49%; margin-right: 2%; margin-bottom: 2% } .video-slide-container .video-slide:nth-child(2n) { margin-right: 0 } .video-slide-container .video-slide .abs { line-height: 30px; padding: 0 12px; font-size: 12px } } .leader-slide-container .leader-slide { background: #f7f7f7; width: 23.64568%; margin-right: 1.75695%; margin-bottom: 1.75695%; float: left; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .leader-slide-container .leader-slide:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) } } .leader-slide-container .leader-slide .media-wrap { padding-top: 66.06061% } .leader-slide-container .leader-slide .more { display: none; font-size: 14px; color: #7b7b7b } .leader-slide-container .leader-slide .text { display: none; font-size: 14px; font-weight: 400; color: #413533; line-height: 31px; height: 93px } .leader-slide-container .leader-slide .date { color: #777; font-style: 14px; line-height: 2 } .leader-slide-container .leader-slide .title { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 18px; color: #282828; line-height: 31px; height: 62px; margin-bottom: 2% } .leader-slide-container .leader-slide .text-container { padding: 12px } .leader-slide-container .leader-slide:nth-child(4n 1) { margin-right: 0 } .leader-slide-container .leader-slide:nth-child(1) { width: 100%; margin-right: 0; padding: 24px } .leader-slide-container .leader-slide:nth-child(1) a { position: relative; display: block } .leader-slide-container .leader-slide:nth-child(1) .more { display: block } .leader-slide-container .leader-slide:nth-child(1) .text { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 } .leader-slide-container .leader-slide:nth-child(1) .date { display: none } .leader-slide-container .leader-slide:nth-child(1) .left { float: left; width: 38.5514% } .leader-slide-container .leader-slide:nth-child(1) .right { float: right; width: 57.94393%; position: absolute; height: 100%; top: 0; right: 0 } .leader-slide-container .leader-slide:nth-child(1) .title { font-size: 23px; color: #c70f04; height: 40px; line-height: 40px } .leader-slide-container .leader-slide:nth-child(1) .text { margin: 3% 0 } .woman-friends { margin-top: 30px } .woman-friends .left { width: 49%; height: 359px } .woman-friends .right { width: 49%; height: 359px; overflow: hidden } .woman-friends .right .media-wrap { height: 100%; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .woman-friends .right:hover .media-wrap { -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02) } } .woman-friends .title { width: -moz-calc(100% - 150px); width: calc(100% - 150px); color: #3a3a3a; font-size: 20px; margin-bottom: 13px } .woman-friends .date { width: 110px; color: #787878; font-size: 20px } .woman-friends .text { font-size: 14px; font-weight: 400; color: #000000; line-height: 28px; height: 84px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3 } .woman-friends .item { margin-bottom: 30px; padding: 14px 0 } .woman-friends .item:last-child { margin-bottom: 0 } @media screen and (min-width: 750px) { .woman-friends .item:hover .title { color: #c70f04 } } .diaoyan-slide-container { margin-top: 30px } .diaoyan-slide-container .diaoyan-slide { width: 48%; float: left; margin-bottom: 15px; position: relative } .diaoyan-slide-container .diaoyan-slide::after { width: 0; height: 1px; background-color: #c70f04; position: absolute; bottom: 0; left: 0; right: 0; content: ''; margin: 0 auto; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .diaoyan-slide-container .diaoyan-slide:hover::after { width: 100% } .diaoyan-slide-container .diaoyan-slide:hover .text-container .title { color: #c70f04 } } .diaoyan-slide-container .diaoyan-slide a { display: block; padding: 15px 0 } .diaoyan-slide-container .diaoyan-slide:nth-child(2n) { float: right } .diaoyan-slide-container .date-wrap { width: 94px } .diaoyan-slide-container .date-wrap .date { font-size: 47px } .diaoyan-slide-container .date-wrap .year { font-size: 14px } .diaoyan-slide-container .text-container { width: -moz-calc(100% - 94px); width: calc(100% - 94px) } .diaoyan-slide-container .text-container .title { font-size: 20px; color: #3a3a3a; line-height: 30px; height: 30px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1 } .diaoyan-slide-container .text-container .text { font-size: 14px; color: #7b7b7b; line-height: 26px; height: 52px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 } .biao-top { position: relative; height: 136px } .biao-top .swiper-container { height: 136px; width: -moz-calc(100% - 50px); width: calc(100% - 50px); margin: 0 auto } .biao-top .line { position: absolute; top: 0; bottom: 0; margin: auto 0; border-top: 1px dashed #3986d4; width: 100%; height: 0 } .biao-top .stagger { width: 269px; height: 72px; background: #ffffff; border: 2px solid #3986d4; border-radius: 10px 10px 10px 10px; line-height: 68px; text-align: center; font-size: 26px; font-weight: bold; color: #3986d4; position: relative; z-index: 2 } .biao-top .item { width: 96px; height: 96px; background: #3986d4; border-radius: 50%; font-size: 26px; line-height: 96px; text-align: center; color: #fff; position: relative; z-index: 3; cursor: pointer; display: block; margin: auto 0 } .biao-top .item::before, .biao-top .item::after { top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute; content: ''; background: #3986d4; opacity: .2; border-radius: 50%; z-index: -1; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .biao-top .item.active::before { top: -10px; left: -10px; right: -10px; bottom: -10px } .biao-top .item.active::after { top: -20px; left: -20px; right: -20px; bottom: -20px } @media screen and (min-width: 750px) { .biao-top .item:hover::before { top: -10px; left: -10px; right: -10px; bottom: -10px } .biao-top .item:hover::after { top: -20px; left: -20px; right: -20px; bottom: -20px } } .biao-top .swiper-slide { width: 16.66667%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .biao-top .biao-top-btn { width: 25px; height: 25px; border: 1px solid #bbb; border-radius: 50%; position: absolute; top: 0; bottom: 0; margin: auto 0; background-color: #fff; background-size: 30%; cursor: pointer } @media screen and (min-width: 750px) { .biao-top .biao-top-btn:hover { border-color: #3986d4 } } .biao-top .biao-top-btn-prev { left: 0; background-position: center; background-repeat: no-repeat; background-image: } @media screen and (min-width: 750px) { .biao-top .biao-top-btn-prev:hover { background-position: center; background-repeat: no-repeat; background-image: } } .biao-top .biao-top-btn-next { right: 0; background-position: center; background-repeat: no-repeat; background-image: } @media screen and (min-width: 750px) { .biao-top .biao-top-btn-next:hover { background-position: center; background-repeat: no-repeat; background-image: } } .biao-center { margin-top: 30px } .biao-center .item { display: none; background: #ffffff; box-shadow: 0px 0px 21px 0px rgba(6, 0, 1, 0.1); padding: 30px; -webkit-animation: fadein 1s linear 0s 1 normal both; -moz-animation: fadein 1s linear 0s 1 normal both; animation: fadein 1s linear 0s 1 normal both } .biao-center .item.active { display: block } .biao-center .item .left { width: 504px; height: 314px; overflow: hidden } @media screen and (min-width: 750px) { .biao-center .item .left:hover .media-wrap { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05) } } .biao-center .item .left .media-wrap { width: 100%; height: 100%; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s } .biao-center .item .right { width: -moz-calc(100% - 504px - 30px); width: calc(100% - 504px - 30px); height: 314px } .biao-center .item .right .top { line-height: 30px } .biao-center .item .right .name { font-size: 22px; font-weight: bold; color: #3986d4 } .biao-center .item .right .more { font-size: 18px; font-weight: 400; color: #7b7b7b } .biao-center .item .right .text { font-size: 18px; font-family: microsoft yahei; font-weight: 400; color: #7b7b7b; line-height: 40px; height: 120px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin: 3% 0 } .biao-center .item .right .date { font-size: 18px; color: #7b7b7b } .biao-bottom { margin-top: 30px; position: relative } .biao-bottom .media-wrap { height: 136px } .biao-bottom .text { text-align: center; font-size: 20px; color: #7b7b7b; line-height: 2; margin-top: 10px } .biao-bottom .swiper-container { width: -moz-calc(100% - 80px); width: calc(100% - 80px); margin: 0 auto } .biao-bottom .biao-bottom-btn { width: 25px; height: 25px; border-radius: 50%; position: absolute; top: 0; bottom: 50px; margin: auto 0; background-color: #fff; background-size: 100%; cursor: pointer } @media screen and (min-width: 750px) { .biao-bottom .biao-bottom-btn:hover { border-color: #3986d4 } } .biao-bottom .biao-bottom-btn-prev { left: 0; background-position: center; background-repeat: no-repeat; background-image: } @media screen and (min-width: 750px) { .biao-bottom .biao-bottom-btn-prev:hover { background-position: center; background-repeat: no-repeat; background-image: } } .biao-bottom .biao-bottom-btn-next { right: 0; background-position: center; background-repeat: no-repeat; background-image: } @media screen and (min-width: 750px) { .biao-bottom .biao-bottom-btn-next:hover { background-position: center; background-repeat: no-repeat; background-image: } } @media screen and (max-width: 1024px) { .leader-slide-container .leader-slide { width: 49%; margin-right: 2% } .leader-slide-container .leader-slide:nth-child(odd) { margin-right: 0 } .leader-slide-container .leader-slide .title { font-size: 16px; line-height: 24px; height: 48px } .leader-slide-container .leader-slide .text { font-size: 14px } .leader-slide-container .leader-slide:nth-child(1) { padding: 12px; width: 100% } .leader-slide-container .leader-slide:nth-child(1) .left { width: 100% } .leader-slide-container .leader-slide:nth-child(1) .right { width: 100%; position: static } .leader-slide-container .leader-slide:nth-child(1) .title { margin-bottom: 0; font-size: 16px; line-height: 20px } .leader-slide-container .leader-slide:nth-child(1) .text { font-size: 14px } .woman-friends { margin-top: 20px } .woman-friends .right { width: 100%; height: auto } .woman-friends .right .media-wrap { height: auto; padding-top: 53.34324% } .woman-friends .left { height: auto; width: 100% } .woman-friends .item { margin-bottom: 0 } .woman-friends .title { font-size: 16px; width: -moz-calc(100% - 100px); width: calc(100% - 100px) } .woman-friends .date { width: 100px; font-size: 16px; text-align: right } .diaoyan-slide-container { margin-top: 20px } .diaoyan-slide-container .diaoyan-slide { width: 100%; margin-bottom: 0 } .diaoyan-slide-container .diaoyan-slide a { padding: 6px 0 } .diaoyan-slide-container .date-wrap { width: 60px; padding-top: 24px; text-align: center } .diaoyan-slide-container .date-wrap .date { font-size: 36px; text-align: center; line-height: 30px } .diaoyan-slide-container .text-container { width: -moz-calc(100% - 70px); width: calc(100% - 70px); float: right } .diaoyan-slide-container .text-container .title { font-size: 16px } .diaoyan-slide-container .text-container .text { font-size: 14px; line-height: 24px; height: 48px } .biao-top { height: 90px } .biao-top .swiper-container { height: 90px } .biao-top .item { width: 50px; height: 50px; font-size: 16px; line-height: 50px } .biao-top .item.active::before { top: -6px; left: -6px; right: -6px; bottom: -6px } .biao-top .item.active::after { top: -12px; left: -12px; right: -12px; bottom: -12px } .biao-center .item { padding: 12px } .biao-center .item .left { width: 100%; height: auto } .biao-center .item .left .media-wrap { padding-top: 62.30159% } .biao-center .item .right { width: 100%; height: auto; padding-top: 2% } .biao-center .item .right .name { font-size: 16px } .biao-center .item .right .more { font-size: 14px } .biao-center .item .right .text { font-size: 14px; line-height: 26px; height: 78px; margin: 2% 0 } .biao-center .item .right .date { font-size: 14px } .biao-bottom .swiper-container { width: -moz-calc(100% - 60px); width: calc(100% - 60px) } .biao-bottom .text { font-size: 14px } } .safeguard-container-top { margin-top: 30px } .safeguard-container-top .left { width: 48%; float: left; height: 328px } .safeguard-container-top .left .media-wrap { height: 100% } .safeguard-container-top .right { width: 48%; float: right; line-height: 2; height: 328px } .safeguard-container-top .right .text-container { height: 100% } .safeguard-container-top .title { font-size: 22px; color: #c70f04 } .safeguard-container-top .date { color: #3a3a3a; font-size: 16px } .safeguard-container-top .text { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-height: 32px; height: 128px; font-size: 16px; color: #7b7b7b; margin: 3% 0 } .safeguard-container-top .more { color: #c70f04; font-size: 16px } .safeguard-slide-container { line-height: 1.8; font-size: 16px; margin-top: 30px } .safeguard-slide-container a { padding: 12px 0; display: block; overflow: hidden } .safeguard-slide-container a::after { bottom: 0; width: 0; left: 0; right: 0; margin: 0 auto; position: absolute; content: ''; height: 1px; background-color: #3986d4; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s } @media screen and (min-width: 750px) { .safeguard-slide-container a:hover .top .title { color: #3986d4 } .safeguard-slide-container a:hover::after { width: 100% } } .safeguard-slide-container .safeguard-slide { width: 48%; float: left } .safeguard-slide-container .safeguard-slide:nth-child(2n) { float: right } .safeguard-slide-container .title { color: #3a3a3a; width: -moz-calc(100% - 100px); width: calc(100% - 100px); font-size: 18px } .safeguard-slide-container .date { color: #7b7b7b; width: 100px; text-align: center; font-size: 16px } .safeguard-slide-container .text { font-size: 14px; color: #7b7b7b } .xinxiang { background: #3986d4; text-align: center; color: #fff; padding: 12px 20px; border-radius: 6px; line-height: 1.5; cursor: pointer; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s } @media screen and (min-width: 750px) { .xinxiang:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) } } .xinxiang img { width: auto; height: auto; display: inline-block; vertical-align: middle; position: relative; top: -2px } .xinxiang .t1 { font-size: 20px } .xinxiang .t2 { font-size: 14px } .safeguard-reslut { margin-top: 30px } .safeguard-reslut .item { padding: 20px; width: 32%; margin-right: 2%; height: 183px; background: #ffffff; margin-bottom: 2%; box-shadow: 0px 0px 16px 0px rgba(5, 0, 0, 0.1); position: relative; overflow: hidden; float: left } @media screen and (min-width: 750px) { .safeguard-reslut .item:hover { box-shadow: 0px 0px 16px 0px rgba(5, 0, 0, 0.2) } } .safeguard-reslut .item .logobg { position: absolute; top: 0; bottom: 0; max-width: 80%; max-height: 80%; right: 0; width: auto; height: 80%; margin: auto 0; z-index: 1; -webkit-transform: translatex(30%); -moz-transform: translatex(30%); -ms-transform: translatex(30%); transform: translatex(30%) } .safeguard-reslut .item .box { position: relative; z-index: 2 } .safeguard-reslut .item:nth-child(3n) { margin-right: 0 } .safeguard-reslut .item .title { font-size: 18px; color: #1a1919; line-height: 36px } .safeguard-reslut .item .tel { color: #8d8d8d; font-size: 17px } .safeguard-reslut .item .tel span { color: #c70f04 } .safeguard-reslut .item .line { background-color: #ddd; height: 1px; margin: 6px 0 } .safeguard-reslut .item .text { font-size: 14px; color: #868686; line-height: 1.6 } .safeguard-reslut .item .text>div { padding: 1px 0 } .note_bg2 { padding: 40px } .note_bg2 .t1 { margin-bottom: 30px } .note_bg2 .t1 img { width: auto; height: auto } .note_bg2 .t2 { margin-bottom: 30px } .note_bg2 .t2 img { width: auto; height: auto } .note-slide-contianer .note-slide { color: #010101; font-size: 22px; line-height: 2 } .note-slide-contianer .note-slide a { padding: 6px 0 } @media screen and (min-width: 750px) { .note-slide-contianer .note-slide a:hover { text-decoration: underline } } @media screen and (max-width: 1024px) { .xinxiang { padding: 6px; position: absolute; right: 6px; z-index: 6 } .xinxiang span { display: none } .xinxiang .t2 { width: 0; overflow: hidden; height: 0 } .xinxiang .t2 img { display: block } .xinxiang:active .t2, .xinxiang:hover .t2 { width: auto; height: auto } .safeguard-container-top { margin-top: 20px } .safeguard-container-top .left { height: auto; width: 100% } .safeguard-container-top .left .media-wrap { padding-top: 50% } .safeguard-container-top .right { width: 100%; height: auto } .safeguard-container-top .text { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 24px; height: 48px; margin: 0% 0 } .safeguard-container-top .title { font-size: 16px } .safeguard-container-top .date { font-size: 14px } .safeguard-slide-container { margin-top: 12px } .safeguard-slide-container a { padding: 8px 0 } .safeguard-slide-container .safeguard-slide { width: 100% } .safeguard-slide-container .title { font-size: 16px } .layui-form { margin-top: 12px } .layui-form-item { margin-bottom: 0 } .safeguard-reslut { margin-top: 10px } .safeguard-reslut .item { width: 100% } .note_bg2 { padding: 18px } .note_bg2 .t1 { margin-bottom: 18px } .note_bg2 .t1 img { width: 100%; height: auto } .note_bg2 .t2 { margin-bottom: 12px } .note_bg2 .t2 img { width: 100%; height: auto } .note-slide-contianer .note-slide { font-size: 14px; color: #3a3a3a } .note-slide-contianer .note-slide a { display: block; padding: 3px 0 } } .main-menu-left { width: 240px } .main-menu-right { width: -moz-calc(100% - 300px); width: calc(100% - 300px) } .main-menu-left .nav2-item { width: 100%; float: none; border: none; border-radius: 0; border-bottom: 1px solid #e5e5e5; color: #7b7b7b } @media screen and (min-width: 750px) { .main-menu-left .nav2-item:hover { color: #fff } } .main-menu-left .inner { max-width: 100% } .main-menu-left .box { padding: 0 12px; border: 1px solid #e5e5e5 } .main-menu-left .box .top { color: inherit } .main-menu-left .box .active { color: #3986d4; background-color: #fff; box-shadow: none } .main-menu-left .box .active::after { background-color: #fff } .main-menu-left .top { color: #fff } @media screen and (max-width: 1024px) { .main-menu-left { width: 100% } .main-menu-right { width: 100% } .main-menu-left { margin-bottom: 12px; position: relative; z-index: 2 } .main-menu-left .nav2-item { line-height: 50px; height: 50px } .main-menu-left .inner { position: relative; z-index: 2 } .main-menu-left .inner>.nav2-item { background-color: #3986d4 } .main-menu-left .box { width: 100%; display: none; position: absolute; top: 100%; background-color: #fff; z-index: 3 } } .main-text { line-height: 2; font-size: 16px; color: #3a3a3a } .into-leader-slide-contianer a { padding: 20px 20px 6px 20px; display: block } .into-leader-slide-contianer .into-leader-slide { background: #f2f2f2; margin-bottom: 20px } .into-leader-slide-contianer .into-leader-slide .left { width: 112px; text-align: center; line-height: 2 } .into-leader-slide-contianer .into-leader-slide .left .media-wrap { width: 112px; height: 132px; border: 1px solid #aaa } .into-leader-slide-contianer .into-leader-slide .left .title { font-size: 18px; color: #3986d4 } .into-leader-slide-contianer .into-leader-slide .right { width: -moz-calc(100% - 112px - 30px); width: calc(100% - 112px - 30px) } .into-leader-slide-contianer .into-leader-slide .right .title { font-size: 18px; line-height: 30px; margin-bottom: 6px; color: #3a3a3a } .into-leader-slide-contianer .into-leader-slide .right .text { font-size: 16px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #7b7b7b; height: 60px } .into-leader-slide-contianer .into-leader-slide .right .more { color: #3986d4; font-size: 14px } @media screen and (min-width: 750px) { .into-leader-slide-contianer .into-leader-slide .right .more:hover { text-decoration: underline } } .main-right-box { border: 1px solid #b4d7eb; box-shadow: 0 0 10px rgba(57, 134, 212, 0.5); padding: 0 20px 20px 20px } .main-right-top { border-bottom: 1px solid #e1e1e1; margin-bottom: 20px } .main-right-top .item { width: 33.33333%; padding: 20px 6px } @media screen and (min-width: 750px) { .main-right-top .item:hover .text-container { text-decoration: underline } } .main-right-top .media-wrap { width: 30px; height: 30px; position: relative } .main-right-top .media-wrap img:nth-child(2) { opacity: 0 } .main-right-top .text-container { width: -moz-calc(100% - 36px); width: calc(100% - 36px); line-height: 30px; padding: 0 3px; color: #7b7b7b } .main-right-top .text-container .t1 { font-size: 20px } .main-right-top .text-container .t2 { font-size: 16px } .main-right-top .active .media-wrap img:nth-child(2) { opacity: 1 } .main-right-top .active .media-wrap img:nth-child(1) { opacity: 0 } .main-right-top .active .text-container { color: #3986d4 } .internal-slide-container .internal-slide { margin-bottom: 6px } .internal-slide-container .internal-slide:last-child { margin-bottom: 0 } .internal-slide-container .internal-slide .title { color: #3986d4; font-size: 18px; line-height: 32px; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .internal-slide-container .internal-slide .text { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #7b7b7b; font-size: 16px; line-height: 32px; height: 64px } .internal-slide-container .internal-slide .more { color: #7b7b7b; font-size: 16px; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } @media screen and (min-width: 750px) { .internal-slide-container .internal-slide:hover .text { color: #3986d4 } .internal-slide-container .internal-slide:hover .title { padding-left: 30px } .internal-slide-container .internal-slide:hover .more { color: #3986d4; padding-right: 30px } } .dev-direct-top .left { width: 381px; height: 264px } .dev-direct-top .left .media-wrap { width: 100%; height: 100% } .dev-direct-top .right { width: -moz-calc(100% - 381px - 30px); width: calc(100% - 381px - 30px) } .dev-direct-top .right .title { color: #3986d4; font-size: 20px; line-height: 50px } .dev-direct-top .right .text { font-size: 18px; line-height: 30px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; height: 150px; color: #7b7b7b; margin: 3% 0 } .dev-direct-top .right .more { font-size: 14px; color: #7b7b7b } @media screen and (max-width: 1024px) { .main-text { font-size: 14px } .into-leader-slide-contianer a { padding: 12px 12px 3px 12px } .into-leader-slide-contianer .into-leader-slide .left { width: 89px } .into-leader-slide-contianer .into-leader-slide .left .title { font-size: 16px } .into-leader-slide-contianer .into-leader-slide .left .media-wrap { width: 89px; height: 105px } .into-leader-slide-contianer .into-leader-slide .right { width: -moz-calc(100% - 90px - 13px); width: calc(100% - 90px - 13px) } .into-leader-slide-contianer .into-leader-slide .right .more { font-size: 14px; margin-bottom: 6px } .into-leader-slide-contianer .into-leader-slide .right .title { font-size: 16px; line-height: 24px } .into-leader-slide-contianer .into-leader-slide .right .text { font-size: 14px; line-height: 28px; height: 56px } .main-right-top .item { width: 100%; padding: 6px 3px } .main-right-top .text-container .t1 { font-size: 16px } .internal-slide-container .internal-slide { margin-bottom: 0 } .internal-slide-container .internal-slide a { padding: 10px 0; border-bottom: 1px dashed #eee; display: block } .internal-slide-container .internal-slide .title { font-size: 16px; line-height: 28px } .internal-slide-container .internal-slide .text { font-size: 14px; line-height: 28px; height: 56px } .internal-slide-container .internal-slide .more { font-size: 12px; float: left } .dev-direct-top .left { height: auto; width: 100% } .dev-direct-top .left .media-wrap { padding-top: 50% } .dev-direct-top .right { width: 100%; height: auto; margin-top: 12px } .dev-direct-top .right .title { font-size: 16px; line-height: 1.5; margin-bottom: 6px } .dev-direct-top .right .text { font-size: 14px; line-height: 2; height: 140px } } .dj-top { /*padding-top: 25%;*/ height: 480px; background-image: url(/uploads/image/tpjdimages/jjjcbanner5c6d4.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } .dj-footer { background-color: #e20c20; margin-top: 30px } .dj-footer .inner { padding: 70px 0; /*line-height: 1.8;*/ font-size: 16px; color: #fff; text-align: center } .dj-nav { background-image: ; font-size: 22px; color: #fff; text-align: center; height: 90px; overflow: hidden; } .dj-nav .item { /*width: 14.28571%;*/ margin: 0 46px; float: left; line-height: 90px; /*padding-top: 1px;*/ } @media screen and (min-width: 750px) { .dj-nav .item:hover { background-color: rgba(255, 255, 255, 0.2) } } .dj49 { width: 50%; padding: 0 10px; float: left } .dj49.w100 { width: 100% } .dj49.w100 .dev-invite-container { margin-top: 30px } .dj49:nth-child(2n) { float: right } .dj49 .dev-invite-container { margin-top: 15px } /*.dj49 .dev-invite-container .dev-invite::after {*/ /* background-color: #e20c20*/ /*}*/ .dj-mt30 { margin-top: 30px } .dj-title { position: relative; height: 50px; line-height: 50px; padding-left: 69px; padding-right: 10px; background-color: #e20c20 } .dj-title img { position: absolute; top: -8px; left: 0; width: 64px; height: auto } .dj-title .t1 { color: #ebdb30; font-size: 26px } .dj-title-more { display: inline-block; /*font-size: 14px;*/ /*padding: 0 12px;*/ /*line-height: 24px;*/ /*box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);*/ /*color: #fff;*/ /*text-transform: uppercase;*/ /*border-radius: 8px 0;*/ /*margin-top: 14px;*/ /*-webkit-transition: .5s;*/ /*-moz-transition: .5s;*/ /*transition: .5s;*/ overflow: hidden; text-indent: 300px; width: 57px; height: 17px; margin-top: 17px; background:!important; } /*@media screen and (min-width: 750px) {*/ /* .dj-title-more:hover {*/ /* border-radius: 0 8px*/ /* }*/ /*}*/ .dj-container .container-title { line-height: 40px; text-align: center; font-size: 27px } .dj-container .container-info { line-height: 36px; background: #eaeaea; text-align: center; line-height: 36px; font-size: 12px; color: #7f7f7f; margin-top: 20px; margin-bottom: 20px } .dj-container .container-text { font-size: 18px; line-height: 2 } @media screen and (max-width: 1024px) { html { font-size: -moz-calc(100vw /7.5); font-size: calc(100vw /7.5) } .inner { width: 96% } .page { padding-top: 50px } .dj-page { padding: 0 } header { top: 0; width: 100%; position: fixed; height: 50px; background-size: contain; padding: 10px; background-color: #fff; z-index: 11; border-bottom: 1px solid #eee } header .logo { width: auto; height: 30px } header .logo img { width: auto } header .from { display: none } nav { width: 100%; height: 100%; position: fixed; z-index: 12; top: 0; left: 0; overflow-y: auto; display: none } nav .item { width: 100%; line-height: 30px; height: auto; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3) } nav .top { width: 30px; height: 30px } nav a { overflow: hidden } nav .top { float: left; margin-right: 6px } nav .text { font-size: 16px; line-height: 30px; float: left } nav .text::after { display: none } .nav-fixed-btn { width: 30px; height: 30px; top: 10px; right: 5%; position: fixed; cursor: pointer; z-index: 13 } .nav-fixed-btn .dot { width: 12px; height: 12px; border: 1px solid #666; border-radius: 3px; position: absolute; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s } .nav-fixed-btn .dot:nth-child(1) { top: 0; left: 0 } .nav-fixed-btn .dot:nth-child(2) { top: 0; right: 0 } .nav-fixed-btn .dot:nth-child(3) { right: 0; bottom: 0 } .nav-fixed-btn .dot:nth-child(4) { left: 0; bottom: 0 } .nav-fixed-btn.active .dot { border-color: #fff } .nav-fixed-btn.active .dot:nth-child(2) { -webkit-transform: rotatez(225deg); -moz-transform: rotatez(225deg); -ms-transform: rotate(225deg); transform: rotatez(225deg) } .article { font-size: .36rem; padding: 12px 0; line-height: 1.5 } .swiper-news .swiper-news-swiper .swiper-pagination { padding-bottom: 6px; padding-right: 10px } .swiper-news .swiper-news-swiper .swiper-pagination .swiper-pagination-bullet { width: 6px; height: 6px; margin: 0 3px } .swiper-news .swiper-news-swiper .text { font-size: 14px; line-height: 40px; padding-right: 100px; padding-left: 6px } .swiper-news .container-left { width: 100% } .swiper-news .container-right { width: 100% } .swiper-news .container-right .new-ul-date .date-wrap { padding-top: 12px } .swiper-news .container-right .new-ul-date .date-wrap .date { font-size: 24px } .swiper-news .container-right .new-ul-date .text-container .title { font-size: 16px } .swiper-news .container-right .new-ul-date .text-container .text { font-size: 12px } .swiper-news .container-right .new-ul-date li { margin-bottom: 6px } .swiper-news .notice { height: 86px } .swiper-news .notice .left { font-size: 24px; line-height: 29px } .swiper-news .notice .right { width: -moz-calc(100% - 0px - 80px); width: calc(100% - 0px - 80px) } .swiper-news .notice .item { line-height: 30px; font-size: 14px } .swiper-news .notice .item .fl { width: -moz-calc(100% - 80px); width: calc(100% - 80px) } .swiper-news .notice .item .fr { width: 80px } .card-container img { bottom: 20px; top: auto; opacity: .5 } .card-container .title { font-size: 16px } .card-container .text { font-size: 12px } .card-container .table { display: block } .card-container .table-cell { display: block } .card-container .item { width: 49%; margin-right: 2%; margin-bottom: 2% } .card-container .item:nth-child(2n) { margin-right: 0 } .weiquan .container { width: 100% } .weiquan .container.fr { margin-top: 20px } .weiquan .email-top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .weiquan .email-top .item { margin-right: 0 } .weiquan .email-top .media-wrap { width: 60px; height: 60px; float: none; margin: 0 auto } .weiquan .email-top .text { font-size: 14px; width: auto; float: none; line-height: 2 } .weiquan .law .top { font-size: 16px; line-height: 40px; margin-top: 6px } .weiquan .law .top .fl { position: relative; padding-left: 20px } .weiquan .law .top .fl::before { width: 8px; height: 8px; border: 1px solid #c70f04; content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto 0; border-radius: 50% } .weiquan .law .top .fr { font-size: 14px } .weiquan .law .bottom { width: 100%; border: 1px solid #eee } .weiquan .law .bottom .media-wrap { padding-top: 61.64875%; width: 100%; position: relative } .weiquan .law .bottom .media-wrap img { position: absolute; top: 0; left: 0; width: 100% } .weiquan .law .bottom .text-container { width: 100%; padding: 10px 10px } .weiquan .law .bottom .title { font-size: 16px; line-height: 1.5 } .weiquan .law .bottom .text { font-size: 14px; line-height: 1.5 } .weiquan .law .bottom .item { padding: 8px 0 } .weiquan .dev-item-left { width: 60px; height: 60px } .weiquan .dev-item-right { border-bottom: 1px solid #eee; padding: 6px } .weiquan .dev-item-right .title { font-size: 16px; color: #3a3a3a } .weiquan .dev-item-right .text { font-size: 14px; color: #7b7b7b } .weiquan .dev-item-right .date { font-size: 12px; color: #7b7b7b } .weiquan .dev-con.pc { display: none } .weiquan .dev-con.touch { display: block } .weiquan .dev-con .top { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } .weiquan .dev-con .top .dev-item { width: 33.33333% } .weiquan .dev-con .top .dev-item-left { width: 100%; font-size: 14px; line-height: 50px; height: 50px; padding: 0; top: 0 } .weiquan .dev-con .top .dev-item-left::before { border: 12px solid transparent; border-top-color: #d6d9d8 } .weiquan .dev-con .top .dev-item-left.active::before { top: 100%; left: 0; right: 0; margin: 0 auto; border-top-color: #c70f04 } .weiquan .dev-con .top .dev-item .media-wrap { display: none } .weiquan .dev-con .bottom { margin-top: 12px } .fast-nav .card-li { width: 24%; margin-right: 1%; margin-bottom: 1%; height: 90px; padding-top: 15px } .fast-nav .card-li .media-wrap { width: 40px; height: 32px } .fast-nav .card-li .text { font-size: 14px; margin-top: 8px } .act .container { width: 100% } .act .container .top { margin-bottom: 20px } .act .container-left .top { padding: 16px; margin-bottom: 6px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 6px } .act .container-left .top .media-wrap { width: 100%; padding-top: 72.97297%; position: relative } .act .container-left .top .media-wrap img { position: absolute; top: 0; left: 0 } .act .container-left .top .text-container { width: 100%; padding-top: 12px } .act .container-left .top .text-container .title { font-size: 16px; line-height: 24px; height: 48px } .act .container-left .top .text-container .text { font-size: 14px; line-height: 20px; height: 80px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4 } .act .container-left ul { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 6px; padding: 12px } .act .container-right { margin-top: 20px } .act .container-right .swiper-container { width: 100%; height: auto } .act .container-right .swiper-container .swiper-slide { height: auto } .act .container-right .swiper-container .btn { width: 24%; height: auto; top: 0; bottom: 30px; margin: auto } .act .container-right .media-wrap { padding-top: 72.97297%; position: relative } .act .container-right .media-wrap img { position: absolute; top: 0; left: 0 } .act .container-right .abs { line-height: 30px; padding: 0 12px } .act .container-right .abs .text { font-size: 14px; line-height: 30px } .act .container-right .new-slide { padding-left: 24px; padding-right: 0; background-position: 0 center; background-size: 16px } .act .container .swiper-video-swiper-prev { width: 18px; left: 5px; background-position: center; background-repeat: no-repeat; background-image: } .act .container .swiper-video-swiper-next { width: 18px; right: 5px; background-position: center; background-repeat: no-repeat; background-image: } .ones-heart { padding: 20px 0 } .ones-heart .item { width: 100%; margin-bottom: 20px } .ones-heart .item:last-child { margin-bottom: 0 } .img-text { margin-top: 0 } .img-text .container { width: 100%; margin-bottom: 20px } .img-text .top .media-wrap { width: 100%; height: auto; padding-top: 85.03401%; position: relative } .img-text .top .media-wrap img { position: absolute; top: 0; left: 0 } .img-text .top .text-container { width: 100% } .img-text .top .text-container .item { font-size: 14px; line-height: 40px; padding: 0 12px } .book .item { width: 100%; padding: 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); margin-bottom: 12px; border-radius: 6px } .book .item:last-child { margin-bottom: 0 } .book .item .text-container { margin: 0; padding: 6px 12px 0 } .book .item .text-container .title { font-size: 16px; line-height: 1.6 } .book .item .text-container .text { font-size: 14px; line-height: 1.6 } .unit .item { width: 100%; border: 1px solid #dbdbdb; border-bottom: 0 } .unit .item .com .fr { font-size: 14px } .unit .item:last-child { border-bottom: 1px solid #dbdbdb } .unit .item a { padding: 12px } .unit .item .title { font-size: 16px } .unit .item .text { font-size: 14px } .nav-link .inner { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .nav-link .inner>div { width: 100%; margin-bottom: 6px } .nav-link .inner select { width: -moz-calc(100% - 100px); width: calc(100% - 100px) } .nav-link .msg { width: 100% } .footer .inner { padding: 18px 0; font-size: 14px; line-height: 1.6 } .footer .inner img { margin: 12px auto 0 } .dj49 { width: 100% } .dj49:nth-child(2n) { margin-top: 30px } .dj-nav .inner { overflow-x: auto; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } .dj-nav .inner .item { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: auto; padding: 0 20px; line-height: 3; font-size: 18px } .dj-title { padding-left: 50px } .dj-title .t1 { font-size: 22px } .dj-title img { width: 40px; height: 40px; top: 6px } .dj-footer .inner { padding: 20px 0; font-size: 16px } .dj-container .container-title { line-height: 1.5; font-size: 20px } .dj-container .container-text { font-size: 14px } .dj-top{ height: auto; padding-top: 30%; background-position: center; } } /*分页相关*/ .pagelist ul { text-align: center; margin: 20px 0; } .pagelist li { display: inline-block; border-radius: 3px; } .pagelist li a { border: 1px solid #e20c20; color: #e20c20; border-radius: 3px; opacity: .8; display: inline-block; font-style: normal; padding: 0 6px; line-height: 1.6; vertical-align: top; font-size: 14px; margin: 0 3px; } .pagelist li a:hover { border-color: #e20c20; background: #e20c20; color: #fff; } .pagelist li.active a { border-color: #e20c20; background: #e20c20; color: #fff; } .prev-next { margin-top: 50px; } .prev-next a { width: 100%; padding: 5px 0; font-size: 14px; color: #666; display: block; transition: 0.3s; margin: 0 0 6px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .container-text img { display: inline-block }