@charset "utf-8"; /* * **************************************** * * public inside * **************************************** */ /*无内容文案*/ .nocontent{ text-align: center; color: #333; font-size: 16px; line-height: 1.8; margin-top: 40px; } /*翻页*/ #pagination{ margin-top: 30px; text-align: center; font-size: 14px; } #pagination .page_text{ margin-bottom: 10px; font-size: 0; line-height: 0; } #pagination .page_text p{ display: inline-block; font-size: 14px; color: #666; line-height: 24px; margin: 0 5px; } #pagination .page_text .total_item{ display: none; } #pagination .page_button{ overflow: hidden; } #pagination .page_button a, #pagination .page_button span{ display: none; text-transform: uppercase; } #pagination .page_button a.prev, #pagination .page_button a.next{ width: 50%; height: 50px; display: block; color: #fff; padding: 0 40px; line-height: 50px; background: #e67819; } #pagination .page_button a.prev{ text-align: left; margin-left: -10px; float: left; } #pagination .page_button a.next{ text-align: right; margin-right: -10px; float: right; } #pagination .page_button a.disabled{ color: #666; background: #f3f3f3; } @media (min-width: 992px){ #pagination .page_text{ text-align: right; margin-bottom: 10px; color: #999; } #pagination .page_text .total_item{ display: inline-block; } #pagination .page_button{ font-size: 0; line-height: 0; text-align: right; } #pagination .page_button a, #pagination .page_button span{ font-size: 14px; display: inline-block; height: 32px; line-height: 32px; padding: 0 8px; margin: 0 3px; background: #f3f3f3; border: 1px solid #ccc; color: #666; } #pagination .page_button span.dots{ border: none; background: none; padding: 0; } #pagination .page_button span.current{ background: #e67819; color: #fff; border: none; } #pagination .page_button a.prev, #pagination .page_button a.next{ width: auto; height: 32px; line-height: 32px; padding: 0 15px; display: inline-block; color: #666; background: #f3f3f3; text-align: center; float: none; } #pagination .page_button a.prev{ margin-left: 0; margin-right: 10px; } #pagination .page_button a.next{ margin-right: 0; margin-left: 10px; } #pagination .page_button a.disabled{ color: #ccc; background: #f3f3f3; } } body{ background: #f5f5f5; } #banner{ position: relative; overflow: hidden; height: 260px; } #banner img{ display: block; width: 768px; position: relative; left: 50%; margin-left: -384px; } @media (min-width: 768px){ #banner{ width: 750px; height: auto; padding: 0 15px; margin: 0 auto; } #banner img{ position: static; width: 100%; margin-left: auto; left: auto; } } @media (min-width: 992px){ #banner{ width: 970px; } } @media (min-width: 1200px){ #banner{ width: 1170px; } } @media (min-width: 1500px){ #banner{ width: 1440px; padding: 0 15px; } } /********二级导航 开始********/ .secNav{ height: 60px; background: #f5f5f5; padding-right: 15px; padding-left: 15px; } .secNav h1{ font-size: 16px; font-weight: bold; line-height: 60px; float: left; } .secNav h2{ font-size: 14px; color: #999; line-height: 60px; text-align: right; background-image: url('../images/arrow2.png'); background-repeat: no-repeat; background-position: right center; background-size: 6px 12px; padding-right: 15px; } .secNav.on{ background: #010169; } .secNav.on h1{ display: none; } .secNav.on h2{ color: #fff; float: none; text-align: left; font-size: 16px; font-weight: bold; background-image: url('../images/close.png'); background-size: 12px 12px; } #secNav{ padding: 15px 15px 25px 15px; background: #fff; display: none; } #secNav li{ border-bottom: 1px solid #4d4d4d; padding: 0 8px; } #secNav li a{ display: block; height: 50px; line-height: 50px; color: #333; font-weight: lighter; background-image: url('../images/arrow2.png'); background-repeat: no-repeat; background-position: right center; background-size: 6px 12px; } #secNav li a.active{ background-image: url('../images/right.png'); background-size: 12px 8px; color: #010169; } .psecNav{ display: none; } @media (min-width: 768px){ .secNav{ display: none; } #secNav{ display: none; } .psecNav{ display: block; padding-top: 25px; padding-bottom: 15px; } .psecNav ul{ margin-left: -10px; margin-right: -10px; } .psecNav ul li{ padding: 0 10px; margin-bottom: 10px; width: 148px; height: 40px; float: left; } .psecNav ul li a{ display: block; height: 40px; line-height: 40px; font-size: 14px; color: #666; text-align: center; background: #fff; -webkit-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } .psecNav ul li a:hover, .psecNav ul li a.active{ color: #fff; background: #294787; } .tte{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (min-width: 992px){ .psecNav{ padding-top: 30px; padding-bottom: 20px; } .psecNav ul li{ width: 192px; height: 44px; } .psecNav ul li a{ height: 44px; line-height: 44px; } .psecNav ul li a:hover, .psecNav ul li a.active{ color: #fff; background: #294787; } } @media (min-width: 1200px){ .psecNav{ padding-top: 35px; padding-bottom: 20px; } .psecNav ul{ margin-left: -15px; margin-right: -15px; } .psecNav ul li{ padding: 0 15px; margin-bottom: 15px; width: 195px; height: 44px; } .psecNav ul li a{ height: 44px; line-height: 44px; } } @media (min-width: 1500px){ .psecNav{ padding-top: 40px; padding-bottom: 25px; } .psecNav ul li{ padding: 0 15px; margin-bottom: 15px; width: 240px; height: 56px; } .psecNav ul li a{ height: 56px; line-height: 56px; } } /********二级导航 结束********/ /********动态加载LOADING 开始********/ #loading{ margin-top: 20px; background: url('../images/loading.gif') center center no-repeat; height: 20px; background-size: 50px 10px; } #loaded{ margin-top: 10px; font-size: 14px; color: #ccc; text-align: center; } /********动态加载LOADING 结束********/ /********公共样式 开始********/ .main, .contact{ padding: 25px 15px 40px 15px; background: #fff; margin-left: -15px; margin-right: -15px; } .contact{ padding-bottom: 0; } @media (min-width: 768px){ .main, .contact{ padding: 30px 40px 40px 40px; margin: 0 0 40px 0; } .contact{ margin-bottom: 25px; } } @media (min-width: 992px){ .main, .contact{ padding: 40px 60px 70px 60px; margin: 0 0 55px 0; } .contact{ margin-bottom: 30px; } } @media (min-width: 1200px){ .main, .contact{ padding: 60px 90px 100px 90px; margin: 0 0 65px 0; } .contact{ margin-bottom: 35px; } } @media (min-width: 1500px){ .main, .contact{ padding: 80px 120px 130px 120px; margin: 0 0 80px 0; } .contact{ margin-bottom: 40px; } } /********公共样式 结束********/ /********公司简介 开始********/ .about .icon-wrap{ margin-bottom: 20px; margin-left: -15px; margin-right: -15px; } .about .icon-wrap li{ width: 33.3333%; float: left; padding: 0 15px; } .about .icon-wrap li .fa{ display: block; font-size: 60px; margin-bottom: 15px; } .about .icon-wrap li .title{ font-size: 16px; color: #333; line-height: 18px; margin-bottom: 8px; } .about .icon-wrap li .text{ font-size: 14px; color: #999; line-height: 20px; word-wrap:break-word; } .about .pic-wrap{ margin-top: 20px; margin-left: -15px; margin-right: -15px; } .about .pic-wrap li{ float: left; width: 100%; padding: 0 15px; margin-bottom: 20px; } .about .pic-wrap li img{ display: block; max-width: 100%; } .about .content img{ display: block; max-width: 100%; margin: 0 auto; } .about .content p{ font-size: 14px; color: #333; line-height: 24px; margin-bottom: 10px; } @media (min-width: 768px){ .about .icon-wrap{ margin-bottom: 30px; margin-left: -15px; margin-right: -15px; } .about .icon-wrap li{ padding-left: 15px; padding-right: 15px; } .about .pic-wrap{ margin-top: 30px; } .about .pic-wrap li{ width: 50%; } } @media (min-width: 992px){ .about .icon-wrap{ margin-bottom: 40px; } .about .pic-wrap{ margin-top: 40px; } } @media (min-width: 1200px){ .about .icon-wrap{ margin-bottom: 50px; } .about .pic-wrap{ margin-top: 50px; } } @media (min-width: 1500px){ .about .icon-wrap{ margin-bottom: 60px; } .about .pic-wrap{ margin-top: 60px; } } /********公司简介 结束********/ /********图片 开始********/ .workshop #lists{ margin-left: -7px; margin-right: -8px; } .workshop figure{ width: 100%; padding-left: 7px; padding-right: 8px; background: #fff; margin-bottom: 5px; } .workshop a{ display: block; position: relative; -webkit-box-shadow: 0 0 5px 0 #ccc; box-shadow: 0 0 5px 0 #ccc; } .workshop img{ display: block; width: 100%; margin: 0 auto; } .workshop figcaption{ font-size: 14px; height: 40px; padding: 0 10px; line-height: 40px; color: #333; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } @media (min-width: 768px){ .workshop #lists{ margin-left: -7px; margin-right: -8px; } .workshop figure{ width: 50%; float: left; padding-left: 7px; padding-right: 8px; background: #fff; margin-bottom: 5px; } } @media (min-width: 992px){ .workshop #lists{ margin-left: -15px; margin-right: -15px; } .workshop figure{ width: 33.3333%; float: left; padding-left: 15px; padding-right: 15px; background: #fff; margin-bottom: 15px; } .workshop a{ display: block; transition: all ease-in-out 0.3s; -webkit-box-shadow: none; box-shadow: none; } .workshop a:hover{ -webkit-box-shadow: 0 0 5px #2a3496; box-shadow: 0 0 5px #2a3496; } .workshop img{ display: block; width: 100%; margin: 0 auto; } .workshop figcaption{ font-size: 16px; height: 50px; padding: 0 10px; line-height: 50px; color: #333; } } .honor #lists{ padding-left: 0; padding-right: 0; } .honor figure{ float: left; width: 50%; padding-left: 15px; padding-right: 15px; background: #fff; margin-bottom: 5px; } .honor figure a{ display: block; position: relative; -webkit-box-shadow: 0 0 5px 0 #10234d; box-shadow: 0 0 5px 0 #10234d; } .honor figure img{ display: block; width: 100%; margin: 0 auto; } .honor figcaption{ font-size: 14px; height: 40px; padding: 0 10px; line-height: 40px; color: #333; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .honor ul{ margin-top: 20px; } .honor ul li{ width: 100%; padding: 0 15px; } .honor ul li a{ display: block; padding: 10px 15px; background: #f5f5f5; height: 60px; margin-bottom: 15px; position: relative; overflow: hidden; } .honor ul li a img{ display: block; width: 34px; float: left; position: absolute; left: 15px; } .honor ul li a p{ font-size: 14px; color: #333; line-height: 40px; float: left; padding-left: 50px; overflow: hidden; } .honor ul li a .fa{ position: absolute; display: block; float: right; height: 40px; padding-right: 15px; padding-left: 15px; right: 0; top: 10px; font-size: 12px; line-height: 40px; background: #f5f5f5; color: #333; } @media (min-width: 768px){ .honor #lists{ margin-left: -15px; margin-right: -15px; } .honor figure{ width: 33.3333%; float: left; padding-left: 15px; padding-right: 15px; background: #fff; margin-bottom: 5px; } .honor ul{ margin-left: -15px; margin-right: -15px; } .honor ul li{ float: left; width: 50%; } .honor ul li a:hover{ background: #294787; } .honor ul li a:hover p{ color: #fff; } .honor ul li a:hover .fa{ background: #294787; color: #fff; } } @media (min-width: 992px){ .honor #lists{ margin-left: -15px; margin-right: -15px; } .honor figure{ width: 25%; float: left; padding-left: 15px; padding-right: 15px; background: #fff; margin-bottom: 15px; } .honor figure a{ display: block; transition: all ease-in-out 0.3s; } .honor figure a:hover{ -webkit-box-shadow: 0 0 5px #2a3496; box-shadow: 0 0 5px #2a3496; } .honor figure img{ display: block; width: 100%; margin: 0 auto; } .honor figcaption{ font-size: 16px; height: 50px; padding: 0 10px; line-height: 50px; color: #333; } .honor ul{ margin-top: 30px; } .honor ul li{ width: 50%; } } @media (min-width: 1200px){ .honor ul{ margin-top: 40px; } } @media (min-width: 1500px){ .honor ul{ margin-top: 50px; } .honor ul li{ width: 33.3333%; } } /********图片 结束********/ /********发展历程 开始********/ .development li{ padding-bottom: 40px; } .development li:last-child{ padding-bottom: 0; } .development span{ display: table-cell; font-size: 16px; color: #333; line-height: 24px; padding-right: 15px; font-weight: bold; } .development p{ display: table-cell; padding-left: 15px; font-size: 14px; line-height: 24px; } /********发展历程 结束********/ /********联系我们 开始********/ .contact-info{ margin-bottom: 20px; position: relative; z-index: 5; } .contact-info .title-en{ font-size: 20px; font-family: "Avant"; font-weight: bold; line-height: 22px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 30px; } .contact-info .title-cn{ font-size: 16px; line-height: 18px; font-weight: bold; color: #333; margin-bottom: 20px; } .contact-info .text{ font-size: 14px; color: #888; line-height: 24px; } .contact-info ul{ margin-top: 40px; overflow: hidden; } .contact-info ul li { float: left; margin-right: 20px; } .contact-info li a{ display: block; border-radius: 50%; background: #e5e5e5; text-align: center; width: 24px; height: 24px; overflow: hidden; } .contact-info li a .fa{ color: #333; font-size: 16px; line-height: 24px; } .button-map{ display: block; width: 150px; height: 40px; background: #294787; line-height: 40px; color: #fff; text-align: center; font-size: 14px; margin-top: 50px; } .map{ display: none; } .info h1{ font-size: 18px; font-weight: bold; color: #666; line-height: 20px; padding-bottom: 20px; } .info ul li{ width: 100%; padding: 15px 0; border-bottom: 1px dashed #ccc; } .info ul li p.t{ font-size: 16px; font-weight: bold; line-height: 18px; margin-bottom: 15px; color: #333; } .info ul li p.c{ font-size: 14px; line-height: 20px; margin-top: 10px; color: #333; } @media (min-width: 768px){ .contact-info{ margin-bottom: 0; width: 50%; display: block; padding-right: 30px; padding-top: 30px; padding-bottom: 30px; float: left; } .contact-info .title-en{ font-size: 30px; line-height: 30px; letter-spacing: 2px; margin-bottom: 80px; } .contact-info .title-cn{ margin-bottom: 25px; } .contact-info .text{ font-size: 14px; color: #888; line-height: 24px; } .contact-info ul{ margin-top: 80px; } .button-map{ display: none; } .map{ width: 50%; display: block; background: #ccc; float: right; } .anchorBL{ display: none; } .BMap_noprint{ display: none; } #map{ width: 100%; height: 473px; } } @media (min-width: 992px){ .contact-info{ margin-bottom: 0; width: 50%; padding-right: 50px; padding-top: 60px; } .contact-info .title-en{ font-size: 40px; line-height: 40px; letter-spacing: 2px; margin-bottom: 80px; } .contact-info .title-cn{ margin-bottom: 25px; } .contact-info .text{ font-size: 14px; color: #888; line-height: 24px; } .contact-info ul{ margin-top: 80px; } .contact-info li a{ width: 30px; height: 30px; overflow: hidden; } .contact-info li a .fa{ font-size: 20px; line-height: 30px; } #map{ height: 539px; } .info h1{ font-size: 20px; line-height: 22px; padding-bottom: 20px; } .info ul li{ width: 50%; padding: 20px 20px; border: none; float: left; } } @media (min-width: 1200px){ .contact-info{ padding-right: 50px; padding-top: 60px; } .contact-info .title-en{ font-size: 60px; line-height: 60px; letter-spacing: 2px; margin-bottom: 60px; } .contact-info .title-cn{ margin-bottom: 40px; } .contact-info ul{ margin-top: 60px; } #map{ height: 634px; } .info h1{ font-size: 22px; line-height: 24px; padding-bottom: 20px; } .info ul li{ padding: 30px 30px; } } @media (min-width: 1500px){ #map{ height: 590px; } .info h1{ font-size: 24px; line-height: 26px; padding-bottom: 20px; } .info ul li{ padding: 40px 40px; } } /********联系我们 结束********/ /********人力资源 开始********/ .hr ul{ overflow: hidden; margin-left: -15px; margin-right: -15px; } .hr li{ border-left: 15px solid #fff; border-right: 15px solid #fff; border-bottom: 20px solid #fff; background: #f5f5f5; } .hr .wrap{ padding: 30px; background: #f5f5f5; } .hr .wrap .fa{ display: block; font-size: 40px; text-align: center; } .hr .wrap .title{ font-size: 16px; font-weight: bold; line-height: 18px; margin-top: 15px; padding-bottom: 15px; text-align: center; border-bottom: 4px solid #fff; margin-bottom: 20px; } .hr .wrap .text strong{ display: block; font-size: 14px; line-height: 16px; margin-bottom: 15px; } .hr .wrap .text p{ font-size: 14px; line-height: 24px; margin-bottom: 8px; } @media (min-width: 768px){ .hr li{ display: table-cell; width: 50%; border-bottom: 30px solid #fff; } .hr ul .trs{ display: table-row; } .hr .wrap{ padding: 30px; background: #f5f5f5; } .hr .wrap .title{ margin-bottom: 20px; } } @media (min-width: 992px){ .hr .wrap{ padding: 40px; } .hr .wrap .title{ margin-bottom: 30px; } } @media (min-width: 1200px){ .hr .wrap{ padding: 45px; } .hr .wrap .title{ margin-bottom: 35px; } } @media (min-width: 1500px){ .hr .wrap{ padding: 50px; } .hr .wrap .title{ margin-bottom: 40px; } } /********人力资源 结束********/ /********新闻列表 开始********/ .news ul{ margin-left: -15px; margin-right: -15px; } .news li{ padding: 0 15px; margin-bottom: 20px; } .news li a{ display: block; background: #f5f5f5; padding: 15px 20px; position: relative; } .news .time{ position: absolute; left: 0; top: 0; padding-top: 15px; padding-left: 20px; } .news .time .day{ font-size: 46px; line-height: 46px; color: #cccccc; } .news .time .year{ font-size: 14px; line-height: 16px; color: #cccccc; } .news .wrap{ padding-left: 80px; } .news .wrap .title{ font-size: 16px; font-weight: bold; line-height: 20px; margin-bottom: 10px; color: #333; } .news .wrap .text{ font-size: 14px; color: #666666; line-height: 24px; height: 72px; overflow: hidden; } @media (min-width: 768px){ .news li{ float: left; width: 50%; padding: 0 15px; margin-bottom: 30px; } .news li a{ display: block; background: #f5f5f5; padding: 20px 20px; position: relative; } .news .time{ padding-top: 20px; padding-left: 20px; } .news .wrap{ padding-left: 80px; } .news li a:hover{ background: #294787; } .news li a:hover .time .day{ color: #818eb0; } .news li a:hover .time .year{ color: #818eb0; } .news li a:hover .wrap .title{ color: #fff; } .news li a:hover .wrap .text{ color: #818eb0; } } @media (min-width: 992px){ .news li a{ padding: 25px 30px; } .news .time{ padding-top: 25px; padding-left: 30px; } .news .wrap{ padding-left: 90px; } } @media (min-width: 1200px){ .news li a{ padding: 30px 40px; } .news .time{ padding-top: 30px; padding-left: 40px; } .news .wrap{ padding-left: 90px; } } /********新闻列表 结束********/ /********新闻详情 开始********/ .show .head h1{ font-size: 16px; font-weight: bold; line-height: 22px; color: #333; text-align: center; margin-bottom: 8px; } .show .head p{ font-size: 12px; font-weight: 100; color: #999; line-height: 24px; text-align: center; margin-bottom: 15px; } .show .cont{ margin-top: 20px; } .show .cont p{ font-size: 14px; color: #333; line-height: 24px; margin-bottom: 10px; } .show .cont img{ display: block; max-width: 100%; margin-left: auto; margin-right: auto; } @media (min-width: 768px){ .show .article{ float: left; } .show .head h1{ font-size: 18px; font-weight: bold; line-height: 28px; color: #333; text-align: left; margin-bottom: 8px; } .show .head p{ font-size: 14px; font-weight: 100; color: #999; line-height: 24px; text-align: left; margin-bottom: 15px; } } /********新闻详情 结束********/ /********常见问题 开始********/ .faq li{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; position: relative; } .faq li .fa{ display: block; font-size: 24px; color: #999; position: absolute; left: 0; top: 0; } .faq li .content{ padding-left: 44px; } .faq li .content .title{ font-weight: bold; color: #333; font-size: 16px; line-height: 28px; } .faq li .content .text{ margin-top: 15px; font-size: 14px; color: #666; line-height: 24px; display: none; } .faq li .content .text p{ margin-bottom: 10px; } .faq li.active .content .title{ color: #e6212a; } @media (min-width: 768px){ } @media (min-width: 992px){ .faq li{ padding-bottom: 27px; margin-bottom: 27px; cursor: pointer; } .faq li .fa{ display: block; font-size: 26px; color: #999; } .faq li .content{ padding-left: 55px; } .faq li .content .title{ font-size: 18px; line-height: 30px; } .faq li .content .text{ margin-top: 20px; } } @media (min-width: 1200px){ .faq li{ padding-bottom: 34px; margin-bottom: 34px; } .faq li .fa{ display: block; font-size: 28px; } .faq li .content{ padding-left: 62px; } .faq li .content .text{ margin-top: 25px; } } @media (min-width: 1500px){ .faq li{ padding-bottom: 40px; margin-bottom: 40px; } .faq li .fa{ font-size: 30px; } .faq li .content{ padding-left: 70px; } } /********常见问题 结束********/ /********资料下载 开始********/ .download ul li{ width: 100%; } .download ul li a{ display: block; padding: 10px 15px; background: #f5f5f5; height: 60px; margin-bottom: 15px; position: relative; overflow: hidden; } .download ul li a img{ display: block; width: 34px; float: left; position: absolute; left: 15px; } .download ul li a p{ font-size: 14px; color: #333; line-height: 40px; float: left; padding-left: 50px; overflow: hidden; } .download ul li a .fa{ position: absolute; display: block; float: right; height: 40px; padding-right: 15px; padding-left: 15px; right: 0; top: 10px; font-size: 12px; line-height: 40px; background: #f5f5f5; color: #333; } @media (min-width: 768px){ .download ul li{ float: left; width: 50%; } .download ul li a:hover{ background: #294787; } .download ul li a:hover p{ color: #fff; } .download ul li a:hover .fa{ background: #294787; color: #fff; } } @media (min-width: 992px){ .download ul li{ width: 50%; } } @media (min-width: 1500px){ .download ul li{ width: 33.3333%; } } /********资料下载 结束********/ /********产品列表 开始********/ /********产品列表 结束********/ /*product*/ #product{ margin: 0 -8px; } #product li{ float: left; width: 50%; padding: 0 8px; margin-bottom: 15px; } #product li a{ display: block; } #product li img{ display: block; width: 100%; } #product p{ padding: 0 5px; font-size: 14px; color: #333; line-height: 24px; height: 48px; overflow: hidden; text-align: center; margin-top: 5px; } @media (min-width: 992px){ #product{ margin: 0 -15px; } #product li{ float: left; width: 50%; padding: 0 15px; margin-bottom: 30px; } } @media (min-width: 1200px){ #product li{ width: 33.3333%; } } @media (min-width: 1500px){ #product li{ width: 25%; } } .button-next, .button-prev{ display: block; position: absolute; width: 50px; height: 50px; margin-top: -25px; top: 50%; font-size: 50px !important; color: #ddd; z-index: 1250; cursor: pointer; } .button-prev{ left: 10px; text-align: left; } .button-next{ right: 10px; text-align: right; } .gallery{ width: 100%; } .gallery img{ display: block; width: 100%; } .gallery-top { border: 1px solid #ccc; padding: 0 5px; } .gallery-thumbs{ display: none; margin-top: 10px; overflow: hidden; } .gallery-thumbs .swiper-slide { width: 20%; height: 100%; opacity: 0.4; padding: 3px; border: 1px solid #ccc; } .gallery-thumbs .swiper-slide-active { opacity: 1; border-color: red; } .description{ width: 100%; margin-top: 40px; } .description h1{ font-size: 18px; color: #333; line-height: 1.2; margin-bottom: 20px; font-weight: bold; } .description p{ font-size: 16px; color: #333; line-height: 24px; margin-bottom: 10px; } .description .button-inquiry{ margin-top: 30px; width: 150px; height: 40px; border-radius: 15px; background: #ea4030; color: #fff; line-height: 40px; text-align: center; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 18px; } .product-more{ margin-top: 30px; border-bottom: 1px solid #ea4030; overflow: hidden; } .product-more p{ height: 39px; line-height: 40px; overflow: hidden; background: #ea4030; color: #fff; text-align: center; padding: 0 10px; float: left; } .product-detail{ margin-top: 30px; } .product-detail p{ font-size: 16px; color: #333; line-height: 1.8; margin-bottom: 10px; } .product-detail img{ display: block; max-width: 100%; margin-bottom: 10px; } @media (min-width: 768px){ .gallery{ width: 350px; float: left; } .gallery-thumbs{ display: block; } .description{ width: 320px; float: right; margin-top: 0; } .description h1{ font-size: 20px; margin-bottom: 20px; } .description .button-inquiry{ margin-top: 30px; } } @media (min-width: 992px){ .gallery{ width: 310px; } .description{ width: 300px; } .description h1{ margin-bottom: 20px; } .description .button-inquiry{ margin-top: 30px; } } @media (min-width: 1200px){ .gallery{ width: 400px; } .description{ width: 340px; } .description h1{ margin-bottom: 30px; } .description .button-inquiry{ margin-top: 40px; } } @media (min-width: 1500px){ .gallery{ width: 540px; } .description{ width: 450px; } .description .button-inquiry{ margin-top: 50px; } } /********产品详情 开始********/ /********产品详情 结束********/ .main-wrapper{ margin-top: 30px; margin-bottom: 80px; } .left-side-menu{ display: none; } .right-content{ width: 100%; overflow: hidden; } @media (min-width: 768px){ .main-wrapper{ margin-bottom: 40px; } } @media (min-width: 992px){ .main-wrapper{ margin-top: 40px; margin-bottom: 60px; } .right-content{ width: 70%; float: right; } .left-side-wrapper{ float: left; display: block; width: 25%; } .left-side-menu{ display: block; } .left-side-menu .left-side-menu-item{ box-shadow: 0 0 8px 0 #ddd; margin-bottom: 15px; background: #fff; } .left-side-menu .left-side-menu-link{ display: block; background: #fff; padding: 15px 20px; position: relative; } .left-side-menu .left-side-menu-link p{ font-size: 14px; text-transform: uppercase; font-weight: bold; color: #333; padding-right: 20px; line-height: 1.1; } .left-side-menu .left-side-menu-link span{ position: absolute; right: 20px; top: 50%; margin-top: -10px; display: block; width: 20px; height: 20px; font-size: 16px; line-height: 20px; text-align: right; color: #333; } .left-side-menu .left-side-menu-link:hover p, .left-side-menu .left-side-menu-link.active p{ color: #e67819; } .left-side-menu .left-side-menu-link:hover span, .left-side-menu .left-side-menu-link.active span{ color: #e67819; } .left-side-menu2{ border-top: 1px solid #ddd; padding: 10px 20px; } .left-side-menu2 .left-side-menu2-item{ position: relative; } .left-side-menu2 .left-side-menu2-link{ display: block; padding: 8px 0; } .left-side-menu2 .left-side-menu2-link p{ font-size: 14px; text-transform: capitalize; color: #333; padding-left: 20px; line-height: 1.1; } .left-side-menu2 .left-side-menu2-link span{ position: absolute; left: 0; top: 50%; margin-top: -10px; display: block; width: 20px; height: 20px; text-align: left; line-height: 20px; font-size: 16px; color:#666; } .left-side-menu2 .left-side-menu2-link:hover p, .left-side-menu2 .left-side-menu2-link.active p, .left-side-menu2 .left-side-menu2-link:hover span, .left-side-menu2 .left-side-menu2-link.active span{ color: #e67819; } .left-side-menu2 .left-side-menu2-link.active p{ font-weight: bold; } } @media (min-width: 1200px){ .main-wrapper{ margin-top: 50px; margin-bottom: 80px; } } @media (min-width: 1500px){ .main-wrapper{ margin-top: 60px; margin-bottom: 100px; } .left-side-wrapper{ width: 20%; } .right-content{ width: 75%; } }