.banner { position: relative; } .banner img { width: 100%; } .banner .text { position: absolute; width: 100%; top: 46%; color: #fff; } .banner .text h2 { text-align: center; font-size: 2.3rem; font-weight: bold; letter-spacing: 1px; } .banner .text p { text-align: center; font-size: 1.2rem; letter-spacing: 1px; margin-top: 0.6rem; } .sub-nav { height: 4rem; border-bottom: 1px solid #ddd; overflow: hidden; position: relative; top: 0; background: #fff; width: 100%; border-top: 1px solid #ddd; z-index: 100; } .sub-nav .content { position: relative; } .sub-nav .content .left { float: left; } .sub-nav .content .left h6 { line-height: 4rem; font-size: 1.3rem; font-weight: bold; } .sub-nav .content .left h6 span { font-size: 1rem; color: #9f223d; margin-left: 1rem; position: relative; top: -0.1rem; } .sub-nav .content .right { float: right; } .sub-nav .content .right > ul li { float: left; width: 4.6rem; height: 4rem; text-align: center; position: relative; } .sub-nav .content .right > ul li a { line-height: 4rem; font-size: 0.8rem; display: block; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 2rem; } .sub-nav .content .right > ul li:before { content: ''; width: 0; height: 3px; background: #9f223d; position: absolute; bottom: 0; left: 0; } .sub-nav .content .right > ul li.active:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li.active a { color: #9f223d; } .sub-nav .content .right > ul li:hover:before { width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; } .sub-nav .content .right > ul li:hover a { color: #9f223d; } .sub-nav .content .right .mobile-menu { display: none; position: absolute; right: 0; top: 0; background: #fff; } .sub-nav .content .right .mobile-menu > h2 { line-height: 3.8rem; font-size: 13px; padding-right: 30px; width: 140px; text-align: right; } .sub-nav .content .right .mobile-menu > h2 span { margin-left: 4px; } .sub-nav .content .right .mobile-menu ul { border-top: 1px solid #f2f2f2; display: none; } .sub-nav .content .right .mobile-menu ul li { padding: 0 20px; line-height: 40px; font-size: 14px; border-bottom: 1px solid #f2f2f2; } .banner-product { position: relative; width: 100%; top: -1px; } .banner-product img { width: 100%; } .banner-product .text { width: 100%; position: absolute; left: 0; top: 30%; color: #fff; } .banner-product .text .con .middle h2 { font-size: 1.6rem; font-weight: bold; } .banner-product .text .con .middle p { font-size: 0.9rem; margin-top: 0.6rem; } .banner-product .text .con .middle .btn { margin-top: 3rem; } .banner-product .text .con .middle .btn > ul li { float: left; } .banner-product .text .con .middle .btn > ul li.more { width: 8rem; height: 2.5rem; border-radius: 26px; border: 1px solid #e5e5e5; text-align: center; cursor: pointer; } .banner-product .text .con .middle .btn > ul li.more a { color: #fff; font-size: 0.8rem; line-height: 2.5rem; display: block; } .banner-product .text .con .middle .btn > ul li.more span { font-size: 0.8rem; line-height: 2.5rem; } .banner-product .text .con .middle .btn > ul li.more:hover { background: #9f223d; border: none; } .banner-product .text .con .middle .btn > ul li:last-child a { line-height: 2.5rem; color: #fff; text-decoration: underline; font-size: 0.8rem; margin-left: 2rem; } .banner-product .text .con .middle.right { float: right; } .hot-detail .con > .left { float: left; width: 18%; padding-top: 4rem; display:none; } .hot-detail .con > .left h2 { font-size: 1.2rem; font-weight: bold; position: relative; } .hot-detail .con > .left h2:before { content: ''; width: 100%; height: 1px; background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.43)); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: -mos-linear-gradient(right, red, blue); background: linear-gradient(right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.43)); position: absolute; bottom: -1rem; left: 0; } .hot-detail .con > .left > ul { margin-top: 2rem; } .hot-detail .con > .left > ul li { font-size: 0.9rem; color: #999; margin-top: 1rem; padding-left: 1rem; position: relative; cursor: pointer; } .hot-detail .con > .left > ul li:before { content: ''; width: 2px; height: 0; background: #9f223d; position: absolute; left: 0; top: 0; } .hot-detail .con > .left > ul li.active { color: #333; } .hot-detail .con > .left > ul li.active:before { height: 100%; } .hot-detail .con > .right { float: right; width: 81%; width: 100%; padding-top: 4rem; } .hot-detail .con > .right #summarize { padding-bottom: 4.5rem; } /* .hot-detail .con > .right #summarize span { font-size: 3rem; color: #9f223d; font-weight: bold; } */ .hot-detail .con > .right #summarize h2 { font-size: 2.3rem; font-weight: bold; } .hot-detail .con > .right #summarize > p { font-size: 1.2rem; color: #999; margin-bottom: 1.5rem; } .hot-detail .con > .right #summarize .text { width: 100%; } .hot-detail .con > .right #summarize .text p { /* font-size: 0.8rem; */ /* text-align: justify; */ /* margin-top: 1rem; */ line-height: 1.8; } .hot-detail .con > .right #summarize img { max-width: 100%!important; } .hot-detail .con > .right #product { padding-bottom: 4.5rem; } .hot-detail .con > .right #product img { width: 100%; } .hot-detail .con > .right #product > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 2rem; } .hot-detail .con > .right #product > h2:before { content: ''; width: 3px; height: 70%; background: #9f223d; position: absolute; left: 0; top: 20%; } .hot-detail .con > .right #product > ul li { float: left; width: 31%; } .hot-detail .con > .right #product > ul li:not(:nth-child(3n)) { margin-right: 3.5%; } .hot-detail .con > .right #product > ul li a { display: block; } .hot-detail .con > .right #product > ul li .top { height: 0; padding-bottom: 34%; overflow: hidden; } .hot-detail .con > .right #product > ul li .top img { width: 100%; } .hot-detail .con > .right #product > ul li .bottom { text-align: center; background: #eceff0; height: 0; padding-bottom: 70%; overflow: hidden; } .hot-detail .con > .right #product > ul li .bottom h2 { font-size: 1.3rem; margin-top: 2rem; } .hot-detail .con > .right #product > ul li .bottom .line { width: 16px; height: 1px; background: #9f223d; margin: 1rem auto; } .hot-detail .con > .right #product > ul li .bottom p { width: 80%; margin: 0 auto; font-size: 0.7rem; color: #666; } .hot-detail .con > .right #product > ul li:hover .top img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .hot-detail .con > .right #parameter { padding-bottom: 4.5rem; } .hot-detail .con > .right #parameter > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 2rem; } .hot-detail .con > .right #parameter > h2:before { content: ''; width: 3px; height: 70%; background: #9f223d; position: absolute; left: 0; top: 20%; } .hot-detail .con > .right #parameter .tu img { max-width: 100%; } .hot-detail .con > .right #case { padding-bottom: 4.5rem; } .hot-detail .con > .right #case img { width: 100%; } .hot-detail .con > .right #case > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 2rem; } .hot-detail .con > .right #case > h2:before { content: ''; width: 3px; height: 70%; background: #9f223d; position: absolute; left: 0; top: 20%; } .hot-detail .con > .right #case > ul li { float: left; width: 31%; } .hot-detail .con > .right #case > ul li:not(:nth-child(3n)) { margin-right: 3.5%; } .hot-detail .con > .right #case > ul li a { display: block; } .hot-detail .con > .right #case > ul li a .top { height: 0; padding-bottom: 46%; overflow: hidden; background: #fff; } .hot-detail .con > .right #case > ul li a .top img { width: 100%; } .hot-detail .con > .right #case > ul li a .bottom { background: #eceff0; padding: 1.4rem 1.5rem 2rem; } .hot-detail .con > .right #case > ul li a .bottom h2 { font-size: 1.2rem; font-weight: bold; margin-bottom: 1.2rem; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 1.5em; } .hot-detail .con > .right #case > ul li a .bottom p { font-size: 0.7rem; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 6em; } .hot-detail .con > .right #case > ul li a .bottom h3 { font-size: 0.8rem; color: #9f223d; margin-top: 1.6rem; } .hot-detail .con > .right #case > ul li a .bottom h3 span { font-size: 1rem; margin-right: 0.4rem; position: relative; top: 2px; } .hot-detail .con > .right #case > ul li:hover a .top img { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); } .hot-detail .con > .right #case > ul li:hover a .bottom h3 { color: #7a1d2f; } .hot-detail .con > .right #solve { padding-bottom: 4.5rem; } .hot-detail .con > .right #solve img { width: 100%; } .hot-detail .con > .right #solve > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 2rem; } .hot-detail .con > .right #solve > h2:before { content: ''; width: 3px; height: 70%; background: #9f223d; position: absolute; left: 0; top: 20%; } .hot-detail .con > .right #solve > ul li { float: left; width: 31%; background: #fff; text-align: center; padding: 3rem 0; } .hot-detail .con > .right #solve > ul li:not(:nth-child(3n)) { margin-right: 3.5%; } .hot-detail .con > .right #solve > ul li .tu { width: 3.5rem; margin: 0 auto; } .hot-detail .con > .right #solve > ul li .tu img { width: 100%; } .hot-detail .con > .right #solve > ul li h2 { font-size: 1.2rem; font-weight: bold; margin: 1.5rem 0; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 1.5em; } .hot-detail .con > .right #solve > ul li p { width: 80%; margin: 0 auto; font-size: 0.7rem; text-align: left; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; line-height: 1.5; height: 6em; } .hot-detail .con > .right #solve > ul li h3 { font-size: 0.8rem; color: #9f223d; margin-top: 1.5rem; } .hot-detail .con > .right #solve > ul li h3 span { margin-left: 0.4rem; } .hot-detail .con > .right #solve > ul li:hover { box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); } .hot-detail .con > .right #solve > ul li:hover h3 { color: #7a1d2f; } .hot-detail.active .con > .left { position: fixed; top: 0; padding-top: calc(5rem + 4rem + 0.5rem); } .hot-form { background: url(../img/news/hot/hot_bg.png) no-repeat right bottom; } .hot-form .con > .right { float: right; width: 81.3%; } .hot-form .con > .right #show { padding-bottom: 4.5rem; width: 58%; } .hot-form .con > .right #show > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 2rem; } .hot-form .con > .right #show > h2:before { content: ''; width: 3px; height: 70%; background: #9f223d; position: absolute; left: 0; top: 20%; } .hot-form .con > .right #show > span { font-size: 1.2rem; color: #999; } .hot-form .con > .right #show > h3 { font-size: 1.6rem; font-weight: bold; color: #9f223d; } .hot-form .con > .right #show form { margin-top: 1rem; } .hot-form .con > .right #show form > div { float: left; width: 100%; margin-top: 1.2rem; } .hot-form .con > .right #show form > div > div > div input { width: 100%; height: 2.4rem; background: #f3f3f5; border: none; padding-left: 1rem; font-size: 0.8rem; color: #999; } .hot-form .con > .right #show form > div > div > div select { width: 100%; height: 2.4rem; background: #f3f3f5; border: none; padding-left: 1rem; font-size: 0.8rem; color: #999; } .hot-form .con > .right #show form > div:nth-child(1) { width: 62%; } .hot-form .con > .right #show form > div:nth-child(2) { width: 34%; margin-left: 4%; } .hot-form .con > .right #show form > div:nth-child(3) { width: 62%; } .hot-form .con > .right #show form > div:nth-child(4) { width: 34%; margin-left: 4%; } .hot-form .con > .right #show form > div:nth-child(5) { width: 48%; } .hot-form .con > .right #show form > div:nth-child(6) { width: 48%; margin-left: 4%; } .hot-form .con > .right #show form.yanzhengma { margin-top: 0; } .hot-form .con > .right #show form.yanzhengma > div { position: relative; width: 62%; } .hot-form .con > .right #show form.yanzhengma > div .verify-code { position: absolute; right: 0; background: none !important; } .hot-form .con > .right #show form.yanzhengma > div .verify-change-code { display: none; } .hot-form .con > .right #show form.yanzhengma > div > div input { width: 100%; height: 2.4rem; background: #f3f3f5; border: none; padding-left: 1rem; font-size: 0.8rem; color: #999; } .hot-form .con > .right #show .btn { margin: 2.5rem 0 0; } .hot-form .con > .right #show .btn input { width: 7.9rem; height: 2.5rem; background: #95a2a9; border-radius: 26px; color: #fff; border: none; font-size: 0.8rem; } .hot-form .con > .right #show .btn input:hover { background: #9f223d; } .hot-form .con > .right #show .btn input:first-child { margin-right: 1rem; } .paper { background: url(../img/product/paper_bg.jpg) no-repeat; background-size: cover; padding: 3.5rem 0; } .paper p { font-size: 1.8rem; color: #fff; text-align: center; font-weight: bold; letter-spacing: 1px; } .paper p a { display: inline-block; width: 10rem; height: 3rem; border-radius: 30px; border: 1px solid #fff; text-align: center; line-height: 3rem; font-size: 0.8rem; color: #fff; margin-left: 2rem; } .paper p a:hover { border: 1px solid #7a1d2f; background: #7a1d2f; } @media screen and (max-width: 1024px) { .banner { margin-top: 5.5rem; } .banner .text { top: 38%; } .hot-detail .con > .right #product > ul li .bottom { padding-bottom: 80%; } .hot-detail .con > .right #product > ul li .bottom h2 { margin-top: 1.5rem; } .hot-detail.active .con > .left { top: 5.5rem; } .banner-product .text { top: 24%; } } @media screen and (max-width: 768px) { .banner .text { top: 30%; } .banner .text h2 { font-size: 18px; } .banner .text p { font-size: 13px; margin-top: 0.2rem; } .sub-nav { overflow: initial; } .sub-nav .content .left { display: none; } .sub-nav .content .right { width: 100%; } .sub-nav .content .right > ul li { width: 20%; } .sub-nav .content .right > ul li a { font-size: 12px; } .sub-nav .content .right > ul li:not(:last-child) { margin-right: 0; } .sub-nav .content .right .mobile-menu { display: none; } .banner-product { height: 220px; overflow: hidden; } .banner-product .dark-mask { display: block; } .banner-product img { width: auto; height: 100%; margin-left: -36%; } .banner-product .text .con .middle { padding-left: 10px; } .banner-product .text .con .middle h2 { font-size: 20px; } .banner-product .text .con .middle p { font-size: 13px; } .banner-product .text .con .middle.right { float: left; } .banner-product .text .con .middle .btn > ul li.more { height: 34px; } .banner-product .text .con .middle .btn > ul li.more a { font-size: 14px; line-height: 34px; } .banner-product .text .con .middle .btn > ul li.more span { font-size: 14px; line-height: 34px; } .banner-product .text .con .middle .btn > ul li:last-child a { line-height: 34px; font-size: 14px; } .hot-detail .con > .left { width: 34%; padding-top: 2rem; padding-left: 1%; display: none; } .hot-detail .con > .left h2 { font-size: 16px; } .hot-detail .con > .left > ul li { font-size: 14px; margin-top: 1.5rem; } .hot-detail .con > .right { width: 100%; padding-top: 2rem; } .hot-detail .con > .right #summarize { padding-bottom: 3rem; } .hot-detail .con > .right #summarize span { font-size: 20px; } .hot-detail .con > .right #summarize h2 { font-size: 16px; } .hot-detail .con > .right #summarize p { font-size: 14px; } .hot-detail .con > .right #summarize .text { width: 100%; } .hot-detail .con > .right #summarize .text p { /* font-size: 13px; */ } .hot-detail .con > .right #product { padding-bottom: 2.5rem; } .hot-detail .con > .right #product > h2 { font-size: 16px; margin-bottom: 1rem; } .hot-detail .con > .right #product > h2:before { top: 2px; } .hot-detail .con > .right #product > ul li { width: 100%; margin-top: 1rem; } .hot-detail .con > .right #product > ul li:not(:nth-child(3n)) { margin-right: 0; } .hot-detail .con > .right #product > ul li .bottom { height: auto; padding-bottom: 2rem; } .hot-detail .con > .right #product > ul li .bottom h2 { font-size: 16px; } .hot-detail .con > .right #product > ul li .bottom p { font-size: 13px; } .hot-detail .con > .right #parameter { padding-bottom: 2.5rem; } .hot-detail .con > .right #parameter > h2 { font-size: 16px; margin-bottom: 1rem; } .hot-detail .con > .right #parameter > h2:before { top: 2px; } .hot-detail .con > .right #case { padding-bottom: 2.5rem; } .hot-detail .con > .right #case > h2 { font-size: 16px; margin-bottom: 1rem; } .hot-detail .con > .right #case > h2:before { top: 2px; } .hot-detail .con > .right #case > ul li { width: 100%; margin-top: 1rem; } .hot-detail .con > .right #case > ul li:not(:nth-child(3n)) { margin-right: 0; } .hot-detail .con > .right #case > ul li a .bottom { padding: 1rem 1.2rem; } .hot-detail .con > .right #case > ul li a .bottom h2 { font-size: 14px; margin-bottom: 1rem; } .hot-detail .con > .right #case > ul li a .bottom p { font-size: 13px; } .hot-detail .con > .right #case > ul li a .bottom h3 { font-size: 14px; margin-top: 1.2rem; } .hot-detail .con > .right #case > ul li a .bottom h3 span { font-size: 16px; } .hot-detail .con > .right #solve { padding-bottom: 2.5rem; } .hot-detail .con > .right #solve > h2 { font-size: 16px; margin-bottom: 1rem; } .hot-detail .con > .right #solve > h2:before { top: 2px; } .hot-detail .con > .right #solve > ul li { width: 100%; margin-top: 1rem; padding: 2rem 0; } .hot-detail .con > .right #solve > ul li:not(:nth-child(3n)) { margin-right: 0; } .hot-detail .con > .right #solve > ul li .tu { wdith: 5rem; } .hot-detail .con > .right #solve > ul li h2 { font-size: 14px; } .hot-detail .con > .right #solve > ul li p { font-size: 13px; } .hot-detail .con > .right #solve > ul li h3 { font-size: 14px; } .hot-detail .con > .right #solve > ul li h3 span { font-size: 14px; } .hot-form { background: none; } .hot-form .con > .right { width: 100%; } .hot-form .con > .right #show { padding-bottom: 4.5rem; width: 100%; } .hot-form .con > .right #show > h2 { font-size: 1.6rem; font-weight: bold; padding-left: 1rem; position: relative; margin-bottom: 2rem; } .hot-form .con > .right #show > h2:before { content: ''; width: 3px; height: 70%; background: #9f223d; position: absolute; left: 0; top: 20%; } .hot-form .con > .right #show > span { font-size: 1.2rem; color: #999; } .hot-form .con > .right #show > h3 { font-size: 1.6rem; font-weight: bold; color: #9f223d; } .hot-form .con > .right #show form { margin-top: 0; } .hot-form .con > .right #show form > div { width: 100% !important; margin-left: 0 !important; } .hot-form .con > .right #show .btn input { width: 8rem; height: 3rem; font-size: 14px; } .paper { padding: 2.5rem 0; } .paper p { font-size: 18px; } .paper p a { display: block; font-size: 14px; margin: 18px auto 0; } } /*# sourceMappingURL=info_hot_detail.css.map */