body { font-family: "Microsoft YaHei", Helvetica, Arial, sans-serif;}
h2 { font-size: 40px;}
h3 { font-size: 30px;}
a:hover { transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s;}
.btn { border: 0 none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;}
.btn-default { display: inline-block; text-align: center; padding: 15px 40px; white-space: nowrap; background-color: #eee; font-size: 16px; line-height: 1; color: #5e5e5e; border: 0 none !important;}
.btn-default:hover { background-color: #ddd; text-decoration: none;}
.btn-primary { display: inline-block; text-align: center; padding: 15px 40px; white-space: nowrap; background-color: #3091f2; font-size: 16px; line-height: 1; color: #fff; border: 0 none !important;}
.btn-primary.block { display: block;}
.btn-primary:hover { background-color: #005BAC; color: #fff; text-decoration: none;}
.btn-outline { display: inline-block; text-align: center; padding: 15px 40px; white-space: nowrap; background-color: transparent; font-size: 16px; line-height: 1; color: #fff; border: solid 1px #fff;}
.btn-outline:hover { color: #fff; text-decoration: none;}
.hover-scale { overflow: hidden;}
.hover-scale img { transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.hover-scale:hover img { transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5);}
img { max-width: 100%; height: auto;}
.float-left { float: left;}
.float-right { float: right;}
.float-none { float: none;}

.header-top { height: 30px; background: #005BAC;}
.header-top .container { display: flex; justify-content: space-between; align-items: center;}
.contact-info { flex: 1; display: flex; justify-content: flex-start; align-items: center; height: 30px;}
.contact-info { font-size: 12px; color: #fff;}
.contact-info .tel { margin-right: 20px;}
.contact-info .iconfont { font-size: 12px; margin-right: 5px;}
.top-menu { flex: 1; display: flex; justify-content: flex-end;}
.top-menu ul { display: flex; justify-content: flex-end; align-items: center; margin: 0 -10px 0 0; padding: 0;}
.top-menu ul li { font-size: 12px; color: #fff; list-style: none;}
.top-menu ul li a { color: #fff; padding-left: 10px; padding-right: 10px; opacity: 0.5;}
.top-menu ul li.active a, .top-menu ul li a:hover { opacity: 1; text-decoration: none;}
.top-menu ul li img { width: 15px; height: auto; margin-right: 5px; position: relative; top: -1px; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}
.top-menu ul li.active img, .top-menu ul li a:hover img { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none;
 filter: none; filter: none;}
.header-nav { height: 90px; position: relative; z-index: 9999; background: #fff;}
.header-nav .container { display: flex; justify-content: space-between; align-items: center;}
.header-nav .logo { height: 90px; align-self: flex-start; display: flex; justify-content: flex-start; align-items: center;}
.header-nav .logo img { width: 180px; height: auto;}
.header-nav .btn-menu { display: none;}
.header-nav nav { flex: 1; padding-left: 20px;}
.header-nav nav>ul { margin: 0 -25px 0 0; padding: 0; display: flex; justify-content: flex-end; align-items: center;}
.header-nav nav>ul>li { height: 90px; list-style: none; position: relative;}
.header-nav nav>ul>li>a { display: block; height: 90px; padding: 0 25px; font-size: 18px; color: #25345c; line-height: 90px;}
.header-nav nav>ul>li.active a, .header-nav nav>ul>li>a:hover, .header-nav nav>ul>li:hover>a { background: #3091f2; color: #fff; text-decoration: none;}
.header-nav nav .sub-nav { position: absolute; height: 0; top: 120%; left: 0; min-width: 100%; background: rgba(48,145,242,0.7); box-shadow: 0 2px 4px rgba(0,0,0,0.2); padding-left: 0; opacity: 0; overflow: hidden; transition: all 0.5s; -moz-transition: all 0.5s; webkit-transition: all 0.5s;}
.header-nav nav>ul>li:hover .sub-nav { top: 100%; opacity: 1; height: auto;}
.header-nav nav .sub-nav li { list-style: none; height: 50px;}
.header-nav nav .sub-nav li a { display: block; height: 50px; padding: 0 25px; font-size: 16px; line-height: 50px; color: #fff;
 white-space: nowrap;}
.header-nav nav .sub-nav li a:hover { background: #3091f2; color: #fff; text-decoration: none;}
.section-banner { position: relative;}
.section-banner .feature { position: absolute; bottom: 0; left: 0; width: 100%; background: url(../images/bg_overlay.png) repeat 0 0;
 z-index: 2;}
.feature .feature-item { display: flex; justify-content: flex-start; align-items: flex-start; border-right: solid 1px #a3c4e5; padding: 20px 30px 0; height: 130px; width: 25%;}
.feature .feature-item:first-child { border-left: solid 1px #a3c4e5;}
.feature .feature-item .iconfont { margin-right: 15px; font-size: 48px; color: #fff; line-height: 1;}
.feature .feature-item-body { flex: 1;}
.feature .feature-item-body h3 { margin: 0 0 10px 0; font-size: 22px; color: #fff;}
.feature .feature-item-body ul { margin: 0; padding: 0;}
.feature .feature-item-body ul li { list-style: none; font-size: 14px; color: #fff;}
.feature .feature-item-body ul li:before { font-family: "iconfont" !important; content: "\e62d"; font-size: 10px; color: #fff; margin-right: 5px;}

.page-section { padding: 45px 0;}
.page-section h2 { margin: 0 0 20px; padding-bottom: 20px; font-size: 32px; line-height: 1; color: #25345c; text-align: center; position: relative;}
.page-section h2:after { position: absolute; bottom: 0; left: 50%; margin-left: -45px; content: " "; display: block; width: 90px; height: 3px; background: #ffc000;}
.page-section .container>p { margin: -20px 0 40px; font-size: 16px; color: #7786ab; text-align: center;}
.zixun_tips{ margin: 10px 0 20px; font-size: 16px; color: #333; text-align: center;}
.page-section.section-banner { padding: 0;}
.section-banner .feature .container { display: flex; justify-content: space-between; align-items: flex-start;}
.section-banner .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 145px;}
.section-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { width: 70px; height: 3px; margin: 0 10px;
 border-radius: 0; background: #fff; opacity: 0.3;}
.section-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1;}

.section-service { background: url("../images/bg_service.jpg") no-repeat 50% 0; background-size: cover;}
.section-service .cards { display: flex; justify-content: space-between; align-items: center; margin-left: -10px; margin-right: -10px;}
.section-service .card { padding: 0 10px;}
.section-service .card a { display: block; position: relative;}
.section-service .card figure img { width: 100%; height: auto;}
.section-service .card h3 { position: absolute; top: 50%; left: 0; width: 100%; margin: -24px 0 0; padding: 0 30px 20px; font-size: 28px; color: #fff; line-height: 1; z-index: 4; text-align: center; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.section-service .card h3:after { content: " "; display: block; width: 48px; height: 2px; background: #fff; position: absolute; bottom: 0; left: 50%; margin-left: -24px;}
.section-service .card p { position: absolute; top: 200px; left: 0; width: 100%; text-align: center; font-size: 20px; color: #fff; padding: 0 30px; line-height: 1.4; z-index: 3; opacity: 0; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.section-service .btn-outline { position: absolute; bottom: -30px; left: 50%; margin-left: -73px; opacity: 0; z-index: 2; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.section-service .overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: #3091f2; opacity: 0.8; z-index: 1; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.section-service .card a:hover h3 { top: 90px; }
.section-service .card a:hover p { top: 150px; opacity: 1; }
.section-service .card a:hover .btn-outline { bottom: 30px; opacity: 1; }
.section-service .card a:hover .overlay { height: 100%; }

.section-solution { background: url("../images/bg_solution.jpg") no-repeat 50% 0; background-size: cover;}
.grid-cards { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.grid-cards .grid-card { margin-bottom: 26px; border-radius: 10px; overflow: hidden;}
.grid-cards .grid-card a { display: block; position: relative;}
.grid-cards .grid-card figure img { width: 100%; height: auto;}
.grid-cards .grid-card figure .img-hover { display: none; position: absolute; top: 0; left: 0; z-index: 1;}
.grid-cards .grid-card h3 { position: absolute; top: 50%; left: 0; width: 100%; margin: -13px 0 0; padding: 0 30px; font-size: 24px; color: #fff; z-index: 4; text-align: center; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.grid-cards .grid-card p { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 20px; color: #fff; padding: 0 30px; line-height: 1.4; z-index: 3; opacity: 0; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.grid-cards .grid-card .btn-outline { position: absolute; bottom: 0; left: 50%; margin-left: -73px; opacity: 0; z-index: 2; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.grid-cards .grid-card a:hover h3 { top: 30%; }
.grid-cards .grid-card a:hover p { bottom: 40px; opacity: 1; }
.grid-cards .grid-card a:hover .btn-outline { bottom: 40px; opacity: 1; }
.grid-cards .grid-card a:hover figure .img-hover { display: block; }
.section-solution .actions { text-align: center;}

.section-case { background: url("../images/bg_case.jpg") no-repeat 50% 0; background-size: cover;}
.section-case h2 { color: #fff;}
.vertical-tabs { display: flex; justify-content: space-between; align-items: flex-start;}
.vertical-tabs .nav-tabs { display: flex; justify-content: center; align-items: center; flex-direction: column; border-bottom: 0 none; padding-right: 8px;}
.vertical-tabs .nav-tabs>li { display: block; width: 180px; float: none; margin-bottom: 30px; position: relative;}
.vertical-tabs .nav-tabs>li>a { display: block; width: 100%; border: 0 none; border-radius: 0; margin: 0; text-align: center; padding: 10px 15px; color: #fff; font-size: 22px; line-height: 30px;}
.vertical-tabs .nav-tabs>li.active>a, .vertical-tabs .nav-tabs>li>a:focus, .vertical-tabs .nav-tabs>li>a:hover, .vertical-tabs .nav>li>a:focus, .vertical-tabs .nav>li>a:hover { color: #fff; background-color: #3091f2; border: 0 none !important; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { cursor: pointer;}
.vertical-tabs .nav-tabs>li.active:after { position: absolute; top: 10px; right: -10px; content: " "; display: block; width: 3px; height: 30px; background: #ffc000;}
.vertical-tabs .tab-content { flex: 1; padding-left: 66px; border-left: solid 1px #7a8399;}
.section-case .grid { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.section-case .grid .grid-item { width: 300px; margin-bottom: 22px; overflow: hidden; border-radius: 7px;}
.section-case .grid .grid-item a { display: block; position: relative;}
.section-case .grid .grid-item img { display: block; width: 100%; height: auto;}
.section-case .grid .grid-item h4 { position: absolute; top: 30%; left: 0; width: 100%; margin: 0; padding: 0 30px; font-size: 16px; color: #fff; z-index: 4; text-align: left; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; opacity: 0;}
.section-case .grid .grid-item p { position: absolute; top: 50%; left: 0; width: 100%; margin: 0; padding: 0 30px; font-size: 16px; color: #fff; z-index: 4; text-align: left; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; opacity: 0;}
.section-case .grid .grid-item .overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: #3091f2; opacity: 0.8; z-index: 1; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.section-case .grid .grid-item a:hover h4 { top: 30px; opacity: 1;}
.section-case .grid .grid-item a:hover p { top: 55px; opacity: 1;}
.section-case .grid .grid-item a:hover .overlay { height: 100%; }
.vertical-tabs .tab-content .tab-pane p { margin: 10px 0 20px; font-size: 16px; color: #fff;}

.section-news .nav-tabs { margin-bottom: 40px; display: flex; justify-content: center; align-items: center; border-bottom: solid 1px #c3cde6;}
.section-news .nav-tabs>li { float: none; margin: 0; position: relative;}
.section-news .nav-tabs>li>a { margin: 0; border: 0 none; border-radius: 0; font-size: 18px; color: #25345c;}
.section-news .nav-tabs>li.active>a, .section-news .nav-tabs>li.active>a:focus, .section-news .nav-tabs>li>a:hover { color: #3091f2; background-color: transparent; border: 0 none !important;}
.section-news .nav-tabs>li.active:after { position: absolute; bottom: -2px; left: 50%; margin-left: -25px; content: " "; display: block; width: 50px; height: 3px; background: #ffc000;}
.section-news .img-text-list { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0 -15px 0 -15px; padding: 0;}
.section-news .img-text-list li { width: 50%; margin-bottom: 22px; padding: 0 15px; list-style: none;}
.section-news .img-text-list li a { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: solid 1px #c3cde6; padding-bottom: 22px;}
.section-news .img-text-list li a:hover { text-decoration: none;}
.section-news .img-text-list li figure img { max-width: 105px; height: auto;}
.section-news .img-text-list li .list-body { flex: 1; padding-left: 15px; min-width: 0;}
.section-news .img-text-list li .list-body .headline h4 { margin: 0 0 15px; font-size: 16px; color: #25345c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.section-news .img-text-list li .list-body .headline span { font-size: 18px; color: #7786ab;}
.section-news .img-text-list li .list-body .content { display: flex; justify-content: space-between; align-items: flex-end;}
.section-news .img-text-list li .list-body .content p { margin: 0; padding-right: 15px; font-size: 14px; color: #7786ab;}
.section-news .img-text-list li .list-body .content span { font-size: 14px; color: #3091f2;}
.section-news .actions { text-align: center;}
.section-news .img-text-list li a:hover .list-body .headline h4 { color: #3091f2;}
.section-news .img-text-list li a:hover .list-body .content p { color: #3091f2;}
.section-partner { background: url("../images/bg_partner.jpg") no-repeat 50% 0; background-size: cover;}
.section-partner h2 { color: #fff;}
.logo-gallery { padding-top: 144px;}
.logo-gallery.mobile { display: none;}
.logo-group { display: flex; justify-content: center; align-items: center; padding: 30px 0; margin-top: -144px;}
.logo-gallery .flipper { width: 191px; height: 191px; transition: 0.6s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; position: relative;}
.logo-gallery .flipper:hover { transform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);}
.logo-gallery .flipper .front, .logo-gallery .flipper .back { backface-visibility: hidden; -webkit-backface-visibility:hidden;	-moz-backface-visibility:hidden; -ms-backface-visibility:hidden; position: absolute; top: 28px; left: 0; width: 191px; height: 191px;}
.logo-gallery .flipper .front { ransform: rotateY(0deg); -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); z-index: 2;}
.logo-gallery .flipper .back { ransform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);}
.logo-gallery figure { width: 135px; height: 135px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); overflow: hidden; background: #fff; display: flex; justify-content: center; align-items: center; margin: 0 28px; position: relative;}
.logo-gallery figure img { max-width: 100%; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.logo-gallery .flipper .back p {width: 135px; height: 135px; margin: 0 28px; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.5); color: #fff; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); text-align: center;}
.logo-gallery .flipper .back p span { transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}


.section-about-us { background: url("../images/bg_about_us.jpg") no-repeat 50% 0;}
.section-about-us .timeline { margin-right: 30px; padding-right: 40px; border-right: solid 1px #ffd453;}
.section-about-us .timeline-item { margin-bottom: 30px; padding: 15px 15px; opacity: 0.9; border-radius: 10px; position: relative; background: url("../images/bg_timeline_blue.png") no-repeat 50% 50% #f1ac21;}
.section-about-us .timeline-item h5 { margin: 0 0 10px; padding-bottom: 10px; font-size: 16px; color: #fff; line-height: 1.8; border-bottom: solid 1px #fff;}
.section-about-us .timeline-item p { margin: 0; font-size: 14px; color: #fff; line-height: 1.8;}
.section-about-us .timeline-item .arrow { position: absolute; top: 15px; right: -24px; width: 0; height: 0; border-style: solid; border-width: 15px 12px 15px 12px; border-color: transparent transparent transparent #f1ac21;}
.section-about-us .timeline-item .dot { position: absolute; top: 15px; right: -55px; width: 30px; height: 30px; background: rgba(255,255,255,0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.section-about-us .timeline-item .dot span { display: block; width: 20px; height: 20px; background: #fff; border-radius: 50%;}
.section-about-us article { padding-left: 10px;}
.section-about-us article h2 { text-align: left;}
.section-about-us article h2:after { left: 0; margin-left: 0;}
.section-about-us article figure { float: right; margin: 0 0 0px 15px;}
.section-about-us article p { margin-bottom: 20px; font-size: 16px; color: #7786ab; line-height: 2; text-indent: 36px;}
.section-about-us .swiper-container { margin-top: 40px; padding: 0 30px;}
.section-about-us .swiper-slide { width: 240px; height: 180px; border: solid 1px #3091f2; background: url("../images/bg_cer.jpg") no-repeat 0 0; background-size: 240px 180px;}
.section-about-us .swiper-slide figure { width: 240px; height: 180px; display: flex; justify-content: center; align-items: center; padding: 15px;}
.section-about-us .swiper-slide figure img { max-width: 100%; max-height: 100%;}
.section-about-us .swiper-button-prev:after, .section-about-us .swiper-button-next:after { font-size: 24px; color: #3091f2;}

.section-contact { background: url("../images/bg_contact.jpg") no-repeat 50% 0; background-size: cover;}
.section-contact form { padding: 40px 75px; background: url("../images/bg_form.png") repeat 0 0; border-radius: 10px;}
form .form-group { margin-bottom: 20px;}
form .form-group>label { font-size: 20px; font-weight: normal;}
form .form-group>label span { color: #ff0000;}
form .form-group .form-control { height: 50px; border-radius: 0; background: #fff; border: solid 1px #fff; box-shadow: none; padding: 10px 15px;}
form .form-group textarea.form-control { height: 106px;}
form .form-group .form-control:focus { border: solid 1px #3091f2;}
form .form-group.error .form-control, form .form-group.error .form-control:focus { border: solid 1px #ff0000; }
form .form-actions { display: flex; justify-content: space-between; align-items: center;}
form .form-actions .btn-primary { margin-right: 20px;}
form .checkbox-group { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 11px 0 0;}
form .checkbox-group label { display: flex; justify-content: flex-start; align-items: center; font-size: 16px; color: #25345c; margin-right: 20px; margin-bottom: 15px; font-weight: normal; width: 113px;}
form .checkbox-group .icheckbox { width: 28px; height: 28px; background: #fff; margin-right: 5px; display: flex; justify-content: center; align-items: center;}
form .checkbox-group .icheckbox.checked { border: solid 1px #3091f2; text-align: center;}
form .checkbox-group .icheckbox.checked:after { content: "\e6b2"; font-family: "iconfont" !important; font-size: 16px; color: #3091f2; line-height: 28px;}
form .form_tips { margin: 0; padding-right: 30px; font-size: 14px;}
form .form_tips.error { color: #ff0000;}
form .form_tips.success { color: #28a745;}

.footer { background: url('../images/bg_footer.jpg') no-repeat 50% 0; background-size: cover;}
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 0 30px;}
.footer-nav h4 { margin: 0 0 20px; font-size: 16px; color: #e3ebff;}
.footer-nav ul { margin: 0; padding: 0;}
.footer-nav ul li { margin-bottom: 10px; list-style: none; font-size: 14px; color: #9ea6ba;}
.footer-nav ul li.tel { width: 188px; padding: 6px 10px; border: solid 1px #9ea6ba; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 7px;}
.footer-nav ul li.tel .icon-phone { margin-right: 10px; font-size: 20px;}
.footer-nav ul li.mobile { display: none;}
.footer-nav ul li a { font-size: 14px; color: #9ea6ba;}
.footer-nav ul li.tel a { font-size: 20px; color: #fff;}
.footer-nav ul li a:hover { color: #ebf1ff; text-decoration: none;}
.footer-nav .qrcode { display: flex; justify-content: flex-start; align-items: center;}
.footer-nav .qrcode img { width: 80px; margin-right: 10px;}
.footer-bottom { padding: 15px 150px 15px 0; display: flex; justify-content: flex-start; align-items: center; border-top: solid 1px #9ea6ba; background: url("../images/logo_flat.png") no-repeat 100% 50%;}
.footer .links { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 0 0 20px;}
.footer .links h5 { margin: 0 10px 0 0; font-size: 14px; color: #9ea6ba;}
.footer .links a { margin-right: 15px; font-size: 14px; color: #9ea6ba;}
.footer .links a:hover { color: #ebf1ff;}
.footer-bottom p { margin: 0; padding-right: 30px; font-size: 12px; color: #9ea6ba;}
.social-media { display: flex; justify-content: flex-start; align-items: center;}
.social-media a { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; background: #e3ebff;
 border-radius: 6px; margin-right: 15px; color: #3091f2;}
.social-media a:hover { text-decoration: none; background: #3091f2; color: #e3ebff;}
.social-media a .iconfont { font-size: 24px;}
.popover.top>.arrow { bottom: -10px;}
.popover.left>.arrow { right: -10px;}
.popover-content img { display: block; max-width: 120px; height: auto;}

.sticky-bar { position: fixed; top: 50%; right: 0; margin-top: -145px; z-index: 9999;}
.sticky-bar ul { margin: 0; padding: 0;}
.sticky-bar ul li { list-style: none; width: 50px; height: 50px; margin-bottom: 3px; position: relative;}
.sticky-bar ul li a { width: 50px; height: 50px; background: #3091f2; display: flex; justify-content: center; align-items: center; color: #fff; text-decoration: none !important; position: relative; z-index: 2; box-shadow: 0 0 4px rgba(0,0,0,0.3); border-radius: 6px;}
.sticky-bar ul li a .iconfont { font-size: 24px; line-height: 1;}
.sticky-bar ul li a.online .icon-qq:before { content: ""; display: block; width: 26px; height: 26px; background: url("../images/qq.png") no-repeat 0 0; background-size: 100% auto;}
.sticky-bar ul li a.back-top { flex-direction: column; font-size: 12px;}
.sticky-bar ul li a:hover { background: #005BAC; text-decoration: none;}
.sticky-bar ul li p { position: absolute; top: 0; right: -200px; background: #3091f2; height: 50px; margin: 0; padding: 0 15px; font-size: 16px; line-height: 50px; color: #fff; white-space: nowrap; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; z-index: 1; border-top-left-radius: 20px; border-bottom-left-radius: 20px; box-shadow: 0 0 4px rgba(0,0,0,0.3);}
.sticky-bar ul li:hover p { right: 100%;}

.section-bcn { padding: 15px 0; background: #f5f5f5;}
.section-bcn .breadcrumb { margin: 0; padding: 8px 0;}
.breadcrumb-nav { display: flex; justify-content: flex-start; align-items: center;}
.breadcrumb-nav p { margin: 0 10px 0 0; font-size: 16px; color: #25345c; display: flex; justify-content: flex-start; align-items: center;}
.breadcrumb-nav p .icon-location { margin-right: 5px; color: #c00b0b; font-size: 20px;}

.section-main { padding-top: 60px;}
.sidebar-nav { background: #f6f8fb; margin-bottom: 30px; padding-bottom: 30px;}
.sidebar-nav h3 { margin: 0 0 15px 0; height: 50px; padding:15px; background: #3091f2; font-size: 18px; color: #fff; line-height: 20px;}
.sidebar-nav ul { margin: 0; padding: 0;}
.sidebar-nav ul li { list-style: none;}
.sidebar-nav ul li a { display: block; padding: 13px 20px 13px 30px; border-top: solid 2px #f6f8fb; border-bottom: solid 2px #f6f8fb; line-height: 20px; font-size: 16px; color: #25345c;}
.sidebar-nav ul li.active a, .sidebar-nav ul li a:hover { background: #fff; border-top: solid 2px #ffc000; border-bottom: solid 2px #ffc000; padding-left: 40px; color: #3091f2; text-decoration: none;}
.sidebar-nav ul li a:hover { border-top: solid 2px #f6f8fb;}
.sidebar-content { margin-bottom: 30px;}
.sidebar-content h3 { margin: 0 0 20px; padding-bottom: 15px; font-size: 20px; color: #25345c; border-bottom: solid 1px #c3cde6; position: relative;}
.sidebar-content h3:after { position: absolute; left: 20px; bottom: -1px; content: " "; display: block; width: 50px; height: 3px; background: #ffc000;}
.sidebar-content article img { display: block; width: 100%; height: auto; margin-bottom: 15px;}
.sidebar-content article h4 { margin: 0 0 10px; font-size: 16px; color: #25345c;}
.sidebar-content article p { margin: 0 0 10px; font-size: 14px; color: #7786ab;}
.sidebar-content ul { margin: 0; padding: 0 0 0 15px;}
.sidebar-content ul li { margin-bottom: 10px; list-style: disc outside; color: #25345c;}
.sidebar-content ul li a { color: #25345c; font-size: 16px;}
.sidebar-content ul li a:hover, .sidebar-content ul li:hover { color: #3091f2; text-decoration: none;}
.main-content { padding-bottom: 60px;}

.section-category { background: #f6f8fb; padding: 30px 0;}
.category { display: flex; justify-content: space-around; align-items: center;}
.category-item { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 108px; height: 108px; border: solid 3px #c3cde6; border-radius: 50%; font-size: 18px; color: #25345c; line-height: 1; cursor: pointer; position: relative;}
.category-item .iconfont { margin-bottom: 10px; font-size: 32px; color: #3091f2;}
.category-item.active { background: #3091f2; border: solid 3px #3091f2; color: #fff;}
.category-item.active .iconfont { color: #fff;}
.category-item .chart { position: absolute; top: -7px; left: -7px;}

.page-section.section-waterfall { padding: 40px 0 80px;}
.filter { display: flex; justify-content: flex-start; align-items: flex-start; border-bottom: solid 1px #c3cde6; margin-bottom: 40px; padding-bottom: 20px;}
.filter p { font-size: 14px; color: #25345c; line-height: 24px;}
.filter-button-group { flex: 1; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.filter-button-group button { height: 20px; margin: 0 5px 5px 0; padding: 0 10px; background: none; border: 0;  font-size: 12px; color: #25345c; outline: 0 none; position: relative; line-height: 20px;}
.filter-button-group button:hover { color: #3091f2;}
.filter-button-group button.active { background: #3091f2; color: #fff; padding: 0 18px 0 5px;}
.filter-button-group button.active:after { position: absolute; top: 4px; right: 3px; content: "\e604"; font-family: "iconfont" !important; color: #fff; font-size: 12px; line-height: 1;}

.waterfall-container { margin-left: -10px; margin-right: -10px;}
.waterfall-container .grid-item { margin-bottom: 20px; padding: 0 10px;}
.waterfall-case .grid-item.size-s, .waterfall-case .grid-sizer { width: 25%;}
.waterfall-case .grid-item.size-m { width: 25%;}
.waterfall-case .grid-item.size-l { width: 50%;}
.waterfall-case .grid-item.size-xl { width: 50%;}
.waterfall-container .grid-item img { background: url("../images/ajax-loader.gif") no-repeat 50% 50%;}
.waterfall-container .grid-item .card { box-shadow: 0 0 10px rgba(0,0,0,0.2); overflow: hidden;}
.waterfall-container .grid-item .card-body { position: relative;}
.waterfall-container .grid-item .card-body .caption { position: absolute; left: 20px; right: 90px; bottom: 20px; padding: 20px; background: rgba(0,0,0,0.5);}
.waterfall-container .grid-item .card-body .caption h3 { margin: 0; font-size: 22px; color: #fff;}
.waterfall-container .grid-item .card-body .btn-unfold { position: absolute; right: 20px; bottom: 20px; width: 50px; height: 50px; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; border: 0 none; outline: 0;}
.waterfall-container .grid-item .card-body .btn-unfold .icon-arrow-down { color: #3091f2; font-size: 24px; line-height: 1;}
.waterfall-container .grid-item .card-text { position: relative; padding: 20px 90px 20px 20px; min-height: 200px; display: none;}
.waterfall-container .grid-item .card-text p { font-size: 16px; color: #666;}
.waterfall-container .grid-item .card-text .btn-fold { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background: rgba(48,145,242,0.8); display: flex; justify-content: center; align-items: center; border: 0 none; outline: 0;}
.waterfall-container .grid-item .card-text .btn-fold .icon-arrow-up { color: #fff; font-size: 24px; line-height: 1;}
.waterfall-news .grid-item, .waterfall-news .grid-sizer { width: 33.3333%;}
.waterfall-news .grid-item .card { position: relative; overflow: hidden;}
.waterfall-news .grid-item .caption { position: absolute; left: 0; right: 0; bottom: -100px; background: rgba(255,255,255,0.8); padding: 20px; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; }
.waterfall-news .grid-item .caption h4 { margin: 0; font-size: 20px; color: #25345c;}
.waterfall-news .grid-item .card:hover .caption { bottom: 0;}
.waterfall-honor .grid-item, .waterfall-honor .grid-sizer { width: 25%;}
.waterfall-honor .grid-item .card { position: relative; overflow: hidden; background: url("../images/bg_cer2.jpg") no-repeat 50% 0; background-size: 100% auto;}
.waterfall-honor .grid-item .card a { display: block; padding: 30px;}
.waterfall-honor .grid-item .card:before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: url("../images/border_top.png") no-repeat 50% 0; background-size: 100% auto; z-index: 2;}
.waterfall-honor .grid-item .card:after { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: url("../images/border_bottom.png") no-repeat 50% 100%; background-size: 100% auto; z-index: 3;}
.waterfall-honor .grid-item .caption { position: absolute; left: 0; right: 0; bottom: -100px; background: rgba(255,255,255,0.8); padding: 20px; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; z-index: 4;}
.waterfall-honor .grid-item .caption h4 { margin: 0; font-size: 20px; color: #25345c;}
.waterfall-honor .grid-item .card:hover .caption { bottom: 0;}

.article-image-text-grid { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; margin-right: -20px;}
.article-image-text-grid .grid-item { margin-bottom: 20px; padding-right: 20px;}
.article-image-text-grid.col-2 .grid-item { width: 50%;}
.article-image-text-grid.col-3 .grid-item { width: 33.3333%;}
.article-image-text-grid .grid-item .card { box-shadow: 0 0 10px rgba(0,0,0,0.2); overflow: hidden;}
.article-image-text-grid .grid-item .card>a { display: block; overflow: hidden;}
.article-image-text-grid .grid-item .grid-item-text { background: #fff; padding: 20px 30px;}
.article-image-text-grid.col-3 .grid-item .grid-item-text { padding: 15px;}
.article-image-text-grid .grid-item .grid-item-text h4 { margin: 0 0 10px 0; font-size: 16px; color: #25345c;}
.article-image-text-grid .grid-item .grid-item-text h4 a { font-size: 16px; color: #25345c;}
.article-image-text-grid .grid-item .grid-item-text h4 a:hover { color: #3091f2; text-decoration: none;}
.article-image-text-grid .grid-item .grid-item-text p { margin: 0; font-size: 14px; color: #7786ab; line-height: 1.7;}

.article-image-text-list .list-item { display: flex; justify-content: flex-start; align-items: flex-start; padding-bottom: 20px; border-bottom: solid 1px #c3cde6; margin-bottom: 20px;}
.article-image-text-list .list-item>a { display: block;}
.article-image-text-list .list-item>a img { max-width: 200px;}
.article-image-text-list .list-item-text { flex: 1; padding-left: 15px;}
.article-image-text-list .list-item-text h4 { margin: 0 0 10px; font-size: 22px; color: #25345c; line-height: 1;}
.article-image-text-list .list-item-text h4 a { color: #25345c; }
.article-image-text-list .list-item-text h4 a:hover { color: #3091f2; text-decoration: none;}
.article-image-text-list .list-item-text p { margin: 0 0 40px; font-size: 14px; color: #7786ab; line-height: 1.7;}
.article-image-text-list .list-item-text p a { color: #7786ab;}
.article-image-text-list .list-item-text p a:hover { color: #3091f2; text-decoration: none;}
.article-image-text-list .list-item-text .meta-info { display: flex; justify-content: space-between; align-items: center; line-height: 1;}
.article-image-text-list .list-item-text .meta-info .date { display: flex; justify-content: flex-start; align-items: center; color: #7786ab; font-size: 14px;}
.article-image-text-list .list-item-text .meta-info .date .glyphicon { margin-right: 5px; line-height: 1;}
.article-image-text-list .list-item-text .meta-info .link-more { font-size: 14px; color: #3091f2;}
.article-image-text-list .list-item-text .meta-info .link-more:hover { color: #0a5cae; text-decoration: none;}

.article-text-list .list-item { padding: 0 20px 20px; border-bottom: solid 1px #c3cde6; margin-bottom: 20px;}
.article-text-list .list-item .headline { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px;}
.article-text-list .list-item .date { display: flex; justify-content: flex-start; align-items: center; color: #7786ab; font-size: 14px;}
.article-text-list .list-item .date .glyphicon { margin-right: 5px; line-height: 1;}
.article-text-list .list-item h4 { flex: 1; margin: 0; padding-right: 100px; font-size: 22px; color: #25345c; line-height: 1;}
.article-text-list .list-item h4 a { color: #25345c; }
.article-text-list .list-item h4 a:hover { color: #3091f2; text-decoration: none;}
.article-text-list .list-item p { margin: 0 0 15px; font-size: 14px; color: #7786ab; line-height: 1.7;}
.article-text-list .list-item p a { color: #7786ab;}
.article-text-list .list-item p a:hover { color: #3091f2; text-decoration: none;}
.article-text-list .list-item .link-more { font-size: 14px; color: #3091f2;}
.article-text-list .list-item .link-more:hover { color: #0a5cae; text-decoration: none;}

.page-pagination { display: flex; justify-content: center; align-items: center; margin-top: 40px;}
.page-pagination ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 0; padding: 0;}
.page-pagination ul li { list-style: none; margin: 0 5px 10px;}
.page-pagination ul li span { display: block; height: 40px; padding: 0 15px; background:#3091f2; font-size: 14px; color: #fff; line-height: 40px; white-space: nowrap;}
.page-pagination ul li a { display: block; height: 40px; padding: 0 15px; background: #fff; border: solid 1px #c3cde6; font-size: 14px; color: #25345c; line-height: 38px;}
.page-pagination ul li.active a, .page-pagination ul li a:hover { border: solid 1px #3091f2; text-decoration: none;}
.page-pagination ul li.active a, .page-pagination ul li.disabled a { cursor: default;}
.page-pagination ul li.disabled a, .page-pagination ul li.disabled a:hover { border: solid 1px #c3cde6; color: #25345c;}

.article .article-header { padding: 0 20px 20px; border-bottom: solid 1px #c3cde6;}
.article .article-header h1 { margin: 0 0 10px; font-size: 22px; color: #25345c; text-align: center;}
.article .article-header p { margin: 0; font-size: 14px; color: #7786ab; text-align: center;}
.article .article-body { padding: 20px;}
.article .article-body figure { display: flex; justify-content: center; margin-bottom: 15px;}
.article .article-body p { margin-bottom: 15px; font-size: 16px; color: #25345c; line-height: 2;}
.article .article-body ul { margin: 0 0 15px;}
.article .article-body ul li { list-style: none; font-size: 16px; color: #25345c; line-height: 2;}
.article .article-footer { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-top: solid 1px #c3cde6;}
.article .article-footer a { font-size: 16px; color: #3091f2;}
.article .article-footer span { font-size: 16px; color: #7786ab;}
.article .article-footer a:hover { color: #0a5cae; text-decoration: none;}
.page-section .article h1 { margin: 0 0 30px; padding-bottom: 20px; font-size: 32px; color: #25345c; line-height: 1; text-align: center; position: relative;}
.page-section .article h1:after { position: absolute; bottom: 0; left: 50%; margin-left: -45px; content: " "; display: block; width: 90px; height: 3px; background: #ffc000;}
.page-section .article p { margin-bottom: 15px; font-size: 16px; color: #25345c; line-height: 2;}

.section-client { background: url("../images/bg_about_01.jpg") no-repeat 50% 50%; background-size: cover;}
.section-client article { max-width: 70%; margin: 0 auto;}
.section-client article p { margin: 0 0 20px; font-size: 16px; color: #25345c; line-height: 2; text-indent: 36px;}

.section-advantage { background: url("../images/bg_about_02.jpg") no-repeat 50% 0; background-size: cover;}
.cube { display: flex; justify-content: center; align-items: center; position: relative; padding: 60px 0;}
.cube .cube-item { position: absolute; width: 320px; height: 120px; background: url("../images/bg_timeline_blue.png") no-repeat 50% 50% #fff; box-shadow: 0 0 27px rgba(4,31,50,0.1); border-radius: 10px; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.cube .cube-item:hover { background: url("../images/bg_timeline_yellow.png") no-repeat 50% 50% #3091f2;}
.cube .cube-item p { height: 120px; display: flex; justify-content: flex-start; align-items: center; margin: 0; padding: 0 20px; font-size: 16px; color: #25345c; line-height: 1.5;}
.cube .cube-item:hover p { color: #fff;}
.cube .cube-item.technology { top: 30px; left: 80px;}
.cube .cube-item.service { top: 30px; right: 80px;}
.cube .cube-item.strength { top: 190px; left: 0;}
.cube .cube-item.management { top: 190px; right: 0;}
.cube .cube-item.innovation { top: 350px; left: 80px;}
.cube .cube-item.talent { top: 350px; right: 80px;}
.cube .cube-item.product { bottom: 0; left: 50%; margin-left: -160px;}

.section-culture { background: url("../images/bg_about_03.jpg") no-repeat 50% 0; background-size: cover;}
.tile { display: flex; justify-content: space-between; align-self: flex-start; flex-wrap: wrap;}
.tile .tile-item { position: relative; overflow: hidden;}
.tile .tile-group { width: 33.3333%; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;}
.tile .tile-group .tile-item { width: 100%;}
.tile .tile-item.col-3 { width: 25%;}
.tile .tile-item.col-4 { width: 33.3333%;}
.tile .tile-item.col-6 { width: 50%;}
.tile .tile-item figure img { display: block;}
.tile .tile-item h4 { position: absolute; top: 80px; left: 0; margin: 0 0 20px; padding: 0 40px 20px; font-size: 30px; color: #fff; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; z-index: 3;}
.tile .tile-item h4:after { position: absolute; left: 40px; bottom: 0; content: " "; display: block; width: 50px; height: 2px; background: #fff;}
.tile .tile-item p { position: absolute; top: 150px; left: 0; margin: 0; padding: 0 40px; font-size: 16px; color: #fff; line-height: 1.5; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; opacity: 0; z-index: 2;}
.tile .tile-item .overlay { position: absolute; top: 100%; left: 0; right: 0; bottom: 0; background: rgba(48,145,242,0.8); transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; z-index: 1;}
.tile .tile-item:hover h4 { top: 40px;}
.tile .tile-item:hover p { top: 110px; opacity: 1;}
.tile .tile-item:hover .overlay { top: 0;}

.section-history { background: url("../images/bg_about_top.jpg") no-repeat 100% 0; position: relative;}
.section-history .bg-bottom { position: absolute; bottom: 0; left: 0; width: 402px; height: 497px; background: url("../images/bg_about_bottom.jpg") no-repeat 0 0; z-index: -1;}
.section-history .timeline { position: relative;}
.section-history .timeline .timeline-line { position: absolute; top: 60px; bottom: 60px; left: 50%; width: 2px; background: #25345c; margin-left: -1px; z-index: 1;}
.section-history .timeline .timeline-start { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 70px; position: relative; z-index: 3;}
.section-history .timeline .timeline-end { display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; z-index: 3;}
.section-history .timeline .timeline-start .icon-diamond, .section-history .timeline .timeline-end .icon-diamond { font-size: 24px; color: #3091f2; line-height: 1;}
.section-history .timeline h3 { margin: 0 0 30px; line-height: 1;}
.section-history .timeline .timeline-start h3 { margin:  0 0 15px;}
.section-history .timeline .timeline-end h3 { margin:  15px 0 0;}
.section-history .timeline .timeline-item { width: 50%; margin-top: -40px; position: relative; z-index: 2;}
.section-history .timeline .timeline-item.left { padding-right: 45px; align-self: flex-start;}
.section-history .timeline .timeline-item.right { left: 50%; padding-left: 45px; align-self: flex-end;}
.section-history .timeline .timeline-item .timeline-item-header { position: relative;}
.section-history .timeline .timeline-item .timeline-item-header .dot { width: 18px; height: 18px; position: absolute; background: #fff; top: 6px; display: flex; justify-content: center; align-items: center;}
.section-history .timeline .timeline-item .timeline-item-header .dot .icon-diamond { font-size: 16px; color: #3091f2; line-height: 1;}
.section-history .timeline .timeline-item.left .timeline-item-header .dot { right: -54px;}
.section-history .timeline .timeline-item.right .timeline-item-header .dot { left: -54px;}
.section-history .timeline .timeline-item.left .timeline-item-header h3 { text-align: right;}
.section-history .timeline .timeline-item .timeline-item-body { padding: 20px 20px 15px; background: url("../images/bg_timeline_blue.png") no-repeat 50% 50% #3091f2; box-shadow: 0 0 10px rgba(0,0,0,0.3); border-radius: 10px; position: relative;}
.section-history .timeline .timeline-item.left .timeline-item-body { margin-right: 30px;}
.section-history .timeline .timeline-item.right .timeline-item-body { margin-left: 30px;}
.section-history .timeline .timeline-item.milestone .timeline-item-body { background: url("../images/bg_timeline_yellow.png") no-repeat 50% 50% #f1ac21;}
.section-history .timeline .timeline-item ul { margin: 0; padding: 0 0 0 15px;}
.section-history .timeline .timeline-item ul li { margin-bottom: 5px; font-size: 16px; color: #fff;}
.section-history .timeline .timeline-item .timeline-item-body:after { position: absolute; top: -24px; content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 12px 15px 12px 15px; border-color: transparent transparent #3091f2 transparent;}
.section-history .timeline .timeline-item.left .timeline-item-body:after { right: 30px;}
.section-history .timeline .timeline-item.right .timeline-item-body:after { left: 30px;}
.section-history .timeline .timeline-item.milestone .timeline-item-body:after { border-color: transparent transparent #f1ac21 transparent;}

.side-panel { background: #3091f2; padding: 70px 70px 40px;}
.side-panel ul { margin: 0; padding: 0;}
.side-panel ul li { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; list-style: none; margin: 0 0 30px; padding: 0;}
.side-panel ul li h4 { margin: 0 10px 5px 0; font-size: 24px; color: #fff; font-weight:  normal;}
.side-panel ul li p, .side-panel ul li p a { margin: 0; font-size: 18px; color: #fff;}
.side-panel ul li p a:hover { color: #fff;}
.side-panel ul li figure { margin-right: 15px;}
.side-panel ul li figure p { margin-bottom: 10px;}
.side-panel dl dt { margin: 0 0 3px; font-size: 24px; color: #fff; font-weight:  normal;}
.side-panel dl dd { margin: 0 0 30px; font-size: 18px; color: #fff;}
.side-panel dl dd img { display: block; margin-top: 10px;}
.form-wrapper { padding-left: 20px;}
.form-wrapper form .form-group { margin-bottom: 30px;}
.form-wrapper form .form-group>label { margin-bottom: 10px;}
.form-wrapper form .form-group .form-control { background: #f6f8fb; border: solid 1px #f6f8fb;}
.form-wrapper form .checkbox-group .icheckbox { background: #f6f8fb;}
.form-wrapper form .form-group .form-control:focus { border: solid 1px #3091f2;}
.form-wrapper form .form-group.error .form-control, form .form-group.error .form-control:focus { background: #fff; border: solid 1px #ff0000; }
.form-wrapper form .form-actions { padding-top: 7px;}

.grid-wrapper { margin: 30px 0;}
.grid-wrapper h4 { margin: 0 0 20px; font-size: 22px; color: #25345c;}
.grid-wrapper .grid { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin: 0 -10px;}
.grid-wrapper .grid .grid-item { width: 25%; margin-bottom: 20px; padding: 0 10px; overflow: hidden; border-radius: 7px;}
.grid-wrapper .grid .grid-item a { display: block; position: relative; overflow: hidden; border-radius: 7px;}
.grid-wrapper .grid .grid-item h4 { position: absolute; top: 50%; left: 0; width: 100%; margin: 0; padding: 0 30px; font-size: 16px; color: #fff; z-index: 4; text-align: left; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; opacity: 0;}
.grid-wrapper .grid .grid-item p { position: absolute; top: 60%; left: 0; width: 100%; margin: 0; padding: 0 30px; font-size: 14px; color: #fff; z-index: 4; text-align: left; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; opacity: 0;}
.grid-wrapper .grid .grid-item .overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: #3091f2; opacity: 0.8; z-index: 1; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.grid-wrapper .grid .grid-item a:hover h4 { top: 30px; opacity: 1;}
.grid-wrapper .grid .grid-item a:hover p { top: 60px; opacity: 1;}
.grid-wrapper .grid .grid-item a:hover .overlay { height: 100%;}

.section-flow { background: url("../images/bg_service_03.jpg") no-repeat 50% 0; background-size: cover;}
.section-flow-gray { background: url("../images/bg_service_06.jpg") no-repeat 50% 0; background-size: cover;}

.card-list { margin: 0; padding: 40px 0; display: flex; justify-content: space-between; align-items: center;}
.card-list li { flex: 1; list-style: none;}
.card-list li .card { background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.25); transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; position: relative; z-index: 1;}
.card-list li .card img { display: block; width: 100%; height: auto;}
.card-list li .card:hover, .card-list li.active .card { transform: scale(1.2); background: #3091f2; z-index: 2;}
.card-list li .card .card-body { padding: 20px 20px 40px;}
.card-list li .card h4 { margin: 20px 0; font-size: 22px; color: #25345c; text-align: center;}
.card-list li .card p { font-size: 16px; color: #7786ab;}
.card-list li .card:hover h4, .card-list li.active .card h4 { color: #fff;}
.card-list li .card:hover p, .card-list li.active .card p { color: #fff;}
.card-list li .card .icon { position: absolute; top: 23%; left: 50%; width: 80px; height: 80px; margin-left: -40px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.card-list li .card .icon .iconfont { font-size: 50px; color: #3091f2;}
.card-list li .card .icon .iconfont.icon-data { font-size: 44px;}
.card-list li .card>h4 { position: absolute; top: 60%; left: 0; width: 100%; font-size: 18px; color: #fff; text-align: center; z-index: 3; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.card-list li .card>p { position: absolute; top: 80%; left: 0; width: 100%; padding: 0 15px; font-size: 14px; color: #fff; text-align: center; z-index: 3; opacity: 0; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.card-list li .card .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(2,34,64,0.5); z-index: 1; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s;}
.card-list li .card:hover .overlay, .card-list li.active .card .overlay {background-image: linear-gradient(-60deg, #ffc000, #ff6c00); opacity: 0.8;}
.card-list li .card:hover .icon, .card-list li.active .card .icon { top: 18%;}
.card-list li .card:hover>h4, .card-list li.active .card>h4 { top: 55%;}
.card-list li .card:hover>p, .card-list li.active .card>p { top: 75%; opacity: 1;}


.section-slide-tab { background: url("../images/bg_service_02.jpg") no-repeat 50% 0; background-size: cover;}
.tab-slider { margin-bottom: 20px;}
.tab-slider .card { position: relative; border-radius: 10px; overflow: hidden;}
.tab-slider .card p { font-size: 22px; color: #fff; line-height: 1; position: absolute; top: 50%; left: 0; width: 100%; margin-top: -11px; text-align: center;}
.section-slide-tab .swiper-slide { transform: scale(0.8); transition: 0.3s; cursor: pointer;}
.section-slide-tab .swiper-slide-active, .swiper-slide-duplicate-active { transform: scale(1);}
.tab-slider .swiper-container { padding: 0 10px;}
.tab-slider .swiper-container .swiper-button-prev { left: 0;}
.tab-slider .swiper-container .swiper-button-next { right: 0;}
.tab-slider .swiper-container .swiper-button-prev:after, .tab-slider .swiper-container .swiper-button-next:after { font-size: 24px;}
.section-slide-tab .tab-content { padding: 40px 30px 10px; background: #fff; border-radius: 10px; box-shadow: 0 0 27px rgba(4,31,50,0.1)}
.section-slide-tab .tab-content h3 { margin: 0 0 20px; font-size: 22px; color: #25345c; line-height: 1; padding: 0 0 15px; position: relative;}
.section-slide-tab .tab-content h3:after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 48px; height: 2px; background: #ffc000;}
.section-slide-tab .tab-content p { margin: 0 0 20px; font-size: 16px; color: #7786ab; line-height: 1.5;}

.section-eshop { background: url("../images/bg_service_05.jpg") no-repeat 50% 50%; box-shadow: 0 20px 27px rgba(0,0,0,0.1);}
.section-eshop figure { display: flex; justify-content: center;}

.text-box { display: flex; justify-content: space-between; align-items: center; margin-right: -20px;}
.text-box-item { flex: 1; margin-right: 20px; background: #fff; border-radius: 10px; box-shadow: 0 0 27px rgba(4,31,50,0.1); padding: 60px 30px;}
.text-box-item .icon { width: 80px; height: 80px; background: #46485c; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
.text-box-item .icon .iconfont { font-size: 50px; color: #3091f2;}
.text-box-item h4 { margin:  0 0 20px; font-size: 22px; color: #25345c;}
.text-box-item p { margin: 0; font-size: 16px; color: #7786ab;}

.text-with-image { display: flex; justify-content: space-between; align-items: center;}
.text-with-image figure { width: 50%; }
.text-with-image figure.left { order: 0; margin-right: 40px;}
.text-with-image figure.right { order: 2; margin-left: 40px;}
.text-with-image .text { flex: 1;}
.text-with-image .text h4 { margin:  0 0 20px; padding-bottom: 15px; font-size: 22px; color: #25345c; position: relative;}
.text-with-image .text h4:after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 48px; height: 2px; background: #ffc000;}
.text-with-image .text p { margin: 0 0 40px; font-size: 16px; color: #7786ab;}
.text-with-image .text button { border-radius: 6px; margin: 0 30px 30px 0;}

.section-website { overflow: hidden; position: relative;}
.special-tabs { position: relative;}
.special-tabs .nav-tabs { width: 68%; height: 414px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; border: 0 none;}
.special-tabs .nav-tabs li { display: flex; justify-content: flex-start; align-items: center; margin: 6px 0;}
.special-tabs .nav-tabs li .dot { display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; background: rgba(241,172,33,0.2); border-radius: 50%; margin-right: 5px;}
.special-tabs .nav-tabs li .dot:after { content: ""; display: block; width: 14px; height: 14px; background: #f1ac21; border-radius: 50%;}
.special-tabs .nav-tabs li.active .dot, .special-tabs .nav-tabs li a:hover .dot { background: rgba(48,145,242,0.2);}
.special-tabs .nav-tabs li.active .dot:after, .special-tabs .nav-tabs li a:hover .dot:after { background: #3091f2;}
.special-tabs .nav-tabs .nav { margin-left: -19px;}
.special-tabs .nav-tabs .nav>li>a { font-size: 18px; color: #25345c;}
.special-tabs .nav-tabs .nav>li>a:focus, .special-tabs .nav-tabs .nav>li>a:hover { background: none; text-decoration: none; color: #3091f2;}
.special-tabs .nav-tabs .nav>li.nav-item1, .special-tabs .nav-tabs .nav>li.nav-item6 { margin-left: -43px;}
.special-tabs .nav-tabs .nav>li.nav-item2, .special-tabs .nav-tabs .nav>li.nav-item5 { margin-left: -12px;}
.special-tabs .tab-content .tab-pane { position: relative; width: 68%; margin: 0 auto;}
.special-tabs .tab-pane .left-img { position: absolute; left: 0; top: -388px;}
.special-tabs .tab-pane .right-img { position: absolute; left: 70%; top: -414px; right: -999px;}
.special-tabs .tab-pane p { padding-top: 40px; font-size: 16px; color: #7786ab; line-height: 1.5;}

.section-app { background: #f6f8fb;}
.icon-text-list { margin: 0; padding: 0;}
.icon-text-list li { margin: 0 0 20px; padding: 20px; background: #fff; box-shadow:0 0 27px rgba(4,31,50,0.1); border-radius: 10px; list-style: none; display: flex; justify-content: space-between; align-items: center;}
.icon-text-list li .icon .iconfont { font-size: 50px; color: #3091f2;}
.icon-text-list li .text { flex: 1; padding-left: 20px;}
.icon-text-list li h5 { margin: 0 0 20px; font-size: 22px; color: #25345c; line-height: 1;}
.icon-text-list li p { margin: 0; font-size: 16px; color: #7786ab; line-height: 1.5;}

.img-gallery { display: flex; justify-content: space-between; align-items: center; border-bottom: solid 1px #ccc; margin-bottom: 40px;}
.img-gallery figure { width: 23%; background: #fff; box-shadow:0 0 27px rgba(4,31,50,0.1); border-top-left-radius: 10px; border-top-right-radius: 10px; overflow: hidden;}
.section-wxmp .row h4 { margin:  0 0 20px; padding-bottom: 15px; font-size: 22px; color: #25345c; position: relative;}
.section-wxmp .row h4:after { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 48px; height: 2px; background: #ffc000;}
.section-wxmp .row p { margin: 0 0 40px; font-size: 16px; color: #7786ab;}

.section-software { background: url("../images/bg_service_04.png") no-repeat 50% 100%;}
.bubbles { display: flex; justify-content: center; align-items: center; position: relative;}
.bubbles .bubble { display: flex; justify-content: center; align-items: center; position: absolute;}
.bubbles .bubble.size-s { width: 110px; height: 110px;}
.bubbles .bubble.size-m { width: 116px; height: 116px;}
.bubbles .bubble.size-l { width: 134px; height: 134px;}
.bubbles .bubble.size-s span { width: 71px; height: 71px; font-size: 28px;}
.bubbles .bubble.size-m span { width: 75px; height: 75px; font-size: 26px;}
.bubbles .bubble.size-l span { width: 87px; height: 87px; font-size: 32px;}
.bubbles .bubble.bubble1 { top: 0; left: 0;}
.bubbles .bubble.bubble2 { top: 72px; left: 188px;}
.bubbles .bubble.bubble3 { bottom: 65px; left: 118px;}
.bubbles .bubble.bubble4 { top: 28px; right: 48px;}
.bubbles .bubble.bubble5 { top: 175px; right: 150px;}
.bubbles .bubble.bubble6 { bottom: 10px; right: 0;}
.bubbles .bubble span { display: flex; justify-content: center; align-items: center; background: #3091f2; border-radius: 50%; color: #fff;}
.bubbles .bubble span:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 1px rgba(48,145,242,0.3); border-radius: 50%;}
.bubbles .bubble span:after { content: ""; display: block; position: absolute; top: 12%; left: 12%; width: 76%; height: 76%; border: solid 1px #3091f2; border-radius: 50%;}
.page-section.section-software .container>p { margin: 40px 0 30px;}
.bubbles .bubble:hover {-webkit-animation: warn 1s ease-out; -moz-animation: warn 1s ease-out; animation: warn 1s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;}
@keyframes warn {
 0% {
  transform: scale(0.9);
 }
 50% {
  transform: scale(0.8);
 }
 100% {
  transform: scale(1);
 }
}
@-webkit-keyframes warn {
 0% {
  -webkit-transform: scale(0.9);
 }
 50% {
  -webkit-transform: scale(0.8);
 }
 100% {
  -webkit-transform: scale(1);
 }
}

.section-article { background: url("../images/bg_mobile.jpg") no-repeat 50% 0; background-size: cover;}
.section-article h3 { margin: 0 0 20px; font-size: 22px; color: #25345c; line-height: 1; padding-bottom: 15px; position: relative;}
.section-article h3:after { position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 48px; height: 2px; background: #ffc000;}
.text-with-right-image { margin-bottom: 30px; overflow: hidden;}
.text-with-right-image figure { max-width: 45%; margin-left: 30px;}
.text-with-right-image p { margin: 0; font-size: 16px; color: #25345c; line-height: 2; text-indent: 36px;}
.text-only { margin-bottom: 30px;}
.text-only p { margin: 0; font-size: 16px; color: #25345c; line-height: 2; text-indent: 36px;}
.text-wrap-image { margin-bottom: 20px; overflow: hidden;}
.text-wrap-image figure.float-right { max-width: 40%; margin-left: 30px; margin-bottom: 5px;}
.text-wrap-image figure.float-left { max-width: 40%; margin-right: 30px; margin-bottom: 5px;}
.text-wrap-image h2 { margin: 0 0 30px; font-size: 32px; color: #25345c; text-align: left;}
.text-wrap-image h2:after { left: 0; margin-left: 0;}
.text-wrap-image p { margin: 0 0 10px; font-size: 16px; color: #25345c; line-height: 2; text-indent: 36px;}
.image-list { display: flex; justify-content: space-between; align-items: center; margin: 10px -20px 10px 0;}
.image-list figure { margin-right: 20px;}

.section-consult { padding: 30px 0; background: url("../images/bg_consult.jpg") no-repeat 50% 0; background-size: cover;}
.section-consult h4 { font-size: 24px; color: #fff; line-height: 1;}
.section-consult p { margin-bottom: 20px; font-size: 14px; color: #fff; line-height: 1;}

.flex-center { display: flex; justify-content: center; align-items: center;}

.hotline { display: flex; align-items: center; justify-content: flex-start; padding-left: 15px; margin-left: 20px; border-left: solid 2px #3091f2;}
.hotline .icon-hotline { color: #3091f2; font-size: 40px; line-height: 1;}
.hotline p { margin: 0; font-size: 18px; color: #25345c; line-height: 1.2;}
.hotline p a { display: block; color: #3091f2;}

@media (min-width: 1200px) {
 .container { width: 1230px;}
}

@media (max-width: 1199px) {
 .header-nav nav>ul { margin: 0 -15px 0 0;}
 .header-nav nav>ul>li>a { padding: 0 15px; font-size: 16px;}
 .section-banner .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 120px;}
 .feature .feature-item { height: 110px; padding: 15px 20px 0;}
 .feature .feature-item .iconfont { margin-right: 10px; font-size: 40px;}
 .feature .feature-item-body h3 { font-size: 18px;}
 .feature .feature-item-body ul li { font-size: 12px;}

 .section-service .card h3 { font-size: 18px; padding: 0 20px 15px;}
 .section-service .card p { font-size: 14px;}
 .section-service .card a:hover p { top: 120px;}
 .btn-outline, .btn-primary, .btn-default { padding: 13px 30px; font-size: 14px;}
 .section-service .btn-outline { margin-left: -59px;}

 .grid-cards .grid-card { width: 300px; margin-bottom: 20px;}
 .grid-cards .grid-card h3 { font-size: 20px; margin: -10px 0 0;}
 .grid-cards .grid-card p { font-size: 16px;}
 .grid-cards .grid-card a:hover h3 { top: 35%;}
 .grid-cards .grid-card a:hover p { bottom: 20px;}

 .section-case .grid .grid-item { width: 330px;}

 .logo-gallery { padding-top: 113px;}
 .logo-group { padding: 23px 0; margin-top: -113px;}
 .logo-gallery .flipper { width: 156px; height: 156px;}
 .logo-gallery .flipper .front, .logo-gallery .flipper .back { width: 156px; height: 156px; top: 23px;}
 .logo-gallery figure { width: 110px; height: 110px; margin: 0 23px;}
 .logo-gallery .flipper .back p { width: 110px; height: 110px; margin: 0 23px; font-size: 14px;}

 .section-about-us { background: url("../images/bg_about_us.jpg") no-repeat 48% 0;}

 .cube figure { width: 400px;}
 .cube .cube-item { width: 300px; height: 100px;}
 .cube .cube-item p { height: 100px; font-size: 14px;}
 .cube .cube-item.technology { top: 0; left: 40px;}
 .cube .cube-item.service { top: 0; right: 40px;}
 .cube .cube-item.strength { top: 120px; left: 0;}
 .cube .cube-item.management { top: 120px; right: 0;}
 .cube .cube-item.innovation { top: 240px; left: 40px;}
 .cube .cube-item.talent { top: 240px; right: 40px;}

 .section-client article { max-width: 100%;}

 .tile .tile-item h4 { font-size: 24px; top: 60px; padding: 0 30px 15px;}
 .tile .tile-item h4:after { left: 30px;}
 .tile .tile-item p { font-size: 14px; padding: 0 30px;}
 .tile .tile-item:hover p { top: 95px;}

 .grid-wrapper .grid .grid-item p { font-size: 14px;}

 .article-image-text-list .list-item-text p { margin: 0 0 20px;}

 .tab-slider .card p { font-size: 18px;}

 .special-tabs .nav-tabs { width: 100%;}
 .special-tabs .tab-content .tab-pane { width: 100%;}

 .img-gallery figure { width: 23%;}

 .text-with-image .text p { margin: 0 0 20px;}
 .text-with-image .text button { margin: 0 15px 15px 0;}

 .card-list li .card>h4 { font-size: 16px;}
 .card-list li .card>p { font-size: 12px;}

 .article-image-text-grid .grid-item .grid-item-text { padding: 15px;}

 .side-panel { padding: 30px;}
 
}

@media (min-width: 992px) {
 .header-nav nav { display: block !important;}

}

@media (max-width: 991px) {
 .header { position: relative; z-index: 999999;}
 .header:after { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: none; content: ""; background: rgba(0,0,0,0.5); z-index: 1;}
 .header.open:after { display: block;}
 .header-top { position: relative; z-index: 9;}
 .header-nav { display: flex; justify-content: center; position: relative;}
 .header-nav .container { position: relative;}
 .header-nav .container:before, .header-nav .container:after { display: none;}
 .header-nav nav { position: absolute; top: 90px; left: 15px; right: 15px; background: #fff; padding-left: 0; box-shadow: 0 4px 6px rgba(4,31,50,0.1); z-index: 3; display: none;}
 .header-nav .btn-menu { width: 40px; height: 40px;  display: flex; justify-content: center; align-items: center; background: none; border: none; outline: none;}
 .header-nav .btn-menu .icon-menu { color: #25345c; font-size: 32px;}
 .header-nav nav>ul { flex-direction: column; align-items: flex-start; margin: 0;}
 .header-nav nav>ul>li { display: block; width: 100%; height: auto; border-bottom: solid 1px #eee;}
 .header-nav nav>ul>li>a { height: 50px; line-height: 50px;}
 .header-nav nav>ul>li.has-sub-nav>a { position: relative;}
 .header-nav nav>ul>li.has-sub-nav>a:after { position: absolute; right: 20px; top: 0; content: "\e6f0"; font-family: "iconfont" !important; color: #25345c;}
 .header-nav nav>ul>li.has-sub-nav:hover>a:after, .header-nav nav>ul>li.has-sub-nav.active>a:after {content: "\e7ac"; color: #fff;}
 .header-nav nav .sub-nav { position: static; background: #f4f6f7;}
 .header-nav nav .sub-nav li { height: 40px;}
 .header-nav nav .sub-nav li a { height: 40px; line-height: 40px; color: #25345c;}

 .footer-top { flex-wrap: wrap; padding: 30px 0 10px;}
 .footer-nav ul li.mobile { display: block;}
 .footer-top .footer-nav { width: 33.333333%; margin-bottom: 20px;}

 .section-banner .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 15px;}
 .section-banner .feature { position: static; background: #3091f2;}
 .section-banner .feature .container { align-items: stretch;}
 .feature .feature-item { height: auto; flex-direction: column; padding: 15px 20px;}
 .feature .feature-item .iconfont { margin-bottom: 15px; align-self: center;}

 .section-service .card h3 { font-size: 16px;}
 .section-service .card p { padding: 0 15px;}
 .section-service .card a:hover h3 { top: 60px; }
 .section-service .card a:hover p { top: 85px;}

 .grid-cards .grid-card { width: 350px;}

 .vertical-tabs { flex-direction: column;}
 .vertical-tabs .nav-tabs { width: 100%; padding-right: 0; margin-bottom: 30px; flex-direction: row; justify-content: space-between;}
 .vertical-tabs .nav-tabs>li { width: auto; margin-bottom: 0;}
 .vertical-tabs .nav-tabs>li.active:after { display: none;}
 .vertical-tabs .tab-content { padding-left: 0; border-left: 0 none;}
 .vertical-tabs .nav-tabs>li>a { font-size: 18px;}

 .section-case .grid .grid-item { width: 350px;}

 .section-news .nav-tabs { margin-bottom: 22px; padding-bottom: 10px; flex-wrap: wrap;}
 .section-news .nav-tabs>li.active:after { display: none;}
 .section-news .nav-tabs>li.active>a, .section-news .nav-tabs>li.active>a:focus, .section-news .nav-tabs>li>a:hover { background: #3091f2; color: #fff;}
 .logo-gallery { padding-top: 0;}
 .logo-gallery.desktop { display: none;}
 .logo-gallery.mobile { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
 .logo-gallery.mobile .swiper-container { padding: 0 15px;}
 .logo-gallery.mobile .swiper-slide { display: flex; justify-content: center; align-items: center;}
 .logo-group { margin-top: 0; padding: 0; flex-wrap: wrap; justify-content: flex-start;}
 .logo-gallery .flipper { width: 144px; height: 144px; padding: 5px;}
 .logo-gallery .flipper .front { position: static;}
 .logo-gallery .flipper .front, .logo-gallery .flipper .back { width: 100%; height: 100%; top: 0;}
 .logo-gallery .flipper .back { padding: 5px;}
 .logo-gallery figure { width: 100%; height: auto; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); display: flex; justify-content: center; align-items: center; margin: 0; position: relative;}
 .logo-gallery figure img { max-width: 100%; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg);}
 .logo-gallery .flipper .back p {width: 100%; height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg);}
 .logo-gallery .flipper .back p span { transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg);}
 .logo-gallery.mobile figure img { width: 100%; height: auto;}

 .section-about-us { background: url("../images/bg_about_right.jpg") no-repeat 50% 0; background-size: cover;}
 .section-about-us .timeline { margin-left: 30px; padding-left: 40px; border-left: solid 1px #ffd453; margin-right: 0; padding-right: 0; border-right: 0 none;}
 .section-about-us .timeline-item .arrow { left: -24px; right: auto; border-color: transparent #f1ac21 transparent transparent;}
 .section-about-us .timeline-item .dot { left: -55px; right: auto; background: rgba(48,145,242,0.5);}
 .section-about-us .timeline-item .dot span { background: #3091f2;}

 .cube { flex-wrap: wrap; padding: 0; justify-content: space-between;}
 .cube figure { width: 100%; display: flex; justify-content: center;}
 .cube .cube-item { position: static; width: 49%; height: 100px; margin: 20px 0 0 0;}
 .cube .cube-item p { height: 100px;}
 .cube .cube-item.product { margin-left: 0;}

 .tile .tile-item.col-3 { width: 50%;}
 .tile .tile-item.col-4 { width: 50%;}
 .tile .tile-item.col-6 { width: 100%;}
 .tile .tile-group { width: 50%;}
 .tile .tile-group.order6 { width: 100%; flex-direction: row;}
 .tile .tile-group.order6 .tile-item { width: 50%;}
 .tile .tile-item figure img { width: 100%; height: auto;}
 .tile .order1 { order: 1;}
 .tile .order2 { order: 3;}
 .tile .order3 { order: 2;}
 .tile .order4 { order: 4;}
 .tile .order5 { order: 5;}
 .tile .order6 { order: 6;}

 .waterfall-case .grid-item.size-s, .waterfall-case .grid-sizer { width: 50%;}
 .waterfall-case .grid-item.size-m { width: 50%;}
 .waterfall-container .grid-item img { width: 100%; height: auto;}
 .waterfall-container .grid-item .card-body .caption { padding: 15px;}
 .waterfall-container .grid-item .card-body .caption h3 { font-size: 18px;}

 .side-panel { margin-bottom: 30px; padding: 30px;}
 .form-wrapper { padding-left: 0;}

 .section-history .timeline .timeline-item.left { padding-right: 30px;}
 .section-history .timeline .timeline-item.right { padding-left: 30px;}
 .section-history .timeline .timeline-item.left .timeline-item-header .dot { right: -39px;}
 .section-history .timeline .timeline-item.right .timeline-item-header .dot { left: -39px;}
 .section-history .timeline .timeline-item.left .timeline-item-body { margin-right: 0;}
 .section-history .timeline .timeline-item.right .timeline-item-body { margin-left: 0;}
 .section-history .timeline h3 { margin: 0 0 20px; font-size: 24px;}
 .section-history .timeline .timeline-item ul li { font-size: 14px;}

 .waterfall-honor .grid-item, .waterfall-honor .grid-sizer { width: 33.3333%;}
 .waterfall-honor .grid-item .caption { padding: 15px;}
 .waterfall-honor .grid-item .caption h4 { font-size: 16px;}

 .grid-wrapper .grid .grid-item h4 { padding: 0 10px; font-size: 14px;}
 .grid-wrapper .grid .grid-item p { padding: 0 10px; font-size: 12px;}
 .grid-wrapper .grid .grid-item a:hover h4 { top: 15px;}
 .grid-wrapper .grid .grid-item a:hover p { top: 40px;}

 .sidebar-content article img { width: auto;}

 .waterfall-news .grid-item .caption h4 { font-size: 16px;}

 .article-image-text-list { padding-top: 20px; border-top: solid 1px #c3cde6;}
 .article-text-list { padding-top: 20px; border-top: solid 1px #c3cde6;}
 .article-text-list .list-item { padding: 0 0 20px;}

 .article .article-body { padding: 20px 0;}
 .article .article-header { padding: 0 0 20px;}
 .article .article-footer { padding: 20px 0;}

 .special-tabs .tab-pane .left-img { max-width: 60%;}
 .special-tabs .tab-pane p { padding-top: 0;}
 .icon-text-list { margin-top: 20px;}

 .text-with-image .text button { padding: 10px 15px;}

 .card-list li .card .icon { width: 60px; height: 60px; margin-left: -30px;}
 .card-list li .card .icon .iconfont { font-size: 36px;}
 .card-list li .card .icon .iconfont.icon-data { font-size: 32px;}
 .card-list li .card:hover .icon, .card-list li.active .card .icon { top: 10%;}
 .card-list li .card:hover>h4, .card-list li.active .card>h4 { top: 40%;}
 .card-list li .card:hover>p, .card-list li.active .card>p { top: 66%;}
 .card-list { padding: 20px 0;}


}

@media (max-width: 767px) {
 .header-nav { height: 66px;}
 .header-nav .container { width: 100%;}
 .header-nav .logo { height: 66px;}
 .header-nav .logo img { width: 150px;}
 .header-nav nav { top: 66px; left: 0; right: 0;}
 .sticky-bar { display: none;}

 .page-section { padding: 20px 0;}
 .page-section h2 { margin: 0 0 20px; padding-bottom: 15px; font-size: 24px;}
 .page-section h2:after { width: 48px; height: 2px; margin-left: -24px;}

 .section-banner .feature .container { flex-wrap: wrap;}
 .section-banner .swiper-container-horizontal>.swiper-pagination-bullets { bottom: 10px;}
 .section-banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet { width: 30px; height: 2px; margin: 0 5px;}
 .section-banner .feature .container:before, .section-banner .feature .container:after { display: none;}
 .feature .feature-item { width: 50%; flex-direction: row;}
 .feature .feature-item .iconfont { align-self: flex-start;}
 .feature .feature-item { border-bottom: solid 1px #a3c4e5;}
 .feature .feature-item:first-child { border-left: 0 none;}
 .feature .feature-item:nth-child(2), .feature .feature-item:last-child { border-right: 0 none;}
 .feature .feature-item-body h3 { font-size: 16px;}

 .section-service .cards { flex-wrap: wrap; margin: 0 -10px 0 -10px;}
 .section-service .cards .card { width: 50%; margin-bottom: 20px; padding: 0 10px;}
 .section-service .card h3 { font-size: 28px; padding: 0 30px 20px;}
 .section-service .card p { font-size: 20px; padding: 0 30px;}
 .section-service .card a:hover h3 { top: 90px;}
 .section-service .card a:hover p { top: 150px;}

 .grid-cards .grid-card { width: 48%;}

 .vertical-tabs .nav-tabs { flex-wrap: wrap; justify-content: center;}
 .vertical-tabs .nav-tabs>li>a { font-size: 16px; padding: 5px 15px;}
 .section-case .grid .grid-item { width: 48%;}
 .vertical-tabs .tab-content .tab-pane p { font-size: 14px;}

 .section-news .img-text-list li { width: 100%;}
 .section-news .nav-tabs>li>a { font-size: 16px; line-height: 30px; padding: 5px 15px;}

 .logo-gallery.mobile .swiper-button-prev { left: 0;}
 .logo-gallery.mobile .swiper-button-next { right: 0;}

 .section-about-us .swiper-button-prev { left: 0;}
 .section-about-us .swiper-button-next { right: 0;}
 .section-about-us article p { font-size: 14px;}

 .section-contact form { padding: 30px;}

 .cube .cube-item { width: 100%; height: auto; margin: 15px 0 0;}
 .cube .cube-item p { height: auto; padding: 15px 20px;}

 .text-wrap-image p { font-size: 14px;}

 .section-client article p { font-size: 14px;}

 .tile .tile-item h4 { top: 20px; font-size: 18px; padding: 0 10px 10px;}
 .tile .tile-item h4:after { width: 30px; height: 1px; left: 20px;}
 .tile .tile-item p { top: 60px; font-size: 12px; padding: 0 10px; opacity: 1;}
 .tile .tile-item:hover h4 { top: 20px;}
 .tile .tile-item:hover p { top: 60px;}

 .text-wrap-image figure.float-right { margin-left: 10px;}
 .text-wrap-image { margin-bottom: 0px;}
 .image-list { margin: 0px -10px 10px 0;}
 .image-list figure { margin-right: 10px;}

 .page-section.section-category { padding: 20px 0;}
 .category { flex-wrap: wrap;}
 .category-item { margin: 0; width: 60px; height: 60px; font-size: 12px;}
 .category-item .iconfont { margin-bottom: 5px; font-size: 20px;}
 .category-item .chart { display: none;}
 .waterfall-container .grid-item .card-text p { font-size: 14px; line-height:22px}

 .section-bcn { display: none;}

 .filter { margin-bottom: 20px; padding-bottom: 10px; flex-direction: column;}
 .filter p { margin-bottom: 0; padding: 0 5px;}
 .filter-button-group button { height: 20px; font-size: 12px; margin: 0 5px 5px 0; padding: 0 5px;}
 .filter-button-group button.active { padding: 0 5px; background: #3091f2; color: #fff; border: 0 none;}
 .filter-button-group button.active:after { display: none;}
 .page-section.section-waterfall { padding: 5px 0;}
 .waterfall-container { margin-left: -7px; margin-right: -7px;}
 .waterfall-container .grid-item { margin-bottom: 14px; padding: 0 7px;}
 .waterfall-container .grid-item .card-body .caption { min-height: 70px; left: 15px; bottom: 15px; right: 70px;}
 .waterfall-container .grid-item .card-body .btn-unfold { width: 40px; height: 40px; right: 15px; bottom: 15px;}
 .waterfall-container .grid-item .card-body .btn-unfold .icon-arrow-down { font-size: 20px;}
 .waterfall-container .grid-item .card-text { min-height: 150px; padding: 15px 70px 15px 15px;}
 .waterfall-container .grid-item .card-text .btn-fold { width: 40px; height: 40px; top: 15px; right: 15px;}
 .waterfall-container .grid-item .card-text .btn-fold .icon-arrow-up { font-size: 20px;}

 .side-panel { padding: 20px;}
 .side-panel dl dt { font-size: 18px;}
 .side-panel ul li { margin-bottom: 15px;}
 .side-panel ul li h4 { font-size: 16px;}
 .side-panel ul li p, .side-panel ul li p a { font-size: 14px;}
 .side-panel dl dd { margin-bottom: 15px; font-size: 14px;}
 .form-wrapper form .form-group { margin-bottom: 20px;}

 .section-article h3 { font-size: 18px;}
 .text-with-right-image p { font-size: 14px;}
 .text-with-right-image figure { margin-left: 15px; margin-bottom: 15px;}
 .text-wrap-image figure.float-left { margin-right: 15px; margin-bottom: 15px;}
 .section-consult h4 { font-size: 18px;}

 .grid-wrapper .grid .grid-item { width: 50%; margin-bottom: 20px;}
 .grid-wrapper .grid .grid-item h4 { padding: 0 20px; font-size: 16px;}
 .grid-wrapper .grid .grid-item p { padding: 0 20px; font-size: 14px;}
 .grid-wrapper .grid .grid-item a:hover h4 { top: 30px;}
 .grid-wrapper .grid .grid-item a:hover p { top: 60px;}
 .grid-wrapper .grid .grid-item figure img { width: 100%; height: auto;}

 .section-main { padding-top: 10px;}
 .sidebar-content ul li a { font-size: 14px;}
 .article-image-text-grid { margin-right: -14px;}
 .article-image-text-grid .grid-item { padding-right: 14px; margin-bottom: 14px;}
 .article-image-text-grid .grid-item .grid-item-text { padding: 15px 20px;}

 .page-pagination { margin-top: 20px;}
 .page-pagination ul li span { height: 30px; padding: 0 10px; font-size: 14px; line-height: 30px; white-space: nowrap;}
 .page-pagination ul li a { height: 30px; padding: 0 10px; font-size: 14px; line-height: 30px; white-space: nowrap;}

 .article-image-text-list .list-item-text h4 { font-size: 18px;}

 .article-text-list .list-item h4 { font-size: 18px;}

 .article-text-list .list-item { margin-bottom: 15px; padding: 0 0 15px;}

 .article .article-header h1 { font-size: 20px;}
 .article .article-header p { font-size: 14px;}
 .article .article-body p { font-size: 14px; text-indent: 0;}
 .article .article-body ul { padding-left: 0;}
 .article .article-body ul li { font-size: 14px;}
 .article .article-footer span { font-size: 14px;}
 .article .article-footer a { font-size: 14px;}

 .card-list li .card .card-body { padding: 15px;}
 .card-list li .card h4 { font-size: 18px; margin: 10px 0;}
 .card-list li .card:hover h4, .card-list li.active .card h4 { font-size: 18px; margin: 10px 0;}
 .card-list li .card p { font-size: 14px;}
 .section-slide-tab .tab-content { padding: 20px 20px 10px;}
 .grid-wrapper { margin: 30px 0 10px;}

 .icon-text-list li h5 { font-size: 18px; margin: 0 0 10px;}
 .icon-text-list li p { font-size: 14px;}

 .section-wxmp .row h4 { margin-bottom: 15px; padding-bottom: 10px; font-size: 18px;}
 .section-wxmp .row p { margin: 0 0 20px; font-size: 14px;}
 .page-section.section-software .container>p { margin: 20px 0 10px;}
 .special-tabs .nav-tabs .nav>li>a { padding: 10px 0 10px 10px; font-size: 16px;}

 .bubbles .bubble.size-s { width: 100px; height: 100px;}
 .bubbles .bubble.size-m { width: 106px; height: 106px;}
 .bubbles .bubble.size-l { width: 124px; height: 124px;}
 .bubbles .bubble.size-s span { width: 61px; height: 61px; font-size: 20px;}
 .bubbles .bubble.size-m span { width: 65px; height: 65px; font-size: 18px;}
 .bubbles .bubble.size-l span { width: 77px; height: 77px; font-size: 24px;}
 .bubbles .bubble.bubble1 { top: 0; left: 0;}
 .bubbles .bubble.bubble2 { top: 72px; left: 118px;}
 .bubbles .bubble.bubble3 { bottom: 0; left: 24px;}
 .bubbles .bubble.bubble4 { top: 28px; right: 48px;}
 .bubbles .bubble.bubble5 { top: 175px; right: 150px;}
 .bubbles .bubble.bubble6 { bottom: 10px; right: 0;}

 .special-tabs .tab-pane p { font-size: 14px;}

 .icon-text-list li { padding: 15px; margin-bottom: 15px;}

 .page-section .container>p { margin: -10px 0 30px;}

 .text-with-image .text h4 { font-size: 18px;}
 .text-with-image .text p { font-size: 14px;}
 .text-with-image figure.left { margin-right: 20px;}
 .text-with-image figure.right { margin-left: 20px;}

 .card-list { flex-wrap: wrap; justify-content: flex-start; margin-left: -7px; margin-right: -7px;}
 .card-list li { width: 33.3333%; margin-bottom: 14px; padding: 0 7px; flex: none;}
 .card-list li .card:hover, .card-list li.active .card {transform: scale(1);}

 .page-section .article p { font-size: 14px;}

 .article .article-footer { flex-direction: column; align-items: flex-start;}
 .article .article-footer a { margin-top: 5px;}

 .sidebar-nav { padding-top: 10px; padding-bottom: 10px; margin-bottom: 20px;}
 .sidebar-nav h3 { display: none;}
 .sidebar-nav ul { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
 .sidebar-nav ul li a { padding: 10px 12px; border-top: 0 none; border-bottom: 0 none; font-size: 14px;}
 .sidebar-nav ul li.active a, .sidebar-nav ul li a:hover { background: #3091f2; padding: 10px 12px; border-top: 0 none; border-bottom: 0 none; color: #fff;}
 .footer .links{ display:none}
}

@media (max-width: 640px) {
 .header-top { display: none;}
 .feature .feature-item { display: flex; justify-content: flex-start; align-items: center; border-right: 0 none !important; padding: 10px 0;}
 .feature .feature-item-body h3 { margin: 0; font-size: 14px;}
 .feature .feature-item-body ul { display: none;}
 .feature .feature-item .iconfont { margin-bottom: 0; font-size: 16px; align-self: center;}
 .section-service .card h3 { font-size: 18px; padding: 0 15px 15px;}
 .section-service .card p { font-size: 14px; padding: 15px;}
 .section-service .card a:hover h3 { top: 60px;}
 .section-service .card a:hover p { top: 80px;}
 .section-service .card a:hover .btn-outline { bottom: 20px;}

 .grid-cards .grid-card h3 { font-size: 18px;}
 .grid-cards .grid-card p { font-size: 14px;}
 .grid-cards .grid-card a:hover p { bottom: 10px;}


 .section-history .timeline .timeline-item { width: 100%; margin-top: 25px;}
 .section-history .timeline .timeline-item.left { padding-right: 0; padding-left: 42px;}
 .section-history .timeline .timeline-item.right { left: 0; padding-left: 42px;}
 .section-history .timeline .timeline-item.left .timeline-item-header .dot { left: -39px;}
 .section-history .timeline .timeline-item.left .timeline-item-header h3 { text-align: left;}
 .section-history .timeline .timeline-item.left .timeline-item-body:after { left: 30px;}
 .section-history .timeline h3, .section-history .timeline h4 { font-size: 16px; margin: 0 0 15px; line-height: 1.4;}
 .section-history .timeline .timeline-start { width: 90px; margin-bottom: 25px; align-items: flex-start;}
 .section-history .timeline .timeline-end { width: 90px; align-items: flex-start;}
 .section-history .timeline .timeline-line { left: 12px;}

 .waterfall-honor .grid-item, .waterfall-honor .grid-sizer { width: 50%;}

 .article-image-text-grid.col-3 .grid-item { width: 50%;}

 .article-image-text-list .list-item>a { width: 30%;}
 .article-image-text-list .list-item>a img { max-width: 100%;}
 .article-image-text-list .list-item-text p { margin: 0 0 15px;}

 .special-tabs .nav-tabs { height: auto; justify-content: flex-start;}
 .special-tabs .nav-tabs .nav { margin-left: 0;}
 .special-tabs .nav-tabs li { margin-left: 0 !important;}

 .special-tabs .tab-pane .left-img { position: static;}
 .special-tabs .nav-tabs img { display: none;}

 .card-list li { width: 50%;}

 .footer-top .footer-nav:last-child { width: 100%;}

 form .checkbox-group .icheckbox { width: 20px; height: 20px;}
 form .checkbox-group .icheckbox.checked:after { font-size: 14px; line-height: 20px;}
 form .checkbox-group label { margin-right: 10px; margin-bottom: 10px; width: 95px; font-size: 14px; white-space: nowrap;}
 form .form-actions { flex-direction: column; align-items: flex-start;}
 form .form_tips { margin: 0 0 10px; padding-right: 0;}

}


@media (max-width: 480px) {
 .hotline { padding-left: 10px; margin-left: 15px; border-left: solid 1px #3091f2;}
 .hotline .icon-hotline { font-size: 20px;}
 .hotline p { font-size: 0; line-height: 0;}
 .hotline p a { font-size: 14px; line-height: 2.4;}

 /*.footer-top .footer-nav { width: 50%;}*/
 .footer-bottom { padding: 15px 0; background: none;}

 .section-service .cards { margin: 0 -6px 0 -6px;}
 .section-service .cards .card { padding: 0 6px; margin-bottom: 12px;}
 .section-service .card h3 { font-size: 16px; }
 .section-service .card p { font-size: 12px;}
 .section-service .btn-outline { display: none;}

 .grid-cards .grid-card { margin-bottom: 12px;}
 .grid-cards .grid-card h3 { top: 50%; font-size: 16px;}
 .grid-cards .grid-card a:hover h3 { top: 50%;}
 .grid-cards .grid-card p { display: none; bottom: -20px;}
 .grid-cards .grid-card a:hover p { bottom: 0;}

 .section-case .grid .grid-item { margin-bottom: 12px;}
 .section-case .grid .grid-item h4 { top: 0; height: 100%; display: flex; justify-content: center; align-items: center;}
 .section-case .grid .grid-item a:hover h4 { top: 0;}
 .vertical-tabs .nav-tabs { margin-bottom: 20px;}
 .vertical-tabs .tab-content .tab-pane.active { display: flex; justify-content: center; align-items: center; flex-direction: column;}
 .vertical-tabs .tab-content .tab-pane .grid-item p { display: none;}

 .section-news .img-text-list li { margin-bottom: 12px;}
 .section-news .img-text-list li a { padding-bottom: 12px;}
 .section-news .img-text-list li .list-body .headline h4 { margin: 0 0 8px;}

 .section-about-us .timeline { margin-bottom: 30px; margin-left: 15px; }
 .section-about-us .timeline-item { margin-bottom: 15px;}

 .section-contact form { padding: 20px;}
 form .form-group>label { font-size: 16px;}
 form .checkbox-group label { width: 90px; font-size: 12px;}

 .tile .tile-item h4 { top: 10px; font-size: 16px;}
 .tile .tile-item p { top: 45px; line-height: 1.2;}
 .tile .tile-item .overlay { display: none;}

 .category-item { width: 50px; height: 50px; border: solid 1px #c3cde6;}
 .category-item.active { border: solid 1px #3091f2;}
 .category-item .iconfont { margin-bottom: 3px; font-size: 16px;}
 .filter { display: none;}
 .page-section.section-waterfall { padding: 0;}

 .section-history .bg-bottom { width: 100%;}

 .waterfall-container .grid-item .card-body .caption { min-height: 35px; left: 10px; right: 10px; bottom: 10px; padding: 10px;}
 .waterfall-container .grid-item .card-text { padding: 10px;}
 .waterfall-container .grid-item .card-body .caption h3 { font-size: 14px;}
 .waterfall-container .grid-item .card-body .btn-unfold, .waterfall-container .grid-item .card-text .btn-fold { display: none;}
 .waterfall-honor .grid-item .caption h4 { font-size: 14px;}

 .grid-wrapper .grid .grid-item h4 { padding: 0 10px; font-size: 14px;}
 .grid-wrapper .grid .grid-item p { padding: 0 10px; font-size: 12px;}
 .grid-wrapper .grid .grid-item a:hover h4 { top: 15px;}
 .grid-wrapper .grid .grid-item a:hover p { top: 40px;}

 .waterfall-news .grid-item, .waterfall-news .grid-sizer { width: 50%;}
 .article-image-text-grid { margin-right: -14px;}
 .article-image-text-grid .grid-item { padding-right: 14px; margin-bottom: 14px;}
 .article-image-text-grid .grid-item .grid-item-text { padding: 10px 15px;}

 .article-text-list .list-item .headline { flex-direction: column;}
 .article-text-list .list-item h4 { margin-bottom: 5px; padding-right: 0;}

 .card-list { padding: 0;}
 .card-list li { margin-bottom: 20px;}
 .card-list li .card:hover, .card-list li.active .card { transform: scale(1);}

 .bubbles .bubble { display: none;}

 .text-with-image { flex-direction: column; align-items: flex-start;}
 .text-with-image figure.left { margin: 0 0 15px;}
 .text-with-image figure.right { margin: 0 0 15px; order: 0;}

 .card-list li { width: 50%;}

 .grid-cards .grid-card .btn-outline { display: none;}

 .social-media a { width: 30px; height: 30px; margin-right: 10px;}
 .social-media a .iconfont { font-size: 18px;}

 .article .article-header h1 { font-size: 18px; text-align: center;}
 .article .article-header p { font-size: 12px; text-align: center;}

 .cube figure img { width: 100%; height: auto;}

 .side-panel ul li figure img { width: 100px; height: auto;}
}