body{font-family: 'Mulish', sans-serif;font-size: 14px;font-weight: 400;color:#444;}
a{text-decoration: none;transition: all 0.3s linear;}

.primbg {background-color: #ec4c4c;}
.primbglight {background-color: #e0cece;}
.primbglight2 {background-color: #eee8e8;}
.graybg {background-color: #e1e1e1;}
.boxshadow{box-shadow: 0px 1px 3px rgba(0,0,0,0.2);}

.logo{display: block;}
.logo img {width: 160px;}

.topbox {display: block;padding-top: 9px;}
.topbox a {font-weight: 400;color:#777;margin-left: 24px;position: relative;}
.topbox a span{font-weight: 600;color:#000;}
.topbox a::before{position: absolute;content: '';left:0px;bottom: -3px;width: 0%;height: 1px;background-color: #ec4c4c;transition: all 0.3s cubic-bezier( 0.86, 0.09, 0.92, 0.03 ) ;}
.topbox a:hover::before{width:100%}
.topbox a:hover{color:#ec4c4c;}
.topbox a.act{color:#ec4c4c;}
.topbox a.act::before{width:100%}

.navi{margin-top: 30px;}
.navi a{font-size:17px;font-weight: 600;color:#444;margin-left: 30px;position: relative;}
.navi a:hover{color:#ec4c4c;}
.navi a::before{position: absolute;content: '';left:0px;bottom: -3px;width: 0%;height:2px;background-color: #ec4c4c;transition: all 0.3s cubic-bezier( 0.86, 0.09, 0.92, 0.03 ) ;}
.navi a:hover::before{width:100%}


.herobox {display: block;position: relative;min-height: 200px;}
.box-a {background-image: url(../img/hero/3.jpg);background-size: cover;}
.box-b {background-image: url(../img/hero/2.jpg);background-size: cover;}
.box-c {background-image: url(../img/hero/1.jpg);background-size: cover;}

.boxcontent {position: absolute;bottom:0px;left: 0px;width: 100%;height:40px;background-color: rgba(255,255,255,0.35);transition: all 0.3s linear;overflow: hidden;}
.herobox .boxcontent h3{font-weight: 700;font-size:17px;color:#000;margin-top: 11px;margin-left: 16px;transition: all 0.3s linear;}
.herobox .boxcontent h3 span{font-weight:400;font-size:14px;display: block;margin-top: 5px;line-height: 20px;}
.herobox:hover .boxcontent {height:70%;background-color:rgba(255,64,64,0.8)}
.herobox:hover .boxcontent h3 {color:#fff;margin-top: 16px;}

h3.title {display: block;font-size:23px;font-weight:900;color:#000;margin:30px 0px 1px 0px;line-height:38px;text-transform: uppercase;}
p.graytx {display: block;font-size:16px;font-weight:500;color:#777;margin-top: 2px;}

.proditems {display:block;text-align:center;margin-bottom:60px;padding:15px;background-color:#e8dede;user-select:none;}
.proditems img{width:100%;-webkit-transition: all 0.3s linear;-o-transition: all 0.3s linear;transition: all 0.3s linear;border-bottom: solid 3px rgba(255,64,64,1);}
.proditems label{display:block;text-align:center;font-size:16px;font-weight:400;color:#232323;margin-top:12px;}
.proditems label span{font-weight:700;}
.proditems:hover img {transform:scale(105%)}

.about {display: block;}
.about h3 {display: block;font-size:23px;font-weight:700;color:#000;}
.about h4 {display: block;font-size:20px;font-weight:700;color:#000;}
.about p {display: block;font-size:17px;font-weight:500;color:#000;}