@charset "UTF-8"; /** * Created by Tony_Liu on 2019/5/9. */ @nav-bg-color: #175faf; @media screen and (min-width: 1200px) { .pc{ display: block!important; } .mobile{ display: none!important; } .banner { width: 100%; height: auto; position: relative; img { width: 100%; } } .nav { display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; background: rgba(0, 0, 0, .4); .nav-con { width: 1200px; height: 100%; margin: 0 auto; display: flex; justify-content: center; .nav-item { width: 200px; height: 100%; cursor: pointer; text-align: center; transition: all .1s; position: relative; &:hover { background: rgba(0, 0, 0, .4); a { border-bottom: 2px solid #e60012; } } a { width: 100%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%); letter-spacing: 1px; font-size: 20px; color: #fff; padding: 12px 0; border-bottom: 0 solid #e60012; transition: all .2s; text-align: center; } } } } .isZph { .nav-con .nav-item { width: 20%; } .nav-con .nav-item a { text-align: center; } } .isXsps { .nav-con .nav-item { width: 100%/5; } .nav-con .nav-item a { width: 100%; text-align: center; margin-left: 0; transform: translate(-50%); letter-spacing: 0; padding: 12px 0; } } .bread-nav { width: 100%; background: #f0f0f0; div { width: 1200px; margin: 0 auto; font-size: 16px; padding: 20px 0; line-height: 1; a { font-size: 16px; } p { text-indent: 2em; font-size: 16px; line-height: 1.6; } p + p { margin-top: 10px; } } } .is-menu { .con-left, .con-right { padding-right: 0 !important; padding-left: 0 !important; } .con-right { margin-top: 15px !important; } .listnav { float: left; width: 180px; border: 1px solid #ddd; border-top-color: #2862b6; border-bottom-color: #2862b6; background: #fff; p { text-align: center; font-size: 18px; line-height: 3; border-bottom: 1px solid #ddd; a { font-size: 20px; } } .active { border-left: 4px solid #c61717; background: #2862b6; color: #fafafa; a { font-size: 20px; color: #fafafa; } } .active + ul + p { border-top: 1px solid #ddd; } .ulactive { height: auto; .liactive { // background: #ddd; a { font-weight: bold; color: #2862b6; } } } } } /*页码样式*/ .page { margin-top: 40px; text-align: center; display: flex; display: -webkit-flex; align-items: center; justify-content: center; * { transition: all .3s; } > a { display: -webkit-flex !important; align-items: center; justify-content: center; width: 24px; height: 24px; text-align: center; text-decoration: none; border-radius: 7px; font-size: 14px; margin: 0 2px; &:hover { color: #fff; } } a.cur { background: @nav-bg-color; color: #fff; } a.pl { text-align: center; color: #666666; &:hover { color: @nav-bg-color; } } a.cpl { background: @nav-bg-color; color: #fff; } a.apl { letter-spacing: -4px; } } .container { width: 1200px; height: auto; margin: 0 auto; padding: 50px 0; //display: flex; .con-left { width: 950px; padding-right: 50px; position: relative; float: left; .list-box { width: 100%; h1 { font-size: 30px; font-weight: bold; padding-left: 15px; border-left: 5px solid #e60012; a { font-size: 30px; font-weight: bold; //border-left: 5px solid #e60012; } } .list-item { width: 100%; height: 120px; background: #f3f3f3; //border-radius: 8px; margin-top: 30px; position: relative; border: 1px solid #f3f3f3; box-sizing: content-box; .list-img { width: 220px; height: 120px; float: left; overflow: hidden; position: relative; > img { position: absolute; left: 50%; top: 0%; width: auto; height: 100%; transform: translateX(-50%); float: left; z-index: 2; } .default-img { z-index: 1; } } .default-img { //position: absolute; left: 0; } &:hover { background: #e7e7e7; .triangle { border-left: 0 solid #e7e7e7; border-right: 14px solid #e7e7e7; } .list-title { //font-weight: bold; //letter-spacing: 1px; color: #000; } } } .list-item-con { width: 680px; height: 120px; padding: 20px; position: relative; float: right; .triangle { width: 0; height: 0; position: absolute; top: 50%; margin-top: -10px; left: -14px; border-left: 0 solid #f3f3f3; border-right: 14px solid #f3f3f3; border-top: 10px solid transparent; border-bottom: 10px solid transparent; z-index: 999; } .list-title { font-size: 20px; transition: all .3s; a { font-size: 20px; } } .list-from { position: absolute; left: 20px; bottom: 20px; > span { font-size: 14px; color: #555; margin-right: 10px; } } .list-share { position: absolute; right: 20px; bottom: 20px; a { float: left; display: flex; width: 30px; height: 30px; text-align: center; border-radius: 50%; background: #bbb; margin-left: 10px; transition: all .3s; > img { width: 20px; height: 20px; margin: 0 auto; align-self: center; } } .icon-sina { img { width: 25px; height: 25px; } &:hover { background: #cc2020; } } .icon-qq:hover { background: #1374c7; } .icon-weixin { position: relative; } .icon-weixin:hover { background: #0f9850; .wechat-qrcode { display: block; opacity: 1; } } .wechat-qrcode { display: none; opacity: 0; border: 1px solid #eee; position: absolute; z-index: 9; top: -200px; left: -56px; width: 142px; height: 190px; color: #666; text-align: center; background-color: #fff; box-shadow: 0 2px 10px #aaa; transition: all .4s; -webkit-tansition: all .4s; -moz-transition: all .4s; h4 { font-weight: bold; height: 26px; line-height: 26px; font-size: 14px; background: #f3f3f3; margin: 0; padding: 0; color: #333; text-align: center; } .QRcode { width: 110px; margin: 7px auto; } .QRcode:after { content: ''; position: absolute; left: 50%; margin-left: -6px; bottom: -13px; width: 0; height: 0; border-width: 8px 6px 6px 6px; border-style: solid; border-color: #fff transparent transparent transparent; } p { font-weight: normal; line-height: 16px; padding: 0; margin: 0; text-align: center; color: #666; } } } } } .hr { width: 100%; height: 1px; background: #aaa; margin: 50px 0; } .line { position: absolute; right: 0; top: 70px; width: 4px; height: 225px; background: #e60012; z-index: 1; } .line2 { position: absolute; top: 70px; right: 0; width: 1px; height: 100%; background: #bbb; } > h1 { width: 84%; text-align: center; font-size: 28px; margin: 0 auto 30px; color: #333; overflow: hidden; } > h2 { text-align: center; position: relative; > span { font-size: 16px; margin-right: 1em; } .aca-btn { right: 0; top: 0; position: absolute; background: #0000ff; padding: 5px 15px; line-height: 1; border-radius: 20px; color: #fff; &:hover { > p { opacity: 1; } } p { opacity: 0; transition: all .3s; position: absolute; right: 0; top: 35px; width: 200px; height: auto; overflow: hidden; background: #f3f3f3; box-shadow: 0 2px 10px #999; span { width: 100%; img { display: block; width: 70%; margin: 10px auto; } b { display: block; width: 100%; font-size: 16px; font-weight: normal; padding-bottom: 10px; text-align: center; color: #333; } } } } } .TRS_Editor { margin-top: 50px; padding: 0 6px; overflow: hidden; .tcplayer { width: 100%; height: 500px !important; video { width: 100% !important; height: 100% !important; } } .swiper-container { padding: 50px 0 6px; overflow: visible; img { width: 100%; box-shadow: 0 0 6px #aaa; } .swiper-button-next, .swiper-button-prev { transform: translate(0, 50%); } } > p, > div { font-size: 16px; line-height: 28px; color: #333; margin-top: 15px; text-align: justify; a { font-size: 16px; color: #0c20b1; } img { display: block; height: auto; margin: auto; } } > p[align="center"] { text-align: center; } } .statement { width: 100%; height: 70px; line-height: 24px; text-align: center; margin-top: 50px; box-sizing: border-box; background: #f2f2f2; padding-top: 12px; color: #666; font-size: 12px; } } .con-right { width: 250px; height: auto; margin-top: 70px; //border-left: 1px solid #bbb; padding-left: 50px; float: left; .sidebar-top { width: 100%; height: auto; padding-bottom: 50px; border-bottom: 1px solid #bbb; margin-bottom: 50px; .title { text-align: justify; margin-bottom: 15px; a { font-size: 22px; font-weight: bold; } } > p { font-size: 18px; text-indent: 2em; } } .sidebar-bot { width: 100%; height: auto; .title { font-size: 22px; text-align: center; font-weight: bold; margin-bottom: 15px; } .arrange-con { width: 100%; list-style: disc; .arrange-item { width: 90%; text-align: left; padding: 10px 0; margin: 0 auto; border-radius: 5px; transition: all 0.3s; font-size: 16px; img { width: 70px; margin-bottom: 10px; } span { display: block; font-size: 18px; text-align: justify; a { display: block; width: 100%; font-size: 18px; transition: all .3s; } .puppet { display: block; width: 0; height: 0; overflow: hidden; opacity: 0; } } } } } .border-none { border: none !important; } } } .no-sidebar { .con-left { width: 100%; position: relative; float: left; border: 1px solid #ccc; padding: 70px 50px; .list-item-con { width: 980px !important; } } .line, .line2 { display: none !important; } } .footer { width: 100%; height: auto; background: #EDEDED; padding: 25px 0; p { text-align: center; font-size: 14px; color: #939393; line-height: 25px; a { font-size: 14px; color: #939393; } } } } @media screen and (max-width: 1200px) { .nav { display: none!important; } .mobile{ display: block!important; } .pc{ display: none!important; } .banner{ width: 100%; height: auto; //height: 282px; position: relative; background: #3C6EFF; img{ width: 100%; } .img { width: auto; height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; } } .ydxz-banner { height: 260px; } .yd_gsl-banner { height: 210px; } .nav{ background: #0e1756; bottom: -70px!important; position: absolute; left: 0; width: 100%; height: 70px; //background: rgba(0,0,0,.3); .nav-con{ width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: center; .nav-item{ width: 16.66%; height: 100%; cursor: pointer; text-align: center; transition: all .3s; position: relative; &:hover{ background: rgba(0,0,0,.2); a{ border-bottom: 4px solid #e60012; } } a{ width: 100%; text-align: center; position: absolute; bottom: 0; left: 50%; transform: translate(-50%); letter-spacing: 0; font-size: 22px; color: #fff; padding: 20px 0; border-bottom: 0 solid #e60012; transition: all .3s; } } } } .isZph{ position: static; .nav-con{ width: 100%; height: 100%; margin: 0 auto; .nav-item{ width: 25%; height: 100%; float: left; cursor: pointer; text-align: center; transition: all .3s; position: relative; &:hover{ background: rgba(0,0,0,.2); a{ border-bottom: 4px solid #e60012; } } a{ margin: 0; position: absolute; bottom: 0; left: 50%; letter-spacing: 2px; font-size: 24px; color: #fff; padding: 20px 5px; border-bottom: 0 solid #e60012; transition: all .3s; } } } } .isXsps { position: static; .nav-con{ width: 100%; height: 100%; margin: 0 auto; .nav-item{ width: 20%; height: 100%; float: left; cursor: pointer; text-align: center; transition: all .3s; position: relative; &:hover{ background: rgba(0,0,0,.2); a{ border-bottom: 4px solid #e60012; } } a{ position: absolute; bottom: 0; left: 50%; margin-left: 0; letter-spacing: 0; font-size: 20px; color: #fff; padding: 20px 0; border-bottom: 0 solid #e60012; transition: all .3s; } } } } .isTqly { bottom: -50px!important; .nav-item { width: 30% !important; } } .bread-nav{ margin-top: 0px!important; div{ margin: 0 auto; font-size: 24px; } div{ width: 100%; font-size: 24px; background: #f0f0f0; padding: 20px 25px; line-height: 1; a{ font-size: 24px; } p { text-indent: 2em; font-size: 24px; line-height: 1.6; } p + p { margin-top: 10px; } } } .container { width: 100%; height: auto; margin: 0 auto; padding: 50px 0; //display: flex; .con-left{ width: 100%; padding-right: 25px; padding-left: 25px; position: relative; float: left; >h1{ width: 90%; text-align: center; font-size: 30px; margin: 0 auto 30px auto; color: #333; overflow: hidden; } >h2{ text-align: center; >span{ font-size: 24px; margin-right: 1em; float: left; color: #888; line-height: 1.5; } .aca-btn{ margin-right: 0; float: right; position: absolute; right: 25px; background: #0000ff; padding: 5px 15px; line-height: 1; border-radius: 20px; color: #fff; &:hover{ >p{ display: block; } } p { display: none; transition: all .3s; position: absolute; right: 100%; top: 45px; width: 300px; height: auto; overflow: hidden; background: #f3f3f3; box-shadow: 0 2px 10px #999; span{ width: 100%; img{ display: block; width: 70%; margin: 10px auto; } b{ display: block; width: 100%; font-size: 24px; font-weight: normal; padding-bottom: 10px; text-align: center; color: #333; } } } } } .list-box{ width: 100%; h1{ font-size: 31px; font-weight: bold; padding-left: 15px; border-left: 5px solid #e60012; a{ font-size: 32px; font-weight: bold; } } .list-item{ width: 100%; height: auto; min-height: 120px; background: #f3f3f3; border-radius: 8px; margin-top: 20px; display: flex; align-items: center; .list-img{ width: 220px; height: 120px; position: relative; overflow: hidden; >img{ width: auto; height: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; } .default-img{ z-index: 1; } } &:hover{ background: #e7e7e7; .triangle{ border-left: 0 solid #e7e7e7; border-right: 14px solid #e7e7e7; } .list-title{ //font-weight: bold; letter-spacing: 0; color: #000; } } } .list-item-con{ width: 70%; height: auto; padding: 20px; position: relative; .triangle{ display: none; width: 0; height: 0; position: absolute; top: 50%; margin-top:-10px; left:-14px; border-left: 0 solid #f3f3f3; border-right: 14px solid #f3f3f3; border-top: 10px solid transparent; border-bottom: 10px solid transparent; z-index: 999; } .list-title{ font-size: 27px; transition: all .3s; margin-bottom: 35px; a { font-size: 27px; } } .list-from{ position: absolute; left: 20px; bottom: 20px; >span{ font-size: 18px; color: #555; margin-right: 10px; } } .list-share{ display: none; position: absolute; right: 20px; bottom: 20px; a{ display: inline-block; width: 30px; height: 30px; text-align: center; border-radius: 50%; background: #bbb; margin-left: 10px; transition: all .3s; img{ width:20px; height: 20px; margin-bottom: 1px; } } .icon-sina{ img{ width: 25px; height: 25px; } &:hover{ background: #cc2020; } } .icon-qq:hover{ background: #1374c7; } .icon-weixin:hover{ background: #0f9850; } } } } .hr{ width: 100%; height: 1px; background: #aaa; margin: 50px 0; } .line{ position: absolute; right: -1px; top: 70px; width: 4px; height: 225px; background: #e60012; } .TRS_Editor{ margin-top: 30px; >p, >div{ font-size: 24px!important; line-height: 50px; color: #333; margin-top: 15px; text-align: justify; letter-spacing: 1px; a{ font-size: 20px; } img{ width: 100%; display: block; height: auto; margin: auto; } } } .statement{ width: 100%; height: 70px; text-align: center; margin-top: 50px; box-sizing: border-box; background: #f2f2f2; padding: 20px; line-height: 1.5; color: #666; font-size: 12px; } } .con-right{ display: none; } } /*页码样式*/ .page { margin-top: 40px; text-align: center; display: flex; display: -webkit-flex; align-items:center; justify-content:center; * { transition: all .3s; } > a { display: -webkit-flex!important; align-items:center; justify-content:center; width: 24px; height: 24px; text-align: center; text-decoration: none; border-radius: 7px; font-size: 14px; margin: 0 2px; &:hover { color: #fff; } } a.cur { background: @nav-bg-color; color: #fff; } a.pl { text-align: center; color: #666666; &:hover { color: @nav-bg-color; } } a.cpl { background: @nav-bg-color; color: #fff; } a.apl { letter-spacing: -4px; } } .is-menu { .con-left, .con-right{ padding-right: 30px!important; padding-left: 30px!important; } } table { width: 100% !important; margin-left: 0!important; margin-right: 0!important; * { text-align: left!important; } } .footer{ width: 100%; height: auto; background: #EDEDED; padding: 25px 0; div{ font-size: 20px; text-align: center; color: #939393; } p{ text-align: center; font-size: 20px; color: #939393; line-height: 25px; a{ font-size: 20px; color: #939393; } } } }