@charset "utf-8"; @font-face { font-weight: normal; font-style: normal; } /* 设置默认字体 */ body, button, input, select, textarea { font-family: "Microsoft YaHei","simsun","Arail"; font-size: 14px; outline:none; color:#828282 ; position:relative; } ul,ol{padding:0;margin-bottom:0px;} li{list-style:none;} .fl{float: left} .fr{float: right} /*公共样式开始-------------*/ /*头部*/ .menu{width:100%;overflow:hidden;height:80px;} .menu ul{position:relative;float:left;left:50%;} .menu ul li { position: relative; float: left; left: -50%; margin: 0 9px; font-size: 14px; color: #666666; overflow: hidden; margin-top: 30px; cursor: pointer; } .menu ul li div{padding-bottom:10px;} .menu ul li a,.menu ul li a:hover{color:#666666;} .menu ul li i{width: 100%; height: 1px;display: block; -webkit-transform: translateX(-110%); -moz-transform: translateX(-110%); -o-transform: translateX(-110%); transform: translateX(-110%); background:#006fb7; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .menu ul li:hover i,.menu ul li.cur i{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } @media (min-width: 768px){ .menu{height:120px;} .menu ul li{margin:0 20px;margin-top:45px;} } @media (min-width:992px) { .menu{height:140px;} .menu ul li{margin:0 20px;margin-top:60px;} } @media (max-width:992px){ .menu ul li div{padding-bottom:2px;} .menu { height: auto; padding-top: 35px; padding-bottom: 35px; } .menu ul li { margin: 0 17px; } } @media (max-width:544px){ .menu { padding-top: 25px; padding-bottom: 25px; } .menu ul li { margin: 7px; font-size: 13px; } } .gf-logo h1{width: 164px;height: 64px;margin-top:30px;margin-bottom:5px;position: absolute; top:0; left: 4%;z-index: 2;} .gf-logo h1 a{background:url(../images/logo.png) no-repeat center;display:block;-moz-background-size: auto 64px;-o-background-size: auto 64px;background-size: auto 64px;height:64px;width: 288px;} .gf-logo h1 a:focus { outline: none; } /*客服开始*/ /*.main-im{position:fixed;_position:absolute;_left:expression(eval(document.documentElement.scrollright+10));_top:expression(eval(document.documentElement.scrollTop+230));left:10px;top:230px;z-index:1000;width:110px;height:272px;} .main-im .qq-a{display:block;width:106px;height:116px;font-size:14px;color:#0484cd;text-align:center;position:relative;} .main-im .qq-a span{bottom:5px;position:absolute;width:90px;left:10px;} .main-im .qq-hover-c{width:70px;height:70px;border-radius:35px;position:absolute;left:18px;top:10px;overflow:hidden;z-index:9;} .main-im .qq-container{z-index:99;position:absolute;width:109px;height:118px;border-top-left-radius:10px;border-top-right-radius:10px;border-bottom:1px solid #dddddd;background:url(../images/qq-icon-bg.png) no-repeat center 8px;} .main-im .img-qq{max-width:60px;display:block;position:absolute;left:6px;top:3px;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.5s;} .main-im .im-qq:hover .img-qq{max-width:70px;left:1px;top:8px;position:absolute;} .main-im .im_main{background:#F9FAFB;border:1px solid #dddddd;border-radius:10px;background:#F9FAFB;display:none;} .main-im .im_main .im-tel{color:#000000;text-align:center;width:109px;height:136px;border-bottom:1px solid #dddddd; line-height: 21px;} .main-im .im_main .im-tel div{font-weight:bold;font-size:12px;margin-top:6px;} .main-im .im_main .im-tel .tel-num{font-family:Arial;font-weight:bold;color:#e66d15;} .main-im .im_main .im-tel:hover{background:#fafafa;} .main-im .im_main .weixing-container{width:55px;height:47px;background:#f5f5f5;border-bottom-right-radius:10px;background:url(../images/weixing-icon.png) no-repeat center center;float:right;} .main-im .im_main .weixing-show{width:112px;height:172px;background:#ffffff;border-radius:10px;border:1px solid #dddddd;position:absolute;right:-125px;top:-126px;} .main-im .im_main .weixing-show .weixing-sanjiao{width:0;height:0;border-style:solid;border-color:transparent transparent transparent #ffffff;border-width:6px;right:112px;top:134px;position:absolute;z-index:2;} .main-im .im_main .weixing-show .weixing-sanjiao-big{width:0;height:0;border-style:solid;border-color:transparent transparent transparent #dddddd;border-width:8px;right:108px;top:132px;position:absolute;} .main-im .im_main .weixing-show .weixing-ma{width:104px;height:103px;padding-left:5px;padding-top:5px;} .main-im .im_main .weixing-show .weixing-txt{position:absolute;top:105px;left:7px;width:100px;margin:0 auto;text-align:center;} .main-im .im_main .go-top{width:50px;height:47px;border-right:1px solid #dddddd;background:#f5f5f5;border-bottom-left-radius:10px;background:url(../images/toTop-icon.png) no-repeat center center;float:left;} .main-im .im_main .go-top a{display:block;width:52px;height:47px;} .main-im .close-im{position:absolute;right:10px;top:-12px;z-index:100;width:24px;height:24px;} .main-im .close-im a{display:block;width:24px;height:24px;background:url(../images/close_im.png) no-repeat left top;} .main-im .close-im a:hover{text-decoration:none;} .main-im .open-im{cursor:pointer;margin-right:68px;width:40px;height:133px;background:url(../images/open_im.png) no-repeat left top;}*/ .suspension{position:fixed;z-index:55;right:0;bottom:150px;width:70px;height:288px;} .suspension-box{position:relative;float:right;} .suspension .a{display:block;width:68px;height:68px;background-color:#6f6f6f;margin-bottom:4px;cursor:pointer;outline:none;} .suspension .a.active, .suspension .a:hover{background:#006fb7;} .suspension .a .i{float:left;width:68px;height:68px;background-repeat:no-repeat;} /* .suspension .a-service .i{background-position:0 0;} */ .suspension .a-service-wx .i{width:32px;height:32px;margin-top:18px;margin-left:18px;background-image:url(../images/service-wx.png);background-repeat:no-repeat;} .suspension .a-service .i{width:32px;height:32px;margin-top:18px;margin-left:18px;background-image:url(../images/service.png);background-repeat:no-repeat;} .suspension .a-service-phone .i{width:32px;height:32px;margin-top:18px;margin-left:18px;background-image:url(../images/service-phone.png);background-repeat:no-repeat;} .suspension .a-qrcode .i{width:32px;height:32px;margin-top:18px;margin-left:18px;background-image:url(../images/qrcode.png);background-repeat:no-repeat;} .suspension .a-top .i{width:32px;height:32px;margin-top:18px;margin-left:18px;background-image:url(../images/top.png);background-repeat:no-repeat;} .suspension .a-top{background:#D2D3D6;display:none;} .suspension .a-top:hover{background:#c0c1c3;} .suspension .d{display:none;width:179px;background:#fff;position:absolute;right:70px;min-height:79px;border:1px solid #E0E1E5;border-radius:3px;box-shadow:0px 2px 5px 0px rgba(161, 163, 175, 0.11);} /* .suspension .d .arrow{position:absolute;width:8px;height:12px;background:url(../images/side_bg_arrow.png) no-repeat;right:-8px;top:31px;} */ .suspension .d .arrow{position:absolute;width:8px;height:12px;right:-8px;top:31px;} .suspension .d-service-wx{top:0;} .suspension .d-service{top:72px;} .suspension .d-service-phone{top:144px;} .suspension .d-qrcode{top:216px;} .suspension .d .inner-box{padding:8px;} .suspension .d .inner-box p { text-align: center; font-size: 15px; } /* .suspension .d-service-item{border-bottom:1px solid #eee;padding:8px 0; width: 161px;} */ .suspension .d-service-item{padding:8px 0; width: 161px;} .suspension .d-service .d-service-item{border-bottom:none;} .suspension .d-service-item .circle{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#F1F1F3;display:block;float:left;} .suspension .d-service-item .i-qq1,.suspension .d-service-item .i-qq2{width:44px;height:44px;background:url(../images/side_con_icon03.png) no-repeat center 15px;display:block;transition:all .2s;border-radius:50%;overflow:hidden;} .suspension .d-service-item .i-wx{width:44px;height:44px;background:url(../images/side_con_icon06.png) no-repeat center 15px;display:block;transition:all .2s;border-radius:50%;overflow:hidden;} .suspension .d-service-item:hover .i-qq1,.suspension .d-service-item:hover .i-qq2,.suspension .d-service-item:hover .i-wx{background-position:center 3px;} .suspension .d-service-item .i-tel{width:44px;height:44px;background:url(../images/side_con_icon02.png) no-repeat center center;display:block;} .suspension .d-service-item .i-ser{width:44px;height:44px;background:url(../images/side_con_icon01.png) no-repeat center center;display:block;} .suspension .d-service-item .kefu {float:left;width:65px;line-height:44px;font-size:15px;margin-left:12px;color: #828282;} .suspension .d-service-item:hover .kefu{color: #006fb7;} .suspension .d-service-item .text{float:left;width:105px;line-height:22px;font-size:15px;margin-left:12px;} .suspension .d-service-item .text .kt { padding-bottom: 6px; } .suspension .d-service-item .text .number{ color: #006fb7; padding-bottom: 3px; } .suspension .d-service-intro{padding-top:10px;} .suspension .d-service-intro p{float:left;line-height:27px;font-size:12px;width:50%;white-space:nowrap;color:#888;} .suspension .d-service-intro i{background:url(../images/side_con_icon01.png) no-repeat center center;height:27px;width:14px;margin-right:5px;vertical-align:top;display:inline-block;} .suspension .d-cart{text-align:center;} .suspension .d-cart .inner-box{padding:10px 0;} .suspension .d-cart p{font-size:14px;color:#93959c;} .suspension .d-qrcode{text-align:center;} .suspension .d-qrcode .inner-box{padding:10px 0;} .suspension .d-qrcode p{font-size:14px;color:#93959c;} /*客服结束*/ .gf-pnav{position: absolute;height:60px;margin-top: 30px;padding-right: 4%;top: 0;right: 0; z-index:3;} .gf-pnav a { color: #fff; z-index: 2; font-size: 16px; margin-top: 21px; margin-left: 20px; overflow: hidden; display: inline-block; } .gf-pnav a:focus { outline: none; } .gf-pnav a i{width: 100%; height: 1px;margin-top:10px; display: block; -webkit-transform: translateX(-110%); -moz-transform: translateX(-110%); -o-transform: translateX(-110%); transform: translateX(-110%); background:#006fb7; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .gf-pnav a:hover i{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .gf-header .focus-text{position: absolute;left: 4%;z-index: 2;color:#fff;} .gf-state{border-bottom: 1px solid #dedede; } .neirong{display: none;} /*手机菜单样式开始-----------*/ .buttonset { position:absolute;right:4%;top:15px;z-index:1000; transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),-webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -o-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),-o-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99),-moz-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99),-webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99),-moz-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99),-o-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1),transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99),-webkit-transform 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99); -webkit-tap-highlight-color: transparent; } .nav-moblie { width: 25px; height:35px; position: relative; cursor: pointer; display: table; -o-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s; } .nav-moblie a { background-color: #fff; display: block; height: 2px; margin-top:16px; position: relative; top: 50%; width: 100%; -moz-border-radius:2px; border-radius:2px; -o-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; } .nav-moblie a:after, .nav-moblie a:before { background-color: #fff; display: block; height: 2px; left: 0; position: absolute; width: 100%; -moz-border-radius:2px; border-radius:2px; content:''; -o-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s; } .nav-moblie a:after { top: 8px; width: 80%; } .nav-moblie a:before { left: auto; right: 0; top: -8px; width: 70%; } .nav-moblie a:focus{ outline:none; } .buttonset.on{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .buttonset.on .nav-moblie a:after,.buttonset.on .nav-moblie a:before{ width: 100%; transition: -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); -o-transition: -o-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); -moz-transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -moz-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -o-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); transition: transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.25s 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); top:0; } .buttonset.on .nav-moblie a:before{ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .buttonset.on .nav-moblie a{ background: rgba(0, 0, 0, 0); } .buttonset.on .nav-moblie a:after{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .neirong { display: block; position: fixed;width:100%; top: 0; z-index: 1000; /*left: -163px;*/overflow-y: auto; left: 0;touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .neirong .neirong-bd{ padding-bottom: 20px; padding-top: 65px; padding-left: 17px; padding-right: 17px; visibility: hidden; } .neirong a {display: block; height:47px; line-height: 47px; color:#f2f2f2; font-size: 16px; border-bottom: 1px solid #333; -moz-transition: all .35s ease-out; -o-transition: all .35s ease-out; transition: all .35s ease-out;} .neirong a:hover{background:#1f1f1f;color:#fff;} .content{ left: 0; position: relative;} .content.content-on{ left:120px;} .neirong.neirong-on{left: 0;} .body-on{position: relative;overflow: hidden;} .html-on{overflow: hidden;} .neirong-close { display: none; width: 30px; height: 24px; background: url(../images/nav_close.png) no-repeat 7px center; position: absolute; top: 20px; right: 4%; visibility: hidden; } .neirong.neirong-hide{ background-color:rgba(0,0,0,.8); height:0; -moz-transition:background 0.35s linear,height 0.25s ease-in 200ms; -o-transition:background 0.35s linear,height 0.25s ease-in 200ms; transition:background 0.35s linear,height 0.25s ease-in 200ms; } .neirong.neirong-show{ background-color:#000; height:100%;} .neirong.neirong-show .neirong-bd,.neirong.neirong-show .neirong-close{visibility: visible;} .neirong.neirong-hide a{opacity: 0; -webkit-transform: scale(1.1) translateY(-24px); -moz-transform: scale(1.1) translateY(-24px); -o-transform: scale(1.1) translateY(-24px); transform: scale(1.1) translateY(-24px);} .neirong.neirong-show a{opacity: 1;-webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none;} .neirong a:nth-of-type(2){ -moz-transition-delay: 300ms,300ms; -o-transition-delay: 300ms,300ms; transition-delay: 300ms,300ms;} .neirong a:nth-of-type(3){ -moz-transition-delay: 350ms,350ms; -o-transition-delay: 350ms,350ms; transition-delay: 350ms,350ms;} .neirong a:nth-of-type(4){ -moz-transition-delay: 400ms,400ms; -o-transition-delay: 400ms,400ms; transition-delay: 400ms,400ms;} .neirong a:nth-of-type(5){ -moz-transition-delay: 450ms,450ms; -o-transition-delay: 450ms,450ms; transition-delay: 450ms,450ms;} .neirong a:nth-of-type(6){ -moz-transition-delay: 500ms,500ms; -o-transition-delay: 500ms,500ms; transition-delay: 500ms,500ms;} .neirong a:nth-of-type(7){ -moz-transition-delay: 550ms,550ms; -o-transition-delay: 550ms,550ms; transition-delay: 550ms,550ms;} .neirong a:nth-of-type(8){ -moz-transition-delay: 600ms,600ms; -o-transition-delay: 600ms,600ms; transition-delay: 600ms,600ms;} .neirong a:nth-of-type(9){ -moz-transition-delay: 650ms,650ms; -o-transition-delay: 650ms,650ms; transition-delay: 650ms,650ms;} .neirong a:nth-of-type(10){ -moz-transition-delay: 700ms,700ms; -o-transition-delay: 700ms,700ms; transition-delay: 700ms,700ms;} .neirong a:nth-of-type(11){ -moz-transition-delay: 750ms,750ms; -o-transition-delay: 750ms,750ms; transition-delay: 750ms,750ms;} /*手机版头部*/ .buttonset .show{ background-color: rgba(0,0,0,.8); -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;} .buttonset-black .buttonpush{background:url("../images/button_black.png") no-repeat center;} .buttonset-black .buttonpush.show{background: rgba(0,0,0,.8) url("../images/buttonset.png") no-repeat center; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;} .ctrl-more { border: 1px solid #ccc; margin: 0 auto; width: 46px; height: 46px; line-height: 50px; font-size: 0; text-align: center; background: #fff; border-radius: 50%; cursor: pointer; transition: .45s; } .ctrl-more:hover { background: #006fb7; border: 1px solid #006fb7; } .ctrl-more i { display: inline-block; margin-right: 2px; margin-left: 2px; width: 4px; height: 4px; background: #e0e0e0; border-radius: 50%; transition: .45s; } .ctrl-more:hover i { background: #fff; } footer { background: #232323; } .footer-in { margin: 0 auto; width: 1400px; } .footer-l { display: inline-block; padding-top: 85px; vertical-align: top; } .footer-l ul li { float: left; margin-right: 80px; } .footer-l ul li:last-child { margin-right: 0px; } .footer-l dl { margin: 0; /*height: 57px;*/ } .footer-l dt { margin-bottom: 25px; } .footer-l dt a { padding-bottom: 4px; font-size: 14px; color: #c1c1c1; } .footer-l dd { } .footer-l dd a { line-height: 32px; font-size: 14px; color: #7a7a7a; transition: .3s; } .footer-l dd a:hover { color: #c1c1c1; } .footer-r { display: inline-block; float: right; margin-top: 73px; vertical-align: top; } .f-share { font-size: 0; text-align: right; } .f-share-one { position: relative; display: inline-block; border: 1px solid #838383; margin-right: 40px; width: 44px; height: 44px; line-height: 42px; text-align: center; vertical-align: top; border-radius: 50%; cursor: pointer; transition: .5s; } .f-share:hover .f-share-one { opacity: .2; } .f-share .f-share-one:hover { opacity: 1; } .f-share-one:last-child { margin-right: 0; } .fs-one-qrcode { position: absolute; bottom: 65px; left: 50%; z-index: 10; transform: translateX(-50%) translateY(20px); padding: 7px; background: rgba(255, 255, 255, .1); opacity: 0; visibility: hidden; transition: .35s .05s; } .f-share-one:hover .fs-one-qrcode { transform: translateX(-50%) translateY(0px); opacity: 1; visibility: visible; } .f-belongs { padding-top: 28px; margin-top: 35px; } .f-belongs-one { line-height: 20px; font-size: 14px; color: #7a7a7a; text-align: right; max-width: 600px; margin: 7px 0; } .copyright { position: relative; padding-top: 15px; padding-bottom: 15px; margin-top: 15px; } .copyright::before { content: ' '; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #363636; } .copyright-l { display: inline-block; width: calc(100% - 560px); font-size: 0; } .copyright-r, .copyright-l, .copyright-l h2, .copyright-l > ul, .copyright-l > ul > li { display: inline-block; vertical-align: top; } .copyright-l > ul { width: calc(100% - 70px); } .copyright-l h2 { position: relative; top: 0px; margin: 0; margin-right: 10px; line-height: 16px; font-size: 12px; color: #515151; } .copyright-l > ul > li { margin-right: 25px; font-size: 12px; } .copyright-l > ul > li a { color: #515151; transition: .3s; } .copyright-l > ul > li a:hover { color: #c1c1c1; } .copyright-r { float: right; font-size: 12px; color: #7a7a7a; } .copyright-r a { color: #7a7a7a; padding-left: 10px; } .copyright-r a:hover { color: #c1c1c1; } .about-desc { padding-top: 148px; padding-bottom: 135px; text-align: center; } .about-desc h2 { position: relative; margin: 0; margin-bottom: 78px; line-height: 42px; font-size: 28px; color: #464646; } .about-desc h2::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -38px; width: 28px; height: 3px; background: #006fb7; } .about-desc p.desc { margin: 0; line-height: 35px; font-size: 14px; } .about-desc.letmove h2, .about-desc.letmove p.desc { transform: translateY(40px); transition: transform .8s .0s, opacity .8s .0s; opacity: 0; } .about-desc.letmove p.desc { transform: translateY(50px); transition: transform .8s .1s, opacity .8s .1s; } .about-desc.move h2, .about-desc.move p.desc { transform: translateY(0); opacity: 1; } .news-desc { padding-top: 60px; padding-bottom: 60px; width: 80%; margin: 0 auto; } .news-desc .time { text-align: center; font-size: 14px; padding-bottom: 20px; } .news-desc .time p { padding: 0 25px; display: inline-block; } .news-desc h2 { margin-bottom: 50px; text-align: center; font-size: 32px; font-weight: bold; color: #333; } .news-desc .wenzhang { border-top: 1px dashed #dedede; font-size: 16px; padding-top:40px; padding-bottom: 30px; border-bottom: 1px solid #dedede; line-height: 1.8; color: #333; } .news-desc .wenzhang img { max-width: 100%; height: auto !important; } .news-desc .keywords { font-size: 14px; padding-top: 30px; line-height: 28px; } .news-desc .keywords a { color: #828282; } .news-desc .keywords a:hover { color: #006fb7; } .news-desc .wenzhang p+p { margin-top: 10px; } .page-contact{ margin: 2.6vw 0;} .page-contact .top{ font-size: 3.2em; font-family: Microsoft YaHei; line-height: 32px; text-align: center; color: #005ca2; padding-bottom: 40px; border-bottom: 2px solid #333;} .page-contact .box{ margin-top: 35px; overflow: hidden; display: flex; align-items: center;} .page-contact .box .img{ width: 40%; float: left; height: 340px; position: relative;} .page-contact .box .img img{ position: absolute; width: 100%; height: 100%;} .page-contact .box .text{ padding: 0 40px; width: 40%; float: left;} .page-contact .box .text .t{ font-size: 2em; color: #005ca2; font-weight: bold;} .page-contact .box .text .p{ font-size: 1.6em; color: #333; line-height: 30px; margin-top: 20px;} .page-contact .box .btns{ width: 20%; float: left;} .page-contact .box .btns a{ display: block; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #3d3d3d; font-size: 1.8em; color: #fff; font-weight: bold; overflow: hidden; position: relative; font-family: "Microsoft YaHei"; transition: all .3s;} .page-contact .box .btns a:last-child{ background: #005ca2; color: #fff; margin-top: 20px;} .page-contact .box .btns a::before{ content: ""; position: absolute; width: 100%; height: 0; padding-bottom: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 100%; transition: all .6s;} .page-contact .box .btns a:hover::before{ -webkit-animation: button_zk .75s; animation: button_zk .75s;} .news-desc.letmove h2, .news-desc.letmove p { transform: translateY(40px); transition: transform .8s .0s, opacity .8s .0s; opacity: 0; } .news-desc.move h2, .news-desc.move p { transform: translateY(0); opacity: 1; } .newslist { margin: 0 auto; /*padding-top: 50px;*/ text-align: center } .newslist.letmove h3, .newslist.letmove p { transform: translateY(40px); transition: transform .8s .0s, opacity .8s .0s; opacity: 0; } .newslist.move h3, .newslist.move p { transform: translateY(0); opacity: 1; } .news-one.letmove { transform: translateY(40px); transition: transform .8s .0s, opacity .8s .0s; opacity: 0; } .news-one.move { transform: translateY(0); opacity: 1; } /*fixed头部样式*/ .navbar-fixed { position: fixed; top: -87px; opacity: 0; filter: alpha(opacity:0); background: #fff; height: 87px; width: 100%; z-index: 999; -moz-box-shadow: 0 0 1px 0 rgba(0, 0, 0, .3), 0 0 6px 2px rgba(0, 0, 0, .15); box-shadow: 0 0 1px 0 rgba(0, 0, 0, .3), 0 0 6px 2px rgba(0, 0, 0, .15); -moz-transition: all .5s .1s ease; -o-transition: all .5s .1s ease; transition: all .5s .1s ease; } .logo{padding:11.5px 0;} .right_menu a { display: inline-block; padding-top: 32px; margin-left: 40px; font-size: 16px; color: #666666; overflow: hidden; } .right_menu a:focus, .logo a:focus { outline: none; } .right_menu i{width: 100%; height: 1px;margin-top:10px; display: block; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);background:#006fb7; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .right_menu a:hover i{ -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .navbar-fixed.show{opacity:1;top:0px;} .navbar-fixed .buttonset{top:10px;} .navbar-fixed .nav-moblie a,.navbar-fixed .nav-moblie a:before,.navbar-fixed .nav-moblie a:after{background-color:#666666;} @media(max-width:768px){ .navbar-fixed{height:50px;top:-50px;} .logo img{width:120px;height:40px;} .logo{padding:5px 0;} } /*banner图样式*/ .banner { position: relative; width: 100%; overflow: hidden; } .banner picture img { -webkit-animation: banner_inside 20s ease 1 forwards; -moz-animation: banner_inside 20s ease 1 forwards; -o-animation: banner_inside 20s ease 1 forwards; animation: banner_inside 20s ease 1 forwards; } @-webkit-keyframes banner_inside { from { -webkit-transform: scale(1.23); transform: scale(1.23); } to { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes banner_inside { from { -moz-transform: scale(1.23); transform: scale(1.23); } to { -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes banner_inside { from { -o-transform: scale(1.23); transform: scale(1.23); } to { -o-transform: scale(1); transform: scale(1); } } @keyframes banner_inside { from { -webkit-transform: scale(1.23); -moz-transform: scale(1.23); -o-transform: scale(1.23); transform: scale(1.23); } to { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .banner_txt{text-align:center;position: absolute;top: 55%;z-index: 9;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%); width: 100%;} .banner_txt1{font-size:24px;width:100%;font-weight:bold;text-align:center;left:0;color:#fff; -webkit-animation: fadeInUp4 1.4s .4s ease both; -o-animation: fadeInUp4 1.4s .4s ease both; animation: fadeInUp4 1.4s .4s ease both; -moz-animation: fadeInUp4 1.4s .4s ease both; /* text-transform: uppercase; */ } .banner_txt2{width:90%;margin:0 auto;font-size:14px;line-height:24px;color:#ffffff;margin-top:15px;-webkit-animation:fadeInUp5 1.4s .8s ease both; -o-animation:fadeInUp5 1.4s .8s ease both; animation:fadeInUp5 1.4s .8s ease both; -moz-animation:fadeInUp5 1.4s .8s ease both; } /*.btn-circle*/ .btn-circle { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .btn-circle-hover, .btn-circle-click { position: absolute; z-index: -2; display: block; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 0; height: 0; -moz-border-radius: 50%; border-radius: 50%; background: #006fb7; } .btn-circle-hover { opacity: 0; } .btn-circle-click { background: #ee9d84; } /*product*/ .product { margin-bottom: 45px; } .product_txt{margin-top:100px;margin-bottom:65px;text-align:center;color:#777777;} .product_txt1{font-size:45px;font-weight:bold;margin-bottom:40px;} .product_txt2{font-size:16px;} .case_list {margin-top:0} .more_button{position:relative;overflow:hidden; z-index:1;width:48px;height:48px;border:1px solid #d1d1d1;-moz-border-radius:100%;border-radius:100%;color:#e0e0e0;text-align:center;line-height:48px;display:block;margin:0 auto; font-size: 12px; -o-transition: all 1.7s ease; -moz-transition: all 1.7s ease; transition: all 1.7s ease; -webkit-mask-image: radial-gradient(white, black); mask-image: radial-gradient(white, black); } .more_button:focus{outline:none;} .more_button:hover { background: #006fb7; color: #fff; border: 1px solid #006fb7; } .more_button i { display: block; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); width: 100%; height: 100%; background: -moz-radial-gradient(#006fb7, #018ce7,#006fb7,#018ce7,#006fb7,#018ce7,#006fb7,#018ce7,#006fb7); background: -o-radial-gradient(#006fb7, #018ce7,#006fb7,#018ce7,#006fb7,#018ce7,#006fb7,#018ce7,#006fb7); background: radial-gradient(#006fb7, #018ce7,#006fb7,#018ce7,#006fb7,#018ce7,#006fb7,#018ce7,#006fb7); opacity: 0; -o-transition: 1.2s, opacity 1.8s; -moz-transition: 1.2s, opacity 1.8s; transition: 1.2s, opacity 1.8s; -moz-border-radius: 50%; border-radius: 50%; } .more_button:hover i { -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); transform: scale(10); opacity: 1; -o-transition: 3s, opacity .3s; -moz-transition: 3s, opacity .3s; transition: 3s, opacity .3s; } .dot2 span,.dot1 span{position:absolute;color:#d1d1d1;left:50%;top:50%; -webkit-transform: translateX(-50%)translateY(-50%); -moz-transform: translateX(-50%)translateY(-50%); -o-transform: translateX(-50%)translateY(-50%); transform: translateX(-50%)translateY(-50%); -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } /*dot1*/ .dot1 span{ color: #d1d1d1; } .dot1 span:nth-child(1){ -o-transition: all 0.4s .5s ease, color .3s; -moz-transition: all 0.4s .5s ease, color .3s; transition: all 0.4s .5s ease, color .3s; left:30%; } .dot1 span:nth-child(2){ -o-transition: all 0.4s .4s ease, color .3s; -moz-transition: all 0.4s .4s ease, color .3s; transition: all 0.4s .4s ease, color .3s; left:50%; } .dot1 span:nth-child(3){ -o-transition: all 0.4s .3s ease, color .3s; -moz-transition: all 0.4s .3s ease, color .3s; transition: all 0.4s .3s ease, color .3s; left:70%; } .more_button:hover .dot1 span:nth-child(1){ left: 120%; -o-transition: all 0.4s .2s ease, color .3s; -moz-transition: all 0.4s .2s ease, color .3s; transition: all 0.4s .2s ease, color .3s; color: #fff; } .more_button:hover .dot1 span:nth-child(2){ left: 120%; -o-transition: all 0.4s .1s ease, color .3s; -moz-transition: all 0.4s .1s ease, color .3s; transition: all 0.4s .1s ease, color .3s; color: #fff; } .more_button:hover .dot1 span:nth-child(3){ left: 120%; -o-transition: all 0.4s 0s ease, color .3s; -moz-transition: all 0.4s 0s ease, color .3s; transition: all 0.4s 0s ease, color .3s; color: #fff; } /*dot2*/ .dot2 span:nth-child(1){ left:-20%; -o-transition: all 0.4s .2s ease, color .3s; -moz-transition: all 0.4s .2s ease, color .3s; transition: all 0.4s .2s ease, color .3s; color:#d1d1d1 } .dot2 span:nth-child(2){ left:-20%; -o-transition: all 0.4s .1s ease, color .3s; -moz-transition: all 0.4s .1s ease, color .3s; transition: all 0.4s .1s ease, color .3s; color:#d1d1d1 } .dot2 span:nth-child(3){ left:-20%; -o-transition: all 0.4s 0s ease, color .3s; -moz-transition: all 0.4s 0s ease, color .3s; transition: all 0.4s 0s ease, color .3s; color:#d1d1d1 } .more_button:hover .dot2 span:nth-child(1){ left:30%; -o-transition: all 0.4s .5s ease, color .3s; -moz-transition: all 0.4s .5s ease, color .3s; transition: all 0.4s .5s ease, color .3s; color: #fff; } .more_button:hover .dot2 span:nth-child(2){ left:50%; -o-transition: all 0.4s .4s ease, color .3s; -moz-transition: all 0.4s .4s ease, color .3s; transition: all 0.4s .4s ease, color .3s; color: #fff; } .more_button:hover .dot2 span:nth-child(3){ left:70%; -o-transition: all 0.4s .3s ease, color .3s; -moz-transition: all 0.4s .3s ease, color .3s; transition: all 0.4s .3s ease, color .3s; color: #fff; } .download-list{ overflow: hidden; max-width: 1180px; margin: 10px auto; } .download-list li{ display: flex; flex-wrap: wrap; height: 60px; line-height: 60px; border-bottom: 1px dashed #dcdcdc; } .download-list li .t{ width: 75%; margin: 0; line-height: inherit; font-size: 1.4em; color: #333;} .download-list li .t a{ color: inherit; overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; text-align: left;} .download-list li .t:hover{ color: #005ca2;} .download-list li .date{ width: 15%; font-size: 1.4em; color: #999; text-align: center;} .download-list li .icon{ width: 10%; position: relative;} .download-list li .icon i{ height: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); line-height: 0;} .download-list li .icon i img{ height: 100%;} @media (max-width: 1200px) { .banner { position: relative; height: 50vh; } .banner img.img-responsive { position: absolute; left: 50%; transform: translateX(-50%); min-width: 100%; max-width: none; height: 100%; animation: none; } .copyright { text-align: center; } .copyright-l { display: none; } .copyright-r { float: none; } .footer-r { float: none; width: 100%; } .f-share { text-align: center; } .f-belongs-one { line-height: 26px; text-align: center; } } /*手机菜单样式结束*/ @media (max-width: 767px){ .gf-pnav {display: none;} .gf-logo h1{margin-top:10px;} .gf-logo h1, .gf-logo h1 a {width: 188px;height: 40px;line-height: 40px;-moz-background-size:auto 40px;-o-background-size:auto 40px;background-size:auto 40px;} } @media(min-width:768px){ .buttonset{display:none;} } @media(min-width:992px){ .buttonset{display:none;} .gf-pnav a{margin-left:40px;} .m-totop, .f-footer { display: none; } i.f-arrow { display: none; } } @media (max-width: 992px) { .m-totop { line-height: 52px; font-size: 16px; color: #606060; text-align: center; background: #000; } .footer-l { padding-top: 40px; width: 100%; } .footer-l ul li { margin-right: 0; margin-bottom: 0; width: 100%; } .footer-l dt { padding-bottom: 12px; border-bottom: 1px solid #373737; margin-bottom: 8px; line-height: normal; font-weight: normal; } i.f-arrow { display: inline-block; float: right; position: relative; top: 15px; height: 11px; margin-right: 4px; vertical-align: top; } i.f-arrow img { width: 6px; vertical-align: top; } .footer-l dl, .footer-l dt, .footer-l dd { line-height: 1; } .footer-l dt a { display: inline-block; position: relative; top: 10px; margin-left: 3px; font-size: 17px; color: #6a6a6a; vertical-align: top; } .footer-l dd a { position: relative; top: -5px; line-height: 28px; } .footer-sub-menu { display: none; padding-left: 15px; } .footer-r { margin-top: 20px; } .f-belongs { padding-top: 20px; margin-top: 26px; } .copyright { padding-top: 26px; padding-bottom: 26px; margin-top: 22px; } .page-contact .top{ font-size: 2.4em; line-height: 24px; padding-bottom: 30px;} .page-contact .box .img{ width: 30%;} .page-contact .box .text{ width: 45%; padding: 0 30px;} .page-contact .box .btns{ width: 25%;} } @media (min-width: 768px) { span.br-pc { display: block; } span.br-m { display: inline; } } @media (max-width: 1200px){ .QQ_s{display: none} } @media (max-width: 768px){ .container { padding-right: 15px; padding-left: 15px; } span.br-pc { display: inline; } span.br-m { display: block; } .banner { position: relative; height: auto; } .banner img.img-responsive { position: relative; left: 0; transform: translateX(0%); min-width: 0; width: 100%; max-width: none; animation: none; } .f-share { display: none; } .f-belongs-one { line-height: 28px; text-align: right; } .f-belongs { padding-top: 0; border-top: 0; margin-top: 0; } .f-belongs-one { font-size: 15px; } .product_txt { margin-top: 90px; margin-top: 1.2rem; margin-bottom: 55px; margin-bottom: 0.733333rem; text-align: left; } .product_txt1 { margin-bottom: 30px; margin-bottom: 0.4rem; line-height: 80px; line-height: 1.066667rem; font-size: 56px; font-size: 0.746667rem; } .product_txt2 { line-height: 42px; font-size: 24px; } .footer-l { padding-top: 40px; } .footer-r { margin-top: 27px; } .copyright { padding-top: 22px; padding-bottom: 22px; margin-top: 31px; } .copyright .container { height: 16px; } .copyright-r { width: 100%; text-align: left; } .copyright-r span.cip-r { float: right; } .page-contact{ margin: 25px 0;} .page-contact .top{ font-size: 1.8em; line-height: 20px; padding-bottom: 15px; border-bottom: 1px solid #333;} .page-contact .box{ display: block; margin-top: 20px;} .page-contact .box .img{ width: 100%; height: 120px;} .page-contact .box .text{ width: 100%; padding: 15px 0;} .page-contact .box .text .t{ font-size: 1.6em;} .page-contact .box .text .p{ font-size: 1.4em; line-height: 26px; margin-top: 10px;} .page-contact .box .btns{ width: 100%; overflow: hidden;} .page-contact .box .btns a{ width: 48%; float: left;} .page-contact .box .btns a:last-child{ margin-top: 0; margin-left: 4%; font-size: 1.6em;} } @media (min-width: 768px){ .banner_txt{top:55%} .banner_txt1{font-size:36px;} .banner_txt2{font-size:16px;width:600px;margin-top:20px;line-height:30px;} } @media (min-width:992px) { .banner_txt{top:57%} .banner_txt1{font-size:40px;} .banner_txt2{width:800px;} } @media (min-width:1110px) { .banner_txt{top:55%} } @media (min-width:1200px) { .banner_txt1{font-size:45px;} .banner_txt2{width:800px;margin-top:25px;line-height:30px;} } @media (min-width:1440px) { .banner_txt{top:55%} .banner_txt1{font-size:55px;} .banner_txt2{margin-top:35px;line-height:35px;} } @media (min-width:1770px) { .banner_txt{top:50%} } @media (min-width: 768px) { .fix-nav-btm { display: none; } } @media (max-width: 768px) { html, body { } footer { padding-bottom: 28px; } .aside-nav {display: none;} .suspension {display: none;} .fix-nav-btm-all { } .content, .fix-nav-btm { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 63px; background: #0c0c0c; } .fix-nav-btm { top: auto; bottom: 0; z-index: 999; font-size: 0; text-align: center; } .fnb-one { display: inline-block; margin: 9px 5% 0; vertical-align: top; } .fnb-one-img { margin-bottom: 3px; } .fnb-one-img img { width: 28px; } .fnb-one-desc { font-size: 12px; } .fnb-one-desc img { position: relative; top: 0px; margin-left: 4px; width: 4px; } .prevnext-m { display: none; } .banner_txt { padding-right: 15px; padding-left: 15px; } .banner_txt1, .banner_txt2 { width: 100%; text-align: left; } .banner_txt1 { line-height: 80px; line-height: 1.066667rem; font-size: 56px; font-size: 0.746667rem; } .banner_txt2 { margin-top: 28px; margin-top: 0.373333rem; line-height: 42px; font-size: 24px; color: #bebebe; } .product { margin-bottom: 0; } .prevnext-m { display: table; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #d7d7d7; border-bottom: 1px dashed #888; margin-top: 10px; width: 100%; } a.prev-m, a.next-m { display: inline-block; float: left; } a.next-m { float: right; } a.prev-m i, a.next-m i { display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; background: #e4e4e4; border-radius: 50%; } a.prev-m img, a.next-m img { width: 8px; } a.prev-m span, a.next-m span { display: inline-block; margin: 0 6px; position: relative; top: 4px; font-size: 14px; color: #515151; } .about-desc { padding: 60px 15px; text-align: left; } .about-desc h2 { margin-bottom: 50px; line-height: 28px; font-size: 18px; } .about-desc h2::after { left: 0; transform: translateX(0); bottom: -18px; width: 20px; height: 2px; } .about-desc p.desc { line-height: 30px; } .news-desc { width: 100%; padding: 20px 15px; } .news-desc .time { text-align: center; padding-bottom: 10px; } .news-desc .time p { padding: 0 25px; display: inline-block; } .news-desc h2 { margin-bottom: 20px; text-align: center; font-size: 20px; font-weight: bold; color: #333; } .news-desc .wenzhang { border-top: 1px dashed #dedede; line-height: 35px; font-size: 16px; padding-top:20px; padding-bottom: 10px; border-bottom: 1px solid #dedede; } .news-desc .keywords { font-size: 14px; padding-top: 30px; line-height: 28px; } .news-desc .keywords a { color: #828282; } .news-desc .keywords a:hover { color: #006fb7; } .news-desc .wenzhang p { padding-bottom: 10px; text-align: justify; } .news-desc .wenzhang img { text-indent: 0; width: 100%; } .download-list li{ height: 50px; line-height: 50px;} .download-list li .t{ width: 63%; font-size: 1.4em; padding-right: 5px;} .download-list li .date{ width: 22%; font-size: 1.2em;} .download-list li .icon{ width: 15%;} .download-list li .icon i{ height: 50%;} } @media (max-width: 544px) { .banner{ height: 100vh; height: calc(100vh - 126px); margin-top: 63px; } .banner_txt{ top: 50%; } .banner_txt2 { line-height: 50px; line-height: 0.666667rem; font-size: 30px; font-size: 0.4rem; color: #bebebe; } .product_txt2 { line-height: 50px; line-height: 0.666667rem; font-size: 30px; font-size: 0.4rem; } }