@charset "utf-8"; /*图片*/ /*旧修改*/ .w-img-border-Hairline .img{ padding:1px;} .w-img-border-Thin .img{ padding:3px;} .w-img-border-Medium .img{ padding:5px;} .w-img-border-Thick .img{ padding:10px;} .w-img-border-gray .img{ border:1px solid #ddd;} .w-img-border-black .img{ border:1px solid #000;} .w-img-border-Hairline img{ padding:0;} .w-img-border-Thin img{ padding:0;} .w-img-border-Medium img{ padding:0;} .w-img-border-Thick img{ padding:0;} .w-img-border-gray img{ border:0;} .w-img-border-black img{ border:0;} .w-simImg .w-img-caption{ padding-top:0;} .imgBB{overflow:hidden; border:0px solid;} .w-img-border-gray .imgBB{border:1px solid #ddd;} .w-img-border-black .imgBB{border:1px solid #000;} .w-img-border-gray .imgBB .img{ border:0;} .w-img-border-black .imgBB .img{ border:0;} .w-img-border-Hairline .imgBB{ padding:1px;} .w-img-border-Thin .imgBB{ padding:3px;} .w-img-border-Medium .imgBB{ padding:5px;} .w-img-border-Thick .imgBB{ padding:10px;} .w-img-border-Hairline .imgBB .img,.w-img-border-Thin .imgBB .img,.w-img-border-Medium .imgBB .img,.w-img-border-Thick .imgBB .img{ padding:0;} /*新增*/ .caption-text-pd-default{ padding:0 !important;} .caption-text-pd-Hairline{ padding:5px !important;} .caption-text-pd-Thin{ padding:10px !important;} .caption-text-pd-Medium{ padding:15px !important;} .caption-text-pd-Thick{ padding:20px !important;} .caption-text-pd-Large{ padding:30px !important;} .w-simImg .image-w{position:relative; overflow:hidden; } .caption{ position:relative;} .caption .captionbg{position:absolute;width:100%; height:100%;} .caption .caption-text{z-index:10;position:relative;/* word-break: break-all; word-wrap: break-word; */padding:0.5em 1px 0.7em;} .caption h3{ font-weight:normal; font-size:115%; margin:0; line-height:1.5; } .caption p{ margin:0; padding-top:0.5em; opacity:0.85;} .caption .more1 .more_span{ padding:0.2em 1em; border:1px solid #999; display:inline-block; *display:inline; *zoom:1;} .caption .more1 i{display:none;} .caption .more2 .more_span{ display:none;} .caption .more2 i{ display:inline-block; *display:inline; *zoom:1; width:75px; height:75px; background:url(../images/img/icon_link1.png) no-repeat center;} .caption .more3 .more_span{ display:none;} .caption .more3 i{ display:inline-block; *display:inline; *zoom:1; width:75px; height:75px; background:url(../images/img/icon_link2.png) no-repeat center;} .caption .more4 .more_span{ display:none;} .caption .more4 i{ display:inline-block; *display:inline; *zoom:1; width:75px; height:75px; background:url(../images/img/icon_link3.png) no-repeat center;} .imgFloat .caption{position:absolute; bottom:0; left:0; width:100%;color:#fff; overflow:hidden;} .imgFloat .caption .captionbg{ background:#000; opacity:0.5; *filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); z-index:0;} .imgFloat .caption .caption-text .caption-text-in{padding:0 10px; } .imgFloat .caption .more1 .more_span{border-color:#fff;} .imgFloatFull .caption{position:absolute;bottom:0; left:0; width:100%;height:100%;color:#fff; padding-top:0; overflow:hidden;} .imgFloatFull .caption .captionbg{ background:#000; opacity:0.5; *filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); z-index:0;} .imgFloatFull .caption .caption-text{ display:table; height:100%; width:100%; } .imgFloatFull .caption .caption-text .caption-text-in{ display: table-cell; vertical-align: middle;padding:10px;} .imgFloatFull .caption .more1 .more_span{border-color:#fff;} .imgScaleBig .img{overflow:hidden;} .imgScaleBig:hover img{transform: scale(1.1);-ms-transform: scale(1.1); -moz-transform: scale(1.1);-webkit-transform: scale(1.1); -o-transform: scale(1.1);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgScaleSmall .img{overflow:hidden;} .imgScaleSmall img{transform: scale(1.1);-ms-transform: scale(1.1); -moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);} .imgScaleSmall:hover img{ transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgRotate .img{overflow:hidden;} .imgRotate:hover img{-webkit-transform:rotate(360deg);-o-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgLeft .img{overflow:hidden;} .imgLeft img{transform: scale(1.2) translateX(5%);-ms-transform: scale(1.2) translateX(5%); -moz-transform: scale(1.2) translateX(5%);-webkit-transform: scale(1.2) translateX(5%);-o-transform: scale(1.2) translateX(5%);} .imgLeft:hover img{transform: scale(1.2) translateX(0);-ms-transform: scale(1.2) translateX(0); -moz-transform: scale(1.2) translateX(0);-webkit-transform: scale(1.2) translateX(0);-o-transform: scale(1.2) translateX(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgRight .img{overflow:hidden;} .imgRight img{transform: scale(1.2) translateX(-5%);-ms-transform: scale(1.2) translateX(-5%); -moz-transform: scale(1.2) translateX(-5%);-webkit-transform: scale(1.2) translateX(-5%);-o-transform: scale(1.2) translateX(-5%);} .imgRight:hover img{transform: scale(1.2) translateX(0);-ms-transform: scale(1.2) translateX(0); -moz-transform: scale(1.2) translateX(0);-webkit-transform: scale(1.2) translateX(0);-o-transform: scale(1.2) translateX(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgTop .img{overflow:hidden;} .imgTop img{transform: scale(1.2) translateY(5%);-ms-transform: scale(1.2) translateY(5%); -moz-transform: scale(1.2) translateY(5%);-webkit-transform: scale(1.2) translateY(5%);-o-transform: scale(1.2) translateY(5%);} .imgTop:hover img{transform: scale(1.2) translateY(0);-ms-transform: scale(1.2) translateY(0); -moz-transform: scale(1.2) translateY(0);-webkit-transform: scale(1.2) translateY(0);-o-transform: scale(1.2) translateY(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgBottom .img{overflow:hidden;} .imgBottom img{transform: scale(1.2) translateY(-5%);-ms-transform: scale(1.2) translateY(-5%); -moz-transform: scale(1.2) translateY(-5%);-webkit-transform: scale(1.2) translateY(-5%);-o-transform: scale(1.2) translateY(-5%);} .imgBottom:hover img{transform: scale(1.2) translateY(0);-ms-transform: scale(1.2) translateY(0); -moz-transform: scale(1.2) translateY(0);-webkit-transform: scale(1.2) translateY(0);-o-transform: scale(1.2) translateY(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgLeftBig .img{overflow:hidden;} .imgLeftBig:hover img{transform:translateX(-100%);-ms-transform: translateX(-100%); -moz-transform: translateX(-100%);-webkit-transform: translateX(-100%);-o-transform: translateX(-100%);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgLeftBig .caption .captionbg{ opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .imgRightBig .img{overflow:hidden;} .imgRightBig:hover img{transform:translateX(100%);-ms-transform: translateX(100%); -moz-transform: translateX(100%);-webkit-transform: translateX(100%);-o-transform: translateX(100%);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgRightBig .caption .captionbg{ opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .imgTopBig .img{overflow:hidden;} .imgTopBig:hover img{transform:translateY(-100%);-ms-transform: translateY(-100%); -moz-transform: translateY(-100%);-webkit-transform: translateY(-100%);-o-transform: translateY(-100%);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgTopBig .caption .captionbg{ opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .imgBottomBig .img{overflow:hidden;} .imgBottomBig:hover img{transform:translateY(100%);-ms-transform: translateY(100%); -moz-transform: translateY(100%);-webkit-transform: translateY(100%);-o-transform: translateY(100%);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgBottomBig .caption .captionbg{ opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .imgScaleHide .img{overflow:hidden;} .imgScaleHide:hover .img{transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgFadeInScale .img{transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(1);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s; opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .imgFadeInScale:hover .img{transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s; opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .captionbgFadeInDefault .captionbg{ bottom:-100%; } .captionbgFadeInDefault:hover .captionbg{ bottom:0;} .captionbgFadeInUp .captionbg{ bottom:-100%;} .captionbgFadeInUp:hover .captionbg{ bottom:0;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .captionbgFadeInDown .captionbg{ top:-1000px;} .captionbgFadeInDown:hover .captionbg{ top:0;transition: all 0.35s ease-out;-moz-transition: all 0.35s ease-out;-webkit-transition: all 0.35s ease-out; -o-transition: all 0.35s ease-out;} .captionbgFadeInRight .captionbg{ left:-100%;} .captionbgFadeInRight:hover .captionbg{ left:0;transition: all 0.4s;-moz-transition: all 0.4s;-webkit-transition: all 0.4s; -o-transition: all 0.4s;} .captionbgFadeInLeft .captionbg{ right:-100%;} .captionbgFadeInLeft:hover .captionbg{ right:0;transition: all 0.4s;-moz-transition: all 0.4s;-webkit-transition: all 0.4s; -o-transition: all 0.4s;} .captionbgFadeInScale .captionbg{transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);bottom:-100%; } .captionbgFadeInScale:hover .captionbg{bottom:0; transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s;} .captionbgSwingLeft .captionbg{left:100%;transform: perspective(400px) rotateY(-90deg);-ms-transform: perspective(400px) rotateY(-90deg); -moz-transform: perspective(400px) rotateY(-90deg);-webkit-transform: perspective(400px) rotateY(-90deg); -o-transform: perspective(400px) rotateY(-90deg);transform-origin:right center 0;-ms-transform-origin: right center 0; -moz-transform-origin:right center 0;-webkit-transform-origin:right center 0; -o-transform-origin:right center 0; transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingLeft:hover .captionbg{left:0;transform: perspective(400px) rotateY(0deg);-ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg);-webkit-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg);} .captionbgSwingRight .captionbg{left:-100%;transform: perspective(400px) rotateY(90deg);-ms-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg);-webkit-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg);transform-origin:left center 0;-ms-transform-origin: left center 0; -moz-transform-origin:left center 0;-webkit-transform-origin:left center 0; -o-transform-origin:left center 0; transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingRight:hover .captionbg{left:0;transform: perspective(400px) rotateY(0deg);-ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg);-webkit-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg);} .captionbgSwingDown .captionbg{top:-100%;transform: perspective(400px) rotateX(-90deg);-ms-transform: perspective(400px) rotateX(-90deg); -moz-transform: perspective(400px) rotateX(-90deg);-webkit-transform: perspective(400px) rotateX(-90deg); -o-transform: perspective(400px) rotateX(-90deg);transform-origin:center top 0;-ms-transform-origin: center top 0; -moz-transform-origin:center top 0;-webkit-transform-origin:center top 0; -o-transform-origin:center top 0; transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s;} .captionbgSwingDown:hover .captionbg{top:0;transform: perspective(400px) rotateX(0deg);-ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg);-webkit-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg);} .captionbgSwingUp .captionbg{bottom:-100%;transform: perspective(400px) rotateX(90deg);-ms-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg);-webkit-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg);transform-origin:center bottom 0;-ms-transform-origin: center bottom 0; -moz-transform-origin:center bottom 0;-webkit-transform-origin:center bottom 0; -o-transform-origin:center bottom 0; transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s; } .captionbgSwingUp:hover .captionbg{bottom:0;transform: perspective(400px) rotateX(0deg);-ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg);-webkit-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg);} .captionbgFadeInRotate .captionbg{ bottom:-200%; transform: scale(0.5) rotateZ(180deg);-ms-transform: scale(0.5) rotateZ(180deg); -moz-transform: scale(0.5) rotateZ(180deg);-webkit-transform: scale(0.5) rotateZ(180deg); -o-transform: scale(0.5) rotateZ(180deg);transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s;} .captionbgFadeInRotate:hover .captionbg{bottom:0;transform: scale(1) rotateZ(0deg);-ms-transform: scale(1) rotateZ(0deg); -moz-transform:scale(1) rotateZ(0deg);-webkit-transform: scale(1) rotateZ(0deg); -o-transform:scale(1) rotateZ(0deg);} .captionbgCircleTL .captionbg{left:-100%; top:-100%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .captionbgCircleTL:hover .captionbg{ left:0; top:0;transform: scale(3);-ms-transform: scale(3); -moz-transform: scale(3);-webkit-transform: scale(3); -o-transform: scale(3);} .captionbgCircleTR .captionbg{right:-100%; top:-100%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .captionbgCircleTR:hover .captionbg{ right:0; top:0;transform: scale(3);-ms-transform: scale(3); -moz-transform: scale(3);-webkit-transform: scale(3); -o-transform: scale(3);} .captionbgCircleBL .captionbg{left:-100%; bottom:-100%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .captionbgCircleBL:hover .captionbg{ left:0; bottom:0;transform: scale(3);-ms-transform: scale(3); -moz-transform: scale(3);-webkit-transform: scale(3); -o-transform: scale(3);} .captionbgCircleBR .captionbg{left:100%; top:100%; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%;transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .captionbgCircleBR:hover .captionbg{ left:0; top:0;transform: scale(3);-ms-transform: scale(3); -moz-transform: scale(3);-webkit-transform: scale(3); -o-transform: scale(3);} .captionbgHT .captionbg{transform: perspective(1000px) rotateY(90deg);-ms-transform:translateY(100%); -moz-transform:perspective(1000px) rotateY(90deg);-webkit-transform: perspective(1000px) rotateY(90deg); -o-transform: perspective(1000px) rotateY(90deg);transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s;} .captionbgHT:hover .captionbg{transform: perspective(600px) rotateY(0deg);-ms-transform:translateY(0); -moz-transform:perspective(600px) rotateY(0deg);-webkit-transform: perspective(600px) rotateY(0deg); -o-transform: perspective(600px) rotateY(0deg);} .captionbgVT .captionbg{transform: perspective(600px) rotateX(90deg);-ms-transform:translateX(100%); -moz-transform:perspective(600px) rotateX(90deg);-webkit-transform: perspective(600px) rotateX(90deg); -o-transform: perspective(600px) rotateX(90deg);transition: transform 0.5s;-moz-transition: transform 0.5s;-webkit-transition: transform 0.5s; -o-transition: transform 0.5s;} .captionbgVT:hover .captionbg{transform: perspective(600px) rotateX(0deg);-ms-transform:translateX(0); -moz-transform:perspective(600px) rotateX(0deg);-webkit-transform: perspective(600px) rotateX(0deg); -o-transform: perspective(600px) rotateX(0deg);} .captionbgFadeOut .caption .captionbg{ background:#000; opacity:0.3; *filter:alpha(opacity=30); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30); z-index:0;} .captionbgFadeOutDefault .captionbg{ bottom:0; } .captionbgFadeOutDefault:hover .caption .captionbg{ opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transition: opacity 0.5s;-moz-transition: opacity 0.5s;-webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; } .captionbgFadeOutScale .caption .captionbg{ opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); z-index:0;} .captionbgFadeOutScale {transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);bottom:0;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .captionbgFadeOutScale:hover .captionbg{ transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s; opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .textFade .textFadeInDefault{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); width:100%;} .textFade:hover .textFadeInDefault{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .textFade .textFadeInUp{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-bottom:-35px; width:100%;} .textFade:hover .textFadeInUp{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-bottom:0;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .textFade .textFadeInDown{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-bottom:35px; width:100%;} .textFade:hover .textFadeInDown{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-bottom:0;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .textFade .textFadeInLeft{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-left:-100%; width:100%;} .textFade:hover .textFadeInLeft{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-left:0;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .textFade .textFadeInRight{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); margin-left:100%;width:100%;} .textFade:hover .textFadeInRight{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); margin-left:0;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .textFade .textFadeInScale{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); width:100%; transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);} .textFade:hover .textFadeInScale{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .textFade .textFadeInRotate{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); width:100%;} .textFade:hover .textFadeInRotate{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -webkit-transform:rotate(360deg);-o-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .textFade .textFadeOutDefault{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); width:100%;} .textFade:hover .textFadeOutDefault{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transition: opacity 0.5s;-moz-transition: opacity 0.5s;-webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s;} .textFade .textFadeOutScale{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); width:100%; transform: scale(0);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);} .textFade:hover .textFadeOutScale{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgTextL .caption::before,.imgTextL .caption::after{position:absolute; content: "";opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index:99;} .imgTextL .caption::before{border-bottom: 1px solid #fff;border-top: 1px solid #fff;bottom: 20px;left: 10px;right: 10px; top: 20px;transform: scale(0, 1);-ms-transform: scale(0, 1); -moz-transform: scale(0, 1);-webkit-transform: scale(0, 1); -o-transform: scale(0, 1);transform-origin: 0 0 0;-ms-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0;-webkit-transform-origin: 0 0 0; -o-transform-origin: 0 0 0;} .imgTextL .caption::after{border-left: 1px solid #fff; border-right: 1px solid #fff; bottom: 10px; left: 20px; right: 20px; top: 10px; transform: scale(1, 0); -ms-transform:scale(1, 0);-moz-transform: scale(1, 0);-webkit-transform: scale(1, 0); -o-transform: scale(1, 0);transform-origin: 100% 0 0;-ms-transform-origin: 100% 0 0; -moz-transform-origin: 100% 0 0;-webkit-transform-origin: 100% 0 0; -o-transform-origin: 100% 0 0;} .imgTextL:hover .caption::before, .imgTextL:hover .caption::after { opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTextA .caption::before,.imgTextA .caption::after{position:absolute; content: "";opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index:99;} .imgTextA .caption::before{border-bottom: 1px solid #fff;border-top: 1px solid #fff;bottom: 10px;left: 10px;right: 10px; top: 10px;transform: scale(0, 1);-ms-transform: scale(0, 1); -moz-transform: scale(0, 1);-webkit-transform: scale(0, 1); -o-transform: scale(0, 1);transform-origin: 0 0 0;-ms-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0;-webkit-transform-origin: 0 0 0; -o-transform-origin: 0 0 0;} .imgTextA .caption::after{border-left: 1px solid #fff; border-right: 1px solid #fff; bottom: 10px; left: 10px; right: 10px; top: 10px; transform: scale(1, 0); -ms-transform:scale(1, 0);-moz-transform: scale(1, 0);-webkit-transform: scale(1, 0); -o-transform: scale(1, 0);transform-origin: 100% 0 0;-ms-transform-origin: 100% 0 0; -moz-transform-origin: 100% 0 0;-webkit-transform-origin: 100% 0 0; -o-transform-origin: 100% 0 0;} .imgTextA:hover .caption::before, .imgTextA:hover .caption::after { opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1); transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s; } .imgTextB .caption::before{content: "";opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index:99;transform: scale(0);-ms-transform: scale(0); -moz-transform: scale(0);-webkit-transform: scale(0); -o-transform: scale(0);border: 1px solid #fff;bottom: 10px;left: 10px;position: absolute;right: 10px;top: 10px;} .imgTextB:hover .caption::before{opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); z-index:99;transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgTextS .caption::before,.imgTextS .caption::after{background: #fff none repeat scroll 0 0;content: "";height: 1px;left: 50%; position: absolute; z-index:99;top: 50%;opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transform: translate3d(-50%, -50%, 0px);-ms-transform: translate(-50%, -50%); -moz-transform: translate3d(-50%, -50%, 0px);-webkit-transform: translate3d(-50%, -50%, 0px); -o-transform:translate3d(-50%, -50%, 0px);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;width: 80%;} .imgTextS:hover .caption::before{opacity: 0.5;*filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); transform: translate3d(-50%, -50%, 0px) rotate(45deg);-ms-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate3d(-50%, -50%, 0px) rotate(45deg);-webkit-transform: translate3d(-50%, -50%, 0px) rotate(45deg); -o-transform: translate3d(-50%, -50%, 0px) rotate(45deg);} .imgTextS:hover .caption::after{opacity: 0.5;*filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); transform: translate3d(-50%, -50%, 0px) rotate(-45deg);-ms-transform: translate(-50%, -50%) rotate(-45deg); -moz-transform: translate3d(-50%, -50%, 0px) rotate(-45deg);-webkit-transform: translate3d(-50%, -50%, 0px) rotate(-45deg); -o-transform: translate3d(-50%, -50%, 0px) rotate(-45deg);} .imgTextC .caption::before{content: "";opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); z-index:99;transform: scale(1.2);-ms-transform: scale(1.2); -moz-transform: scale(1.2);-webkit-transform: scale(1.2); -o-transform: scale(1.2);border: 1px solid #fff;bottom: 10px;left: 10px;position: absolute;right: 10px;top: 10px;} .imgTextC:hover .caption::before{opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: scale(1);-ms-transform: scale(1); -moz-transform: scale(1);-webkit-transform: scale(1); -o-transform: scale(1);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgTextD .caption::before{ border: 2px solid #fff; content: "";height: 50%;left: 50%;opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);position: absolute; z-index:99;top: 50%; transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); -ms-transform:translate(-50%, -50%) rotate(-45deg) scale(0, 0);-moz-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1);-webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0;-webkit-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -moz-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;-webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; width: 50%; } .imgTextD:hover .caption::before { opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -ms-transform:translate(-50%, -50%) rotate(-45deg) scale(1, 1);-moz-transform:translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1);-webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); } .imgTextE .caption::before{ border: 2px solid #fff; content: "";height: 50%;left: 50%;opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);position: absolute; z-index:99;top: 50%; transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1); -ms-transform:translate(-50%, -50%) rotate(45deg) scale(0, 0);-moz-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1);-webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(0, 0, 1); transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0;-webkit-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -moz-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;-webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s; width: 50%; } .imgTextE:hover .caption::before { opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -ms-transform:translate(-50%, -50%) rotate(45deg) scale( 1, 1);-moz-transform:translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);-webkit-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -o-transform: translate3d(-50%, -50%, 0px) rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); } .imgTextF .caption::before{background: rgba(255, 255, 255, 0.5); content: ""; height: 100%; left: 0; position: absolute; top: 0; transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px); -ms-transform:scale(1.9, 1.4) rotate(45deg) translate(0px, -100%);-moz-transform:scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px);-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px); -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px); transition: transform 0.6s ease 0s; -moz-transition: transform 0.6s ease 0s;-webkit-transition: transform 0.6s ease 0s; -o-transition: transform 0.6s ease 0s; width: 100%;} .imgTextF:hover .caption::before{transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px);-ms-transform:scale(1.9, 1.4) rotate(45deg) translate(0px, 100%x);-moz-transform:scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px);-webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px); -o-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px);} .imgTextF .caption .captionbg{ opacity: 0 !important;*filter:alpha(opacity=0) !important; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0) !important;} .imgTextG .caption::after{border-bottom: 1px solid #fff; border-top: 1px solid #fff; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -ms-transform: rotate(45deg) scale(1, 0);-moz-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1);-webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -o-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); transform-origin: 50% 50% 0; -ms-transform-origin: 50% 50% 0;-moz-transform-origin: 50% 50% 0;-webkit-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; width: 100%; transition:opacity 0.6s ease 0s, transform 0.6s ease 0s; -moz-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s;-webkit-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s; -o-transition: opacity 0.6s ease 0s, transform 0.6s ease 0s; } .imgTextG:hover .caption::after{opacity: 1; transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);-ms-transform:rotate(45deg) scale(1, 1);-moz-transform:rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);-webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); -o-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1);} .imgGrayScale img{filter: grayscale(100%);-webkit-filter: grayscale(100%); opacity:0.4;}/*灰度*/ .imgGrayScale:hover img{filter: grayscale(0);-webkit-filter: grayscale(0); opacity:1;} .imgGrayScale p{ font-size:90%; padding-top:0; color:#aaa;} .imgFloat.captionbgFadeInDefault.textFade .img{ overflow:hidden;} .imgFloat.captionbgFadeInDefault.textFade .img img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -o-transition: all 0.5s;} .imgFloat.captionbgFadeInDefault.textFade:hover .img img{transform: scale(1.1);-ms-transform: scale(1.1); -moz-transform: scale(1.1);-webkit-transform: scale(1.1); -o-transform: scale(1.1);} .imgFloat.captionbgFadeInDefault.textFade .captionbg{ bottom:0;} .imgFloat.captionbgFadeInDefault.textFade .textFadeInDefault{ opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} /*图片集*/ .multi-imgs .img{ width:100%; height:100%; position:absolute; left:0; top:0;} /*新增*/ .multi-imgs .imgFadeInScale .img{ width:100%; height:100%; position:absolute;} @media (max-width:480px){ .caption-text-pd-Medium{ padding:0.8em !important;} .caption-text-pd-Thick{ padding:1em !important;} .caption-text-pd-Large{ padding:1em !important;} } /*鼠标进入进出*/ .w-multi-imgs-inout li{ position:relative;} .imgInOut a{ display:block;-webkit-perspective:400px;perspective:400px; position:relative;overflow:hidden;} .imgInOut .caption{-webkit-transform:rotate3d(1,0,0,90deg); transform:rotate3d(1,0,0,90deg); width:100%; height:100%; position:absolute; top:0; left:0; pointer-events:none; color:#fff; padding:0;} .imgInOut .caption .captionbg{ opacity:0.85; *filter:alpha(opacity=85); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85); z-index:0;} .imgInOut .caption .caption-text{ display:table; height:100%; width:100%; } .imgInOut .caption .caption-text .caption-text-in{ display: table-cell; vertical-align: middle;padding:10px;} .in-top .caption { -webkit-transform-origin:50% 0%; transform-origin:50% 0%; -webkit-animation:in-top 300ms ease 0ms 1 forwards; animation:in-top 300ms ease 0ms 1 forwards; } .in-right .caption { -webkit-transform-origin:100% 0%; transform-origin:100% 0%; -webkit-animation:in-right 300ms ease 0ms 1 forwards; animation:in-right 300ms ease 0ms 1 forwards; } .in-bottom .caption { -webkit-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-animation:in-bottom 300ms ease 0ms 1 forwards; animation:in-bottom 300ms ease 0ms 1 forwards; } .in-left .caption { -webkit-transform-origin:0% 0%; transform-origin:0% 0%; -webkit-animation:in-left 300ms ease 0ms 1 forwards; animation:in-left 300ms ease 0ms 1 forwards; } .out-top .caption { -webkit-transform-origin:50% 0%; transform-origin:50% 0%; -webkit-animation:out-top 300ms ease 0ms 1 forwards; animation:out-top 300ms ease 0ms 1 forwards; top:-1px; } .out-right .caption { -webkit-transform-origin:100% 50%; transform-origin:100% 50%; -webkit-animation:out-right 300ms ease 0ms 1 forwards; animation:out-right 300ms ease 0ms 1 forwards; left:1px; } .out-bottom .caption { -webkit-transform-origin:50% 100%; transform-origin:50% 100%; -webkit-animation:out-bottom 300ms ease 0ms 1 forwards; animation:out-bottom 300ms ease 0ms 1 forwards; top:1px; } .out-left .caption{ -webkit-transform-origin:0% 0%; transform-origin:0% 0%; -webkit-animation:out-left 300ms ease 0ms 1 forwards; animation:out-left 300ms ease 0ms 1 forwards; left:-1px; } @-webkit-keyframes in-top { from { -webkit-transform:rotate3d(-1,0,0,90deg); transform:rotate3d(-1,0,0,90deg); } to { -webkit-transform:none; transform:none; } } @keyframes in-top { from { -webkit-transform:rotate3d(-1,0,0,90deg); transform:rotate3d(-1,0,0,90deg); } to { -webkit-transform:none; transform:none; } } @-webkit-keyframes in-right { from { -webkit-transform:rotate3d(0,-1,0,90deg); transform:rotate3d(0,-1,0,90deg); } to { -webkit-transform:none; transform:none; } } @keyframes in-right { from { -webkit-transform:rotate3d(0,-1,0,90deg); transform:rotate3d(0,-1,0,90deg); } to { -webkit-transform:none; transform:none; } } @-webkit-keyframes in-bottom { from { -webkit-transform:rotate3d(1,0,0,90deg); transform:rotate3d(1,0,0,90deg); } to { -webkit-transform:none; transform:none; } } @keyframes in-bottom { from { -webkit-transform:rotate3d(1,0,0,90deg); transform:rotate3d(1,0,0,90deg); } to { -webkit-transform:none; transform:none; } } @-webkit-keyframes in-left { from { -webkit-transform:rotate3d(0,1,0,90deg); transform:rotate3d(0,1,0,90deg); } to { -webkit-transform:none; transform:none; } } @keyframes in-left { from { -webkit-transform:rotate3d(0,1,0,90deg); transform:rotate3d(0,1,0,90deg); } to { -webkit-transform:none; transform:none; } } @-webkit-keyframes out-top { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(-1,0,0,130deg); transform:rotate3d(-1,0,0,130deg); } } @keyframes out-top { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(-1,0,0,130deg); transform:rotate3d(-1,0,0,130deg); } } @-webkit-keyframes out-right { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(0,-1,0,130deg); transform:rotate3d(0,-1,0,130deg); } } @keyframes out-right { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(0,-1,0,130deg); transform:rotate3d(0,-1,0,130deg); } } @-webkit-keyframes out-bottom { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(1,0,0,130deg); transform:rotate3d(1,0,0,130deg); } } @keyframes out-bottom { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(1,0,0,130deg); transform:rotate3d(1,0,0,130deg); } } @-webkit-keyframes out-left { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(0,1,0,130deg); transform:rotate3d(0,1,0,130deg); } } @keyframes out-left { from { -webkit-transform:rotate3d(0,0,0,0deg); transform:rotate3d(0,0,0,0deg); } to { -webkit-transform:rotate3d(0,1,0,130deg); transform:rotate3d(0,1,0,130deg); } } /*特定图文组合效果*/ .simImg_spec .caption h3{ font-size:18px;} .simImg_spec .caption{ overflow:hidden;} .specFull .caption{position:absolute;bottom:0; left:0; width:100%;height:100%;color:#fff; padding-top:0; } .specFull .caption .captionbg{ opacity:0.9; *filter:alpha(opacity=90); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90); z-index:0;} .specFull .caption .caption-text{ display:table; height:100%; width:100%; } .specFull .caption .caption-text .caption-text-in{ display: table-cell; vertical-align: middle;padding:10px;} .simImg_spec1 .caption-text{position:relative;} .simImg_spec1 .caption-text::before,.simImg_spec1 .caption-text::after{ opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); content:''; position:absolute; height:1px; background:rgba(255,255,255,0.5); left:10px; width:90%;width:calc(100% - 20px);} .simImg_spec1 .caption-text::before{ top:10px;} .simImg_spec1 .caption-text::after{ bottom:10px;} .simImg_spec1:hover .caption-text::before,.simImg_spec1:hover .caption-text::after{ opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec1 .caption-text h3,.simImg_spec1 .caption-text p{opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); position:relative;} .simImg_spec1 .caption-text h3{ top:35px;} .simImg_spec1 .caption-text p{ top:-35px;} .simImg_spec1:hover .caption-text h3{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); top:0;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec1:hover .caption-text p{opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70); top:0;transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec2 img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec2 .caption::before,.simImg_spec2 .caption::after{ border-color:rgba(255,255,255,0.3);} .simImg_spec2 .caption .captionbg{opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec2:hover .caption .captionbg{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec2 .caption-text{opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; } .simImg_spec2:hover .caption-text{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec2 .caption .caption-text .caption-text-in{ padding:1.6em;} .simImg_spec3 img{-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(-5%,0, 0) scale(1.1);transform: translate3d(-5%,0, 0) scale(1.1);} .simImg_spec3:hover img{-webkit-transform: translate3d(0,0,0) scale(1.1);transform: translate3d(0,0,0) scale(1.1);} .simImg_spec3 .captionbg{ left:0; top:0; opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:all 0.35s;transition:all 0.35s;} .simImg_spec3:hover .captionbg{ opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} .simImg_spec3 .w-img-caption{ position:absolute; left:0; right:0; top:0; bottom:0;} .simImg_spec3 .caption-text {position: absolute;bottom: 0;left: 0;padding: 1em;width: 100%;min-height: 5.5em; color:#fff; /*text-align:left;*/} .simImg_spec3 h3,.simImg_spec3 p{-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);} .simImg_spec3 p{opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec3 h3 {-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;} .simImg_spec3 p{color: rgba(255,255,255,0.8);opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); height:0;-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;transition: opacity 0.2s, transform 0.35s;} .simImg_spec3:hover p {opacity: 1;} .simImg_spec3:hover h3,.simImg_spec3:hover p {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .simImg_spec3:hover p {opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transition-delay: 0.05s;transition-delay: 0.05s;-webkit-transition-duration: 0.35s;transition-duration: 0.35s; height:auto;} .simImg_spec4 .captionbg{ left:0; top:0; opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:all 0.35s;transition:all 0.35s;} .simImg_spec4:hover .captionbg{ opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} .simImg_spec4 .w-img-caption{/*text-align: right;*/position:absolute; left:0; right:0; top:0; bottom:0; color:#fff;} .simImg_spec4 .caption-text {position: absolute;bottom: 0;left: 0; top:0; right:0;} .simImg_spec4 h3,.simImg_spec4 p {position: absolute;right: 1em;left: 1em;padding: 10px 0;} .simImg_spec4 p {bottom: 1em;line-height: 1.5;-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);} .simImg_spec4 h3 {top: 1em;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,10px,0);transform: translate3d(0,10px,0);} .simImg_spec4:hover h3 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .simImg_spec4 h3::after {position: absolute;top: 100%;left: 0;width: 100%;height: 4px;background: #fff;content: '';-webkit-transform: translate3d(0,40px,0);transform: translate3d(0,40px,0);} .simImg_spec4 h3::after {opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;} .simImg_spec4 p {opacity: 0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;} .simImg_spec4:hover h3::after{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .simImg_spec4:hover p {opacity:0.9;*filter:alpha(opacity=90); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=90);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .simImg_spec5 .captionbg{ left:0; top:0; opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:all 0.35s;transition:all 0.35s;} .simImg_spec5:hover .captionbg{ opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} .simImg_spec5 .w-img-caption{position: absolute;top: 0;left: 0;right:0;bottom:0; color:#fff;padding:1.5em;} .simImg_spec5 .w-img-caption::before{position: absolute;top: 1em;right: 1em;bottom: 1em;left: 1em;border: 1px solid rgba(255,255,255,0.7);content: '';} .simImg_spec5 h3 {-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);} .simImg_spec5 .w-img-caption::before{opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale(0);transform: scale(0);} .simImg_spec5 p {opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale(0);transform: scale(0);} .simImg_spec5:hover h3 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .simImg_spec5:hover .w-img-caption::before{opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: scale(1);transform: scale(1);} .simImg_spec5:hover p {opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: scale(1);transform: scale(1);} .simImg_spec5:hover .w-img-caption{background-color: rgba(58,52,42,0);} /*.simImg_spec6 img{-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;-webkit-transform: translate3d(-5%,0,0) scale(1.1);transform: translate3d(-5%,0,0) scale(1.1);-webkit-backface-visibility: hidden;backface-visibility: hidden;} .simImg_spec6:hover img{-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}*/ .simImg_spec6 .captionbg{ left:0; top:0; opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:all 0.35s;transition:all 0.35s;} .simImg_spec6:hover .captionbg{ opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} .simImg_spec6 .w-img-caption{position: absolute;top: 0;left: 0;right:0;bottom:0; color:#fff;padding:1em;} .simImg_spec6 h3 {position: relative;overflow: hidden;padding-bottom:0.5em;} .simImg_spec6 h3::after {position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: #fff;content: '';-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);} .simImg_spec6:hover h3::after {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .simImg_spec6 p {padding: 1em 0;opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);} .simImg_spec6:hover p {opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .simImg_spec7 .w-img-caption{position: absolute;top: 0;left: 0;right:0;bottom:0; color:#fff;padding:1em;} .simImg_spec7 .caption-text{position: absolute;left: 0;right:0;bottom:0; padding:0;} .simImg_spec7 img,.simImg_spec7 h3 {-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;} .simImg_spec7 h3{padding: 1em;} .simImg_spec7 p { padding:0 1.2em; text-transform: none;font-size: 90%; box-sizing:border-box;opacity: 0;-webkit-transition: all 0.35s;transition: all 0.35s; height:0; overflow:hidden; -webkit-transform: translate3d(0,50%,0) scale(1,0);transform: translate3d(0,50%,0) scale(1,0); line-height:1.5; } .simImg_spec7:hover img {-webkit-transform: translate3d(0,-30px,0) scale(1,1);transform: translate3d(0,-30px,0) scale(1,1);} .simImg_spec7:hover p{padding:1em 1.2em;opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: translate3d(0,0,0) scale(1);transform: translate3d(0,0,0) scale(1); height:auto;} /*3.22新增*/ .simImg_spec8 .image-w{ overflow:visible;} .simImg_spec8 .caption{z-index:0;opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;} .simImg_spec8:hover .caption{z-index:1;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform:translate(10px,10px); -webkit-transform:translate(10px,10px); -moz-transform:translate(10px,10px);} .simImg_spec8 .caption .captionbg{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .simImg_spec9 .image-w{ overflow:visible; } .simImg_spec9 .caption{z-index:0;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;} .simImg_spec9:hover .caption{z-index:1;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform:translate(10px,-10px); -webkit-transform:translate(10px,-10px); -moz-transform:translate(10px,-10px);} .simImg_spec9 .caption .captionbg{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec10 img{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec10:hover img{ transform:scale(0);-moz-transform:scale(0); -webkit-transform:scale(0);opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec10 .caption{z-index:0;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; transform:rotateZ(180deg) scale(0); -moz-transform:rotateZ(180deg) scale(0); -webkit-transform:rotateZ(180deg) scale(0);} .simImg_spec10:hover .caption{z-index:1;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform:rotateZ(0deg) scale(1); -moz-transform:rotateZ(0deg) scale(1); -webkit-transform:rotateZ(0deg) scale(1);} .simImg_spec10 .caption .captionbg{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec11 img{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec11:hover img{ left:100%; transform:rotateZ(180deg) scale(0.7); -moz-transform:rotateZ(180deg) scale(0.7); -webkit-transform:rotateZ(180deg) scale(0.7);opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec11 .caption{left:-100%;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; transform:rotateZ(180deg) scale(0.7); -moz-transform:rotateZ(180deg) scale(0.7); -webkit-transform:rotateZ(180deg) scale(0.7);} .simImg_spec11:hover .caption{ left:0;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform:rotateZ(0deg) scale(1); -moz-transform:rotateZ(0deg) scale(1); -webkit-transform:rotateZ(0deg) scale(1);} .simImg_spec11 .caption .captionbg{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec12 .image-w{overflow:visible;} .simImg_spec12 .img{transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; position:relative; z-index:2; bottom:0;font-size:100%;} .simImg_spec12:hover .img{ bottom:4.5em;} .simImg_spec12 .caption{position: absolute;bottom: 0;left: 0;width: 100%;color: #fff;z-index:1;} .simImg_spec12 .caption .captionbg{ z-index:1; left:0; top:0;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec12 .caption .caption-text{padding:0.5em 1em 0.7em;} .simImg_spec12 .caption h3{line-height:1.3; padding:0;} .simImg_spec12 .caption p{line-height:1.5; padding-top:0.2em; text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;overflow: hidden;} .simImg_spec13 .image-w{overflow:visible;} .simImg_spec13 .img{transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; position:relative; z-index:2; top:0;font-size:100%;} .simImg_spec13:hover .img{ top:4.5em;} .simImg_spec13 .caption{position: absolute;left: 0;width: 100%;color: #fff;top:0; z-index:1;} .simImg_spec13 .caption .captionbg{ z-index:1; left:0; top:0;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec13 .caption .caption-text{padding:0.5em 1em 0.7em;} .simImg_spec13 .caption h3{line-height:1.3; padding:0;} .simImg_spec13 .caption p{line-height:1.5; padding-top:0.2em; text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;overflow: hidden;} .simImg_spec14 .img{transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; position:relative; z-index:2; bottom:0;font-size:100%;} .simImg_spec14:hover .img{ bottom:4.5em; } .simImg_spec14 .caption{position: absolute;left: 0;width: 100%;color: #fff;bottom:-4.22em; z-index:1;transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;} .simImg_spec14:hover .caption{ bottom:0;} .simImg_spec14 .caption .captionbg{ z-index:1; left:0; top:0;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec14 .caption .caption-text{padding:0.5em 1em 0.7em;} .simImg_spec14 .caption h3{line-height:1.3; padding:0;} .simImg_spec14 .caption p{line-height:1.5; padding-top:0.2em; text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;overflow: hidden;} .simImg_spec15 .img{transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; position:relative; z-index:2; top:0;font-size:100%;} .simImg_spec15:hover .img{ top:4.5em; } .simImg_spec15 .caption{position: absolute;left: 0;width: 100%;color: #fff;top:-4.22em; z-index:1;transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;} .simImg_spec15:hover .caption{ top:0;} .simImg_spec15 .caption .captionbg{ z-index:1; left:0; top:0;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec15 .caption .caption-text{padding:0.5em 1em 0.7em;} .simImg_spec15 .caption h3{line-height:1.3; padding:0;} .simImg_spec15 .caption p{line-height:1.5; padding-top:0.2em; text-overflow: ellipsis;white-space: nowrap;word-break: keep-all;overflow: hidden;} .simImg_spec16 .caption{position: absolute;left: 0;width: 100%;color: #fff;z-index:0; top:0; bottom:auto;transform-origin:top; -moz-transform-origin:top; -webkit-transform-origin:top; opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transform:perspective(600px) rotateX(-90deg); -webkit-transform:perspective(600px) rotateX(-90deg); -moz-transform:perspective(600px) rotateX(-90deg);transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s;} .simImg_spec16:hover .caption{z-index:1;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transform:perspective(600px) rotateX(0deg); -webkit-transform:perspective(600px) rotateX(0deg); -moz-transform:perspective(600px) rotateX(0deg);} .simImg_spec16 .caption .captionbg{ z-index:1; left:0; top:0;opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec16 .caption .caption-text{padding:0.5em 1em 0.7em;} .simImg_spec17 .caption .captionbg{opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec17:hover .caption .captionbg{opacity:0.8;*filter:alpha(opacity=80); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);} .simImg_spec17 .caption .caption-text{text-align:center;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0);} .simImg_spec17:hover .caption .caption-text{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1);} .simImg_spec18 .img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; position:relative; bottom:0;transform-origin:bottom; -moz-transform-origin:bottom; -webkit-transform-origin:bottom;transform:perspective(600px) rotateX(0deg); -webkit-transform:perspective(600px) rotateX(0deg); -moz-transform:perspective(600px) rotateX(0deg);} .simImg_spec18:hover .img{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transform:perspective(600px) rotateX(90deg); -webkit-transform:perspective(600px) rotateX(90deg); -moz-transform:perspective(600px) rotateX(90deg);} .simImg_spec18 .caption{z-index:0; top:0;transform-origin:top; -moz-transform-origin:top; -webkit-transform-origin:top; opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transform:perspective(600px) rotateX(-90deg); -webkit-transform:perspective(600px) rotateX(-90deg); -moz-transform:perspective(600px) rotateX(-90deg);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec18:hover .caption{z-index:1;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transform:perspective(600px) rotateX(0deg); -webkit-transform:perspective(600px) rotateX(0deg); -moz-transform:perspective(600px) rotateX(0deg);} .simImg_spec18 .caption .captionbg{ opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec19 .img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; position:relative; bottom:0;transform-origin:right; -moz-transform-origin:right; -webkit-transform-origin:right;transform:perspective(600px) rotateY(0deg); -webkit-transform:perspective(600px) rotateY(0deg); -moz-transform:perspective(600px) rotateY(0deg);} .simImg_spec19:hover .img{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transform:perspective(600px) rotateY(-90deg); -webkit-transform:perspective(600px) rotateY(-90deg); -moz-transform:perspective(600px) rotateY(-90deg);} .simImg_spec19 .caption{z-index:0; left:0;transform-origin:left; -moz-transform-origin:left; -webkit-transform-origin:left; opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transform:perspective(600px) rotateY(90deg); -webkit-transform:perspective(600px) rotateY(90deg); -moz-transform:perspective(600px) rotateY(90deg);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec19:hover .caption{z-index:1;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);transform:perspective(600px) rotateY(0deg); -webkit-transform:perspective(600px) rotateY(0deg); -moz-transform:perspective(600px) rotateY(0deg);} .simImg_spec19 .caption .captionbg{ opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec20 .img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; position:relative; z-index:1;} .simImg_spec20:hover .img{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform: rotate3d(-1, 1, 0, 100deg);transform: rotate3d(-1, 1, 0, 100deg);} .simImg_spec20 .caption{ z-index:0;opacity:0; -webkit-transform: rotate3d(1, -1, 0, 100deg);transform: rotate3d(1, -1, 0, 100deg);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec20:hover .caption{z-index:2;opacity:1; -webkit-transform: rotate3d(0, 0, 0, 0deg);transform: rotate3d(0, 0, 0, 0deg);} .simImg_spec20 .caption .captionbg{ opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec21 .img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; position:relative; z-index:1;} .simImg_spec21:hover .img{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform: rotate3d(-1, -1, 0, 100deg);transform: rotate3d(-1, -1, 0, 100deg);} .simImg_spec21 .caption{ z-index:0;opacity:0; -webkit-transform: rotate3d(1, 1, 0, 100deg);transform: rotate3d(1, 1, 0, 100deg);transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;} .simImg_spec21:hover .caption{z-index:2;opacity:1; -webkit-transform: rotate3d(0, 0, 0, 0deg);transform: rotate3d(0, 0, 0, 0deg);} .simImg_spec21 .caption .captionbg{ opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec22 .caption-text{opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transition: all 0.3s 0.2s;-moz-transition: all 0.3s 0.2s;-webkit-transition: all 0.3s 0.2s;} .simImg_spec22:hover .caption-text{opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec22 .captionbg{top: 50%; bottom: 50%; left: -35%; right: -35%; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.3s;-moz-transition: all 0.3s;-webkit-transition: all 0.3s; width:auto; height:auto;} .simImg_spec22:hover .captionbg{ top: -100%;bottom: -100%;} .simImg_spec23 .img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; -webkit-transform-origin: 50% 0%;-ms-transform-origin: 50% 0%;transform-origin: 50% 0%; position:relative; z-index:1;} .simImg_spec23:hover .img{opacity:0; -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%); transform: rotateX(90deg) scale(0.6) translateY(50%);} .simImg_spec23 .caption{z-index:0; opacity:0;top:0; transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;-webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%;} .simImg_spec23:hover .caption{z-index:2;opacity:1; *filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: rotateX(0deg) translate3d(0%, 0%, 0) scale(1); transform: rotateX(0deg) translate3d(0%, 0%, 0) scale(1);} .simImg_spec23 .caption .captionbg{ opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec24 .img{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s; position:relative; z-index:1;} .simImg_spec24:hover .img{opacity:0; -webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5); transform: rotateX(-100deg) translateY(50%) scale(0.5); -webkit-transition-delay: 0; transition-delay: 0;} .simImg_spec24 .caption{transition: all 0.5s;-moz-transition: all 0.5s;-webkit-transition: all 0.5s;z-index:0; opacity:0;-webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5); transform: rotateX(90deg) translateY(-100%) scale(0.5);} .simImg_spec24:hover .caption{z-index:2;opacity:1; -webkit-transform: rotateX(0deg) translateY(0%) scale(1); transform: rotateX(0deg) translateY(0%) scale(1); -webkit-transition-delay: 0.3s; transition-delay: 0.3s;} .simImg_spec24 .caption .captionbg{ opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec25 .img{position:relative; z-index:1;} .simImg_spec25 .img:before{content: "";position: absolute;top:-200%;right:0;width: 200%;height:200%;background:rgba(0,0,0,0.5); transform:rotate(45deg) translateX(2%);-webkit-transform:rotate(45deg) translateX(2%);transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%;transition: all 200ms ease 0.4s; -webkit-transition: all 200ms ease 0.4s;} .simImg_spec25:hover .img:before{top:0;} .simImg_spec25 .img:after{content: "";position: absolute;bottom:-200%;left:0;width: 200%;height:200%;background:rgba(0,0,0,0.5); transform:rotate(45deg) translateX(-2%); -webkit-transform:rotate(45deg) translateX(-2%);transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%;transition: all 200ms ease 0.4s; -webkit-transition: all 200ms ease 0.4s;} .simImg_spec25:hover .img:after{ bottom:0;} .simImg_spec25 .caption{ color:#fff; position:absolute; width:100%; opacity:0; *filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);top:50%;top:10%\9; *top:10%; transform:translateY(-50%) rotate(55deg); -webkit-transform:translateY(-50%) rotate(55deg); left: 0; transition: all 0.2s; -webkit-transition: all 0.2s; z-index:9; overflow:hidden;} :root .simImg_spec25 .caption{ top:50%;} .simImg_spec25:hover .caption{transform:translateY(-50%); -webkit-transform:translateY(-50%); opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec25 .caption .captionbg{opacity:0.8; *filter:alpha(opacity=80); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);} .simImg_spec25 .caption-text-in{padding:10px;} .simImg_spec26{ background:#000;} .simImg_spec26 img {opacity:1;-webkit-transition:opacity .35s;transition:opacity .35s} .simImg_spec26:hover img {opacity:.4;} .simImg_spec26 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec26 .captionbg {position:absolute;top:2em;right:2em;bottom:2em;left:2em;width:auto;height:auto;border:2px solid #fff;box-shadow:0 0 0 30px rgba(255,255,255,.2);content:'';opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1);} .simImg_spec26 .caption-text{top:50%;top:2%\9; *top:2%; transform:translateY(-50%); -webkit-transform:translateY(-50%); } :root .simImg_spec26 .caption-text{ top:50%;} .simImg_spec26 .caption-text-in{padding:3em;} .simImg_spec26 h3{font-size:130%;-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-transition:-webkit-transform .35s;transition:transform .35s;} .simImg_spec26 p{opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:scale(1.5);transform:scale(1.5);} .simImg_spec26:hover h3 {-webkit-transform:none;transform:none;} .simImg_spec26:hover .captionbg,.simImg_spec26:hover p {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform:scale(1);transform:scale(1);} .simImg_spec27 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec27 .caption .caption-text{ height:100%; width:100%; padding:0;} .simImg_spec27 .captionbg{ opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .35s;transition:opacity .35s;} .simImg_spec27:hover .captionbg{ opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} .simImg_spec27 img,.simImg_spec27 p {-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s} .simImg_spec27:hover img {-webkit-transform:scale3d(1.5,1.5,1);transform:scale3d(1.5,1.5,1);} .simImg_spec27 h3 { font-size:130%; text-align:center;padding:1.5em 1em 0;-webkit-transform:scale3d(0.9,0.9,1);transform:scale3d(0.9,0.9,1);-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;} .simImg_spec27 p {position:absolute;bottom:0;left:0; right:0;margin:1em;padding:1.2em;border:2px solid #fff;text-transform:none;font-size:90%;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transform:scale3d(.8,.8,1);transform:scale3d(.8,.8,1);-webkit-transform-origin:50% -100%;transform-origin:50% -100%;} .simImg_spec27:hover p {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);} .simImg_spec27:hover h3{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1); } .simImg_spec28 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;transition:all .4s cubic-bezier(.88,-.99,0,1.81);} .simImg_spec28 .captionbg{ opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:opacity .35s;transition:opacity .35s;} .simImg_spec28:hover .captionbg{ opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} .simImg_spec28 .caption-text{top:50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); padding:0.5em 0;} :root .simImg_spec28 .caption-text{ top:50%;} .simImg_spec28 h3 { background:rgba(0,0,0,0.5); padding:0.5em 1.6em; transform:translateY(100%);transition:all .4s cubic-bezier(.88,-.99,0,1.81);} .simImg_spec28:hover h3{transform:none;} .simImg_spec28 p{opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);transform:scale(0);transition:all .4s cubic-bezier(.88,-.99,0,1.81);border:1px solid #fff;margin:1em;padding:1em;} .simImg_spec28:hover p{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); transform:scale(1);} .simImg_spec29 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec29 .captionbg {opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;} .simImg_spec29:hover .captionbg{ opacity:0.7;*filter:alpha(opacity=70); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);} .simImg_spec29 .caption-text{top:50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); padding:0.5em 0;} :root .simImg_spec29 .caption-text{ top:50%;} .simImg_spec29 img {-webkit-transition:all .2s linear;transition:all .2s linear;} .simImg_spec29:hover img {-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1);} .simImg_spec29 h3 {position: relative;padding: 0.6em 1em;background: rgba(0,0,0,.5);-webkit-transform:translateY(-100px);transform:translateY(-100px);opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;} .simImg_spec29 p { padding:0.6em 1.15em;-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition:all .2s linear;transition:all .2s linear;} .simImg_spec29:hover h3,.simImg_spec29:hover p{opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform:translateY(0px);transform:translateY(0px);} .simImg_spec29:hover p {-webkit-transition-delay:.1s;transition-delay:.1s;} .simImg_spec30 img {-webkit-transition:all .2s ease-in;transition:all .2s ease-in;} .simImg_spec30:hover img {-webkit-transform:scale(1.1,1.1);transform:scale(1.1,1.1);} .simImg_spec30 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec30 .captionbg{opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transform:translate(460px,-100px) rotate(180deg);transform:translate(460px,-100px) rotate(180deg);-webkit-transition:all .2s .4s ease-in-out;transition:all .2s .4s ease-in-out;} .simImg_spec30 .caption-text{top:50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); padding:0.5em 0;} :root .simImg_spec30 .caption-text{ top:50%;} .simImg_spec30 h3 {background:rgba(0,0,0,0.5); padding:0.6em 1em;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform:translateY(-100px);transform:translateY(-100px);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;} .simImg_spec30 p {padding:0.6em 1.15em;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transform:translateX(300px) rotate(90deg);transform:translateX(300px) rotate(90deg);-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;} .simImg_spec30:hover .captionbg {opacity:0.6;*filter:alpha(opacity=60); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(0px,0px);transform:translate(0px,0px);} .simImg_spec30:hover h3 {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform:translateY(0px);transform:translateY(0px);-webkit-transition-delay:.5s;transition-delay:.5s;} .simImg_spec30:hover p {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg);-webkit-transition-delay:.4s;transition-delay:.4s;} .simImg_spec31 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec31 .caption-text{top:50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); padding:0.5em 0;} :root .simImg_spec31 .caption-text{ top:50%;} .simImg_spec31 img {-webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out;opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec31 .captionbg {-webkit-transform: rotate(0deg) scale(1);transform: rotate(0deg) scale(1);opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;} .simImg_spec31 h3 { background:rgba(0,0,0,0.5); padding:0.6em 1em;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transform: translateY(-200px); transform: translateY(-200px);-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;} .simImg_spec31 p {padding:0.6em 1.15em;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transform: translateY(-200px);transform: translateY(-200px);-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;} .simImg_spec31:hover img {-webkit-transform: rotate(720deg) scale(0);transform: rotate(720deg) scale(0);opacity: 0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec31:hover .captionbg {opacity: 1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); -webkit-transition-delay: 0.4s; transition-delay: 0.4s;} .simImg_spec31:hover h3 {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.7s; transition-delay: 0.7s;} .simImg_spec31:hover p {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition-delay: 0.6s; transition-delay: 0.6s;} .simImg_spec32 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec32 .caption-text{top:50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); padding:0.5em 0;} :root .simImg_spec32 .caption-text{ top:50%;} .simImg_spec32 .caption-text-in{padding:0 1.2em;} .simImg_spec32 img {-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:all .7s ease-in-out;transition:all .7s ease-in-out;} .simImg_spec32 .captionbg {-webkit-transition:all .5s linear;transition:all .5s linear;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec32 h3 {padding:0.6em 0;border-bottom:1px solid rgba(255,255,255,.3);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:all .5s linear;transition:all .5s linear;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec32 p {padding:0.6em 0;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);-webkit-transform:scale(0);transform:scale(0); -webkit-transition:all .5s linear;transition:all .5s linear;} .simImg_spec32:hover img {-webkit-transform:scale(10);transform:scale(10);opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec32:hover .captionbg {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec32:hover h3,.simImg_spec32:hover p {-webkit-transform:scale(1);transform:scale(1);opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);} .simImg_spec33 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec33 .caption-text{top:50%;top:10%\9; *top:10%; transform:translateY(-50%); -webkit-transform:translateY(-50%); padding:0.5em 0;} :root .simImg_spec33 .caption-text{ top:50%;} .simImg_spec33 .caption-text-in{padding:0 1.2em;} .simImg_spec33 .captionbg { opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transition:all .3s ease-in .4s;transition:all .3s ease-in .4s;} .simImg_spec33 h3 {padding:0.6em 0;opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);border-bottom:1px solid rgba(255,255,255,.3);-webkit-transform:scale(10);transform:scale(10); -webkit-transition:all .3s ease-in-out .1s;transition:all .3s ease-in-out .1s;} .simImg_spec33 p {padding:0.6em 0; opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transform:scale(10);transform:scale(10); -webkit-transition:all .3s ease-in-out .2s;transition:all .3s ease-in-out .2s;} .simImg_spec33:hover .captionbg {opacity:0.85;*filter:alpha(opacity=85); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);} .simImg_spec33:hover h3 {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:.1s;transition-delay:.1s;} .simImg_spec33:hover p {opacity:1;*filter:alpha(opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:.2s;transition-delay:.2s;} .simImg_spec34 img {-webkit-transition:-webkit-transform .35s;transition:transform .35s;-webkit-transform:scale(1.1);transform:scale(1.1);} .simImg_spec34:hover img {-webkit-transform:scale(1);transform:scale(1);} .simImg_spec34 .caption{ position:absolute; left:0; top:0; width:100%; height:100%; color:#fff;} .simImg_spec34 .captionbg { opacity:0;*filter:alpha(opacity=0); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);} .simImg_spec34:hover .captionbg {opacity:0.85;*filter:alpha(opacity=85); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);} .simImg_spec34 .caption-text{ height:100%;} .simImg_spec34 .caption-text::before,.simImg_spec34 .caption-text::after {position:absolute;top:50%;left:50%;width:90%;height:1px;background:#fff; content:'';-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);} .simImg_spec34:hover .caption-text::before {opacity:.5;*filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);transform:translate3d(-50%,-50%,0) rotate(45deg);} .simImg_spec34:hover .caption-text::after {opacity:.5;*filter:alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); -webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);transform:translate3d(-50%,-50%,0) rotate(-45deg);} .simImg_spec34 h3,.simImg_spec34 p {position:absolute;top:50%;left:0;width:100%;padding:0.6em 5%;-webkit-transition:-webkit-transform .35s;transition:transform .35s;} .simImg_spec34 h3 {font-size:150%;-webkit-transform:translate3d(0,-130%,0);transform:translate3d(0,-130%,0);} .simImg_spec34 p {-webkit-transform:translate3d(0,1em,0);transform:translate3d(0,1em,0);line-height:1.5; max-height:3.5em; overflow:hidden;} .simImg_spec34:hover h3 {-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);} .simImg_spec34:hover p {-webkit-transform:translate3d(0,0.1em,0);transform:translate3d(0,0.1em,0);} @media (max-width:960px){ .simImg_spec .caption h3{ font-size:115%;} .simImg_spec p{ font-size:90%;} .simImg_spec12:hover .img{ bottom:4.2em;} .simImg_spec13:hover .img{ top:4.2em;} .simImg_spec14:hover .img{ bottom:4.2em; } .simImg_spec15:hover .img{ top:4.2em; } } /*图集新增优化*/ .w-multi-imgs .igBox{ position:relative;} .w-multi-imgs .igSize{position:absolute; left:0; top:0; overflow:hidden;}