/*----------------------------------------------------------------------------------- CSS INDEX =================== 01. Common 02. Header 03. Banner 04. About 05. Sidebar 06. Footer 07. Solution 08. Core Product 09. About Two 10. Classic Case 11. Sub Company 12. Custom Contact 13. News Breadcrumb 14. News Content 15. Custom Banner 16. Common breadcrumb 17. Product Grid 18. Product Detial 19. Solution Page 20. Join 21. Example Page 22. About Page 23. About Page -- Credential 24. About Page -- Investor Relations 25. About Page -- Organizational Structure 26. About Page -- History 27. About Page -- Sub Company 28. Service page 29. Technology page -----------------------------------------------------------------------------------*/ /*=========================== COMMON CSS ===========================*/ @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap"); body { /* font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu; */ font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei"; font-weight: normal; font-style: normal; color: #333; overflow-x: hidden; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .cannot_selected { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } .text_nowrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; -webkit-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } a:focus, input:focus, textarea:focus, button:focus, .slick-initialized .slick-slide:focus, .btn:focus { text-decoration: none; outline: none; -webkit-box-shadow: none; box-shadow: none; } a:focus, a:hover { text-decoration: none; } i, span, a { display: inline-block; } h1, h2, h3, h4, h5, h6 { /* font-family: "Oswald", sans-serif; */ font-weight: 700; margin: 0px; } h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { color: #041d38; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul, ol { margin: 0px; padding: 0px; list-style-type: none; } p { margin: 0px; } a { /* -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; */ } a, a:hover { color: #409eff; } ::-webkit-scrollbar { /* 滚动条整体样式 */ width: 0px; /*高宽分别对应横竖滚动条的尺寸*/ height: 5px; } ::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background-color: #9e9e9e; } ::-webkit-scrollbar-track { /* 滚动条里面轨道 */ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0); border-radius: 10px; } /* body { overflow: overlay; } /* 需要滚动的地方加上这个class */ /* 组件内滚动条不显示 */ /* body::-webkit-scrollbar { display: none; } */ /* body::-webkit-scrollbar:hover { display: block; } */ /* 悬停时滚动条才显示 */ /* body:hover::-webkit-scrollbar { display: block; } */ input, select, textarea { width: 100%; height: 50px; border: 2px solid #ededed; font-size: 14px; /* font-weight: 600; */ /* font-family: "Oswald", sans-serif; */ color: #041d38; /* text-transform: uppercase; */ /* padding: 0 30px; */ } textarea { padding-top: 20px; height: 120px; } .input-group { position: relative; } .input-group input, .input-group textarea { padding-left: 65px; } .input-group .icon { position: absolute; left: 30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #409eff; } .input-group.textarea .icon { top: 20px; -webkit-transform: translateY(0); transform: translateY(0); } ::-webkit-input-placeholder { opacity: 1; } :-ms-input-placeholder { opacity: 1; } ::-ms-input-placeholder { opacity: 1; } ::placeholder { opacity: 1; } /*===== Common class Style =====*/ .blue_fc1 { color: #2a2e78 } #preloader { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background-color: #409eff; z-index: 9999999; } #preloader>div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; width: 100%; } #preloader>div div { height: 40px; width: 40px; background-color: #fff; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } .main-btn { font-size: 16px; font-weight: 400; font-family: "Oswald", sans-serif; color: #666666; text-transform: uppercase; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; padding: 15px 50px; background-color: #f0f0f0; opacity: 1; position: relative; border-radius: 28px } .main-btn::before { width: 10px; height: 2px; } .main-btn:hover { color: #666666; opacity: .7 } .main-btn.btn-borderd { border: 2px solid rgba(4, 29, 56, 0.1); background-color: transparent; } .main-btn.btn-borderd:hover { background-color: #409eff; border-color: #409eff; } .main-btn.btn-borderd:hover::after, .main-btn.btn-borderd:hover::before { background-color: #041d38; } /* .main-btn.btn-filled { background-color: #409eff; border-color: #409eff; } */ .main-btn.btn-filled::after, .main-btn.btn-filled::before { background-color: #041d38; } .main-btn.btn-filled:hover { background-color: transparent; border-color: rgba(4, 29, 56, 0.1); } .main-btn.btn-filled:hover::after, .main-btn.btn-filled:hover::before { background-color: rgba(4, 29, 56, 0.1); } .section-title h2 { font-size: 48px; text-transform: uppercase; line-height: 1.2; letter-spacing: -1px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .section-title h2 { font-size: 38px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-title h2 { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section-title h2 { font-size: 40px; } } @media (max-width: 575px) { .section-title h2 { font-size: 32px; } } @media (max-width: 399px) { .section-title h2 { font-size: 26px; } } .section-title span.title-tag { text-transform: uppercase; /* font-family: "Oswald", sans-serif; */ line-height: 1; font-size: 32px; display: inline-block; margin-bottom: 38px; position: relative; } .section-title.left-border span.title-tag { padding-left: 50px; } .section-title.left-border span.title-tag::before { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 4px; width: 30px; background-color: #2a2e78; content: ''; } .section-title.both-border span.title-tag { padding-left: 50px; padding-right: 50px; } .section-title.both-border span.title-tag::after { left: auto; right: 0; } /* Custom Container Width */ @media (min-width: 1600px) { .container-fluid.custom-container-one { max-width: 1520px; } } @media (min-width: 1600px) { .container-fluid.custom-container-two { max-width: 1400px; } } /* Animation keyfranes */ @-webkit-keyframes sticky { 0% { top: -200px; } 100% { top: 0; } } @keyframes sticky { 0% { top: -200px; } 100% { top: 0; } } @-webkit-keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @-webkit-keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @keyframes hvr-buzz-out { 10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); } 40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); } 50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); } 80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); } 90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); } 100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); } } @-webkit-keyframes ripple { 0%, 35% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0.8; } 100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2); } } @keyframes ripple { 0%, 35% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 0.8; } 100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2); } } @-webkit-keyframes ripple-white { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 40% { opacity: 0.2; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } @keyframes ripple-white { 0% { opacity: 0; -webkit-transform: scale(1); transform: scale(1); } 40% { opacity: 0.2; -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { opacity: 0; -webkit-transform: scale(1.4); transform: scale(1.4); } } /*=========================== Header ===========================*/ header { /*===== Header transparent =====*/ /*===== Header to area =====*/ /*===== Main Menu =====*/ /*===== Mobile Menu =====*/ /*===== Header two =====*/ /*===== Header three =====*/ /*===== Sticky Header =====*/ /* off canvas menu */ } header.header-absolute { position: absolute; left: 0; top: 0; width: 100%; z-index: 99; } header .header-top-area { padding: 0px 0; background: rgba(0, 0, 0, 0.1) } @media (max-width: 575px) { header .header-top-area { display: none; } } header .header-top-area .contact-list li, header .header-top-area .social-link li { display: inline-block; font-weight: 700; font-size: 16px; /* text-transform: uppercase; */ margin-right: 25px; /* font-family: "Oswald", sans-serif; */ } header .header-top-area .contact-list li:last-child, header .header-top-area .social-link li:last-child { margin-right: 0; } header .header-top-area .contact-list li, header .header-top-area .contact-list li a, header .header-top-area .social-link li, header .header-top-area .social-link li a { color: #fff; } header .header-top-area .contact-list li a:hover, header .header-top-area .social-link li a:hover { color: #409eff; } header .header-top-area .social-link { text-align: right; } header .header-top-area .social-link li { margin-right: 0; margin-left: 25px; } header .header-top-area .social-link li:first-child { margin-left: 0; } header .mainmenu-area { /* border: 1px solid red; */ /* background-color: #fff; */ position: relative; padding: 0px 50px; margin-top:30px } @media only screen and (min-width: 1200px) and (max-width: 1599px) { header .mainmenu-area { padding: 0 40px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { header .mainmenu-area { padding: 0 30px; } } header .mainmenu-area .main-menu { display: -ms-flexbox!important; display: flex!important; -ms-flex-pack: start!important; justify-content: flex-start!important; -ms-flex-align: center!important; align-items: center!important; } .mainmenu-area .logo{ position:absolute; left:10%; } .mainmenu-area .logo img { max-width: 125px; } @media (max-width: 1700px) { .mainmenu-area .logo{ position:absolute; left:100px; } } @media (max-width: 1440px) { .mainmenu-area .logo{ position:absolute; left:60px; } } @media (max-width: 399px) { header .mainmenu-area .main-menu .logo img { max-width: 120px; } } header .mainmenu-area .main-menu .menu-items { /* margin-left: 60px; */ } header .mainmenu-area { height:77px; } @media (max-width: 992px) { header .mainmenu-area .main-menu .menu-items{ display:none!important } } header .mainmenu-area .main-menu .menu-items ul:nth-child(1) { display: flex; } header .mainmenu-area .main-menu .menu-items ul li { display: inline-block; margin: 0px 40px 0 0; position: static; cursor: pointer; border-bottom:4px solid rgba(0,0,0,0) } header.header-two .mainmenu-area .main-menu { grid-column-gap: 90px; } header .mainmenu-area .apply-expre { margin:0 0px 0 70px; color:#409EFF; border: 1px solid #409EFF; border-radius: 17px; padding:1px 20px; font-size:18px; cursor:pointer } @media only screen and (min-width: 992px) and (max-width: 1599px) { header .mainmenu-area .main-menu .menu-items ul li { margin-right: 15px; } header .mainmenu-area .apply-expre{ margin-left:30px } } @media only screen and (min-width: 992px) and (max-width: 1200px) { header .mainmenu-area .main-menu .menu-items ul li { margin-right: 0; } } header .mainmenu-area .main-menu .menu-items ul li:last-child { margin-right: 0; } header .mainmenu-area .main-menu .menu-items ul li a { /* line-height: 74px; */ padding: 10px 10px 8px; color: #fff; font-family: "Microsoft YaHei",Helvetica,Arial,sans-serif; /* font-weight: 500; */ text-transform: uppercase; font-size: 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { header .mainmenu-area .main-menu .menu-items ul li .submenu { left: -34px; } .mainmenu-area .logo{ left:5% } } header .mainmenu-area .main-menu .menu-items>ul>li:hover,header .mainmenu-area .main-menu .menu-items> ul>li.active{ border-bottom:4px solid #409eff } header .mainmenu-area .main-menu .menu-items ul li:hover .submenu{ opacity:1; visibility:visible } /* header .mainmenu-area .main-menu .menu-items ul li:hover a , header .mainmenu-area .main-menu .menu-items ul li.active>a{ color: #409eff; } */ /* { color: #409eff; font-size: 18px; font-weight: bold; } */ /* header .mainmenu-area .main-menu .menu-items ul li.active>a:before { content: ''; width: 30px; height: 2px; display: inline-block; background-color: #409eff; position: absolute; bottom: 18px; left: 50%; margin-left: -15px; } */ header .mainmenu-area .main-menu .menu-items ul li .submenu { position: absolute; left: 0; text-align: center; top: 120%; width: 100%; /* margin-left:10%; */ /* background-color: #fff; */ opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 99; /* box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); -webkit-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); -moz-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); */ } header .mainmenu-area .main-menu .menu-items ul li .submenu>li { position: relative; display: inline-block; margin: 0; text-align: center; /* width:12%; */ margin:0 10px } header .mainmenu-area .main-menu .menu-items ul li .submenu>li a { display: block; padding: 0 15px; margin:20px 0; position: relative; color: #fff; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; border-radius: 0; line-height: 40px; font-size:16px } header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover { /* background-color: #409eff; */ color: #fff; } header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover>a { color: #fff; } header .mainmenu-area .main-menu .menu-items ul li .submenu>li .submenu { position: absolute; left: 100%; top: 30%; width: 200px; /* background-color: #fff; */ visibility: hidden; opacity: 0; } header .mainmenu-area .main-menu .menu-items ul li .submenu>li:hover .submenu { opacity: 1; visibility: visible; top: 0; } header .mainmenu-area .main-menu .menu-items ul li:hover .submenu { /* visibility: visible; */ opacity: 1; top: 100%; } header .mainmenu-area .main-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 575px) { header .mainmenu-area .main-right { display: none; } } header .mainmenu-area .main-right .offcanvas-trigger { margin-left: 20px; height: 60px; width: 60px; line-height: 60px; background-color: #409eff; border: 2px solid #409eff; color: #fff; text-align: center; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } @media (max-width: 767px) { header .mainmenu-area .main-right .offcanvas-trigger { display: none; } } header .mainmenu-area .main-right .offcanvas-trigger:hover { background-color: #041d38; border-color: #041d38; } header .mainmenu-area .main-right .offcanvas-trigger i { font-size: 30px; position: relative; top: 5px; } header .mobile-menu.mean-container .mean-bar { background-color: transparent; padding: 0; min-height: 0; } header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal { margin-right: 15px; margin-top: -62px; border: 2px solid rgba(255, 255, 255, 0.8); padding: 10px 10px; width: 26px; z-index: 222; } @media (max-width: 399px) { header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal { padding: 12px 10px; } } @media (max-width: 991px) { .mainmenu-area .logo{ left:12px } } @media (max-width: 575px) { header .mainmenu-area { background: #000; margin-top:0; padding:45px; } header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal{ margin-top:-68px } .mainmenu-area .logo img{ width:95px } } header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal span { background-color: rgba(255, 255, 255, 0.8); } header .mobile-menu.mean-container .mean-nav { margin-top: 0; background-color: #041d38; position: absolute; left: 0; top: 0; width: 100%; z-index: 99; } header .mobile-menu.mean-container .mean-nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } header .mobile-menu.mean-container .mean-nav ul li:last-child { border: none; } header .mobile-menu.mean-container .mean-nav ul li a { border: none; padding: 0; padding: 15px 18px; font-size: 14px; } header .mobile-menu.mean-container .mean-nav ul li li:first-child { border-top: 1px solid rgba(255, 255, 255, 0.2); } header .mobile-menu.mean-container .mean-nav ul li li a { padding: 15px 40px; } header .mobile-menu.mean-container .mean-nav ul li li li { border-top: 1px solid rgba(255, 255, 255, 0.2); } header .mobile-menu.mean-container .mean-nav ul li li li a { padding: 15px 60px; } header .mobile-menu.mean-container .mean-nav ul li a.mean-expand { border: none !important; width: 50px; height: 53px; padding: 0 !important; line-height: 53px; margin-top: 0; } header .mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover { background: transparent; } header.header-two .header-top-area { padding: 15px 0; background-color: #041d38; } header.header-two .mainmenu-area { border-bottom: 1px solid #f1f1f1; padding: 0; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { header.header-two .mainmenu-area { padding: 0; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { header.header-two .mainmenu-area { padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { header.header-two .mainmenu-area { padding: 15px 95px 15px 0; } } @media (max-width: 767px) { header.header-two .mainmenu-area { padding: 15px 95px 15px 0; } } @media (max-width: 575px) { header.header-two .mainmenu-area { margin-top: 0; } header .mainmenu-area .apply-expre { display:none } } @media only screen and (min-width: 1200px) and (max-width: 1599px) { header.header-two .mainmenu-area .main-menu { grid-column-gap: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { header.header-two .mainmenu-area .main-menu { grid-column-gap: 30px; } } header.header-two .mainmenu-area .main-right { text-align: right; } header.header-two .mainmenu-area .main-right .offcanvas-trigger { margin-left: 50px; } header.header-two .mainmenu-area .main-right .quote-icon { text-align: left; padding-left: 80px; position: relative; } header.header-two .mainmenu-area .main-right .quote-icon .icon { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } header.header-two .mainmenu-area .main-right .quote-icon span { font-weight: 700; font-size: 14px; color: #041d38; font-family: "Oswald", sans-serif; line-height: 24px; text-transform: uppercase; } header.header-two .mainmenu-area .main-right .quote-icon span span { display: block; font-size: 20px; color: #409eff; } @media (max-width: 767px) { header.header-two .mainmenu-area .main-right .quote-icon span span { font-size: 18px; } } header.header-three .mainmenu-area { background-color: transparent; padding: 15px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { header.header-three .mainmenu-area { padding: 15px 95px 15px 0; } } @media (max-width: 767px) { header.header-three .mainmenu-area { padding: 15px 95px 15px 0; } } header.header-three .mainmenu-area .main-menu { grid-column-gap: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { header.header-three .mainmenu-area .main-menu { grid-column-gap: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { header.header-three .mainmenu-area .main-menu { grid-column-gap: 30px; } } header.header-three .mainmenu-area .main-menu .logo img.sticky-logo { display: none; } header.header-three .mainmenu-area .main-menu .menu-items ul li { margin-right: 30px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { header.header-three .mainmenu-area .main-menu .menu-items ul li { margin-right: 0; } } header.header-three .mainmenu-area .main-menu .menu-items ul li a { color: #fff; line-height: 90px; } header.header-three .mainmenu-area .main-menu .menu-items ul li.active>a { color: #409eff; } header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover { background-color: #fff; } header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::after, header.header-three .mainmenu-area .main-right .main-btn.btn-filled:hover::before { background-color: #041d38; } header.header-three .mainmenu-area .main-right .offcanvas-trigger { background-color: #fff; border-color: #fff; color: #041d38; } header.header-three .mainmenu-area .main-right .offcanvas-trigger:hover { background-color: #409eff; border-color: #409eff; } header.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal { border-color: #fff; background-color: #fff; } header.header-three.sticky .mainmenu-area .main-menu .logo img.sticky-logo { display: block; } header.header-three.sticky .mainmenu-area .main-menu .logo img.normal-logo { display: none; } header.sticky { position: fixed; top: 0; left: 0; right: 0; background: rgba(43, 47, 66, .9); -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.04); z-index: 99; -webkit-animation: sticky 1.2s; animation: sticky 1.2s; } header.sticky .mainmenu-area { margin-top: 0; } header.sticky .mainmenu-area .main-menu .menu-items>ul>li:hover .submenu{ background: rgba(43, 47, 66, .5); } header.sticky .mainmenu-area .main-menu .menu-items>ul>li:hover .submenu>li a { color:#000; color:#fff /* background:#fff */ } header.sticky .mainmenu-area .main-menu .menu-items ul li a { /* line-height: 90px; */ } header.sticky .header-top-area { display: none; } header.sticky.header-three .mainmenu-area { padding: 0; } header.sticky .mainmenu-area .logo img{ width:100px } @media only screen and (min-width: 768px) and (max-width: 991px) { header.sticky.header-three .mainmenu-area { padding: 15px 95px 15px 0; } } @media (max-width: 767px) { header.sticky.header-three .mainmenu-area { padding: 15px 95px 15px 0; } } header.sticky.header-three .mainmenu-area .main-menu .menu-items ul li a { color: #1d2088; } header.sticky.header-three .mainmenu-area .offcanvas-trigger { background-color: #1d2088; border-color: #1d2088; color: #1d2088; } header.sticky.header-three .mainmenu-area .offcanvas-trigger:hover { background: transparent; border-color: rgba(4, 29, 56, 0.1); } header.sticky.header-three .mobile-menu.mean-container .mean-bar a.meanmenu-reveal { border-color: rgba(4, 29, 56, 0.1); background-color: transparent; } header .off-canvas-wrap { position: fixed; width: 450px; top: 0; min-height: 100vh; right: 0; -webkit-transition: all 0.4s; transition: all 0.4s; z-index: 9999999; margin-right: -450px; -webkit-box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08); box-shadow: 0px 8px 16px 0px rgba(73, 167, 211, 0.08); text-align: left; } header .off-canvas-wrap.show-off-canvas { margin-right: 0; } header .off-canvas-wrap .overly { position: fixed; height: 100vh; width: 100%; z-index: 998; background-color: #000; left: 0; top: 0; -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0; visibility: hidden; cursor: pointer; } header .off-canvas-wrap .overly.show-overly { visibility: visible; opacity: 0.6; } header .off-canvas-wrap .off-canvas-widget { padding: 90px 50px; background-color: #fff; height: 100vh; /* height: 860px; */ position: relative; z-index: 999; } header .off-canvas-wrap .off-canvas-widget a.off-canvas-close { position: absolute; right: 50px; top: 40px; font-size: 30px; color: #041d38; } header .off-canvas-wrap .off-canvas-widget .widget { margin-bottom: 50px; } header .off-canvas-wrap .off-canvas-widget .widget:last-child { margin-bottom: 0; } header .off-canvas-wrap .off-canvas-widget .widget .widget-title { font-size: 20px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -1px; } header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li { display: -ms-grid; display: grid; -ms-grid-rows: auto; grid-template-rows: auto; -ms-grid-columns: 120px 1fr; grid-template-columns: 120px 1fr; margin-bottom: 30px; } header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li:last-child { margin-bottom: 0; } header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-img { background-size: cover; background-position: center; } header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content { padding-left: 20px; } header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content h6 { margin-bottom: 15px; font-size: 18px; text-transform: uppercase; letter-spacing: -1px; line-height: 1.3; } header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time { font-size: 15px; font-weight: 500; } header .off-canvas-wrap .off-canvas-widget .widget.recent-post ul li .post-content .time i { margin-right: 10px; } header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li { font-size: 18px; color: #041d38; font-weight: 600; margin-bottom: 10px; padding-left: 25px; position: relative; } header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li i { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 15px; } header .off-canvas-wrap .off-canvas-widget .widget.contact-widget ul li a { color: #041d38; } header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a { height: 40px; width: 40px; line-height: 40px; border: 1px solid #041d38; color: #041d38; border-radius: 50%; text-align: center; font-size: 15px; margin-right: 10px; } header .off-canvas-wrap .off-canvas-widget .widget.social-widget ul li a:hover { background-color: #409eff; color: #fff; border-color: #409eff; } /*=========================== Banner ===========================*/ .banner-section { position: relative; z-index: 1; /* max-width: 1920px; */ } .banner-section .slider-active .slick-dots { position: absolute; left: 50%; bottom: 130px; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 50px; } @media (max-width: 767px) { .banner-section .slider-active .slick-dots { bottom: 50px; } } @media (max-width: 575px) { .banner-section .slider-active .slick-dots { bottom: 50px; } } .banner-section .slider-active .slick-dots li { display: inline-block; margin: 0 4px; } .banner-section .slider-active .slick-dots li button { font-size: 0; height: 15px; width: 15px; border: navajowhite; border-radius: 50%; background: white; webkit-box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); } .banner-section .slider-active .slick-dots li.slick-active button { background-color: #409eff; } /*=========================== About ===========================*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .about-tile-gallery { margin-bottom: 50px; } } @media (max-width: 767px) { .about-section .about-tile-gallery { margin-bottom: 50px; } } @media (max-width: 575px) { .about-section .about-tile-gallery { min-height: 450px; } } .about-section .about-tile-gallery img { position: absolute; } .about-text-image img{ /* width:80%; display:block; margin:0 auto; */ } .about-text-image video{ width:100%!important } .about-section .about-tile-gallery img.image-one { top: 0; left: 0; max-width: 400px; max-height: 450px; z-index: 1; } @media (max-width: 575px) { .about-section .about-tile-gallery img.image-one { max-width: 100%; } } .about-section .about-tile-gallery img.image-two { right: 20px; bottom: 0; max-width: 400px; max-height: 260px; z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .about-tile-gallery img.image-two { max-width: 340px; } } @media (max-width: 575px) { .about-section .about-tile-gallery img.image-two { right: 0; max-width: 300px; } } @media (max-width: 399px) { .about-section .about-tile-gallery img.image-two { max-width: 250px; } } .about-section .about-tile-gallery img.image-three { right: 20px; top: 20px; max-width: 160px; z-index: 2; } @media (max-width: 575px) { .about-section .about-tile-gallery img.image-three { right: -15px; } } .about-section .about-tile-gallery img.icon { top: 140px; right: 95px; z-index: 3; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .about-tile-gallery img.icon { right: 0; } } @media (max-width: 575px) { .about-section .about-tile-gallery img.icon { display: none; } } .about-section .about-tile-gallery img.zero-icon { z-index: 4; left: -45px; bottom: 20px; } @media (min-width: 1600px) { .about-section .about-tile-gallery img.zero-icon { bottom: 40px; left: -140px; } } @media (max-width: 575px) { .about-section .about-tile-gallery img.zero-icon { left: -30px; max-width: 150px; } } @media (max-width: 767px) { .about-section .about-text { padding-left: 0; } } .about-section .about-text .about-features .sngle-features { margin-bottom: 30px; } .about-section .about-text .about-features .sngle-features:last-child { margin-bottom: 0; } @media (max-width: 575px) { .about-section .about-text .about-features .sngle-features { -ms-grid-rows: 90px 1fr; grid-template-rows: 90px 1fr; } } .about-section .about-text .about-features .sngle-features .chart { position: relative; min-width: 94px; min-height: 94px; background-image: url(../img/white_round.png); } .about-section .about-text .about-features .sngle-features .chart .bg_01 { min-width: 94px; min-height: 94px; background-image: url(../img/blue_round.png); transform: rotate(270deg); -ms-transform: rotate(270deg); /* IE 9*/ -moz-transform: rotate(270deg); /* Firefox */ -webkit-transform: rotate(270deg); /* Safari 和 Chrome */ -o-transform: rotate(270deg); } .about-section .about-text .about-features .sngle-features .chart .bg_01 span { transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); font-size: 45px; font-weight: 600; } .about-section .about-text .about-features .sngle-features .chart .bg_02 { min-width: 94px; min-height: 94px; background-image: url(../img/blue_round.png); } .about-section .about-text .about-features .sngle-features .chart .bg_02 span { font-size: 45px; font-weight: 600; } .about-section .about-text .about-features .sngle-features .chart .bg_03 { min-width: 94px; min-height: 94px; background-image: url(../img/blue_round.png); transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .about-section .about-text .about-features .sngle-features .chart .bg_03 span { transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); font-size: 45px; font-weight: 600; } .about-section .about-text .about-features .sngle-features .chart span.icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 30px; color: #041d38; } .about-section .about-text .about-features .sngle-features .chart canvas { position: absolute; left: 0; top: 0; } .about-section .about-text .about-features .sngle-features .counter-box { text-align: center; color: #409eff; font-weight: 700; font-size: 48px; font-family: "Oswald", sans-serif; } .about-section .about-text .about-features .sngle-features .desc { font-size: 20px; line-height: 1.8; padding-left: 30px; } /* @media (max-width: 575px) { .about-section .about-text .about-features .sngle-features .desc { margin-top: 20px; grid-column: 1/-1; } } */ .about-section .about-text .about-features .sngle-features .desc h4 { margin-bottom: 15px; text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .about-text .about-features .sngle-features .desc h4 { font-size: 20px; } } .about-section .about-text .about-extra { padding-left: 215px; position: relative; margin-top: 80px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .about-text .about-extra { margin-top: 50px; padding-left: 180px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .about-text .about-extra { margin-top: 30px; padding-left: 0; padding-bottom: 200px; } } @media (max-width: 767px) { .about-section .about-text .about-extra { margin-top: 30px; padding-left: 0; padding-bottom: 200px; } } @media (max-width: 575px) { .about-section .about-text .about-extra { padding-bottom: 150px; } } @media (max-width: 575px) { .banner-section { padding-top: 89px; } } .about-section .about-text .about-extra .experience-tag { position: absolute; left: -335px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 6; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .about-section .about-text .about-extra .experience-tag { left: -315px; max-width: 500px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .about-text .about-extra .experience-tag { left: -220px; max-width: 350px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .about-text .about-extra .experience-tag { left: 0; bottom: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); top: auto; max-width: 100%; } } @media (max-width: 767px) { .about-section .about-text .about-extra .experience-tag { left: 0; bottom: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); top: auto; max-width: 100%; } } .about-section .about-tile-gallery-two { min-height: 550px; position: relative; z-index: 5; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .about-tile-gallery-two { min-height: 515px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .about-tile-gallery-two { margin-bottom: 50px; } } @media (max-width: 767px) { .about-section .about-tile-gallery-two { margin-bottom: 50px; } } @media (max-width: 575px) { .about-section .about-tile-gallery-two { min-height: 410px; } } .about-section .about-tile-gallery-two .image-two { position: absolute; left: -20px; bottom: 0; border-right: 20px solid #fff; border-top: 20px solid #fff; z-index: 1; } @media (min-width: 1600px) { .about-section .about-tile-gallery-two .image-two { left: -120px; } } @media (max-width: 575px) { .about-section .about-tile-gallery-two .image-two { left: -15px; } } .about-section.about-style-two .about-iconic-boxes { margin-bottom: -60px; z-index: 22; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section.about-style-two .about-iconic-boxes { margin-bottom: -240px; } } @media (max-width: 767px) { .about-section.about-style-two .about-iconic-boxes { margin-bottom: -240px; } } .about-section.about-style-two .about-iconic-boxes .iconic-box { padding: 30px 35px; background-color: #fff; -webkit-box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06); box-shadow: 0px 10px 20px 0px rgba(149, 183, 208, 0.06); position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section.about-style-two .about-iconic-boxes .iconic-box { padding: 30px 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section.about-style-two .about-iconic-boxes .iconic-box { margin-bottom: 30px; } } @media (max-width: 767px) { .about-section.about-style-two .about-iconic-boxes .iconic-box { margin-bottom: 30px; } } @media (max-width: 399px) { .about-section.about-style-two .about-iconic-boxes .iconic-box { padding: 30px 25px; } } .about-section.about-style-two .about-iconic-boxes .iconic-box h4 { text-transform: uppercase; letter-spacing: -1px; margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section.about-style-two .about-iconic-boxes .iconic-box h4 { font-size: 20px; } } @media (max-width: 399px) { .about-section.about-style-two .about-iconic-boxes .iconic-box h4 { font-size: 20px; } } .about-section.about-style-two .about-iconic-boxes .iconic-box .icon { position: absolute; right: 35px; top: 30px; height: 30px; width: 30px; text-align: center; line-height: 30px; background-color: #409eff; color: #041d38; z-index: 2; } .about-section.about-style-two .about-iconic-boxes .iconic-box .count { position: absolute; left: 0; bottom: 0; font-weight: 700; font-family: "Oswald", sans-serif; font-size: 70px; color: #f7fcff; z-index: -1; line-height: 1; } .about-section.about-style-two .about-text-warp { background-color: #f7fcff; position: relative; z-index: 1; padding-top: 120px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section.about-style-two .about-text-warp { padding-top: 280px; } } @media (max-width: 767px) { .about-section.about-style-two .about-text-warp { padding-top: 280px; } } .about-section.about-style-two .about-text-warp .mockup-img { position: absolute; right: 0; bottom: -110px; max-width: 1000px; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .about-section.about-style-two .about-text-warp .mockup-img { max-width: 800px; bottom: -80px; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section.about-style-two .about-text-warp .mockup-img { max-width: 575px; bottom: 42%; -webkit-transform: translateY(50%); transform: translateY(50%); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section.about-style-two .about-text-warp .mockup-img { display: none; } } @media (max-width: 767px) { .about-section.about-style-two .about-text-warp .mockup-img { display: none; } } .about-section.about-style-two .about-text-warp .about-small-img { position: absolute; top: 53%; left: 49%; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1599px) { .about-section.about-style-two .about-text-warp .about-small-img { left: 44%; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section.about-style-two .about-text-warp .about-small-img { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section.about-style-two .about-text-warp .about-small-img { display: none; } } @media (max-width: 767px) { .about-section.about-style-two .about-text-warp .about-small-img { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .about-img { margin-bottom: 50px; } } @media (max-width: 767px) { .about-section .about-img { margin-bottom: 50px; } } .about-section .with-man-shape { position: relative; padding-top: 150px; padding-bottom: 150px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .with-man-shape { padding-top: 120px; padding-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .with-man-shape { padding-top: 120px; padding-bottom: 500px; } } @media (max-width: 767px) { .about-section .with-man-shape { padding-top: 120px; padding-bottom: 360px; } } @media (max-width: 575px) { .about-section .with-man-shape { padding-bottom: 280px; } } @media (max-width: 399px) { .about-section .with-man-shape { padding-bottom: 120px; } } .about-section .with-man-shape .about-man-img { position: absolute; left: 0; bottom: 0; max-width: 575px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .with-man-shape .about-man-img { max-width: 450px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .with-man-shape .about-man-img { left: 50%; max-width: 345px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 767px) { .about-section .with-man-shape .about-man-img { left: 50%; max-width: 250px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 399px) { .about-section .with-man-shape .about-man-img { display: none; } } .about-section .with-man-shape .about-man-img .shape { position: relative; z-index: 1; } .about-section .with-man-shape .about-man-img .shape::after { content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-49%); transform: translateX(-49%); top: 100px; background-color: #409eff; height: 465px; width: 465px; border-radius: 50%; z-index: -1; } @media (max-width: 767px) { .about-section .with-man-shape .about-man-img .shape::after { height: 300px; width: 300px; } } .about-section .with-man-shape .about-text { padding-left: 80px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .about-section .with-man-shape .about-text { padding-left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-section .with-man-shape .about-text { padding-left: 0; } } @media (max-width: 767px) { .about-section .with-man-shape .about-text { padding-left: 0; } } /*=========================== Sidebar Style ===========================*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .sidebar { margin-top: 80px; } } @media (max-width: 767px) { .sidebar { margin-top: 80px; } } .sidebar .widget { padding: 40px; border: 2px solid #ededed; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .sidebar .widget { padding: 40px 20px; } } @media (max-width: 399px) { .sidebar .widget { padding: 40px 20px; } } .sidebar .widget .widget-title { font-size: 20px; text-transform: uppercase; margin-bottom: 40px; line-height: 1; position: relative; padding-left: 30px; } .sidebar .widget .widget-title::before { position: absolute; left: 0; top: 0; height: 100%; width: 2px; background-color: #409eff; content: ''; } .sidebar .widget.about-author-widget .author-box { font-size: 14px; text-align: center; } .sidebar .widget.about-author-widget .author-box h6 { font-size: 18px; text-transform: uppercase; letter-spacing: -1px; margin-top: 30px; padding-bottom: 20px; } .sidebar .widget.about-author-widget .author-box .social-icon { margin-top: 25px; } .sidebar .widget.about-author-widget .author-box .social-icon li { display: inline-block; margin: 0 5px; } .sidebar .widget.about-author-widget .author-box .social-icon li a { padding: 5px; color: #b3bed3; } .sidebar .widget.about-author-widget .author-box .social-icon li a:hover { color: #409eff; } .sidebar .widget.search-widget form { position: relative; } .sidebar .widget.search-widget form input { width: 100%; background-color: #f6f4ff; height: 60px; border: none; padding-left: 30px; padding-right: 60px; font-size: 14px; } .sidebar .widget.search-widget form button { border: none; position: absolute; right: 0; top: 0; width: 60px; height: 100%; z-index: 1; background-color: #409eff; font-size: 14px; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar .widget.search-widget form button:hover { background-color: #041d38; color: #fff; } .sidebar .widget.popular-feeds .single-popular-feed { display: -ms-grid; display: grid; -ms-grid-rows: 1fr; grid-template-rows: 1fr; -ms-grid-columns: 80px 1fr; grid-template-columns: 80px 1fr; grid-column-gap: 15px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e1e6ff; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .sidebar .widget.popular-feeds .single-popular-feed:last-child { margin-bottom: 0; padding-bottom: 0; border: none; } .sidebar .widget.popular-feeds .single-popular-feed .feed-desc h6 { text-transform: uppercase; font-size: 16px; margin-bottom: 10px; } .sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time { font-size: 14px; } .sidebar .widget.popular-feeds .single-popular-feed .feed-desc .time i { margin-right: 5px; } .sidebar .widget.categories-widget ul li { margin-bottom: 10px; } .sidebar .widget.categories-widget ul li:last-child { margin-bottom: 0; } .sidebar .widget.categories-widget ul li a { font-size: 14px; padding-left: 30px; height: 50px; background-color: #edf3ff; display: block; position: relative; line-height: 50px; color: #041d38; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar .widget.categories-widget ul li a span { position: absolute; right: 0; top: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: #d8e5ff; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar .widget.categories-widget ul li a:hover { background-color: #409eff; } .sidebar .widget.categories-widget ul li a:hover span { background-color: #ffc35c; } .sidebar .widget.socail-widget ul li { display: inline-block; margin-right: 10px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .sidebar .widget.socail-widget ul li { margin-right: 5px; } } @media (max-width: 399px) { .sidebar .widget.socail-widget ul li { margin-right: 5px; } } .sidebar .widget.socail-widget ul li a { height: 40px; width: 40px; line-height: 40px; font-size: 14px; color: #041d38; background-color: #edf3ff; text-align: center; } .sidebar .widget.socail-widget ul li a:hover { background-color: #409eff; } .sidebar .widget.twitter-feed-widget ul li { margin-bottom: 30px; padding-bottom: 30px; font-size: 12px; border-bottom: 1px solid #e1e6ff; padding-left: 35px; position: relative; } .sidebar .widget.twitter-feed-widget ul li::before { position: absolute; left: 0; top: 0; content: '\f099'; font-family: 'Font Awesome 5 Brands'; font-size: 14px; color: #409eff; } .sidebar .widget.twitter-feed-widget ul li:last-child { margin-bottom: 0; padding-bottom: 0; border: none; } .sidebar .widget.twitter-feed-widget ul li a { color: #041d38; } .sidebar .widget.twitter-feed-widget ul li .date { text-transform: uppercase; margin-top: 15px; font-weight: 500; } .sidebar .widget.instagram-feed-widget ul { display: -ms-flexbox!important; display: flex!important; -ms-flex-pack: start!important; justify-content: flex-start!important; -ms-flex-align: center!important; align-items: center!important; } .sidebar .widget.popular-tag-widget ul li { display: inline-block; margin-right: 5px; margin-bottom: 10px; } .sidebar .widget.popular-tag-widget ul li a { font-size: 12px; color: #041d38; padding: 10px 20px; background-color: #f4f4f4; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .sidebar .widget.popular-tag-widget ul li a { padding: 10px 15px; } } @media (max-width: 399px) { .sidebar .widget.popular-tag-widget ul li a { padding: 10px 15px; } } .sidebar .widget.popular-tag-widget ul li a:hover { background-color: #409eff; } .sidebar .widget.banner-ad-widget { padding: 0; border: none; } .sidebar .widget.contact-widget .input-group { margin-top: -2px; } .sidebar .widget.service-cat-widget li a, .sidebar .widget.brouchers-widget li a { display: block; border: 2px solid #ededed; padding: 15px 30px; text-transform: uppercase; color: #041d38; font-family: "Oswald", sans-serif; font-weight: 600; font-size: 14px; } .sidebar .widget.service-cat-widget li a:hover, .sidebar .widget.brouchers-widget li a:hover { background-color: #409eff; color: #fff; border-color: #409eff; } .sidebar .widget.service-cat-widget li:not(:last-child) a, .sidebar .widget.brouchers-widget li:not(:last-child) a { border-bottom: none; } .sidebar .widget.brouchers-widget li a i { margin-right: 20px; color: #409eff; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar .widget.brouchers-widget li a:hover i { color: #fff; } /*=========================== Footer ===========================*/ footer { background-color: #2B2F42; } @media (max-width: 575px) { footer .social-icon { margin-top: 30px; } } .copyrigt-or-code span { font-size: 22px; } footer .social-icon a { text-align: center; background-color: #14212b; color: #fff; height: 60px; width: 60px; line-height: 60px; border-radius: 50%; margin-left: 10px; } @media (max-width: 767px) { footer .social-icon a { font-size: 15px; line-height: 45px; height: 45px; width: 45px; } } @media (max-width: 399px) { footer .social-icon a { margin-left: 5px; } } footer .social-icon a:hover { background-color: #409eff; color: #14212b; } footer .footer-top { background-color: #091620; padding: 40px 0; } footer .footer-widget-area { padding-top: 90px; /* padding-bottom: 40px; */ } footer .footer-widget-area .widget { margin-bottom: 40px; text-align: center } footer .footer-widget-area .widget, footer .footer-widget-area .widget a { color: #fff; } footer .footer-widget-area .widget a:hover { color: #409eff; } footer .footer-widget-area .widget .widget-title { font-size: 20px; text-transform: uppercase; color: #fff; margin-bottom: 40px; font-weight: normal } @media only screen and (min-width: 768px) and (max-width: 991px) { footer .footer-widget-area .widget .widget-title { margin-bottom: 30px; } } @media (max-width: 767px) { footer .footer-widget-area .widget .widget-title { margin-bottom: 30px; } } footer .footer-widget-area .widget.nav-widget ul li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 38px; } footer .footer-widget-area .widget.recent-post .post-loop .post { display: -ms-grid; display: grid; -ms-grid-rows: auto; grid-template-rows: auto; -ms-grid-columns: 70px 1fr; grid-template-columns: 70px 1fr; grid-column-gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #283742; } @media (max-width: 991px) { .footer-widget-area .container .footerOne .footerWidth { flex: 0 0 100%; max-width: 100%; } .footer-widget-area .container .footerOne .footerNone { display: none; } .ys-text-align .maxWidth { flex: 0 0 50%; max-width: 50%; } .ys-text-align div { margin-bottom: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { footer .footer-widget-area .widget.recent-post .post-loop .post { grid-column-gap: 10px; } } footer .footer-widget-area .widget.recent-post .post-loop .post:last-child { margin-bottom: 0; padding-bottom: 0; border: none; } footer .footer-widget-area .widget.recent-post .post-loop .post .post-img { max-width: 70px; max-height: 70px; } footer .footer-widget-area .widget.recent-post .post-loop .post .time { font-size: 12px; color: #96abbb; text-transform: uppercase; font-family: "Oswald", sans-serif; font-weight: 700; } footer .footer-widget-area .widget.recent-post .post-loop .post .time i { color: #409eff; margin-right: 2px; } footer .footer-widget-area .widget.recent-post .post-loop .post h5 { font-size: 20px; line-height: 1.3; color: #fff; text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1200px) { footer .footer-widget-area .widget.recent-post .post-loop .post h5 { font-size: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { footer .footer-widget-area .widget.recent-post .post-loop .post h5 { font-size: 14px; } } @media (max-width: 575px) { footer .footer-widget-area .widget.recent-post .post-loop .post h5 { font-size: 16px; } } footer .copy-right-area .copyrigt-text { padding: 35px 0 60px; /* border-top: 1px solid #283742; */ /* font-weight: 700; */ font-size: 14px; color: #fff; text-align: center } @media (max-width: 767px) { footer .copy-right-area .copyrigt-text { font-size: 16px; } } @media (max-width: 575px) { footer .copy-right-area .copyrigt-text { text-align: center; } footer .copy-right-area .copyrigt-text p { margin-bottom: 10px; } footer .copy-right-area .copyrigt-text p:last-child { margin-bottom: 0; } } footer .copy-right-area .copyrigt-text a { color: #fff; } footer .copy-right-area .copyrigt-text a:hover { color: #409eff; } footer.footer-style-two { background-color: #041d38; } footer.footer-style-two .footer-widget-area { padding-bottom: 50px; } footer.footer-style-two .footer-widget-area .foter-logo { margin-bottom: 50px; } @media (max-width: 767px) { footer.footer-style-two .footer-widget-area .foter-logo { margin-bottom: 80px; } } footer.footer-style-two .footer-widget-area .widget { padding: 50px 35px; text-align: center; line-height: 38px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { footer.footer-style-two .footer-widget-area .widget { padding: 45px 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { footer.footer-style-two .footer-widget-area .widget { padding: 0; } } @media (max-width: 575px) { footer.footer-style-two .footer-widget-area .widget { padding: 0 30px; } } @media (max-width: 399px) { footer.footer-style-two .footer-widget-area .widget { padding: 0 15px; } } footer.footer-style-two .footer-widget-area .widget .widget-title { font-size: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px) { footer.footer-style-two .footer-widget-area .widget.about-widget { font-size: 15px; line-height: 30px; } } footer.footer-style-two .footer-widget-area .widget.getin-widget { background-color: #409eff; font-weight: 700; } @media (max-width: 767px) { footer.footer-style-two .footer-widget-area .widget.getin-widget { padding: 50px 0; } } footer.footer-style-two .footer-widget-area .widget.getin-widget li { line-height: 36px; } footer.footer-style-two .footer-widget-area .widget.getin-widget, footer.footer-style-two .footer-widget-area .widget.getin-widget .widget-title { color: #041d38; } footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 14px; padding: 10px 45px; text-transform: uppercase; background-color: #041d38; display: inline-block; margin-top: 30px; } footer.footer-style-two .footer-widget-area .widget.getin-widget .getin-btn:hover { background-color: #041d38; color: #fff; } footer.footer-style-two .copy-right-area { background-color: #021529; padding: 15px 0; } @media (max-width: 767px) { footer.footer-style-two .copy-right-area { padding: 20px 0; } } footer.footer-style-two .copy-right-area .copyrigt-text { padding: 0; border: none; } @media (max-width: 767px) { footer.footer-style-two .copy-right-area .social-icon { margin-top: 15px; } } footer.footer-style-two .copy-right-area .social-icon a { background-color: #041d38; } footer.footer-style-three { background-color: #fff; } footer.footer-style-three .footer-top { background-color: #f7fcff; } footer.footer-style-three .footer-top .social-icon a { background-color: #fff; color: #041d38; } footer.footer-style-three .footer-top .social-icon a:hover { background-color: #409eff; } footer.footer-style-three .footer-widget-area .widget, footer.footer-style-three .footer-widget-area .widget a { color: #041d38; } footer.footer-style-three .footer-widget-area .widget a:hover { color: #409eff; } footer.footer-style-three .footer-widget-area .widget .widget-title { color: #041d38; } footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post { border-color: #f2f3f4; } footer.footer-style-three .footer-widget-area .widget.recent-post .post-loop .post .time { color: #409eff; } footer.footer-style-three .copy-right-area .copyrigt-text { color: #041d38; border-color: #d8e0e9; } footer.footer-style-three .copy-right-area a { color: #041d38; } footer.footer-style-three .copy-right-area a:hover { color: #409eff; } /*===== Go Top =====*/ .go-top-area { position: relative; z-index: 9999; } .go-top-area .go-top { position: fixed; cursor: pointer; top: 0; right: 24px; color: #ffffff; background-color: #409eff; z-index: 9999; width: 40px; text-align: center; height: 42px; line-height: 42px; opacity: 0; visibility: hidden; -webkit-transition: all 0.9s ease-out 0s; transition: all 0.9s ease-out 0s; border-right: 0; } .go-top-area .go-top i { position: absolute; top: 50%; left: -4px; right: 0; margin: 0 auto; font-size: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .go-top-area .go-top i:last-child { opacity: 0; visibility: hidden; top: 60%; } .go-top-area .go-top::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: #409eff; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .go-top-area .go-top:focus, .go-top-area .go-top:hover { color: #fff; } .go-top-area .go-top:focus::before, .go-top-area .go-top:hover::before { opacity: 1; visibility: visible; } .go-top-area .go-top:focus i:first-child, .go-top-area .go-top:hover i:first-child { opacity: 0; top: 0; visibility: hidden; } .go-top-area .go-top:focus i:last-child, .go-top-area .go-top:hover i:last-child { opacity: 1; visibility: visible; top: 50%; } .go-top-area .go-top.active { top: 98%; -webkit-transform: translateY(-98%); transform: translateY(-98%); opacity: 1; visibility: visible; border-radius: 0; right: 20px; } @media only screen and (min-width: 992px) and (max-width: 1200px) { .go-top-area .go-top.active { top: 93%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .go-top-area .go-top.active { top: 93%; } } .go-top-wrap { position: relative; } .go-top-wrap .go-top-btn { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: #fff; top: 3px; z-index: 1; background: #409eff; } .go-top-wrap .go-top-btn i { font-size: 20px; font-weight: 700; padding-left: 4px; color: #fff; } .go-top-wrap .go-top-btn::after { z-index: -1; content: ''; position: absolute; left: 0; top: 0; width: 40px; height: 40px; -webkit-animation: ripple 1.6s ease-out infinite; animation: ripple 1.6s ease-out infinite; opacity: 0; background: #409eff; } .go-top-wrap .go-top-btn:hover { background-color: #000; color: #fff; } /*=========================== Solution ===========================*/ .solution-section { position: relative; /* background-color: #f7fcff; */ } .solution-section .solution-content { font-size: 25px; } .solution-section .solution-btn { border: #2a2e78 1px solid; padding: 5px 40px; font-weight: 600; color: #2a2e78; cursor: pointer; } .solution-section .solution-btn:hover { color: #409eff; border: #409eff 1px solid; } .solutionItem{ /* border:1px solid red; */ padding: 35px 70px; /* box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%); */ box-shadow:0px 0px 13px 0px rgb(158 158 158 / 26%); position:relative; background:#fff; cursor:pointer } .solution-section .container{ } .solution-section .container:hover .solutionItem{ box-shadow:0px 0px 13px 0px rgb(158 158 158 / 80%); } .solution-section .solutionTitle{ font-size:20px; font-weight:bold; height: 49px; line-height: 49px; color:#fff; background: url(../img/product/h1_bg.png) no-repeat; position:absolute; left:0; top:35px; width:70%; padding-left:70px; } .solution-section .solutionInner{ padding-top:60px; } .solution-section .solutionInner p{ font-size:16px; font-weight:bold; /* padding-top:30px; */ } @media(max-width:768px){ .solutionItem{ padding:40px 15px; } .solution-section .container{ padding:30px 15px; } .solution-section .solutionTitle{ font-size: 18px; height: 40px; line-height: 40px; background-size:contain; width: 100%; padding-left: 15px; } } /*=========================== Core Product ===========================*/ .coreproduct-section { position: relative; } .coreproduct-section .grid_titlle { height: 45px; background-color: #2a2e78; color: white; font-size: 20px; text-align: center; } .coreproduct-section .grid_item { margin-top: 20px; } .coreproduct-section .grid_item>div { height: 470px; } .coreproduct-section .grid_img { height: 252px; overflow: hidden; } .coreproduct-section .grid_img>div { height: 252px; background-size: cover; background-position: center center; -webkit-transition: 0.3s; transition: 0.3s; } .coreproduct-section .grid_img>div:hover { -webkit-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); } .coreproduct-section .grid_item p { font-size: 16px; text-indent: 25px; padding: 15px 15px 0; } .coreproduct-section .grid_item .grid_button { margin-right: 15px; color: #2a2e78; padding-bottom: 20px; font-weight: 600; } /*=========================== About Two ===========================*/ .abouttwo-section { position: relative; } .abouttwo-section .abouttwo_item { width: 50%; height: 506px; } .abouttwo-section .abouttwo_content { padding: 0 40px 40px; background-color: #2a2e78; } .abouttwo-section .abouttwo_content>span { color: white; padding: 45px; font-size: 40px; } .abouttwo-section .abouttwo_content p { color: white; font-size: 18px; text-indent: 30px; line-height: 1.9; } .abouttwo-section .abouttwo_content a { color: white; font-size: 16px; cursor: pointer; } .abouttwo-section .abouttwo_content a:hover { color: #409eff; } .abouttwo-section .abouttwo_img { background-size: cover; background-position: center center; background-repeat: no-repeat; } @media (max-width: 774px) { .abouttwo-section .abouttwo_item { width: 100%; height: 506px; } } @media only screen and (min-width: 774px) and (max-width: 1120px) { .abouttwo-section .abouttwo_content p { color: white; font-size: 16px; text-indent: 30px; line-height: 1.6; } } @media (max-width:570px) { .abouttwo-section .abouttwo_content>span { color: white; padding: 30px 45px; font-size: 40px; } } @media (max-width:445px) { .abouttwo-section .abouttwo_content>span { color: white; padding: 25px 30px; font-size: 35px; } .abouttwo-section .abouttwo_content { padding: 0 30px 30px; } .abouttwo-section .abouttwo_content p { color: white; font-size: 16px; text-indent: 30px; line-height: 1.9; } } @media (max-width:321px) { .abouttwo-section .abouttwo_content { height: 526px; } } /*=========================== Classic Case ===========================*/ .classic-case-section { position: relative; } .classic-case-section .case-img { position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .classic-case-section .case-img { margin-top: 60px; } } @media (max-width: 767px) { .classic-case-section .case-img { margin-top: 60px; } } .classic-case-section .case-img::after { position: absolute; right: -25px; bottom: -25px; width: 180px; height: 180px; background-color: #2a2e78; content: ''; -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 100%, 100% 100%); z-index: -1; } .classic-case-section .case-left { position: relative; z-index: 1; margin-top: 26px; height: 100%; } .classic-case-section .case-left h1, strong { /* color: #2a2e78; */ } .classic-case-section .case-left a { color: #2a2e78; font-size: 20px; text-decoration: underline; padding-bottom: 15px; cursor: pointer; } .classic-case-section .case-left a:hover { color: #409eff; } .classic-case-section .case-left::before { position: absolute; top: -26px; width: 180px; height: 180px; background-color: #2a2e78; content: ''; -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0); clip-path: polygon(100% 0, 0% 100%, 0 0); z-index: -1; } .classic-case-section .case-left h1 { font-size: 30px; padding: 20px 0; } .classic-case-section .case-left p { font-size: 16px; padding: 20px 0 0 0; text-indent: 30px; } .classic-case-section .section-title h2 { background-color: #2a2e78; color: white; padding: 10px 0; line-height: 1.5; width: 300px; } /*=========================== Sub Company ===========================*/ .sub-company-section { position: relative; background-image: url(../img/sub_company_bg.png); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 1081px; } @media (max-width: 575px) { .sub-company-section { position: relative; background-image: none; height: 100%; } } .sub-company-section .icon { width: 25px; height: 25px; fill: currentColor; overflow: hidden; } .sub-company-section .phone { margin-top: 20px; } .sub-company-section hr { margin-top: 30px; } .sub-company-section .company-short-name { width: 100px; } .sub-company-section .company-name { width: 300px; text-align: right; } @media (max-width: 490px) { .sub-company-section .company-name { width: 180px; text-align: right; } } @media (max-width: 320px) { .sub-company-section .company-name { width: 150px; text-align: right; } } /*=========================== Custom Contact ===========================*/ .cus-contact-section { position: relative; } .cus-contact-section .contact-btn { text-align: center; height: 80px; width: 480px; border-radius: 40px; position: relative; } .cus-contact-section .contact-btn span { font-size: 30px; } .cus-contact-section h2 { font-weight: 400; color: #2a2e78; } .cus-contact-section h1 { letter-spacing: 10px; font-weight: 400; color: #2a2e78; } .cus-contact-section p { font-size: 16px; font-weight: 500; } .cus-contact-section .contact-btn::after { content: url("../img/contact.png"); position: absolute; left: 400px; top: 2px; color: #2a2e78 } .cus-contact-section .contact-btn span { color: #2a2e78; } @media (max-width: 575px) { .cus-contact-section .contact-btn { width: 380px; } .cus-contact-section .contact-btn::after { left: 300px; } } /*=========================== News Breadcrumb ===========================*/ .news-breadcrumb-section { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; } .news-breadcrumb-section img { max-height: 89px; max-width: 480px; } @media (max-width: 575px) { .news-breadcrumb-section { height: 370px; padding-top: 200px; } .news-breadcrumb-section img { max-height: 62px; max-width: 336px; } } /*=========================== News Content ===========================*/ .news-content-section { position: relative; /* background-color: #f6f6fe; */ } .news-content-section .read_content{ overflow:hidden; } .news-content-section .read_content img{ width:100%; max-width:100%!important; } .news-content-section .menu-1 { color: white; font-size: 24px; padding: 0 0; text-align: center } .news-content-section .menu-1 .title { background-color: #2a2e78; padding: 15px 0 15px 15px; } .news-content-section .menu-1 ul li { color: #202A67; /* background-color: #e0e0f8; */ font-size: 20px; cursor: pointer; display: inline-block; position: relative; margin-bottom: 37px; } .news-content-section .menu-1 ul li a { padding: 12px 30px; width: 100%; color: #333 } .news-content-section .menu-1 .unactive { padding: 10px 0 10px 31px; } .news-content-section .menu-1 ul { padding: 0px 15px; } .news-content-section .menu-1 ul .active a { cursor: default; color: #202A67; } .news-content-section .menu-1 ul .active::before { content: ""; color: #2a2e78; width: 100%; height: 2px; background: #202A67; position: absolute; bottom: 0; } .news-content-section .menu-2 { display: none; } .news-content-section .menu-2 li { display: inline-block; width: 50%; text-align: center; font-size: 20px; color: #2a2e78; padding: 10px 0; background-color: #e0e0f8; cursor: pointer; } .news-content-section .menu-2 li.active { background-color: #2a2e78; color: white; cursor: default; } .news-content-section .container .el-pagination button, .news-content-section .container .el-pagination ul li { height: 33px; line-height: 33px; background-color: #fff; border: 1px solid #C5C5C5; font-size: 12px; font-weight: bold; padding: 0px 12px; } .news-content-section .container .el-pagination ul li { font-size: 13px; } @media (max-width: 991px) { .news-content-section .container .el-pagination { display: flex; width: 100%; } .news-content-section .container .page-des, .news-content-section .container .page-des2 { display: none; } .news-content-section .container .el-pagination .el-pager { align-items: center; text-align: center; margin: 0 auto; } .news-content-section .container .el-pagination .btn-next { float: right; } } @media (max-width: 768px) { .news-content-section .container .el-pagination { width: 100%; } .news-content-section .container .el-pagination ul li { display: none; } .news-content-section .container .el-pagination .btn-next { float: right; } } @media (max-width: 768px) { .news-content-section .menu-1 { display: none; } .news-content-section .menu-2 { display: block; } } .news-content-section .content li { /* border-bottom: 1px solid #E6E6E6; */ margin-left: 0; margin-right: 0; /* padding: 25px; */ position: relative } .news-content-section .content li:before { /* content: ""; */ /* color: #2a2e78; */ /* margin-right: 10px; */ width: calc(100% - 30px); height: 1px; /* background: #E6E6E6; */ /* position: absolute; */ /* bottom: 0; */ } .news-content-section .content li:hover { background-color: #F5F5F5; } .news-content-section .content li:hover .more { background: #CCCCCC; color: #fff; } .news-content-section .content li:hover::before { height: 0 } .news-content-section .content .img { background-position: center center; background-repeat: no-repeat; background-size: cover; height: 169px; } .news-content-section .content .hr1 a { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; width: 100% } .news-content-section .content .hr1 span { min-width: 80px; font-size: 14px; color: #969696; display: block; margin-bottom: 10px; } @media (max-width: 575px) { .news-content-section .content .hr1 { margin-top: 15px; } } .news-content-section .content .hr2 { color: #666; font-size: 14px; } .news-content-section .content .hr3 .more { color: #333; text-align: center; font-size: 15px; border: 1px solid #E6E6E6; margin-top: 15px; padding: 8px 23px; cursor: pointer; } /* .news-content-section .content .hr3 .more:hover { color: #409eff; width: 180px; text-align: center; font-size: 23px; height: 40px; border: #409eff 1px solid; border-radius: 20px; margin-top: 15px; } */ .news-content-section .content .page a { /* background-color: #DFEBFF; */ margin-right: 5px; font-size: 12px; color: #646464; font-weight: bold; border: 1px solid #9A9A9A; padding: 6px 12px; cursor: pointer; box-sizing: content-box; border-radius: 2px; } .news-content-section .content .page a:hover, .news-content-section .content .page a.active { color: white; font-weight: bold; border: 1px solid rgba(0, 0, 0, 0); background: #409eff; } .news-content-section .content .page a.previous, .news-content-section .content .page a.next { padding: 6px 12px; } .news-content-section .content .page span { margin: 0 5px; } .news-content-section .content .page a.disable { color: #C5C5C5; border: none; background-color: white; border: 1px solid #C5C5C5; cursor: default; } .news-content-section .content .read_content { background-color: white; /* padding: 30px 20px; */ } .news-content-section .content .read_content .new-read-title h1 { text-align: center; font-size: 24px; font-weight: 600; } .news-content-section .content .read_content .new-read-title2 { padding: 10px 0 0; max-width: 800px; margin: 0 auto } .news-content-section .content .read_content .new-read-title2 span { font-size: 14px; color: #999; margin-right:28px; display:inline-block; } .news-content-section .content .read-page { padding: 80px 0 30px; color: #666 } .news-content-section .content .read-page a { margin-right: 5px; padding: 5px 10px; border: 1px solid #666; font-size: 14px; color: #666; /* text-decoration: underline; */ cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-content-section .content .read-page a.disable { color: #757a89; cursor: default; } .news-content-section .content .read-page a:hover { color: #409eff; } .news-content-section .content .read-page a.disable:hover { color: #757a89; cursor: default; } .news-content-section .content .read-page a.previous, .news-content-section .content .read-page a.next { max-width: 280px; } .news-content-section .content .read-page a.min-previous, .news-content-section .content .read-page a.min-next { display: none; } @media (max-width: 989px) { .news-content-section .content .read-page a.min-previous, .news-content-section .content .read-page a.min-next { display: inline-block; } .news-content-section .content .read-page a.previous, .news-content-section .content .read-page a.next { display: none; } } .news-content-section .menu-1 ul.related li { padding: 0; color: #2a2e78; margin-bottom: 2px; background-color: white; font-size: 20px; cursor: pointer; } .news-content-section .menu-1 ul.related li a { padding: 13px 0 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; color: #2a2e78; } .news-content-section .related2 { display: none; } .news-content-section .related2 li { padding: 0; color: #2a2e78; margin-bottom: 2px; background-color: white; font-size: 20px; cursor: pointer; } .news-content-section .related2 li a { padding: 13px 0 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; color: #2a2e78; } .news-content-section .related2 .title { background-color: #2a2e78; padding: 15px 0 15px 15px; color: white; } @media (max-width: 768px) { .news-content-section .related2 { display: block; } .news-content-section .content .read_content .new-read-title2 { width: 50%; min-width: 350px; } } @media (min-width: 768px) { .news-content-section .content .read_content .new-read-title2 { /* text-align: center */ } } /* 相关新闻 */ .relNewBox { box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%); /* height: 200px; */ margin: 20px 0 60px; padding-top: 30px; padding-bottom: 40px } .relNewBox li div { display: inline-block } .relNewsList { border-bottom: 1px dashed #999; color: #333; margin-top: 10px; padding-bottom: 10px } .relNewsList img { display: inline-block; margin-right: 10px; } .relNewsList div:first-child { width: calc(100% - 100px) } .relNewsList div:last-child { width: 200px; text-align: right; } .relNewsList:hover { border-bottom: 1px solid #409eff; } /*=========================== Custom Banner ===========================*/ .banner-section .bg-img { background-size: cover; background-position: center center; background-repeat: no-repeat; max-width: 100%; height: 860px; } @media(max-width:1440px) { .banner-section .bg-img { height: 90vh; max-height: 860px; } } .banner-section .bannerContent0 { margin-top: 320px; } .banner-section .bannerContent0 img:nth-child(1) { max-width: 609px; max-height: 97px; } .banner-section .bannerContent0 img:nth-child(2) { margin-top: 50px; max-width: 668px; max-height: 112px; } @media (max-width: 780px) { .banner-section .bg-img { height: 470px; } .banner-section .bannerContent0 { margin-top: 190px; } .banner-section .bannerContent0 img:nth-child(1) { max-width: 304px; max-height: 48px; } .banner-section .bannerContent0 img:nth-child(2) { margin-top: 25px; max-width: 334px; max-height: 56px; } } /*=========================== Common Breadcrumb ===========================*/ .common-bradcrumb-section { position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; height:600px } @media (max-width: 1200px) { .common-bradcrumb-section { height:400px; } } @media (max-width: 575px) { .common-bradcrumb-section { height:200px; margin-top:90px } } /*=========================== Product Grid ===========================*/ .product-grid-section .content .img { background-position: center center; background-repeat: no-repeat; background-size: contain; height: 230px; /* width:90%; */ margin:0 auto; display:flex; justify-content: center; align-items: center; } .product-grid-section .content .img img{ width:80% } .product-grid-section { position: relative; /* background-color: #f6f6fe */ } .product-grid-section .row-tabs { margin-right: 0; margin-left: 0; } .product-grid-section ul a { display: inline-block; height: 60px; position: relative; /* width: 14.28571428571429%; */ padding: 0 10px; } .product-grid-section .grid-isotope .software { padding-right: 20px; padding-left: 20px; padding-bottom: 0px; } .product-grid-section ul a { padding-left: 0; padding-right: 10px; } .product-grid-section ul a { } .product-grid-section ul a { vertical-align: bottom; /* width: 10%; */ height: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.6); color: #fff; font-size: 20px; font-weight: bold; /* padding: 20px 20px; */ height:90px; line-height:90px; display: inline-block; margin: 0 ; } .product-grid-section ul{ /* height:110px; line-height:110px; */ } @media (max-width: 575px) { .news-content-section .content .page span { /* display: none; */ } .product-grid-section ul{ /* height:0; line-height:0 */ } .news-content-section .content .page a { display: none; } .news-content-section .content .page a.previous, .news-content-section .content .page a.next { display: inline-block; } .news-content-section .content .page a.previous { margin-right: 150px; } } .product-grid-section ul a.active, .product-grid-section ul a:hover { height:110px; line-height:110px; background: linear-gradient(0deg, rgba(255,255,255,0.3), rgba(50,133,216,0.3)); border: 1px solid #43648B; border-bottom:0; color: white; cursor: pointer; font-size:24px; vertical-align: bottom; } .product-grid-section ul a.active { color: #fff; } .product-grid-section ul a:hover { color: white !important; cursor: pointer; } @media (max-width: 1200px) { .product-grid-section ul a { text-align: center; font-size:15px; height:75px; line-height:75px; font-size:16px } .product-grid-section ul a.active, .product-grid-section ul a:hover { height: 90px; line-height: 90px; font-size:18px } .product-grid-section .content .img { height: 180px; } } @media (max-width: 999px) { .product-grid-section .content .img { height: 150px; } .product-grid-section ul a { } .product-grid-section ul a { padding-left: 10px; padding-right: 10px; } .product-grid-section ul a { padding:0; } } @media (max-width: 575px) { .product-grid-section ul a { text-align: center; font-size:15px; height:40px; line-height:40px } .product-grid-section ul a.active, .product-grid-section ul a:hover { height: 50px; line-height: 50px; } .product-grid-section ul a { /* text-align: center; padding: 10px 10px; font-size:14px; margin: 0 4px 5px; */ /* width:calc(100% - 30px); */ } } .product-grid-section .grid-isotope { background-color: white; } .product-grid-section .grid-isotope .product-grid-box { margin: 20px 0; /* border: #8386d5 2px solid; */ border-radius: 5px; position: relative; box-shadow: 0px 2px 17px 4px rgba(158, 158, 158, 0.15); cursor: pointer; } .product-grid-section .grid-isotope .product-grid-box:hover { box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 30%); } .product-grid-section .grid-isotope .product-grid-box .product-img { padding: 30px 0; overflow: hidden; z-index: -2; } .product-grid-section .grid-isotope .product-grid-box .product-img img { height: 250px; /* max-width: 250px; */ padding: 0px 15px; margin: 0 auto; display: block; } .product-grid-section .grid-isotope .product-grid-box .title { height: 80px; /* background-color: #8386d5; */ color: #000; z-index: -2; padding: 0 10px; text-align: center; } .product-grid-section .grid-isotope .product-grid-box .title span { width: 100%; color: #000; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } .product-grid-section .grid-isotope .product-grid-box .title div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-grid-section .grid-isotope .product-grid-box .title div span { width: 100%; color: #000; font-size: 16px; padding: 0 40px; font-weight: 400; } .product-grid-section .grid-isotope .product-grid-box .product-link { position: absolute; top: 27%; width: 100%; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; color: #fff; font-size: 40px; z-index: 2; opacity: 0; visibility: hidden; } .product-grid-section .grid-isotope .product-grid-box .product-link p { font-size: 18px; text-align: center; } .product-grid-section .grid-isotope .product-grid-box .product-link span { max-height: 230px; font-size: 15px; padding: 0px 15px; text-align: center; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } .product-grid-section .grid-isotope .product-grid-box .product-link p img { max-width: 160px; margin-bottom: 10px; } .product-grid-section .grid-isotope .product-grid-box::after { content: ''; /* position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #041d38; z-index: 1; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; visibility: hidden; */ } .product-grid-section .grid-isotope .product-grid-box:hover::after { opacity: 0.9; visibility: visible; } .product-grid-section .grid-isotope .product-grid-box:hover .product-link { opacity: 1; visibility: visible; } /*=========================== Product Detail ===========================*/ .product-detial-section { position: relative; background-color: #f6f6fe; } .product-detial-section .up-level-page a { color: #2a2e78; font-size: 22px; text-decoration: underline; cursor: pointer; } .product-detial-section .up-level-page a:hover { color: #409eff; } .product-detial-section .article { background-color: white; padding: 0 45px; } @media (max-width: 575px) { .product-detial-section .article { padding: 0 5px; } } .product-detial-section .article .title h1 { font-size: 30px; font-weight: 500; color: #010432; text-align: center; } .product-detial-section .article h2 { font-size: 24px; font-weight: 400; color: #2a2e78; border-left: 8px #2a2e78 solid; } .product-detial-section .article .fun-box .img-box { overflow: hidden; float: right; } .product-detial-section .article .fun-box .img-box img { height: 250px; max-width: 250px; } .product-detial-section .article .fun-box p { padding-bottom: 10px; font-size: 16px; color: #010432; } .product-detial-section .article .fun-box p::before { content: "■"; color: #010432; margin-right: 10px; } .product-detial-section .article .params-box { border: #8386d5 solid; border-width: 0 1px 0 1px; } @media (max-width: 1007px) { .product-detial-section .article .params-box { overflow-x: auto; } } .product-detial-section .article .params-box table { width: 100%; min-width: 768px; border: #8386d5 solid; border-width: 1px 0 0 0; } .product-detial-section .article .params-box table th { background-color: #e0e0f8; padding: 0 10px; height: 50px; } .product-detial-section .article .params-box table th:nth-child(1) { border: #8386d5 solid; border-width: 0 1px 1px 0; } .product-detial-section .article .params-box table th:nth-child(2) { border: #8386d5 solid; border-width: 0 0 1px 0; } .product-detial-section .article .params-box table th:nth-child(3) { border: #8386d5 solid; border-width: 0 0 1px 1px; } .product-detial-section .article .params-box table th:nth-child(4) { border: #8386d5 solid; border-width: 0 0 1px 1px; } .product-detial-section .article .params-box table th span { display: inline-block; } .product-detial-section .article .params-box table th span:nth-child(2) { display: inline-block; font-weight: 400; font-size: 14px; } .product-detial-section .article .params-box table td { padding: 0 10px; height: 50px; } .product-detial-section .article .params-box table td:nth-child(1) { border: #8386d5 solid; border-width: 0 1px 1px 0; } .product-detial-section .article .params-box table td:nth-child(2) { border: #8386d5 solid; border-width: 0 0 1px 0; } .product-detial-section .article .params-box table td:nth-child(3) { border: #8386d5 solid; border-width: 0 0 1px 1px; } .product-detial-section .article .params-box table td:nth-child(4) { border: #8386d5 solid; border-width: 0 0 1px 1px; } .product-detial-section .page a { color: #2a2e78; font-size: 22px; text-decoration: underline; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 415px; } .product-detial-section .page a:hover { color: #409eff; } /*=========================== Solution Page ===========================*/ .solution-page-section { position: relative; background-color: #f6f6fe; } .solution-page-section .tab-menu-1 { color: white; font-size: 24px; padding: 0 0; } .solution-page-section .tab-menu-1 .title { background-color: #2a2e78; padding: 15px 0 15px 15px; } .solution-page-section .tab-menu-1 ul li { color: #2a2e78; margin-bottom: 2px; background-color: #e0e0f8; font-size: 18px; cursor: pointer; } .solution-page-section .tab-menu-1 ul li a { color: #2a2e78; padding: 10px 0 10px 31px; width: 100%; height: 100%; } .solution-page-section .tab-menu-1 ul .active { padding: 10px 0 10px 15px; cursor: default; } .solution-page-section .tab-menu-1 ul .active::before { content: "▪"; color: #2a2e78; margin-right: 10px; } .solution-page-section .tab-menu-2 { display: none; } .solution-page-section .tab-menu-2 ul li { display: inline-block; text-align: center; font-size: 18px; cursor: pointer; height: 60px; margin-bottom: 2px; } .solution-page-section .tab-menu-2 ul li:nth-child(1), .solution-page-section .tab-menu-2 ul li:nth-child(3) { padding-right: 5px; padding-left: 0; } .solution-page-section .tab-menu-2 ul li:nth-child(2), .solution-page-section .tab-menu-2 ul li:nth-child(4) { padding-left: 5px; padding-right: 0; } .solution-page-section .tab-menu-2 ul li a { color: #2a2e78; width: 100%; height: 100%; line-height: 60px; background-color: #e0e0f8; } .solution-page-section .tab-menu-2 ul li.active { /* background-color: #2a2e78; */ color: white; cursor: default; } .solution-page-section .tab-menu-2 ul li div { width: 100%; height: 100%; background-color: #2a2e78; } @media (max-width: 768px) { .solution-page-section .tab-menu-1 { display: none; } .solution-page-section .tab-menu-2 { display: block; } } .solution-page-section .main { background-color: white; margin: 0; } @media (max-width: 768px) { .solution-page-section .main { margin: 0 -15px; } } .solution-page-section .main .title h1 { text-align: center; font-size: 24px; font-weight: 600; color: #010432; } .solution-page-section .main .sub-title h2 { text-align: center; font-size: 22px; font-weight: 500; color: #010432; } .solution-page-section .main .solution-grid-box { border: #8386d5 1px solid; border-radius: 5px; position: relative; } .solution-page-section .main .solution-grid-box .solution-img { overflow: hidden; z-index: -2; } .solution-page-section .main .solution-grid-box .solution-img>div { height: 290px; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } .solution-page-section .main .solution-grid-box .cover-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 5px; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; z-index: 2; opacity: 0; visibility: hidden; } .solution-page-section .main .solution-grid-box .cover-box>div { width: 100%; } .solution-page-section .main .solution-grid-box .cover-box p { color: white; font-size: 14px; text-align: center; } .solution-page-section .main .solution-grid-box .cover-box div:nth-child(2) { min-height: 80px; } .solution-page-section .main .solution-grid-box::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #041d38; z-index: 1; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; opacity: 0; visibility: hidden; } .solution-page-section .main .solution-grid-box:hover::after { opacity: 0.9; visibility: visible; } .solution-page-section .main .solution-grid-box:hover .cover-box { opacity: 1; visibility: visible; } .solution-page-section .main .solution-grid-title span { color: #010432; font-size: 16px; font-weight: 600; } .solution-page-section .page a { color: #2a2e78; font-size: 22px; text-decoration: underline; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 415px; } .solution-page-section .page a:hover { color: #409eff; } /*=========================== Join us ===========================*/ .join-section { position: relative; /* background-color: #f6f6fe; */ } .join-section .container { box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); -webkit-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); -moz-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); } .join-section .menu-1 { color: white; font-size: 24px; padding: 0 0; } .join-section .menu-1 .title { background-color: #2a2e78; padding: 15px 0 15px 15px; } .join-section .menu-1 ul li { color: #2a2e78; margin-bottom: 2px; background-color: #e0e0f8; font-size: 16px; cursor: pointer; padding: 10px 0 10px 31px; } .join-section .menu-1 ul li.active { padding: 10px 0 10px 15px; cursor: default; } .join-section .menu-1 ul li.active::before { content: "▪"; color: #2a2e78; margin-right: 10px; } .join-section .menu-2 { display: none; } .join-section .menu-2 ul li { min-width: 50%; text-align: center; font-size: 18px; cursor: pointer; margin-bottom: 5px; } .join-section .menu-2 ul li span { color: #2a2e78; padding: 10px 0; background-color: #e0e0f8; width: 100%; height: 100%; } .join-section .menu-2 ul li:nth-child(odd) { padding-right: 5px; } .join-section .menu-2 ul li:nth-child(even) { padding-left: 5px; } .join-section .menu-2 ul li.active span { background-color: #2a2e78; color: white; cursor: default; } @media (max-width: 768px) { .join-section .menu-1 { display: none; } .join-section .menu-2 { display: block; } } .join-section .content { background-color: white; padding: 45px 30px; /* border-bottom: 2px dotted #CCCCCC */ } .join-section .container .row:not(:last-child) .content, .join-section .container .content:not(:last-child) { border-bottom: 2px dotted #CCCCCC } .join-section .content h1 { font-size: 26px; font-weight: normal; color: #333; margin-bottom: 40px; } .join-section .content h1 span { font-size: 18px; } .join-section .content h2 { font-size: 20px; font-weight: normal; padding: 10px 15px; margin-bottom: 5px; background: #EEEEEE; width: calc(100% + 30px); /* margin-left: -15px; */ margin: 25px 0 25px -15px; } .join-section .content p { font-size: 16px; margin-bottom: 8px; } @media(max-width:992px) { .join-section .content { padding: 45px 10px; } } /*=========================== Example page ===========================*/ .example-page-section { position: relative; background-color: #f6f6fe; } .example-page-section .menu-1 { color: white; font-size: 24px; padding: 0 0; } .example-page-section .menu-1 .title { background-color: #2a2e78; padding: 15px 0 15px 15px; } .example-page-section .menu-1 ul li { color: #2a2e78; margin-bottom: 2px; background-color: #e0e0f8; font-size: 16px; cursor: pointer; padding: 10px 0 10px 31px; } .example-page-section .menu-1 ul li.active { padding: 10px 0 10px 15px; cursor: default; } .example-page-section .menu-1 ul li.active::before { content: "▪"; color: #2a2e78; margin-right: 10px; } .example-page-section .menu-2 { display: none; } .example-page-section .menu-2 ul li { min-width: 50%; text-align: center; font-size: 18px; cursor: pointer; margin-bottom: 5px; } .example-page-section .menu-2 ul li span { color: #2a2e78; padding: 10px 0; background-color: #e0e0f8; width: 100%; height: 100%; } .example-page-section .menu-2 ul li:nth-child(odd) { padding-right: 5px; } .example-page-section .menu-2 ul li:nth-child(even) { padding-left: 5px; } .example-page-section .menu-2 ul li.active span { background-color: #2a2e78; color: white; cursor: default; } @media (max-width: 768px) { .example-page-section .menu-1 { display: none; } .example-page-section .menu-2 { display: block; } } .example-page-section .subject-box { background-color: white; padding: 0 25px 5px; } .example-page-section .subject-box h1 { text-align: center; font-size: 24px; font-weight: 600; color: #010432; } .example-page-section .subject-box .subject-img { float: right; max-height: 368px; max-width: 550px; } .example-page-section .subject-box p { font-size: 16px; color: #010432; margin-bottom: 8px; text-align: left; text-indent: 30px; } @media (max-width: 990px) { .example-page-section .subject-box .subject-img { float: none; height: 100%; width: 100%; } } .example-page-section .example-list-box { background-color: white; padding: 35px 25px 5px; } .example-page-section .example-list-box .title h1 { background-color: #2a2e78; color: white; font-size: 38px; line-height: 65px; font-weight: 300; width: 300px; text-align: center; } .example-page-section .example-list-box .img-box { /* overflow: hidden; */ float: right; position: relative; z-index: 5; } .example-page-section .example-list-box .img-box .img-div { width: 252px; height: 322px; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 2; } .example-page-section .example-list-box .img-box::after { position: absolute; right: -14px; bottom: -14px; width: 180px; height: 180px; background-color: #2a2e78; content: ''; -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 100%, 100% 100%); z-index: -1; } @media (max-width: 990px) { .example-page-section .example-list-box .img-box { float: none; width: 100%; margin-bottom: 15px; } .example-page-section .example-list-box .img-box .img-div { width: 100%; } } .example-page-section .example-list-box .memo-box img { max-width: 202px; height: 14px; } .example-page-section .example-list-box .memo-box h1 { color: #2a2e78; font-size: 22px; font-weight: 600; padding: 5px 0; } .example-page-section .example-list-box .memo-box .location-scale { color: #2a2e78; font-size: 16px; font-weight: 600; } .example-page-section .example-list-box .memo-box .location-scale span:nth-child(1) { min-width: 200px; } .example-page-section .example-list-box .memo-box p { color: #010432; text-indent: 30px; line-height: 1.7; } .example-page-section .example-list-box .line { height: 2px; background-color: #f6f6fe; } /*=========================== About Page ===========================*/ .about-sec .container{ position: relative; /* left: 150px; max-width: 1270px; */ } .about-sec .container .aboutTyes{ display:inline-block; /* position:absolute; left:0; */ box-shadow: 0px 2px 17px 4px rgba(126, 126, 126, 0.3); } .about-sec .pointOffset{ position:relative;height:1px;opacity:0;top:-100px } .about-sec .container .aboutTyes li { border-bottom:1px solid rgba(0,0,0,.05); cursor:pointer; } .about-sec .container .aboutTyes li a{ padding:17px 50px; color:#000 } .about-sec .container .aboutTyes li.active a,.about-sec .container .aboutTyes li:hover a{ color:#fff } .about-sec .container .aboutTyes li.active ,.about-sec .container .aboutTyes li:hover { background:#409EFF; } .about-introduce-section { position: relative; } .about-introduce-section h4 { font-size: 20px; margin-bottom: 20px; } .about-introduce-section .img-box { text-align: center } .about-introduce-section .img-box img { /* max-width: 411px; */ /* max-height: 332px; */ /* margin: 0 auto; */ /* display: block; */ width: 90%; height: 100%; text-align: right } .about-introduce-section .content p { font-size: 16px; color: #666; line-height: 1.8; } .about-intro-top p { font-size: 18px } /* .about-introduce-section .content p:nth-child(1) { text-indent: 20px; } .about-introduce-section .content p:nth-child(2) { text-indent: 30px; } */ .about-introduce-section .content p span { font-weight: 600; padding-right: 5px; } .about-introduce-section .content a { border: #2a2e78 1px solid; color: #2a2e78; font-size: 20px; padding: 3px 30px; } .about-introduce-section .content a:hover { border: #409eff 1px solid; color: #409eff; } @media(min-width:768px){ .about-sec .container .aboutTyes li:first-child a{ color:#fff } .about-sec .container .aboutTyes li:first-child { background:#409EFF; } } /*=========================== About Page -- Credential ===========================*/ .credential-section { position: relative; background-color: #ffff; } .course-section { position: relative; background-color: #ffff; } /*=========================== About Page -- Investor Relations ===========================*/ .investor-section { position: relative; } /*=========================== About Page -- Organizational Structure ===========================*/ .org-structure-section { position: relative; background-color: #f7fcff; } /*=========================== About Page -- History ===========================*/ .history-section { position: relative; } .history-section .content .left-box { width: 185px; min-width: 185px; border-right: #2a2e78 5px solid; display: inline-block; } .history-section .content h1 { color: #2a2e78; font-size: 20px; font-weight: 600; } .history-section .content .line { height: 5px; width: 25px; background-color: #2a2e78; } .history-section .content .right-box { display: inline-block; } .history-section .content .right-box p { padding-left: 25px; } .history-section .content .right-box p span, .history-section .content .left-box p span { color: #2a2e78; padding-right: 5px; } /*=========================== About Page -- Sub Company ===========================*/ .about-sub-company-section { position: relative; /* background-image: url(../img/about/contact.png); */ /* background-position: top center; */ /* background-repeat: no-repeat; */ } .about-sub-company-section h4 { font-size: 22px; color: #2D2D2D; } @media (max-width: 1200px) { .about-sec .container .aboutTyes li a{ padding:10px 17px; font-size:14px; } .about-sub-company-section { /* background-image: none; */ /* height: 100%; */ } } @media (max-width: 768px) { .about-sec .container .aboutTyes{ margin-bottom:35px; text-align:center; box-shadow: none; } .about-sec .container .aboutTyes li { display:inline-block; border:1px solid #ccc; margin:5px; } .aboutOnlyText{ padding:15px!important } .about-sec .container .aboutImg{ margin-bottom:20px } } .about-sub-company-section p { font-size: 18px; color: #6B6B6B } .about-sub-company-section .item-box { max-width: 500px; } .about-sub-company-section .item-box .address-iphone-box .icon { width: 25px; height: 25px; min-width: 25px; min-height: 25px; fill: currentColor; overflow: hidden; } .about-sub-company-section hr { margin: 35px 0; } .about-sub-company-section .item-box .short-name-box { min-width: 100px; } /*=========================== Service page ===========================*/ .service-section { position: relative; background-color: #f6f6fe; } .service-section h1 { text-align: center; font-size: 22px; font-weight: 500; color: #010432; } .service-section .content-box { max-width: 440px; margin: 0 auto; } .service-section .left-box { min-width: 200px; padding: 0 20px; display: inline-block; } .service-section .left-box img { max-width: 160px; max-height: 160px; width: 100%; height: 100%; display: block; margin: 0 auto; } .service-section .left-box span { text-align: center; display: block; font-size: 16px; font-weight: 500; color: #010432; } .service-section .right-box { padding: 0 20px; height: 160px; display: inline-block; } .service-section .right-box>div { height: 100%; } .service-section .right-box img { max-width: 26px; max-height: 20px; } .service-section .right-box p span { font-size: 16px; color: #010432; } .service-section .right-box .download { padding: 10px 0; background-color: #2a2e78; cursor: pointer; } .service-section .right-box .download span { color: white; } .service-section .right-box .download:hover span { color: #409eff; } .service-section .right-box .download:hover svg path { fill: #409eff; } @media (max-width:576px) { .service-section .right-box, .service-section .left-box { width: 100%; display: block; } .service-section .right-box { margin-top: 20px; } .service-section .right-box>div { -ms-flex-align: center; align-items: center; } .service-section .right-box .download { min-width: 200px; } } /*=========================== Technology page ===========================*/ .technology-section { position: relative; background-color: #f6f6fe; } .technology-section .menu-1 { color: white; font-size: 24px; padding: 0 0; } .technology-section .menu-1 .title { background-color: #2a2e78; padding: 15px 0 15px 15px; } .technology-section .menu-1 ul li { color: #010432; margin-bottom: 2px; background-color: #e0e0f8; font-size: 16px; font-weight: 600; cursor: pointer; padding: 10px 0 10px 31px; } .technology-section .menu-1 ul li.active { padding: 10px 0 10px 15px; cursor: default; color: #2a2e78; font-weight: 500; } .technology-section .menu-1 ul li.active::before { content: "▪"; color: #2a2e78; margin-right: 10px; display: inline-block; } .technology-section .menu-2 { display: none; } .technology-section .menu-2 ul li { min-width: 50%; text-align: center; font-size: 18px; cursor: pointer; margin-bottom: 5px; } .technology-section .menu-2 ul li span { color: #2a2e78; padding: 10px 0; background-color: #e0e0f8; width: 100%; height: 100%; } .technology-section .menu-2 ul li.active span { background-color: #2a2e78; color: white; cursor: default; } @media (max-width: 768px) { .technology-section .menu-1 { display: none; } .technology-section .menu-2 { display: block; } } .technology-section .content-box { background-color: white; padding: 40px 30px; } @media (max-width: 575px) { .technology-section .content-box { padding: 40px 15px; } } .technology-section .content-box h1 { font-size: 24px; font-weight: 600; text-align: center; color: #010432; } .technology-section .content-box .item { border: #dcdcdc 2px solid; } .technology-section .content-box .item .title { height: 45px; color: #010432; background-color: #F0EFF5; font-size: 20px; font-weight: 600; } .technology-section .content-box .item .memo-box { padding: 25px } .technology-section .content-box .item .memo-box .img-box { float: left; margin-right: 10px; overflow: hidden; } .technology-section .content-box .item .memo-box .img-box .img-div { width: 162px; height: 199px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .technology-section .content-box .item .memo-box p { font-size: 16px; font-weight: 400; text-indent: 30px; color: #010432; } @media (max-width: 576px) { .technology-section .content-box .item .memo-box .img-box { float: none; width: 100%; margin-right: 0; } .technology-section .content-box .item .memo-box .img-box .img-div { width: 100%; } } /* common */ @font-face { font-family: "iconfont"; src: url('../fonts/iconfont/iconfont.eot'); /* IE9*/ src: url('../fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/iconfont/iconfont.woff') format('woff'), /* chrome, firefox */ url('../fonts/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../fonts/iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .mobile { display: none } .color-white { color: #fff } .bg-white { background: #fff } .bg-blue { background: #90BBFF } .bg-gray { background: #F4F8FD } .arrow-right { width: 16px; } h2.subtitle { font-size: 32px; font-weight: normal; color: #333; line-height: 1.5; } .title-tag2 { font-size: 24px; font-weight: bold; } .learn-more { margin-top: 100px; text-align: right; cursor: pointer; } .line-one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .line-two { /* text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; */ /* display: -webkit-box; /* -webkit-line-clamp: 2; line-clamp: 1; */ /* -webkit-box-orient: vertical; display: -webkit-box; */ /* -webkit-box-orient: vertical; -webkit-line-clamp: 2; */ /* overflow: hidden; */ white-space: nowrap; /* 超出隐藏 */ overflow: hidden; /* 文本超出显示成... */ text-overflow: ellipsis; max-width: 380px; display: block; } .line-clamp-4 { } /* 面包屑 */ .crumbs li { display: inline-block; line-height: 48px; color: #ccc; font-size: 14px; } .crumbs li.active { color: #000; } /* .crumbs li.active, .crumbs li:hover { color: #000; cursor: pointer } */ p.subtit { font-size: 20px } /* why */ .whyUs-section .whyUs-text p { /* text-indent: 25px; */ } @media (min-width: 991px) { .pos-top { margin-top: 50px } .whyUs-text { padding-left: 80px } } .whyUs-item p { font-size: 20px; color: #153A78 } .whyUs-item { padding: 24px 0 34px; opacity: 1; background: #ffffff; border-radius: 10px; margin-bottom: 30px; /* -webkit-box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); */ box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); -webkit-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); -moz-box-shadow: 0px 10px 20px 10px rgba(170, 170, 170, 0.1); } .whyUs-item.active { color: #fff; background: #409eff } .whyUs-item.active i, .whyUs-item.active p { color: #fff; } .whyUs-item:hover { color: #fff; background: #409eff; cursor: pointer; } .whyUs-item:hover i, .whyUs-item:hover p { color: #fff; } .whyUs-item i { font-size: 60px; color: #409eff; margin-bottom: 20px } /* about */ .about-section { background: #F4F8FD } .about-section .learn-more { margin-bottom: 50px; } .about-text-box p { line-height: 1.9 } @media (min-width: 991px) { .about-text-box { padding-right: 80px } } /* news */ .news-section .col-md-6 { padding-bottom: 80px; padding-top: 80px; } .news-section .col-md-6:before { content: ''; width: calc(100% - 50px); height: 2px; display: inline-block; background-color: #F5F5F5; /* margin-right: 5px; */ position: absolute; bottom: 0; left: 0; margin-left: 14px; } .news-section .col-md-6:nth-child(3):before, .news-section .col-md-6:nth-child(4):before { height: 0 } .news-tit { font-size: 18px; color: #2A2A2A; line-height: 40px; margin-bottom: 10px; font-weight: normal } .news-des, .news-time { font-size: 14px; color: #666 } .news-tit:before { content: "▪"; /* color: rgb(42, 46, 120); */ margin-right: 10px; } .news-section .right-sec { position: relative } .news-time { position: absolute; top: 12px; display: block; right: 50px } .read-more { position: absolute; bottom: 0px; width: 16px; right: 50px } /* solution */ .solution-section p { /* font-size: 18px; margin-bottom: 40px */ } .solution-img { text-align: center } .solution-list-tit { font-size: 20px; margin-bottom: 20px } .solution-list .learn-more { margin-top: 0 } /* solution-detail */ .solution-detail .section-content>p { text-indent: 36px; font-size: 18px; } .solution-detail .section-content img { margin-top: 30px } .swiper-slide { width: 100%!important } @media (max-width: 992px) { .title-tag2 { font-size: 20px; } .solution-section p, .solution-detail .section-content>p { font-size: 16px; } .img-left .solution-list-tit { margin-top: 60px } .img-right .main-btn { margin-bottom: 20px } .solution-section { } } @media (min-width: 992px) { /* .solution-section p { width: 96% } */ .solution-section.img-left p, .solution-section.img-left .solution-list-tit { margin-left: 4% } } /* solution-detail2 */ .list-content { position: relative; margin-top: 30px; text-align: center } .list-content .modal-bg { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #041d38; z-index: 1; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; } .list-content:hover .modal-bg { opacity: 1; background-color: rgba(0, 0, 0, .3); visibility: visible; } span.click-more { text-align: center; align-items: center; justify-content: center; font-size: 18px; background: #409eff; padding: 8px 13px; border-radius: 20px; color: #fff; display: inline-block; cursor: pointer; } .solution-detail .list-content img { margin-top: 0; width: 100% } .list-content:hover .click-more { opacity: 0.9; visibility: visible; } .pro-tit { text-align: center; margin-top: 15px; font-size: 18px; } .detail-modal { position: fixed; background: rgba(0, 0, 0, .8); top: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; right: 0; color: #fff; z-index: 999; background: rgba(255, 255, 255, .3); display: flex; justify-content: center; align-items: center; } .modal-box { background: rgba(0, 0, 0, .8); width: 600px; padding: 50px; text-align: center; position: relative; border-radius: 10px; overflow: hidden; /* font-size: 20px; */ } .modal-text { text-align: left; } .modal-tit { font-size: 24px; color: #fff; margin: 20px; } .close-img { position: absolute; top: -2px; right: -2px; cursor: pointer; border-radius: 10px; ; } .modal-text p { text-indent: 30px; } .modal-link { text-align: left } .modal-link p { line-height: 1; margin-top: 10px } .modal-link a { color: #00EAFF } .page-des { position: absolute; left: 2%; font-size: 12px; color: #646464; line-height: 36px; bottom: 0 } @media(min-width:1280px) and (max-width:1366px) { .modal-box { transform: scale(.95); } } @media(min-width:992px) and (max-width:1280px) { .modal-box { transform: scale(.8); } } @media(max-width:992px) { .modal-box { transform: scale(.6); padding: 15px; width: 100% } } /* 发展历程 */ .history-section { text-align: center; background: #F4F8FD; padding: 70px; } .history-des { width: 60%; margin: 0 auto; font-size: 18px } .history-white { background: #fff; padding: 35px 0 } /* .history-section .container { background: #fff } */ /* 荣誉资质 */ .credential-tit1 { font-size: 24px; margin-bottom: 10px; } .credential-tit2 { font-size: 36px; font-weight: 500 } .company-sec, .partner-sec { padding: 60px 0 } .partner-sec img { /* padding-top: 60px; */ } .company-sec { padding-left: 50px; } .company-sec p, .partner-sec p { line-height: 40px; } .phone-sec { padding: 60px 40px } .phone-sec p { color: #fff } .phone-list p:last-child { font-size: 30px; line-height: 30px; padding-bottom: 15px; font-family: "Helvetica Neue", Arial } .phone-list { position: relative; } .phone-list span { font-size: 18px } .phone-list:before { content: ''; width: 18px; height: 1px; display: inline-block; background-color: #fff; /* margin-right: 5px; */ position: absolute; bottom: 0px; left: 0; } .about-shadow { -webkit-box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%) } /* 走马灯 */ #marquee_box { overflow: hidden; width: 100%; } #marquee_box img { border: 3px solid #F2F2F2; width: 250px; margin: 0 5px } #marquee_img { float: left; width: 1000%; } #marquee_img1 { float: left; } #marquee_img2 { float: left; } /* .solution-list-section .solution-img { float: left } .solution-list-section .solution-dest { float: right } */ .solution-list-section:nth-child(even) .solution-img { float: right } .solution-list-section:nth-child(even) .solution-dest { float: left } .solution-list-section:nth-child(odd) .solution-img { float: left } .solution-list-section:nth-child(odd) .solution-dest { float: right } .solution-list { overflow: hidden } .new-read-body p { } @media(min-width:992px) { .about-introduce-section .img-box { text-align: right } } @media(max-width:992px) { .history-section { padding: 50px; } .history-des { width: 100% } .company-sec, .partner-sec { padding: 40px 20px; } .phone-list p:last-child { font-size: 24px } } @media (max-width: 768px) { .news-section .col-md-6:nth-child(3):before { height: 2px } #marquee_box img { width: 200px; } } @media (max-width: 414px) { .banner-section { padding-top: 0px; } .section-title span.title-tag { font-size: 30px } h2.subtitle { font-size: 24px } .whyUs-item i { font-size: 50px } .main-btn { padding: 6px 20px } .pro-tit { font-size: 16px; } .solution-detail p.subtit { font-size: 18px; } .page-des { display: none; } .news-content-section .content li { padding: 25px 0 } .about-intro-top p { font-size: 16px } .about-introduce-section .img-box img { margin-top: 20px } .credential-tit1 { font-size: 18px } .credential-tit2 { font-size: 26px } .about-sub-company-section p { font-size: 16px } } /* 响应式 */ /* 首页及底部 */ @media(max-width:414px) { /* common */ body { font-size: 14px } .mobile { display: block } .pc { display: none } /* footer */ footer .footer-widget-area .widget .widget-title { font-size: 18px } footer .copy-right-area .copyrigt-text { font-size: 14px } .copyrigt-or-code span { font-size: 14px; } /* 导航 */ header .mainmenu-area { /* padding: 15px */ } header .mainmenu-area .main-menu .logo img { width: 80px; } header .mobile-menu.mean-container .mean-bar a.meanmenu-reveal { margin-top: -64px; padding: 5px 6px; width: 22px; } /* 首页 */ .shutter { height: 200px; margin-top: 69px } .shutter-btn li { margin-top: 10px } .shutter-btn li.prev { left: 10px } .shutter-btn li.next { right: 10px } .whyUs-text { margin-top: 30px } .about-section .section-title { padding-bottom: 90px!important } .news-section .right-sec { padding: -10px } .news-section .col-md-6 { padding-top: 40px; padding-bottom: 40px } .read-more, .news-time { right: 15px } .news-section .col-md-6:before { width: calc(100% - 30px); } span.click-more { padding: 6px 10px; font-size: 12px; } .solution-list-section .container { padding: 0 } .news-content-section .content li:before { width: 100%; } .about-sub-company-section { padding-bottom: 0 } .phone-list span { font-size: 14px } /* 加入我们 */ .join-banner.common-bradcrumb-section { background-position: 63% center; } .join-section .content p { font-size: 14px } } @media(max-width:320px) { .section-title span.title-tag { font-size: 23px } .whyUs-item p { font-size: 18px } h2.subtitle { font-size: 20px; } .solution-section p, .solution-detail .section-content>p { font-size: 14px; text-indent: 28px; } .pro-tit { font-size: 12px } .about-intro-top p { font-size: 14px } .about-introduce-section .content p { font-size: 14px } .history-des { font-size: 14px } .join-section .content h1 { font-size: 20px } .join-section .content h2 { font-size: 18px } footer .footer-widget-area .widget .widget-title { font-size: 16px; } } /* newBox start */ .newItemOne { margin-bottom: 48px; /* box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%); */ } @media(max-width:768px){ .newItemOne { margin-bottom: 28px; } } .oneInnerBox { cursor: pointer; box-shadow: 0px 2px 17px 4px rgb(158 158 158 / 15%); padding: 15px; } .oneInnerBox:hover { /* background: rgb(241, 239, 239) */ box-shadow: 0px 2px 17px 4px rgba(126, 126, 126, 0.3); } .oneInnerBox a { font-size: 16px; font-weight: bold; margin-top: 26px; color: #333 } .newItemOne .oneInnerBox .img { /* max-height: 160px */ } .newItemOne .oneInnerBox .img { transition: .5s all; } .oneInnerBox:hover .img { /* background: rgb(241, 239, 239) */ transform: scale(1.05, 1.05); transition: .5s all; } .oneInnerBox span { color: #666; margin-top: 30px; font-size: 14px; height:22px } .productItemOne { text-align:center } .productItemOne .img{ width: 76%; margin:0 auto } .productItemOne .oneInnerBox{ padding:40px } .page-des2 { position: absolute; right: 2%; font-size: 12px; color: #646464; bottom: 2px; } .page-des2 input { margin-right: 5px; font-size: 12px; color: #646464; font-weight: bold; border: #646464 1px solid; padding: 6px 5px; width: 25px; line-height: auto; height: auto; cursor: pointer; box-sizing: content-box; border-radius: 2px; text-align: center; } @media(min-width:768px) { .oneInnerBox { /* width: 94%; margin-right: 3%; margin-left: 3%; */ } } @media(max-width:768px) { .oneInnerBox span { margin-top: 10px; } } /* newBox end */ .appInner{ display:none } /* feedBack */ .feedBackBox .contactInner li span:first-child{ width:130px; display:inline-block; } .feedBackBox{ position: fixed; right: 30px; top: 50%; margin-top: -90px; z-index: 2; } .feedBackBox>div{ width:40px; height:40px; background-size:cover; background-repeat:no-repeat; margin-top:20px; cursor:pointer; } .feedBackBox .contactOne:hover .contactInner{ display:block } .feedBackBox .contactQr{ position:relative; } .feedBackBox .contactQr div{ width:140px; display:none; position:absolute; right:48px; top:-46px } .feedBackBox .contactQr:hover div{ display:block } .feedBackBox .contactInner{ display:none; position:absolute; right:50px; top:-65px; width:360px; padding:15px 15px; color:#000; background-image: url(../img/home/f_bg1.png); background-size:100% 100%; } .feedBackBox .contactInner li{ display:flex;vertical-align: top; } .feedBackBox .contactInner li &:not(:first-child) { margin-top:5px; } .feedBackBox .contactInner li span:first-child{ width:112px; display:block; } .feedBackBox .contactInner li &:not(:first-child) { margin-top:5px; } .feedBackDialog .el-dialog{ display: flex; flex-direction: column; margin: 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .feedBackDialog .el-dialog__title{ font-weight:400 } .feedBackDialog .el-radio-button__inner{ width:76px; height:36px; line-height:36px; padding:0; border:1px solid #DCDFE6; margin-bottom:10px; /* border-radius:4px; */ } .feedBackDialog .el-radio-button:first-child .el-radio-button__inner,.feedBackDialog .el-radio-button:last-child .el-radio-button__inner{ border-radius:0 } .feedBackDialog .el-input__inner{ height:36px; line-height:36px; } .feedBackDialog label{ margin-bottom:0 } .feedBackDialog .el-radio-group label{ margin-right:10px } .dialogTypeLabel .el-form-item__content{ margin-left:0!important; text-align:center } @media(max-width:768px) { .feedBackBox{ right:10px; bottom:10px } }@media(max-width:465px){ .feedBackBox .contactInner{ width:312px; } } .solutionType .solutionTypeOne{ text-align:center; padding:20px 40px; /* width:12.5%; */ /* max-width: 12.5%; */ cursor:pointer; display:inline-block; } .solutionTypeOne p{ margin-top:10px; color:#000 } .solutionTypeOne .img{ margin: 0 auto; transform: translateX(40px); filter: drop-shadow(#000 -40px 0px 0px); } .solutionTypeOne .img2{ margin: 0 auto; transform: translateX(0px); filter: drop-shadow(#fff -40px 0px 0px); } /* 选中 */ .solutionTypeOne:hover ,.solutionTypeOne.active{ background:#409eff; transition: all 1s ease; } .solutionTypeOne:hover p,.solutionTypeOne.active p{ color:#fff; } @media(max-width:1200px) { .solutionType .solutionTypeOne{ padding:10px 20px; } } @media(max-width:992px) { .solutionType .solutionTypeOne{ padding:7px 10px; } .solutionType .solutionTypeOne p{ font-size:14px } } .newTypeBox{ text-align:center; } .newTypeBox{ text-align:center; } .newTypeBox .titleOne{ height:60px; line-height:60px; cursor:pointer; } .newTypeBox .titleOne.active{ background:#409eff; color:#fff } @media(max-width:768px) { .newTypeBox>div{ height:48px; line-height:48px; width:50%; cursor:pointer; } .newTypeBox>div .titleOne{ height:48px; line-height:48px; } }