/****/
.flex {
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;}
.list11{ margin: 0 -22px;}
.list11 li{ width: 25%; padding: 0 22px; margin-bottom: 40px;}
.list11 .con{ display: block; padding: 20px; position: relative; z-index: 1;background: #fff;overflow: hidden;}
.list11 .con:before{ content: ""; position: absolute; top: 40px; right: 0; bottom: 0; left: 0; border: #1a2954 1px solid; z-index: -1;transition: .5s;}
.list11 .a{ display: block; padding: 0 6px 6px 0;overflow: hidden;transition: .5s; position: relative; z-index: 1;}
.list11 .a::before{ content: ""; position: absolute; top: 40px; right: 0; bottom: 0; background: #1a2954; z-index: -1;width: 6px;transform-origin: left top;transform: skewY(30deg);transition: .5s;}
.list11 .a::after{ content: ""; position: absolute; right: 0; bottom: 0; left: 0; background: #1a2954; z-index: -1;height: .06rem;transform-origin: left top;transform: skewX(30deg);transition: .5s;}

.list11 .img .imgLi{position: relative;
    padding-top: 125%;}
.list11 .img .imgLi img{position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;}
.list11 h3{ line-height: 1.375;margin: 14px 0 0;}
.list11 h3 big{ font-size: 28px; color: #000000;}
.list11 h3 small{ font-size: 16px; color: #666666; margin: 0 0 0 10px;}
.list11 p{ margin: 8px 0;}
.list11 svg{ width:24px; height: 24px; fill:#1a2954; transition: .5s;}

.n_pad2{ padding: 100px 0;}

@media(min-width: 1024px){
    .list11 .a:hover::before, .list11 .a:hover::after{background: #143ca5;}
    .list11 .a:hover .con:before{border: #143ca5 1px solid;}

    .list11 .a:hover svg{fill: #143ca5;transform: rotate(45deg);}
}
@media(max-width: 1024px){
    .list11 li{ width: 50%;}
}
@media(max-width: 800px){
    .list11{ margin: 0 -7px;}
    .list11 li{ padding: 0 7px; margin-bottom: 15px;}
    
    .list11 h3 big{ font-size: 22px;}
    .list11 h3 small{ font-size: 14px;}

    .n_pad2{ padding: 40px 0 50px;}
}