main{ padding-top: 60px; } .post-featured-image{ position: relative; } .baguetteboxtwo a{ color: #111; } .baguetteboxtwo a:hover{ text-decoration: none; } .a-img img{ border: 1px solid #ccc; } .a-img div{ text-align: left; padding: 3px 0 0 3px; font-weight: bold; } .smallnavlink{ width: 43%!important; } .banner{ width: 100%; background-color: #006498; box-sizing:border-box; background: url(/uploads/image/pimages/productbanner.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } .banner-content{ position: absolute; top: 50%; left: 50%; width: 200px; height: 70px; margin-left: -100px; margin-top: -25px; text-align: center; color: #fff; font-weight: bold; } .banner-content2 .span-conten-b{ font-size: 32px; } .banner-content2 .span-conten-s{ font-size: 22px; } .banner-container{ position: relative; height: 100%; } .page{ padding-top: 40px; } .section{ margin: auto; margin-bottom: 30px; position: relative; } .anchor { position: absolute; top: -70px; left: 0; } .section>img{ width: 100%; } .sec-top{ position: absolute; top: 50px; } .post{ margin-top: 20px; width: 100%; position: relative; overflow: hidden; } .idiv{ position: absolute; right: 0; top: 0; background: #000; width: 25px; height: 25px; text-align: center; } .idiv i{ color: #fff; } .product-a { color: #111; position: relative; } .product-a i{ font-style: normal; color: #838383; } .product-a:hover{ text-decoration: none; color: #111; } .product-a .post-title-content{ font-weight: bold; color: #111; font-size: 20px; } .product-a .post-title-content em{ font-weight: normal; font-size: 14px; } .product-a:hover .post-title-content em{ border-bottom:1px solid #f70707; color: #f70707; } .product-a .post-title{ border-top: 1px solid #111; padding-top: 3px; } .product-a .emission-standard-image{ position: absolute; left: 0; top: 0; } .product-a .mjpg{ width: 100%; } .product-a span{ display: inline-block; width: 20px; height: 20px; line-height: 15px; text-align: center; padding-right: 3px; color: white; background-color: #fff; /*box-sizing: border-box; margin-right: 5px; vertical-align: bottom;*/ margin-bottom: 3px; } .product-a span:after { content: " "; display: inline-block; height: 9px; width: 9px; margin-bottom: 0px; border-width: 3px 3px 0 0; border-color: #f70707; border-style: solid; -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); } .sec-bottom{ position: absolute; bottom: 50px; width: 108px; height: 54px; } .sec-left{ left: 60px; } .sec-right{ right: 60px; } .sec-right .sec-top-title{ text-align: right; } .sec-top-title{ font-size: 26px; color: #006497; font-weight: bolder; margin-bottom: 5px; } .sec-bottom-title{ display: inline-block; width: 54px; height: 54px; color: #fff; background-color: #e60012; text-align: center; padding: 5px; } .sec-bottom-cont{ display: inline-block; width: 54px; float: right; height: 54px; border: 3px solid #e60012; box-sizing: border-box; text-align: center; } .sec-left:hover .sec-bottom-cont{ border-color:#c60010; } .sec-left:hover .sec-bottom-title{ background-color: #c60010; } .sec-right:hover .sec-bottom-cont{ border-color:#c60010; } .sec-right:hover .sec-bottom-title{ background-color: #c60010; } .sec-bottom a{ text-decoration: none; } .sec-bottom-cont img{ width: 100%; } .product-model{ color: red; font-weight: bold; font-size: 24px; margin-bottom: -10px; } .title{ margin-top: 20px; width: 100%; background-color: #e6e6e6; font-weight: bold; position: relative; height: 49px; padding: 3px 0 3px 3px; } .titlediv{ background: #000; font-size: 20px; color: #fff; padding: 0 20px; width: 20%; display: inline-block; height: 43px; line-height: 43px; vertical-align: top; } .titlebox{ background: url(/uploads/image/images/jtou-hei-01.png) no-repeat right center; width: 60px; display: inline-block; font-size: 20px; height: 43px; line-height: 43px; vertical-align: top; } .cosm{ padding: 0; } .tablearticle{ margin: 20px 0; } .tablearticle table{ width: 100%; border:1px solid #ddd; } .tablearticle table tr th{ width: 40%; background: #cbddeb; padding: 10px; border:1px solid #ddd; } .tablearticle table tr td{ width: 60%; padding: 10px; border:1px solid #ddd; } .post-title{ font-size: 14px; margin:5px 0; } .post-title b{ font-size: 14px; } .post-image img{ width: 100%; } .a-img img{ width: 100%; } .a-img:last-child{ text-align: center; } @media (max-width: 1200px) { .banner{ background-position: 24%!important; } } @media (min-width: 1920px) { .page{ min-height: 535px; } } @media (max-width: 992px) and (min-width: 767px){ .sec-top{ position: absolute; top: 30px; } .sec-bottom{ position: absolute; bottom: 30px; width: 108px; height: 54px; } .sec-left{ left: 40px; } .sec-right{ right: 40px; } } @media (max-width: 768px) and (min-width: 768px){ .page { padding-top: 30px; } } @media (max-width: 767px) { main{ padding-top: 50px; } .page { padding-top: 30px; } .product-model{ font-size: 16px; } .tablearticle table tr td, .tablearticle table tr th{ word-wrap: break-word; word-break: break-all; } .title{ height: 38px; } .titlediv{ font-size: 16px; width: 30%; height: 36px; line-height: 36px; } .titlebox{ height: 36px; line-height: 36px; } .a-img div{ font-size: 14px; } .post{ padding: 20px 0; } .col-sm-3:first-child .post{ padding: 0px 0; } .col-xs-6 .post{ padding: 0px 0; } .banner-content{ margin-top: -35px; } } @media (min-width: 480px) and (max-width: 767px) { .banner-content{ font-size: 28px; } .sec-right .sec-top-title{ text-align: left; } .sec-top{ position: static; margin-bottom: 15px; } .sec-bottom{ top: 8px; bottom: 0; left: auto; right: 0; width: 108px; height: 54px; } .titlediv{ width: 30%; } } @media (max-width: 500px){ .smallnavlink { width: 60%!important; } } @media (max-width: 479px) { .banner-content{ font-size: 24px; } .sec-right .sec-top-title{ text-align: left; } .sec-top{ position: static; margin-bottom: 15px; } .sec-bottom{ top: 2px; bottom: 0; left: auto; right: 0; width: 88px; height: 44px; } .sec-top-title{ font-size: 18px; color: #006497; font-weight: bolder; margin-bottom: 3px; } .sec-top-cont{ font-size: 12px; } .sec-bottom-title{ font-size: 12px; display: inline-block; width: 44px; height: 44px; color: #fff; background-color: #e60012; text-align: center; padding: 5px; } .sec-bottom-cont{ display: inline-block; width: 44px; float: right; height: 44px; border: 2px solid #e60012; box-sizing: border-box; font-size: 28px; line-height: 28px; text-align: center; } .title{ height: 38px; } .titlediv{ font-size: 16px; width: 40%; height: 36px; line-height: 36px; } .titlebox{ height: 36px; line-height: 36px; } }