@charset "utf-8";



.solutions{ margin:0 -1%;}

.value{padding: 70px 0 55px;text-align:center;}
.value-title{ text-align:center; margin-bottom: 26px;}
.value-title small{display:block;text-align:center;color: #ed283a;font-size: 42px;line-height: 1;font-family: SweetSansPro;margin-bottom:10px;text-transform: uppercase;}
.value-title h2{line-height:normal;text-align:center;color: #333;font-size:32px;margin-bottom:20px;font-weight:normal;}
.value-title span{/* display:block; */width: 60px;/* height:14px; *//* background:url(../images/donw1.jpg) center no-repeat; */margin:auto;}
.value p{ color:#5d5d5d; font-size:14px; width:708px; margin:auto;line-height: 1.8;}
.suremore{margin:auto;margin-top: 28px;width:134px;height: 40px;border:2px solid #ed283a;overflow:hidden;position:relative;}
.suremore a{display:block;line-height:37px;color:#ed283a;text-align:center;font-size:14px;position:relative;z-index:5;}
.suremore:before{ content:""; width:100%; height:100%; position:absolute; left:0; top:100%; background:#ed283a; transition:360ms;}
.suremore:hover:before{ top:0;}
.suremore:hover a{ color:#fff;}
.solutes{ width:33.33333%; float:left; position:relative;}
.solutes img{ display:block; width:100%; height:auto; line-height:0;}
.solutes figcaption{ position:absolute; left:0; top:50%; width:100%; margin-top:-83px; text-align:center;}
.solutes figcaption h2{ color:#fff; font-size:24px; font-weight:normal; text-align:center;}
.solutes figcaption small{ display:block; text-align:center; line-height:normal; color:#fff; font-size:14px; }
.solutes figcaption a{ display:block; width:39px; height:39px; border:2px solid #fff; position:relative; margin:auto; margin-top:64px;}
.solutes figcaption a:before{ content:""; width:7px; height:13px; background:url(../images/next1.png) center no-repeat; position:absolute; left:16px; top:14px; transition:300ms;}
.solutes figcaption a:hover:before{ left:19px;}
.solute-info{width: 31.333333%;margin: 0 1%;float:left;position:relative;overflow:hidden;}
.solute-info figure{ display:block; line-height:normal; overflow:hidden;}
.solute-info figure img{ display:block; line-height:0; width:100%; height:auto;}
.solute-info figcaption{ position:absolute; left:0; bottom:0; width:100%; transition:400ms; padding-top: 43px; background:url(../images/boxbg.png) repeat-x; padding-bottom: 24px;}
.solute-info figcaption h4{color:#ffffff;font-size: 16px;font-weight:normal;line-height:normal;width:192px;padding-bottom: 12px;border-bottom:2px solid #fff;float:left;margin-left: 30px;}
.solute-info figcaption b{display:block;width:13px;height:7px;background:url(../images/top.png) center no-repeat;float:right;margin-right: 30px;margin-top:21px;}
.solute-info .sulute-wr{position:absolute;left:0;top:-100%;width:100%;height:100%;background: rgba(0, 0, 0, 0.7);background:#000\9;filter:alpha(opacity=50);visibility:hidden;transition:420ms 0ms;}
.solute-info .sulute-wr mark{ background:none; position:absolute; left:0; top:50%; width:100%; text-align:center; margin-top:-130px;}
.solute-info .sulute-wr mark h3{color:#ffffff;font-size: 22px;text-align:center;line-height:normal;font-weight:normal;padding-bottom:20px;position:relative;margin-bottom:32px;}
.solute-info .sulute-wr mark h3:before{content:"";width:46px;height:2px;background: #ffffff;position:absolute;left:50%;margin-left:-23px;bottom:0;}
.solute-info .sulute-wr mark p{color:#ffffff;text-align:center;font-size: 14px;line-height: 1.8;height: 68px;letter-spacing: 0.5px;width: 70%;margin:auto;margin-bottom: 73px;overflow:hidden;}
.solute-info .sulute-wr mark .checkmore{width:122px;height: 34px;border:2px solid #fff;margin:auto;position:relative;overflow:hidden;transition:300ms;}
.solute-info .sulute-wr mark .checkmore a{display:block;text-align:center;line-height: 30px;color:#ffffff;position:relative;z-index:5;font-size: 14px;letter-spacing: 0.5px;}
.solute-info .sulute-wr mark .checkmore a:hover{color:#15599F;}
.solute-info .sulute-wr mark .checkmore:after{ content:""; position:absolute; width:100%; height:100%; left:0; top:100%; background:#fff; transition:320ms;}
.solute-info .sulute-wr mark .checkmore:hover{ border-color:#fff; }
.solute-info .sulute-wr mark .checkmore:hover:after{ top:0;}
.solute-info:hover figcaption{ bottom:-30px;  visibility:hidden;}
.solute-info:hover .sulute-wr{ opacity:1; visibility:visible; top:0; transition:450ms 160ms;}