@charset "UTF-8"; $yahei: "Microsoft YaHei", SimHei, sans-serif; $maincolor: #e94646; $titleFont: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans","Hiragino Sans GB","Source Han Sans CN","Source Han Sans SC","Microsoft YaHei","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif; @import "lego/base"; @import "base/mixins"; @import "base/ui-dialog"; @import "page/bindWx"; html { font-size: 12px; font-family: PingFang sc,"Helvetica Neue",Helvetica,Tahoma,Arial,"Liberation Sans","Hiragino Sans GB","Source Han Sans CN","Source Han Sans SC","Microsoft YaHei","Wenquanyi Micro Hei","WenQuanYi Zen Hei","ST Heiti",SimHei,"WenQuanYi Zen Hei Sharp",sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body{ font-size: 12px; min-width: 1200px; } .clearfix{ @include clearfix(); } .mr-10{ margin-right: 10px; } .fl{ float: left; } .fr{ float: right; } .g-zt-inner { width: 1200px; margin: 0 auto; } .zt-mod_title{ height: 78px; } .zt-mod_intro{ text-align: center; color: #666666; font-size: 28px; line-height: 40px; margin-top: 20px; } .zt-mod_article{ color: #666666; font-size: 20px; line-height: 36px; margin-top: 30px; .sub-title{ display: inline-block; line-height: 46px; height: 46px; font-size: 28px; color: #333333; padding: 0 20px; margin-top: 1.5em; border-left: 8px solid #eda200; } .sub-title2{ display: inline-block; line-height: 48px; height: 48px; background: #666666; font-size: 28px; font-weight: normal; color: #FFFFFF; padding: 0 20px; margin-top: 1.5em; } .pic-title{ text-align: center; color: #999999; font-size: 20px; font-weight: normal; line-height: 40px; margin-top: 6px; span{ position: relative; display: inline-block; padding-left: 35px; text-align: left; &:before{ content: ''; position: absolute; top: 50%; left: 0; margin-top: -5px; width: 10px; height: 10px; background: #999999; } } } .mejs-container{ margin: 1.5em auto 0 auto; } .video-wrap{ display: none; width: 520px; height: 380px; } p{ margin-top: 1.5em; } img{ max-width: 100%; } } .zt-mod-primary { position: relative; height: 982px; .p-logo{ margin-top: 100px; width: 324px; height: 107px; background: url(/src/img/pc-mod1_logo.png) no-repeat; } .p-name{ color: #eda200; font-size: 82px; font-weight: bold; text-shadow: 0px 4px 7px #000, 0px 0px 4px #000, 0 7px 9px #717171, 0 4px 9px #000; } .p-nick{ width: 578px; height: 77px; line-height: 77px; font-size: 28px; font-weight: 700; color: #333; margin-left: -6px; background: url(/src/img/pc-mod1-nick_bg.png) no-repeat; p{ padding-left: 20px; } } .p-intro{ margin-top: 20px; width: 560px; font-size: 20px; color: #ffffff; line-height: 34px; background: #000; background: rgba(0,0,0,0.8); p{ padding: 20px; } } } .zt-mod2{ padding: 88px 0 388px 0; background: url(/src/img/pc-mod2_bg.jpg) center bottom no-repeat #f0ede6; .box-indentity{ margin-right: 15px; .img-wrap{ width: 268px; height: 357px; border: 3px solid #FFFFFF; } img{ display: block; width: 100%; height: 100%; overflow: hidden; } } .person-info{ margin: 60px 20px 0 20px; } .info-row1{ .box-info{ height: 352px; } } .info-row2{ position: relative; margin-top: 48px; padding-bottom: 10px; .list-info{ width: 890px; } .link-more{ padding-top: 57px; text-align: center; color: #333333; font-size: 20px; display: block; height: 31px; margin: 20px 0 0 100px; background: url(/src/img/icon-more.png) center top no-repeat; &:hover{ text-decoration: none; &:hover{ opacity: 0.8; } } } } .box-info{ overflow: hidden; background: #fafafa; border-bottom: 10px solid #e89f00; box-shadow: 0 10px 24px 1px #989898; } .list-info{ font-size: 20px; color: #666666; line-height: 45px; margin-left: 30px; li{ float: left; width: 100%; } &.ext-col2{ li{ width: 50%; } } &.ext-col3{ li{ width: 33.3%; } } label{ font-weight: 700; color: #333333; } } .tip-info{ margin-top: 20px; font-size: 20px; color: #333333; line-height: 40px; text-align: right; } .col-580{ width: 580px; } .col-267{ width: 267px; } h2{ margin: 30px 0 20px 0; text-align: center; font-size: 28px; } } .zt-mod3{ .slider-wrap{ margin-top: 60px; } } .zt-mod4{ padding: 88px 0 600px 0; background: url(/src/img/pc-mod4_bg.jpg) center bottom no-repeat #ffffff; } .zt-mod5{ padding: 88px 0 388px 0; background: url(/src/img/pc-mod5_bg.jpg) center bottom no-repeat #333333; .box-question{ margin-top: 60px; } .que-title{ @include clearfix(); color: #eda200; font-size: 24px; font-weight: 700; line-height: 46px; &.ext-row2{ i{ margin-top: 20px; } } } .que-answer{ @include clearfix(); color: #adadad; margin: 20px 0 60px 0; font-size: 20px; label{ float: left; } .item-label{ color: #ffffff; } .item-cont{ width: 1122px; } } .num{ float: left; display: block; width: 36px; height: 47px; } @for $i from 0 through 9{ .num#{$i}{ background: url(/src/img/num#{$i}.png) no-repeat; } } } .zt-mod6{ padding: 88px 0 388px 0; background: url(/src/img/pc-mod6_bg.jpg) center bottom no-repeat #ffffff; } .zt-mod-comment{ padding: 100px 0 200px 0; } .zt-mod-sidebar{ position: absolute; width: 130px; left: 50%; top: 1340px; margin-left: 630px; background-color: #666666; text-align: center; color: #ccc; &.is-scroll{ position: fixed; top: 200px; } .aside-menu__item { border-bottom: 1px solid #999999; } .aside-menu__item:last-child { border-bottom: none; } .aside-menu__link { height: 48px; padding: 20px 0 15px; display: block; color: #fff; outline: none; &.active,&:hover { color: #eda200; background: #333333; text-decoration: none; .aside-menu__en{ color: #7d5f1c; } } } .min-nav__link--active { color: #fff; background-color: #666666; } .min-nav__link--active span { color: #222; } .aside-totop .min-nav__link--active { color: #fff; } .aside-totop .min-nav__link--active span { color: #5e636e; } .aside-menu__tit { display: block; margin-bottom: 5px; font-size: 16px; } .aside-menu__en { display: block; color: #bdbdbd; font-family: Arial; font-size: 14px; } .icon-totop{ display: inline-block; *display: inline; *zoom:1; width: 22px; height: 12px; margin-top: 10px; vertical-align: top; overflow: hidden; background: url(../img/icon-top.png?__sprite) no-repeat; } } .zt-mod-menu{ position: fixed; top: 40px; left: 50%; margin-left: 484px; cursor: pointer; &:hover{ .wrap-news{ display: block; } } .link-more{ display: none; } .list-menu{ width: 116px; li{ display: block; color: #FFFFFF; font-size: 14px; line-height: 30px; padding: 0 20px; background: #333333; text-align: center; &.active{ color: #333333; background: #eda200; } } } .wrap-news{ display: none; position: absolute; right: 0; width: 280px; padding-top: 18px; } .list-news{ position: relative; background: #636363; border: 1px solid #916f23; li{ } a{ display: block; color: #FFFFFF; font-size: 14px; line-height: 30px; padding: 0 20px; @include ellipsis(); &:hover{ text-decoration: none; background: #333333; } } &:before{ content: ''; position: absolute; top: -12px; right: 50px; width: 14px; height: 12px; background: url(/src/img/icon-arrow.png) no-repeat; } } } $img-width: 760px; // 图片宽度 $img-height: 560px; // 图片高度 .g-ui-slide { position: relative; width: $img-width; margin: 0 auto; background: #000; border: 10px solid #666666; } .g-ui-slide__scroll{ width: $img-width; height: $img-height; overflow: hidden; } .g-ui-slide__content { position: relative; height: $img-height; overflow: hidden; } .g-ui-slide__panel { position: relative; width: $img-width; height: $img-height; overflow: hidden; a { display: block; height: $img-height; line-height: $img-height; position: relative; text-align: center; } .btn { position: absolute; @include inline-block; top: 50%; left: 50%; vertical-align: middle; width: 220px; height: 78px; line-height: 78px; border: 2px solid #ed813b; color: #ed813b; font-size: 16px; border-radius: 50px; margin: -39px 0 0 -110px; background-color: transparent; background-color: rgba(0,0,0,.7); text-align: center; } img{ max-width: 100%; max-height: 100%; vertical-align: middle; } } .g-ui-slide__nav{ display: none; } .g-ui-slide__prev,.g-ui-slide__next { margin: 0; padding: 0; position: absolute; top: 50%; width: 78px; height: 140px; margin-top: -50px; background-color: #333333; border: 0; outline: 0; line-height: 140px; text-align: center; cursor: pointer; &:before { content:""; @include inline-block; vertical-align: middle; position: relative; width: 37px; height: 60px; } } .g-ui-slide__prev { left: -144px; &:before { background: url(/src/img/icon-prev.png) no-repeat; background-size: 100%; right: 6px; } } .g-ui-slide__next { right: -144px; &:before { background: url(/src/img/icon-next.png) no-repeat; background-size: 100%; left: 6px; } } $vari: 750 / 640; @function px2rem($size) { @return $size / 20 / 2 / $vari+rem; } @function -px2rem($size) { @return - $size / 20 / 2 / $vari+rem; } //H5适配 @media screen and (max-width: 750px) { body{ min-width: auto; } #dw-topbar,.dwCommonFooter,.zt-mod-sidebar,.dw-mini-popup-wrap{ display: none; } .g-zt-inner{ width: 100%; padding: 0 px2rem(24); box-sizing: border-box; } .zt-mod_title{ height: px2rem(44); } .zt-mod_intro{ font-size: px2rem(24); line-height: px2rem(40); margin-top: px2rem(20); } .zt-mod2,.zt-mod3,.zt-mod4,.zt-mod5,.zt-mod6{ background-size: 100% auto; } .zt-mod5,.zt-mod6,.zt-mod-comment{ padding: px2rem(50) 0 px2rem(100) 0; } .zt-mod-primary{ height: px2rem(490); .p-logo{ width: px2rem(190); height: px2rem(62); background-size: 100%; margin-top: px2rem(70); } .p-nick{ padding: px2rem(20) px2rem(88) 0 px2rem(26); font-size: px2rem(28); line-height: px2rem(44); width: px2rem(424); height: px2rem(127); background: url(/src/img/m-mod1-nick_bg.png) no-repeat; background-size: 100%; box-sizing: border-box; p{ padding-left: 0; } } .p-name{ font-size: px2rem(48); } .p-intro{ display: none; } } .zt-mod_article{ font-size: px2rem(30); line-height: px2rem(50); margin-top: 0; .sub-title{ line-height: px2rem(40); height: px2rem(40); font-size: px2rem(34); padding: 0 px2rem(20); margin-top: px2rem(50); border-left: px2rem(8) solid #eda200; } .sub-title2 { line-height: px2rem(42); height: px2rem(42); font-size: px2rem(34); } p{ margin-top: px2rem(30); } embed{ display: none; } .pic-title{ font-size: px2rem(24); line-height: px2rem(50); span{ padding-left: px2rem(34); &:before{ width: px2rem(10); height: px2rem(10); margin-top: px2rem(-5); } } } .mejs-container{ margin-top: px2rem(30); } .video-wrap{ display: block; width: 100%; height: px2rem(380); } } .zt-mod2{ padding: 0 0 px2rem(100) 0; overflow: hidden; .info-row1{ .box-info{ height: auto; } } .info-row2{ margin-top: auto; .list-info{ width: auto; } .link-more{ position: absolute; right: px2rem(24); top: px2rem(-10); padding: 0 px2rem(80) 0 0; height: px2rem(30); color: #eda200; font-size: px2rem(26); background: url(/src/img/icon-more.png) right center no-repeat; background-size: auto 100%; &:hover{ text-decoration: none; &:hover{ opacity: 0.8; } } } } h2{ font-size: px2rem(34); margin: px2rem(50) 0 px2rem(20) 0; } .tip-info{ font-size: px2rem(24); margin-top: px2rem(-30); } .person-info{ margin: 0; } .box-indentity{ width: 100%; padding: px2rem(30) 0; display: flex; margin-right: 0; .img-wrap{ width: px2rem(218); height: px2rem(290); } .intro-wrap{ padding: px2rem(24); flex: 1; font-size: px2rem(26); line-height: px2rem(42); color: #ffffff; background: #323231; margin-left: px2rem(24); } } .box-info{ padding-bottom: px2rem(30); margin-bottom: px2rem(30); box-shadow: 0 5px 20px 1px #b9b9b9; } .list-info{ font-size: px2rem(26); line-height: px2rem(50); margin-left: px2rem(30); &.ext-col3{ li{ width: 50%; } } li{ width: 50%; } } .col-580,.col-267{ width: 100%; float: inherit; } } .zt-mod3{ .slider-wrap{ margin-top: px2rem(50); } } .zt-mod4{ padding: px2rem(50) 0 px2rem(150) 0; } .zt-mod5{ .box-question{ font-size: px2rem(30); margin-top: px2rem(50); } .que-title{ font-size: px2rem(30); line-height: px2rem(50); } .que-answer { font-size: px2rem(30); color: #adadad; margin: px2rem(20) 0 px2rem(60) 0; .item-cont{ width: auto; float: inherit; } } .num{ width: px2rem(36); height: px2rem(47); } @for $i from 0 through 9{ .num#{$i}{ background-size: 100%; } } } .zt-mod6{ } .zt-mod-menu{ position: relative; top: 0; left: 0; margin: px2rem(30) px2rem(24) 0 px2rem(24); .box-menu{ display: flex; box-shadow: 0 5px 20px 1px #b9b9b9; } .link-more{ display: block; text-align: center; color: #eda200; font-size: px2rem(30); line-height: px2rem(50); margin-top: px2rem(20); } .wrap-news{ position: relative; right: 0; display: flex; width: auto; padding: px2rem(20) 0; li{ font-size: px2rem(34); } } .list-menu{ width: px2rem(88); li{ display: none; height: 100%; line-height: px2rem(40); &:last-child{ display: block; padding: px2rem(80) px2rem(20) 0 px2rem(20); box-sizing: border-box; } } } .list-news{ background: transparent; border: none; &:before{ display: none; } a{ color: #333333; font-size: px2rem(30); line-height: px2rem(50); padding: 0 px2rem(30); &:hover{ background: transparent; color: #eda200; } } } } .zt-mod-comment{ } .g-ui-slide{ width: px2rem(542); border: px2rem(10) solid #666666; } .g-ui-slide__scroll,.g-ui-slide__panel{ width: px2rem(542); height: px2rem(406); } .g-ui-slide__prev, .g-ui-slide__next{ width: px2rem(48); height: px2rem(88); margin-top: px2rem(-44); line-height: px2rem(88); &:before { width: px2rem(28); height: px2rem(45); left: auto; right: auto; } } .g-ui-slide__prev{ left: px2rem(-85); } .g-ui-slide__next{ right: px2rem(-85); } .g-ui-slide__panel a{ height: px2rem(406); line-height: px2rem(406); } } .expand-animate { -webkit-transform-origin: 80% 0; transform-origin: 80% 0; -webkit-animation: scale-in-ease cubic-bezier(0.22,.58,.12,.98) .5s; animation: scale-in-ease cubic-bezier(0.22,.58,.12,.98) .5s; }