body {
margin: 0;
}
#garnier-wrap{
width: 100%;
background: #80d6f1 url(../images/bg_g2.gif) repeat-x fixed top center;
}
.toolbar{
background: #f37a01;
position: fixed;
top: 0;
width: 100%;
height: 40px;
box-shadow: 0 0 1px 1px rgba(0,0,0,0.3), inset 0 0 1px 0 #f5912d;
z-index: 20;
text-shadow: 0 1px 0 rgba(185,87,0,0.3);
}
.top-bg{
position: fixed;
width: 100%;
top: -5px;
}
.tea-left {
z-index: 0;
left: 50%;
top: 8px;
margin-left: -740px;
}
.tea-right {
z-index: 0;
top: 8px;
right: 50%;
margin-right: -740px;
}
.leaf1 {
left: 50%;
margin-left: -688px;
margin-top: 120px;
}
.leaf2 {
left: 50%;
margin-left: -750px;
margin-top: 250px;
}
.leaf3 {
left: 50%;
margin-left: 653px;
margin-top: 130px;
}
.leaf4 {
left: 50%;
margin-left: 580px;
margin-top: 240px;
}
#garnier-wrap .main-wrap{ 
background: #fff;
max-width: 1068px;
margin: 0 auto;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
z-index: 1;
}
#garnier-wrap .head-wrap {
/*background: url(../images/bg-head.jpg) center;*/
padding: 26px 46px;
border-bottom: 3px solid #0eb1e8;
}
#garnier-wrap .content-wrap {
padding: 0 30px;
}
.garnier-box1 {
margin-bottom: 70px;
}
#garnier-wrap h1.header-content {
font-size: 30px;
font-family: supermarket;
color: #749d3e;
text-align: left;
border-bottom: 3px solid;
margin-top: 10px;
font-weight: normal;
margin-bottom: 20px;
line-height: 52px;
}
/*#garnier-wrap h1::before {
content: "";
background-image: url(../images/);
}*/
.fa-newspaper-o:before {
content: "";
}
.header-content .iconhead, .header .iconhead {
margin-right: 5px;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
}
.article-wrap {
display: block;
margin: 0 -5px;
}
.article-box {
padding: 0 5px;
margin-bottom: 10px;
box-sizing: border-box;
float: left;
display: block;
width: 220px;
}
.garnier-box1 .box-item {
box-sizing: border-box;
border: 1px solid #e5e5e5;
height: auto;
text-decoration: none;
color: #636363;
display: block;
}
.garnier-box1 .box-item:hover {
border: 1px solid #f47a00;
}
.garnier-box1 .box-item:hover>.desc-item>.desc {
color: #f47a00;
}
.box-item .desc-item{
height: 86px;
padding: 5px;
display: block;
text-align: center;
}
.cover-item {
display: block;
position: relative;
}
.cover-item img {
border-bottom: 3px solid #749d3e;
}
.cover-item .tag {
position: absolute;
left: 5px;
bottom: 10px;
font-family: Tahoma,Arial,sans-serif;
font-size: 12px;
padding: 3px 3px 5px;
color: #FFF;
min-width: 50px;
max-width: 150px;
line-height: 10px;
overflow: hidden;
text-overflow: ellipsis;
background-color: rgb(84, 202, 238);
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
}
.desc-item .desc {
display: block;
color: #636363;
font-size: 14px;
text-align: center;
line-height: 17px;
height: 50px;
overflow: hidden;
margin-bottom: 10px;
text-decoration: none;
}
.stat-item {
display: table;
width: 100%;
font-size: 12px;
color: #a8a8a8;
}
.stat-item i.iconstat {
padding-right: 5px;
}
.stat-item .share {
display: table-cell;
width: 50%;
float: left;
text-align: left;
}
.stat-item .view {
display: table-cell;
width: 50%;
float: right;
text-align: right;
}
.fa-mail-forward:before, .fa-share:before {
content: "";
}
.fa-eye:before {
content: "";
}
.garnier-box2 {
height: 373px;
margin-bottom: 70px;
border: 1px solid #0eb1e8;
}
.box-clear::after {
content: "";
display: block;
clear: both;
height: 0;
}
.box-left {
width: 650px;
}
.box-right {
width: 354px;
}
.garnier-box1 .box-right {
margin-top: 62px;
}
.garnier-box2 .box-left {
background: #fff;
}
.garnier-box2 .box-right {
background: #c8e9f7;
overflow-y: scroll;
height: 371px;
box-shadow: inset 2px 0px 0px 0px #2bb0da;
}
.show-vdo {
padding: 5px 5px 3px;
}
.list-vdo a {
text-decoration: none;
color: #fff;
}
.list-vdo {
border-bottom: 1px solid #2bb0da;
}
.list-item {
    padding: 8px 0px 8px 14px;
}
.active .list-item {
    padding: 0;
}
.list-vdo a:hover {
color: #36561e;
}
.list-vdo.active {
padding: 20px 10px;
background: #80d6f1;
border-left: 0 !important;
}
.cover-list {
display: block;
float: left;
margin-right: 10px;
max-width: 50px;
width: 100%;
}
.active .cover-list {
display: block;
float: left;
margin-right: 5px;
max-width: 90px;
width: 100%;
}
.desc-list {
display: block;
width: 256px;
float: left;
}
.active .desc-list {
display: block;
width: 220px;
float: left;
}
span.title {
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
width: 260px;
white-space: nowrap;
color: #636363;
font-size: 13px;
}
.active span.title {
font-size: 14px;
color: #fff;
white-space: inherit;
width: 222px;
font-weight: bold;
}
span.date {
display: block;
font-size: 10px;
color: #636363;
}
.active span.date {
display: block;
font-size: 12px;
color: #fff;
}
.list-vdo.active:first-child {
    border-top: 0;
}
.list-vdo.active:last-child {
    border-bottom: 0;
}
.list-vdo:last-child {
    border-bottom: 0;
}
.gn-leaf{
animation-name: gnmotion;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.gn-leaf2{
animation-name: gnmotion;
animation-duration: 6s;
animation-iteration-count: infinite;
}
.gn-leaf3 {
animation-name: gnmotion;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes gnmotion {
0% { transform: translateY(0px);}
50% {transform: translateY(20px);}
100% { transform: translateY(0px);}
}
.left {
float: left;
}
.right {
float: right;
}
ul, li {
list-style: none;
}
.rel {
position: relative;
}
.abs {
position: absolute;
}
.showd{
display: block;
}
.showm{
display: none;
}
@media screen and (max-width: 480px){
#garnier-wrap img {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.showd{
display: none;
}
.showm{
display: block;
}
#garnier-wrap .main-wrap {
border: none;
}
#garnier-wrap .head-wrap {
padding: 0;
background-size: cover;
}
#garnier-wrap .content-wrap {
padding: 0 10px;
}
.box-left, .box-right {
width: 100%;
}
.garnier-box2 .box-right {
background: #fff;
box-shadow: none;
overflow: visible;
height: auto;
}
.list-box a {
color: #000;
}
ul.list-wrap {
padding: 0px;
}
.cover-list {
width: 28%;
}
.desc-list {
width: 75%;
}
.garnier-box1 {
margin-bottom: 20px;
}
.article-box {
width: 50%;
}
.article-wrap {
margin: 0;
padding: 0;
}
.garnier-box1 .box-right {
display: none;
}
.garnier-box2 {
height: auto;
margin-bottom: 0;
}
.garnier-box2 .box-left {
position: relative;
width: 100%;
height: 0;
padding-bottom: 60%;
overflow: hidden;
box-sizing: border-box;
}
.show-vdo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
span.title {
    width: 100%;
}
.active .cover-list {
    width: 25%;
    max-width: 100%;
}
.active .desc-list {
    max-width: 100%;
    width: 70%;
}
.active span.title {
    width: 100%;
}
}