@charset "utf-8";

@media (max-width:1200px){
    .container-fluid {
        padding: 0px 3%;
    }
}
.main .com-pros {
    background: #fff;
    padding: 2rem 0px 0px;
}
.main .com-pros mark {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: rgba(35, 143, 235, 0.2);
    /* background: #193f90; */
    filter: alpha(opacity=20);
    z-index: 20;
    opacity: 0;
    transform: skewX(45deg);
    visibility: hidden;
    transition: 360ms;
}

.main .com-pros mark b {
    display: block;
    width: 46px;
    height: 46px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -23px;
    margin-top: -23px;
    z-index: 30;
}

.main .com-pros mark b:before {
    content: "";
    width: 100%;
    height: 1px;
    background: #103f87;
    position: absolute;
    left: 0;
    top: 23px;
    transform: translateX(-200px);
    -webkit-transform: translateX(-200px);
    -moz-transform: translateX(-200px);
}

.main .com-pros mark b:after {
    content: "";
    width: 1px;
    height: 100%;
    background: #103f87;
    position: absolute;
    left: 23px;
    top: 0;
    transform: translateY(-200px);
    -webkit-transform: translateY(-200px);
    -moz-transform: translateY(-200px);
}

.main .com-pros mark:before {
    content: "";
    width: 100%;
    height: 0%;
    border-left: 3px solid #103f87;
    border-right: 3px solid #103f87;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    transition: 320ms;
}

.main .com-pros mark:after {
    content: "";
    width: 0%;
    height: 100%;
    border-top: 3px solid #103f87;
    border-bottom: 3px solid #103f87;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    transition: 320ms;
}

.main .com-pros a:hover mark {
    opacity: 1;
    transform: skewX(0);
    visibility: visible;
}

.main .com-pros mark:before {
    height: 100%;
    transition: 330ms 200ms;
}

.main .com-pros a:hover  mark:after {
    width: 100%;
    transition: 330ms 200ms;
}


.main .com-pros a:hover  mark b:before {
    transition: 355ms 180ms;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
}

.main .com-pros a:hover  mark b:after {
    transition: 355ms 240ms;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
  	content:"";
}
.com-pros .listBox .sqr {
	overflow: hidden;
	width: 100%;
	position: relative;
	padding: 0 !important;
	background:#eee;
	text-align:center;
}
.com-pros a .sqr img {
	position: relative;
	width: 100%;
	transition:all .9s;
}

.com-pros .listBox {
 -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 0px;
  display:  block;
  border: 1px solid #e5e5e5;
  padding:  0px;
}
.com-pros .box .info{
	position:relative;
	margin-bottom:3rem;
}
.com-pros .box .title {
  color: #5d5d5d;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height:30px;
  background:#e5e5e5;
  text-align:center;
}