.medical_guide_appointment {

    padding-top: 120px;

    padding-bottom: 130px
}



@media (max-width: 1440px) {

    .medical_guide_appointment {

        padding-top: 50px;

        padding-bottom: 50px
    }

}



@media (max-width: 1380px) {

    .medical_guide_appointment {

        padding-top: 30px;

        padding-bottom: 30px
    }

}



@media (max-width: 1180px) {

    .medical_guide_appointment {

        padding-bottom: 20px
    }

}



@media (max-width: 668px) {

    .medical_guide_appointment {

        padding-top: 20px;

        padding-bottom: 0
    }

}



@media (max-width: 668px) {

    .medical_guide_appointment {

        overflow: hidden
    }

}



.medical_guide_appointment .list {

    margin-top: 80px
}



@media (max-width: 1440px) {

    .medical_guide_appointment .list {

        margin-top: 50px
    }

}



@media (max-width: 668px) {

    .medical_guide_appointment .list {

        margin-top: 20px
    }

}



.medical_guide_appointment .list ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 66.66%;
}



.medical_guide_appointment .list ul li {
    display: block;
    width: 50%;
    padding: 0 20px
}

.medical_guide_appointment .list ul li.picture {
    margin-top: 30px;
    width: 100%;
}

.medical_guide_appointment .list ul li.picture img {
    width: 100%;
}


@media (max-width: 968px) {
    .medical_guide_appointment .list ul {
        width: 100%;
    }

    .medical_guide_appointment .list ul li {

        width: 100%;

        margin-bottom: 10px
    }

    .medical_guide_appointment .list ul li.picture {
        margin-top: 0;
    }
}



.medical_guide_appointment .list ul li .item {

    background: #fff;

    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1)
}





@media (max-width: 668px) {

    .medical_guide_appointment .list ul li .item {
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        height: auto!important;
    }

}



.medical_guide_appointment .list ul li .item .txt {

    position: relative;

    z-index: 2
}



.medical_guide_appointment .list ul li .item .txt b.t {

    display: block;

    text-align: center;

    font-size: 22px;

    color: #333
}



@media (max-width: 1380px) {

    .medical_guide_appointment .list ul li .item .txt b.t {

        font-size: 18px
    }

}



.medical_guide_appointment .list ul li .item .txt b.t:after {

    content: '';

    display: block;

    width: 26px;

    height: 2px;

    line-height: 2px;

    background-color: #777;

    margin: 15px auto
}



.medical_guide_appointment .list ul li .item .txt .des {

    font-size: 16px;

    line-height: 28px;

    color: #666
}



@media (max-width: 1380px) {

    .medical_guide_appointment .list ul li .item .txt .des {

        font-size: 14px;

        line-height: 24px
    }

}



.medical_guide_appointment .list ul li .item .txt .des.center {

    text-align: center
}



.medical_guide_appointment .list ul li .item .txt .des.qr img {

    max-width: 140px
}



.medical_guide_appointment .list ul li .item .txt .des.qr span {

    display: block
}

.medical_guide_appointment .list ul li .item .txt .des .group {
    display: grid;
    grid-template-columns: 35% 65%;
}

.medical_guide_appointment .list ul li .item .txt .des .group:not(:first-child) {
    margin-top: 8px;
}

.medical_guide_appointment .list ul li .item .txt .des .group-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.medical_guide_appointment .list ul li .item .txt .des .group-item {
    display: inline-block;
    width: 100%;
    text-align: right;
}

.medical_guide_appointment .list ul li .item .txt a.btn_appointment {

    display: block;

    width: 180px;

    height: 47px;

    border: 1px solid #2d9ac7;

    text-align: center;

    line-height: 45px;

    text-align: center;

    color: #2d9ac7;

    margin: 30px auto 0;

    border-radius: 40px;

    -webkit-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s
}



@media (max-width: 1380px) {

    .medical_guide_appointment .list ul li .item .txt a.btn_appointment {

        width: 160px;

        height: 42px;

        line-height: 40px
    }

}



@media (min-width: 1180px) {

    .medical_guide_appointment .list ul li .item .txt a.btn_appointment:hover {

        background: #2d9ac7;

        color: #fff
    }

}



.medical_guide_appointment .list ul li .col {

    width: 100%;

    height: 100%;

    padding: 75px;

    position: relative;

    overflow: hidden
}



@media (max-width: 1440px) {

    .medical_guide_appointment .list ul li .col {

        padding: 40px
    }

}



@media (max-width: 668px) {

    .medical_guide_appointment .list ul li .col {

        padding: 20px
    }

}



.medical_guide_appointment .list ul li .col:after {

    content: '';

    display: block;

    width: 330px;

    height: 330px;

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    position: absolute;

    right: -60px;

    bottom: -30px;

    z-index: 1
}



@media (max-width: 1440px) {

    .medical_guide_appointment .list ul li .col:after {

        width: 260px;

        height: 260px
    }

}



@media (max-width: 1380px) {

    .medical_guide_appointment .list ul li .col:after {

        width: 200px;

        height: 200px;

        display: none;
    }

}



.medical_guide_appointment .list ul li:nth-of-type(1) .col:after {

    background-image: url("../images/medical_guide_appointment01.png")
}



.medical_guide_appointment .list ul li:nth-of-type(2) .col:after {

    background-image: url("../images/medical_guide_appointment02.png")
}



.medical_guide_appointment .list ul li:nth-of-type(3) .col:after {

    background-image: url("../images/medical_guide_appointment03.png")
}