/* css reset */ @mixin arrow($arrow_width:16px,$arrow_height:2px,$rotate:25,$arrow_bg:#c44344){ span{ position:absolute; display:block; width:$arrow_width; height:$arrow_height; background:$arrow_bg; left:6px; } .first{ top: 8px; transform: rotate(25deg); transform-origin: 0 0; left: 13px; width: 10px; } .second{ top:50%; margin-top:-1px; } .third{ transform: rotate(-25deg); transform-origin: 0 0; left: 12px; width: 10px; bottom:8px; } } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,address{ padding:0; margin: 0;} table{border-collapse:collapse; border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} caption, th {text-align: left;} q:before,q:after{content:'';} .clear { clear:both; height:0; overflow:hidden;} .img-list:after,.clearfix:after{ content:''; display:block; clear:both; height:0; visibility:hidden;} .hide { display:none;} li{list-style: none;} input, button,textarea,select{font-family:'Microsoft Yahei','ËÎÌå',arial,sans-serif; font-size:14px; color:#333;-webkit-appearance:none;} img{vertical-align:top;max-width:100%;height:auto;} *{box-sizing:border-box;} /* global */ html{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family:'Microsoft Yahei','ËÎÌå',arial,sans-serif; font-size:14px; color:#4c4c4c; line-height:22px;} h1 { font-size:30px;font-weight:normal;} h2 { font-size:24px;font-weight:normal;} h3 { font-size:20px;font-weight:normal;} h4 { font-size:18px;font-weight:normal;} h5 { font-size:16px;font-weight:normal;} h6 { font-size:14px;font-weight:normal;} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family:'Microsoft Yahei','ËÎÌå',arial,sans-serif;} a { color:#4c4c4c; text-decoration:none; outline:none;transition: all 0.3s linear;} /*a:visited { color:#cc0000; text-decoration:none; outline:none;}*/ a:hover { color:#cc0000; text-decoration:underline; outline:none;} a:active,a:focus { outline:none;} sup {vertical-align: text-top;} sub {vertical-align: text-bottom;} em {font-style: italic;} strong {font-weight:normal;} .container{width:1230px;margin:0 auto;padding:0 15px;} body{font-family: 'Microsoft Yahei', '宋体';position:relative;} .home{color:#fff;background:#172435;} header{ .logo{float:left;margin-top:20px;} .container{width:auto;} .header-right{float:right;} .inner{position:fixed;left:0;top:0;width:100%;background:#101924;height:80px;z-index:999;opacity:0.9;} .closed{ .nav{ overflow:hidden; >ul{ transform: translate3d(100%,0px,0px); } } .collapse{ .first{ left:6px; width:16px; transform: rotate(0deg); } .third{ left:6px; width:16px; transform: rotate(0deg); } } } .nav{ float:right; >ul { transition: all 0.3s linear; transform: translate3d(0px,0px,0px); > li { position:relative; margin-right: 10px; float: left; &:hover{ .sub-menu{display:block;} } > a { color: #fff; font-size: 14px; line-height:77px; padding: 0 18px; display:block; border-top: 3px solid transparent; &:hover { border-top-color: #c44344; text-decoration:none; color:#ea6153; } } } .sub-menu{ display:none; padding:0 10px; position:absolute; left:0; top:100%; background:#101923; li{ &.last{border-bottom:0 none;} border-bottom:1px solid #71767c; } a{ font-size:12px;color:#fff;white-space: nowrap;padding:10px 5px;line-height:30px;display:block; &:hover{ text-decoration:none; color:#ea6153; } } } } } .collapse{ border:2px solid #c44344; float:right; height:32px; width:32px; background:#101924; border-radius:4px; position:relative; margin-top:23px; span{ position:absolute; transition: all 0.3s linear; display:block; width:16px; height:2px; background:#c44344; left:6px; } .first{ top:6px; transform: rotate(45deg); transform-origin: 0 0; left:15px; width:10px; } .second{ top:50%; margin-top:-1px; } .third{ transform: rotate(-45deg); transform-origin: 0 0; left:13px; width:10px; bottom:5px; } &:hover{ border-color:#ea6153; span{ background:#ea6153; } } } } .img-list{ li{ float:left; } } .sub-banner { padding: 165px 0 110px; .container{ text-align: center; color: #fff; h1{ font-size: 48px; letter-spacing: 4px; line-height: 1em; } p{ font-size: 16px; margin: 30px auto 0; line-height: 25px; color: #fff; letter-spacing: 1px; max-width: 800px; } } } .sticy-menu{ position:fixed; right:25px; top:50%; z-index: 999; li{ position:relative; padding-bottom:35px; a{display:block;overflow:hidden;} &:after{ position:absolute; top:28px; right:10px; content:""; width:2px; height:22px; display:block; background:url(../images/sticy-bg.png) no-repeat center top; } span{ display:block; float:right; height:22px; background:#101924; color:#fff; width:22px; text-align:center; font-size:14px; font-weight:bold; } .full{ display:none; } &.active{ span{display:none;} .full{ display:block; text-align:right; padding:0 5px; width:auto; } } &.last{ &:after{display:none;} } } } .section-bgc{ overflow:hidden; z-index: 3; position:absolute; left:0; top:0; background:#172435; >div{position:relative;} .layer{position:relative!important;} img{vertical-align:top;display:block;} .bg-about{height:780px;} } .home{ .banner{ overflow:hidden; .section-bg{ position:absolute!important; background:url(../images/homebg_banner.jpg) no-repeat center top; height:100%; } padding-top:0; .container{ position:relative; padding-top:0; height:100%; } .text{ text-align:center; width:640px; position:absolute; left:50%; margin-left:-320px; bottom:110px; } h2{ height:57px; background:url(../images/banner_logo.png) no-repeat center; margin-bottom:30px; background-size: auto 100%; } h3{ font-size:30px; margin-bottom:105px; line-height:1; } span{ border:1px solid #fff; border-radius:5px; display:inline-block; line-height:66px; padding:0 55px; font-size:28px; } .line{ width: 2px; height: 205px; /* background: #57626d; */ overflow: hidden; margin: 0 auto; .line-inner{ width: 1px; height: 205px; /* background: #57626d; */ overflow: hidden; margin: 0 auto; /* padding-right: 1px; */ border-left: 1px solid #57626d; margin-top: -5px; } } a{ display:block; width:40px; height:80px; border-radius:25px; border:3px solid #c44344; color:#c44344; margin:-50px auto 0; font-size:30px; .fa{width:20px;height:30px;margin-top:25px;} /* &:hover{ border-color:#e09c9d; color:#e09c9d; box-shadow: 0 0 13px rgba(255,255,255,.6); } */ } } } .home{ .main{z-index:9;position:relative;} } .section{ .section-bg{ height:100%; width:100%; position:absolute!important; left:0; top:0; } position:relative; .container{ position:relative; } .title{ font-size:30px;color:#fff;text-align:center;line-height:1.2;margin-bottom:10px; a{ font-size:30px;color:#fff; &:hover{ color:#ea6153; text-decoration:none; } } } .sub-title{color:#506781;font-size:24px;text-align:center;display:block;margin-bottom:38px;} } .solution{ position:relative; .sub-title{ margin-bottom:25px; } .fp-tableCell{ vertical-align:bottom; } .section-bg{ position:absolute!important; background:url(../images/homebg_solution.jpg) no-repeat center top; height:100%; } .inner{ background:url(../images/solution_bg.png) center bottom no-repeat; height:100%;width:100%;position:absolute;left:0;bottom:0; } .container{ position:relative; } .tab{ margin:0 auto 15px; width:570px; li{ float:left; margin-top:40px; a{ background:#101924; display:block; transform:skew(-20deg,0deg); &:hover{text-decoration:none;} span{ transform:skew(20deg,0deg); display:block; color:#69788b; font-size:24px; height:62px; padding:0 60px; line-height:60px; } } &.active{ a{ background:#c44344; span{ color:#fff; } } } &.line{ transform:skew(-20deg,0deg); width:2px; height:140px; background:#c44344; overflow:hidden; margin:0; } &.first{margin-top:35px;margin-right:-2px;} &.second{margin-top:57px;margin-left:-6px;} } } .tab-content{ .tab-pane{ img{vertical-align:middle;} display:none; &.active{ display:block; } p{ text-align: center; font-size:14px; color:#babec3; margin-bottom:5px; padding:0 225px; } } } } .service{ .section-bg{ position:absolute!important; background:url(../images/homebg_service.jpg) no-repeat center top; height:100%; } .img-list{ margin:0 -30px; li{ width:33.333%; padding:0 30px; .inner{ position: relative; } } .img-box{ border-bottom:2px solid #c44344; img{ width:100%;height:auto; } } .text-box{ padding:32px 40px; background:#101924; } .tip{ position: absolute; height: 80px; width: 150px; overflow: hidden; bottom: 0px; left: 5px; span{ position:absolute; color: #1a2531; font-size: 100px; display: inline-block; top: 0; line-height: 90px; } } .more{ color:#fff; font-size:24px; display:block; margin-bottom:25px; line-height:34px; overflow:hidden; &:hover{ padding:0 10px; text-decoration: none; .icon-arrow-right{ background:#c44344; } span{ background:#101924; } } } .icon-arrow-right{ transition: all 0.3s linear; border:2px solid #c44344; float:right; height:32px; width:32px; border-radius:50%; position:relative; span{ position:absolute; display:block; width:16px; height:2px; background:#c44344; left:6px; } .first{ top: 8px; transform: rotate(35deg); transform-origin: 0 0; left: 15px; width: 8px; } .second{ top:50%; margin-top:-1px; } .third{ transform: rotate(-35deg); transform-origin: 0 0; left: 14px; width: 8px; bottom:8px; } } p{ color:#babec3; line-height:24px; height:264px; } } } .success{ .section-bg{ position:absolute!important; background:url(../images/homebg_success.jpg) no-repeat center top; height:100%; } .sub-title{ margin-bottom:60px; } .swiper-wrapper{ width:100%;position:relative; li{width:33.3333%;float:left;} .img-box{ margin-bottom:20px; box-shadow: 0 3px 10px rgba(0,0,0,0.5); background:#fff; height:300px; overflow: hidden; text-align:center; img{ width:100%; vertical-align:middle; } } .text-box{ background:#101923; padding:20px; p{ height:88px; overflow:hidden; } h5{ font-size:24px; margin-bottom:20px; position:relative; line-height:28px; padding-bottom:10px; &:after{ content:""; width:35px; height:3px; background:#c44344; bottom:0; left:0; position:absolute; } } .text-right{ text-align:right; } .more{ color:#fff; i{margin-right:10px;} &:hover{ text-decoration: none; color: #c00; } } } } } .partner{ .section-bg{ position:absolute!important; background:url(../images/homebg_partner.jpg) no-repeat center top; height:100%; } .partner-skew{ position:relative; &:before{ content:""; transform:rotateZ(177deg); width:145px; height:145px; overflow:hidden; position:absolute; left:-23px; top:-88px; background:url(../images/skew_line.png) no-repeat center; } &:after{ content:""; width:145px; height:145px; overflow:hidden; position:absolute; right:-20px; bottom:-76px; background:url(../images/skew_line.png) no-repeat center; } } .more{ position:absolute; right:41px; bottom:-65px; width:48px; height:48px; text-indent:0; z-index:9; text-indent:-9999em; background:url(../images/icon-add-half.png) no-repeat center; } .img-list{ margin:0 -5px; li{ width:20%; padding:0 5px; margin-bottom:10px; .inner{ border:2px solid #fff; height:244px; position:relative; &:hover{ .img-box{ display:block; } .num{ i{background-position:center -19px;} color:#101924; } .des{display:none;} } } .img-box{ line-height:240px; text-align:center; background:#fff; img{ vertical-align: middle; } &:hover{ background:none; } } .num{ display: none; font-size:18px; position:absolute; left:20px;top:30px; i{ display:block; width:22px; height:25px; margin:0 auto; background:url(../images/icon_num.png) center 6px no-repeat; } } .des{ font-size:24px; position:absolute; left:20px; bottom:12px; line-height:28px; span{ display:block; } } } } } .footer{ .section-bg{ position:absolute!important; background:url(../images/homebg_about.jpg) no-repeat center top; height:100%; } .decr{ p{ color:#babec3; text-indent:2em; line-height:24px; } } .more{ display:block; height:40px; width:120px; margin:25px auto 35px; line-height:36px; border:2px solid #fff; border-radius:4px; padding:0 25px; color:#fff; font-size:16px; &:hover{ background:#fff; color:#101923; text-decoration:none; } } .footer-bottom{ .left-box,.right-box{ float:left; border-top:2px solid #c44344; background:#101923; } .left-box{ padding:40px 50px; width:470px; margin:60px -50px 0 0; } .right-box{ padding:40px 150px 30px; width:730px; } ul{ li{ border-bottom:1px solid #323941; margin-bottom:10px; h4{ font-size:24px; line-height:1.2; margin-bottom:10px; a{ font-size:24px; color:#fff; &:hover{ text-decoration: none; color: #c00; } } } span{ display:block; margin-bottom:10px; color:#babec3; font-size:16px; } a{ color:#babec3; font-size:16px; display:inline-block; margin-bottom:10px; &:hover{ text-decoration: none; color: #c00; } } } } } .copyright-box{ .container{padding-top:0;} background:#101924; padding:17px 0; p{ color:#3a4d63;text-align:center; } } } .home{ .footer{ .copyright-box{ position:absolute; left:0;bottom:0;width:100%; } } } .aw-animation{ opacity: 0; } .img-box.aw-animation.animated.fadeInDown{ margin-left: -35px; } .aw-animation.animated{ opacity: 1; } .about-page{ .sub-banner{ background:url(../images/banner20210719.jpg) no-repeat center; background-size:auto 100%; } h3{ font-size:24px;font-weight:bold;color:#333; } .title{ padding-bottom:15px; border-bottom:1px solid #e1e1e1; margin-bottom:25px; } .text-img{ .img-box{ float:left; width:36.666%; } .text-box{ float:left; width:63.333%; padding:45px 0 0 60px; color:#666; li{ margin-bottom:24px; line-height:24px; } } } .enterprise{ .container{ padding-top:75px; padding-bottom:50px; } .title-line-center{ margin-bottom:60px; } .text-content{ padding:25px 0 60px 460px; min-height:350px; background:url(../images/computer.png) no-repeat left bottom; p{ font-size:16px; color:#666; line-height:26px; margin-bottom:25px; } } } .title-line-center{ font-weight:bold; padding-bottom:15px; text-align:center; position:relative; &:after{ content:""; display:block; width:30px; height:4px; background:#c44344; position:absolute; left:50%; margin-left:-15px; bottom:0; } } .decr-quotes{ padding:0 70px; font-size:16px; font-weight:bold; margin-bottom:45px; position:relative; &:before{ content: "\""; top: 35px; left: 0px; position: absolute; color: #d9dadc; font-size: 120px; } &:after{ content: "\""; bottom: -35px; right: 0px; position: absolute; color: #d9dadc; font-size: 120px; } } .enterprise-decr{ background:#f2f2f2; padding:80px 0; .img-list{ margin:0 -15px; li{ width:33.333%; text-align:center; padding:0 15px; .img-box{ margin-bottom:15px; } } h5{ font-size:24px; margin-bottom:15px; } p{ padding:0 20px; } } } .enterprise-purpose{ padding:60px 0; } .enterprise-active{ padding:60px 0; .text-box{ float:left; padding:45px 60px 0 0; } .img-box{ float:right; } } .five-a{ color:#fff; height:300px; padding:55px 0 0; background:url(../images/five_a.jpg) no-repeat center; h3{ color:#fff; text-align:center; position:relative; line-height:1; padding-bottom:15px; margin-bottom:35px; &:after{ content:""; display:block; width:30px; height:4px; background:#fff; position:absolute; left:50%; margin-left:-15px; bottom:0; } } ul{ padding:0 100px; li{ span{ font-size:25px; color:#2f4064; display:inline-block; width:36px; text-align:right; opacity:0.8; background:#577ca1; margin-right:20px; font-weight:bold; line-height:26px; } line-height:24px; width:33.333%; float:left; font-size:18px; text-transform:capitalize; padding:13px 0; } } } .swiper-news{ padding:40px 0 35px; .container{ position:relative; } #prev{ width:33px; height:62px; background:url(../images/slider_arrow_left.png) no-repeat center; position:absolute; left:0; top:90px; z-index:9; cursor:pointer; } #next{ width:33px; height:62px; background:url(../images/slider_arrow_right.png) no-repeat center; position:absolute; right:0; top:90px; z-index:9; cursor:pointer; } } .news-box{ background-color: #f2f2f2; padding-top: 50px; .news-list{ margin-bottom:35px; li{ width:33.333%; } } .btn{ height:40px; width:300px; text-align:center; font-size:16px; color:#666; line-height:40px; display:block; margin:0 auto; border:1px solid #ccc; .fa{ font-size:22px; margin-top:-4px; vertical-align:middle; margin-left:20px; } } } .swiper-c{ margin: 0 50px; position: relative; overflow: hidden; z-index: 1; .swiper-button-disabled{ cursor: default; } } .join-us{ .container{ padding-top:50px; .title-line-center{ margin-bottom:55px; } } dt{ font-size:24px; color:#333; border-bottom:1px solid #e5e5e5; line-height:1; padding-bottom:18px; margin-bottom:40px; } dd{ span{ float:left; height:42px; line-height:40px; border:1px solid #ccc; padding:0 30px; font-size:16px; margin:0 40px 40px 0; } } } .contact{ border-top:1px solid #c44344; background:#f2f2f2; padding:24px 0 25px; text-align:center; color:#333; font-size:16px; // a{ // color:#666; // } margin-bottom:160px; span { margin: 0 25px; } } } .news-list{ li{ .img-box{ margin-bottom:15px; img{ width:100%; } } .tag{ font-size:16px; display:block; line-height:28px; } h5{ margin-bottom:3px; a{ font-size:16px; } } .time{ color:#999; font-size:12px; display:block; margin-bottom:20px; } p{ color:#666; line-height:22px; margin-bottom:40px; height:66px; overflow:hidden; } .text-box{ overflow:hidden; } .more{ float:right; color:#666; .fa{ margin-right:5px; margin-top:-2px; font-size:20px; vertical-align:middle; } } } } .modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .modal-open { .modal { overflow-x: hidden; overflow-y: auto; } } .modal{ &.fade{ .modal-dialog { -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } } } .modal{ &.in{ .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } } #recruit_info{ .modal-dialog { max-width: 700px; margin:230px auto; position: relative; z-index: 1050; } } #recruit_info { .modal-dialog{ .modal-content { min-height:400px; position: relative; background-color: #ffffff; border: 1px solid #999999; border-radius: 6px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); -webkit-background-clip: padding-box; background-clip: padding-box; outline: 0; } } } .modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal-backdrop{ &.fade { opacity: 0; filter: alpha(opacity=0); } } .modal-backdrop{ &.in { opacity: 0.5; filter: alpha(opacity=50); } } #recruit_info{ .modal-dialog{ .close { background: url(../images/modal_close.png) no-repeat right top; margin:10px } .modal-content{ .modal-body{ h4{ font-size:18px; font-weight: bold; } span{ font-size:16px; font-weight: bold; } line-height: 30px; font-size: 15px; padding: 20px 40px; position: relative; } } } } // @media (max-width: 1440px){ .activity .img-list li { height: 220px; margin-right: 18px; } } @media(max-width:1441px){ header{ .logo{ width:145px;margin-top:15px; } .inner{ height:60px; } .collapse{ margin-top:14px; } .nav{ >ul{ > li{ > a{ line-height:57px; } } } } } .home{ background:#162636; .banner{ h2{ height: 40px; margin-bottom:20px; } h3 { font-size: 21px; margin-bottom:70px; } span{ padding: 0 40px; font-size:20px; line-height:50px; border-width:1px; } .line{ height:120px; .line-inner{ height: 106px; } } a{ width:32px;height:56px;border-width:2px;font-size:24px; .fa{ margin-top:16px; } } .text{ top:auto; margin-top:0; bottom:80px; } } } .section{ .title{ font-size:20px; a{ font-size:20px; } } .sub-title{ font-size:16px; } } .solution{ .sub-title{ margin-bottom:10px; } .inner{ background-size:100% auto; } .tab-content{ .tab-pane{ p{ margin-bottom:0; } .img-box{ width:690px;margin:0 auto; img{ margin-left:-57px; } } } } .tab{ width:350px;margin-bottom:10px; li{ &.line{ height:85px; } a{ span{ line-height:44px; height:44px; font-size:16px; padding:0 35px; } } &.first{ margin-top:12px; margin-right:-5px; } &.second{ margin-top:24px; margin-left:-2px; } } } } .service{ .container{ margin-bottom:0; margin-top:25px; } .sub-title{ margin-bottom:20px; } .img-list{ margin:0 50px; li{ padding:0 20px; } .more{ font-size:16px; margin-bottom:15px; } p{ font-size:12px; line-height:22px; height:132px; } .text-box{ padding:15px 20px; } } } .success{ .container{ margin-bottom:0; margin-top:30px; } .swiper-container{ margin:0 150px; .img-box{ height:225px; } .text-box{ padding:15px; h5{ font-size: 16px; margin-bottom: 15px; line-height: 22px; padding-bottom: 8px; } p{ font-size:12px; line-height:22px; } } } .sub-title{ margin-bottom:10px; } } .partner{ .container{ margin-bottom:0; } .partner-skew{ margin:0 140px; } .img-list{ li{ .inner{ height:176px; } .img-box{ line-height:102px; padding:35px; } .num{ left:10px; top:10px; font-size:16px; text-align:center; } .des{ font-size:20px; line-height:24px; left:10px; bottom:10px; } } } } .footer{ .sub-title{ margin-bottom:15px; } .decr{ p{ font-size:12px; line-height:22px; } } .more{ font-size:12px; line-height:28px; height:30px; border-width:1px; text-align:center; margin:25px auto; } .footer-bottom{ ul{ li{ h4{ font-size:18px; a{ font-size:18px; } } span{ font-size:14px; } a{ font-size:14px; } &.last{ border:0 none; } } } .right-box{ padding:30px 80px 0; } .left-box{ padding:20px 50px 10px; } } } .success{ .container{ margin-bottom:0; } } } @media(max-width:1279px){ .container{width:980px;} .sub-banner { padding: 145px 0 90px; .container{ h1{ font-size: 40px; letter-spacing: 2px; } } } .sticy-menu{ right:10px; li{ &.active{ .full{display:none;} span{display:block;background:#c44344;} } } } .service{ .img-list{ li{ p{ height:176px; overflow:hidden; } } } } .success{ .swiper-wrapper{ .img-box{ height:160px; } .text-box{ p{ height:154px; overflow:hidden; } } } } .partner{ .img-list{ li{ .inner{ height:158px; } .img-box{ line-height:84px; } .des{ font-size:16px; } } } .partner-skew{ margin:0 60px; } } .footer{ .footer-bottom{ .left-box{ width:440px; } .right-box{ width:560px; } } } .about-page{ h3{ font-size:20px; } .decr-quotes{ font-size:14px; } .enterprise{ .text-content{ padding:50px 0 10px 380px; background-size:500px auto; } } .text-img{ .text-box{ padding:26px 0 0 40px; li{ margin-bottom:15px; } } } .enterprise-active{ .text-box{ padding:30px 60px 0 0; } } .swiper-c{ margin:0 30px; } } } @media(max-width:991px){ .home{ .footer{ .fp-tableCell{ padding-bottom:0; } } .fp-tableCell{ padding:50px 0; height:auto!important; } .solution,.service,.success,.partner,.footer{ height:auto!important; } } .aw-animation{ opacity: 1; } .container{width:750px;} .section-bgc{ display:none; } .sticy-menu{ display:none; } header{ .inner{ height:50px; } .logo{ width:140px; margin-top:9px; } .container{ padding-right:0; } .collapse{ position:absolute; right:15px; margin-top:9px; } .closed{ .collapse{ right:15px; } } .closed{ .nav{ >ul{ width:0; } } } .nav{ >ul{ background:#101924; width:135px; margin-top:50px; >li{ text-align:center; float:none; margin-right:0; a{ line-height:50px; } } .sub-menu{position:static;background:#1e2b3c;} } } } .home{ .banner{ .text{ bottom:50%; margin-bottom:-190px; } } } .solution{ .inner{display:none;} .fp-tableCell{ vertical-align:middle; } .tab-content{ .tab-pane{ p{padding:0 30px;} } } } .service{ .img-list{ margin:0 -20px; .more{ font-size:18px; margin-bottom:15px; } .text-box{ padding:10px 15px; } } } .success{ .swiper-container{ margin:0 auto; .img-box{ height:auto; } .text-box{ p{ height:132px; overflow:hidden; } } } } .partner{ .partner-skew{ margin:0 auto; &:after,&:before{display:none;} } .img-list{ li{ width:33.333%; .inner{ height:234px; } .img-box{ line-height:160px; } } } .more{ display: block; width: 120px; margin: 35px auto; border: 1px solid #fff; border-radius: 4px; padding: 0 25px; color: #fff; text-indent:0; position:static; background:none; font-size: 12px; line-height: 28px; height: 30px; text-align:center; } } .footer{ .footer-bottom{ .left-box,.right-box{ margin:0 0 20px; width:auto; float:none; padding:20px; } } } .home{ .section{ .section-bg{ background:#162636; } } .footer{ .copyright-box{ position:static; } } } .about-page{ .five-a{ ul{ padding:0; } } .enterprise{ .text-content{ padding:15px 0 10px 270px; background-size: 400px auto; } } .text-img{ .text-box{ width:50%; padding:0 0 0 25px; li{ margin-bottom:15px; } } .img-box{ width:50%; } } .enterprise-active{ .text-box{ padding:10px 25px 0 0; } } .swiper-c{ margin:0 30px; } } } @media(max-width:767px){ .container{width:100%;padding:0 10px;} .sub-banner { padding: 100px 0 50px; .container{ h1{ font-size:30px; } p{ margin-top:20px; font-size: 14px; } } } .home { .banner{ h2{ height:25px; } h3{ font-size:14px; margin-bottom:40px; } span{ font-size:14px; line-height:30px; padding:0 20px; } a{ width:30px; height:60px; .fa{ margin-top:15px; } } } } .section{ .title{ font-size:20px; a{ font-size:20px; } } .sub-title{ font-size:18px; } } .solution { .tab{ width:265px; li{ a{ span{ font-size:14px; padding:0 20px; line-height:40px; height:40px; } } &.line{ display:none; } &.first{ margin:0; } &.second{ margin:0; } } } .tab-content{ .tab-pane{ .img-box{ width:100%; } } } } .service{ .img-list{ margin:0; li{width:100%;padding:0;float:none;margin-bottom:20px;} .text-box{ padding:15px; } p{height:auto;} } } .partner{ .img-list{ margin:0; li{ width:100%; float:none; margin-bottom:20px; } } } .about-page { .news-box{ .btn{ line-height:34px; height:34px; font-size:14px; width:100%; } } h3 { font-size: 18px; } .decr-quotes{ font-weight:normal; } .enterprise{ .text-content{ padding:0; background:none; p{ font-size:14px; line-height:24px; margin-bottom:12px; } } } .enterprise-decr{ .img-list{ margin:0; li{ float:none; width:100%; padding:0; margin-bottom:25px; } h5{ font-size:18px; } } } .text-img{ .img-box{ float:none; width:100%; margin-bottom:15px; img{ width:100%; } } .text-box{ float:none; width:100%; padding:0; } } .five-a{ padding:20px 0; height:auto; h3{ margin-bottom:15px; } ul{ padding:0; width:200px; margin:0 auto; li{ span{ font-size:18px; margin-right:10px; } line-height: 24px; font-size: 14px; padding: 5px 0; width: 100%; float: none; } } } .join-us{ dt{ font-size:18px; padding-bottom:14px; margin-bottom:15px; } dd{ span{ height: 36px; line-height: 34px; padding: 0 20px; font-size: 14px; margin: 0 15px 15px 0; } } } .contact{ padding: 20px 0 20px; font-size: 14px; margin-bottom: 30px; } } } @-webkit-keyframes bounce { 0% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 25% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 75% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } 100% { -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-moz-keyframes bounce { 0% { -moz-animation-timing-function: linear; animation-timing-function: linear; -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -moz-animation-timing-function: linear; animation-timing-function: linear; -moz-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 75% { -moz-animation-timing-function: linear; animation-timing-function: linear; -moz-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -moz-animation-timing-function: linear; animation-timing-function: linear; -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounce { 0% { animation-timing-function: linear; transform: translate3d(0, 0, 0); } 25% { animation-timing-function: linear; transform: translate3d(0, 5px, 0); } 75% { animation-timing-function: linear; transform: translate3d(0, -5px, 0); } 100% { animation-timing-function: linear; transform: translate3d(0, 0, 0); } } @keyframes bounces { 0% { animation-timing-function: linear; transform: translate3d(0, 0, 0); } 25% { animation-timing-function: linear; transform: translate3d(0, 5px, 0); } 75% { animation-timing-function: linear; transform: translate3d(0, -5px, 0); } 100% { animation-timing-function: linear; transform: translate3d(0, 0, 0); } } .icon-down .fa { -webkit-animation: bounce 2s linear 0s infinite; -moz-animation: bounce 2s linear 0s infinite; animation: bounce 2s linear 0s infinite; } .line-inner { /* -webkit-animation: bounce 2s linear 0s infinite; -moz-animation: bounce 2s linear 0s infinite; */ animation: bounces 2s linear 0s infinite; } .copyright { a{ color: #3a4d63; text-decoration: none; } } .copyright{ a{ &:hover{ color: #c00; } } }