.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;flex-wrap:wrap}
.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}
.appointment .content .arrival-guide{--arrival-green:var(--main, #0f9d66);--arrival-nine:#806044;--arrival-four:#b62939;position:relative;width:100%;min-width:0;margin:.2rem 0;padding:.22rem .26rem;background:#fff;border:1px solid #e0e8e3;border-radius:.1rem;color:#30463c;font-family:inherit;font-size:.18rem;line-height:1.5;scroll-margin-top:100px;-webkit-user-select:text;user-select:text}
.appointment .content .arrival-guide *{box-sizing:border-box}
.appointment .content .arrival-guide [hidden]{display:none !important}
.appointment .content .arrival-guide h2,.appointment .content .arrival-guide p,.appointment .content .arrival-guide ol{margin:0;padding:0}
.appointment .content .arrival-guide a{text-decoration:none}
.appointment .content .arrival-guide button{font:inherit;cursor:pointer}
.appointment .content .arrival-guide a:focus-visible,.appointment .content .arrival-guide button:focus-visible,.appointment .content .arrival-panel:focus-visible{outline:2px solid var(--arrival-green);outline-offset:4px}
.appointment .content .arrival-anchor{position:absolute;top:0;scroll-margin-top:100px}
.appointment .content .arrival-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:.18rem}
.appointment .content .arrival-guide .arrival-heading h2{font-size:.24rem;font-weight:700;line-height:1.4;color:var(--arrival-green)}
.appointment .content .arrival-heading p{color:#53685b;font-size:.16rem;margin-top:4px}
.appointment .content .arrival-notice strong{font-weight:700}
.appointment .content .arrival-heading .arrival-service-link{color:var(--arrival-green);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.appointment .content .arrival-heading .arrival-service-link:hover{color:#08794f}
.appointment .content .arrival-guide .arrival-button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;gap:9px;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--arrival-green);border-radius:6px;background:var(--arrival-green);color:#fff;font-size:.18rem;font-weight:600;white-space:nowrap;box-shadow:0 3px 10px rgba(15, 157, 102, .17);animation:arrival-cta-attention 3.6s ease-in-out infinite;transition:background .2s, box-shadow .2s, transform .2s}
.appointment .content .arrival-guide .arrival-button:before{content:"";position:absolute;z-index:0;top:-50%;bottom:-50%;left:-45%;width:35%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);transform:skewX(-18deg);animation:arrival-cta-shine 3.6s ease-in-out infinite}
.appointment .content .arrival-button>*{position:relative;z-index:1}
.appointment .content .arrival-button svg{width:23px;height:23px;animation:arrival-car-nudge 3.6s ease-in-out infinite}
.appointment .content .arrival-guide .arrival-button:hover{animation:none;background:#08794f;box-shadow:0 6px 16px rgba(15, 157, 102, .25);transform:translateY(-2px)}
.appointment .content .arrival-button:hover:before,.arrival-button:hover svg{animation:none}
.appointment .content .arrival-button>span:last-child{transition:transform .2s}
.appointment .content .arrival-button:hover>span:last-child{transform:translateX(3px)}
.appointment .content .arrival-tabs{position:relative;display:flex;gap:6px;border-bottom:1px solid #e3eae5;isolation:isolate}
.appointment .content .arrival-tabs:before{content:"";position:absolute;bottom:0;left:0;height:100%;width:var(--tab-width, 0px);transform:translateX(var(--tab-left, 0px));border-bottom:3px solid var(--arrival-green);border-radius:7px 7px 0 0;background:#edf7f1;z-index:-1;transition:transform .3s cubic-bezier(.22, .61, .36, 1), width .3s}
.appointment .content .arrival-tabs button{position:relative;padding:10px 28px;border:0;background:transparent;color:#77817b;font-weight:600;font-size:.2rem;min-height:46px;transition:color .2s}
.appointment .content .appointment .content .arrival-tabs button:hover,.appointment .content .arrival-tabs button[aria-selected=true]{color:var(--arrival-green)}
.appointment .content .arrival-tabs:not(.is-enhanced) button[aria-selected=true]{background:#edf7f1;box-shadow:inset 0 -3px var(--arrival-green)}
.appointment .content .arrival-panel{margin-top:14px;border-radius:8px;background:radial-gradient(circle, #dce8df 1px, transparent 1px) 0 0/16px 16px, linear-gradient(120deg, #f5faf7, #fafbf9);padding:22px 20px 20px}
.appointment .content .arrival-guide .arrival-track{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));list-style:none}
.appointment .content .arrival-track li{--track-color:var(--arrival-nine);--step:0;position:relative;min-width:0;padding:50px 20px 0 0}
.appointment .content .arrival-track li:nth-child(2){--step:1}
.appointment .content .arrival-track li:nth-child(3){--step:2}
.appointment .content .arrival-track li:nth-child(4){--step:3}
.appointment .content .arrival-track li.four{--track-color:var(--arrival-four)}
.appointment .content .arrival-track li.road,.appointment .content .arrival-track li.destination{--track-color:var(--arrival-green)}
.appointment .content .arrival-track li.walk{--track-color:#7e9387}
.appointment .content .arrival-node{position:absolute;left:0;top:0;display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--track-color);border-radius:50%;background:#fff;color:var(--track-color);z-index:2;box-shadow:0 0 0 5px #f5faf7;transition:transform .2s, box-shadow .2s}
.appointment .content .arrival-node svg{width:21px;height:21px}
.appointment .content .interchange .arrival-node{box-shadow:0 0 0 3px #f5faf7, 0 0 0 5px var(--arrival-nine);border-color:var(--arrival-four);color:var(--arrival-nine)}
.appointment .content .destination .arrival-node{background:var(--arrival-green);color:#fff;box-shadow:0 0 0 5px #ddf0e5}
.appointment .content .arrival-segment{position:absolute;top:17px;left:36px;right:0;height:3px;background:var(--track-color);opacity:.65}
.appointment .content .walk .arrival-segment{background:repeating-linear-gradient(90deg, var(--track-color) 0 5px, transparent 5px 10px);height:2px}
.appointment .content .arrival-segment:after{content:"";position:absolute;right:12px;top:-3px;width:8px;height:8px;border-top:2px solid var(--track-color);border-right:2px solid var(--track-color);transform:rotate(45deg)}
.appointment .content .arrival-segment i{position:absolute;top:-3px;left:0;width:9px;height:9px;border-radius:50%;background:var(--track-color);box-shadow:0 0 0 4px rgba(255, 255, 255, .79);opacity:0}
.appointment .content .arrival-track li:last-child{padding-right:0}
.appointment .content .arrival-track strong{font-size:.2rem;line-height:1.5;font-weight:700}
.appointment .content .arrival-track em{display:inline-block;vertical-align:2px;font-style:normal;font-weight:500;font-size:.14rem;color:#426750;border:1px solid #cedfd2;border-radius:4px;padding:0 5px;white-space:nowrap;background:#fff}
.appointment .content .arrival-track p{margin-top:6px;font-size:.16rem;line-height:1.65;color:#607366}
.appointment .content .arrival-track p a{display:inline-block;color:#078658;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.appointment .content .arrival-line{display:inline-block;padding:0 5px;margin-right:3px;border-radius:4px;font-size:.14rem;font-weight:500;color:#fff;white-space:nowrap}
.appointment .content .arrival-line.nine{background:var(--arrival-nine)}
.appointment .content .arrival-line.four{background:var(--arrival-four)}
.appointment .content .arrival-panel.is-playing .arrival-station{animation:arrival-enter .38s both;animation-delay:calc(var(--step) * .09s)}
.appointment .content .arrival-panel.is-playing .arrival-segment i{animation:arrival-travel .65s linear both;animation-delay:calc(var(--step) * .65s)}
.appointment .content .arrival-panel.is-playing .arrival-node{animation:arrival-stop .55s ease-out;animation-delay:calc(var(--step) * .65s)}
@media (hover:hover){
    .appointment .content .arrival-track li:hover .arrival-node{transform:translateY(-3px)}
    .appointment .content .arrival-track li:hover strong{color:var(--track-color)}
}
@media (prefers-reduced-motion:reduce){
    .appointment .content .arrival-guide *,.arrival-guide *:before,.appointment .content .arrival-guide *:after{animation:none !important;transition:none !important}
    .appointment .content .arrival-segment i{display:none}
}
@media (max-width:991px) and (min-width:721px){
    .appointment .content .arrival-track strong{font-size:18px}
    .appointment .content .arrival-track p{font-size:15px}
    .appointment .content .arrival-track li{padding-right:12px}
    .appointment .content .arrival-panel{padding:20px 14px}
    .appointment .content .arrival-heading p{font-size:14px}
}
@media (max-width:720px){
    .appointment .content .arrival-guide{order:1;margin:.2rem 0;padding:.26rem;border-radius:.12rem;scroll-margin-top:80px}
    .appointment .content .arrival-heading{gap:10px;margin-bottom:.2rem}
    .appointment .content .arrival-guide .arrival-heading h2{font-size:.36rem}
    .appointment .content .arrival-heading p{font-size:.26rem}
    .appointment .content .arrival-guide .arrival-button{font-size:.28rem;gap:5px;padding:8px;min-height:38px}
    .appointment .content .arrival-button svg{width:19px;height:19px}
    .appointment .content .arrival-button>span:last-child{display:none}
    .appointment .content .arrival-tabs{gap:0}
    .appointment .content .arrival-tabs button{flex:1;padding:9px 4px;font-size:.32rem;min-height:44px}
    .appointment .content .arrival-panel{margin-top:12px;padding:18px 14px}
    .appointment .content .arrival-guide .arrival-track{grid-template-columns:minmax(0, 1fr)}
    .appointment .content .arrival-track li{padding:0 0 18px 50px;min-height:76px}
    .appointment .content .arrival-node{top:1px;width:32px;height:32px}
    .appointment .content .arrival-node svg{width:19px;height:19px}
    .appointment .content .arrival-segment{top:33px;bottom:0;left:15px;right:auto;width:3px;height:auto}
    .appointment .content .walk .arrival-segment{height:auto;width:2px;background:repeating-linear-gradient(180deg, var(--track-color) 0 5px, transparent 5px 10px)}
    .appointment .content .arrival-segment:after{top:auto;bottom:9px;right:-2px;transform:rotate(135deg)}
    .appointment .content .arrival-segment i{top:0;left:-3px}
    .appointment .content .arrival-track li:last-child{min-height:0;padding-bottom:0}
    .appointment .content .arrival-track strong{font-size:.32rem}
    .appointment .content .arrival-track p{margin-top:3px;font-size:.28rem}
    .appointment .content .arrival-track em,.arrival-line{font-size:.24rem}
    .appointment .content .arrival-anchor{scroll-margin-top:80px}
    .appointment .content .arrival-panel.is-playing .arrival-segment i{animation-name:arrival-travel-down}
    .appointment .content .arrival-guide{display:grid;grid-template-columns:minmax(0, 1fr)}
    .appointment .content .arrival-heading{display:contents}
    .appointment .content .arrival-heading>div{order:0;margin-bottom:.2rem}
    .appointment .content .arrival-tabs{order:1}
    .appointment .content .arrival-panel{order:2}
    .appointment .content .arrival-guide .arrival-button{order:3;width:100%;min-height:.8rem;margin-top:.22rem;padding:.12rem .2rem}
}
@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}
}
@keyframes autoRipple {
    0% {
        transform:scale(1);
        opacity:1;
    }
    100% {
        transform:scale(1.3);
        opacity:0;
    }
}
@keyframes arrival-cta-attention{
    0%,18%,100%{transform:translateY(0) scale(1);box-shadow:0 3px 10px rgba(15, 157, 102, .17)}
    7%{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 18px rgba(15, 157, 102, .28), 0 0 0 0 rgba(15, 157, 102, .32)}
    15%{transform:translateY(0) scale(1);box-shadow:0 4px 12px rgba(15, 157, 102, .2), 0 0 0 10px rgba(15, 157, 102, 0)}
}
@keyframes arrival-cta-shine{
    0%{left:-45%;opacity:0}
    3%{opacity:1}
    16%{left:118%;opacity:0}
    17%,100%{left:118%;opacity:0}
}
@keyframes arrival-car-nudge{
    0%,3%,16%,100%{transform:translateX(0)}
    8%{transform:translateX(6px)}
    12%{transform:translateX(2px)}
}
@keyframes arrival-enter{
    from{transform:translateY(5px);opacity:.65}
    to{transform:translateY(0);opacity:1}
}
@keyframes arrival-travel{
    0%{left:0;opacity:0}
    12%{opacity:1}
    88%{opacity:1}
    100%{left:calc(100% - 4px);opacity:0}
}
@keyframes arrival-stop{
    0%,100%{transform:scale(1)}
    40%{transform:scale(1.13)}
}
@keyframes arrival-travel-down{
    0%{top:0;opacity:0}
    12%{opacity:1}
    88%{opacity:1}
    100%{top:calc(100% - 4px);opacity:0}
}