@charset "utf-8"; @font-face { font-family: 'geoslab703_md_btmedium'; src: url('../fonts/geo703m-webfont.eot'); src: url('../fonts/geo703m-webfont.eot') format('embedded-opentype'), url('../fonts/geo703m-webfont.woff2') format('woff2'), url('../fonts/geo703m-webfont.woff') format('woff'), url('../fonts/geo703m-webfont.ttf') format('truetype'), url('../fonts/geo703m-webfont.svg#geoslab703_md_btmedium') format('svg'); font-weight: normal; font-style: normal; } html { overflow-x: hidden !important; } /* 设置默认字体 */ 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:#e00013; -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: 0 7px; font-size: 12px; } } /*QQ在线客服*/ /*.QQ_s{width:135px;height:102px;position:fixed;right:10px;top:100px;z-index:9999999} .QQ_y{width:135px;overflow:hidden;overflow:hidden;height:102px} .QQ_x{width:135px;height:295px;overflow:hidden;background:url(../images/qq_s_03.png) no-repeat;display:none;padding-top:110px} .qq_i{width:84px;height:30px;overflow:hidden;overflow:hidden;background:url(../images/qq_s_i_03.jpg) no-repeat;display:block;margin:0 auto;color:#fff;line-height:220%;text-indent:28px;font-size:13px;margin-bottom:5px} .qq_i:hover{color:#fff}*/ .gf-logo h1{width: 146px;height: 50px;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 50px;-o-background-size: auto 50px;background-size: auto 50px;height:50px;width:524px;} .gf-logo h1 a:focus { outline: none; } /*------------------------------- 侧边栏 -------------------------------------*/ .aside-nav { position: fixed; right: 7px; top: 50%; transform:translateY(-50%); z-index: 10000; } .aside-nav-close { margin: 0 auto; width: 54px; height: 54px; line-height: 52px; background: #e75c1e; border-radius: 50%; text-align: center; visibility: visible; cursor: pointer; } .aside-nav-in.close { transform: translateX(100px); visibility: hidden; transition: .3s; } .aside-nav-one { position: relative; margin-top: 6px; margin-bottom: 6px; height:54px; width:54px; line-height: 52px; text-align: right; } .aside-nav-one-img { position: absolute; left: 0; top: -1px; z-index: 10; width: 54px; height: 54px; text-align: center; transition: .3s; } .aside-nav-one-img img{ width: 22px; } .more-width:hover .aside-nav-one-img { left: -73px; } .more-width-call:hover .aside-nav-one-img { left: -102px; } .aside-nav-one-desc { position: absolute; right: 0; padding-right: 16px; width: 54px; height: 54px; font-size: 14px; line-height: 52px; background: #e00012; color: #e00012; border-radius: 50px; overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: .3s, color .1s; } .aside-nav-one-desc .qq-name{ display: inline-block; margin-right: 15px; } .aside-nav-one-desc .qq-name i{ width: 22px; height: 24px; display: inline-block; vertical-align: middle; } .aside-nav-one-desc .qq-name span{ display: inline-block; vertical-align: middle; } .qq-name-box{ position: absolute; right: 0px; } .more-width:hover .aside-nav-one-desc { width: 125px; color: #fff; transition: .3s; } .more-width-call:hover .aside-nav-one-desc { width: 156px; } .more-width-qq:hover .aside-nav-one-desc { width: 281px; } .more-width-qq:hover .aside-nav-one-desc span{ transition:.3s .1s; color: #fff; } .more-width-qq:hover .aside-nav-one-img{ left: -223px; } .aside-nav-one-qrcode { position: absolute; left: -200px; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: .3s; } .aside-nav-one:hover .aside-nav-one-qrcode { left: -140px; opacity: 1; visibility: visible; } /*------------------------------- 侧边栏end -------------------------------------*/ .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: 15px; 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:#e00013; -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: #e00012; border: 1px solid #e00012; } .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: #0275b4; } .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: #ffffff; } .footer-l dd { } .footer-l dd a { line-height: 32px; font-size: 14px; color: #ffffff; 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; /*border-top: 1px solid #373737;*/ margin-top: 25px; } .f-belongs-one { line-height: 32px; font-size: 14px; color: #ffffff; text-align: right; } .copyright { position: relative; padding-top: 35px; padding-bottom: 35px; margin-top: 32px; } .copyright::before { content: ' '; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 1px; background: #363636; } .copyright-l { display: inline-block; width:50%; /*width: calc(100% - 360px);*/ 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: 21px;*/ line-height: 16px; font-size: 12px; color: #ffffff; } .copyright-l > ul > li { margin-right: 55px; font-size: 12px; } .copyright-l > ul > li a { color: #ffffff; transition: .3s; } .copyright-l > ul > li a:hover { color: #c1c1c1; } .copyright-r { float: right; font-size: 12px; color: #ffffff; } .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: #d51b32; } .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; } /*fixed头部样式*/ .navbar-fixed { position: fixed; top: -70px; opacity: 0; filter: alpha(opacity:0); background: #fff; /*background: transparent;*/ height: 70px; 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: 24px; margin-left: 40px; font-size: 15px; 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:#e00013; -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; } .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:active { transform: translateY(1px); }*/ .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: #e00012; } .btn-circle-hover { opacity: 0; } .btn-circle-click { /*background: #99000c;*/ 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: #e00012; color: #fff; border: 1px solid #e00012; } .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(#e00012, #f00,#e00012,#f00,#e00012,#f00,#e00012,#f00,#e00012); background: -o-radial-gradient(#e00012, #f00,#e00012,#f00,#e00012,#f00,#e00012,#f00,#e00012); background: radial-gradient(#e00012, #f00,#e00012,#f00,#e00012,#f00,#e00012,#f00,#e00012); 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; } @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: 768px){ .gf-pnav {display: none;} .gf-logo h1{margin-top:10px;} .gf-logo h1, .gf-logo h1 a {width: 260px;height: 40px;line-height: 40px;-moz-background-size:auto 40px;-o-background-size:auto 40px;background-size:auto 30px;} } @media(min-width:769px){ .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: 8px;*/ margin-bottom: 0; width: 100%; } .footer-l dt { padding-bottom: 12px; border-bottom: 1px solid #ffffff; margin-bottom: 8px; line-height: normal; font-weight: normal; } i.f-arrow { display: inline-block; float: right; position: relative; top: 15px; height: 11px; /*margin-top: 6px;*/ 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: #ffffff; 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; } } @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){ /*.banner> img{height:300px;width:auto;}*/ .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; } .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 { display:none; } .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; } } @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: 1366px) { .gf-pnav a { margin-left: 30px; } } @media (max-width: 768px) { html, body { /*height:100%;*/ /*overflow: auto;*/ /*overflow-x: hidden;*/ /*margin: 0;*/ /*transform: translate3d(0, 0, 0);*/ /*-webkit-overflow-scrolling : touch;*/ } .aside-nav {display: none;} .fix-nav-btm-all { } .content, .fix-nav-btm { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 63px; background: #036194; /*overflow-x: hidden;*/ /*transform: translate3d(0, 0, 0);*/ /*-webkit-overflow-scrolling : touch;*/ } .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: 80px; 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: #ffffff; } .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; } } @media (max-width: 650px) { .copyright{ margin-top:20px;} .copyright-r{ text-align:center; line-height:26px;} .copyright .container{ height:auto;} .copyright-r span.cip-r{ float:none; text-align:center; display:block;} } @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; } .f-belongs-one { font-size: 13px; line-height:25px; } } @font-face { font-family: gothic; src: url('../fonts/GOTHIC.TTF') } @font-face { font-family: gothicb; src: url('../fonts/gothicb.ttf') }