@charset "utf-8";

#content{width:100%; float:left}
#content.index h1, #content.index h2{width:100%; height:0px; margin:0px; padding:0px; overflow:hidden; float:left}
#content #banner{width:100%; border-radius:3px; margin:5px 0px; float:left}
#content #maps{width:100%; padding:20% 0px; float:left}
#content .banner{width:100%; float:left}
#content .contact{width:90%; max-width:1200px; margin:0px auto}
#content .contact h1{width:100%; color:#333; font-size:40px; text-align:center; text-transform:uppercase; margin:20px 0px; float:left}
#content .contact .info{width:100%; display:table}
#content .contact .info .cell{width:50%; display:table-cell; vertical-align:middle}
#content .contact .info .cell:last-child{padding:0px 0px 0px 4%}
#content .contact .info .cell img{width:100%; float:left}
#content .contact .info .cell .item{width:100%; background-position:left top; background-repeat:no-repeat; margin:0px 0px 30px; padding:0px 0px 0px 60px; float:left}
#content .contact .info .cell .item.address{background-image:url(../images/others/icon_pin.png)}
#content .contact .info .cell .item.pm{background-image:url(../images/others/icon_phone.png)}
#content .contact .info .cell .item .title{width:100%; line-height:25px; color:#252525; font-size:13px; text-transform:uppercase; margin:0px 0px 15px; float:left}
#content .contact .info .cell .item .value{width:100%; color:#747474; font-size:17px; float:left}
#content .contact .info .cell .item .value a{color:#333; text-decoration:none}
#content .contact .info .cell .item .value a:hover{text-decoration:underline}
#content .contact .info .cell .name{width:100%; color:#252525; font-size:50px; margin:0px 0px 55px; float:left}
#content .index .title{width:100%; color:#665139; font-size:36px; text-align:center; text-transform:uppercase; margin:30px 0px; float:left}
#content .product{width:100%; margin:0px 0px 50px; float:left}
#content .product.index{margin:0px}
#content .product h1{width:100%; color:#665139; font-size:36px; font-weight:400; text-align:center; text-transform:uppercase; margin:30px 0px; float:left}
#content .product .content{width:100%; float:left}
#content .product .content .left{width:calc(100% - 300px); margin:30px 0px 0px; padding:0px 15px 0px 0px; float:left}
#content .product .content .middle{width:100%; font-size:14px; text-align:justify; margin:15px 0px; position:relative; float:left; clear:both}
#content .product .content .middle *{max-width:100% !important; margin:10px 0px; padding:0px}
#content .product .content .middle img{height:auto !important; margin:10px auto}
#content .product .content .middle table{margin:10px auto}
#content .product .content .middle .title{width:100%; color:#665139; font-size:20px; font-weight:700; text-decoration:underline; margin:30px 0px; padding:0px 15px 0px 0px; float:left}
#content .product .content .middle .youtube{width:100%; padding:28.125% 0px; position:relative; float:left}
#content .product .content .middle .youtube iframe{width:100%; height:100%; margin:0px; position:absolute; top:0px; right:0px; bottom:0px; left:0px}
#content .product .content .null{width:100%; height:200px; color:#555; font-size:14px; float:left}
#content .product .content .top{width:100%; float:left}
#content .product .content .top .img{width:500px; max-width:100%; float:left}
#content .product .content .top .img .gallery{width:100%; border-collapse:collapse; margin:0px 0px 15px; display:table}
#content .product .content .top .img .gallery > div{border:solid 1px #CCC; padding:5px; display:table-cell; cursor:pointer; transition:0.3s ease-in-out}
#content .product .content .top .img .gallery > div:first-child, #content .product .content .top .info .gallery > div:hover{background:#665139}
#content .product .content .top .img .gallery > div > div{content:""; width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:50%; float:left}
#content .product .content .top .img .show{width:100%; border:solid 1px #CCC; margin:0px 0px 15px; padding:15px; overflow:hidden; cursor:pointer; transition:0.3s ease-in-out; display:none; float:left}
#content .product .content .top .img .show:first-child{display:block}
#content .product .content .top .img .show:hover{cursor:zoom-in}
#content .product .content .top .img .show > div{width:100%; position:relative; overflow:hidden; float:left}
#content .product .content .top .img .show > div > div{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:50% 0px; position:relative; transition:0.3s ease-in-out; float:left}
#content .product .content .top .img .show:hover > div > div{transform:scale(1.2)}
#content .product .content .top .info{width:calc(100% - 515px); margin:0px 0px 0px 15px; float:left}
#content .product .content .top .info h1{width:100%; color:#665139; font-size:24px; font-weight:700; text-align:left; text-transform:none; margin:0px; float:left}
#content .product .content .top .info h2{width:100%; line-height:24px; color:#333; font-size:14px; font-weight:400; text-align:justify; margin:15px 0px 0px; float:left}
#content .product .content .others{width:300px; padding:0px 0px 0px 15px; float:left}
#content .product .content .others .wrap .item{width:100%; clear:both}
#content .product .content .others .title{width:100%; color:#665139; font-size:20px; font-weight:700; text-decoration:underline; margin:30px 0px; padding:0px 15px 0px 0px; float:left}
#content .product .wrap{width:calc(100% + 30px); margin:0px -15px; float:left}
#content .product .wrap .updating_data{width:100%; color:#F00; font-size:18px; text-align:center; margin:200px 0px; float:left}
#content .product .wrap .item{width:25%; padding:0px 15px; float:left}
#content .product .wrap .item:nth-child(4n){clear:right}
#content .product .wrap .item:nth-child(4n + 1){clear:left}
#content .product .wrap .item .img{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:50% 0px; position:relative; overflow:hidden; float:left}
#content .product .wrap .item .img:after{content:""; width:50%; height:100%; background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%); position:absolute; top:0px; left:-75%; display:block; transform:skewX(-25deg)}
#content .product .wrap .item:hover .img:after{animation:shine 0.75s}
#content .product .wrap .item .name{width:100%; color:#665139; font-size:14px; font-weight:700; margin:15px 0px; transition:0.3s ease-in-out; float:left}
#content .product .wrap .item:hover .name{color:#C00}
#content .product .wrap .item .size{width:100%; color:#665139; font-size:14px; margin:0px 0px 15px;float:left}
#content .product .wrap .item .type{width:100%; color:#665139; font-size:14px; margin:0px 0px 30px;float:left}
#content .news{width:100%; float:left}
#content .news.category{margin:0px 0px 50px}
#content .news.detail{margin:0px 0px 50px}
#content .news.index{margin:15px 0px}
#content .news h1{width:100%; color:#665139; font-size:36px; font-weight:400; text-align:center; text-transform:uppercase; margin:30px 0px; float:left}
#content .news.detail h1{width:100%; color:#665139; font-size:36px; text-align:left; text-transform:none; margin:30px 0px 0px; float:left}
#content .news.detail h2{width:100%; color:#333; font-size:16px; margin:15px 0px 30px; float:left}
#content .news .ads{width:100%; margin:20px 0px; float:left}
#content .news .box{width:calc(100% - 330px); float:left}
#content .news .content{width:100%; color:#333; font-size:14px; text-align:justify; margin:0px 0px 10px; float:left}
#content .news .content *{max-width:100% !important}
#content .news .content a:link, #content .news .content a:visited{color:#036; display:inline-block}
#content .news .content a:hover{text-decoration:none}
#content .news .content img{height:auto !important}
#content .news .item{width:50%; margin:15px 0px; padding:0px 15px; float:left}
#content .news .item:nth-child(1), #content .news .item:nth-child(2){margin:0px 0px 15px}
#content .news .item:nth-child(odd){clear:left}
#content .news .item:nth-child(even){clear:right}
#content .news .item .img{width:30%; border:solid 1px #DDD; padding:5px; float:left}
#content .news .item .img div{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; border:solid 1px #DDD; padding:30% 0px; position:relative; overflow:hidden; float:left}
#content .news .item .img div:after{content:""; width:50%; height:100%; background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%); position:absolute; top:0px; left:-100%; display:block; transform:skewX(-25deg)}
#content .news .item .img:hover div:after{animation:shine 0.75s}
#content .news .item .right{width:70%; padding:0px 0px 0px 15px; float:left}
#content .news .item .right .description{width:100%; color:#000; font-size:12px; margin:10px 0px; float:left}
#content .news .item .right .name{width:100%; color:#000; font-size:14px; font-weight:700; transition:0.3s ease-in-out; float:left}
#content .news .item .right .name:hover{color:#665139}
#content .news .item .right .readmore{color:#665139; font-size:12px; transition:0.3s ease-in-out; float:left}
#content .news .item .right .readmore:hover{color:#C00}
#content .news .index{width:100%; float:left}
#content .news .wrap{width:calc(100% + 30px); margin:0px -15px; float:left}
#content .news .wrap .updating_data{width:100%; color:#F00; font-size:18px; text-align:center; margin:200px 0px; float:left}
#content .news .other{width:300px; float:right}
#content .news .other .link{width:100%; float:left}
#content .news .other .link .item{width:100%; margin:15px 0px; padding:0px 0px 0px 15px; float:left}
#content .news .other.intro .link .item{margin:0px 0px 15px}
#content .news .other .link .item .description{width:100%; color:#000; font-size:12px; margin:10px 0px; float:left}
#content .news .other .link .item .img{width:100%; border:solid 1px #DDD; margin:0px 0px 10px; padding:5px; float:left}
#content .news .other .link .item .img div{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; border:solid 1px #DDD; padding:30% 0px; position:relative; overflow:hidden; float:left}
#content .news .other .link .item .img div:after{content:""; width:50%; height:100%; background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%); position:absolute; top:0px; left:-100%; display:block; transform:skewX(-25deg)}
#content .news .other .link .item .img:hover div:after{animation:shine 0.75s}
#content .news .other .link .item .name{width:100%; color:#000; font-size:14px; font-weight:700; transition:0.3s ease-in-out; float:left}
#content .news .other.intro .link .item .name{font-weight:400; padding:0px 0px 0px 20px; position:relative}
#content .news .other.intro .link .item .name::before{content:"\f0fb"; font-family:FontAwesome; font-size:12px; position:absolute; top:2px; left:0px}
#content .news .other .link .item .name:hover{color:#665139}
#content .news .other .link .item .readmore{color:#665139; font-size:12px; transition:0.3s ease-in-out; float:left}
#content .news .other .link .item .readmore:hover{color:#C00}
#content .news .other .title{width:100%; color:#665139; font-size:20px; font-weight:700; text-decoration:underline; margin:30px 0px; padding:0px 15px; float:left}
#error{width:100%; color:#F00; margin:20px 0px; text-align:center; font-size:16px; float:left}

/* Paginatior */
.paginator{clear:both; text-align:right; font-size:12px !important; margin:30px 0px 0px; padding:0px 15px}
.paginator .paginationControl{margin:10px -5px; float:right}
.paginator .paginationControl a{width:30px; height:30px; line-height:30px; background:#FFF; color:#665139; font-size:12px; text-align:center; text-decoration:none; border:solid 1px #665139; margin:0px 5px; padding:0px; display:inline; float:left; transition:0.3s ease-in-out}
.paginator .paginationControl a:hover{background:#665139; color:#FFF}
.paginator .paginationControl a.disabled{cursor:default}
.paginator .paginationControl a.selected{background:#665139; color:#FFF; cursor:default}
.paginator .paginationControl a.special{line-height:27px}

@keyframes shine{
    100%{left:125%}
}

@media (max-width:1280px){
    #content .product .content .top .img{width:400px}
    #content .product .content .top .info{width:calc(100% - 415px)}
}
@media (max-width:1150px){
    #content .product .content .top .img{width:300px}
    #content .product .content .top .info{width:calc(100% - 315px)}
}
@media (max-width:1020px){
    #content .news .item{width:100%}
    #content .news .item:nth-child(2){margin:15px 0px}
    #content .product .content .control{display:none}
    #content .product .content .img .color div{width:30px; height:30px}
    #content .product .content .pages .page{display:block}
    #content .product .content .pages .page .page_title{width:100%; line-height:30px; color:#665139; font-size:20px; text-transform:uppercase; border-bottom:solid 1px #665139; margin:15px 0px; display:block !important; float:left}
    #content .product .content .top .img{clear:right}
    #content .product .content .top .info{width:100%; margin:15px 0px 0px; clear:left}
}
@media (max-width:920px){
    #content .product .title{margin:30px 0px 15px}
    #content .product.index .title .wrap .slash{width:6px; height:35px; margin:0px 40px}
    #content .product.index .title .wrap .tab{line-height:30px; font-size:35px}
    #content .product .wrap .item{width:50%; margin:15px 0px 0px}
    #content .product .wrap .item:nth-child(odd){clear:left}
    #content .product .wrap .item:nth-child(even){clear:right}
}
@media (max-width:820px){
    #content .product .content .left{width:100%; padding:0px}
    #content .product .content .others{width:100%; padding:0px}
    #content .product .content .others .wrap .item{width:50%}
    #content .product .content .others .wrap .item:nth-child(odd){clear:left}
    #content .product .content .others .wrap .item:nth-child(even){clear:right}
    #content .product .content .top .img{clear:none}
    #content .product .content .top .info{width:calc(100% - 315px); margin:0px 0px 0px 15px; clear:none}
}
@media (max-width:750px){
    #content .news .box{width:100%}
    #content .news .other{width:100%}
    #content .news .other .title{margin:30px 0px 15px; padding:0px}
    #content .news .other .link{width:calc(100% + 30px); margin:0px -15px}
    #content .news .other .link .item{width:50%; padding:0px 15px}
    #content .news .other .link .item:nth-child(odd){clear:left}
    #content .news .other .link .item:nth-child(even){clear:right}
    #content .news .other.intro .link .item:nth-child(n){width:100%; padding:0px 15px; clear:both}
    #content .product .content .img .color{top:30px; right:30px}
    #content .product .content .img .color div{width:25px; height:25px; margin:10px 0px 0px}
    #content .promotions h1{margin:30px 0px 0px}
    #content .promotions .item:nth-child(2){margin:0px}
    #content .promotions .item .left{width:100%; margin:0px 0px 30px}
    #content .promotions .item .right{width:100%; padding:0px}
}
@media (max-width:600px){
    #content .news .item .img{width:100%}
    #content .news .item .right{width:100%; padding:15px 0px 0px}
    #content .news .other .link .item:nth-child(n){width:100%; padding:0px 15px; clear:both}
    #content .product .content .top .img{width:100%; clear:right}
    #content .product .content .top .info{width:100%; margin:15px 0px 0px; clear:left}
}
@media (max-width:500px){
    #content .product .content .others .wrap .item{width:100%; clear:both}
    #content .product .content .img .color{top:20px; right:20px}
    #content .product .content .img .color div{width:20px; height:20px}
    #content .product.index .title .wrap .slash{width:5px; height:25px; margin:0px 25px}
    #content .product.index .title .wrap .tab{line-height:25px; font-size:20px}
    #content .product .wrap .item:nth-child(n){width:100%}
    #content .promotions .item .right .content{font-size:12px}
}
@media (max-width:400px){
    #content .product .content .img .color{top:15px; right:15px}
    #content .product .content .img .color div{width:15px; height:15px; margin:5px 0px 0px}
}

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0){
    
}