/** index begin**/ /** big banner **/ body{ background: url(../img/huxi-background.jpg) fixed bottom no-repeat; background-size: 100%; } .banner{ position: relative; width: 100%; overflow: hidden; max-height:438px; border-radius: 0 0 3px 3px; margin-bottom: 10px; } .banner-pagination{ position: absolute; z-index: 999; bottom: 15%; right: 47%; } .banner-pagination ul > li{ float: left; width: 1em; margin-left: 2em; height: 1em; font-size: 10px; background-color: #a0a0a0; border-radius: 50%; vertical-align: middle; text-align: center; cursor:pointer } .banner-pagination ul > .on{ background-color: #0068b7; } .banner-switchers{ width: 100%; bottom: 50%; position: absolute; z-index: 99; } .banner-switchers .next{ float: right; margin-right: 1%; } .banner-switchers .prev{ float: left; margin-left: 1%; } .banner .banner-switchers .banner-switcher{ display: none; border-radius: 50%; width: 44px; height: 44px; background-color: #999999; /*ie8*/ background-color: rgba(0,0,0,0.2); } .banner:hover .banner-switchers .next, .banner:hover .banner-switchers .prev{ display: block; } .banner .banner-switcher img{ width: 8px; height: 24px; margin: 9px 16px; } .banner-main-content{ overflow:hidden; position:relative; width:100%; } .banner-main-content ul li a img{ width: 100%; position: relative; display: block; } /** section header **/ .section-head{ height: 2.1em; font-size: 22px; border-bottom: #DDDDDD solid 1px; width: 100%; margin-bottom: 16px; position: relative; } .section-head a{ cursor:pointer } .section-head-title{ line-height: 2.1em; float: left; text-align: center; white-space: nowrap; font-weight: bold; color: black; margin-right: 0.5em; } .section-head-title div{ margin-right: 0.5em; line-height: 2.1em; float: left; font-weight: bold; background-color: #0068c3; margin-top: 0.5em; padding-left: .3em; padding-top: 1.2em; } .section-head-subtitle{ position: relative; bottom: -0.9em; float: left; text-align: center; font-size: 15px; white-space: nowrap; color: #999999; } .section-head-more{ line-height: 2.8em; float: right; color: black; font-size: 15px; cursor:pointer; } /** news section **/ .newsbanner{ overflow: hidden; position:absolute; float: left; max-height:300px; } .newsbanner-pagination{ position: absolute; z-index: 999; bottom: 1.3em; right: 5%; } .newsbanner-pagination ul > li{ float: left; width: 1em; margin-left: 2em; height: 1em; font-size: 10px; background-color: #a0a0a0; border-radius: 50%; vertical-align: middle; text-align: center; cursor:pointer } .newsbanner-pagination ul > .on{ background-color: #0068b7; } .newsbanner-main-content ul > li{ width: 100%; overflow: hidden; position: relative; } .newsbanner-main-content > ul > li > a > img{ width: 425px; height: 300px;/*67.6%;*/ cursor:pointer; display: block; } .newsbanner-main-content ul > li > .description{ position: absolute; line-height: 3em; z-index: 99; bottom: 0; width: 100%; background-color: #333333; /*ie8*/ background-color: rgba(0,0,0,0.6); } .newsbanner .newsbanner-main-content ul > li > .description >a{ margin-left: 1em; vertical-align: middle; position: relative; font-size: 11px; color: white; text-overflow: ellipsis; overflow: hidden; width: 62%; white-space: nowrap; cursor:pointer; } .articles1-container{ vertical-align: middle; max-width: 50%; margin-left: 440px } .headline{ width: 100%; cursor:pointer } .headline-head{ position: relative; width: 100%; } .headline-title{ font-weight: bold; } .headline-brief{ margin-top: 10px; width: 100%; background-color: #eeeeee; } .headline-brief-text{ text-indent: 2em; line-height: 28px; height: 6.1em; color: #a0a0a0; font-size: 14px; word-break: break-all; white-space: normal; overflow: hidden; } .articles1-list{ width: 100%; } .article1-listdec{ padding-right: 0.4em; font-size: 12px; line-height: 1.5em; float: left; color: #e5e5e5; /* // IE10 */ transition: color .3s; -moz-transition: color .3s; /* Firefox 4 */ -webkit-transition: color .3s; /* Safari and Chrome */ -o-transition: color .3s; } .articles1-list li:hover .article1-listdec{ padding-right: 0.4em; float: left; color: #076bce; } .articles1-list li{ margin: 1.1em 0; width: 100%; cursor:pointer; overflow: hidden; position: relative; } .article1-title, li:hover .article1-title, .headline-title, .headline-title:hover{ height: 2em; line-height: 1.4em; width: 84%; color: black; font-size: 16px; position: absolute; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; overflow: hidden; margin-right: 4em; /* // IE10 */ transition: all .3s; -moz-transition: all .3s; /* Firefox 4 */ -webkit-transition: all .3s; /* Safari and Chrome */ -o-transition: all .3s; } li:hover .article1-title{ color: #076bce; } .article1-datetime{ vertical-align: middle; position: relative; font-size: 14px; line-height: 2em; color: #999999; float: right; max-width: 5em; } .article2-blocks{ width: 100%; float: right; } .article2-block{ width: 100%; float: left; position: relative; margin: 0.58em 0; cursor:pointer } .article2-blocks .article2-block:first-child{ margin-top: 0; } .article2-block-datetime{ width: 60px; font-size: 12px; position: absolute; bottom: 5px; box-shadow:5px 5px 10px 4px rgba(128,128,128,0.1); } .article2-block-datetime-WD{ line-height: 26px; font-size: 14px; color: white; text-align: center; background-color: #0068c3; } .article2-block-datetime-MMDD{ line-height: 30px; font-size: 14px; color: black; text-align: center; background-color: white; } .article2-block-title{ font-size: 16px; position: relative; line-height: 25px; height: 56px; max-width: 78%; margin-left: 70px; margin-top: 5px; overflow: hidden; color: black; /* // IE10 */ transition: all .3s; -moz-transition: all .3s; /* Firefox 4 */ -webkit-transition: all .3s; /* Safari and Chrome */ -o-transition: all .3s; } .article2-block-title:hover{ font-weight: bold; } /** contentblock **/ .article3-contentblocks{ width: 100%; } .article3-contentblock{ width: 49%; margin: 0 0 1em 0; cursor:pointer; position: relative; height: 120px; overflow: hidden; } .article3-contentblock-img{ font-size: 12px; vertical-align: middle; position: relative; float: left; overflow: hidden; color: black; width: 153px; z-index: 20; } .article3-contentblock-article{ width: 56%; font-size: 12px; vertical-align: middle; position: absolute; margin-left: 164px; } .article3-contentblock-article-title{ line-height: 1.5em; height: 24px; font-size: 16px; color: black; overflow: hidden; margin-bottom: 0.6em; word-wrap: break-word; /* // IE10 */ transition: all .3s; -moz-transition: all .3s; /* Firefox 4 */ -webkit-transition: all .3s; /* Safari and Chrome */ -o-transition: all .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .article3-contentblock-article-content{ line-height: 28px; font-size: 14px; color: #a0a0a0; overflow: hidden; height: 6em; width: 100%; word-wrap: break-word; white-space: nowrap; } .article3-contentblock-article-content img{ position: relative; vertical-align: sub; } .article3-contentblock:hover .article3-contentblock-article-title{ font-weight: bold; } .article3-contentblock .article3-contentblock-align2article4{ width: 100%; overflow: hidden; text-align: right; font-size: 15px; height: 0px; color: #a0a0a0; } /** article4-contentblocks */ .article4-contentblocks{ width: 100%; } .article4-contentblock{ width: 50%; margin: 0 0 1em 0; cursor: pointer; position: relative; } .article4-contentblock-img{ font-size: 12px; vertical-align: middle; position: relative; float: left; overflow: hidden; color: black; width: 153px; height: 120px; } .article4-contentblock-article{ max-width: 55%; font-size: 12px; vertical-align: middle; position: absolute; margin-left: 157px; } .article4-contentblock-article-title{ line-height: 1.7em; height: 30px; font-size: 16px; color: black; overflow: hidden; word-wrap: break-word; white-space: nowrap; text-overflow: ellipsis; } .article4-contentblock-article-content{ line-height: 22px; font-size: 14px; color: #a0a0a0; overflow: hidden; height: 67px; width: 100%; word-wrap: break-word; text-indent: 2em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .article4-contentblock .article4-contentblock-datetime-MMDD{ width: 100%; overflow: hidden; text-align: right; font-size: 15px; color: #a0a0a0; } .article4-contentblock:hover .article4-contentblock-article-title{ font-weight: bold; } /** todo: a article5type-blocks */ .article5type-blocks{ width: 100%; margin-top: 1.4em; } .article5type-block{ position: relative; font-size: 0; margin: 0 0 10px 0; cursor: pointer; width: 100%; } .article5triangle, .article5triangle-hov{ width: 31%; } .article5triangle-hov{ display: none; } .article5type-block:hover .article5triangle{ display: none; } .article5type-block:hover .article5triangle-hov{ display: block; } .article5type-title{ position: absolute; top: 25%; left: 1%; } .article5type-title p{ color: white; font-size: 9px; text-align: center; width: 6em; } .article5type-dec{ position: relative; font-size: 9px; left: 1.25em; width: 28px; height: 28px; } /**stuffbanner **/ .stuffbanner{ width: 100%; position: relative; margin-bottom: 16px; } .stuffbanner .banner-switchers .banner-switcher{ width: 19px; height: 33px; background-color: #999999; /*ie8*/ background-color: rgba(0,0,0,0.2); } .stuffbanner .banner-switcher img{ width: 7px; height: 16px; margin: 8px 5px; } .stuffbanner-main-content{ margin: 0 auto; width: 93.5%; overflow: hidden; } .stuffbanner-main-content ul li{ width: 16.5%; height: 15%; } .stuffbanner-main-content ul li .img-outline{ display: block; box-shadow:1px 5px 10px 2px rgba(128,128,128,0.3); width: 75%; height: 166px; text-align: center; padding: 5px; margin: 0 auto; overflow: hidden; } .stuffbanner-main-content ul li .img-outline img{ min-height: 100%; width: 100%; position: relative; vertical-align: middle; cursor: pointer; } .stuffbanner-main-content ul li .img-desc{ color: black; font-size: 16px; text-align: center; margin: 0.5em 0; } .relative-links{ list-style: url(../img/link.png); margin-bottom: 1%; } .relative-links li{ float: left; margin-left: 3%; line-height: 2em; cursor:pointer } .relative-links li a{ color: black; /* // IE10 */ transition: color .3s; -moz-transition: color .3s; /* Firefox 4 */ -webkit-transition: color .3s; /* Safari and Chrome */ -o-transition: color .3s; } .relative-links li:hover a{ color: #076bce; }