.scene-module .link li { display: inline-block; *display: inline; *zoom: 1; } .hardware-content li h4, .hardware-content li p, .applet-content h4, .applet-content p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .i-warp .title p { font-size: 14px; color: #999999; line-height: 24px; margin-top: 20px; } .i-warp.about-module h2 a{ position: relative; z-index: 1; } .i-warp.about-module h2 a i{ width: 126px; height: 21px; background-color: #ff0000; position: absolute; right: -35px; bottom: 3px; z-index: -1; opacity: 0.2; filter: alpha(opacity=20); } .inside-nav-box { height: 119px; } .inside-nav { border-bottom: 1px solid #e5e5e5; } .inside-nav.fixed { position: fixed; width: 100%; background: #fff; top: -118px; opacity: 0; filter: alpha(opacity=0); -webkit-transition: top 0.35s,opacity 0.35s; transition: top 0.35s,opacity 0.35s; z-index: 20; } .inside-nav.fixed.active { top: 0px; opacity: 1; filter: alpha(opacity=100); } .inside-nav ul { float: left; } .inside-nav li { float: left; margin-right: 50px; } .inside-nav li > a { display: block; position: relative; height: 118px; line-height: 118px; font-size: 16px; color: #666666; white-space: nowrap; } .inside-nav li > a i { position: absolute; left: 50%; width: 0; height: 3px; background: #313131; bottom: -1px; } .inside-nav li:hover > a i, .inside-nav li.hover > a i { width: 100%; left: 0; -webkit-transition: left 0.3s,width 0.3s; transition: left 0.3s,width 0.3s; } .inside-nav .sec-nav{ margin-left: 10%; float: right; } .inside-nav .sec-nav li{ list-style: none; margin: 0; } .inside-nav .sec-nav li a{ padding-left: 13px; margin-right: 38px; font-size: 14px; color: #6c6c6c; transition:all 0s; } .inside-nav .sec-nav li.hover a,.inside-nav .sec-nav li:hover a{ background: url(../img/n_ico1.png) no-repeat left center; color: #333333; } .inside-nav .bar { position: relative; } .inside-nav .bar > a { padding: 0 24px; } .inside-nav .bar > a span { display: inline-block; width: 10px; height: 6px; background: url(../img/inside_ico1.png) no-repeat center; margin-left: 10px; vertical-align: 2px; } .inside-nav .bar .slide { position: absolute; top: 118px; left: 0; background: #fff; width: 100%; overflow: hidden; height: 0; -webkit-transition: height 0.6s; transition: height 0.6s; z-index: 10; } .inside-nav .bar .slide dl { padding: 10px 0; border: 1px solid #e5e5e5; } .inside-nav .bar .slide dd a { display: block; padding-left: 24px; font-size: 14px; color: #999999; line-height: 42px; height: 42px; } .inside-nav .bar .slide dd a:hover, .inside-nav .bar .slide dd a.hover { background: #fafafa; color: #313131; } .inside-nav .bar:hover .slide { height: 358px; /*height: 190px;*/ } .inside-nav .bar:hover .slide.four { height: 190px; } .about-module { background: #ffffff; /*padding: 120px 0 200px;*/ padding: 84px 0 200px; } .about-module .content { margin-top: 182px; font-size: 0; text-align: center; } .about-module .content ul { float: none; width: 100%; font-size: 0; text-align: center; } .about-module .content li { display: inline-block; vertical-align: top; width: 20%; margin-right: 20%; } .about-module .content li .img { width: 160px; height: 160px; overflow: hidden; margin: 0 auto 0; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .about-module .content li .img img { display: block; } .about-module .content li .text { margin-top: 25px; } .about-module .content li h3 { font-size: 24px; color: #333333; line-height: 34px; margin-bottom: 10px; } .about-module .content li h3 a{ color: #333333; } .about-module .content li p { font-size: 14px; color: #999999; line-height: 30px; } .about-module .content li p a{ color: #999999; } .about-module .content li:hover .img { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } .about-module .content.two li { width: 25%; margin-right: 30%; } .type-module { padding: 120px 0 0; height: 800px; background-position: center; background-repeat: no-repeat; background-image: url(../img/bg1.jpg); } .type-module .title p { color: #cccccc; } .type-module .title p a{ color: #cccccc; } .type-module .content { margin-top: 125px; } .type-module .content ul { float: none; width: 100%; font-size: 0; text-align: center; } .type-module .content li { display: inline-block; vertical-align: top; width: 20%; text-align: center; margin-bottom: 145px; } .type-module .content li .img { width: 80px; height: 80px; line-height: 1; margin: 0 auto 10px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .type-module .content li p { font-size: 18px; color: #ffffff; line-height: 28px; } .type-module .content li p a{ color: #fff; } .type-module .content li:hover .img { -webkit-transform: translate(0, -5px); transform: translate(0, -5px); } .scene-module { padding: 110px 0 110px; /*background-color: #f4f4f4;*/ background-color: #fff; } .i-warp.scene-module h2 span i{ width: 160px; right: -20px; } .scene-module .link { margin: 68px auto 4px; font-size: 0; text-align: center; } .scene-module .link ul { float: none; } .scene-module .link li { float: none; margin: 0 50px; white-space: nowrap; } .scene-module .link a { display: block; font-size: 18px; color: #999999; line-height: 48px; height: 48px; padding-bottom: 3px; position: relative; min-width: 52px; text-align: center; } .scene-module .link a i { position: absolute; width: 0; height: 3px; left: 50%; bottom: 0; background: #000000; -webkit-transition: margin-left 0.3s,width 0.3s; transition: margin-left 0.3s,width 0.3s; } .scene-module .link a.cur, .scene-module .link a:hover { color: #333; } .scene-module .link a.cur i, .scene-module .link a:hover i { width: 52px; margin-left: -26px; } .scene-module .content-box { margin-top: 25px; overflow: hidden; position: relative; } .scene-module .content-box .content { position: absolute; left: 40px; right: 40px; top: 0; /*background: #fff;*/ } .scene-module .content-box .bg img { display: block; } .scene-module .content-box .bg:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; /*background: url(../img/loading.gif) no-repeat center;*/ } .scene-module .content-box img { max-width: 100%; } .scene-module .content-box .left { width: 40%; left: -50px; top: 0; position: relative; opacity: 0; } .scene-module .content-box .right { width: 52%; left: 50px; top: 0; position: relative; opacity: 0; } .scene-module .content-box .total { width: 100%; top: 0; left: 0; position: relative; opacity: 0; } .scene-module .content-box .box { line-height: 1; } .scene-module .content-box .box.active { left: 0; opacity: 1; } .case-module { background: #f4f4f4; padding: 120px 0 70px; } .case-module .content { margin-top: 85px; } .case-module .content li { float: left; background: #fff; -webkit-transition: top 1s ease, left 1s ease; transition: top 1s ease, left 1s ease; width: 22%; } @media (max-width: 1300px) { .case-module .content li { width: 30%; } } @media (max-width: 1000px) { .case-module .content li { width: 45%; } } @media (max-width: 768px) { .case-module .content li { width: 100%; } } .lazy{ width:100%!important; } .case-module .content li .box { display: block; } .case-module .content li .box:hover { -webkit-box-shadow: 0 0 10px 2px #ccc; box-shadow: 0 0 10px 2px #ccc; } .case-module .content .text { padding: 15px; } .case-module .content .text .tit { font-size: 22px; color: #333333; line-height: 32px; } .case-module .content .text p { font-size: 12px; color: #9c9c9c; line-height: 22px; } .case-module .content .text .line { margin-top: 6px; display: block; width: 12px; height: 1px; background: #dbdbdb; } .case-module .i-btn { display: block; margin: 40px auto 0; width: 198px; height: 58px; line-height: 58px; font-size: 18px; border-radius: 2px; border: 1px solid #e5e5e5; text-align: center; } .shopping-top { padding: 80px 0 100px; background: #ffffff; } .shopping-top .content { width: 1200px; margin: 66px auto 0; position: relative; height: 700px; background: url(../img/shop_bg1.png) no-repeat center; line-height: 1; overflow: hidden; -webkit-transform: scale(0); transform: scale(0); } .shopping-top .content img { display: block; max-width: 100%; } .shopping-top .content .center { position: absolute; left: 50%; top: 239px; margin-left: -194px; } .shopping-top .content .box { position: absolute; white-space: nowrap; vertical-align: top; opacity: 0; } .shopping-top .content .box i { position: relative; width: 40px; height: 40px; border-radius: 50%; margin: 28px 25px 0; display: inline-block; vertical-align: top; } .shopping-top .content .box i:after { content: " "; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; opacity: 0.2; filter: alpha(opacity=20); border-radius: 50%; z-index: 1; -webkit-animation: Circle 2s infinite linear; animation: Circle 2s infinite linear; } .shopping-top .content .box i:before { content: " "; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; z-index: 2; background-position: center; background-repeat: no-repeat; border-radius: 50%; } .shopping-top .content .box .text { display: inline-block; white-space: nowrap; vertical-align: top; } .shopping-top .content .box h4 { font-size: 20px; color: #333333; line-height: 30px; font-weight: normal; margin-bottom: 6px; } .shopping-top .content .box h4 a{ color: #333333; } .shopping-top .content .box p { font-size: 16px; color: #999999; line-height: 26px; } .shopping-top .content .box p a{ color: #999999; } .shopping-top .content .box1 { right: 740px; top: 128px; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); } .shopping-top .content .box1 i:before { background-image: url(../img/shop_ico1.png); background-color: #ff6600; } .shopping-top .content .box1 i:after { background-color: #ff6600; } .shopping-top .content .box2 { left: 810px; top: 220px; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } .shopping-top .content .box2 i:before { background-image: url(../img/shop_ico2.png); background-color: #1ecd79; } .shopping-top .content .box2 i:after { background-color: #1ecd79; } .shopping-top .content .box3 { right: 735px; top: 490px; -webkit-transform: translate(-50px, 0); transform: translate(-50px, 0); } .shopping-top .content .box3 i:before { background-image: url(../img/shop_ico3.png); background-color: #3875ff; } .shopping-top .content .box3 i:after { background-color: #3875ff; } .shopping-top .content .box4 { left: 674px; top: 536px; -webkit-transform: translate(50px, 0); transform: translate(50px, 0); } .shopping-top .content .box4 i:before { background-image: url(../img/shop_ico4.png); background-color: #333333; } .shopping-top .content .box4 i:after { background-color: #333333; } @-webkit-keyframes Circle { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes Circle { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.25); transform: scale(1.25); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .hardware-scene .content-box { margin-top: 0; overflow: visible; } .hardware-content .textarea { text-align: center; font-size: 14px; color: #999999; line-height: 24px; width: 760px; margin: 0 auto 0; padding: 35px 0 52px; } .hardware-content ul { float: left; width: 100%; opacity: 0; position: relative; left: 0; top: 50px; } .hardware-content li { float: left; width: 32%; margin-right: 2%; } .hardware-content .box { display: block; } .hardware-content .img img { display: block; } .hardware-content .text { height: 76px; -webkit-transition: padding 0.6s; transition: padding 0.6s; } .hardware-content li h4 { font-size: 18px; color: #333333; line-height: 76px; font-weight: normal; width: 100%; } .hardware-content li p { font-size: 14px; color: #999999; line-height: 24px; width: 100%; } .hardware-content li:hover { -webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.05); box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.05); } .hardware-content li:hover .text { padding: 0 32px 0; } .applet-scene .content-box { margin-top: 86px; overflow: visible; } .applet-content { position: relative; } .applet-content ul { float: left; width: 100%; opacity: 0; position: relative; left: 0; top: 50px; margin-bottom: 25px; } .applet-content li { float: left; width: 32%; margin-right: 2%; position: relative; overflow: hidden; } .applet-content .img img { display: block; } .applet-content .text { padding: 20px 0 0; height: 68px; -webkit-transition: padding 0.6s; transition: padding 0.6s; text-align: center; position: absolute; left: 0; right: 0; bottom: -88px; background: #fff; -webkit-transition: bottom 0.6s; transition: bottom 0.6s; } .applet-content h4 { font-size: 16px; color: #333333; line-height: 26px; font-weight: normal; width: 100%; } .applet-content p { font-size: 14px; color: #999999; line-height: 24px; width: 100%; } .applet-content li:hover { -webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1); } .applet-content li:hover .text { bottom: 0; } .pro-feature{ padding-top: 56px; background-color: #f8f8f8; padding-bottom: 52px; } .pro-feature .title{ text-align: center; } .pro-feature .cont-wrap{ text-align: center; margin-top: 60px; position: relative; overflow: hidden; } .pro-feature .cont-wrap img{ max-width: 100%; margin-right: -88px; } .i-warp h2 span{ position: relative; z-index: 1; } .i-warp h2 span i{ display: inline-block; width: 92px; height: 21px; background-color: #ff0000; opacity: 0.2; filter: alpha(opacity=20); position: absolute; z-index: 0; right: -22px; bottom: 2px; right: -22px; z-index: -1; } .system-structure{ background: url(../img/s_bg_01.jpg) no-repeat center top #2d2e2f; padding-top: 118px; padding-bottom: 137px; } .i-warp.system-structure h2{ color: #fff; } .i-warp.system-structure h2 span{ position: relative; z-index: 1; display: inline-block; } .i-warp.system-structure h2 i{ display: inline-block; width: 99px; height: 20px; background-color: #ff0000; opacity: 0.2; filter: alpha(opacity=20); position: absolute; bottom: 1px; right: -33px; z-index: -1; } .system-structure .cent-list{ width: 985px; margin-top: 86px; margin-left: 250px; } .system-structure .cent-list dl{ width: 100%; margin-bottom: 40px; } .system-structure .cent-list dt{ width: 116px; padding-left: 33px; line-height: 38px; font-size: 16px; float: left; color: #fff; } .system-structure .cent-list dd{ width: 835px; float: left; } .system-structure .cent-list dt.fir{ background: url(../img/s_ico_01.png) no-repeat left center; } .system-structure .cent-list dt.sec{ background: url(../img/s_ico_02.png) no-repeat left center; } .system-structure .cent-list dt.thi{ background: url(../img/s_ico_03.png) no-repeat left center; } .system-structure .cent-list dt.fou{ background: url(../img/s_ico_04.png) no-repeat left center; } .system-structure .cent-list dd a,.system-structure .cent-list dd span{ display: block; float: left; width: 155px; height: 36px; line-height: 36px; text-align: center; color: #b7b6b6; font-size: 14px; border: 1px solid #464646; margin-right: 10px; margin-bottom: 10px; } .model-feature{ padding-top: 108px; padding-bottom: 126px; } .model-feature .cent-cont{ text-align: center; margin-top: 62px; } .model-feature .cent-cont img{ max-width: 100%; } .model-feature .cent-cont .bot-btn{ display: block; width: 150px; height: 38px; line-height: 38px; text-align: center; color: #3f81bd; font-size: 16px; background-color: #e9eff5; margin: 22px auto 0; border-radius: 18px; font-weight: bold; } .case-module .pc-scroll ul{ width: 101.6%; padding-bottom: 30px; } .case-module .pc-scroll li{ float: left; width: 31.7%; margin-right: 1.6%; transition: box-shadow 0.3s ease 0s; margin-bottom: 20px; } .case-module .pc-scroll .img { display: block; width: 100%; position: relative; overflow: hidden; } .case-module .pc-scroll .up-pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateZ(0px); transition: transform 0.3s ease 0s; z-index: 2; } .case-module .pc-scroll .up-graybox { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); transition: all 0.4s ease 0s; z-index: 3; } .case-module .pc-scroll .up-graybox .bgbox{ display: block; width: 100%; height: 100%; background-color: #000; opacity: 0.6; filter: alpha(opacity=60); } .case-module .pc-scroll .up-graybox .stit { font-size: 16px; line-height: 30px; width: 100%; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -15px; color: #fff; } .case-module .pc-scroll .up-graybox .line { display: inline-block; width: 100px; height: 1px; background-color: #f2f2f2; position: absolute; left: 50%; margin-left: -50px; transition: all 0.6s ease 0s; } .case-module .pc-scroll .up-graybox .linet { top: 0; } .case-module .pc-scroll .up-graybox .lineb { bottom: 0; } .case-module .pc-scroll .cont-wrap { width: 87%; padding: 20px 6.5% 0; border: 1px solid #f2f2f2; margin-top: -1px; box-sizing:content-box; } .case-module .pc-scroll .tit { line-height: 32px; font-size: 18px; } .case-module .pc-scroll .tit a { display: inline-block; color: #333; } .case-module .pc-scroll .intr { display: block; line-height: 22px; font-size: 12px; height: 52px; color: #777; } .case-module .pc-scroll .bot-link { display: block; width: 100%; border-top: 1px solid #e5e5e5; line-height: 40px; position: relative; } .case-module .pc-scroll .bot-link .point { display: inline-block; width: 24px; height: 8px; background: url(../img/ico_08.png) no-repeat right center; margin-top: 14px; } .case-module .pc-scroll .bot-link .stt { font-size: 13px; color: #999; } .case-module .pc-scroll .bot-link:hover .stt{ color: #333; } .case-module .pc-scroll .bot-link:hover .point{ background: url(../img/ico_08_h.png) no-repeat right center; } .case-module .pc-scroll .img:hover .up-graybox { opacity: 1; filter: alpha(opacity=1); } .case-module .pc-scroll .img:hover img.up-pic { transform: scale(1.05, 1.05); transition: transform 0.6s ease 0s; } .case-module .pc-scroll .up-graybox:hover .line { width: 6px; margin-left: -3px; opacity: 0.6; filter: alpha(opacity=60); } /*# sourceMappingURL=inside.css.map */