.banner, .banner img, .cti-sales, .cti-year { width: 100% } .cti-sales, .cti-year, .cti-year>ul, .topnav .item { position: relative } .cti-sales { max-width: 1000px; margin: 0 auto 185px } ol, ul { list-style: none } .fl { float: left } .fr { float: right } .al { text-align: left } .ac { text-align: center } .ar { text-align: right } .hide { display: none } .cti-box { background: url(../../images/sales_bg.jpg) #fff } .cti-year { color: #fff } .cti-year>ul { height: 44px; float: left; margin: 0 auto } .cti-year li { float: left; width: 50%; height: 44px; line-height: 44px; text-align: center; font-size: 18px } .cti-year li a { display: block; background-color: #b2b2b2; color: #fff } .topnav { width: 100%; overflow: inherit } .cti-year .end, .cti-year .front { z-index: 66; width: 20px; background: url(../../images/sales_grey_triangel.png) no-repeat #fff } .cti-year .end, .cti-year .front, .cti-year .next, .cti-year .prev { position: absolute; height: 44px; top: 0 } .cti-year .front { left: -10px } .cti-year .end { right: -10px } .cti-year .active .front { z-index: 88; background: url(../../images/sales_red_front_triangel.png) no-repeat #fff } .cti-year .active .end { z-index: 88; background: url(../../images/sales_red_end_triangel.png) no-repeat #fff } .cti-year li.active a, .cti-year li:hover a { background-color: #dc0001; font-weight: 700 } .cti-year li.active a { display: block; font-size: 18px } .cti-year li:hover .front { z-index: 99; background: url(../../images/sales_transparent_front_triangel.png) no-repeat } .cti-year li:hover .end { z-index: 99; background: url(../../images/sales_transparent_end_triangel.png) no-repeat } .cti-year .next { right: 0 } .cti-year .next, .cti-year .prev { z-index: 3; display: block; width: 15%; max-width: 5%; line-height: 60px; background-color: #DC0001; text-align: center; float: left } .maincontent li, .maincontent li a { position: relative; display: block } .cti-year>a>img { display: inline-block; width: 12px; height: 22px } .cti-year>ul>li.active-two { display: none } .cti-year a:hover { background-color: #dc0001 } .cti-year a:hover img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2) } .cti-sales .cti-content::after { content: ''; display: block; clear: both } .cti-content { padding-top: 10px } .cti-content>li { display: none } .cti-content>.active { display: block } .cti-content a { color: inherit } .cti-content .encyclopedias .content { border-top: 1px solid #b2b2b2; font-size: 14px; color: #000; box-sizing: border-box } .cti-content .encyclopedias .content .item:hover, .cti-content .show .item:hover { color: #dd0b1a } .cti-content .encyclopedias .content .item { padding: 24px; border: 1px solid #b2b2b2; border-top: 0 } .cti-content .encyclopedias .content .item:last-child { border: none } .cti-content .encyclopedias .content .item:nth-child(odd) { background-color: #fff } .cti-content .encyclopedias .content .item:nth-child(even) { background-color: #dcdcdc } .encyclopedias .content .item .title { float: left; font-weight: 700 } .encyclopedias .content .item .time { float: right } .cti-content .show .content { margin-right: -2% } .cti-content .show .item { float: left; width: 33.33%; margin-bottom: 16px; font-size: 14px; line-height: 1 } .show .item>div { box-sizing: border-box; height: 300px; padding: 10px; background-color: #fff; margin-right: 6% } .show .item video { width: 100%; margin-bottom: 14px } .show .item .title { margin-bottom: 10px; font-weight: 700; height: 2.6em; line-height: 1.3em; } { position: relative; width: 230px; .cti-content .asidemargin-right: 5px; z-index: 99; background: #fff } .cti-content .pin-wrapper { height: 0!important } .aside li { background-color: #b1b1b1; margin-bottom: 1px; cursor: pointer } .aside .item:hover { background-color: #dc0001 } .aside .bottomarrow, .aside .toparrow { height: 58px } .aside .toparrow { background: url(../../images/toparrow.png) center center no-repeat #b1b1b1 } .aside .bottomarrow { background: url(../../images/bottomarrow.png) center center no-repeat #b1b1b1 } .aside .able, .aside .item.active { background-color: #dc0001 } .aside .item { height: 84px; line-height: 84px; text-align: center; color: #fff; cursor: pointer } .aside .item.hidden { display: none } .aside .item.show { display: block } .cti-content .maincontent, .encyclopedias .content { width: 765px; float: right; top: 0 } .maincontent li { box-sizing: border-box; height: 153px; padding: 10px 50px 10px 10px; border-bottom: 1px solid #e7e7e7; background-color: #fff } .maincontent li:last-child { border-bottom: none } .maincontent li a .timeline { position: absolute; left: -48px; top: -40px; display: none } .maincontent li .img { position: relative; width: 215px; margin-right: 15px } .maincontent a { display: block; width: 100%; height: 100% } .maincontent .img img { display: block; width: 100%; height: 132px } .maincontent .icon img { position: absolute; top: 20px; left: -27px } .maincontent .img-activeend { position: absolute; background: url(../../images/sales_over.png) no-repeat; width: 84px; height: 84px } .maincontent dl { width: 475px } .maincontent dt { color: #000; line-height: 1.7em; font-size: 14px; font-weight: bolder; height: 1.7em; overflow: hidden } .maincontent dd { font-size: 14px } .maincontent .general { overflow: hidden; text-align: justify; color: #000; line-height: 1.5em; height: 3em } .maincontent .date { position: absolute; bottom: 5px; font-size: 14px; color: #000 } .encyclopedias .aside li.item { padding: 0 } .nano { height: 89% } #aside_1,#aside_2{ width: 215px; } @media screen and (max-width:1000px) { .maincontent .timeline, .maincontent li .icon { display: none } .cti-content .maincontent, .encyclopedias .content { width: 100% } .cti-poster { background: #f7f7f7 } .cti-content .encyclopedias .content .item { padding: 2%; box-sizing: border-box } .cti-sales { padding-top: 0; width: 95%; margin: 0 auto } .cti-year li { margin-bottom: 25px } .cti-content .aside { width: 100% !important; overflow: hidden; float: none } .aside li { float: left; border-bottom: 0; border-right: 1px solid #fff; box-sizing: border-box } .aside .item { height: 42px; line-height: 42px; font-size: 14px } .aside .item.show { width: 29% } .maincontent li { border-left: none; padding: 3%; margin: 0 } .maincontent li .img { width: 100%; margin-right: 0 } .cti-sales .maincontent { padding-left: 0 } .cti-content .maincontent { width: 90%; padding-top: 0; float: none; margin: 0 auto; height: 326px !important; } .maincontent dl { width: 100% } .maincontent dt { font-size: 14px; margin: 15px 0 8px } .maincontent .date { position: relative; bottom: auto; font-size: 12px; margin-top: 4% } .topnav .item>a { font-weight: 800; font-size: 16px; text-align: center } .aside .bottomarrow, .aside .toparrow { width: 18px; height: 42px } .aside .toparrow { background: url(../../images/leftarrow.png) center center no-repeat; background-size: 70% } .aside .bottomarrow { background: url(../../images/rightarrow.png) center center no-repeat; background-size: 70% } .cti-content .encyclopedias .content{ height: 215px !important; } #aside_2 .item.show{ width: 22%; } .show .item>div{ height: auto; } .cti-content .show .item{ width: 50%; } }