/* ========== */ /* = PUBLIC = */ /* ========== */ .container{ max-width: 1600px; padding: 0 6%; margin: 0 auto;} img{ display: block; max-width: 100%;} @media (max-width:999px){ .container{ padding: 0 0.5rem; } } /* ========== */ /* = HOME = */ /* ========== */ .banner{ position: relative;} .banner .text{ position: absolute; bottom:8%; z-index: 1; left:0; width: 100%; text-align: center;} .banner .text a{ color: #FFFFFF; margin: 0 20px; display:inline-block; padding-right: 40px; line-height:40px; font-size:16px; position: relative; cursor: pointer;} .banner .text a:before{ content: ""; display:inline-block; position:absolute; top:50%; right:0; margin-top: -10px; width: 20px; height: 20px; background-size: cover; background-image: url(../images/ico_arrows.png);} .banner .text a:after{ content: ""; position: absolute; left:0; bottom:0; width: 100%; height: 4px; background:rgba(255,255,255,.4);} .banner .text a.active:after{ background: #3d60af;} .index-banner img{ margin:0 auto; } .index-banner .swiper-button-next, .index-banner .swiper-button-prev{ background-color:rgba(255,255,255,0);} .index-banner .swiper-button-prev{ left:5%;} .index-banner .swiper-button-next{ right:5%;} .index-banner .swiper-pagination{ bottom: 50px;} .index-banner .swiper-pagination-bullet{ display: none; margin: 0 10px; border: none; width: 60px; height: 8px; border-radius: 0; border: none; background:rgba(255,255,255,.8);} .index-banner .swiper-pagination-bullet-active{ background: #3d60af;} .index-pro{ padding: 110px 0; min-height: 820px; background-image: url(../images/index_pro_bg.jpg);} .index-pro .tab{ max-width: 1000px; margin: 0 auto;display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; } .index-pro .tab span{ width: 25%; background: #FFFFFF; line-height: 80px; font-size: 24px; color: #3d60af; text-align: center; position: relative; cursor: pointer;} .index-pro .tab span i{ font-style:normal; position: relative; z-index:1;} .index-pro .tab span:after{ content: ""; position: absolute; top:50%; right:0; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 30px; border-left: 1px solid #3d60af;} .index-pro .tab span:last-child:after{ display: none;} .index-pro .tab span.active:before{ content:""; position: absolute; z-index:0; top:0; left:-1%; width:102%; height:100%; background: #3d60af; color: #FFFFFF;} .index-pro .tab span.active i{ color:#fff;} .index-pro .js-tab-box{ margin-top: 80px;} .index-pro .js-tab-con{ height: 0; overflow: hidden;} .index-pro .js-tab-con.active{ height: auto; } .index-pro .content{ position: relative; padding: 0 105px;} .index-pro .content .box{ display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; } .index-pro .content .box .img{ width: 48%;} .index-pro .content .box .text{ width: 48%;} .index-pro .content .box .text .des{ margin: 20px 0 70px; font-size: 18px; line-height: 36px; color: #333333; text-align: justify; } .index-pro .talk-ul{ margin:0 -19px;} .index-pro .talk-ul li{ float: left; width: 33.3333%; padding:20px;} .index-pro .talk-ul li a{ display: block; background: #FFFFFF; padding: 20px; -webkit-box-shadow:0 5px 10px rgba(0,0,0,.18); box-shadow:0 5px 10px rgba(0,0,0,.18);} .index-pro .talk-ul li .date span{ display: inline-block; background: #3d60af; color: #FFFFFF; line-height: 24px; padding:0 15px;} .index-pro .talk-ul li .date i{ margin-left: 12px; display: inline-block; font-style: normal;} .index-pro .talk-ul li p{ margin-top: 14px; color: #333333; font-size: 18px; line-height: 36px; height: 72px; overflow: hidden;} .index-pro .service-box{ max-width: 1185px; margin: 0 auto; background: #FFFFFF; padding: 40px 35px; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between;} .index-pro .service-box .text{ width: 66%;} .index-pro .service-box .text .des{ margin-top: 30px; font-size: 18px; line-height: 36px; text-align: justify;} .index-letter{ font-size: 140px; line-height: 150px; color: #3d60af; opacity: .1; font-weight: bold; text-transform: uppercase;} .index-solution{ padding:76px 0 100px; background-image: url(../images/index_solution_bg.jpg); position: relative; text-align: center;} .index-solution .index-letter{ position: absolute; top:15px; left:0; width: 100%; color: #FFFFFF; text-align: center;} .index-solution ul{ margin:75px 0 80px;} .index-solution li{ float: left; width:19.2%; margin-right:1%;} .index-solution li:nth-child(5n){ margin-right: 0;} .index-solution li .box{ display: block; position: relative; -webkit-box-shadow:0 5px 10px rgba(0,0,0,.18); box-shadow:0 5px 10px rgba(0,0,0,.18);} .index-solution li .box img{ width: 100%;} .index-solution li .box .text{ position: absolute; padding: 40px 0 35px; bottom: 0; left:0; width: 100%; background: rgba(61,96,175,.6); color: #FFFFFF;} .index-solution li .box .text h3{ font-size: 30px;} .index-solution li .box .text span{ margin-top: 15px; display: block; font-size: 18px;} .index-member{ padding: 80px 0 20px; background-image: url(../images/index_member.jpg);} .index-member .box{ margin-bottom: 60px; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; } .index-member .box .img{ width:50%;} .index-member .box .img img{ margin: 0 auto;} .index-member .box .text{ width: 50%; padding: 0 5%; text-align: center;} .index-member .box .text h3{ font-size: 30px; font-weight:600;} .index-member .box .text p{ font-size: 18px; margin:30px 0 50px;} .index-news{ background: #ebeff7; padding: 75px 0 90px;} .index-news .top{ position: relative;} .index-news .top .index-letter{ position: absolute; top:-70px; left:0;} .index-news .tab{ margin-top: 12px; font-size: 0;} .index-news .tab span{ margin-right: 40px; position: relative; font-size: 18px; cursor: pointer;} .index-news .tab span:after{ content: ""; position: absolute; top:50%; right:-20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 20px; width: 1px; background: #a5b6da;} .index-news .tab span.active{ color: #3d60af;} .index-news .tab span:last-child:after{ display: none;} .index-news .more-button{ position: absolute; right:0; top:40px;} .index-news .js-tab-box{ margin-top: 55px;} .index-news .js-tab-con{ display: none;} .index-news .js-tab-con.active{ display: block;} .index-news ul li{ float: left; width: 31%; margin-right: 3%;} .index-news ul li:nth-child(3n){ margin-right: 0;} .index-news .box{ display: block; background: #ffffff; padding: 20px 20px 30px; -webkit-box-shadow:0 5px 30px rgba(0,0,0,.18); box-shadow:0 5px 10px rgba(0,0,0,.1);} .index-news .box .date span{ display: inline-block; vertical-align: middle; background: #3d60af; color: #FFFFFF; padding: 0 20px; line-height: 26px;} .index-news .box .date i{ margin-left: 10px; font-style: normal; display: inline-block; vertical-align: middle;} .index-news .box .tit{ margin-top: 16px; font-size: 24px; color: #333333;} .index-news .box .des{ margin-top: 16px; font-size: 16px; line-height: 36px; height: 72px; overflow: hidden;} .index-news .box:hover{ background: #3d60af; color:#FFFFFF;} .index-news .box:hover .date span{ background: #FFFFFF; color: #3d60af;} .index-news .box:hover .date i{ color: #FFFFFF;} .index-news .box:hover .tit{ color: #FFFFFF;} .index-about{ padding: 80px 0 100px;} .index-about .container{ display: flex; flex-flow: wrap; align-items:stretch; justify-content:space-between; } .index-about .text{ width: 55%; max-width: 700px; position:relative;} .index-about .text .index-letter{ position: absolute; top:-70px; left:0;} .index-about .text .tip{ margin-top: 15px; font-size: 18px; color: #333333;} .index-about .text .des{ margin:45px 0; font-size: 16px; line-height: 30px; text-align: justify;} .index-about .img{ width: 40%; position: relative; cursor: pointer;} .index-about .img img{ width: 100%;} .index-about .img span{ position: absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); width: 54px; height: 54px; background-image: url(../images/ico_index_play.png); background-size: cover;} @media (max-width:999px){ /* ========== */ /* = HOME = */ /* ========== */ .banner .text{ display: none;} .index-banner .swiper-pagination{ display:block;bottom: 0.266666rem;} .index-banner .swiper-pagination-bullet{ margin: 0 0.133333rem; width: 0.6rem; height:0.1rem;} .index-pro{ padding: 1.2rem 0; min-height: 0;} .index-pro .tab span{ font-size: 0.4rem; line-height:1.2rem; } .index-pro .tab span:after{ height: 0.5rem;} .index-pro .js-tab-box{ margin-top: 0.8rem; } .index-pro .content{ padding: 0 1.333333rem;} .index-pro .content .box .img{ width: 100%;} .index-pro .content .box .text{ width: 100%;} .index-pro .content .box .text .des{ margin: 0.4rem 0 0.8rem; font-size: 0.34rem; line-height: 0.64rem; } .index-pro .talk-ul { margin:0 -0.3rem;} .index-pro .talk-ul li{ width: 100%; padding: 0.3rem; margin:0;} .index-pro .talk-ul li a{ font-size: 0.32rem; padding: 0.4rem;} .index-pro .talk-ul li p{font-size: 0.36rem; line-height: 0.68rem; height: 1.36rem;} .index-pro .service-box{ padding: 0.5rem;} .index-pro .service-box .text{ width: 100%;} .index-pro .service-box .text .des{ margin: 0.5rem 0; font-size: 0.34rem; line-height: 0.64rem; } .index-letter{ font-size:1.333333rem; line-height:1.466666rem; } .index-solution{padding: 1.2rem 0;} .index-solution .index-letter{ top:0.4rem;} .index-solution ul{ margin:0.8rem 0;} .index-solution li{ width:30%; margin-right:3%; margin-bottom: 0.266666rem; } .index-solution li:nth-child(3n){ margin-right: 0;} .index-solution li .box .text{ padding: 0.533333rem 0; } .index-solution li .box .text h3{ font-size: 0.38rem;} .index-solution li .box .text span{ margin-top: 0.1rem; font-size: 0.3rem;} .index-member{ padding: 1.2rem 0 0.4rem;} .index-member .box{ margin-bottom:0.8rem;} .index-member .box .text h3{ font-size:0.38rem;} .index-member .box .text p{ font-size: 0.26rem; margin:0.13rem 0 0.3rem;} .index-news{ padding: 1.2rem 0;} .index-news .top{ padding-bottom:1.2rem;} .index-news .top .index-letter{ top:-0.4rem;} .index-news .tab{ text-align: center;} .index-news .tab span{ margin-right: 0.7rem; font-size: 0.42rem;} .index-news .tab span:after{right:-0.35rem; height:0.4rem;} .index-news .top .more-button{ position: absolute; bottom:0; top:auto;} .index-news .js-tab-box{ margin-top: 0.3rem;} .index-news ul li{ width: 100%; margin-right: 0; margin-top: 0.533333rem; } .index-news .box .tit{ margin-top: 0.3rem; font-size: 0.44rem; } .index-news .box .des{ margin-top: 0.3rem;; font-size: 0.34rem; line-height: 0.64rem; height: 1.28rem;} .index-about{ padding: 1.2rem 0;} .index-about .text{ width: 100%; max-width: 100%;} .index-about .text .index-letter{top:-0.533333rem; } .index-about .text .tip{ margin-top: 0.266666rem; font-size: 0.4rem;} .index-about .text .des{ margin:0.533333rem 0; font-size: 0.34rem; line-height: 0.64rem;} .index-about .img{ margin-top: 0.8rem; width: 100%;} .index-about .img span{ width: 1.2rem; height: 1.2rem;} } /* ========== */ /* = NY = */ /* ========== */ .ny-banner{ width: 100%; height: 400px; padding-top: 114px; color: #FFFFFF; text-align: center; text-shadow:0 2px 5px rgba(0,0,0,.25);} .ny-banner img{ margin: 0 auto;} .ny-banner p{ font-size: 60px; font-weight: bold;} .ny-banner span{ margin-top: 25px; display:block; font-size: 30px; } .bread{ padding:22px 0; border-bottom:1px solid #e5e5e5;} .bread a:first-child{ background:url(../images/bread_ico.png) no-repeat left; padding-left: 20px;} .bread a:last-child{ color: #3d60af;} .theme-f36{ font-size: 36px; color: #333333; font-weight:600; position: relative;} .theme-f30{ font-size: 30px; color: #333333; font-weight:600; position: relative;} .theme-f24{ font-size: 24px; color: #333333; font-weight:600; position: relative;} .theme-f20{ font-size: 20px; color: #333333; font-weight: 600; } .font-white{ color: #FFFFFF;} .font-blue{ color: #3d60af;} .theme-line{ margin-top: 20px; display:inline-block; width: 30px; height: 2px; background: #333333;} .theme-line.white{ background: #FFFFFF;} .theme-line.blue{ background: #3d60af;} .theme-more{ position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 0; font-size: 18px; color: #3d60af; font-weight: normal; color: #3d60af; padding-right:20px;} .theme-more:after{ content: ""; position: absolute; top:50%; margin-top: -10px; right:0; width: 20px; height: 20px; background-image: url(../images/blue_arrows.png); background-size: cover;} .theme-center{ text-align: center;} .theme-center span{ display: inline-block; position: relative; font-size: 36px; color: #333333; font-weight: bold; padding: 0 50px;} .theme-center span:before, .theme-center span:after{ content: ""; position: absolute; top:50%; width: 30px; height: 2px; background: #333333;} .theme-center span:before{ left:0;} .theme-center span:after{ right:0;} .theme-center.blue span{ color: #3d60af;} .theme-center.blue span:before, .theme-center.blue span:after{ background: #3d60af;} .theme-center.white span{ color: #FFFFFF;} .theme-center.white span:before, .theme-center.white span:after{ background: #FFFFFF;} .theme-center-font30 span{ font-size: 30px;} .retrun-alink{ position:absolute; top:10px; right:0; line-height:30px; right:0; padding-right:40px; font-size: 16px; color: #666666;} .retrun-alink:after{ content: ""; position: absolute; top:0; right: 0; width: 30px; height: 30px; background-image: url(../images/return_ico.png); background-size: cover;} .more-button{ position: relative; display: inline-block; line-height: 48px; width: 200px; background: #fdba1a; background: linear-gradient(100deg,#ee8d00,#fdba1a,#fdba1a); color: #FFFFFF; font-size: 20px; padding-left: 42px; text-align: left; } .more-button:after{ content: ""; position: absolute; top:50%; margin-top:-10px; right:30px; width: 20px; height: 20px; background-image:url(../images/wihite_arrows.png); background-size: cover; -webkit-transition: all ease .3s; transition: all ease .3s;} .more-button:hover:after{ transform: translateX(-40%); -webkit-transform: translateX(-40%); } .more-button2{ width: 155px; line-height: 38px; padding-left:32px; font-size: 16px;} .more-button2:after{ content: ""; right: 24px;} .search-content{ width: 100%; max-width: 640px; margin: 0 auto; padding-right:160px; position: relative;} .search-content .in{ height: 46px; width: 100%; border:1px solid #b9c6e2; background: #fcfcfc; padding:0 15px; font-size: 16px; border-radius:5px;} .search-content .button{ position: absolute; top:0; right:0; height: 46px; line-height: 46px; width: 150px; background: #3d60af; color: #FFFFFF; padding-left: 67px; font-size: 20px; border-radius:5px;} .search-content .button:before{ content: ""; position: absolute; top:50%; left:30px; margin-top: -15px; width: 30px; height: 30px; background-image: url(../images/ico_search_white.png); background-size: cover;} .search-content .button input{ position: absolute; z-index: 2; top:0; left:0; width: 100%; height: 46px; background: none; border: none; cursor: pointer;} .bg-content{ padding: 60px 0 100px; background: #F8F8F8;} /* ========== */ /* = PRODUCT = */ /* ========== */ .product{padding: 60px 0 110px; } .product .theme-f30{ margin-top: 50px;} .product-categor{ margin: 40px 0; display: flex; flex-flow: wrap; align-items:stretch; justify-content:space-between; background: #ffffff; border:1px solid #b9c6e2;} .product-categor h3{ width: 15%; padding: 25px 0; background: #f8f8f8; border-right:1px solid #b9c6e2; text-align: center; font-size: 24px; color: #333333; font-weight: 600;} .product-categor .con{ width: 85%; padding: 20px;} .product-categor .con a{ margin-right: 25px; display: inline-block; line-height: 44px; font-size: 18px;} .product-categor .con a.active, .product-categor .con a:hover{ color: #3d60af;} .product-categor-sub{ margin: 35px 0 40px; font-size: 0;} .product-categor-sub a{ margin-top:20px; margin-right: 20px; padding: 0 25px; border-radius: 5px; display: inline-block; vertical-align: middle; font-size: 18px; line-height: 40px; background: #f8f8f8; border:1px solid #b9c6e2;} .product-categor-sub a:hover{ color: #3d60af;} .product-categor-sub a.active{ background: #3d60af; border:1px solid #3d60af; color: #FFFFFF;} .product-categor-sub .blue-a{ padding-right: 35px; position: relative;} .product-categor-sub .blue-a:after{ content: ''; position: absolute; margin-top: -10px; top:50%; right:15px; width: 15px; height: 20px; background-size: cover; background-image: url(../images/blue_arrows2.png); } .product-categor-sub .blue-a{ color: #3d60af;} .pro-button{ display: none; position: absolute; bottom: 18px; left:0; width: 100%; text-align: center;} .pro-button .more-button{ margin: 0 2px; width: 118px; line-height: 34px; padding-left: 18px; font-size: 16px;} .pro-button .more-button:after{ content: ""; right: 10px;} .pro-button .more-button:nth-child(2){ background: #3d60af;} .product .product-new-list{ margin-bottom: 60px !important; } .product-new-list{ margin: 0 -30px 100px;} .product-new-list li{ margin-top: 45px; float: left; width: 25%; padding: 0 30px;} .product-new-list li:nth-child(4n+1){ clear: both;} .product-new-list li .product-item .img{ position: relative; overflow:hidden;} .product-new-list li .product-item .img img{ width: 100%;} .product-new-list li .product-item .tit{ margin-top: 32px; font-size: 20px; color: #333333; font-weight:600;} .product-new-list li .product-item .des{ margin-top: 25px; font-size: 16px; line-height: 30px; text-align: justify;} .product-new-list li .product-item .des p{ padding-left: 16px; position: relative;} .product-new-list li .product-item .des p:before{ content: ""; position: absolute; top:11px; left:0; width: 8px; height: 8px; background: #3d60af; border-radius: 100%;} .product-new-list li .product-item:hover .pro-button{ display: block;} .product-new-list li .product-item:hover .tit{ color: #3d60af;} .product .product-list{ margin-bottom: 55px;} .product-list{ margin: 0 -20px;} .product-list li{ float: left; width: 25%; padding:20px;} .product-list li:nth-child(4n+1){ clear: both;} .product-list li .product-box{ background: #FFFFFF; -webkit-box-shadow:0 2px 10px rgba(0,0,0,.1); box-shadow:0 2px 10px rgba(0,0,0,.1); padding: 10px 10px 15px;} .product-list li .product-box .img{ position: relative; overflow:hidden;} .new-ion{ position: absolute; top: 0;left: 0; background: red; color: #fff; padding: 3px 15px;display: inline-block;} .product-list li .product-box .img .tc-ion{ position: absolute; top: 0;left: 0; background: #bcbcbc; color: #fff; padding: 3px 15px;display: inline-block;} .product-list li .product-box .img img{ width: 100%;} .product-list li .product-box .tit{ margin-top: 10px; line-height: 46px; font-size: 20px; font-weight: 600; color: #333333; border-bottom:1px solid #dddddd;} .product-list li .product-box .des{ margin-top: 10px; font-size: 16px; line-height: 24px; height: 48px; text-align: justify; overflow: hidden;} .product-list li .product-box:hover .pro-button{ display: block;} .product-list li .product-box:hover .tit{ color: #3d60af;} /* ========== */ /* = PRODUCT-DETAIL = */ /* ========== */ .product-content{ padding: 60px 0 76px;} .product-content .container{ display: flex; flex-flow: wrap; align-items: flex-start; justify-content:space-between;} .product-content .left{ width: 40%; max-width: 540px; position: relative;} .product-content .swiper-product-img .swiper-slide{ position: relative;} .product-content .swiper-product-img .video-button{ position: absolute; bottom: 20px; right:20px; background-image: url(../images/blue_play.png); width: 50px; height: 50px; background-size: cover; cursor: pointer;} .product-content .swiper-product-img img{ width: 100%;} .product-content .swiper-product-img .ico-fangda{ position: absolute; bottom: 20px; right:20px; background-image: url(../images/ico_fangda.png); width: 50px; height: 50px; background-size: cover; cursor: pointer;} .product-content .swiper-product-img .tc-ion{ position: absolute;top: 10px;left: 10px;background: #bcbcbc;color: #fff;padding: 3px 15px;display: inline-block;} .product-content .button{ position: relative; text-align: center;} .product-content .button>div{ display: inline-block; position: relative;} .product-content .button .swiper-button-prev, .product-content .button .swiper-button-next{ margin-top: -13px; width: 26px; height: 26px; background-color: rgba(0,0,0,0);} .product-content .button .swiper-button-prev{ right:110%; left:auto; background-image:url(../images/pro_prev.png);} .product-content .button .swiper-button-next{ left:110%; right:auto; background-image: url(../images/pro_next.png); } .product-content .button .swiper-button-prev:hover{ background-image: url(../images/pro_prev_hover.png); background-color: rgba(0,0,0,0);} .product-content .button .swiper-button-next:hover{ background-image:url(../images/pro_next_hover.png); background-color: rgba(0,0,0,0);} .product-content .button .swiper-pagination{ position: relative;} .product-content .text{ width: 57%; text-align: justify;} .product-content .text .title{ padding-right: 140px; padding-bottom:15px; position: relative;} .product-content .text .title h1{ font-size: 36px; color: #3d60af; font-weight: 600;} .product-content .text .title:after{ content: ""; position: absolute; bottom: 0; left:0; width: 40px; height: 2px; background: #333333;} .product-content .text .txt{ margin-top: 20px; font-size: 20px; line-height: 40px; color: #333333; font-weight: 600;} .product-content .text .des{ margin-top: 20px; font-size: 16px; line-height: 30px;} .product-content .text .tip{ margin-top: 60px; display: flex; flex-flow: wrap; align-items: flex-start; justify-content:space-between;} .product-content .text .tip ul{ width: 65%; } .product-content .text .tip li{ float: left; width: 20%; padding: 0 10px 20px;} .product-content .text .tip li div{ background: #f8f8f8; border-radius:8px; } .zoomContainer{ z-index: 999; } .zoomLens{ border-radius: 100%; overflow: hidden; } .product-detail-tab{ text-align: center; background: #f8f8f8; line-height: 78px; position:relative;} .product-detail-tab .container{ display: flex; flex-flow: wrap; align-items: flex-start; justify-content:center;} .product-detail-tab li{ width:14.2857%; display: inline-block; font-size: 24px; color: #3d60af; position:relative; cursor: pointer;} .product-detail-tab li span{ display: block; width: 100%; position: relative; z-index: 1;} .product-detail-tab li span:before{ content: ""; position: absolute; left:0; top:50%; transform: translateY(-50%); width:1px; height: 30px; background: #3d60af;} .product-detail-tab li:last-child span:after{ content: ""; position: absolute; right:0; top:50%; transform: translateY(-50%); width:1px; height: 30px; background: #3d60af;} .product-detail-tab li.active:after{ content: ""; position: absolute; z-index:0; width: 102%; left:-1%; top:0; height: 100%; background: #3d60af; } .product-detail-tab li.active span{ color: #FFFFFF;} .product-detail-content .js-tab-con{ height: 0; overflow:hidden;} .product-detail-content .js-tab-con.active{ height: auto;} #host{ position: absolute; top:-120px; right:0; width:100%; } /**PRODUCT-DETAIL 概要**/ .product-detail-outline{ padding: 50px 0 99px;} .product-detail-outline .text{ font-size: 16px; line-height: 30px; color: #333333;} .product-detail-outline .character{ margin-top: 25px; padding: 20px; background: #f8f8f8; } .product-detail-outline .character .tit{ font-size: 18px; color: #333333; font-weight: bold;} .product-detail-outline .character .des{ margin-top: 10px; line-height: 24px;} .product-onebox{ margin-top: 95px; display: flex; flex-flow: wrap; align-items: center; justify-content:space-between;} .product-onebox .img{ width: 40%;} .product-onebox .text{ width: 52%;} .product-onebox .text .tit{ font-size: 30px; color: #333333; font-weight:600;} .product-onebox .text .des{ margin: 30px 0 50px; font-size: 18px; line-height: 30px;} .product-video{ background: #f8f8f8; padding-bottom: 75px;} .product-video li{ padding-top: 58px; display: flex; flex-flow: wrap; align-items: flex-start; justify-content:space-between;} .product-video li .videoimg{ width: 26%; position: relative;} .product-video li .videoimg img{ width: 100%;} .product-video li .ykplayer{ position: absolute; top:0; left:0; width: 100%; height:100%; z-index: 0;} .product-video li .videoimg iframe{ position: absolute; top:0; left:0;} .product-video li .videoimg video{ width: 100%;} .product-video li .text{ width: 71%; color: #333333; text-align:justify;} .product-video li .text .tit{ font-size: 24px; font-weight: bold; padding: 8px 0 25px; position:relative; text-overflow: initial; white-space: initial;} .product-video li .text .tit:after{ content: ""; position: absolute; bottom: 0; left:0; width: 40px; height: 4px; background: #3d60af;} .product-video li .text .des{ margin-top: 10px; font-size: 16px; line-height: 30px;} .product-video li .text .des a{ color:#3d60af; } /**PRODUCT-DETAIL 规格**/ .product-detail-recorder{ padding-top:50px;} .product-detail-recorder .recorder_basic{ font-size: 30px; color: #333333; font-weight:600;} .product-detail-recorder table{ width: 100%; margin: 30px 0 50px;} .product-detail-recorder table td, .product-detail-recorder table th{ border:1px solid #b9c6e2;} .product-detail-recorder table th{ width: 20%; padding:30px 2% 30px 5%; background: #f8f8f8; font-size: 20px; color: #333333; font-weight:600;} .product-detail-recorder table td{ padding: 15px 3%; line-height: 24px;font-size: 16px; } /**PRODUCT-DETAIL 选件**/ .product-detail-options .theme-f30{ margin-top: 55px;} .product-detail-options .des{ margin-top:10px; font-size: 16px; color: #333333;} .product-detail-options ul{ margin: 20px -20px 0;} .product-detail-options ul li{ float: left; width: 33.33333%; padding: 20px;} .product-detail-options ul li:nth-child(3n+1){ clear:both;} .product-detail-options .box{ background: #f8f8f8; padding:10px; display: flex; flex-flow: wrap; align-items: center; justify-content:space-between; } .product-detail-options .box .img{ width: 27%; border:1px solid #b9c6e2; position: relative; cursor: pointer;} .product-detail-options .box .img img{ width: 100%; overflow: hidden;} .product-detail-options .box .img:after{ content: ""; position: absolute; z-index: 1; bottom: 0; right:0; width: 30px; height: 30px; background-image: url(../images/ico_magnifier.png); background-size: cover;} .product-detail-options .box .text{ width: 68%; position: relative;} .product-detail-options .box .text span{ padding-bottom: 12px; position: relative; display: block; font-size: 18px; color: #333333; font-weight: 600;} .product-detail-options .box .text span:after{ content: ""; position: absolute; bottom: 0; left:0; width: 20px; height: 2px; background: #3d60af;} .product-detail-options .box .text p{ margin-top: 10px; line-height: 24px; position: relative;} .product-detail-options .box .text .more{ display:block; font-style: normal;text-align:right; line-height: 24px; color: #3d60af; background: #f8f8f8; padding-left:10px;} .product-detail-options .line{ border-bottom: #D9D9D9 1px solid; margin-top: 20px;} .product-detail-options .line:first-child{ display: none; } /**PRODUCT-DETAIL 相关下载**/ .pro-detail-download{ padding-top: 55px;} .pro-detail-download .leftsub{ float: left; width: 200px; padding: 0 14px; border: 1px solid #b9c6e2;} .pro-detail-download .leftsub span{ display: block; position: relative; line-height: 60px; font-size: 16px; border-bottom: 1px solid #b9c6e2; cursor: pointer;} .pro-detail-download .leftsub span:last-child{border-bottom: none;} .pro-detail-download .leftsub span.active{ color: #3d60af;} .pro-detail-download .leftsub span.active:after{ content: ""; position: absolute; top:50%; margin-top: -10px; right:0; width: 14px; height: 14px; margin-top: -7px; background-image: url(../images/blue_arrows.png); background-size: cover;} .pro-detail-download .right-con{ margin-left: 260px;} .pro-detail-download .right-con .tabcon{ display: none;} .pro-detail-download .right-con .tabcon.active{ display: block;} .pro-detail-download .donwnload-list li a{ display: block; line-height: 75px; border-bottom: 1px solid #b9c6e2; position: relative; padding-left: 60px; padding-right: 150px;} .pro-detail-download .donwnload-list li a:before{ content: ""; position: absolute; top:50%; left:0; margin-top: -20px; width: 40px; height: 40px; background-image: url(../images/ico_pdf.png); background-size: cover;} .pro-detail-download .donwnload-list li a span{ position: absolute; top:0; right:10px; font-size: 18px; color: #3d60af; padding-right: 35px;} .pro-detail-download .donwnload-list li a p{ font-size: 18px; color: #333333;} .pro-detail-download .donwnload-list li a span:after{ content:""; position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right:0; width: 30px; height: 30px; background-image: url(../images/ico_download.png); background-size: cover;} /**product-detail 主机升级**/ .product-detail-host{ padding-top: 20px; font-size: 16px; line-height: 30px;} .product-detail-host .product_f25{ font-size: 24px; color: #333333; font-weight: 600;} .product-detail-host .blue-titi{ margin-top: 50px; margin-left: 20px; position: relative; padding-left: 18px;} .product-detail-host .blue-titi:before{ content: ""; position: absolute; top:50%; margin-top:-10px; background: #3d60af; left:0; width: 2px; height: 20px; } /**product-detail 解决方案**/ .product-detail-solution{ position: relative; margin-top: 60px;} .product-detail-solution .swiper-button-prev, .product-detail-solution .swiper-button-next{ width:48px; height: 48px;margin-top: -24px; background-color: rgba(0,0,0,0);} .product-detail-solution .swiper-button-prev{ left:-70px;background-image:url(../images/pro_prev.png);} .product-detail-solution .swiper-button-next{ right:-70px; background-image: url(../images/pro_next.png);} .product-detail-solution .swiper-button-prev:hover{ background-image: url(../images/pro_prev_hover.png); background-color: rgba(0,0,0,0);} .product-detail-solution .swiper-button-next:hover{ background-image:url(../images/pro_next_hover.png); background-color: rgba(0,0,0,0);} .product-detail-solution .box{ display: block; padding: 10px 10px 15px; background: #f8f8f8;} .product-detail-solution .box .img img{ width: 100%;} .product-detail-solution .box .txt{ margin-top: 12px; font-size: 18px; line-height: 30px; height: 60px; overflow: hidden;} .product-detail-solution .box span{ margin-top: 12px; display: block; border-top: 1px solid #d3dae9; padding-top: 12px; font-size: 16px; color: #3d60af;} .product-detail-solution .box:hover .txt{ color: #3d60af;} /**product-detail 常见问题**/ .product-detail-fillter{ display: flex; flex-flow: wrap; align-items: flex-start; justify-content:space-between; padding-top: 58px;} .product-detail-fillter .col{ position: relative; width:46%; padding-left: 80px;} .product-detail-fillter .col .txt{ position: absolute; top:0; left:0; line-height: 46px; font-size: 24px; color: #333333;} .product-detail-fillter .col:nth-child(2){ padding-left: 185px;} .product-detail-fillter select{ height: 46px; width: 100%; border:1px solid #b9c6e2; background: #fcfcfc; padding:0 15px; font-size: 16px; border-radius:5px;} .product-detail-faq .faq-list{ margin:30px -20px 0; border: none;} .product-detail-faq .faq-list li{ border-right: 2px dashed #d8dfef; } .product-detail-faq .faq-list li:nth-child(2n){ border-right: none; padding-left: 22px;} .product-detail-faq .faq-list li:nth-child(1), .product-detail-faq .faq-list li:nth-child(2){ border-top: none; padding-top: 0;} .faq-list{ margin: 0 -20px;} .faq-list li{ float: left; width: 50%; padding:20px 20px 0; } .faq-list li a{ display: block; line-height: 80px; position: relative; background: #f8f8f8; padding-left: 48px; padding-right: 55px; font-size: 18px; color: #333333;} .faq-list li a:before{ content: ""; position: absolute; left:32px; top:50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 100%; overflow: hidden; background: #333333; border-radius: 100%;} .faq-list li a:after{ content: ""; position: absolute; top:50%; margin-top: -10px; right:28px; width: 20px; height: 20px; background-image: url(../images/blue_arrows.png); background-size: cover;} .faq-list li a:hover{ color: #3c60ae;} /**other-product**/ .other-product{ padding: 80px 0 95px;} .other-product .product-list{ margin-top: 30px;} /* ========== */ /* = PRODUCR_USE = */ /* ========== */ .pro-leftsub li>a, .pro-leftsub li>span{ font-size: 14px !important;} .product-use{ margin-left: 260px;} .product-use .search-content{ max-width:560px; margin: 0 0 50px;} .product-use .tab{ margin-top: 35px; font-size: 0;} .product-use .tab a{ margin-right:20px; margin-bottom: 20px; display: inline-block; border: 1px solid #b9c6e2; padding: 0 22px; line-height: 38px; border-radius: 3px; font-size: 18px;} .product-use .tab a.active{ background: #3d60af; border: 1px solid #3d60af; color: #FFFFFF;} .product-use-list{ margin:15px 0 70px;} .product-use-list li{ border-bottom: 1px solid #b9c6e2; padding: 25px 0;} .product-use-list li a{ display: block; font-size: 18px; color: #333333;} .product-use-list li a span{ margin-right: 6px; display: inline-block; font-size:22px; font-weight: bold;} .product-use-list li a img{ margin-left: 10px; display: inline-block;} .product-use-list li a:hover{ color: #3d60af;} .product-use .page{ text-align: left;} /* ========== */ /* = FAQ_DETAIL = */ /* ========== */ .faq-detail { padding:50px 0 100px;} .faq-detail .title{ padding-bottom: 30px; padding-right: 130px; border-bottom: 1px solid #e5e5e5; position: relative; } .faq-detail .detail{ margin-top: 30px; font-size: 16px; line-height: 30px; text-align: justify;} .faq-detail .detail img{ margin: 0;} .faq-detail .detail .letter{ position: absolute; top:0; left:0; font-size: 24px; color: #3d60af;} .faq-detail .detail .question, .faq-detail .detail .answer{ position: relative; padding-left:30px;} .faq-detail .detail .answer{ margin-top: 30px;} .faq-detail .detail .answer .letter{ color: #ee8c00;} .faq-detail .detail .answer a{ color:#3d60af; text-decoration:underline !important; } .other-faq{ padding-bottom: 100px;} /* ========== */ /* = SOLUTION = */ /* ========== */ .solution-banner{ padding: 15% 0; height: auto; } .solution-newcase{ padding: 70px 0 65px;} .solution-newcase .content{ position: relative;} .solution-newcase .content .swiper-button-prev{ left:-85px;} .solution-newcase .content .swiper-button-next{ right: -85px;} .swiper-solution-newcase{ margin: 0 -20px;} .swiper-solution-newcase .swiper-slide{ padding: 50px 20px;} .swiper-solution-newcase .box{ display: block; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; position: relative;} .swiper-solution-newcase .box:after{ content: ""; position: absolute; z-index: 0; top:20px; left:8%; width:92%; height: 100%; background-image: url(../images/solution_newcase_bg.jpg); background-size: cover;} .swiper-solution-newcase .img{ width: 50%; position: relative; z-index: 1;} .swiper-solution-newcase .img img{ width: 100%;} .swiper-solution-newcase .text{ width: 50%; padding:20px 4% 0; color: #FFFFFF; position: relative; z-index: 1;} .swiper-solution-newcase .text .tit .theme-f24{ display:inline-block; } .swiper-solution-newcase .text .tit span{ display: inline-block; font-size: 18px; margin-left:40px; opacity: .5; text-transform: uppercase;} .swiper-solution-newcase .text .des{ margin: 20px 0 25px; font-size: 18px; line-height: 40px; height: 120px; overflow: hidden; text-align: justify; } .solution-talk{ padding: 80px 0 115px; background-image: url(../images/solution_talk.jpg);} .solution-talk ul{ margin:40px -19px 0;} .solution-talk li{ float: left; width: 33.3333%; padding:20px;} .solution-talk li a{ display: block; background: #FFFFFF; padding: 20px;} .solution-talk li .date span{ display: inline-block; background: #3d60af; color: #FFFFFF; line-height: 24px; padding:0 15px;} .solution-talk li .date i{ margin-left: 12px; display: inline-block; font-style: normal;} .solution-talk li p{ margin-top: 14px; color: #333333; font-size: 18px; line-height: 36px; height: 72px; overflow: hidden;} .solution-case{ padding:80px 0 90px;} .solution-case .content{ margin-top: 28px; position: relative;} .solution-case .content .swiper-button-prev{ left:-85px;} .solution-case .content .swiper-button-next{ right: -85px;} .swiper-solution-case{ margin: 28px -6px 0;} .swiper-solution-case .swiper-slide{ padding:30px 6px;} .swiper-solution-case .swiper-slide .box{ display: block; position:relative;} .swiper-solution-case .swiper-slide .box img{ width: 100%; } .swiper-solution-case .swiper-slide .text{ position: absolute; bottom: 0; left:0; width: 100%; background-color: rgba(61,96,175,.8); color: #FFFFFF; padding: 20% 3% 12%; text-align: center;} .swiper-solution-case .swiper-slide .text span{ display: block; font-size: 24px;} .swiper-solution-case .swiper-slide .text p{ font-size: 16px; margin-top: 5px;} .solution-bottom{ padding: 75px 0 80px; background-image: url(../images/solution_bottom.jpg); text-align: center;} .solution-bottom .theme-center{ margin-bottom: 40px;} /* ========== */ /* = SOLUTION-INDUSTRY = */ /* ========== */ .solution-industry-box{ padding: 80px 0 118px;} .solution-industry-box .container{ display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; } .solution-industry-box .img{ width: 50%;} .solution-industry-box .text{ width: 45%;} .solution-industry-box .text .des{ margin-top: 20px; font-size: 18px; line-height:40px; color: #333333; text-align: justify;} .solution-industry-box .text .des p{ margin-top:5px;} .solution-industry-show{ padding-top: 75px; position: relative;} .solution-industry-show:after{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 92%; background-image: url(../images/solution_show_bg.jpg); background-size: cover;} .solution-industry-show .container{ position:relative; z-index: 1;} .solution-industry-show .des{ margin-top: 35px; font-size: 18px; line-height:30px; text-align: center; color: #FFFFFF;} .solution-industry-show .img{ margin-top: 50px;} .solution-industry-show .img img{ width: 100%;} .solution-industry-case{ padding: 99px 0 120px; text-align: center;} .solution-industry-case ul{ margin:0 -18px; text-align: center; font-size: 0;} .solution-industry-case li{ margin-top: 60px; display: inline-block; width: 33.3333%; padding: 0 18px;} .solution-industry-case li .box{ display: block; background: #FFFFFF; padding: 25px 25px 38px; text-align: center;} .solution-industry-case li .box .img img{ width: 100%;} .solution-industry-case li .box .tit{ margin: 25px 0; font-size: 18px; color: #333333;} .solution-industry-case .ul-02 li{ width: 25%;} .solution-industry-case-bg{ background-image:url(../images/solution_pro_bg2.jpg);} .solution-industry-case-bg .container>.more-button{ margin-top: 50px; width: 315px; line-height:60px;} .solution-industry-app{ padding: 75px 0 60px; background: #3d60af; overflow: hidden;} .solution-industry-app .content{ position: relative; text-align: center;} .solution-industry-app .content .swiper-button-prev{ background-image: url(../images/pro_prev_hover.png);left:-85px;} .solution-industry-app .content .swiper-button-next{ background-image: url(../images/pro_next_hover.png); right: -85px;} .solution-industry-app .content .swiper-button-prev, .solution-industry-app .content .swiper-button-next{ background-color: rgba(255,255,255,.4);} .solution-industry-app .content .swiper-button-prev:hover, .solution-industry-app .content .swiper-button-next:hover{ background-color: rgba(255,255,255,.8);} .swiper-industry-app { margin: 0 -20px;} .swiper-industry-app .swiper-slide{ padding: 55px 20px;} .swiper-industry-app .swiper-slide .box{ display: block; padding: 10px 10px 40px; background: #FFFFFF; text-align: center;} .swiper-industry-app .swiper-slide .box .tit{ margin: 25px 0; font-size: 18px; line-height: 30px; height: 60px; color: #333333;} .solution-sampledata{ background: #fafafa;} .solution-sampledata .container{ display: flex; flex-flow: wrap; align-items:stretch; justify-content:space-between; } .solution-sampledata .left{ width: 34%; position:relative; background: #eef1f8; padding: 100px 0; } .solution-sampledata .left:before{ content: ""; position: absolute; top:0; right:100%; width:100%; height: 100%; background: #eef1f8;} .solution-sampledata .left .des{ margin: 50px 0; width: 80%; font-size: 18px; line-height:30px; min-height:180px; text-align: justify;} .solution-sampledata .content{ width: 60%; position: relative;} .solution-sampledata .content .button{ position: absolute; height: 48px; bottom: 100px; right:0; width: 105px;} .swiper-solution-sampledata{ width: 170%;} .swiper-solution-sampledata .swiper-slide{ padding: 110px 35px 100px;} .swiper-solution-sampledata .swiper-slide .box{ display: block; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; } .swiper-solution-sampledata .swiper-slide .box .img{ width: 38%; padding: 5px; background: #ffffff;} .swiper-solution-sampledata .swiper-slide .box .img img{ width: 100%;} .swiper-solution-sampledata .swiper-slide .box .text{ width: 52%} .swiper-solution-sampledata .swiper-slide .box .text .des{ margin: 40px 0 30px; font-size: 18px; line-height: 36px; text-align: justify; color: #333333;} .swiper-solution-sampledata .swiper-slide .num{ display: none; margin-top: 66px; font-size: 18px; color: #bbbbbb; position: relative;} .swiper-solution-sampledata .swiper-slide .num div{ position: relative; z-index: 1; display: inline-block; padding-right: 30px; background: #fafafa;} .swiper-solution-sampledata .swiper-slide .num:after{ content: ""; position: absolute; top:50%; left:0; width: 100%; border-bottom: 1px solid #e1e1e1;} .swiper-solution-sampledata .swiper-slide .num span{ font-size: 30px; color: #3d60af; font-weight: 600;} .swiper-solution-sampledata .swiper-slide-active .num{ display: block;} .xg-product{ padding: 75px 0 140px; background-image:url(../images/solution_pro_bg.jpg); text-align: center;} .xg-product ul{ display: flex; flex-flow: wrap; align-items:stretch; justify-content:flex-start;} .xg-product li{ display: none; margin-top: 52px; width: 31%; margin-right: 3.5%; padding: 22px 24px 35px; background: #FFFFFF;} .xg-product li.show{ display: block; } .xg-product li:nth-child(3n){ margin-right: 0; } .xg-product li .box { display: block;} .xg-product li .box .img{ background: #F8F8F8;} .xg-product li .box .img img{ width: 100%;} .xg-product li .box .tit{ margin-top: 28px; font-size: 18px; color: #333333; font-weight: 600;} .xg-product li .box .des{ margin: 10px 0 20px; font-size: 16px; line-height: 30px; height:90px; overflow: hidden;} .xg-product li .box:hover .tit{ color: #3d60af;} .xg-product li:nth-child(1), .xg-product li:nth-child(2), .xg-product li:nth-child(3){ display: block !important;} .xg-product .more{ margin-top: 70px; display: inline-block; padding-right: 30px; position: relative; font-size: 20px; color: #3d60af; font-weight: 600;} .xg-product .more:after{ content: ""; position: absolute; top:50%; margin-top: -10px; right:0; width: 20px; height: 20px; background-image: url(../images/ico_arrows_down.png); background-size: cover;} .xg-product .more-02:after{ transform: rotate(180deg); -webkit-transform: rotate(180deg); } .xg-product .more.disnone{ display: none; } /* ========== */ /* = SOLUTION-DOWNLIST = */ /* ========== */ .solution-downlist{ padding: 65px 0 120px;} .solution-downlist .theme-center{ margin-top: 65px;} .solution-downlist .tab{ margin-top: 35px; text-align: center;} .solution-downlist .tab a{ margin: 0 25px; display: inline-block; font-size: 18px; color: #333333;} .solution-downlist .tab a.active{ color: #3d60af;} .solution-downlist .list{ margin-top: 50px;} .solution-downlist .list li{ float: left; width: 47%; margin-right: 6%;} .solution-downlist .list li:nth-child(2n){ margin-right: 0;} .solution-downlist .list li a{ display: block; line-height: 75px; border-bottom: 1px solid #b9c6e2; position: relative; padding-left: 60px; padding-right: 40px;} .solution-downlist .list li a:before{ content: ""; position: absolute; top:50%; left:0; margin-top: -20px; width: 40px; height: 40px; background-image: url(../images/ico_pdf.png); background-size: cover;} .solution-downlist .list li p{ font-size: 18px; color: #333333;} .solution-downlist .list li span,.solution-downlist .list li .span{ position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right:0; width: 30px; height: 30px; background-image: url(../images/ico_download.png); background-size: cover;padding: 0;} /* ========== */ /* = SOLUTION_APP = */ /* ========== */ .solution-app{ padding: 80px 0 95px;} .solution-app-box{ margin-bottom: 95px; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; background: #f5f7fb;} .solution-app-box .img{ width: 50%;} .solution-app-box .img img{ width: 100%;} .solution-app-box .text{ width: 50%; padding: 0 5%;} .solution-app-box .text .des{ margin-top: 35px; font-size: 18px; line-height: 36px; color: #333333;} .solution-app-box .text .des p{ position: relative; padding-left: 15px;} .solution-app-box .text .des p:before{ content: ""; position: absolute; top:16px; left:0; width: 4px; height: 4px; background: #333333; border-radius: 100%;} .solution-app-tit{ margin-bottom: 60px; padding: 20px 100px 20px 16px; line-height: 50px; background: #eefafa; position: relative;} .solution-app-tit p{ position: relative; padding-left: 15px;} .solution-app-tit p:before{ content: ""; position: absolute; top:10px; left:0; width: 4px; height: 30px; background: #3d60af;} .solution-app-tit span{ position: absolute; top:20px; right:30px; font-size: 40px; color: #a7bcdc; font-weight: 600; } .solution-app-desbox{ margin-bottom: 40px; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; background: #f8f8f8;} .solution-app-desbox .img{ width:41%;} .solution-app-desbox .img img{ width: 100%;} .solution-app-desbox .text{ width: 59%; padding: 0 5%;} .solution-app-desbox .text .tip{ font-size: 16px;} .solution-app-desbox .text .des{ margin: 30px 0 45px; font-size: 16px; line-height: 36px; text-align: justify; } .solution-app .product-list{ margin-bottom: 90px;} .solution-app-more{ background: #f8f8f8; padding: 60px 0; text-align: center; } .solution-app-more .more-button{ background: #3d60af; width: 315px; line-height:60px; font-size: 24px; padding-left: 87px;} .solution-app-more .more-button:after{ right:70px;} /* ========== */ /* = SOLUTION-DETAIL = */ /* ========== */ .solution-detail { padding:50px 0 100px;} .solution-detail .title{ padding-bottom: 30px; padding-right: 130px; border-bottom: 1px solid #e5e5e5; position: relative; } .solution-detail .title .tip{ font-size: 18px; color: #666666; font-weight: normal; margin-left: 10px;} .solution-detail .detail{ margin-top: 30px; font-size: 16px; line-height: 30px; text-align: justify;} .solution-detail .detail a{ color: #3d60af; text-decoration:underline !important; } .solution-detail .detail .gary-tit{ margin: 0; padding: 13px 20px; background: #e8f0fe;} .solution-detail .detail .gary-tit p{ font-size: 20px; font-weight: 600; line-height: 40px; position:relative; padding-left: 10px; color: #3d60af;} .solution-detail .detail .gary-tit p:before{ content: ""; position: absolute; top:10px; left:0; width: 2px; height: 20px; background: #3d60af;} .solution-detail .detail .con{ margin: 35px 0; } .solution-detail-more{ background: #f8f8f8; padding: 60px 0; text-align: center; } .solution-detail-more .more-button{ width: 315px; line-height:60px; font-size: 24px; padding-left: 87px;} .solution-detail-more .more-button:after{ right:70px; width: 30px; height: 30px; background-image: url(../images/ico_down_wihite.png);} /* ========== */ /* = SPEECH = */ /* ========== */ .about-leftsub{ float: left; width: 200px; background: #ffffff; -webkit-box-shadow:0 3px 10px rgba(0,0,0,.15); box-shadow:0 3px 10px rgba(0,0,0,.15);} .about-leftsub li>a, .about-leftsub li>span{ display: block; padding: 20px 35px 20px 20px; font-size: 16px; position: relative; cursor: pointer;} .about-leftsub li>a:before, .about-leftsub li>span:before{ content: ""; position: absolute; bottom: 0; left: 2%; width: 96%; border-bottom:1px solid #eeeeee;} .about-leftsub li:last-child>a:before{ border-bottom: none;} .about-leftsub li.current>a, .about-leftsub li.current>span{ background: #3d60af; color: #FFFFFF;} .about-leftsub li.current>span a{ color:#FFFFFF; display: inline-block;} .about-leftsub li.current>a:after, .about-leftsub li.current>span:after{ content: ""; position: absolute; top:50%; margin-top:-10px; right:16px; width: 20px; height: 20px; background-image:url(../images/wihite_arrows2.png); background-size: cover;} .about-leftsub li.current>a:before, .about-leftsub li.current>span:before{ border-bottom: none;} .about-leftsub li div{ display: none;} .about-leftsub li div.current{ display:block;} .about-leftsub li div a{ display: block; line-height: 52px; font-size: 14px; padding-left: 29px; background: #f8f8f8; position: relative;} .about-leftsub li div a:hover{ color: #3d60af;} .about-leftsub li div a:before{ content: ""; position: absolute; bottom: 0; left: 2%; width: 96%; border-bottom:1px solid #eeeeee;} .about-leftsub li.current div{ display: block;} .about-leftsub li div a.current{ background: #3d60af; color: #FFFFFF;} .about-leftsub li div a.current:before{ display: none;} .about-leftsub li div a.current:after{ content: ""; position: absolute; top:50%; margin-top:-10px; right:16px; width: 20px; height: 20px; background-image:url(../images/wihite_arrows2.png); background-size: cover;} .about-right-content{ margin-left: 220px; font-size: 16px; line-height:30px; text-align: justify;} .about-right-content img{ display: inline-block;} .mt40{ margin-top: 40px;} .mt10{ margin-top: 10px;} .boxline-tit{ padding: 10px 90px 10px 16px; line-height: 40px; background: #eefafa; color: #3d60af; position: relative; } .boxline-tit p{ position: relative; padding-left: 15px; font-size: 20px; font-weight: bold;} .boxline-tit p:before{ content: ""; position: absolute; top:10px; left:0; width: 2px; height: 20px; background: #3d60af;} .boxline-tit span{ position: absolute; top:10px; right:20px; font-size: 36px; color: #a7bcdc; font-weight: 600; } .boxline-tit2{ background: #f5f6fa; color: #333333;} .boxline-tit3{ color: #20a09c;} .boxline-tit3 p:before{ background: #26a19e;} .boxline-tit3 span{ color: #b0dfdd;} .speech{ padding: 50px 40px 40px; background: #FFFFFF; } .speech .text{ margin-top: 30px; } .speech .text-right{ margin-top:60px; text-align: right; font-size: 18px; line-height: 40px; color: #333333;} /* ========== */ /* = PHILOSOPHY = */ /* ========== */ .philosophy-box{ background: #FFFFFF; padding: 50px 40px; display: flex; flex-flow: wrap; align-items:flex-start; justify-content:space-between; position: relative;} .philosophy-box .num{ position: absolute; top:0; right:0; font-size: 170px; font-weight: 600; line-height: 180px; color: #f0f2f8;} .philosophy-box .left{ width: 54%; text-transform: uppercase; } .philosophy-box .left h2{ font-size: 60px; color: #c1c9e1; font-weight: 600; line-height: 60px; margin-bottom: 15px;} .philosophy-box .left img{ margin-top: 30px; width: 100%;} .philosophy-box .right{ width: 54%; margin-left: -8%; color: #333333; position: relative; z-index: 1;} .philosophy-box .right .des{ margin: 10px 0 60px;} .philosophy-box .right .des span{ display:inline-block; font-weight: 600; font-size: 20px; margin-right:3px;} .philosophy-content{ margin-top: 60px; background: #FFFFFF; padding: 50px 40px;} .philosophy-bottom{ margin-top: 60px; background: #FFFFFF; padding: 55px 40px 40px;} .philosophy-bottom ul{ display: flex; flex-flow: wrap; align-items:stretch; justify-content:space-between; } .philosophy-bottom li{ margin-top: 40px; width: 31%;} .philosophy-bottom li .box img{ width: 100%;} .philosophy-bottom li .box .text{ border: 1px solid #dddddd; border-top: none; padding:20px 20px 25px;} .philosophy-bottom li .box p{ font-size: 14px; margin-top: 5px;} .philosophy-bottom li .box .des{ margin-top: 10px; border-top: 1px solid #e5e5e5; font-size: 0; text-align: left;} .philosophy-bottom li .box .des span{ display: inline-block; margin-top: 10px; margin-right: 10px; font-size: 14px; background: #f8f8f8; color: #333333; line-height: 30px; padding: 0 15px; border-radius: 4px;} .philosophy-bottom li .box .des span:last-child{ margin-right: 0;} /* ========== */ /* = introduction = */ /* ========== */ .introduction-box { background: #fff; padding:50px 40px;} .introduction-box .des{ margin-top:15px; text-align: center;} .introduction-box .video-box{ margin:25px 0 55px;} .introduction-box .video-box video{ width: 100%;} .introduction-box .development-ul{ margin-bottom: 58px;} .introduction-box .development-ul li{ margin-top: 25px;} .introduction-box .fangzhen-list{ display: flex; flex-flow: wrap; align-items:flex-start; justify-content:space-between; } .introduction-box .fangzhen-list li{ margin-top: 35px; width: 11.1111%; padding: 0 5px;text-align: center;} .introduction-box .fangzhen-list li img{ margin: 0 auto; border-radius: 100%;overflow: hidden;} .introduction-box .fangzhen-list li p{ margin-top: 10px; text-align: center; color: #333333;font-size: 14px;line-height:18px;} .introduction-probox{ margin-top: 60px; background: #fff; padding: 55px 40px 85px;} .swiper-introduction-probox{ margin-top: 50px; background: #f5f6fa; } .swiper-introduction-probox .swiper-slide{ padding:20px 65px 40px; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between;} .swiper-introduction-probox .swiper-slide .text{ width: 65%;} .swiper-introduction-probox .swiper-slide .text .tit{ font-size: 18px;color: #20a09c;font-weight: 600;} .swiper-introduction-probox .swiper-slide .text .line{ margin:6% 0; border-bottom: 1px solid #a0d4d4;} .swiper-introduction-probox .swiper-slide .text .tip{ font-size: 18px; color: #333;} .swiper-introduction-probox .swiper-slide .text .des{ margin-top: 10px;max-width: 400px;} .swiper-introduction-probox .swiper-slide .img{ width: 30%; } .swiper-introduction-probox .swiper-slide .img img{ width: 100%;} .swiper-introduction-probox .swiper-button-prev, .swiper-introduction-probox .swiper-button-next{ background-color: rgba(0,0,0,0);} .swiper-introduction-probox .swiper-button-prev{ background-image:url(../images/pro_prev.png);} .swiper-introduction-probox .swiper-button-next{ background-image: url(../images/pro_next.png); } .swiper-introduction-probox .swiper-button-prev:hover{ background-image: url(../images/pro_prev_hover.png); background-color: rgba(0,0,0,0);} .swiper-introduction-probox .swiper-button-next:hover{ background-image:url(../images/pro_next_hover.png); background-color: rgba(0,0,0,0);} .swiper-introduction-probox .swiper-pagination{ bottom: 20px;} .swiper-introduction-probox .swiper-pagination-bullet{ width: 12px; height:12px; margin: 0 10px; border:none;background: #3d60af; opacity: .2;} .swiper-introduction-probox .swiper-pagination-bullet-active{ opacity: 1;} .introduction-area{ margin-top: 60px; background: #fff; padding: 55px 40px 70px;} .introduction-area ul{ margin-top: 30px;} .introduction-area li{ padding: 25px 0; border-bottom: 1px solid #d8dfef; display: flex; flex-flow: wrap; align-items:flex-start; justify-content:space-between;} .introduction-area li:last-child{ border-bottom: none;} .introduction-area li span{ width:20%;display: block; font-size: 22px;color: #3d60af; } .introduction-area li span i{ font-weight: bold; font-style: normal;} .introduction-area li p{ width: 78%;} /* ========== */ /* = ABOUTUS = */ /* ========== */ .aboutus{ padding: 55px 45px 80px; background: #fff;} .aboutus-box{ margin-bottom:60px; display: flex; flex-flow: wrap; align-items:flex-start; justify-content:space-between;} .aboutus-box .text{ width: 50%;} .aboutus-box .img{ width: 45%;} .aboutus-box .img img{ width: 100%;} .aboutus .line{ width: 100%;border-bottom: 1px solid #d8dfef;} .about-table{ margin-top: 35px;} .about-table td, .about-table th{ border: 2px solid #fff; padding:12px 18px; font-size: 18px; background:#f5f6fa;} .about-table tr td:nth-child(1){ width: 22%; background: #d3dae9;} .about-table tr th:nth-child(1){ width: 22%; background: #d3dae9;} .about-table th{ font-weight: 600;} .about-table a{ color: #3d60af; text-decoration:underline !important; } .about-table .alink{ display:inline-block; position: relative; padding-right:30px;} .about-table .alink::after{ content:"" ; position: absolute; top:50%; right:0; margin-top: -15px; width: 30px; height:30px; background-image: url(../images/ico_wangzhi.png); background-size: cover;} .map-box{ margin-top:60px; width:100%; height:500px; position:relative; overflow: hidden; } .map-box img{ max-width:1000%;} .map-box .allmap{ width:100%; height: 100%; position: absolute; left: 0; top:0;} .map-box .anchorBL{ display: none; } /* ========== */ /* = DEVELOPMENT = */ /* ========== */ .development{ padding: 40px 40px 80px; background: #FFFFFF;} .development video{ width: 100%;} .development .text{ margin-top: 20px;} .development .text ul{ padding-left: 20px;} .development .text ul li{ list-style: disc;} .development .line{ margin: 50px 0; width: 100%; border-bottom: 1px solid #d8dfef;} .development-ul li{ margin-top: 60px; float: left; width: 49.5%; margin-right:1%;} .development-ul li:nth-child(2){ margin-right: 0;} .development-ul li .box{ display: block; padding: 50px 10px; text-align: center; color: #FFFFFF; text-transform: uppercase;} .development-ul li .box h2{ font-size: 20px;} .development-ul li .box p{ margin-top: 15px;} /* ========== */ /* = ENVIRONMENT = */ /* ========== */ .environment-table{ width: 100%; color: #333333;} .environment-table td, .environment-table th{ border: 1px solid #b9c6e2; text-align: center; padding: 25px 10px;} .environment-table th{ background: #f8f8f8; font-weight: 600;} /* ========== */ /* = history = */ /* ========== */ .history{ background: #fff; padding: 55px 40px 40px;} .history .content{ margin-top: 40px; position: relative; padding-top: 30px;} .history .content:before{ content: ""; position:absolute; top:0; left:50%; margin-left: -8px; background: #3d60af; border-radius: 100%; width: 16px;height: 16px;border-radius: 100%;} .history .content::after{ content: "";position: absolute; top:0; margin-left: -1px; left:50%; width: 2px;height: 95%;background: #3d60af;} .history li{ margin-bottom: 40px; float: left; width: 50%;padding-right: 40px; position: relative; z-index: 1; } .history li .line{ position: absolute; top:40px; right:-5px; width: 95px;height: 2px;background: #f8f8f8;} .history li .line:after, .history li .line:before{ position: absolute; left:0; top:-3px; content: ""; width: 10px;height: 10px;background: #999999;border-radius: 100%;} .history li .line:before{ left:auto; right:0;background: #3d60af;} .history li .box{ background: #f8f8f8; padding: 65px 20px 30px;text-align: right; } .history li .box .tit{ font-weight: 600;color: #3d60af;font-size: 30px;} .history li .box .des{ margin-top: 30px; color: #333333; min-height:180px;} .history li:nth-child(2n){ float: right;padding-right: 0;padding-left: 40px;} .history li:nth-child(2n) .line{ right: auto; left:-5px;} .history li:nth-child(2n) .line:before{ background: #999999;} .history li:nth-child(2n) .line:after{ background: #3d60af;} .history li:nth-child(2n) .box{ text-align: left;} .history li:nth-child(2){ margin-top: 90px;} .honor-box{ margin-top: 60px; padding: 60px 30px 40px; background: #fff;} .honor-box ul{ margin-top: 30px;} .honor-box li{ float: left; width: 25%; padding:10px;} .honor-box li .box{ border: 1px solid #b1bfdf;} /* ========== */ /* = BRAND = */ /* ========== */ .brand-box{ padding: 55px 40px 65px; background: #FFFFFF; margin-bottom: 55px;} .brand-box ul{ display: flex; flex-flow: wrap; align-items:center; justify-content:space-between;} .brand-box li{ margin-top: 40px; width: 32%; text-align: center;} .brand-box li .img{ position: relative;} .brand-box li .img:after{ content: ""; position: absolute; bottom:0; left:10%; width: 80%; border-bottom:1px solid #d8dfef;} .brand-box li .img img{ width: 100%; } .brand-box li .img .theme-f24{ position: absolute; bottom:20px; left:0; width: 100%; text-align: center;} .brand-box li p{ margin-top: 15px; font-size: 18px; color: #333333;} .brand-box li .theme-f24{ margin-top: 10px;} .brand-vieobox{ padding: 20px; margin-bottom: 20px; background: #FFFFFF; display: flex; flex-flow: wrap; align-items:stretch; justify-content:space-between;} .brand-vieobox .video{ width: 48%;} .brand-vieobox .video video{ display: block; width: 100%;} .brand-vieobox .video .videoimg{ position: relative;} .brand-vieobox .video .ykplayer{position: absolute;top: 0; left: 0; height:100%;width: 100%;} .brand-vieobox .video .videoimg iframe { position: absolute;top: 0; left: 0;width: 100%;} .brand-vieobox .text{ width: 47%; position: relative;} .brand-vieobox .text h2{ font-size:48px; color: #3d60af; font-weight:600;} .brand-vieobox .text .line{ margin-top: 20px; border-bottom: 1px solid #b9c6e2;} .brand-vieobox .text span{ margin-top: 20px; display: block; color: #3d60af; font-size: 20px; font-weight:600;} .brand-vieobox .text p{ color: #3d60af; font-size: 18px;} .brand-vieobox .text .txt{ margin-top: 20px; line-height: 24px; font-size: 14px; width: 60%;} .brand-vieobox .text .img{ position: absolute; bottom: 0; right:0; width: 35%;} /* ========== */ /* = DESIGN = */ /* ========== */ .design{ position: relative;} .design .tab{ position:absolute; top:50%; left:60px; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 2; } .design .tab div{ margin:32px 0; position: relative; display: block; width: 6px; height: 6px; background:rgba(255,255,255,.4); border-radius: 100%; cursor: pointer;} .design .tab div span{ display: none; position: absolute; left:20px; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); font-size: 14px; color: #FFFFFF; font-weight: 600;} .design .tab div.active{ background:rgba(255,255,255,1);} .design .tab div.active span{ display: block;} .swiper-design{ position: relative; z-index: 1; height: calc(100vh - 100px);} .swiper-design .swiper-slide{ position: relative;} .swiper-design .con{ position: absolute; top:50%; left:0; width: 100%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } .swiper-design .con-01{ color: #FFFFFF; text-align: center;} .swiper-design .con-01 h2{ font-size: 120px; font-weight: 600;} .swiper-design .con-01 p{ font-size: 24px; margin-top: 20px;} .swiper-design .con-02 .text{ font-size: 18px; line-height: 36px; max-width: 330px; text-align: left; margin: 0 auto; color: #FFFFFF;} .swiper-design .button{ position: absolute; top:50%; right:5%; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding-right: 16px; width: 100px; height: 100px; line-height: 100px; text-align: center; background: #FFFFFF; color: #3d60af; font-size: 18px; font-weight:600; border-radius: 100%;} .swiper-design .button:after{ position: absolute; top:50%; right:10px; transform: translateY(-50%); -webkit-transform: translateY(-50%); content: ""; width: 0; height: 0; display: block; border: 7px solid transparent; border-left-color: #3d60af;} .swiper-design .con-03 ul{ max-width: 810px; margin: 0 auto; display: flex; flex-flow: wrap; align-items:flex-start; justify-content: space-around;} .swiper-design .con-03 li{ width: 50%; padding:0 20px;} .swiper-design .con-03 li a{ display: block; position: relative; overflow: hidden;} .swiper-design .con-03 li img{ width: 100%; -webkit-transition: all ease .6s; transition: all ease .6s;} .swiper-design .con-03 li a:after{ content: ""; -webkit-transition: all ease .6s; transition: all ease .6s; position: absolute; top:0; left:0; width: 100%; height: 100%; border: 20px solid rgba(255,255,255,.2);} .swiper-design .con-03 li .txt{ position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left:15%; width: 70%; text-align: center; color: #FFFFFF;} .swiper-design .con-03 li .txt span{ display: block; font-size:30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.7); font-weight: 600;} .swiper-design .con-03 li .txt p{ font-size: 16px; line-height: 30px; margin-top: 20px;} .swiper-design .con-04 ul{ max-width: 760px; margin: 0 auto; } .swiper-design .con-04 li:first-child{ border-top: 1px solid rgba(255,255,255,.6);} .swiper-design .con-04 li a{ display: block; line-height: 60px; color:#FFFFFF; border-bottom: 1px solid rgba(255,255,255,.6); font-size: 16px;} .swiper-design .con-04 li a span{ margin-right: 15px;} .swiper-design .con-04 li a i{ font-style: normal; } .swiper-design .con-03 li a:hover:after{ border: 0px; } .swiper-design .con-03 li a:hover img{ transform: scale(1.2); -webkit-transform: scale(1.2); } @media (max-height:840px){ .swiper-design .con-02 .text{ font-size: 14px; line-height: 26px;} } @media (max-height:650px){ .swiper-design .con-02 .text{ font-size: 12px; line-height: 22px;} } /* bgimg ********************************************************************************/ .bgimg { width:100%; height:100%; position:fixed; top:0px; left:0px; /*background-color:#3366ff;*/ } /* .vegas-container { width:100vw !important; height:100vh !important; } */ .vegas-container { width:100% !important; height:100% !important; } /* ========== */ /* = JOB = */ /* ========== */ .job-box{ background: #FFFFFF; padding: 50px 35px 35px;} .job-box .des{ margin-top: 20px;} .job-img{ display: flex; flex-flow: wrap; align-items:center; justify-content:space-between; } .job-img div{ margin-top: 15px; width:32.5%;} .job-img div img{ width: 100%;} .job-list li{ margin-top: 20px;} .job-list li .box{ padding: 25px 260px 25px 35px; background: #FFFFFF; position:relative; cursor: pointer;} .job-list li .box .des { margin-top: 10px;} .job-list li .box .des span{ margin-right: 30px; display: inline-block;} .job-list li .box .more-button{ position: absolute; top:50%; right:35px; transform:translateY(-50%); -webkit-transform:translateY(-50%); } .job-bottom{ margin-top: 40px; background: #FFFFFF; padding: 35px;} .job-bottom .ptit{ margin-bottom: 5px; font-size: 20px; font-weight:600; color:#000;} .job-bottom .text{ margin-bottom: 25px;} .job-pop .content{ background: #FFFFFF; max-width: 1100px; border-radius: 6px; text-align:left; padding: 35px;} .job-pop .content .close{ top:10px; right: 10px; border: 1px solid #3d60af; border-radius: 100%;} .job-pop .content .des{ margin-top: 20px; color: #333333;} .job-pop .content .des span{ display: inline-block; margin-right: 15px;} .job-pop .content .con{ margin-top: 15px; padding-top: 30px; border-top: 1px solid #dddddd; line-height: 24px; color: #333333; display: flex; flex-flow: wrap; align-items:flex-start; justify-content:space-between;} .job-pop .content .con div{ width:50%; padding-right: 5%;} .job-pop .content .con a{ color: #333333;} .job-pop .content .con a:hover{ color: #3d60af;} .job-pop .content .con .tip{ margin-bottom:5px; color: #ee8c01;} /* ========== */ /* = NEWS = */ /* ========== */ .news{ padding:60px 40px 80px; background: #FFFFFF;} .news .tab{ margin-top: 35px; } .news .tab a{ display: inline-block; vertical-align: middle; font-size: 18px;} .news .tab span{ margin: 0 20px; display: inline-block; vertical-align: middle; width: 1px; height: 20px; background: #b1bfdf;} .news .tab a.active{ color: #3d60af; font-weight: bold; } .news-list{ margin:30px 0 60px; } .news-list li{ padding: 30px 0; border-bottom: 1px solid #d8dfef;} .news-list li a{ display: block; padding-left: 140px; position:relative;} .news-list li a .date{ position: absolute; top:0; left:0; width: 100px; text-align: center;} .news-list li a .date span{ display: block; background: #3d60af; color: #FFFFFF; line-height: 26px;} .news-list li a .date i{ display: block; margin-top: 10px; color: #333333; font-style: normal;} .news-list li a .des{ margin-top: 20px; font-size: 14px; line-height: 24px; height: 48px; overflow: hidden;} .news .page{ text-align: left;} /* ========== */ /* = NEWS-DETAIL = */ /* ========== */ .news-detail{ padding: 60px 40px 75px; background: #FFFFFF;} .news-detail .top-tip{ position: relative;} .news-detail .top-tip span{ display: inline-block; background: #3d60af; color: #FFFFFF; line-height: 36px; padding: 0 30px; font-size: 18px;} .news-detail .title{ margin-top: 35px; font-size:30px; color: #333333; line-height: 48px; font-weight: 600;} .news-detail .date{ margin-top: 30px; position: relative; font-size:18px; padding-left: 40px;} .news-detail .date:before{ content: ""; position: absolute; top:50%; left:0; width: 30px; height: 30px; margin-top:-15px; background-image: url(../images/ico_time.png); background-size:cover;} .news-detail .detail{ margin-top: 20px; border-top: 1px solid #d8dfef; border-bottom: 1px solid #d8dfef; padding: 40px 0 50px;} .news-detail .detail .ptit{ color: #333333; font-weight: bold; font-size: 18px; line-height: 40px;} .news-detail .detail a{ word-wrap: break-word;;text-decoration: underline !important; color: #3d60af;} .news-detail .flip{ margin-top: 20px; display: flex; flex-flow: wrap; align-items:center; justify-content:space-between;} .news-detail .flip a{ max-width: 46%;} /* ========== */ /* = NETWORK = */ /* ========== */ .network-tit{ margin-top: 30px;} .network-list{ display: flex; flex-flow: wrap; align-items:stretch; justify-content:flex-start;} .network-list li{ margin-top: 15px; margin-right: 2%; width: 32%; background: #ffffff; } .network-list li:nth-child(3n){ margin-right:0;} .network-list li .box{ padding:20px;} .network-list li .box .tit{ font-size: 18px; color: #333333; font-weight: 600;} .network-list li .box .des{ margin-top: 10px; line-height: 18px;} .network-list li .box .des p{ margin-bottom: 8px; position: relative; padding-left:60px;min-height: 18px;} .network-list li .box .des p span{ position: absolute; top:0; left:0; color: #333333; font-weight: 600;} .network-bottom{ margin-top: 60px; padding: 40px 50px 70px; background: #FFFFFF; display: flex; flex-flow: wrap; align-items:stretch; justify-content:flex-start;} .network-bottom .col{ min-width:36%; font-size: 18px; line-height: 36px;} .network-bottom .col span{ color: #333333; } .network-bottom .col a{ text-decoration: underline !important; color: #3d60af; display:inline-block; padding-right: 30px; position: relative;} .network-bottom .col a:after{ content: ""; position: absolute; top:50%; right:0; margin-top: -15px; width: 30px; height:30px; background-image: url(../images/ico_wangzhi.png); background-size: cover;} /* ========== */ /* = IOT = */ /* ========== */ .iot{ padding:50px 0 20px;} .iot .theme-f30{ margin-bottom:40px;} .iot-list{ margin:40px 0 120px;} .iot-list li{ margin-top: 70px; display: flex; flex-flow: wrap; align-items:top; justify-content:space-between;} .iot-list li .img{ width: 24%; position: relative;} .iot-list li .img img{ width: 100%;} .iot-list li .text{ width: 50%; padding:20px 3% 0;} .iot-list li .text .tit{ font-size: 24px; color: #333333; line-height: 40px; font-weight: 600; display:inline-block; max-width: 100%; position: relative; } .iot-list li .text .tit-ico-news{ padding-right: 60px;} .iot-list li .text .tit-ico-news:after{ position: absolute; top:0; right:0; content: ""; display: inline-block; vertical-align: middle; background-image: url(../images/ico_new2.png); width: 50px; height: 40px; background-size:cover;} .iot-list li .text .con{ margin-top: 7%; font-size: 18px; line-height: 30px;} .iot-list li .text .con span{ color: #999999; display: block; margin-bottom: 4px;} .iot-list li .pro-button{ position: relative; right:auto; top:auto; width: 25%; text-align: right; display: block; padding-top: 50px;} @media (max-width:1540px){ /* ========== */ /* = PRODUCT = */ /* ========== */ .product-new-list{ margin: 0 -22px;} .product-new-list li{ padding: 0 22px;} .product-new-list li .product-item .tit{ font-size: 18px;} .product-list{ margin: 0 -15px;} .product-list li{ padding:15px;} .product-list li .product-box .tit{ font-size: 18px;} /* ========== */ /* = PRODUCT-DETAIL = */ /* ========== */ .product-content .text .title h1{ font-size: 32px;} .product-content .more-button{ padding-left: 30px; width:160px; line-height: 40px;} .product-content .more-button:after{ right:20px;} .product-content .text .tip li img{ height: 40px;} /* ========== */ /* = SOLUTION = */ /* ========== */ .solution-newcase .content .swiper-button-prev{ left:-60px;} .solution-newcase .content .swiper-button-next{ right: -60px;} .swiper-solution-newcase .text .des{ font-size: 16px; line-height:32px; height: 96px;} .solution-case .content .swiper-button-prev{ left:-60px;} .solution-case .content .swiper-button-next{ right: -60px;} /* ========== */ /* = SOLUTION-INDUSTRY = */ /* ========== */ .solution-industry-box .text .des{ font-size: 16px; line-height:32px; } .solution-industry-app .content .swiper-button-prev{ left:-60px;} .solution-industry-app .content .swiper-button-next{ right: -60px;} /* ========== */ /* = SOLUTION_APP = */ /* ========== */ .solution-app-box .text .des{ margin-top: 25px; font-size: 16px; line-height: 32px;} .solution-app-box .text .des p:before{ top:14px; } .solution-app-desbox .text .tip{ font-size: 14px;} .solution-app-desbox .text .des{ margin: 20px 0 25px; font-size: 16px; line-height: 32px;} /* ========== */ /* = BRAND = */ /* ========== */ .brand-box li p{font-size: 14px; } .brand-vieobox .text h2{ font-size:38px;} .brand-vieobox .text .line{ margin-top: 15px;} .brand-vieobox .text span{ margin-top: 10px;} /* ========== */ /* = introduction = */ /* ========== */ .introduction-box .fangzhen-list li p{ font-size: 12px;} .swiper-introduction-probox .swiper-slide .text .line{ margin:3% 0;} .introduction-area li span{ font-size: 18px; width: 32%;} .introduction-area li p{ width: 68%;} } @media (max-width:999px){ /* ========== */ /* = NY = */ /* ========== */ .ny-banner{ height: 2.4rem; padding-top:0.6rem;} .ny-banner img{ height:0.5rem;} .ny-banner p{ font-size: 0.45rem;} .ny-banner span{ margin-top: 0.12rem; font-size: 0.34rem;} .theme-f36{ font-size: 0.52rem;} .theme-f30{ font-size: 0.5rem; line-height: 0.8rem; } .theme-f24{ font-size: 0.46rem;} .theme-f20{ font-size: 0.42rem;} .theme-more{ font-size:0.32rem; padding-right:0.4rem;} .theme-more:after{ margin-top: -0.16rem; width: 0.32rem; height: 0.32rem; } .theme-center span{ font-size: 0.46rem; padding: 0 0.4rem;} .theme-center span:before, .theme-center span:after{ width: 0.32rem;} .retrun-alink{ top:0.2rem; line-height:0.4rem; padding-right:0.5rem; font-size: 0.34rem; } .retrun-alink:after{ width: 0.4rem; height: 0.4rem;} .more-button, .more-button2{ line-height: 0.8rem; width:3rem; font-size: 0.34rem; padding-left:0.7rem;} .more-button:after, .more-button2:after{ margin-top:-0.2rem; right: 0.4rem; width: 0.4rem; height: 0.4rem;} .search-content{ padding-right:2.7rem; } .search-content .in{ height: 1rem; padding:0 0.2rem; font-size: 0.36rem; } .search-content .button{ height: 1rem; line-height: 1rem; width: 2.5rem; padding-left: 1.1rem; font-size: 0.4rem;} .search-content .button:before{ left:0.5rem; margin-top: -0.25rem; width: 0.5rem; height: 0.5rem;} .search-content .button input{ height: 1rem; } /* ========== */ /* = PRODUCT = */ /* ========== */ .product{ padding: 1.2rem 0; } .product .theme-f30{ margin-top: 0.8rem;} .product-categor{ margin:0.5rem 0;} .product-categor h3{ width: 100%; padding: 0.4rem; font-size: 0.4rem; border-right: none; border-bottom: 1px solid #b9c6e2;} .product-categor .con{ width: 100%; padding: 0.4rem 0 0.4rem 0.4rem;} .product-categor .con a{ margin-right: 0.4rem; line-height: 0.8rem; font-size: 0.38rem;} .product-categor-sub{ margin: 0.8rem 0 0.533333rem} .product-categor-sub a{ margin-top: 0.133333rem; margin-right: 0.133333rem; padding: 0 0.4rem; font-size: 0.32rem; line-height: 0.8rem;} .pro-button{ bottom: 0.3rem; } .pro-button .more-button{ margin: 0 0.03rem; width:2.8rem; font-size: 0.34rem; padding-left:0.6rem;} .pro-button .more-button:after{ right: 0.3rem;} .product-new-list{ margin:0 0 1rem;} .product-new-list li{ margin-top:0.8rem; width: 100%; padding: 0;} .product-new-list li .product-item .tit{ margin-top:0.32rem; line-height: 0.8rem; font-size: 0.42rem; } .product-new-list li .product-item .des{ margin-top: 0.3rem; font-size: 0.34rem; line-height: 0.64rem;} .product-new-list li .product-item .des p{ padding-left:0.4rem; } .product-new-list li .product-item .des p:before{ top:0.24rem; width: 0.16rem; height: 0.16rem; } .product .product-list{ margin-bottom: 0.8rem;} .product-list{ margin: 0;} .product-list li{ margin-top:0.8rem; width: 100%; padding: 0; } .product-list li .product-box{ padding: 0.3rem 0.3rem 0.533333rem; } .product-list li .product-box .tit{ margin-top:0.266666rem; line-height: 0.8rem; font-size: 0.42rem; } .product-list li .product-box .des{ margin-top: 0.266666rem; font-size: 0.34rem; line-height: 0.64rem; height: 1.28rem;} /* ========== */ /* = PRODUCT-DETAIL = */ /* ========== */ .product-content{ padding: 1.2rem 0;} .product-content .left{ width: 100%; max-width: 100%;} .product-content .swiper-product-img .video-button{ bottom: 0.266666rem; right:0.266666rem; width:0.8rem; height: 0.8rem;} .product-content .text{ margin-top:0.6rem; width: 100%;} .product-content .text .title{ padding-right: 2.4rem; padding-bottom:0.3rem;} .product-content .text .title h1{ font-size: 0.533333rem;} .product-content .text .txt{ margin-top: 0.266666rem; font-size: 0.38rem; line-height: 0.7rem;} .product-content .text .des{ margin-top: 0.266666rem; font-size: 0.34rem; line-height: 0.64rem;} .product-content .text .tip{ margin-top: 0.666666rem; } .product-content .text .tip ul{ margin-top: 0.666666rem; width: 100%;} .product-content .text .tip li{ padding: 0 0.133333rem 0.4rem;} .product-detail-tab{ line-height: 1rem;} .product-detail-tab .container{ padding: 0; justify-content:initial;} .product-detail-tab li{ margin-left: -1px; width: 25%; font-size: 0.38rem;} .product-detail-tab li span:before{ height: 0.4rem;} .product-detail-tab li:last-child span:after{ height: 0.4rem;} /**PRODUCT-DETAIL 概要**/ .product-detail-outline{ padding:0.6rem 0;} .product-detail-outline .text{ font-size: 0.34rem; line-height: 0.64rem; } .product-detail-outline .character{ margin-top: 0.266666rem; padding:0.266666rem; } .product-detail-outline .character .tit{ font-size: 0.38rem;} .product-detail-outline .character .des{ font-size: 0.34rem; line-height: 0.64rem;} .product-onebox{ margin-top: 1rem;} .product-onebox .img{ width: 100%;} .product-onebox .text{ margin-top: 0.5rem; width: 100%;} .product-onebox .text .tit{ font-size: 0.4rem; } .product-onebox .text .des{ margin: 0.3rem 0; font-size: 0.34rem; line-height: 0.64rem;} .product-video{ padding-bottom: 1.2rem;} .product-video li{ padding-top: 1rem; } .product-video li .videoimg{ width: 100%;} .product-video li .text{ margin-top: 0.666666rem; width: 100%;} .product-video li .text .tit{ font-size: 0.4rem; padding:0.133333rem 0 0.4rem;} .product-video li .text .des{ margin-top: 0.266666rem; font-size: 0.32rem; line-height: 0.64rem;} /**PRODUCT-DETAIL 规格**/ .product-detail-recorder{ padding-top:0.6rem;} .product-detail-recorder .recorder_basic{ font-size: 0.42rem; } .product-detail-recorder table{ margin: 0.4rem 0 0.8rem;} .product-detail-recorder table th{ width: 30%; padding:0.266666rem 0.133333rem 0.266666rem 0.266666rem; font-size: 0.34rem;} .product-detail-recorder table td{ padding:0.266666rem; font-size: 0.32rem; line-height: 0.64rem;} /**PRODUCT-DETAIL 选件**/ .product-detail-options .theme-f30{ margin-top: 0.666666rem;} .product-detail-options .des{ margin-top:0.133333rem; font-size: 0.32rem; line-height: 0.64rem;} .product-detail-options ul{ margin: 0.266666rem 0 0;} .product-detail-options ul li{ width: 100%; padding:0; margin-top: 0.4rem;} .product-detail-options .box .text span{ font-size: 0.373333rem;} .product-detail-options .box .text p{ margin-top: 0.133333rem; font-size: 0.3rem; line-height: 0.6rem;} .product-detail-options .box .text .more{ font-size: 0.3rem; line-height: 0.6rem;} /**PRODUCT-DETAIL 相关下载**/ .pro-detail-download{ padding-top:0.8rem;} .pro-detail-download .leftsub{ float:none; width: 100%; padding: 0;} .pro-detail-download .leftsub span{ margin-bottom: -1px; float: left; width: 33.3333%; padding: 0 0.4rem; font-size: 0.32rem;} .pro-detail-download .leftsub span.active:after{ right:0.133333rem;} .pro-detail-download .right-con{ margin-left: 0;} .pro-detail-download .donwnload-list li a{ line-height: 1.5rem; padding-left: 1rem; padding-right: 2.3rem;} .pro-detail-download .donwnload-list li a:before{ margin-top: -0.333333rem; width: 0.666666rem; height: 0.666666rem;} .pro-detail-download .donwnload-list li a span{ right:0.133333rem; font-size: 0.32rem; padding-right:0.7rem;} .pro-detail-download .donwnload-list li a p{ font-size: 0.32rem; } .pro-detail-download .donwnload-list li a span:after{ width: 0.62rem; height:0.62rem;} /**product-detail 主机升级**/ .product-detail-host{ padding-top: 0.4rem; font-size: 0.32rem; line-height: 0.64rem;} .product-detail-host .product_f25{ font-size: 0.4rem;} /**product-detail 解决方案**/ .product-detail-solution{ margin-top: 0.8rem; padding: 0 0.4rem;} .product-detail-solution .swiper-button-prev{ left:-0.4rem;} .product-detail-solution .swiper-button-next{ right:-0.4rem;} .product-detail-solution .box .txt{ font-size: 0.34rem; line-height: 0.6rem; height:1.2rem;} .product-detail-solution .box span{ font-size: 0.32rem; } /**product-detail 常见问题**/ .product-detail-fillter{ padding-top: 0.8rem;} .product-detail-fillter .col{ width: 100%; padding-left: 1.2rem;} .product-detail-fillter .col .txt{ line-height:1rem; font-size: 0.35rem;} .product-detail-fillter .col:nth-child(2){ margin-top: 0.4rem; padding-left: 2.6rem;} .product-detail-fillter select{ height: 1rem; padding: 0 0.2rem;font-size: 0.36rem;} .product-detail-faq .faq-list{ margin:1.066666rem 0 0;} .product-detail-faq .faq-list li{ border-right:none; } .product-detail-faq .faq-list li:nth-child(2n){ padding-left: 0;} .product-detail-faq .faq-list li:nth-child(2){ padding-top:0.266666rem;} .faq-list{ margin:0.4rem 0 0;} .faq-list li{ width: 100%; padding:0.266666rem 0 0; } .faq-list li a{ line-height: 1.6rem; padding-left:0.7rem; padding-right: 1rem; font-size: 0.34rem;} .faq-list li a:before{ left:0.4rem;} .faq-list li a:after{ margin-top: -0.15rem; right:0.266666rem; width:0.3rem; height: 0.3rem; } /**other-product**/ .other-product{ padding: 1rem 0;} /* ========== */ /* = PRODUCR_USE = */ /* ========== */ .product-use{ margin-left: 0;} .product-use .search-content{ margin: 0 0 0.666666rem;} .product-use .tab{ margin-top: 0.666666rem; } .product-use .tab a{ margin-right:0.266666rem; margin-bottom: 0.266666rem; padding: 0 0.4rem; line-height: 0.666666rem; border-radius: 3px; font-size: 0.34rem;} .product-use-list{ margin:0.266666rem 0 0.933333rem;} .product-use-list li{ padding: 0.4rem 0;} .product-use-list li a{ font-size: 0.32rem;} .product-use-list li a span{ margin-right: 0.133333rem; font-size:0.32rem; } /* ========== */ /* = FAQ_DETAIL = */ /* ========== */ .faq-detail { padding:1rem 0;} .faq-detail .title{ padding-bottom: 0.4rem; padding-right:0; padding-top: 1rem; } .faq-detail .detail{ margin-top: 0.4rem; font-size:0.34rem; line-height: 0.64rem; } .faq-detail .detail .letter{ font-size: 0.4rem; } .faq-detail .detail .question, .faq-detail .detail .answer{ padding-left:0.666666rem;} .faq-detail .detail .answer{ margin-top: 0.4rem;} .other-faq{ padding-bottom: 1.2rem;} /* ========== */ /* = SOLUTION = */ /* ========== */ .solution-newcase{ padding: 1.2rem 0 1.2rem;} .solution-newcase .content{ padding: 0 0.5rem;} .solution-newcase .content .swiper-button-prev{ left:-0.5rem;} .solution-newcase .content .swiper-button-next{ right: -0.5rem;} .swiper-solution-newcase .swiper-slide{ padding:0.666666rem 20px;} .swiper-solution-newcase .box:after{left:0; width:100%;} .swiper-solution-newcase .img{ width: 100%; } .swiper-solution-newcase .text{ width: 100%; padding:0.666666rem;} .swiper-solution-newcase .text .tit span{ font-size: 0.32rem; margin-left:0; display: block; } .swiper-solution-newcase .text .des{ margin: 0.4rem 0; font-size: 0.34rem; line-height: 0.64rem; height: auto; } .solution-talk{ padding: 1.2rem 0;} .solution-talk ul{ margin:0.533333rem 0 0;} .solution-talk li{ width: 100%; padding: 0; margin-top: 0.4rem;} .solution-talk li a{ font-size: 0.32rem; padding: 0.4rem;} .solution-talk li p{ font-size: 0.36rem; line-height: 0.68rem; height: 1.36rem;} .solution-case{padding: 1.2rem 0;} .solution-case .content{padding: 0 0.5rem;} .solution-case .content .swiper-button-prev{ left:-0.5rem;} .solution-case .content .swiper-button-next{ right: -0.5rem;} .swiper-solution-case{ margin: 0.4rem -6px 0;} .swiper-solution-case .swiper-slide{ padding:0.533333rem 6px;} .swiper-solution-case .swiper-slide .text span{ font-size: 0.45rem;} .swiper-solution-case .swiper-slide .text p{ margin-top: 0.266666rem; font-size: 0.32rem; } .solution-bottom{ padding: 1rem 0; } .solution-bottom .theme-center{ margin-bottom: 0.533333rem;} .solution-bottom .theme-center span{ font-size: 0.44rem;} /* ========== */ /* = SOLUTION-INDUSTRY = */ /* ========== */ .solution-industry-box{ padding: 1.2rem 0;} .solution-industry-box .img{ width: 100%;} .solution-industry-box .text{ width: 100%; margin-top: 0.666666rem;} .solution-industry-box .text .des{ margin-top:0.4rem; font-size: 0.34rem; line-height: 0.64rem;} .solution-industry-show{ padding-top: 1.2rem; } .solution-industry-show .des{ margin-top: 0.4rem; font-size: 0.34rem; line-height: 0.64rem;} .solution-industry-show .img{ margin-top: 0.666666rem;} .solution-industry-case{ padding: 1.5rem 0 1.2rem;} .solution-industry-case ul{ margin:0;} .solution-industry-case li, .solution-industry-case .ul-02 li{ margin-top: 0.666666rem; width: 100%;} .solution-industry-case li .box{ padding: 0.4rem 0.4rem 0.666666rem;} .solution-industry-case li .box .tit{ margin: 0.4rem 0; font-size: 0.4rem;} .solution-industry-case-bg .container>.more-button{ margin-top: 0.666666rem; width: 5rem; line-height:1.2rem; font-size: 0.36rem; padding-left: 0.4rem;} .solution-industry-app{ padding: 1.2rem 0 0.6rem;} .solution-industry-app .content{padding: 0 0.6rem;} .solution-industry-app .content .swiper-button-prev{ left:-0.5rem;} .solution-industry-app .content .swiper-button-next{ right: -0.5rem;} .swiper-industry-app { margin: 0;} .swiper-industry-app .swiper-slide{ padding: 0.6rem 0;} .swiper-industry-app .swiper-slide .box{ padding: 0.4rem 0.4rem 0.666666rem; } .swiper-industry-app .swiper-slide .box .tit{ margin: 0.4rem 0; font-size: 0.38rem; line-height: 0.6rem; height: 1.2rem;} .solution-sampledata .container{ padding: 0;} .solution-sampledata .left{ width: 100%; padding: 1.2rem 0.533333rem; } .solution-sampledata .left .des{ margin: 0.533333rem 0; width: 100%; font-size: 0.34rem; line-height: 0.64rem; min-height: 0;} .solution-sampledata .content{ width: 100%;} .solution-sampledata .content .button{ right:0.6rem; height: 0.8rem; bottom:1.1rem; width: 2rem;} .swiper-solution-sampledata{ width: 100%;} .swiper-solution-sampledata .swiper-slide{ padding: 1.2rem 0.6rem;} .swiper-solution-sampledata .swiper-slide .box .text .des{ margin: 0.4rem 0; font-size: 0.34rem; line-height: 0.64rem;} .swiper-solution-sampledata .swiper-slide .num{ margin-top: 0.666666rem; font-size: 0.32rem;} .swiper-solution-sampledata .swiper-slide .num:after{ width: 70%;} .swiper-solution-sampledata .swiper-slide .num span{ font-size: 0.4rem;} .xg-product{ padding: 1.2rem 0;} .xg-product ul{ margin: 0;} .xg-product li{ margin-top: 0.8rem; width: 100%;} .xg-product li .box { padding: 0.4rem;} .xg-product li .box .tit{ margin-top: 0.266666rem; font-size: 0.36rem; } .xg-product li .box .des{ margin: 0.266666rem 0; font-size: 0.34rem; line-height: 0.6rem; height: 1.8rem;} .xg-product .more{ margin-top: 0.8rem; font-size: 0.4rem;} /* ========== */ /* = SOLUTION-DOWNLIST = */ /* ========== */ .solution-downlist{ padding: 1.2rem 0;} .solution-downlist .theme-center{ margin-top: 0.8rem;} .solution-downlist .tab{ margin-top: 0.533333rem;} .solution-downlist .tab a{ margin: 0 0.266666rem; font-size: 0.36rem; } .solution-downlist .list{ margin-top: 0.666666rem;} .solution-downlist .list li{ width: 100%; margin-right: 0;} .solution-downlist .list li a{ line-height: 1.5rem; padding-left: 1rem; padding-right: 0.7rem;} .solution-downlist .list li a:before{ margin-top: -0.333333rem; width: 0.666666rem; height: 0.666666rem;} .solution-downlist .list li p{ font-size: 0.32rem;} .solution-downlist .list li span{ width: 0.62rem; height:0.62rem;} /* ========== */ /* = SOLUTION_APP = */ /* ========== */ .solution-app{ padding: 1.2rem 0;} .solution-app-box{ margin-bottom: 1.066666rem; } .solution-app-box .img{ width: 100%;} .solution-app-box .text{ width: 100%; padding:0.8rem 0.4rem;} .solution-app-box .text .des{ margin-top: 0.533333rem; font-size: 0.34rem; line-height: 0.64rem;} .solution-app-box .text .des p{ padding-left: 0.3rem;} .solution-app-box .text .des p:before{ top:0.27rem; width:0.1rem; height: 0.1rem; } .solution-app-tit{ margin-bottom: 0.666666rem; padding:0.266666rem 1.4rem 0.266666rem 0.266666rem; line-height: 0.8rem; } .solution-app-tit p{ padding-left:0.3rem;} .solution-app-tit p:before{ top:0.15rem; left:0; width: 0.1rem; height:0.5rem;} .solution-app-tit span{ top:0.266666rem; right:0.4rem; font-size:0.666666rem; } .solution-app-desbox{ margin-bottom: 0.666666rem;} .solution-app-desbox .img{ width:100%;} .solution-app-desbox .text{ width: 100%; padding:0.8rem 0.4rem;} .solution-app-desbox .text .tip{ font-size: 0.32rem;} .solution-app-desbox .text .des{ margin: 0.4rem 0 0.533333rem; font-size: 0.34rem; line-height: 0.64rem;} .solution-app .product-list{ margin-bottom: 1.066666rem;} .solution-app-more{ padding: 0.533333rem 0; } .solution-app-more .more-button{ width: 4rem; line-height:1.2rem; font-size: 0.44rem; padding-left: 0.8rem;} .solution-app-more .more-button:after{ right:0.6rem;} /* ========== */ /* = SOLUTION-DETAIL = */ /* ========== */ .solution-detail { padding:1rem 0;} .solution-detail .title{ padding-bottom: 0.4rem; padding-right:0; padding-top: 1rem; } .solution-detail .detail{ margin-top: 0.4rem; font-size:0.34rem; line-height: 0.64rem; } .solution-detail .detail .gary-tit{ padding:0.266666rem; } .solution-detail .detail .gary-tit p{ font-size:0.4rem; line-height:0.7rem;} .solution-detail .detail .gary-tit p:before{ top:0.15rem; height: 0.4rem;} .solution-detail-more{ padding: 0.533333rem 0; } .solution-detail-more .more-button{ width: 4rem; line-height:1.2rem; font-size: 0.44rem; padding-left: 0.8rem;} .solution-detail-more .more-button:after{ right:0.6rem; width: 0.533333rem; height: 0.533333rem;} /* ========== */ /* = SPEECH = */ /* ========== */ .bg-content{ padding: 1.2rem 0;} .about-right-content{ margin-left: 0; font-size:0.34rem; line-height: 0.64rem;} .boxline-tit{ padding: 0.2rem 1.5rem 0.2rem 16px; line-height: 0.6rem;} .boxline-tit p{ padding-left: 0.266666rem; font-size: 0.4rem;} .boxline-tit p:before{ top:0.1rem; height: 0.4rem;} .boxline-tit span{ top:0.2rem; right:0.266666rem; font-size: 0.6rem;} .speech{ padding: 0.8rem 0.4rem;} .speech .text{ margin-top: 0.4rem;} .speech .text-right{ margin-top:0.8rem; font-size:0.4rem; line-height: 0.8rem;} /* ========== */ /* = PHILOSOPHY = */ /* ========== */ .philosophy-box{ padding:0.8rem 0.4rem;} .philosophy-box .num{ font-size: 1.333333rem; line-height: 1.466666rem;} .philosophy-box .left{ width:100%; } .philosophy-box .left h2{ font-size: 0.666666rem; line-height: 0.666666rem; margin-bottom: 0.133333rem;} .philosophy-box .left img{ margin-top: 0.4rem; } .philosophy-box .right{ margin-top: 0.666666rem; width: 100%; margin-left:0;} .philosophy-box .right .des{ margin:0.266666rem 0 0.666666rem;} .philosophy-box .right .des span{ font-size: 0.4rem;} .philosophy-content{ margin-top: 0.8rem; padding:0.8rem 0.4rem;} .philosophy-bottom{ margin-top: 0.8rem; padding:0.8rem 0.4rem;} .philosophy-bottom li{ margin-top:0.666666rem; width: 100%;} /* ========== */ /* = introduction = */ /* ========== */ .introduction-box { padding:0.8rem 0.4rem;} .introduction-box .des{ margin-top:0.3rem; } .introduction-box .video-box{ margin:0.3rem 0;} .introduction-box .development-ul{ margin-bottom: 0.6rem;} .introduction-box .development-ul li{ margin-top: 0.3rem;} .introduction-box .fangzhen-list li{ width: 33.333%; padding: 0 0.1rem;} .introduction-box .fangzhen-list li img{ width:2rem;} .introduction-box .fangzhen-list li p{ margin-top: 0.2rem; font-size: 0.32rem; line-height:0.5rem;} .introduction-probox{ margin-top: 0.8rem; padding:0.8rem 0.4rem;} .swiper-introduction-probox{ margin-top: 0.8rem; } .swiper-introduction-probox .swiper-slide{ padding:0.4rem 0.6rem; } .swiper-introduction-probox .swiper-slide .text{ width: 100%;} .swiper-introduction-probox .swiper-slide .text .tit{ font-size: 0.4rem;} .swiper-introduction-probox .swiper-slide .text .line{ margin:0.4rem 0;} .swiper-introduction-probox .swiper-slide .text .tip{ font-size: 0.34rem;} .swiper-introduction-probox .swiper-slide .text .des{ margin-top: 0.2rem; max-width:100%;} .swiper-introduction-probox .swiper-slide .img{ width: 100%; } .introduction-area{margin-top: 0.8rem; padding:0.8rem 0.4rem;} .introduction-area ul{ margin-top:0.8rem;} .introduction-area li{ padding: 0.3rem 0;} .introduction-area li span{ width: 38%; font-size: 0.34rem; } .introduction-area li p{ width: 56%;} /* ========== */ /* = ABOUTUS = */ /* ========== */ .aboutus{ padding:0.8rem 0.4rem;} .aboutus-box{ margin-bottom:0.8rem; } .aboutus-box .text{ width: 100%;} .aboutus-box .img{ margin-top:0.8rem; width:100%;} .about-table{ margin-top: 0.5rem;} .about-table td, .about-table th{ padding:0.2rem; font-size: 0.36rem;} .about-table tr td:nth-child(1), .about-table tr th:nth-child(1){ width:30%;} .map-box{ margin-top: 0.6rem; height:6rem; } /* ========== */ /* = DEVELOPMENT = */ /* ========== */ .development{ padding:0.8rem 0.4rem;} .development .text{ margin-top:0.4rem; } .development .line{ margin: 0.8rem 0;} .development-ul li{ margin-top: 0.8rem; width: 100%; margin-right: 0;} .development-ul li .box{ padding: 0.666666rem 0.133333rem; } .development-ul li .box h2{ font-size: 0.44rem;} .development-ul li .box p{ margin-top: 0.266666rem;} /* ========== */ /* = ENVIRONMENT = */ /* ========== */ .environment-table td, .environment-table th{ padding:0.2rem;} /* ========== */ /* = BRAND = */ /* ========== */ .brand-box{ padding:0.8rem 0.4rem; margin-bottom: 0.666666rem;} .brand-box li{ width: 100%;} .brand-vieobox{ padding: 0.4rem; margin-bottom: 0.4rem;} .brand-vieobox .video{ width: 100%;} .brand-vieobox .text{ margin-top: 0.533333rem; width: 100%;} .brand-vieobox .text h2{ font-size:0.533333rem;} .brand-vieobox .text .line{ margin-top: 0.266666rem;} .brand-vieobox .text span{ margin-top: 0.266666rem; font-size: 0.36rem;} .brand-vieobox .text p{ font-size: 0.36rem;} .brand-vieobox .text .txt{ font-size: 0.34rem; line-height: 0.64rem; } /* ========== */ /* = history = */ /* ========== */ .history{padding:0.8rem 0.4rem;} .history .content{ margin-top: 0.6rem; } .history .content:before{ left:0; margin-left:-8px;} .history .content::after{ left:0; margin-left:-1px;} .history li, .history li:nth-child(2n){ margin-bottom: 0.5rem; padding: 0 0 0 0.6rem; width: 100%;} .history li:nth-child(2){ margin-top: 0;} .history li .line{ right: auto; left:-5px; top:0.5rem; width: 1.3rem;} .history li .line:after{ background: #3d60af;} .history li .line:before{ background: #999999;} .history li .box{ padding:0.9rem 0.4rem 0.4rem; text-align: left;} .history li .box .tit{font-size: 0.4rem;} .history li .box .des{ margin-top: 0.4rem;min-height:0px; } .honor-box{ margin-top: 0.8rem; padding:0.8rem 0.4rem;} .honor-box ul{ margin-top: 0.5rem;} .honor-box li{ width: 50%; padding:0.2rem;} /* ========== */ /* = DESIGN = */ /* ========== */ .design .tab{ left:0.5rem;} .design .tab div.active span{ display: none;} .swiper-design{ height: 100vh;} .swiper-design .con-01 h2{ font-size: 0.8rem; } .swiper-design .con-01 p{ font-size: 0.4rem; margin-top: 0.266666rem;} .swiper-design .con-02 .text{ font-size: 0.3rem; line-height: 0.58rem; width:5.6rem;} .swiper-design .button{ padding-right: 0.266666rem; width: 1.4rem; height: 1.4rem; line-height: 1.4rem; font-size: 0.3rem;} .swiper-design .button:after{ right:0.02rem; border: 0.1rem solid transparent; border-left-color: #3d60af;} .swiper-design .con-03 li{ width:54%; float:none; margin: 0 auto; padding:0.133333rem 0;} .swiper-design .con-03 li a:after{ border: 0.266666rem solid rgba(255,255,255,.2);} .swiper-design .con-03 li .txt span{ font-size:0.4rem; padding-bottom: 0.266666rem;} .swiper-design .con-03 li .txt p{ font-size: 0.3rem; line-height: 0.6rem; margin-top: 0.266666rem;} .swiper-design .con-04 ul{ max-width:77%;} .swiper-design .con-04 li a{ line-height: 1.2rem; font-size: 0.34rem;} .swiper-design .con-04 li a span{ margin-right: 0.133333rem;} .swiper-design .swiper-slide:nth-child(1){ background-image: url(../images/bg_img01_pc.jpg); background-size: cover; } .swiper-design .swiper-slide:nth-child(2){ background-image: url(../images/bg_img02_pc.jpg); background-size: cover; } .swiper-design .swiper-slide:nth-child(3){ background-image: url(../images/bg_img03_pc.jpg); background-size: cover; } .swiper-design .swiper-slide:nth-child(4){ background-image: url(../images/bg_img04_pc.jpg); background-size: cover; } .swiper-design .swiper-slide:nth-child(5){ background-image: url(../images/bg_img07_pc.jpg); background-size: cover; } /* ========== */ /* = JOB = */ /* ========== */ .job-box{ padding:0.533333rem;} .job-list li .box{ padding: 0.5rem;} .job-list li .box .des { margin-top:0.133333rem; font-size: 0.34rem;} .job-list li .box .des span{ margin-right: 0.266666rem; } .job-list li .box .more-button{ margin-top: 0.266666rem; position: relative; top:auto; right:auto; transform:translateY(0%); -webkit-transform:translateY(0%); } .job-bottom{ margin-top: 0.666666rem;padding:0.533333rem;} .job-bottom .ptit{ font-size: 0.42rem;} .job-bottom .text{ margin-bottom: 0.4rem; font-size: 0.34rem;} .job-pop .content{ padding:0.533333rem; height: 13.2rem; overflow-y: scroll;} .job-pop .content .close{ top:0.133333rem; right: 0.133333rem;} .job-pop .content .des span{ margin-right: 0.133333rem;} .job-pop .content .con div{ width:100%; padding-right:0;} /* ========== */ /* = NEWS = */ /* ========== */ .news{ padding:0.8rem 0.4rem;} .news .tab{ margin-top: 0.533333rem; } .news .tab a{ font-size: 0.36rem;} .news .tab span{ margin: 0 0.266666rem; height: 0.4rem;} .news-list{ margin:0.666666rem 0; } .news-list li{ padding: 0.5rem 0;} .news-list li a{ padding-left: 0; } .news-list li a .date{ margin-bottom: 0.266666rem; position: relative; top:auto; left:auto; width:100%; text-align: left;} .news-list li a .date span{ display:inline-block; padding: 0 0.266666rem;} .news-list li a .date i{ display: inline-block; margin-top: 0; margin-left: 0.133333rem; } .news-list li a .des{ margin-top:0.2rem; font-size:0.34rem; line-height: 0.6rem; height: 1.2rem; } /* ========== */ /* = NEWS-DETAIL = */ /* ========== */ .news-detail{ padding:0.8rem 0.4rem;} .news-detail .top-tip span{line-height: 0.8rem; padding: 0 0.4rem; font-size:0.4rem;} .news-detail .title{ font-size:0.46rem; line-height: 0.7rem;} .news-detail .date{font-size:0.34rem; padding-left:0.533333rem;} .news-detail .date:before{ width: 0.5rem; height: 0.5rem; margin-top:-0.25rem;} .news-detail .detail .ptit{ font-size:0.38rem; line-height: 0.7rem;} .news-detail .flip a{ display: block; max-width: 100%; width: 100%;} /* ========== */ /* = NETWORK = */ /* ========== */ .network-tit{ margin-top:0.6rem;} .network-list li{ margin-top: 0.4rem; width: 100%; margin-right: 0;} .network-list li .box{ padding:0.4rem;} .network-list li .box .tit{ font-size: 0.4rem; } .network-list li .box .des{ margin-top: 0.4rem; font-size:0.34rem; line-height: 0.64rem;} .network-list li .box .des p{ margin-bottom:0.133333rem; min-height:0.64rem; padding-left:0.92rem;} .network-bottom{ margin-top: 0.8rem; padding:0.6rem;} .network-bottom .col{ margin-bottom: 0.6rem; width:100%; font-size:0.34rem; line-height: 0.64rem;} /* ========== */ /* = IOT = */ /* ========== */ .iot{ padding:1.2rem 0;} .iot .theme-f30{ margin-bottom:0.666666rem;} .iot-list{ margin:0.533333rem 0 1.066666rem;} .iot-list li{ margin-top: 0.8rem;} .iot-list li .img{ width: 100%;} .iot-list li .text{ width: 100%; padding: 0.8rem 0;} .iot-list li .text .tit{ font-size: 0.4rem; line-height: 0.8rem;} .iot-list li .text .tit-ico-news{ padding-right: 0.666666rem;} .iot-list li .text .tit-ico-news:after{ width:0.666666rem; height: 0.533333rem;} .iot-list li .text .con{ margin-top: 0.533333rem; font-size: 0.34rem; line-height: 0.62rem;} .iot-list li .pro-button{ width: 100%; padding-top: 0; text-align: center;} }