/* ==================列表begin================= */
.ph{transform:scale(1);padding-bottom:68%;display:block;width:100%;height:0;overflow:hidden;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;position:relative;-webkit-transition:.3s;transition:.3s;overflow:hidden;text-indent: -3000px}

/* style1 */
.project-list1 dl{margin-bottom:30px;}
.project-list1 dl dt{display:block;width:50%;font-weight:normal;position:relative;float:left}
.project-list1 dl dt .padding{padding:50px;}
.project-list1 dl dt h2{margin-bottom:20px}
.project-list1 dl dt h2 a{font-size:24px;font-weight:600;}
.project-list1 dl dt p{line-height:32px}
.project-list1 dl dd {display:block;width:50%;float:right;overflow:hidden}
.project-list1 dl dd img {transition: all .3s ease-out;transform:scale(1);}
.project-list1 dl:hover dd img {transition: all .3s ease-out;transform:scale(1.2);}

/* style2 */
.project-list2 dl{overflow: hidden;position: relative;margin-bottom:20px;border-radius: 8px }
/* .project-list2 dl:nth-child(2n+1){clear:both;margin-left:0;} */
.project-list2 dl:hover .ph{transform:scale(1.1);-webkit-transition:.3s;transition:.3s;}
.project-list2 dl dd{ width: 100%;height:100%; position: absolute;left:0;top:0;overflow: hidden;}
.project-list2 dl dd a{display: block;}
.project-list2 dl dd .mask{ background: rgba(0,0,0,.1);width: 100%;height:100%;left:0;top:0;transition: all 0.3s ease 0s; position:absolute;}
.project-list2 dl dd .mask::before, .project-list2 dl dd .mask::after { box-sizing: border-box; content: ''; position: absolute; top: 10px; left:10px;bottom:10px;right:10px;-webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center;border-radius: 8px }
.project-list2 dl dd .mask::before { border-top: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); }
.project-list2 dl dd .mask::after { border-left: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: scale3d(1, 0, 1); transform: scale3d(1, 0, 1); }
.project-list2 dl dd a:hover .mask::before,.project-list2 dl dd a:hover .mask::after { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
.project-list2 dl dd a:hover .mask{background: rgba(0,0,0,0.4);}
.project-list2 dl dd strong{font-size:16px;position: absolute;left:20px;bottom:20px;transition: all 0.3s;}
.project-list2 dl dd a:hover strong{left:30px;bottom:30px;}

/* style3 */
.project-list3 .media{position:relative;margin-bottom:50px}
.project-list3 .media .media-body {position:relative;padding:30px;margin:0;-webkit-transition:.3s;transition:.3s;}
.project-list3 .media-body strong {height:26px;margin:0 0 10px 0;overflow:hidden;display: block;}
.project-list3 .media-body strong a{font-size: 22px;font-weight: 400}
.project-list3 .media .media-body .des{height: 50px;overflow: hidden}
.project-list3 .media .media-body .line {position: absolute;bottom:0;left:0;right:0;overflow: hidden;}
.project-list3 .media .media-body .line span {float:right;width:0;height:2px;background: #fff;transition: .3s ease-in-out;}
.project-list3 .media:hover .ph{transform:scale(1.02);-webkit-transition:.3s;transition:.3s;}
.project-list3 .media:hover .media-body .line span {background: #00A2E9;width:100%;transition: .3s ease-in-out;}
.project-list3 .media:hover .media-body strong a {color:#00A2E9;}
.project-list3 .media:hover .media-body{-webkit-transition:.3s;transition:.3s;}

/* ==================列表end================= */

@media screen and (max-width:768px) {

.project-list1 dl{margin-bottom:20px}
.project-list1 dl dt,.project-list1 dl dd{width:100%;float:none}
.project-list1 dl dt .padding{padding:20px;}

.project-list .media .media-body {padding:10px;}
.project-list .media .media-body .line {margin-top:10px;}
.project-list .media .media-body strong{height:45px;}

/* style2 */
.project-list2 dl{margin-bottom:10px }
.project-list2 dl dd .mask::before, .project-list2 dl dd .mask::after {top: 10px; left:10px;bottom:10px;right:10px;}
.project-list2 dl dd h2{font-size:16px;left:10px;bottom:10px;}
.project-list2 dl dd a:hover h2{left:25px;bottom:25px;}

}