demo.css

 * {
     padding: 0;
     margin: 0;
     list-style: none;
     text-decoration: none;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
 }



 html,
 body {
     width: 100%;
     height: 100%;
     background-color: #f4f4f4;
     /* color: #3C3C3C; */
     overflow-x: hidden;
 }

 a {
     color: #3c3c3c;
 }


 .wrapper {
     width: 100%;
     height: 100%;
 }

 /* 上导航条 */
 .wrapper .top-nav-wrap {
     width: 100%;
     height: 105px;
     /* border: 1px solid #000; */
 }

 .wrapper .top-nav-wrap .top-nav {
     width: 1190px;
     height: 35px;
     /* border: 1px solid #000; */
     margin: 0px auto;
 }

 .wrapper .top-nav-wrap .top-nav .top-nav-l {
     float: left;
 }

 .wrapper .top-nav-wrap .top-nav .top-nav-r {
     float: right;
 }

 .wrapper .top-nav-wrap .top-nav ul li {
     float: left;
     margin-right: 7px;
 }

 .wrapper .top-nav-wrap .top-nav a {
     color: #6c6c6c;
     font-size: 12px;
     line-height: 35px;
     padding: 0 6px;
 }

 .wrapper .top-nav-wrap .top-nav a:hover {
     color: #f40;
 }

 .wrapper .top-nav-wrap .top-nav .china {
     color: #3c3c3c;
     line-height: 35px;
     font-size: 13px;
 }

 .wrapper .top-nav-wrap .top-nav a.login {
     color: #f40;
 }

 .wrapper .top-nav-wrap .top-nav .c-span {
     padding: 0 6px;
 }

 .wrapper .top-nav-wrap .top-nav .bg-pic {
     display: inline-block;
     width: 6px;
     height: 3px;
     background-size: 100% 100%;
     vertical-align: middle;
 }

 .wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic {
     background-image: url('./img/xsj.png');
 }

 .wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic {
     background-image: url('./img/gwc.png');
     width: 12px;
     height: 12px;
 }

 .wrapper .top-nav-wrap .top-nav .bg-pic.like-pic {
     background-image: url('./img/star.png');
     width: 12px;
     height: 12px;
 }

 .wrapper .top-nav-wrap .top-nav .bg-pic.web-nav-pic {
     background-image: url('./img/dh.png');
     width: 8px;
     height: 8px;
 }

 .wrapper .top-nav-wrap .top-nav .cut-off span {
     line-height: 35px;
     color: #ddd;
 }

 .wrapper .top-nav-wrap .ad-wrap {
     width: 100%;
     height: 70px;
     background-color: #000106;
 }

 .wrapper .top-nav-wrap .ad {
     width: 900px;
     margin: 0 auto;
 }

 .wrapper .top-nav-wrap image {
     width: 100%;
     height: 70px;
 }


 /* 搜索区域 */
 .wrapper .search-wrap {
     width: 100%;
     height: 97px;
     padding-top: 24px;
     /* border: 1px solid black; */
     background-color: #fff;
 }

 .wrapper .search-wrap .search-con {
     position: relative;
     width: 1190px;
     height: 88px;
     margin: 0 auto;
     /* border: 1px solid #000 */
 }

 .wrapper .search-wrap .search-con .logo-box {
     position: relative;
     top: -22px;
     display: inline-block;
     width: 190px;
     height: 118px;
     /* border: 1px solid #000; */
     background-image: url('./img/logo.gif');
     background-size: 100% 100%;
 }

 .wrapper .search-wrap .search-con .search-box {
     display: inline-block;
     width: 627px;
     height: 87px;
     /* border: 1px solid #000; */
     vertical-align: top;
     margin-left: 50px;
 }

 .wrapper .search-wrap .search-con .search-box .search-t {
     width: 627px;
     height: 62px;
     /* border: 1px solid #000; */
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-tab {
     height: 22px;
     margin-left: 17px;
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li {
     float: left;
     width: 36px;
     height: 22px;
     color: #f40;
     font-size: 12px;
     line-height: 22px;
     text-align: center;
     margin-right: 4px;

     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
     cursor: pointer;

 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li:hover {
     background-color: #ffeee5;
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-tab ul li.select {
     color: #fff;
     font-weight: 700;
     background: linear-gradient(to right, #ff9000 0, #ff5000 100%)
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-panel {
     width: 627px;
     height: 40px;
     /* border: 1px solid #000; */
     position: relative;
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-panel form {}

 .wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn {
     width: 74 px;
     height: 40px;
     /* border: 1px  solid #000000; */
     position: absolute;
     top: 0;
     right: 0;
     border-bottom-right-radius: 20px;
     border-top-right-radius: 20px;
     overflow: hidden;
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-panel form .btn button {
     border: none;
     width: 100%;
     height: 100%;
     background: linear-gradient(to right, #ff9000 0, #ff5000 100%);
     color: #fff;
     font-weight: 700;
     font-size: 18px;
     cursor: pointer;
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-panel form .search-inp-box {
     width: 551px;
     height: 36px;
     border: 2px solid #ff5000;
     border-bottom-left-radius: 20px;
     border-top-left-radius: 20px;
     overflow: hidden;
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-panel form .search-inp-box .search-inp {
     height: 36px;
     width: 472px;
     overflow: hidden;
 }

 .wrapper .search-wrap .search-con .search-box .search-t .search-panel form .search-inp-box .search-inp input {
     height: 24px;
     width: 472px;
     overflow: hidden;
     padding: 6px 16px;
     border: none;
     outline: 0;
     text-indent: 10px;
 }

 .wrapper .search-wrap .search-con .search-box .magnifier,
 .wrapper .search-wrap .search-con .search-box .camera {
     display: inline-block;
     position: absolute;
 }

 .wrapper .search-wrap .search-con .search-box .magnifier {

     width: 12px;
     height: 14px;
     top: 11px;
     left: 14px;
     background-image: url('./img/fdj.png');
     background-size: 100% 100%;
     /* border: 1px solid #000; */
 }

 .wrapper .search-wrap .search-con .search-box .camera {
     width: 20px;
     height: 22px;
     top: 11px;
     right: 120px;
     background-image: url('./img/camera.png');
     background-size: 100% 100%;
 }

 .wrapper .search-wrap .search-con .search-box .search-bl {
     width: 627px;
     height: 20px;
     /* border: 1px solid red;  */
 }

 .wrapper .search-wrap .search-con .search-box .search-bl a {
     font-size: 12px;
     margin-right: 7px;
 }

 .wrapper .search-wrap .search-con .search-box .search-bl a.active,
 .wrapper .search-wrap .search-con .search-box .search-bl a:hover {
     color: #ff5000;
 }

 .wrapper .search-wrap .search-con .code-box {
     position: relative;
     display: inline-block;
     width: 70px;
     height: 90px;
     border: 1px solid #eee;
     vertical-align: top;
     margin-left: 120px;
 }

 .wrapper .search-wrap .search-con .code-box .phone {
     color: #ff5000;
     font-size: 14px;
     line-height: 20px;
     margin-left: 4px;
 }

 .wrapper .search-wrap .search-con .code-box .code {
     display: inline-block;
     width: 62px;
     height: 62px;
     background: url('./img/orange.jpeg') no-repeat;
     background-size: 100% 100%;
     margin: 0 auto;
     margin-left: 4px;
 }

 .wrapper .search-wrap .search-con .code-box .close {
     position: absolute;
     display: inline-block;
     top: 0;
     left: -18px;
     border: 1px solid #eee;
     color: #ddd;
     font-size: 14px;
     width: 16px;
     height: 16px;
     text-align: center;
     line-height: 16px;
 }

 /* 搜索下的导航条 */
 .wrapper .screen-nav {
     width: 1190px;
     height: 30px;
     /* background-color: #f40÷\; */
     background: linear-gradient(to right, #ff9000 0, #ff5000 100%);
     margin: 0px auto;
 }

 .wrapper .screen-nav .screen-nav-con {
     width: 100%;
     height: 100%;
 }

 .wrapper .screen-nav .screen-nav-con h2 {
     float: left;
     color: #fff;
     font-size: 16px;
     width: 190px;
     height: 100%;
     background-color: #ff5000;
     text-align: center;
     line-height: 30px;
 }

 .wrapper .screen-nav .screen-nav-con ul {
     float: left;
     /* font-size: 16px;
     height: 30px; */
 }

 .wrapper .screen-nav .screen-nav-con ul li {
     float: left;
     margin: 0 3px;
     padding: 0 4px;
     position: relative;
 }

 .wrapper .screen-nav .screen-nav-con ul li:hover::before {
     content: "";
     display: block;
     width: 30px;
     height: 30px;
     background: url('./img/up.png') no-repeat;
     background-size: center;
     position: absolute;
     top: -10px;
     left: 50%;
     margin-left: -15px;
 }

 .wrapper .screen-nav .screen-nav-con ul li a {
     line-height: 30px;
     color: #fff;
     font-weight: 700;
 }

 /* 主要内容展示区域*/
 .wrapper .screen-box {
     width: 1190px;
     height: 632px;
     /* border: 1px solid red; */
     margin: 0 auto;

 }

 .wrapper .screen-box .main {
     float: left;
     width: 890px;
     height: 632px;
     /* border: 1px solid #000000; */
 }

 .wrapper .screen-box .main .main-inner {
     width: 890px;
     height: 522px;
     /* border: 1px solid #000000; */
 }

 .wrapper .screen-box .main .main-inner .inner-left {
     float: left;
     width: 190px;
     height: 522px;
     border: 1px solid #f40;
     border-top: none;
     background-color: #fff;
 }

 .wrapper .screen-box .main .main-inner .inner-left ul li {
     width: 145px;
     height: 32px;
     padding-left: 25px;
     padding-right: 19px;
     position: relative;
 }

 .wrapper .screen-box .main .main-inner .inner-left ul li:hover {
     background-color: #ffe4dc;
 }

 .wrapper .screen-box .main .main-inner .inner-left ul li:hover a {
     color: #ff5000;
 }

 .wrapper .screen-box .main .main-inner .inner-left ul li a {
     font-size: 14px;
     font-weight: 400;
     color: #666;
     line-height: 32px;
 }

 .wrapper .screen-box .main .main-inner .inner-left ul li span {
     display: inline-block;
     width: 5px;
     height: 8px;
     /* border: 1px solid #000 ; */
     position: absolute;
     right: 10px;
     top: 50%;
     margin-top: -4px;
     background: url('./img/yjt.png');
     background-size: 100% 100%;
 }

 .wrapper .screen-box .main .main-inner .inner-content {
     float: left;
     width: 520px;
     height: 522px;
     /* border: 1px solid #000 ; */
     /* background: #6c6c6c; */
 }

 .wrapper .screen-box .main .main-inner .inner-content .pic-box {
     padding: 8px;
 }

 .wrapper .screen-box .main .main-inner .inner-content .pic-box img {
     width: 100%;
     height: 100%;
 }

 .wrapper .screen-box .main .main-inner .inner-content .inner-mall {
     width: 520px;
     height: 230px;
     padding: 0 8px;
 }

 .wrapper .screen-box .main .main-inner .inner-content .inner-mall .tm {
     font-size: 12px;
     color: #666;
 }

 .wrapper .screen-box .main .main-inner .inner-right {
     padding: 8px;
     width: 160px;
     height: 522px;
     float: left;
 }

 .wrapper .screen-box .main .main-inner .inner-right .hot {
     font-size: 12px;
     margin-top: 11px;
 }


 .wrapper .screen-box .main .main-bottom {
     width: 890px;
     height: 110px;
     /* background-color: #f40; */
 }

 .wrapper .screen-box .main .main-bottom .content {
     background-color: #fff;
     padding: 14px 12px;
     margin-top: 10px;
     position: relative;
 }

 .wrapper .screen-box .main .main-bottom .content .logo-box {
     width: 180px;
     height: 73px;
     background-image: url('./img/tbtt.png');
     background-position: 100% 100%;
 }

 .wrapper .screen-box .main .main-bottom .content a {
     position: absolute;
     top: 14px;
     left: 200px;
 }

 .wrapper .screen-box .main .main-bottom .content a img {
     float: left;
 }

 .wrapper .screen-box .main .main-bottom .content a h4 {
     margin-top: 2px;
     margin-left: 144px;
     columns: #333;
     height: 28px;
     line-height: 28px;
     font-size: 16px;
 }

 .wrapper .screen-box .main .main-bottom .content a h4:hover {
     color: #ff5000;
 }

 .wrapper .screen-box .main .main-bottom .content a p {
     font-size: 14px;
     margin-top: 3px;
     margin-left: 144px;
     color: #999;
     line-height: 16px;
     height: 40px;
     overflow: hidden;

 }

 /* 右侧部分 */
 .wrapper .screen-box .col-right {
     margin-top: 8px;
     float: left;
     width: 290px;
     height: 632px;
     /* border: 1px solid #000000; */
     background-color: #fff;
     margin-left: 9px;
     /* padding-top: 8px;  */
 }

 .wrapper .screen-box .col-right .member {
     width: 290px;
     height: 132px;
     /* border-bottom: 1px solid #000000; */
     background-image: url(./img/bg.png);
     background-size: 100% 100%;
     margin-top: 10px;
 }

 .wrapper .screen-box .col-right .member .member-head {
     width: 290px;
     height: 91px;
 }

 .wrapper .screen-box .col-right .member .member-head .header {
     width: 290px;
     height: 56px;
     /* border-bottom: 1px solid #000000; */
     text-align: center;
 }

 .wrapper .screen-box .col-right .member .member-head .header a {
     display: inline-block;
     width: 50px;
     height: 50px;
     border-radius: 40%;
     /* border: 1px solid #000000; */
     background-image: url('./img/tx.jpeg');
     background-size: 100% 100%;
     /* background-color:#fde599; */

 }

 .wrapper .screen-box .col-right .member .member-head .info {
     display: block;
     width: 290px;
     height: 17px;
     color: #3c3c3c;
     font-size: 14px;
     line-height: 17px;
     text-align: center;
 }

 .wrapper .screen-box .col-right .member .member-head p {
     width: 290px;
     height: 17px;
     text-align: center;
     line-height: 17px;
 }

 .wrapper .screen-box .col-right .member .member-head p a {
     display: inline-block;
     width: 72px;
     height: 17px;
     border-radius: 9px;
     background-color: #ffe4db;
     font-size: 12px;
     color: #ff5000;
     padding: 0 29px;
     position: relative;
 }

 .wrapper .screen-box .col-right .member .member-head p a span {
     position: absolute;
     display: inline-block;
     width: 16px;
     height: 16px;
     top: 0px;
     left: 0px;
     /* border: 1px solid #000000; */
     background-image: url('./img/pics.png');
 }

 .wrapper .screen-box .col-right .member .member-head p a.icon span {
     background-position: 0 -572.5px
 }

 .wrapper .screen-box .col-right .member .member-head p a.club span {
     background-position: 0 -572.5px
 }

 .wrapper .screen-box .col-right .member .member-foot {
     width: 290px;
     height: 40px;
     text-align: center;
     padding-top: 10px;
     /* border:1px solid #000; */

 }

 .wrapper .screen-box .col-right .member .member-foot a {
     display: inline-block;
     height: 25px;
     width: 75px;
     background: linear-gradient(to right, #ff5000 0, #ff6f06 100%);
     border-radius: 4px;
     text-align: center;
     line-height: 25px;
     color: #fff;
     font-size: 14px;
     font-weight: 700;
 }

 .wrapper .screen-box .col-right .member .member-foot a.login {
     width: 92px;

 }

 .wrapper .screen-box .col-right .message {
     width: 290px;
     height: 26px;
     /* border: 1px solid #000000; */
 }

 .wrapper .screen-box .col-right .message a {
     display: inline-block;
     width: 100%;
     height: 100%;
     background-color: #ffe4dd;
     color: #f40;
     font-size: 12px;
     text-align: center;
     line-height: 26px;
     position: relative;

 }

 .wrapper .screen-box .col-right .message a span {
     display: inline-block;
     width: 10px;
     height: 10px;
     /* border: 1px solid #000000; */
     position: absolute;
     top: 7px;
     right: 52px;
     background-image: url('./img/ysj.png');
     background-size: 100% 100%;
 }

 .wrapper .screen-box .col-right .notice {
     height: 98px;
     width: 100%;
     padding-top: 10px;
     /* border-bottom: 1px solid #000000; */
 }

 .wrapper .screen-box .col-right .notice li {
     float: left;
 }

 .wrapper .screen-box .col-right .notice .title {
     height: 24px;
     width: 100%;
     padding: 0 8px;
     /* border-bottom: 1px solid #000000; */
     /* box-sizing: border-box; */

 }

 .wrapper .screen-box .col-right .notice .title li {
     width: 50px;
     height: 20px;
     margin: 0 11px;
 }

 .wrapper .screen-box .col-right .notice .title li a {
     color: #3c3c3c;
     font-size: 13px;
     line-height: 20px;
     padding: 0 2px;
 }


 .wrapper .screen-box .col-right .notice .title li a.active {
     font-weight: 700;
     border-bottom: 2px solid #f40;
 }

 .wrapper .screen-box .col-right .notice .content li a.active,
 .wrapper .screen-box .col-right .notice .content li a:hover,
 .wrapper .screen-box .col-right .notice .title li a:hover {
     color: #f40;
 }

 .wrapper .screen-box .col-right .notice .content {
     width: 100%;
     height: 50px;
     padding: 5px;
     /* border-bottom: 1px solid #000000;  */
     /* background-color: #6c6c6c;*/
     box-sizing: border-box;
 }

 .wrapper .screen-box .col-right .notice .content li {
     width: 120px;
     height: 25px;
     line-height: 25px;
     padding-left: 12px;
     text-align: left;
 }

 .wrapper .screen-box .col-right .notice .content li a {
     font-size: 12px;
     color: #3c3c3c;
 }

 .wrapper .screen-box .col-right .module {
     width: 100%;
     height: 240px;
 }


 .wrapper .screen-box .col-right .module ul li {
     float: left;
     width: 72px;
     height: 75px;
     border: 1px solid #eee;
     box-sizing: border-box;
     /* max-width: 0px 0px; */
 }

 .wrapper .screen-box .col-right .module ul li:hover {
     border: 1px solid #f40;
     /* border-bottom: 1px solid #f40; */
 }

 .wrapper .screen-box .col-right .module ul li:hover a p {
     color: #f40
 }

 .wrapper .screen-box .col-right .module ul li a {
     display: block;
     text-align: center;
 }

 .wrapper .screen-box .col-right .module ul li a span {
     display: inline-block;
     width: 24px;
     height: 24px;
     /* border: 1px solid #000000; */
     background: url('./img/pics.png');
     margin-top: 10px;
 }

 .wrapper .screen-box .col-right .module ul li a span.icon1 {
     background-position: 0 0;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon2 {
     background-position: 0 -88px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon3 {
     background-position: 0 -44px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon4 {
     background-position: 0 -132px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon5 {
     background-position: 0 -176px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon6 {
     background-position: 0 -220px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon7 {
     background-position: 0 -264px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon8 {
     background-position: 0 -176px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon9 {
     background-position: 0 0px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon10 {
     background-position: 0 -220px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon11 {
     background-position: 0 -132px;

 }

 .wrapper .screen-box .col-right .module ul li a span.icon12 {
     background-position: 0 -44px;

 }


 .wrapper .screen-box .col-right .module ul li a p {
     color: #333;
     font-size: 12px;
 }

 .wrapper .screen-box .col-right .app {
     width: 100%;
     height: 105px;
     /* border: 1px solid #000000; */
 }

 .wrapper .screen-box .col-right .app h3 {
     font-size: 14px;
     line-height: 30px;
     padding-left: 14px;
     font-weight: 600;

 }

 .wrapper .screen-box .col-right .app h3 .more {
     color: #666;
     font-size:13px;
     
     float: right;
     padding-right: 14px;
 }

 .wrapper .screen-box .col-right .app h3 .more:hover {
     color: #f40;
 }

 .wrapper .screen-box .col-right .app ul li {
     float: left;
     width: 35px;
     margin: 0 11px;
     /* border: 1px solid #000000; */
 }

 .wrapper .screen-box .col-right .app img {
     width: 100%;
     height: 100%;
     /* margin: 10px; */
     /* background:#000000; */
 }