main{ padding-top: 60px; } .banner{ width: 100%; background-color: #006498; box-sizing:border-box; background: url(/uploads/image/qimages/socialbanner.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: #000; font-weight: bold; } .banner-content2 .span-conten-b{ font-size: 32px; color: #fff; } .span-conten{ color: #fff; } .banner-content2 .span-conten-s{ font-size: 22px; } .banner-container{ position: relative; height: 100%; } .page{ padding-top: 40px; } .title{ margin-top: 40px; 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; } .anchor{ position: absolute; top: -70px; left: 0; } .post{ width: 100%; border: 1px solid #111; padding: 20px; position: relative; overflow: hidden; } .post-none{ margin-top: 10px; width: 100%; padding: 5px; position: relative; overflow: hidden; } .post-new{ margin-top: 10px; width: 100%; padding: 5px 0; position: relative; overflow: hidden; border: 1px solid #111; } .post-new .post-image img{ width: auto; } .post-num-bj{ position: absolute; width: 60px; height: 60px; top: -30px; left: -30px; background-color: #006498; transform:rotate(45deg); -ms-transform:rotate(45deg); /* ie 9 */ -moz-transform:rotate(45deg); /* firefox */ -webkit-transform:rotate(45deg); /* safari 和 chrome */ -o-transform:rotate(45deg); /* opera */ } .post-num{ display: inline-block; color: #fff; position: absolute; top: 4px; left: 7px; } .post-image{ width: 100%; max-width: 200px; text-align: center; margin: auto; } .post-image img{ width: 100%; } .post-title{ font-size: 15px; line-height: 1.666667; text-align:center; } .about-title{ text-align: center; margin: 3px 0; font-weight: bold; } .content{ padding: 20px 0; width: 100%; position: relative; } .content-left{ padding: 50px 10px } .content-left ul{ list-style:none; } .content-left ul li{ line-height: 30px; } .content-left ul li a{ color: #006498; } .content-left ul li a > .spot { display: inline-block; margin-bottom: 3px; margin-left: 5px; width: 6px; height: 6px; background-color: #006498; transform:rotate(45deg); -ms-transform:rotate(45deg); /* ie 9 */ -moz-transform:rotate(45deg); /* firefox */ -webkit-transform:rotate(45deg); /* safari 和 chrome */ -o-transform:rotate(45deg); /* opera */ } .content-left ul li .word{ display: inline-block; background-color: #192741; color: #fff; font-size: 12px; width: 56px; padding: 0px 10px; height: 20px; line-height: 20px; text-align: center; vertical-align: text-bottom; margin-left: 10px; } .content-left ul li .pdf{ display: inline-block; background-color: #e70012; color: #fff; font-size: 12px; width: 56px; padding: 0px 10px; height: 20px; line-height: 20px; text-align: center; vertical-align: text-bottom; margin-left: 10px; } .content-right{ position: absolute; right: 0; top: 20px; } .content-right img{ width: 300px; } .divnone{ background: #f3faff; position: relative; padding: 20px; } .divnoneimg{ width: 40%; text-align: center; } .fontdata{ position: absolute; top: 50%; height: 40px; margin-top:-20px; right: 15%; color: #00a1fe; font-size: 18px; font-weight: bold; } .qu-img{ margin: 20px 0 20px 10px; position: relative; } .qu-div-img{ position: absolute; top: 0; right:10px; } .qu-div-font{ margin: 0 370px 0 0 ; } .smallnavlink .tab4{ text-align: right; padding-right: 7%; } .smallnavlink .tab6{ text-align: left; padding-left: 7%; } @media (max-width: 767px) { main{ padding-top: 50px; } .title{ height: 38px; } .titlediv{ font-size: 16px; width: 30%; height: 36px; line-height: 36px; } .titlebox{ height: 36px; line-height: 36px; } .qu-div-img{ position: relative; text-align: center; } .qu-div-font{ margin:10px 0; } } @media (max-width: 479px) { .col-cx-12{ width: 100%; } .post { height: 250px; padding: 10px; } .post-image{ width: 80%; } .post-title{ margin-top: 0px; } .content-left{ padding: 0px 10px; } .banner-content{ font-size: 24px; } .title{ height: 38px; } .titlediv{ font-size: 16px; width: 40%; height: 36px; line-height: 36px; } .titlebox{ height: 36px; line-height: 36px; } } @media (max-width: 768px){ .page { padding-top: 30px; } } @media (max-width: 767px){ .banner-content{ margin-top: -35px; } } @media (max-width: 767px) and (min-width: 479px){ /* .smallnavlink { width: 70%!important; }*/ .smallnavlink { width: 100%!important; } .post { height: 260px; padding: 15px; } .post-image{ width: 80%; } .post-title{ margin-top: 0px; } .content-left{ padding: 30px 10px; } .banner-content{ font-size: 28px; } .divnoneimg{ width: 100%; text-align: center; } .fontdata{ position: relative; height: 40px; color: #00a1fe; font-size: 16px; font-weight: bold; width: auto; text-align: center; top: 0; margin: 0; right: 0; } } @media (max-width: 992px) and (min-width: 767px){ .post-image{ width: 80%; } .content-left{ padding: 40px 10px; } .content-left ul li a{ font-size: 15px; } .content-right img{ width: 260px; } } .quality-h1{ font-size: 20px; font-weight: bold; line-height: 1.6666667; } .quality-content{ margin-bottom: 30px; } .quality-img{ width: 100%; text-align: center; } .quality-img img{ width: auto; margin: auto; } @media (max-width: 479px) { .quality-img img{ width: 100%; } .tab4{ width: 36%!important; } .tab6{ width: 64%!important; } .smallnavlink .tab4{ text-align: right; padding-right: 10px; } .smallnavlink .tab6{ text-align: left; padding-left: 10px; } } @media (max-width: 767px) and (min-width: 479px){ .quality-img img{ width: 90%; } }