@font-face {
  font-family: 'icomoon';
  src:  url('../font/icomoon1.eot');
  src:  url('../font/icomoon1.eot') format('embedded-opentype'),
    url('../font/icomoon1.ttf') format('truetype'),
    url('../font/icomoon1.woff') format('woff'),
    url('../font/icomoon1.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pro2:before {
  content: "\e900";
}
.icon-pro3:before {
  content: "\e901";
}
.icon-pro1:before {
  content: "\e902";
}
.icon-tips-warning:before {
  content: "\e903";
}
.icon-app:before {
  content: "\e904";
}
.icon-cmdb:before {
  content: "\e905";
}
.icon-dataview:before {
  content: "\e906";
}
.icon-email:before {
  content: "\e907";
}
.icon-itim:before {
  content: "\e908";
}
.icon-net:before {
  content: "\e909";
}
.icon-npm:before {
  content: "\e90a";
}
.icon-one:before {
  content: "\e90b";
}
.icon-onealert:before {
  content: "\e90c";
}
.icon-phone:before {
  content: "\e90d";
}
.icon-reejoin:before {
  content: "\e90e";
}
.icon-rum:before {
  content: "\e90f";
}
.icon-server:before {
  content: "\e910";
}
.icon-stock:before {
  content: "\e911";
}
.icon-vx:before {
  content: "\e912";
}
.icon-play:before {
  content: "\e913";
}
.icon-address:before {
  content: "\e914";
}
.icon-home:before {
  content: "\e915";
}


    .Mask_layer_style {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100% ;
        height: 100% ;
        /*background: #eee ;*/
        overflow: hidden;
    }

    .Mask_layer_style .border_list {
        position: absolute;
        z-index: 9;
        left: 1em;
        top: 1em;
        right: 1em;
        bottom: 1em;
    }

    .Mask_layer_style .border_list .border {
        position: absolute;
        z-index: 1;
        background-color: #fff;
    }

    .Mask_layer_style .border_list .border.b_t {
        left: 0%;
        right: 100%;
        top: 0;
        height: 1px;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style .border_list .border.b_r {
        top: 0%;
        bottom: 100%;
        right: 0;
        width: 1px;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style .border_list .border.b_b {
        left: 0%;
        right: 100%;
        bottom: 0;
        height: 1px;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style .border_list .border.b_l {
        top: 0%;
        bottom: 100%;
        left: 0;
        width: 1px;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style::after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 8;
        background-color: #DE262E;
        opacity: 0;
        -webkit-transition: all 600ms ease 0s;
        transition: all 600ms ease 0s;
        -webkit-clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
        clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
    }

    .Mask_layer_style .content {
        position: absolute;
        z-index: 10;
        width: 100%;
        text-align: center;
        color: #fff;
        -webkit-transition: all 250ms ease 0ms;
        transition: all 250ms ease 0ms;
        opacity: 0;
        filter: alpha(opacity=0);
        visibility: hidden;
        top: 50%;
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
            left: 0px;
    }

    .Mask_layer_style .content h3 {
        margin-top: .75em;
        margin-left: 2em;
        margin-right: 2em;
        margin-bottom: 1em;
        position: relative;
        line-height: 1.25;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .Mask_layer_style .content::after {
        content: " ";
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: #ffffff solid 1px;
        background-image: url(https://yanshi.92wailian.com/k686/skin/images/arrow-pdtitem.png);
        background-size: auto;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        opacity: 0;
        -webkit-transition: all 220ms ease 0s, all 220ms ease 0s;
        transition: all 220ms ease 0s, all 220ms ease 0s;
        -webkit-transform: rotate(90deg) translateX(10px) scale(0.8);
        transform: rotate(90deg) translateX(10px) scale(0.8);
    }

    .Mask_layer_style:hover .border_list .border.b_t {
        left: 0;
        right: 0;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style:hover .border_list .border.b_r {
        top: 1em;
        bottom: 1em;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style:hover .border_list .border.b_b {
        left: 0;
        right: 0;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style:hover .border_list .border.b_l {
        top: 1em;
        bottom: 1em;
        -webkit-transition: all 340ms linear 150ms;
        transition: all 340ms linear 150ms;
    }

    .Mask_layer_style:hover::after {
        -webkit-clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
        clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
        opacity: 1 ;
    }

    .Mask_layer_style:hover .content {
        -webkit-transition: all 300ms ease 200ms, -webkit-transform 500ms ease 200ms;
        transition: all 300ms ease 200ms, -webkit-transform 500ms ease 200ms;
        transition: all 300ms ease 200ms, transform 500ms ease 200ms;
        transition: all 300ms ease 200ms, transform 500ms ease 200ms, -webkit-transform 500ms ease 200ms;
        opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .Mask_layer_style:hover .content::after {
        -webkit-transform: rotate(90deg) translateX(0);
        transform: rotate(90deg) translateX(0);
        opacity: 1;
        -webkit-transition: opacity 300ms ease 340ms, -webkit-transform 400ms ease 440ms;
        transition: opacity 300ms ease 340ms, -webkit-transform 400ms ease 440ms;
        transition: opacity 300ms ease 340ms, transform 400ms ease 440ms;
        transition: opacity 300ms ease 340ms, transform 400ms ease 440ms, -webkit-transform 400ms ease 440ms;
    }