@charset "utf-8";
@import url(owl.carousel.css);
@import url(owl.transitions.css);

.banner {
    width: 100%
}

.banner img {
    width: 100%
}

.content {
    padding: 2em 0
}

.left {
    width: 55%;
    float: left
}

.right {
    width: 45%;
    float: right;
    padding: 0 1em
}

.content_title {
    font-size: 1.2em;
    color: #0068b7;
    font-weight: bold;
    margin-bottom: 1.3em
}

.content_title span {
    color: #848484;
    font-size: .8em;
    margin-left: 10px;
    font-weight: normal;
    text-transform: uppercase
}

.product {
    margin: 0 -8px
}

.product li {
    width: 33%;
    padding: 0 8px;
    margin-bottom: 1em;
    float: left
}

.product li .list_img {
    border: 1px solid #eaeaea;
    background: #fff;
    width: 100%;
    position: relative;
    height: 195px
}

.product li .list_img img {
    width: 100%;
    transition: all ease .5s
}

.product li .list_img:before, .product li .list_img:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 18px;
    left: 7px;
    width: 91%;
    height: 20%
}

.product li .list_img:before, .product li .list_img:after {
    -webkit-box-shadow: 0 15px 10px rgba(125, 125, 125, .9);
    -moz-box-shadow: 0 15px 10px rgba(125, 125, 125, .9);
    box-shadow: 0 15px 10px rgba(125, 125, 125, .9)
}

.product li .list_img:before, .product li .list_img:after {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    transform: rotate(-5deg)
}

.product li .list_img:after {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg)
}

.product li .list_img:hover img {
    opacity: .8
}

.product li h3 {
    padding: .9em;
    font-size: .85em;
    text-align: center
}

.product li a {
    color: #000
}

.product li a:hover {
    color: #555
}

.new_product {
    margin-bottom: 20px;
    position: relative
}

#slider .item {
    padding: 0 10px
}

#slider .item .box {
    border: 1px solid #d7d7d7;
    width: 100%;
    max-width: 223px;
    position: relative
}

#slider .item .box img {
    display: block
}

#slider .item .box img {
    max-width: 100%
}

#slider .item .box h3 {
    background-color: #333;
    background-color: rgba(0, 0, 0, .6);
    width: 100%;
    color: #fff;
    font-size: .8em;
    font-weight: normal;
    padding: .6em 1em .6em .6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden
}

#slider .item .box h3 a {
    color: #fff;
    text-align: center
}

#slider .item .box h3 i {
    position: absolute;
    right: 10px
}

#slider .owl-controls {
    position: absolute;
    top: -63px;
    right: 0
}

.news .content_title {
    margin-bottom: 1em
}

.news .news_list {
    border: 1px solid #e7e7e7;
    width: 100%;
    line-height: 2.4em;
    margin-bottom: 10px;
    color: #888;
    font-size: .95em;
    padding-right: 30px;
    position: relative
}

.news .news_list .date {
    border-right: 1px solid #e7e7e7;
    height: 100%;
    display: inline-block;
    margin-right: 10px;
    padding: 0 .8em;
    color: #00a040
}

.news .news_list a {
    color: #888;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden
}

.news .news_list a:hover {
    color: #000
}

.news .news_list i {
    color: #000;
    line-height: 2.4em;
    position: absolute;
    right: 10px
}

@media only screen and (max-width: 1200px) {
    .content {
        padding: 2em 1.5em
    }

    #slider .item .box {
        height: 16vw
    }
}

@media only screen and (max-width: 1024px) {
    #slider .owl-controls {
        position: static
    }

    .new_product {
        margin-bottom: 10px
    }

    .owl-theme .owl-controls .owl-buttons div {
        filter: Alpha(Opacity=100);
        opacity: 1
    }
}

@media only screen and (max-width: 768px) {
    .left, .right {
        width: 100%;
        float: none
    }

    .right {
        padding: 0
    }

    #slider .item {
        padding: 0 10px 0 0
    }

    #slider .item .box {
        height: 26vw
    }
}

@media only screen and (max-width: 480px) {
    .content {
        padding: .5em 1em
    }

    .content_title {
        font-size: 1.2em;
        margin-bottom: 1em
    }

    .content_title span {
        font-size: .65em
    }

    .product {
        margin: 0 -4px
    }

    .product li {
        padding: 0 4px;
        margin-bottom: .5em
    }

    .product li h3 {
        padding: .5em;
        font-size: .8em;
        font-weight: normal
    }

    #slider .item .box {
        height: 36vw
    }

    .news .news_list {
        font-size: .8em
    }

    .news .news_list .date {
        margin-right: 5px;
        padding: 0 .6em
    }
}