/*页码*/
/*页码*/
.b_info{ position: absolute; top:200px; z-index: 999; left:15%; width: 500px; color: #fff;}
.b_info h2{ font-size: 46px;}
.b_info h3{ margin-top: 1rem;font-size: 36px;}
/*详情页*/
.about_con p{  color: #666;  font-size: 14px;  line-height: 28px;  margin-bottom: 16px;  }
.about_name{  text-align: center;  padding-bottom: 20px;  font-size: 16px;  color: #333333;  }
.about-con {  text-align: center;  font-size: 14px;  margin-bottom: 15px;  color: #666666;  }
.about_title {  border-bottom: 1px solid #CCCCCC;  }
.about_con_bottom {  width: 1000px;  margin: 0 auto;  padding: 10px; /* border-top: 1px solid #ccc; */  }
.about_con_fanye {  font-size: 14px;  line-height: 26px;  color: #333;  float: left;  }
.about_con_fanye a {  color: #333;  -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -ms-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  }
.about_con_fanye a:hover{  color: #C20D23;  }
.about_fx {  float: right;  }
/*详情页*/
/*图片效果一*/
.chbimgbox{  height: 300px;  width: 300px;  }
.chbimg{overflow: hidden;position: relative;height: 300px;width: 300px;}
.chbimg img{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;}
.chbimgbg{ position: absolute; width: 300px; height: 300px; top: 0; background-color: #ccc; opacity: 0; filter:alpha(opacity=0); -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s;}
.chbimgbox:hover .chbimg img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
.chbimg:hover .chbimgbg{opacity: 0.8;filter:alpha(opacity=80);}
.chbimgtitle{ position: absolute; top: -10%; text-align: center; left: 0; right: 0; color: #000000; font-size: 14px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.chbimg:hover .chbimgtitle{ top: 30%; -webkit-transition: all 0.3s 0.8s; -moz-transition: all 0.3s 0.8s; -ms-transition: all 0.3s 0.8s; -o-transition: all 0.3s 0.8s; transition: all 0.3s 0.8s;}
.chbimgmore{ position: absolute; bottom: -10%; text-align: center; left: 0; right: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
.chbimgmore a{padding: 2px 6px;color: #ff0000;font-size: 14px;border: 1px solid #ff0000;}
.chbimg:hover .chbimgmore{ bottom: 30%; -webkit-transition: all 0.3s 0.8s; -moz-transition: all 0.3s 0.8s; -ms-transition: all 0.3s 0.8s; -o-transition: all 0.3s 0.8s; transition: all 0.3s 0.8s;}
/*图片效果一*/
/*图片效果二*/
.case-content{overflow:hidden;margin:80px auto 0 auto;width:1200px}
.case-item{float:left;margin:30px 40px;margin-bottom:20px}
.ih-item{position:relative;-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
.ih-item,.ih-item *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ih-item a{color:#333}
.ih-item a:hover{text-decoration:none}
.ih-item img{width:100%;height:100%}
.ih-item.circle,.ih-item.circle .img{position:relative;width:210px;height:210px;border-radius:50%}
.ih-item.circle .img:before{position:absolute;display:block;content:'';width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.3);-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;transition:all .35s ease-in-out}
.ih-item.circle .img img{border-radius:50%}
.ih-item.circle .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ih-item.square{position:relative;width:316px;height:216px;border:8px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,.3)}
.ih-item.square .info{position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ih-item.circle.effect1 .spinner{width:220px;height:220px;border:10px solid #ecab18;border-right-color:#1ad280;border-bottom-color:#1ad280;border-radius:50%;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.ih-item.circle.effect1 .img{position:absolute;top:10px;bottom:0;left:10px;right:0;width:auto;height:auto}
.ih-item.circle.effect1 .img:before{display:none}
.ih-item.circle.effect1.colored .info{background:#1a4a72;background:rgba(26,74,114,.6)}
.ih-item.circle.effect1 .info{top:10px;bottom:0;left:10px;right:0;background:#333;background:rgba(0,0,0,.6);opacity:0;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.ih-item.circle.effect1 .info h3{color:#fff;text-transform:uppercase;position:relative;letter-spacing:2px;font-size:24px;margin:0 30px;padding:55px 0 0;height:110px;text-shadow:0 0 1px white,0 1px 2px rgba(0,0,0,.3)}
.ih-item.circle.effect1 .info p{color:#bbb;padding:10px 5px;font-style:italic;margin:0 30px;font-size:12px;border-top:1px solid rgba(255,255,255,.5)}
.ih-item.circle.effect1 a:hover .spinner{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.ih-item.circle.effect1 a:hover .info{opacity:1}
/*图片效果二*/
/*图片效果三*/
.da-thumbs {list-style: none;width: 984px;position: relative;margin: 20px auto;padding: 0;}
.da-thumbs li {float: left;margin: 5px;background: #fff;padding: 8px;position: relative;box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.da-thumbs li a, .da-thumbs li a img {display: block;position: relative;}
.da-thumbs li a {overflow: hidden;}
.da-thumbs li a div {position: absolute;background: #333;background: rgba(75,75,75,0.7);width: 100%;height: 100%;}
.da-thumbs li a div span { display: block; padding: 10px 0; margin: 40px 20px 20px 20px; text-transform: uppercase; font-weight: normal; color: rgba(255,255,255,0.9); text-shadow: 1px 1px 1px rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,255,255,0.5); box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);}
.container{width: 100%;position: relative;min-height: 350px;}
.clr{clear: both;padding: 0;height: 0;margin: 0;}
.container > header{margin: 10px;padding: 20px 10px 10px 10px;position: relative;display: block;text-shadow: 1px 1px 1px rgba(0,0,0,0.2);text-align: center;}
.container > header > span{ font-family: 'Alegreya SC', Georgia, serif; font-size: 20px; line-height: 20px; display: block; font-weight: 400; font-style: italic; color: #719dab; text-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
.container > header h1{ font-size: 40px; line-height: 40px; margin: 0; position: relative; font-weight: 300; color: #498ea5; padding: 5px 0px; text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}
.container > header h1 span{font-weight: 700;}
.container > header h2{ font-size: 14px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; margin: 0; padding: 15px 0 5px 0; color: #6190ca; text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}
.container > header p{font-style: italic;color: #aaa;text-shadow: 1px 1px 1px rgba(255,255,255,0.7);}
/*图片效果三*/
/*图片效果4*/
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after { content: " "; display: block; background: white; position: absolute; z-index: 30; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after { width: 3px; height: 9999px; left: 50%; margin-left: -1.5px; }
.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {width: 9999px;height: 3px;top: 50%;margin-top: -1.5px; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {position: absolute;top: 0;width: 100%;height: 100%; }
.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;transition-duration: 0.5s; }
.twentytwenty-before-label, .twentytwenty-after-label {-webkit-transition-property: opacity;-moz-transition-property: opacity;transition-property: opacity; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {color: white;font-size: 13px;letter-spacing: 0.1em; }
.twentytwenty-before-label:before, .twentytwenty-after-label:before {position: absolute;background: rgba(255, 255, 255, 0.2);line-height: 38px;padding: 0 20px;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; }
.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {top: 50%;margin-top: -19px; }
.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {left: 50%;margin-left: -45px;text-align: center;width: 90px; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {width: 0;height: 0;border: 6px inset transparent;position: absolute; }
.twentytwenty-left-arrow, .twentytwenty-right-arrow {top: 50%;margin-top: -6px; }
.twentytwenty-up-arrow, .twentytwenty-down-arrow {left: 50%;margin-left: -6px; }
.twentytwenty-container {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;z-index: 0;overflow: hidden;position: relative;-webkit-user-select: none;-moz-user-select: none; }
.twentytwenty-container img {max-width: 100%;position: absolute;top: 0;display: block; }
.twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {background: rgba(0, 0, 0, 0); }
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
.twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label { opacity: 0; }
.twentytwenty-container * {-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box; }
.twentytwenty-before-label {opacity: 0; }
.twentytwenty-before-label:before {content: "Before"; }
.twentytwenty-after-label {opacity: 0; }
.twentytwenty-after-label:before {content: "After"; }
.twentytwenty-horizontal .twentytwenty-before-label:before {left: 10px; }
.twentytwenty-horizontal .twentytwenty-after-label:before {right: 10px; }
.twentytwenty-vertical .twentytwenty-before-label:before {top: 10px; }
.twentytwenty-vertical .twentytwenty-after-label:before {bottom: 10px; }
.twentytwenty-overlay {-webkit-transition-property: background;-moz-transition-property: background;transition-property: background;background: rgba(0, 0, 0, 0);z-index: 25; }
.twentytwenty-overlay:hover {background: rgba(0, 0, 0, 0.5); }
.twentytwenty-overlay:hover .twentytwenty-after-label {opacity: 1; }
.twentytwenty-overlay:hover .twentytwenty-before-label {opacity: 1; }
.twentytwenty-before {z-index: 20; }
.twentytwenty-after {z-index: 10; }
.twentytwenty-handle { height: 38px; width: 38px; position: absolute; left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border: 3px solid white; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px; -webkit-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); z-index: 40; cursor: pointer; }
.twentytwenty-horizontal .twentytwenty-handle:before { bottom: 50%; margin-bottom: 22px; -webkit-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after { top: 50%; margin-top: 22px; -webkit-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:before { left: 50%; margin-left: 22px; -webkit-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after { right: 50%; margin-right: 22px; -webkit-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); -moz-box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-left-arrow {border-right: 6px solid white;left: 50%;margin-left: -17px; }
.twentytwenty-right-arrow {border-left: 6px solid white;right: 50%;margin-right: -17px; }
.twentytwenty-up-arrow {border-bottom: 6px solid white;top: 50%;margin-top: -17px; }
.twentytwenty-down-arrow {border-top: 6px solid white;bottom: 50%;margin-bottom: -17px; }

.row {width: 100%;margin-left: auto;margin-right: auto;margin-top: 0;margin-bottom: 0;max-width: 62.5em;*zoom: 1;}
.row:before, .row:after {content: " ";display: table;}
.row:after {clear: both;}
.row.collapse .column, .row.collapse .columns {position: relative;padding-left: 0;padding-right: 0;float: left;}
.row .row {width: auto;margin-left: -0.9375em;margin-right: -0.9375em;margin-top: 0;margin-bottom: 0;max-width: none;*zoom: 1;}
.row .row:before, .row .row:after {content: " ";display: table;}
.row .row:after {clear: both;}
.row .row.collapse {width: auto;margin: 0;max-width: none;*zoom: 1;}
.row .row.collapse:before, .row .row.collapse:after {content: " ";display: table;}
.row .row.collapse:after {clear: both;}
.column, .columns {position: relative;padding-left: 0.9375em;padding-right: 0.9375em;width: 100%;float: left;}
@media only screen {
    .column,
    .columns {
        position: relative;
        padding-left: 0.9375em;
        padding-right: 0.9375em;
        float: left;
    }

    .small-1 {
        position: relative;
        width: 8.33333%;
    }

    .small-2 {
        position: relative;
        width: 16.66667%;
    }

    .small-3 {
        position: relative;
        width: 25%;
    }

    .small-4 {
        position: relative;
        width: 33.33333%;
    }

    .small-5 {
        position: relative;
        width: 41.66667%;
    }

    .small-6 {
        position: relative;
        width: 50%;
    }

    .small-7 {
        position: relative;
        width: 58.33333%;
    }

    .small-8 {
        position: relative;
        width: 66.66667%;
    }

    .small-9 {
        position: relative;
        width: 75%;
    }

    .small-10 {
        position: relative;
        width: 83.33333%;
    }

    .small-11 {
        position: relative;
        width: 91.66667%;
    }

    .small-12 {
        position: relative;
        width: 100%;
    }

    .small-offset-0 {
        position: relative;
        margin-left: 0%;
    }

    .small-offset-1 {
        position: relative;
        margin-left: 8.33333%;
    }

    .small-offset-2 {
        position: relative;
        margin-left: 16.66667%;
    }

    .small-offset-3 {
        position: relative;
        margin-left: 25%;
    }

    .small-offset-4 {
        position: relative;
        margin-left: 33.33333%;
    }

    .small-offset-5 {
        position: relative;
        margin-left: 41.66667%;
    }

    .small-offset-6 {
        position: relative;
        margin-left: 50%;
    }

    .small-offset-7 {
        position: relative;
        margin-left: 58.33333%;
    }

    .small-offset-8 {
        position: relative;
        margin-left: 66.66667%;
    }

    .small-offset-9 {
        position: relative;
        margin-left: 75%;
    }

    .small-offset-10 {
        position: relative;
        margin-left: 83.33333%;
    }

    [class*="column"] + [class*="column"]:last-child {
        float: right;
    }

    [class*="column"] + [class*="column"].end {
        float: left;
    }

    .column.small-centered,
    .columns.small-centered {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        float: none !important;
    }
}
@media (min-width: 1200px) and (max-width: 1366px) {
    .box {
        width: 96% !important;
        padding: 0 2%;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .box {
        width: 97% !important;
        padding: 0 1.5%;
    }

}
@media (min-width: 640px) and (max-width: 768px) {
    .box {
        width: 98% !important;
        padding: 0 1%;
    }

}

/* Styles for screens that are atleast 768px; */
@media only screen and (min-width: 768px) {
    .large-1 {
        position: relative;
        width: 8.33333%;
    }

    .large-2 {
        position: relative;
        width: 16.66667%;
    }

    .large-3 {
        position: relative;
        width: 25%;
    }

    .large-4 {
        position: relative;
        width: 33.33333%;
    }

    .large-5 {
        position: relative;
        width: 41.66667%;
    }

    .large-6 {
        position: relative;
        width: 50%;
    }

    .large-7 {
        position: relative;
        width: 58.33333%;
    }

    .large-8 {
        position: relative;
        width: 66.66667%;
    }

    .large-9 {
        position: relative;
        width: 75%;
    }

    .large-10 {
        position: relative;
        width: 83.33333%;
    }

    .large-11 {
        position: relative;
        width: 91.66667%;
    }

    .large-12 {
        position: relative;
        width: 100%;
    }

    .row .large-offset-0 {
        position: relative;
        margin-left: 0%;
    }

    .row .large-offset-1 {
        position: relative;
        margin-left: 8.33333%;
    }

    .row .large-offset-2 {
        position: relative;
        margin-left: 16.66667%;
    }

    .row .large-offset-3 {
        position: relative;
        margin-left: 25%;
    }

    .row .large-offset-4 {
        position: relative;
        margin-left: 33.33333%;
    }

    .row .large-offset-5 {
        position: relative;
        margin-left: 41.66667%;
    }

    .row .large-offset-6 {
        position: relative;
        margin-left: 50%;
    }

    .row .large-offset-7 {
        position: relative;
        margin-left: 58.33333%;
    }

    .row .large-offset-8 {
        position: relative;
        margin-left: 66.66667%;
    }

    .row .large-offset-9 {
        position: relative;
        margin-left: 75%;
    }

    .row .large-offset-10 {
        position: relative;
        margin-left: 83.33333%;
    }

    .row .large-offset-11 {
        position: relative;
        margin-left: 91.66667%;
    }

    .push-1 {
        position: relative;
        left: 8.33333%;
        right: auto;
    }

    .pull-1 {
        position: relative;
        right: 8.33333%;
        left: auto;
    }

    .push-2 {
        position: relative;
        left: 16.66667%;
        right: auto;
    }

    .pull-2 {
        position: relative;
        right: 16.66667%;
        left: auto;
    }

    .push-3 {
        position: relative;
        left: 25%;
        right: auto;
    }

    .pull-3 {
        position: relative;
        right: 25%;
        left: auto;
    }

    .push-4 {
        position: relative;
        left: 33.33333%;
        right: auto;
    }

    .pull-4 {
        position: relative;
        right: 33.33333%;
        left: auto;
    }

    .push-5 {
        position: relative;
        left: 41.66667%;
        right: auto;
    }

    .pull-5 {
        position: relative;
        right: 41.66667%;
        left: auto;
    }

    .push-6 {
        position: relative;
        left: 50%;
        right: auto;
    }

    .pull-6 {
        position: relative;
        right: 50%;
        left: auto;
    }

    .push-7 {
        position: relative;
        left: 58.33333%;
        right: auto;
    }

    .pull-7 {
        position: relative;
        right: 58.33333%;
        left: auto;
    }

    .push-8 {
        position: relative;
        left: 66.66667%;
        right: auto;
    }

    .pull-8 {
        position: relative;
        right: 66.66667%;
        left: auto;
    }

    .push-9 {
        position: relative;
        left: 75%;
        right: auto;
    }

    .pull-9 {
        position: relative;
        right: 75%;
        left: auto;
    }

    .push-10 {
        position: relative;
        left: 83.33333%;
        right: auto;
    }

    .pull-10 {
        position: relative;
        right: 83.33333%;
        left: auto;
    }

    .push-11 {
        position: relative;
        left: 91.66667%;
        right: auto;
    }

    .pull-11 {
        position: relative;
        right: 91.66667%;
        left: auto;
    }

    .column.large-centered,
    .columns.large-centered {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        float: none !important;
    }

    .column.large-uncentered,
    .columns.large-uncentered {
        margin-left: 0;
        margin-right: 0;
        float: left !important;
    }

    .column.large-uncentered.opposite,
    .columns.large-uncentered.opposite {
        float: right !important;
    }
}
/*图片效果4*/
/*图片效果5*/
.view { width: 300px; height: 200px; margin: 10px; border: 5px solid rgb(255, 255, 255); overflow: hidden; position: relative; text-align: center; box-shadow: 0px 0px 5px rgb(170, 170, 170); cursor: default; }
.view .mask, .view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0px; left: 0px; }
.view img { display: block; position: relative; }
.effect img { opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; transition: all 0.2s ease-in;}
.effect .mask { opacity:0; overflow:visible; border-color:rgba(0,0,0,0.7) transparent transparent transparent; border-style:solid; border-width:150px; width:0; height:0; -moz-transform:translateY(-125px); -webkit-transform:translateY(-125px); -o-transform:translateY(-125px); -ms-transform:translateY(-125px); transform:translateY(-125px); -moz-transition: -moz-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; -webkit-transition: -webkit-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; -o-transition: -o-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; -ms-transition: -ms-transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out; transition: transform 0.2s 0.1s ease-out, opacity 0.3s ease-in-out;}
.effect a.info { opacity:0; -moz-transform:translateY(-125px); -webkit-transform:translateY(-125px); -o-transform:translateY(-125px); -ms-transform:translateY(-125px); transform:translateY(-125px); -moz-transition: -moz-transform 0.3s ease-in, opacity 0.1s ease-in-out; -webkit-transition: -webkit-transform 0.3s ease-in, opacity 0.1s ease-in-out; -o-transition: -o-transform 0.3s ease-in, opacity 0.1s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in, opacity 0.1s ease-in-out; transition: transform 0.3s ease-in, opacity 0.1s ease-in-out;}
.effect:hover img { opacity:0.7; -moz-transform:scale(2,2); -webkit-transform:scale(2,2); -o-transform:scale(2,2); -ms-transform:scale(2,2); transform:scale(2,2);}
.effect:hover .mask { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px);}
.effect:hover a.info { opacity:1; -moz-transform:translateY(100px); -webkit-transform:translateY(100px); -o-transform:translateY(100px); -ms-transform:translateY(100px); transform:translateY(100px);}
.second-effect .mask { opacity: 0; overflow:visible; border:0px solid rgba(0,0,0,0.7); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.second-effect a.info { position:relative; top:-10px; opacity:0; -moz-transform:scale(0,0); -webkit-transform:scale(0,0); -o-transform:scale(0,0); -ms-transform:scale(0,0); transform:scale(0,0); -webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; -ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out; transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;}
.second-effect:hover .mask {opacity: 1;border:100px solid rgba(0,0,0,0.7);}
.second-effect:hover a.info { opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -moz-transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s; -ms-transition-delay:0.3s; transition-delay:0.3s;}

.view a.info { background: url('../images/link.png') no-repeat scroll center center transparent; display: inline-block; text-decoration: none; padding: 0px; text-indent: -9999px; width: 20px; height: 20px; }

.third-effect .mask { opacity: 0; overflow: visible; border: 100px solid rgba(0, 0, 0, 0.7); box-sizing: border-box; transition: all 0.4s ease-in-out 0s; }
.third-effect a.info { position: relative; top: -10px; opacity: 0; transition: opacity 0.5s ease-in-out 0s; }
.third-effect:hover .mask { opacity: 1; border: 100px solid rgba(0, 0, 0, 0.7); }
.third-effect:hover a.info { opacity: 1; transition-delay: 0.3s; }

.fourth-effect .mask { position: absolute; top: 50px; left: 100px; cursor: pointer; border-radius: 50px; display: inline-block; height: 100px; width: 100px; border: 50px solid rgba(0, 0, 0, 0.7); box-sizing: border-box; opacity: 1; visibility: visible; transform: scale(4); transition: all 0.3s ease-in-out 0s; }
.fourth-effect:hover .mask { opacity: 0; border: 0px solid rgba(0, 0, 0, 0.7); visibility: hidden; }
/* FIFTH EFFECTS */
.fifth-effect img { opacity:0.2; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
.fifth-effect .mask { cursor:pointer; opacity:1; visibility:visible; border:100px solid rgba(0,0,0,0.7); -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); -webkit-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); -o-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); -ms-transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620); transition: all 0.4s cubic-bezier(0.940, 0.850, 0.100, 0.620);}
.fifth-effect:hover .mask {border:0px double rgba(0,0,0,0.7);opacity:0;visibility:hidden;}
.fifth-effect:hover img {opacity:1;}
/*图片效果5*/
/*图片效果6*/
div.flip-3d {
    perspective: 1200px;
    width: 30%;
    float: left;
}
div.flip-3d .figure {
    position: relative;
    transform-style: preserve-3d;
    transition: 1s transform;
    font-size: 1.6rem;
}
div.flip-3d .figure img {
    width: 100%;
    height: auto;
}
div.flip-3d .figure figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: rotateY(.5turn) translateZ(1px);
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding-top: 45%;
    opacity: 0.6;
    transition: 1s .5s opacity;
}
div.flip-3d:hover .figure {
    transform: rotateY(.5turn);
}
div.flip-3d:hover .figure figcaption {
    opacity: 1;
}
div.flip-3d .figure:after {
    content: " ";
    display: block;
    height: 8vw;
    width: 100%;
    transform: rotateX(90deg);
    background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}
/*图片效果6*/
.foot_bottom_r_con_ewm{
    position: relative;
}
.eewm{
    display: block;
    width: 56px;
    height: 56px;
    position: absolute;
}
.eewm .eewmw{
    position: absolute;
    bottom: 0;
    opacity: 0;
    transition: all .4s;
    -moz-transition: all .4s;	/* Firefox 4 */
    -webkit-transition: all .4s;	/* Safari 和 Chrome */
    -o-transition: all .4s;	/* Opera */
    left: -3px;
    pointer-events: none;
}
.eewm .eewmz{
    position: absolute;
}
.eewm:hover .eewmw{
    z-index: 99;
    bottom: 60px;
    opacity: 1;
    transition: all .4s;
    -moz-transition: all .4s;	/* Firefox 4 */
    -webkit-transition: all .4s;	/* Safari 和 Chrome */
    -o-transition: all .4s;	/* Opera */
}
.foot_bottom_r_con_fx{
    position: relative;
}
.eewmw{
    position: absolute;
    left:49px;
}