.plan {background:#F6F6F6 no-repeat left bottom;padding:100px 0;}
.plan .width {display:flex;justify-content:space-between;margin-top:70px}
.plan ul {width:500px;}
.plan li {display:flex;margin-bottom:34.5px;cursor:pointer}
.plan li:last-child {margin-bottom:0}
.plan li .icon {width: 78px;height: 78px;position: relative;margin-right:30px;}
.plan li img {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.plan li .icon .progress {position: absolute;width: 60px;height: 60px;background-color: #F6F6F6;border-radius: 50%;left: 9px;top: 9px;line-height: 60px;text-align: center;}
.plan li .icon .left,.plan li .icon .right {width: 39px;height: 78px;overflow: hidden;position: relative;float: left;background-color: #1b4b87;}
.plan li .icon .left {border-radius: 39px 0 0 39px;  }
.plan li .icon .right {border-radius: 0 39px 39px 0;  }
.plan li .icon .left:after,.plan li .icon .right:after {content: "";position: absolute;display: block;width: 39px;height: 78px;border-radius: 39px 0 0 39px;background-color: RGB(217,217,217,0.9);animation-timing-function: linear;animation-duration: 5s}
.plan li .icon .right:after {content: "";position: absolute;display: block;border-radius: 0 39px 39px 0;  }
.plan li .icon .left:after {transform-origin: right center;}
.plan li .icon .right:after {transform-origin: left center;}
.plan li.active .icon .left:after {animation-name: spin-left;}
.plan li.active .icon .right:after {animation-name: spin-right;}
@keyframes spin-right {
    0 {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(180deg);}
}

@keyframes spin-left {
    0 {transform: rotate(0deg);}
    50% {transform: rotate(0deg);}
    100% {transform: rotate(180deg);}
}

.plan li .txt {display:flex;justify-content:center;flex-direction:column;width:340px;}
.plan li .name {font-size:18px;font-weight:bold;margin-bottom:10px}
.plan li .note {
    font-size:14px;
    color:#999;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    line-height: 1.5em;
}
.plan .content {cursor: pointer;width:750px;display:none;height:100%;position:relative;overflow:hidden;border-radius:20px}
.plan .content img {width:100%;height:500px;transition:all 0.5s}
.plan .content:hover img {transform:scale(1.2);transition:all 0.5s}
.plan .content .info {width:900px;height:50px;position:absolute;bottom:70px;left:44px;display:flex;justify-content:space-between;align-items:center;}
.plan .content .info .txt {width:690px}
.plan .content .info .name {font-size:28px;margin-bottom:10px;color:#fff;}
.plan .content .info .note {color:#fff;line-height: 25px;} 

@media only screen and (max-width:750px){
    .plan{background:#F6F6F6;padding:30px 0 15px;}
    .plan .width{display:block;justify-content:initial;margin-top:20px;width: 100%;}
    .plan ul{width:auto;display:flex;overflow-x:auto;overflow:auto;white-space:nowrap;padding-left:15px;background:#eee}
    .plan li{display:block;margin-bottom:0;margin-right:15px;padding:10px 0}
    .plan li.active{border-bottom:1px #1b4b87 solid}
    .plan li .icon{display:none}
    .plan li .txt{display:block;justify-content:initial;width:auto;}
    .plan li .name{font-size:14px;text-align:center;font-weight:normal;margin-top:10px}
    .plan li .note{display:none}
    .plan .content{
        /* width:calc(100% - 940px); */
        width: 90%;
        margin:20px;height:auto}
    .plan .content img{width:100%;height:auto}
    .plan .content:hover img{transform:scale(1);}
    .plan .content .info{width:100%;height:auto;position:static;display:block}
    .plan .content .info .name{font-size:16px;margin:10px 0;color:#324856}
    .plan .content .info .note{line-height:22px}
    .plan .content .info a{width:110px;margin:20px auto;height:40px;line-height:40px;background:#1b4b87 url(../images/dot1.png) no-repeat 80px center;padding-left:20px;border:0 !important}
    .plan .content .info a:hover{width:110px;background:#1b4b87 url(../images/dot1.png) no-repeat 80px center}
}


.width{ width: 1300px;margin:0 auto}