
.border-box {
    position: relative;
    width: 100%;
    height: 100%;
}
.border-box::before,
.border-box::after {
    position: absolute;
    content: ' ';
    width: 0;
    height: 0;
    border: 3px solid transparent;
    box-sizing: border-box;
}
.border-box::before {
    top: 0;
    left: 0;
    /* 鼠标离开后的回退效果，如果不设置回退效果，则鼠标离开后就直接很生硬的隐藏了 */
    transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
.border-box::after {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
.border-box:hover:before,
.border-box:hover:after {
    width: 100%;
    height: 100%;
}
.border-box:hover{
    background-color:#fff;
    opacity:0.8;
}
.border-box:hover::after {
    border-bottom-color: #de7d60;
    border-left-color: #de7d60;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
.border-box:hover::before {
    border-top-color: #de7d60;
    border-right-color: #de7d60;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}
.backgroundcolor{
    background-color:#fafafa;
}
.content_modular{
    padding:3% 0;
    margin-top:0 !important;
}
.content_layout img:hover{
        background-color:#fff;
        opacity:0.8;
}
.arrow{
    float:right;
    color:#b45032;
}
.arrow::after{
    content:url('../../images/webico/ckzx/arrow.png')
}
.modular_left_layout{
    width:50%;
    float:left;
}
.modular_right_layout{
    width:50%;
    float:left;
}
.content_title_layout{
    border-bottom:2px solid #e6e6e6;
    display:table;
    width:100%;
}
.content_title{
    font-size:1.5em;
    font-weight:bold;
    padding-bottom:5px;
    border-bottom:3px solid #de7d60;
    display:table;
    float:left;
}
.zp_list{
    border-spacing:0;
    border-collapse:separate;
    margin:3% 0 0 0;
    width:100%;
}
.zp_list td{
    vertical-align:middle;
    padding-top:3%;
}
.zp_list td:last-child{
    text-align:right;
}
.qr_cord{
    width:10%;
    border: 1px solid #eeeeee;
    margin-top: 3%;
}
.contact_layout{
    line-height:2em;
}
@media screen and (min-device-width:371px) and (max-device-width: 420px) {
    .modular_left_layout{
        display:none;
    }
    .modular_right_layout{
        width:100%;
    }
}
@media screen and (min-device-width:320px) and (max-device-width: 370px) {
    .modular_left_layout{
        display:none;
    }
    .modular_right_layout{
        width:100%;
    }
}