.appointment .banner .text{position:absolute;left:0;top:0;background-color:rgba(15, 157, 101, 0.5);width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.appointment .banner .text h2{font-size:.36rem;color:#fff;font-weight:bold;margin-bottom:.15rem}
.appointment .banner .text p{font-size:.18rem;color:#fff;border-top:1px solid #fff;border-bottom:1px solid #fff;padding:0 .1rem;line-height:1.75}
.appointment .banner .text p.button{border:none;border-radius:.3rem;color:var(--main);background:#fff;margin-top:.3rem;line-height:2.5;padding:0 .5rem;font-weight:bold}
.appointment .content{display:flex;padding-top:.2rem;max-width:1360px}
.appointment .content .l{width:calc(100% - 359px - 13px);margin-right:13px;background:#fff;border-radius:.1rem;box-shadow:0 0 4px 0 rgb(0 0 0 / 0.25);padding:.25rem;box-sizing:border-box}
.appointment .content .l h1{font-size:.24rem;color:var(--main);text-align:center;font-weight:bold;border-bottom:1px solid #dcdcdc;line-height:1;padding-bottom:.15rem;margin-bottom:.15rem}
.appointment .content .l .form-list{margin:.2rem 12.5%;width:75%}
.appointment .content .l .form-list .list{background:none;display:flex;margin-bottom:.15rem}
.appointment .content .l .form-list .list .input{flex:1;display:flex;flex-direction:column}
.appointment .content .l .form-list .list .input:last-child{margin-left:5%}
.appointment .content .l .form-list .list .input label{padding-left:6px;position:relative;font-size:.2rem;color:var(--color);font-weight:bold;margin-bottom:.1rem}
.appointment .content .l .form-list .list .input label:before{content:"";position:absolute;left:0;top:15%;width:3px;height:70%;background:var(--color)}
.appointment .content .l .form-list .list .input input,
.appointment .content .l .form-list .list .input select,
.appointment .content .l .form-list .list .input textarea
{width:100%;height:.4rem;line-height:.4rem;outline:none;padding:0 .1rem;box-sizing:border-box;border-radius:5px;background:#f5f5f5;border:1px solid #C4C3C3;font-size:.2rem;resize:none}
.appointment .content .l .form-list .list .input textarea{height:.42rem}
.appointment .content .l .form-list .list .input input:hover,.appointment .content .l .form-list .list .input input:focus{border-color:var(--main)}
.appointment .content .l .form-list .list .input select:hover,.appointment .content .l .form-list .list .input select:focus{border-color:var(--main)}
.appointment .content .l .form-list .list .input textarea:hover,.appointment .content .l .form-list .list .input textarea:focus{border-color:var(--main)}
.appointment .content .l .form-list .list .input.tel{flex-wrap:wrap;flex-direction:row}
.appointment .content .l .form-list .list .input.tel label{width:100%}
.appointment .content .l .form-list .list .input.tel select{width:27.5%;margin-right:2.5%}
.appointment .content .l .form-list .list .input.tel input{width:70%}
.appointment .content .l .form-list .list .input.remark{margin-left:0}
.appointment .content .l .tip{text-align:center;font-size:.18rem;color:#ff0a0a;margin-top:1rem}
.appointment .content .l .submit{width:60%;margin:.1rem 20%;text-align:center;background:var(--main);border-radius:.1rem;color:#fff;font-size:.2rem;line-height:2.25;cursor:pointer}
.appointment .content .l .submit:hover{background:#0a7a4d}
.appointment .content .l .que{text-align:center}
.appointment .content .l .que a{color:#9b9898;font-size:.18rem}
.appointment .content .r{width:359px;background:#fff;border-radius:.1rem;box-shadow:0 0 4px 0 rgb(0 0 0 / 0.25);padding:.25rem;box-sizing:border-box}
.appointment .content .r h3{font-size:.24rem;color:var(--main);text-align:center;font-weight:bold;border-bottom:1px solid #dcdcdc;line-height:1;padding-bottom:.15rem;margin-bottom:.15rem}
.appointment .content .r p{font-size:.18rem;color:var(--color);line-height:1.35}
.appointment .content .r .doc{display:flex;margin:.1rem 0;align-items:center}
.appointment .content .r .doc p{font-size:.14rem}
.appointment .content .r .doc .img{max-width:80px}
.appointment .content .r .doc .text{margin:0 .15rem}
.appointment .content .r .doc .text h2{font-size:.2rem;color:var(--main);line-height:1.5;font-weight:bold}
.appointment .content .r .doc .text p{font-size:.14rem;color:var(--color)}
.appointment .content .r .doc .medal{text-align:center}
.appointment .content .r .doc .medal img{max-width:47px}
.appointment .content .r .doc .medal p{font-size:.12rem;color:#949191;margin-top:2px}
.appointment .content .r .desc{background-color:rgba(15, 157, 101, 0.1);border-radius:.1rem;padding:.1rem;box-sizing:border-box}
.appointment .content .r .desc p{font-size:.18rem;color:var(--color);line-height:1.5}
.appointment .content .r .desc p.last{text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.appointment .content .r .button{margin:.1rem 0}
.appointment .content .r .button a{display:block;width:100%;border-radius:.3rem;background:var(--main);color:#fff;font-size:.24rem;line-height:2;text-align:center}
.appointment .content .r .button a:hover{background-color:#0a7a4d}
.appointment .content .r .info{text-align:center;color:var(--main);font-size:.18rem}
@media screen and (max-width: 1500px){
    .appointment .content .l .form-list{width:90%;margin:.2rem 5%}
}
@media screen and (max-width: 997px){
    .appointment .banner .text h2{font-size:.42rem}
    .appointment .banner .text p{font-size:.32rem}
    .appointment .banner .text p.button{border-radius:.5rem}
    .appointment .content{display:block}
    .appointment .content .l{width:100%;margin-bottom:.3rem;text-align:center}
    .appointment .content .l h1{font-size:.4rem}
    .appointment .content .l .form-list{margin:.2rem 0;width:100%}
    .appointment .content .l .form-list .list{flex-wrap:wrap;margin-bottom:0}
    .appointment .content .l .form-list .list .input{width:100%;flex:auto;margin-bottom:.25rem}
    .appointment .content .l .form-list .list .input:last-child{margin-left:0}
    .appointment .content .l .form-list .list .input label{font-size:.32rem;text-align:left}
    .appointment .content .l .form-list .list .input input,.appointment .content .l .form-list .list .input select{height:.6rem;line-height:.6rem;font-size:.32rem}
    .appointment .content .l .form-list .list .input textarea{height:1.6rem;font-size:.32rem}
    .appointment .content .l .form-list .list .input.tel select{width:21.5%}
    .appointment .content .l .form-list .list .input.tel input{width:76%}
    .appointment .content .l .tip{font-size:.28rem;margin-top:0;text-align:left}
    .appointment .content .l .submit{width:auto;font-size:.32rem;padding:0 .5rem;margin:.1rem 0;display:inline-block}
    .appointment .content .l .que{display:none}
    .appointment .content .r{width:100%}
    .appointment .content .r h3{font-size:.4rem}
    .appointment .content .r p{font-size:.32rem;line-height:1.5}
    .appointment .content .r .doc .img img{width:1.6rem}
    .appointment .content .r .doc .text{margin-left:.3rem}
    .appointment .content .r .doc .text h2{font-size:.36rem}
    .appointment .content .r .doc .text p{font-size:.28rem}
    .appointment .content .r .doc .medal{margin-left:auto}
    .appointment .content .r .doc .medal img{width:.6rem}
    .appointment .content .r .doc .medal p{font-size:.22rem}
    .appointment .content .r .desc p{font-size:.32rem}
    .appointment .content .r .button a{font-size:.36rem}
    .appointment .content .r .info{font-size:.32rem}
}