@charset "utf-8";

#content{width:100%; margin:0px; float:left}
#contact{width:100%; padding:15px 0px; float:left}
#contact form{width:50%; padding:15px 0px 0px 15px; float:left}
#contact form input[type=reset]{background:#FFF; color:#999; font-family:"Roboto", sans-serif; font-size:18px; font-weight:500; text-transform:uppercase; border:solid 1px #DBDBDB; margin:15px 15px 0px 0px; padding:10px 40px; cursor:pointer; float:left; transition:0.3s ease-in-out}
#contact form input[type=reset]:hover{background:#BBB; color:#FFF; border-color:#BBB}
#contact form input[type=submit]{background:#FFF; color:#009540; font-family:"Roboto", sans-serif; font-size:18px; font-weight:500; text-transform:uppercase; border:solid 1px #009540; margin:15px 0px 0px; padding:10px 40px; cursor:pointer; float:left; transition:0.3s ease-in-out}
#contact form input[type=submit]:hover{background:#E53D36; color:#FFF; border-color:#E53D36}
#contact form input[type=text]{width:calc(50% - 15px); color:#333; font-family:"Roboto", sans-serif; font-size:16px; border:solid 1px #DBDBDB; padding:15px; float:left}
#contact form input[type=text]:nth-child(2){margin:15px 15px 15px 0px}
#contact form input[type=text]:nth-child(3){margin:15px 0px 15px 15px}
#contact form label{width:100%; color:#E53D36; font-size:24px; font-weight:400; text-transform:uppercase; margin:0px 0px 25px; float:left}
#contact form textarea{width:100%; color:#333; font-family:"Roboto", sans-serif; font-size:16px; border:solid 1px #DBDBDB; margin:15px 0px; padding:15px; resize:none; float:left}
#contact h1{width:100%; color:#009540; font-size:36px; font-weight:normal; text-align:left; text-transform:uppercase; margin:0px 0px 20px; float:left}
#contact iframe{width:50%; height:600px; padding:0px 15px 0px 0px; float:left}
#contact .info{width:50%; padding:0px 0px 15px 15px; float:left}
#contact .info .item{width:100%; color:#333; font-size:18px; font-weight:400; margin:0px 0px 15px; transition:0.3s ease-in-out; float:left}
#contact .info .item.address{background:url(../images/others/icon_address_green.png) left center no-repeat; background-size:auto 26px; padding:2px 0px 2px 45px}
#contact .info .item.email{background:url(../images/others/icon_mail_green.png) left center no-repeat; background-size:auto 26px; padding:2px 0px 2px 45px}
#contact .info .item.fax{background:url(../images/others/icon_fax_green.png) left center no-repeat; background-size:auto 26px; padding:2px 0px 2px 45px}
#contact .info .item.phone{background:url(../images/others/icon_phone_green.png) left center no-repeat; background-size:auto 26px; padding:2px 0px 2px 45px}
#contact .info .item a{color:#333; transition:0.3s ease-in-out}
#contact .info .item a:hover{color:#009540}
#contact .info .title{width:100%; color:#E53D36; font-size:24px; font-weight:400; text-transform:uppercase; margin:0px 0px 25px; float:left}
#index{width:100%; margin:0px; float:left}
#index .construction{width:100%; background:#C7C7C7; padding:35px 0px 75px; float:left}
#index .construction .content{width:calc(100% + 30px); text-align:center; margin:0px -15px; float:left}
#index .construction .content .item{width:25%; padding:15px; float:left}
#index .construction .content .item .img{width:100%; overflow:hidden; float:left}
#index .construction .content .item .img div{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:33% 0px; float:left; transition:0.5s ease-in-out}
#index .construction .content .item:first-child .img div{padding:calc(66% + 15px) 0px}
#index .construction .content .item:hover .img div{transform:scale(1.1)}
#index .construction .title{width:100%; color:#333; font-size:36px; font-weight:400; text-align:center; text-transform:uppercase; margin:0px 0px 35px; float:left}
#index .intro{width:100%; background:linear-gradient(to right, #F1F1F1 0%, #F1F1F1 32%, #009540 32%); padding:76px 0px; float:left}
#index .intro .table{width:100%; display:table}
#index .intro .table .cell{padding:0px 0px 0px 15px; display:table-cell; vertical-align:top}
#index .intro .table .cell:first-child{width:47%; padding:0px 15px 0px 0px}
#index .intro .table .cell .more{color:#FFF; font-size:18px; font-weight:500; text-transform:uppercase; border:solid 2px #FFF; margin:60px 0px 0px; padding:15px 50px; float:left; transition:0.3s ease-in-out}
#index .intro .table .cell .more:hover{background:#FFF; color:#E53D36}
#index .intro .table .cell .content{width:100%; line-height:24px; color:#FFF; font-size:18px; font-weight:400; float:left}
#index .intro .table .cell .content *{max-width:100% !important}
#index .intro .table .cell .content p{margin:10px 0px}
#index .intro .table .cell .img{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:33% 0px; float:left}
#index .intro .table .cell .title{width:100%; color:#FFF; font-size:36px; font-weight:400; text-transform:uppercase; margin:0px 0px 30px; float:left}
#index .news{width:100%; background:#F1F1F1; text-align:center; padding:60px 0px; float:left}
#index .news .content{width:calc(100% + 30px); text-align:center; margin:0px -15px; display:table}
#index .news .content .item{width:33.33%; background:#FFF; border-right:solid 15px #F1F1F1; border-left:solid 15px #F1F1F1; display:table-cell; vertical-align:top}
#index .news .content .item .bottom{width:100%; padding:30px; float:left}
#index .news .content .item .bottom .name{width:100%; color:#B4B4B4; font-size:18px; text-align:left; margin:0px; float:left; transition:0.3s ease-in-out}
#index .news .content .item:hover .bottom .name{color:#E53D36}
#index .news .content .item .bottom .summary{width:100%; line-height:23px; color:#333; font-size:16px; text-align:left; margin:20px 0px 0px; float:left}
#index .news .content .item .img{width:100%; overflow:hidden; float:left}
#index .news .content .item .img div{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:41% 0px; float:left; transition:0.5s ease-in-out}
#index .news .content .item:hover .img div{transform:scale(1.1)}
#index .news .more{background:#F1F1F1; color:#009540; font-size:18px; font-weight:500; text-transform:uppercase; border:solid 2px #009540; margin:50px 0px 0px; padding:15px 50px; transition:0.3s ease-in-out}
#index .news .more:hover{background:#E53D36; color:#FFF; border-color:#E53D36}
#index .news .title{width:100%; color:#333; font-size:36px; font-weight:400; text-align:center; text-transform:uppercase; margin:0px 0px 60px; float:left}
#index .product{width:100%; padding:55px 0px 75px; float:left}
#index .product .content{width:calc(100% + 30px); margin:0px -15px; overflow:hidden; float:left}
#index .product .content #list_product{}
#index .product .content #list_product .owl-item{float:left}
#index .product .content #list_product .owl-item .item{width:100%; padding:0px 15px; float:left}
#index .product .content #list_product .owl-item .item .img{width:100%; border:solid 1px #DBDBDB; float:left}
#index .product .content #list_product .owl-item .item .img div{width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:50% 0px; float:left}
#index .product .content #list_product .owl-item .item .name{width:100%; color:#333; font-size:18px; font-weight:400; text-align:center; margin:30px 0px 0px; float:left; transition:0.3s ease-in-out}
#index .product .content #list_product .owl-item .item:hover .name{color:#E53D36}
#index .product .title .next{width:24px; height:45px; background-color:#B2B2B2; background-image:url(../images/others/icon_next.png); background-position:center; background-repeat:no-repeat; background-size:100% 100%; position:absolute; top:calc(50% - 22.5px); right:0px; transition:0.3s ease-in-out}
#index .product .title .prev{width:24px; height:45px; background-color:#B2B2B2; background-image:url(../images/others/icon_prev.png); background-position:center; background-repeat:no-repeat; background-size:100% 100%; position:absolute; top:calc(50% - 22.5px); left:0px; transition:0.3s ease-in-out}
#index .product .title .next:hover, #index .product .title .prev:hover{background-color:#010101}
#index .product .title{width:100%; color:#333; font-size:36px; font-weight:400; text-align:center; text-transform:uppercase; margin:0px 0px 55px; position:relative; float:left}
#index .product .wrapper{position:relative}
#news{width:100%; padding:15px 0px; float:left}
#news .content{}
#news .content .detail{width:calc(100% - 350px); color:#333; font-size:14px; text-align:justify; padding:0px 15px 0px 0px; position:relative; float:left; clear:both}
#news .content .detail *{max-width:100% !important; margin:10px 0px; padding:0px}
#news .content .detail h1{width:100%; color:#009540; font-size:36px; font-weight:normal; text-align:left; text-transform:uppercase; margin:0px 0px 20px; float:left}
#news .content .detail img{height:auto !important; margin:10px auto}
#news .content .detail table{margin:10px auto}
#news .content .detail ol, #news .content .detail ul{padding:0px 0px 0px 40px}
#news .content .item{width:calc((100% - 30px) / 2); margin:15px 0px 0px 15px; padding:15px; border-right:solid 1px #CCC; border-bottom:solid 1px #CCC; transition:0.3s ease-in-out; float:left}
#news .content .item:nth-child(odd){margin:15px 0px 0px; clear:left}
#news .content .item:nth-child(even){clear:right}
#news .content .item:hover{box-shadow:0px 0px 5px #999}
#news .content .item .img{width:100px; height:100px; background-position:center; background-repeat:no-repeat; background-size:cover; margin:0px 15px 0px 0px; position:relative; float:left}
#news .content .item .img:before{content:""; border:1px solid #C9C9D5; position:absolute; top:5px; right:5px; bottom:5px; left:5px}
#news .content .item .description{line-height:20px; color:#555; font-size:13px}
#news .content .item .name{color:#333; font-size:15px; font-weight:bold; transition:0.3s ease-in-out}
#news .content .item:hover .name{color:#E53D36}
#news .content .null{width:100%; height:200px; color:#555; font-size:14px; float:left}
#news .content .others{width:350px; padding:0px 0px 0px 15px; float:left}
#news .content .others .items{width:100%; float:left}
#news .content .others .items .item:nth-child(n){width:100%; margin:15px 0px 0px; padding:0px 0px 15px; border-right:none}
#news .content .others .items .item:last-child{border:none}
#news .content .others .items .item:hover{box-shadow:none}
#news .content .others .items .item .img{width:70px; height:70px; overflow:hidden}
#news .content .others .items .item .img:after{content:""; width:50%; height:100%; background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); position:absolute; top:0px; left:-75%; display:block; transform:skewX(-25deg)}
#news .content .others .items .item:hover .img:after{animation:shine 0.75s}
#news .content .others .items .item .name{}
#news .content .others .title{width:100%; border-bottom:solid 1px #C7C7C7; margin:0px; position:relative; float:left}
#news .content .others .title div{color:#009540; font-size:18px; font-weight:bold; border-bottom:solid 1px #009540; margin:0px 0px -1px; float:left}
#paginator{clear:both; text-align:right; font-size:12px !important; margin-top:10px}
#paginator .paginationControl{margin:10px 0px 0px; float:right}
#paginator .paginationControl a:link, #paginator .paginationControl a:visited{width:25px; height:25px; line-height:25px; background:#FFF; color:#666; font-size:12px; font-weight:bold; text-align:center; text-decoration:none; border:solid 1px #CCC; margin:0px 2px; padding:0px; display:inline; float:left; transition:0.3s ease-in-out}
#paginator .paginationControl a:hover{background:#009540; color:#FFF; border-color:#009540}
#paginator .paginationControl a.disabled{cursor:default}
#paginator .paginationControl a.selected{background:#E53D36; color:#FFF; border-color:#E53D36; cursor:default}
#paginator .paginationControl a.special{line-height:22px}
#paginator .paginationControl a img{margin:7px 0px 0px}
#product{width:100%; padding:15px 0px; float:left}
#product h1{width:100%; color:#333; font-size:36px; font-weight:400; text-align:center; text-transform:uppercase; margin:35px 0px; float:left}
#product .content{}
#product .content .item{width:calc((100% - 45px) / 4); margin:15px 0px 0px 15px; padding:15px; border:solid 1px #CCC; transition:0.3s ease-in-out; float:left}
#product .content .item:nth-child(4n + 1){margin:15px 0px 0px; clear:left}
#product .content .item:nth-child(4n){clear:right}
#product .content .item:hover{box-shadow:0px 0px 5px #999}
#product .content .item .img{width:100%; position:relative; overflow:hidden; float:left}
#product .content .item .img 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}
#product .content .item:hover .img div{transform:scale(1.2)}
#product .content .item .name{width:100%; color:#1458A8; font-size:14px; text-align:center; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding:15px 0px 0px; float:left; transition:0.3s ease-in-out}
#product .content .item:hover .name{color:#555}
#product .content .left{width:calc(100% - 350px); padding:0px 15px 0px 0px; float:left}
#product .content .middle{width:100%; font-size:14px; text-align:justify; margin:15px 0px; position:relative; float:left; clear:both}
#product .content .middle *{max-width:100% !important; margin:10px 0px; padding:0px}
#product .content .middle img{height:auto !important; margin:10px auto}
#product .content .middle table{margin:10px auto}
#product .content .middle .contact{width:100%; color:#555; font-size:16px; margin:20px 0px 0px; float:left}
#product .content .middle .contact a{color:#C00; font-size:13px; font-weight:bold; text-decoration:none; border:solid 1px #C00; border-radius:20px; margin:0px; padding:11.5px 46px; transition:0.3s ease-in-out; position:relative; transition:0.3s ease-in-out}
#product .content .middle .contact a:hover{background:#C00; color:#FFF}
#product .content .middle .contact a span{position:relative; z-index:2}
#product .content .middle .description{width:100%; border-bottom:solid 1px #C7C7C7; margin:0px 0px 15px; position:relative; float:left}
#product .content .middle .description div{color:#009540; font-size:18px; font-weight:bold; border-bottom:solid 1px #009540; margin:0px 0px -1px; float:left}
#product .content .null{width:100%; height:200px; color:#555; font-size:14px; float:left}
#product .content .top{width:100%; float:left}
#product .content .top .img{width:300px; max-width:100%; float:left}
#product .content .top .img .show{width:100%; border:solid 1px #CCC; padding:15px; overflow:hidden; cursor:pointer; transition:0.3s ease-in-out; display:none; float:left}
#product .content .top .img .show:first-child{display:block}
#product .content .top .img .show:hover{box-shadow:0px 0px 5px #CCC}
#product .content .top .img .show > div{width:100%; position:relative; overflow:hidden; float:left}
#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}
#product .content .top .img:hover .show > div > div{transform:scale(1.2)}
#product .content .top .info{width:calc(100% - 315px); margin:0px 0px 0px 15px; float:left}
#product .content .top .info h1{width:100%; color:#555; font-size:30px; font-weight:normal; margin:0px; float:left}
#product .content .top .info .description{width:100%; line-height:25px; color:#555; font-size:14px; margin:20px 0px 0px; float:left}
#product .content .top .info .gallery{width:100%; border-collapse:collapse; margin:0px 0px 15px; display:table}
#product .content .top .info .gallery > div{border:solid 1px #CCC; padding:5px; display:table-cell; cursor:pointer; transition:0.3s ease-in-out}
#product .content .top .info .gallery > div:first-child, #product .content .top .info .gallery > div:hover{background:#1458A8}
#product .content .top .info .gallery > div > div{content:""; width:100%; background-position:center; background-repeat:no-repeat; background-size:cover; padding:50%; float:left}
#product .content .others{width:350px; padding:0px 0px 0px 15px; float:left}
#product .content .others .items .item{width:100%; border-top:none; border-right:none; border-left:none; margin:15px 0px 0px; padding:0px 0px 15px; border-right:none}
#product .content .others .items .item:last-child{border:none}
#product .content .others .items .item:hover{box-shadow:none}
#product .content .others .items .item .description{line-height:20px; color:#555; font-size:13px}
#product .content .others .items .item .img{width:70px; height:70px; background-position:center; background-repeat:no-repeat; background-size:cover; margin:0px 15px 0px 0px; position:relative; overflow:hidden; float:left}
#product .content .others .items .item .img:before{content:""; border:1px solid #C9C9D5; position:absolute; top:5px; right:5px; bottom:5px; left:5px}
#product .content .others .items .item .img:after{content:""; width:50%; height:100%; background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); position:absolute; top:0px; left:-75%; display:block; transform:skewX(-25deg)}
#product .content .others .items .item:hover .img:after{animation:shine 0.75s}
#product .content .others .items .item .name{width:unset; color:#333; font-size:15px; font-weight:bold; text-align:left; padding:0px; float:none}
#product .content .others .title{width:100%; border-bottom:solid 1px #C7C7C7; position:relative; float:left}
#product .content .others .title div{color:#009540; font-size:18px; font-weight:bold; border-bottom:solid 1px #009540; margin:0px 0px -1px; float:left}

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

@media (max-width:1700px){
    #index .intro .table .cell .content{line-height:22px; font-size:16px}
    #index .intro .table .cell .more{margin:40px 0px 0px}
    #index .intro .table .cell .title{font-size:30px; margin:0px 0px 20px}
}
@media (max-width:1500px){
    #index .construction .content .item{padding:7.5px}
    #index .construction .content .item:first-child .img div{padding:calc(66% + 7.5px) 0px}
    #index .intro .table .cell .content{line-height:21px; font-size:15px}
    #index .intro .table .cell .more{font-size:16px; margin:20px 0px 0px; padding:15px 40px}
    #index .intro .table .cell .title{margin:0px 0px 15px}
}
@media (max-width:1300px){
    #index .intro .table .cell .content{line-height:20px; font-size:13px}
    #index .intro .table .cell .more{font-size:15px; margin:10px 0px 0px; padding:10px 30px}
    #index .intro .table .cell .title{font-size:24px; margin:0px 0px 10px}
}
@media (max-width:1100px){
    #index .intro .table .cell .content{line-height:19px; font-size:13px}
    #index .intro .table .cell .more{font-size:12px; margin:0px; padding:5px 20px}
    #index .intro .table .cell .title{font-size:20px; margin:0px}
}
@media (max-width:1000px){
    #contact form{padding:15px 0px 0px 15px}
    #contact iframe{width:100%; margin:0px 0px 15px}
    #contact .info{padding:15px 15px 0px 0px}
    #index .intro{background:linear-gradient(to bottom, #F1F1F1 0%, #F1F1F1 40%, #009540 40%)}
    #index .intro .table{float:left}
    #index .intro .table .cell{width:100%; padding:15px 0px 0px; float:left}
    #index .intro .table .cell:first-child{width:100%; padding:0px 0px 15px}
    #index .intro .table .cell .content{line-height:22px; font-size:16px}
    #index .intro .table .cell .more{font-size:18px; margin:40px 0px 0px; padding:15px 50px; float:right}
    #index .intro .table .cell .title{font-size:30px; margin:0px 0px 20px}
    #index .product .content #list_product .owl-item .item .name{font-size:16px; margin:20px 0px 0px}
    #index .product .title{font-size:30px}
    #index .product .title .next, #index .product .title .prev{width:16px; height:30px; top:calc(50% - 15px)}
    #news .content .detail h1{font-size:30px}
    #product .content .item{width:32%}
    #product .content .item:nth-child(n){margin:2% 0px 0px 2%; clear:none}
    #product .content .item:nth-child(3n+1){margin:2% 0px 0px 0px; clear:left}
    #product .content .item:nth-child(3n){clear:right}
    #product .content .top .img{float:left}
    #product .content .top .info{width:100%; margin:15px 0px 0px}
    #product .content .top .info .gallery{width:300px; max-width:100%}
}
@media (max-width:900px){
    #index .construction .content .item{width:50%; padding:15px}
    #index .construction .content .item:nth-child(3){clear:right}
    #index .construction .content .item:nth-child(4){clear:left}
    #index .construction .content .item:first-child .img div{padding:calc(66% + 15px) 0px}
}
@media (max-width:850px){
    #index .construction .title{font-size:30px; margin:0px 0px 30px}
    #index .news{padding:45px 0px}
    #index .news .content .item{width:100%; max-width:400px; border:solid 15px #F1F1F1; margin:0px auto; display:block}
    #index .news .more{font-size:16px; margin:30px 0px 0px; padding:10px 40px}
    #index .news .title{font-size:30px; margin:0px 0px 30px}
    #product h1{font-size:30px; margin:30px 0px}
    #product .content .left, #product .content .others{width:100%; padding:0px; clear:both}
    #product .content .top .img{float:left}
    #product .content .top .info{width:calc(100% - 315px); margin:0px 0px 0px 15px}
    #product .content .top .info .gallery{width:100%; max-width:none}
}
@media (max-width:800px){
    #contact form, #contact .info{width:100%; padding:15px 0px}
    #index .category .content .item:nth-child(n){width:calc((100% - 15px) / 2); margin:15px 7.5px 0px}
    #index .category .content .item:nth-child(odd){margin-left:0px; clear:left}
    #index .category .content .item:nth-child(even){margin-right:0px; clear:right}
    #news .content .detail, #news .content .others{width:100%}
    #news .content .detail{padding:0px 0px 15px}
    #news .content .others{padding:15px 0px 0px}
    #news .content .item:nth-child(n){width:100%; margin:15px 0px 0px; clear:both}
    #product .content .item:nth-child(n){width:calc((100% - 30px) / 3); margin:15px 0px 0px 15px; clear:none}
    #product .content .item:nth-child(3n + 1){margin:15px 0px 0px; clear:left}
    #product .content .item:nth-child(3n){clear:right}
}
@media (max-width:750px){
    #content .wrapper #index{border-radius:5px}
    #index .intro{background:linear-gradient(to bottom, #F1F1F1 0%, #F1F1F1 30%, #009540 30%)}
}
@media (max-width:700px){
    #index .construction .content .item{padding:7.5px}
    #index .construction .content .item:first-child .img div{padding:calc(66% + 7.5px) 0px}
    #product .content .top .img{float:left}
    #product .content .top .info{width:100%; margin:15px 0px 0px}
    #product .content .top .info .gallery{width:300px; max-width:100%}
}
@media (max-width:600px){
    #index .intro{padding:50px 0px}
    #news .content .detail h1{font-size:28px}
    #product .content .item:nth-child(n){width:calc((100% - 15px) / 2); margin:15px 0px 0px 15px}
    #product .content .item:nth-child(odd){margin:15px 0px 0px; clear:left}
    #product .content .item:nth-child(even){clear:right}
}
@media (max-width:550px){
    #index .intro{background:linear-gradient(to bottom, #F1F1F1 0%, #F1F1F1 25%, #009540 25%)}
    #index .intro .table .cell .content{line-height:21px; font-size:15px}
    #index .intro .table .cell .more{font-size:16px; margin:30px 0px 0px; padding:10px 40px}
    #index .intro .table .cell .title{font-size:26px; margin:0px 0px 15px}
}
@media (max-width:500px){
    #index .construction .title{font-size:24px; margin:0px 0px 15px}
    #index .intro{padding:40px 0px}
    #index .news{padding:30px 0px}
    #index .news .more{font-size:14px; margin:20px 0px 0px; padding:10px 30px}
    #index .news .title{font-size:24px; margin:0px 0px 15px}
    #index .product .title{font-size:24px}
    #index .product .title .next, #index .product .title .prev{width:14px; height:26px; top:calc(50% - 13px)}
    #news .content .detail h1{font-size:24px}
    #product h1{font-size:24px; margin:15px 0px}
}
@media (max-width:450px){
    #contact form input[type=text]{width:100%; margin:15px 0px !important}
}
@media (max-width:430px){
    #index .intro .table .cell .content{line-height:20px; font-size:14px}
    #index .intro .table .cell .more{font-size:14px; margin:20px 0px 0px; padding:10px 30px}
    #index .intro .table .cell .title{font-size:22px; margin:0px 0px 10px}
    #news .content .item img{width:25%}
    #product .content .item:nth-child(n){width:100%; margin:15px 0px 0px; clear:both}
}
@media (max-width:400px){
    #index .construction .content .item{width:100%; clear:both}
    #index .intro{background:linear-gradient(to bottom, #F1F1F1 0%, #F1F1F1 20%, #009540 20%); padding:30px 0px}
    #news .content .detail h1{font-size:24px}
}
/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0){

}