body{ font-size: 16px; font-family: "Microsoft YaHei","PingFangSC-Regular","Helvetica","Droid Sans","Arial","sans-serif"; transition: 500ms; position: relative; overflow-x: hidden; height: 100%; } /* 过渡 */ .tran_mask{ width: 100%; height: 100%; padding-top: 10%; position: fixed; left: 0; top: 0; background-color: #fff; z-index: 10000; } .hide_mask{ -webkit-animation: hide_mask; animation: hide_mask; -webkit-animation-delay: 2s; animation-delay: 2s; animation-fill-mode: both; -webkit-animation-fill-mode: both; overflow: hidden; } @keyframes hide_mask { 100% { height: 0;width:0;} } @-webkit-keyframes hide_mask { 100% { height: 0;width:0;} } /* tools-start */ .mg_auto{ margin: 0 auto; } .tl_pd_50{ padding-top: 50px; } .tl_pos_f{ position: fixed; } .tl_col_999{ color: #777 !important; } .tl_2em{ text-indent: 2em; } .delay-1{ animation-delay: .2s; -webkit-animation-delay: .2s; } .delay-2{ animation-delay: .4s; -webkit-animation-delay: .4s; } .delay-3{ animation-delay: .6s; -webkit-animation-delay: .6s; } .delay-4{ animation-delay: .8s; -webkit-animation-delay: .8s; } .delay-5{ animation-delay: 1s; -webkit-animation-delay: 1s; } .line_bottom{ background: url(../img/sign_line.png) repeat-x left bottom; } /* tools-end */ /* 公用样式 */ /*头部*/ .gb_header{ top: 0; width: 100%; background-color: transparent; /*height: 500px;*/ /*background: url(../../img/bg_1.jpg) no-repeat top center / cover; background-attachment:fixed;*/ } .gb_logobox{ position: relative; z-index: 100; } .gb_logobox .navbar-toggle{ margin-top: 28px; } .navbar{ margin-bottom: 0; } .navbar-brand{ /*background: url(../../img/logo.png) no-repeat center center;*/ background-size: contain; width: 200px; height: 100px; z-index: 10001; } .navbar-brand img{ width: 120%; } .gb_navbar{ position: relative; z-index: 10; } .gb_navbar a{ color: #fff; /*font-weight: 600;*/ } .gb_navbar .nav>li>a:hover{ background-color: rgba(0,164,234,0.5) ; } @media (min-width: 768px){ .navbar-nav>li>a { height: 100px; line-height: 100px; padding: 0 15px; } } .icon-bar{ background-color: #fff; } /*7联系我们*/ /*页脚*/ .gb_foot{ /*margin-top: 50px;*/ color: #afafaf; padding: 20px 0; background-color: rgba(0,0,0,0.5); } .gb_foot .pany_scaller{ height: 130px; overflow: hidden; } /* 设置滚动条的样式 ::-webkit-scrollbar { width: 12px; } 滚动槽 ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 3px; } 滚动条滑块 ::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(55,250,24,0.4); } ::-webkit-scrollbar-thumb:hover{ background-color:rgba(25,80,0,0.4); -webkit-border-radius:4px; } */ .ft_left h4{ color: #fefefe; } .ft_left dl dd{ border-bottom: 1px dashed #888; line-height: 24px; padding: 5px 0; } .ft_left dl dt{ line-height: 22px; margin: 15px 0 0; } .ft_left .ft_contact{ margin-top: 20px; } .ft_left .ft_contact .gb_ewm{ width: 40px; height: 40px; background-color: #ff1; position: relative; } .ft_left .ft_contact .gb_ewm img{ width: 100%; height: auto; } .ft_left .ft_contact .gb_ewm .ewmbox{ position: absolute; width: 0; height: 0; left: 25px; top: 25px; } .ft_clums{ } @media (min-width: 768px){ .ft_clums{ /*margin-right: -90px;*/ position: relative; right: -8%; } } @media (max-width: 768px){ .ft_clums dl{ padding-top: 26px; } } @media (min-width: 992px){ .line_border{ position: relative; } .line_border::after{ content:""; position: absolute; top: 0; right: 20%; width: 1px; height: 100%; background: url(../img/line.png) repeat-y top right; } } .ft_clums dt{ color: #fefefe; font-weight: 500; margin-bottom: 20px; } .ft_clums dd a{ color: #afafaf; line-height: 24px; } /* 页脚 */ .footer{ background-color: #020204; color: #afafaf; padding: 15px 0; } /* 公用结束 */ /* 响应式适配样式 */ @media (max-width: 992px){ .navbar-brand{ /*margin: 0 auto;*/ } /*.navbar-right{ display: none; }*/ .gb_header .container{ width: 100%; /*margin-left: 0;*/ } .gb_header .nav>li>a{ font-size: 14px; } .navbar-brand{ width: 160px; height: 80px; /*margin: 10px 0 0 20px;*/ } .gb_banner{ /*margin-top: 0;*/ } } @media (max-width: 767px){ .navbar-right{ display: block; } .gb_banner{ margin-top: 0; } .icon-bar{ background-color: #666; } .gb_header .nav>li>a{ background-color: #fff; color: #666; } .gb_navbar .nav>li>a:hover{ background-color: rgba(190,190,190,0.5) ; } .gb_header .nav>li{ border-bottom: 1px solid #aaa; } .gb_header .nav li:last-child{ border-bottom: none; } .navbar-nav{ margin-bottom: 0; } .navbar-brand{ width: 160px; height: 80px; } } /* 过渡动画 */ #loading{ height: 500px; width: 100%; margin-bottom: 300px; /*position: ;*/ z-index: 1; margin-top: 0px; top: 0px; } #loading-center{ width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; height: 150px; width: 150px; margin-top: -75px; margin-left: -75px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .object{ width: 20px; height: 20px; background-color: #00a3ea; position: absolute; left: 65px; top: 65px; -moz-border-radius: 50% 50% 50% 50%; -webkit-border-radius: 50% 50% 50% 50%; border-radius: 50% 50% 50% 50%; } .object:nth-child(2n+0) { margin-right: 0px; } #object_one { -webkit-animation: object_one 2s infinite; animation: object_one 2s infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } #object_two { -webkit-animation: object_two 2s infinite; animation: object_two 2s infinite; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } #object_three { -webkit-animation: object_three 2s infinite; animation: object_three 2s infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } #object_four { -webkit-animation: object_four 2s infinite; animation: object_four 2s infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } #object_five { -webkit-animation: object_five 2s infinite; animation: object_five 2s infinite; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } #object_six { -webkit-animation: object_six 2s infinite; animation: object_six 2s infinite; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } #object_seven { -webkit-animation: object_seven 2s infinite; animation: object_seven 2s infinite; -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } #object_eight { -webkit-animation: object_eight 2s infinite; animation: object_eight 2s infinite; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } #object_big{ background-color: #e60012; position: absolute; width: 50px; height: 50px; left: 50px; top: 50px; -webkit-animation: object_big 2s infinite; animation: object_big 2s infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes object_big { 50% { -webkit-transform: scale(0.5); } } @keyframes object_big { 50% { transform: scale(0.5); -webkit-transform: scale(0.5); } } @-webkit-keyframes object_one { 50% { -webkit-transform: translate(-65px,-65px) ; } } @keyframes object_one { 50% { transform: translate(-65px,-65px) ; -webkit-transform: translate(-65px,-65px) ; } } @-webkit-keyframes object_two { 50% { -webkit-transform: translate(0,-65px) ; } } @keyframes object_two { 50% { transform: translate(0,-65px) ; -webkit-transform: translate(0,-65px) ; } } @-webkit-keyframes object_three { 50% { -webkit-transform: translate(65px,-65px) ; } } @keyframes object_three { 50% { transform: translate(65px,-65px) ; -webkit-transform: translate(65px,-65px) ; } } @-webkit-keyframes object_four { 50% { -webkit-transform: translate(65px,0) ; } } @keyframes object_four { 50% { transform: translate(65px,0) ; -webkit-transform: translate(65px,0) ; } } @-webkit-keyframes object_five { 50% { -webkit-transform: translate(65px,65px) ; } } @keyframes object_five { 50% { transform: translate(65px,65px) ; -webkit-transform: translate(65px,65px) ; } } @-webkit-keyframes object_six { 50% { -webkit-transform: translate(0,65px) ; } } @keyframes object_six { 50% { transform: translate(0,65px) ; -webkit-transform: translate(0,65px) ; } } @-webkit-keyframes object_seven { 50% { -webkit-transform: translate(-65px,65px) ; } } @keyframes object_seven { 50% { transform: translate(-65px,65px) ; -webkit-transform: translate(-65px,65px) ; } } @-webkit-keyframes object_eight { 50% { -webkit-transform: translate(-65px,0) ; } } @keyframes object_eight { 50% { transform: translate(-65px,0) ; -webkit-transform: translate(-65px,0) ; } }