.head-box .top { background: #f2f2f2; height: 42px; } .head-box .top .topcontent { width: 1200px; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .head-box .top .topcontent .right .point-box a { cursor: pointer; } .head-box .top .topcontent .right .point-box .comyusername { display: inline-block; width: 90px; height: 24px; line-height: 24px; top: 5px; margin-right: 10px; color: #666; border: 1px #999 solid; background: #fff; text-align: center; border-radius: 4px; } .head-box .top .topcontent .right .point-box .normalbutton { display: inline-block; width: 90px; height: 24px; line-height: 24px; top: 5px; margin-right: 10px; color: #666; border: 1px #999 solid; background: #fff; text-align: center; border-radius: 4px; } .head-box .top .topcontent .right .point-box .comyusername:hover { background: #0065e0; color: #fff; border: 0; } .head-box .top .topcontent .right .point-box .fiusername { display: inline-block; width: 112px; height: 24px; line-height: 24px; top: 5px; margin-right: 10px; color: #666; border: 1px #999 solid; background: #fff; text-align: center; border-radius: 4px; } .head-box .top .topcontent .right .point-box .fiusername:hover { background: #0065e0; color: #fff; border: 0; } .head-box .top .topcontent .right .point-box .govusername { display: inline-block; width: 112px; height: 24px; line-height: 24px; top: 5px; margin-right: 10px; color: #666; border: 1px #999 solid; background: #fff; text-align: center; border-radius: 4px; } .head-box .top .topcontent .right .point-box .govusername:hover { background: #0065e0; color: #fff; border: 0; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; z-index: 1; } .navbox { position: relative; padding-left: 450px; width: 750px; margin: 0 auto; } .logo { position: absolute; left: 0; top: 5px; color: #000;font-size: 32px; color: #0065e0; } .navbox ul { text-align: center; } .navbox ul li { display: inline-block; line-height: 60px; margin: 0 15px; } .navbox ul li.is-active { border-bottom: 3px solid #08a3f2; } .navbox ul li a { display: block; font-size: 16px; } .navbox ul li.is-active a { font-weight: bold; } .w20 { display: flex; padding-top: 40px; margin: -10px; } .w20 dd { position: relative; flex: 1; text-align: center; margin: 0 10px; } .w20 dd i,.w25 li i { font-style: normal; color: #666; display: inline-block; margin-left: 20px; font-size: 22px; padding-top: 5px; vertical-align: middle; } .w20 dd em,.w25 li em { margin-top: 10px; font-size: 16px; font-style: normal; display: block; } .w25 { display: flex; flex-wrap: wrap; margin: 0 -10px; padding-top: 30px; } .w25 > li { position: relative; width: calc(50% - 20px); text-align: center; margin: 0 10px 20px 10px; } .line01 { position: absolute; left: 0; top: 0; width: 2px; height: 20px; background: #0096f0; } .line02 { position: absolute; left: 0; top: 0; width: 20px; height: 2px; background: #0096f0; } .line03 { position: absolute; right: 0; top: 0; width: 2px; height: 20px; background: #0096f0; } .line04 { position: absolute; right: 0; top: 0; width: 20px; height: 2px; background: #0096f0; } .line05 { position: absolute; left: 0; bottom: 0; width: 2px; height: 20px; background: #0096f0; } .line06 { position: absolute; left: 0; bottom: 0; width: 20px; height: 2px; background: #0096f0; } .line07 { position: absolute; right: 0; bottom: 0; width: 2px; height: 20px; background: #0096f0; } .line08 { position: absolute; right: 0; bottom: 0; width: 20px; height: 2px; background: #0096f0; } .cont { background: rgba(75, 127, 250, .04); padding: 10px 0; } .cont label { display: inline-block; text-align: center; vertical-align: middle; } .cont label span { font-size: 30px; } .search { background: rgba(75, 127, 250, .04); border: 1px solid rgba(75, 127, 250, .3);; border-radius: 5px; width: 80%; margin:60px auto 20px auto; display: flex; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, .1); } .search input[type=text] { line-height: 70px; border: 0; background: none; font-size: 18px; flex: 1; padding: 0 15px; } .search input[type=button] { border: 0; background: #1069dd; color: #fff; padding: 0 40px; font-size: 18px; } .w1200 { width: 1200px; margin: 0 auto; } .swiper-container { width: 100%; height: 100%; } .swiper-pagination-bullet { background: #999; opacity: 1; } .swiper-pagination-bullet-active { background: #007aff; } .swiper-slide { height: 393px; position: relative; } .swiper-slide a { display: block; } .swiper-slide a p { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .6); padding: 6px 0 6px 6px; height: 38px; color: #fff; } .ttt { font-size: 26px; font-weight: normal; margin-top: 50px; padding-left: 10px; border-left: 3px solid #08a3f2; line-height: 100%; color: #121c33; } .footer { background: #fafafa url(/uploads/image/qimages/footer.jpg) 0 0 repeat-x; padding: 25px 0 20px; margin-top: 20px; } .footer h3 { background: url(/uploads/image/qimages/link.png) 0 center no-repeat; line-height: 32px; padding-left: 40px; font-size: 16px; color: #333; margin: 0 0 10px 10px; } .footer ul { border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin-bottom: 20px; display: flex; } .footer ul li { flex: 1; margin: 10px 6px; } .footer ul li select { border: 1px solid #eee; border-radius: 5px; height: 35px; width: 100%; background: #fff; } .footer p { text-align: center; } .pop { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .4); z-index: 101; } .outside { height: 100vh; display: flex; align-items: center; justify-content: center; } .inner { background: #fff; border-radius: 5px; padding: 30px 0; } .close-btn { cursor: pointer; background: #fff url(/uploads/image/qimages/close.png) center center no-repeat; width: 30px; height: 30px; border-radius: 50%; float: right; display: inline-block; margin: -40px -10px 0 0; } .close-btn:hover { background: #f4f4f4 url(/uploads/image/qimages/close-hover.png) center center no-repeat; } .login-tab { display: flex; } .login-tab dd { cursor: pointer; flex: 1; font-size: 16px; padding-bottom: 20px; text-align: center; } .login-tab dd.curr { color: #12b7f5; font-weight: bold; } .login-tab-sub { border-bottom: 1px solid #ddd; padding: 0 35px; } .login-tab-sub dd { cursor: pointer; display: inline-block; color: #666; padding-bottom: 10px; margin-right: 20px; } .login-tab-sub dd.curr { color: #000; font-weight: bold; border-bottom: 2px solid #12b7f5; margin-bottom: -1.5px; } .inner ul { margin: 20px 35px 0 35px; } .inner ul li { position: relative; margin-bottom: 15px; } .inner ul li input[type=text], .inner ul li input[type=password] { width: calc(100% - 22px); border: 1px solid #ddd; line-height: 35px; border-radius: 5px; padding: 0 10px; background: rgba(247, 248, 252, .9); } .inner ul li input[type=button] { cursor: pointer; position: absolute; right: 0; top: 0; background: rgba(247, 248, 252, .9); line-height: 35px; width: 100px; border: .1rem solid #ddd; border-radius: 5px; } .inner ul li input[type=button].abc { background: #f4f4f4 } .inner p { background: #12b7f5; color: #fff; line-height: 40px; padding: 0 20px; display: inline-block; font-size: 16px; margin: 0 35px; } .inner dl.lr { border-top: 1px solid #ddd; padding-top: 20px; margin: 0 35px; } .inner dl.lr dd { margin: 12px 0; padding-left: 100px; position: relative; } .inner dl.lr dd label { position: absolute; left: 0; top: 0; width: 90px; text-align: right; } .inner dl.lr dd label i { font-style: normal; display: inline-block; color: #f00; } .inner dl.lr dd input { border: 1px solid #eee; height: 38px; padding: 0 10px; border-radius: 5px; } .inner dl.lr dd textarea { border: 1px solid #eee; height: 38px; padding: 10px; border-radius: 5px; width: calc(100% - 20px); height: 100px; resize: none; } .sub, .sub-btn { cursor: pointer; background: #12b7f5; color: #fff; line-height: 40px; border: 0; border-radius: 5px; width: 100%; font-size: 16px; } .sub:hover, .sub-btn:hover { background: rgba(18, 183, 245, .6); } .a-wap { margin: 20px 35px 0 35px; text-align: right; overflow: hidden; } .a-wap a { display: inline-block; color: #12b7f5; margin: 10px 0 0 20px; } .a-wap a:hover { color: rgba(18, 183, 245, .6); } .sta-btn { margin: 20px 35px 0 35px; display: flex; } .sta-btn dd { flex: 1; } .sta-btn dd:nth-child(1) { margin-right: 10px; } .sta-btn dd:nth-child(2) { text-align: right; margin-left: 10px; } .sta-btn input { cursor: pointer; background: #12b7f5; color: #fff; line-height: 40px; border: 0; border-radius: 5px; width: 100%; font-size: 16px; } .sta-btn input:hover { background: rgba(18, 183, 245, .6); } .check-box { margin: 0 35px; } .check-box input { vertical-align: middle; margin-right: 5px; } .check-box label { cursor: pointer; } .swiper-slide a.comyusername { cursor: pointer; color: #fff; font-size: 18px; border: 1px solid #fff; border-radius: 20px; line-height: 40px; padding: 0 30px; display: inline-block; margin-top: 20px; } .swiper-slide a.comyusername:hover { color: #fff; background: rgba(255, 255, 255, .05); } .w555,.w55 { display: flex; margin-top: 20px; } .w555 li { flex: 1; box-shadow: 0 0 10px rgba(0, 0, 0, .1); border-radius: 10px; padding: 20px; } .w55 dd { flex: 1; border-radius: 10px; padding: 20px; background: #fff; } .w555 li:nth-child(1),.w55 dd:nth-child(1) { margin-right: 10px; } .w555 li:nth-child(2),.w55 dd:nth-child(2) { margin-left: 10px; } .head { border-bottom: 1px solid #ebecf0; padding-bottom: 10px; } .head img { width: 30px; } .head label { font-size: 16px; line-height: 100%; font-weight: bold; padding-left: 5px; } .head a { float: right; color:#4285f4; } .tablebox { height: 300px; overflow: hidden; position: relative; } .tbl-header { width: 100%; position: absolute; top: 0; left: 0; z-index: 999; } .tbl-body { width: 100%; position: absolute; top: 0; left: 0; } .tablebox table { width: 100%; } .tablebox table th, .tablebox table td { line-height: 40px; } .tablebox table tr th { cursor: pointer; } .tablebox table tr td:nth-child(3) { color: #f90; } .tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {} .tablebox table tr td span,.tablebox table tr td span {} .news dd,.news li { line-height: 40px; } .news dd span,.news li span{ float: right; } .box { position: relative; height: 277px; } .box .cont { padding: 0; height: 277px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .box i { font-style: normal; color: #666; display: inline-block; margin-left: 20px; font-size: 22px; padding-top: 5px; vertical-align: middle; } .box em { margin-top: 10px; font-size: 16px; font-style: normal; display: block; } .box .cont a { background: #1069dd; color: #fff; border-radius: 5px; height: 40px; line-height: 40px; display: inline-block; padding: 0 20px; margin-top: 30px; } /* 信易贷金融产品动态 */ .financialproduct-trends{ background: #f2f4f7; overflow: hidden; padding-bottom: 50px; margin-top:50px; } .hot { margin-top: 20px; } .swiper-slide { height: 393px; position: relative; } .swiper-slide a { display: block; } .swiper-slide a p { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .6); padding: 6px 0 6px 6px; height: 38px; color: #fff; } .banner-swiper1 .swiper-slide.swiper-slide-prev, .banner-swiper1 .swiper-slide.swiper-slide-next { opacity: 0.5; } .pro-box { position: relative; border-radius: 5px; text-align: center; background: #fff; margin: 10px; padding-top: 20px; overflow: hidden; } .pro-box:hover { box-shadow: 0 0 10px rgba(0, 0, 0, .3); } .pro-box h1 { font-weight: normal; font-size: 18px; margin-bottom: 20px; } .pro-box p { color: #666; font-size: 14px; /*padding-bottom: 12px;*/ } .pro-box strong { display: block; color: #f90; font-weight: normal; font-size: 26px; margin-bottom: 20px; } .pro-box em { position: absolute; left: 0; top: 0; line-height: 20px; border-radius: 5px 0 10px 0; font-style: normal; display: inline-block; padding: 0 10px; color: #fff; background: #08a3f2; } .pro-box ul { display: flex; margin: 20px 15px 0 15px; } .pro-box ul li { flex: 1; text-align: left; color: #999; font-size: 12px; } .pro-box ul li:nth-child(2) { text-align: right; } .pro-box .apply-btn{ width: 80%; margin: 16px auto; } .pro-box .apply-btn a { display: block; margin: 20px 15px; border: 1px solid #08a3f2; color: #08a3f2; border-radius: 20px; line-height: 35px; } .pro-box .apply-btn a:hover { background: #08a3f2; border: 1px solid #08a3f2; color: #fff; } .logoimg02 { width: 160px; padding: 0 20px; margin: 0 auto; } .logoimg02 div { display: table-cell; width: 210px; height: 60px; text-align: center; vertical-align: middle; } .logoimg02 div img { display: block; width: 100%; } /* 诚信教育 */ .video-box{ display: flex; margin-top: 20px; margin-bottom: 50px; } @media (min-width: 640px) { .container-expand-left.container-xsmall, .container-expand-right.container-xsmall { max-width: calc(50% (750px / 2) - 30px); } .container-expand-left.container-small, .container-expand-right.container-small { max-width: calc(50% (900px / 2) - 30px); } } /* tablet landscape and bigger */ @media (min-width: 960px) { .container-expand-left, .container-expand-right { max-width: calc(50% (1200px / 2) - 40px); } .container-expand-left.container-xsmall, .container-expand-right.container-xsmall { max-width: calc(50% (750px / 2) - 40px); } .container-expand-left.container-small, .container-expand-right.container-small { max-width: calc(50% (900px / 2) - 40px); } .container-expand-left.container-large, .container-expand-right.container-large { max-width: calc(50% (1600px / 2) - 40px); } } /* ---------------------------------- */ /* animation ------------------------------------- */ .transition-3d-hover, .animate-this { transition: all 0.2s ease-in-out; } .transition-3d-hover:hover, .transition-3d-hover:focus { -webkit-transform: translatey(-3px); transform: translatey(-3px); } .animate-this:hover, .animate-this:focus { -webkit-transform: translatey(-10px); transform: translatey(-10px); } /* ---------------------------------- */ /* nprogress ------------------------------------- */ /* make clicks pass-through */ #nprogress { pointer-events: none; -webkit-pointer-events: none; } #nprogress .bar { background: linear-gradient(to right, rgb(253, 5, 5), rgb(255, 168, 5)); position: fixed; z-index: 111000; top: 0; left: 0; width: 100%; height: 3px; } /* fancy blur effect */ #nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #1a73e8, 0 0 5px #1a73e8; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -moz-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); -o-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); } /* remove these to get rid of the spinner */ #nprogress .spinner { display: block; position: fixed; z-index: 110000; top: 25px; right: 25px; } /* ---------------------------------- */ /* grid slider header and their icon sliders ------------------------------------- */ .grid-slider-header { margin-bottom: 15px; } .grid-slider-header h3 { overflow: hidden; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0 !important; line-height: 33px; } .grid-slider-header, .grid-slider-header-link { /*display: flex;*/ justify-content: space-between; /*align-content: center;*/ padding: 0 !important; float: right; } .grid-slider-header .slide-nav-prev.uk-invisible, .grid-slider-header .slide-nav-next.uk-invisible , .grid-slider-header .slide-nav-prev.uk-invisible:hover, .grid-slider-header .slide-nav-next.uk-invisible:hover { visibility: visible !important; opacity: .15; color: #040404; cursor: default; background: #cecece; } .grid-slider-header .slide-nav-prev, .grid-slider-header .slide-nav-next { background: #ffffff; border-radius: 100%; width: 40px; height: 40px; position: relative; margin-left: 5px; color: #7f7f7f; } .grid-slider-header .slide-nav-prev:hover, .grid-slider-header .slide-nav-next:hover { background-color: #e2e2e2; color: #454545; } .grid-slider-header .slide-nav-prev:before, .grid-slider-header .slide-nav-next:before { font-family: "feather-icons"; font-weight: 600; font-size: 19px; line-height: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; } .grid-slider-header .slide-nav-prev:before { content: "\e92f"; } .grid-slider-header .slide-nav-next:before { content: "\e930"; } @media (max-width: 768px) { .grid-slider-header, .grid-slider-header-link { padding-right: 10px !important; } } /* ---------------------------------- */ /* slider nav custom icon ------------------------------------- */ /* slider custom icon */ .slidenav-next, .slidenav-prev { -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 38px !important; font-weight: 700; height: 38px; line-height: 38px; color: #999; border: 1px solid rgba(20, 23, 28, .05); border-radius: 100%; background-color: white; } .slidenav-next:hover, .slidenav-prev:hover { background-color: rgb(232, 240, 254); } .slidenav-next:before, .slidenav-prev:before { font-family: "feather-icons"; font-weight: 600; text-align: center; margin: 0; margin-left: 0; color: #7d7d7d; position: absolute; font-size: 19px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slidenav-prev:before { content: "\e92f"; } .slidenav-next:before { content: "\e930"; } /* if they are inside the card */ .uk-position-center-left.slidenav-prev, .uk-position-center-right.slidenav-next { background-color: white; box-shadow: 0 0 8px -6px black; } .uk-position-center-left.slidenav-prev { margin-left: 0px !important; } .uk-position-center-right.slidenav-next { margin-right: 0px !important; } .uk-position-center-right-out.slidenav-next {left: 96.4%;} .uk-position-center-left-out.slidenav-prev { right: 96.4%; } @media (max-width: 768px) { .slidenav-next, .slidenav-prev { background: white; } .uk-position-small[class*='slidenav-next'], .uk-position-small[class*='slidenav-prev'] { margin-left: -10px; margin-right: -10px; } } /* ---------------------------------- */ /* slider nav arrow ------------------------------------- */ .btn-arrow-slider{ height: 26px; cursor: pointer; display: inline-flex; } .btn-arrow-slides{ margin: 0 5px; position: relative; padding: 17px 0; } .btn-arrow-slides span{ display: block; position: relative; transition: width 0.3s ease 0s; } .btn-arrow-slides:before { content: ''; display: block; width: 42px; height: 3px; border-radius: 30%; background-color: #1a73e8; position: relative; transition: width 0.3s ease 0s; } span.arrow-left::before , span.arrow-left::after , span.arrow-right::before , span.arrow-right::after { content: ""; display: block; width: 14px; height: 3px; background-color: #1a73e8; position: absolute; z-index: 1; top: -3px; border-radius: 7px; transition: all 0.3s ease 0s; } span.arrow-left::before , span.arrow-left::after { left: 2px; transform: rotate(0deg); transform-origin: 0px 2px; } span.arrow-right::before , span.arrow-right::after { right: 2px; transform: rotate(0deg); transform-origin: 14px 2px; } span.arrow-left::before{ transform: rotate(-42deg); } span.arrow-left::after{ transform: rotate(42deg); } span.arrow-right::before{ transform: rotate(42deg); } span.arrow-right::after{ transform: rotate(-42deg); } .btn-arrow-slides.uk-invisible span { visibility: visible !important; } .btn-arrow-slides.uk-invisible span:before , .btn-arrow-slides.uk-invisible span:after{ background-color: #e0e0e0; transform: rotate(0deg); margin-top: 0px; opacity: 0.1; } .btn-arrow-slides.uk-invisible:before { content: ''; display: block; width: 24px !important; visibility: visible !important; background-color:#bdbdbd; opacity: .4; } .btn-arrow-slides.left:before { width: 24px !important; background-color:#bdbdbd; } .btn-arrow-slides.left:hover:before{ width: 45px !important; background-color: #1a73e8; } .btn-arrow-slides.left span:before, .btn-arrow-slides.left span:after{ background-color:#bdbdbd; transform: rotate(0deg); margin-top: 0px; } .btn-arrow-slides.left:hover span.arrow-left::before{ transform: rotate(-42deg) !important; background-color: #1a73e8; } .btn-arrow-slides.left:hover span.arrow-left::after{ transform: rotate(42deg) !important; background-color: #1a73e8; } @media (max-width: 960px) { .btn-arrow-slides:before { content: ''; display: block; width: 30px; height: 3px; } span.arrow-left::before, span.arrow-left::after, span.arrow-right::before, span.arrow-right::after { content: ""; display: block; width: 10px; height: 3px; } span.arrow-right::before, span.arrow-right::after { transform-origin: 11px 2px; } .btn-arrow-slides.uk-invisible:before { width: 19px !important; } } /* ---------------------------------- */ /* sidebar out of the page ------------------------------------- */ .sidebar-out .main_content {margin-left: 0px !important;} .sidebar-out .main_sidebar {margin-left: -260px;margin-top: 0;} .sidebar-out .main_sidebar .sidebar { height: calc(100% - 0px);} .sidebar-out .sidebar-header {display: flex !important;} .sidebar-out.collapse-sidebar .main_sidebar {margin-left: 0px;z-index: 1000;position: fixed;height: calc(100% - 0px);width: 270px;} .sidebar-out.collapse-sidebar .main_sidebar .side-overlay { visibility: visible;} .sidebar-out.collapse-sidebar .sidebar .sidebar_innr .sections li a { padding: 0px 28px !important; } .sidebar-out.collapse-sidebar .sidebar .sidebar_innr .sections li a span , .sidebar-out.collapse-sidebar .sidebar .sidebar_innr .sections .button { display:block !important } .sidebar-out.collapse-sidebar .sidebar .sidebar_innr .sections li a i { font-size:17px } .sidebar-out.collapse-sidebar .sidebar .sidebar_innr .sections { border-color:rgba(0,0,0,0.12); margin-bottom: 12px; } /* ---------------------------------- */ /* collapse sidebar ------------------------------------- */ .collapse-sidebar .main_sidebar{ margin-left: 0px; } .collapse-sidebar .main_content{ margin-left: 80px; } .collapse-sidebar .sidebar .sidebar_innr{ padding-right: 10px; } .main_sidebar, .main_content{ transition: all 0.45s cubic-bezier(0, 0, 0, 1.09); } /* ---------------------------------- */ /* page contents layout ------------------------------------- */ .main_content { position: relative; z-index: 5; display: block; /*margin-left: 275px;*/ /*padding-top: 65px;*/ } .main_content_inner { display: block; /*padding: 20px;*/ margin: auto; padding-bottom: 0; } @media (min-width: 1200px) { .main_content_inner { /*max-width: 1140px;*/ /*padding: 25px;*/ max-width: 1200px; padding-bottom: 0; padding-top: 15px; } .collapse-sidebar .main_content_inner { max-width: 1200px; } .content-expand .main_content_inner { max-width: 1340px; } } @media (min-width: 1650px) { .main_content_inner { max-width: 1300px; } } /* ---------------------------------- */ /* video post card ------------------------------------- */ .video-post { transition: 0.3s; position: relative; } .video-post-thumbnail { flex: 0 0 auto; max-width: none; max-height: 100%; position: relative; width: 100%; height: 140px; } .video-post-thumbnail img {height: 100%;width: 100%;object-fit: cover;position: absolute;top: 0;left: 0;border-radius: 10px;} .video-post-content { flex: 1; padding-top: 9px; } .video-post-content img{ border-radius: 100%; width: 30px; float: left; margin-right: 10px; } .video-post-content h3{ font-size: 16px; line-height: 28px; color: #333 !important; margin-bottom: 8px; display: block; text-align: center; } .blog-post-content h3 a:hover { color: #66676b; } span.video-post-time , span.video-post-count{ font-size: 12px; color: #ffffff; margin-bottom: 10px; display: inline-block; font-weight: 600; background-color: #292929; border-radius: 7px; line-height: 19px; padding: 1px 7px; margin-right: 3px; transition: 0.3s; } .video-post-content p { padding: 0; margin: 0; display: block; color: #808080; } .video-post-user, .video-post-date, .video-post-views { line-height: 14px; font-size: 13px; color: #737373; } .video-post-user { display: block; font-weight: 600; } /* play button on hover video card image*/ .video-post-thumbnail .play-btn-trigger { left: 0; top: 0; z-index: 1; width: 100%; height: 100%; position: absolute; background: url(/uploads/image/qimages/icon-play.svg) no-repeat; background-size: auto 40%; background-position: center; visibility: hidden; opacity: 0; -webkit-transition: opacity 150ms ease-in-out; -moz-transition: opacity 150ms ease-in-out; -ms-transition: opacity 150ms ease-in-out; -o-transition: opacity 150ms ease-in-out; transition: opacity 150ms ease-in-out; -webkit-transition: -webkit-transform 150ms ease-in-out; -moz-transition: -moz-transform 150ms ease-in-out; -o-transition: -o-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; } .video-post:hover .play-btn-trigger, .play-btn-trigger.show { visibility: visible; opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /* ---------------------------------- */ /* small devices ------------------------------------- */ @media (max-width: 760px) { .video-post { margin-bottom: 30px; display: flex } .video-post .video-post-thumbnail { width: 140px; height: 80px; } .video-post .video-post-content { padding: 0 0 0 15px; } .video-post-content p { display: none; } .video-post .video-post-content h3 { font-size: 15px; line-height: 21px; margin-bottom: 8px; height: 41px; overflow: hidden; } .video-post .video-post-user { display: block; } .video-post .btn-option { top: -4px; right: -2px; } .video-post .video-post-content .btn-option { right: -11px; } .video-post-content h3 { font-size: 15px; line-height: 22px; color: #333; margin-bottom: 8px; display: block; } span.video-post-time, span.video-post-count { line-height: 15px; padding: 1px 5px; font-size: 10px; } span.video-post-time { bottom: 7px !important; right: 7px !important; } span.video-post-count { top: 7px !important; left: 7px !important; } .video-post .video-post-count:before { display: none; } } @media (min-width: 767px) { /* ---------------------------------- video list small ------------------------------------- */ .video-list-small .video-post-list.video-post { margin-bottom: 0px; display: flex; } .video-list-small .video-post-list.video-post .video-post-thumbnail { width: 180px !important; height: 100px; } .video-list-small .video-post-list.video-post .video-post-content { padding: 0 0 0 20px; } .video-list-small .video-post-list.video-post .video-post-content h3 { font-size: 15px; line-height: 24px; margin-bottom: 10px; padding-right: 19px; } .video-list-small .video-post-list.video-post .video-post-user { display: block; } .video-list-small .video-post-list.video-post .btn-option { top: -4px; right: -2px; } .video-list-small .video-post .video-post-count { top:8px ; left:9px } .video-list-small .video-post-list.video-post .video-post-count , .video-list-small .video-post-list.video-post .video-post-time { padding: 0px 4px !important; font-size:11px; } /* ---------------------------------- display video post as list ------------------------------------- */ .video-post-list.video-post { margin-bottom: 30px; display: block } .video-post-list.video-post { display: flex; } .video-post-list.video-post .video-post-thumbnail { width: 240px !important; height: 135px; } .video-post-list.video-post .video-post-content { padding: 0 0 0 20px; } .video-post .video-post-time { font-size: 10px; bottom: 8px; right: 8px; margin: 0; position: absolute; z-index: 1; padding: 1px 7px; } .video-post .video-post-count { top: 13px; left: 13px; margin: 0; position: absolute; z-index: 1; background: #377dff; background: #e8f0fe; color: #1a73e8; } .video-post .video-post-count:before { font-family: "unicons"; font-size: 14px; content: '\e9d3'; margin-right: 3px; } .video-post-list .video-post-content h3 { font-size: 18px; line-height: 27px; margin-bottom: 1px; padding-right: 25px; } .video-post-list .video-post-content p{ padding-top:8px } .video-post-list .video-post-user { display: inline; } .video-post-list.video-post .btn-option { right: -2px; top: -5px; } .video-post-list.video-post .video-post-date, .video-post-list.video-post .video-post-views { margin-left: 6px; } } /* 信用修复 */ .creditrestoration{ background: #f2f4f7; overflow: hidden; padding-bottom: 50px; margin-top:50px; } .cont p{ padding: 20px 40px; line-height: 26px; font-size: 16px; }