.CaseBox .ImgBox{display:table-cell; vertical-align:middle; text-align:center;} .CaseBox .clearfix:before, .clearfix:after { content: ""; display: block; height: 0; overflow: hidden; } .CaseBox .clearfix:after { clear: both; } .CaseBox .clearfix { zoom: 1; } .CaseBox { -webkit-text-size-adjust: none; -webkit-font-smoothing: subpixel-antialiased; font-size: 14px; line-height: 1.625; font-weight: 400; color: #41516A; } .CaseBox *, .CaseBox *::before, .CaseBox *::after { box-sizing: border-box; } .CaseBox [class^="linear-icon-"]::before, .CaseBox [class*=" linear-icon-"]::before { font-family: 'Linearicons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Enable Ligatures ================ */ -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga=1"; -moz-font-feature-settings: "liga"; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*caseMenu*/ .CaseBox .caseMenu {padding:0; margin:0 auto; width:94%;height:32px;margin-top:35px;} .CaseBox .caseMenu .container{width:100%;} .CaseBox .caseMenu ul { text-align:center; padding:0px 0px 0px 0px; margin:0; list-style:none; border:0; float:left; } .CaseBox .caseMenu ul li {height:32px;float:left; margin:0px 5px 15px 0px; border:0;} .CaseBox .caseMenu ul li a {margin:0; padding:0px 15px; display:block;font-family:"微软雅黑","Microsoft YaHei"; color:#909090; font-size:12px;line-height:32px;} .CaseBox .caseMenu ul li a:hover {background-color:#61cdda;color:#FFF;} .CaseBox .caseMenu ul li a.active {background-color:#61cdda;color:#FFF;} @media (min-width: 1200px) { .CaseBox .caseMenu ul li a {padding:0px 28px;font-size:14px;line-height:32px;} } @media (min-width: 1200px) { .CaseBox .caseMenu {width:1270px;} .CaseBox .caseMenu .container{width:1200px;} } /*caseLyBox*/ .CaseBox .caseLyBox{min-height: 1px;width:94%;margin:0 auto;} .CaseBox .caseLy{padding:0px 0px 0px 0px; margin:0 auto; margin-top:25px; width:100%; display:none;} .CaseBox .list{padding:0px 0px 0px 0px; margin:0 auto; margin-top:25px; width:100%;} .row {display: block;flex-wrap: wrap;margin-right: -15px; margin-left: -15px;} .CaseBox .caseTu{width:100%; padding:0px 0; float:left;} .CaseBox .caseTu .caseTuBox{ border:1px solid #e9e9e9;margin-right:15px;margin-left:15px;margin-bottom:15px;margin-top:15px;} .CaseBox .caseTu .bt{ display:block;} .CaseBox .caseTu .bt .title{border-bottom:1px solid #f6f6f6;font-family:"微软雅黑","Microsoft YaHei";} .CaseBox .caseTu .bt .title .t1{overflow:hidden;} .CaseBox .caseTu .bt .title .t1 a{ color:#333333;} .CaseBox .caseTu .bt .title .t2{ color:#a0a0a0; overflow:hidden;} .CaseBox .caseTu .bt{padding:5.357142857142857vw 0 13.75vw 0;} .CaseBox .caseTu .bt .title{margin:0 6.071428571428571vw 0 6.071428571428571vw;} .CaseBox .caseTu .bt .title .t1{font-size:4.285714285714286vw;line-height:8.035714285714286vw;height:8.035714285714286vw;} .CaseBox .caseTu .bt .title .t2{ font-size:3.214285714285714vw;line-height:8.035714285714286vw;height:8.035714285714286vw;margin-bottom:2.678571428571429vw;} @media (min-width: 557px) { .CaseBox .caseTu{width:50%;} .CaseBox .caseTu .bt{padding:1.818181818181818vw 0 6.493506493506494vw 0;} .CaseBox .caseTu .bt .title{margin:0 2.597402597402597vw 0 2.597402597402597vw;} .CaseBox .caseTu .bt .title .t1{font-size:1.948051948051948vw;line-height:3.896103896103896vw;height:3.896103896103896vw;} .CaseBox .caseTu .bt .title .t2{ font-size:1.558441558441558vw;line-height:3.896103896103896vw;height:3.896103896103896vw;margin-bottom:1.298701298701299vw;} } @media (min-width: 768px) { .row {display: flex;} .CaseBox .caseTu{width:33.33%;} .CaseBox .caseTu .bt{padding:1.770833333333333vw 0 4.427083333333333vw 0;} .CaseBox .caseTu .bt .title{margin:0 1.979166666666667vw 0 1.979166666666667vw;} .CaseBox .caseTu .bt .title .t1{font-size:1.354166666666667vw;line-height:2.291666666666667vw;height:2.291666666666667vw;} .CaseBox .caseTu .bt .title .t2{ font-size:1.041666666666667vw;line-height:2.083333333333333vw;height:2.083333333333333vw;margin-bottom:1.197916666666667vw;} } @media (width: 1920px) { .row {display: flex;} .CaseBox .caseTu{width:33.33%;} .CaseBox .caseTu .bt{padding:34px 0px 20px 0px;} .CaseBox .caseTu .bt .title{margin:0 38px 0 38px;} .CaseBox .caseTu .bt .title .t1{font-size:26px;line-height:44px;height:44px;} .CaseBox .caseTu .bt .title .t2{ font-size:20px;line-height:40px;height:40px;margin-bottom:23px;} } /*caption */ .CaseBox .aboutBdiv2 a .caption {position: absolute;top: 0;bottom: 0;right: 0;left: 0;display: flex;flex-direction: column;justify-content: center;padding: 15px; background-color: rgba(128, 222, 234, 0.6);transition: 250ms ease-in-out;} .CaseBox .aboutBdiv2 a .caption > * {color: #fff;} .CaseBox .aboutBdiv2 a .caption > * + * {margin-top: 5px;} .CaseBox .aboutBdiv2 a{position: relative;display: block;text-align: center;overflow: hidden;cursor: pointer;width: 100%;} .CaseBox .aboutBdiv2 a img {width: 100%;} .CaseBox .aboutBdiv2 a .icon {font-size: 30px;} .CaseBox .aboutBdiv2 a .arrow-right {font-size: 30px;} .CaseBox .aboutBdiv2 a .list-inline-tag {font-size: 12px;font-style: italic;} .CaseBox .aboutBdiv2 a .label-custom {position: absolute;z-index: 11;top: 18px;left: 18px;padding: 2px 7px;font-size: 12px;font-style: italic;background-color: #fff;border-radius: 4px;color: #000;} .CaseBox .aboutBdiv2 a img {width: 100%;height: auto;max-width: 100%;} .CaseBox .aboutBdiv2 a .caption {opacity: 0;transform: scale(0.8);} .CaseBox .aboutBdiv2 a .hover-top-element {opacity: 0;transform: translateY(30px);transition: 250ms 320ms linear;} .CaseBox .aboutBdiv2 a .hover-bottom-element {opacity: 0;transform: translateY(-40px);transition: 250ms 320ms linear;} .CaseBox .aboutBdiv2 a:hover .hover-top-element, .CaseBox .aboutBdiv2 a:hover .hover-bottom-element {opacity: 1;transform: translateY(0);} .CaseBox .aboutBdiv2 a .icon {display: inline-block;line-height: 1;text-align: center;} .CaseBox .aboutBdiv2 a .icon:before{display: inline-block;font-weight: 400;font-style: normal;speak: none;text-transform: none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;} .CaseBox .aboutBdiv2 a .linear-icon-picture:before {content:"";background:url(../images/icon_pic.png) no-repeat center center;background-size:30px; width:30px;height:30px;} .CaseBox .aboutBdiv2 a .list-inline-tag li {display: inline-block;font-size: 14px;font-style: italic; line-height:22px;} .CaseBox .aboutBdiv2 a .linear-icon-plus:before {content: ""; background:url(../images/icon_plus.png) no-repeat center center;background-size:30px; width:30px;height:30px;} .CaseBox .aboutBdiv2 a h5, .CaseBox .aboutBdiv2 a .heading-5 {font-size: 16px;font-weight: 600;line-height: 1.45;} @media (min-width: 768px) { .CaseBox .aboutBdiv2 a h5, .CaseBox .aboutBdiv2 a .heading-5 {font-size: 20px;line-height: 1.5;} } .CaseBox .aboutBdiv2 a .divider {display: block;width: 100%;height: 1px;background: #ececee;} .CaseBox .aboutBdiv2 a .caption .divider {position: relative;margin-top: 8px;margin-bottom: 8px;max-width: 116px;margin-left: auto;margin-right: auto;} .CaseBox .aboutBdiv2 a .caption .divider {background: transparent;} .CaseBox .aboutBdiv2 a .caption .divider:before {position: absolute;content: "";display: inline-block;left: 50%;right: 50%;height: 1px;background-color: #fff;transition: 250ms 280ms ease-in-out;} .CaseBox .aboutBdiv2 a .small {display: block;font-size: 14px;line-height: 1.71429;} @media (min-width: 1200px) { .CaseBox .aboutBdiv2 a .small {font-size: 16px;line-height: 1.625;} } @media (min-width: 1200px) { .CaseBox .aboutBdiv2 a .icon {font-size: 40px;} .CaseBox .aboutBdiv2 a .linear-icon-picture:before {content:"";background:url(../images/icon_pic.png) no-repeat center center; background-size:40px; width:40px;height:40px;} .CaseBox .aboutBdiv2 a .linear-icon-plus:before {content: "";background:url(../images/icon_plus.png) no-repeat center center; background-size:40px; width:40px;height:40px;} .CaseBox .aboutBdiv2 a .caption {padding: 50px 55px 45px;} .CaseBox .aboutBdiv2 a .caption > * + * {margin-top: 10px;} .CaseBox .aboutBdiv2 a .caption .divider {margin-top: 19px;margin-bottom: 19px;} .CaseBox .aboutBdiv2 a .arrow-right {position: absolute;right: 18px;bottom: 13px;} } /*caption hover*/ .CaseBox .aboutBdiv2 a:hover .caption {opacity: 1;transform: scale(1);} .CaseBox .aboutBdiv2 a:hover img {filter: blur(3px);} .CaseBox .aboutBdiv2 a:hover .caption .hover-top-element, .CaseBox .caseMenu ul li a:hover .caption .hover-bottom-element {opacity: 1;transform: translateY(0);} .CaseBox .aboutBdiv2 a:hover .caption .divider:before {left: 0;right: 0;} @keyframes hover-blur { 100% { filter: blur(3px);} } /*readmore*/ .CaseBox .readmore { width:100%;margin:0 auto;text-align:center;margin-bottom:77px;margin-top:45px;} .CaseBox .readmore a{ width:45%; display:block;margin:0 auto;text-align:center; border-radius:5px; background: #61cdda; color:#fff; line-height:40px; height:40px; font-size:14px;} .CaseBox .readmore a:hover{background:#59bcc7;} .CaseBox .readmore { margin-bottom:13.75vw;margin-top:8.035714285714286vw;} .CaseBox .readmore a{ width:40.53571428571429vw;line-height:9.821428571428571vw; height:9.821428571428571vw;font-size:2.857142857142857vw;} @media (min-width: 557px) { .CaseBox .readmore { margin-bottom:10vw;margin-top:5.844155844155844vw;} .CaseBox .readmore a{ width:29.48051948051948vw;line-height:7.142857142857143vw; height:7.142857142857143vw;font-size:2.077922077922078vw;} } @media (min-width: 768px) { .CaseBox .readmore { margin-bottom:7.7vw;margin-top:4.5vw;} .CaseBox .readmore a{ width:22.7vw;line-height:5.5vw; height:5.5vw;font-size:1.6vw;} } @media (min-width: 1009px) { .CaseBox .readmore { margin-bottom:77px;margin-top:45px;} .CaseBox .readmore a{ width:227px;line-height:55px; height:55px;font-size:16px;} } .icon2 {display:none;line-height: 1;text-align: center;} .icon2:before{display: inline-block;font-weight: 400;font-style: normal;speak: none;text-transform: none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;} .linear-icon-picture2:before {content:"\e70e";}