@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Metropolis";
    src: url("/fonts/metropolis/Metropolis-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}
.page-banner {
    padding: 220px 0 220px;
    background: linear-gradient(to bottom, #00000000, #00000000), url(../dayin/images/contact/banner.webp) no-repeat center center/ cover scroll;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.page-banner::before{display:none}
.page-banner .crumbs{color:#888;margin-bottom:16px}
.page-banner .crumbs a{color:#888}
    .page-banner .crumbs .current {
        color: var(--accent);
    }
.page-banner .eyebrow{display:none}
    .page-banner h1 {
        font-size: clamp(30px,4.5vw,40px);
        color: #fff;
        margin: 50px 0 30px 0;
        text-align: left;
    }

.dash {
    display: block;
    width: 35px;
    height: 3px;
    background: var(--accent);
    margin: 20px auto 20px 0px
}

.page-banner p {
    font-size: 20px;
    text-align: left;
    color: #eee;
    word-break: break-all;
}
@media (max-width:1200px) {
    .page-banner {
        background: linear-gradient(to bottom, #00000090,#00000000), url(../dayin/images/contact/banner.webp) no-repeat bottom center/ cover scroll;
    }
}
@media (max-width:767px) {
    .page-banner {
        background: linear-gradient(to bottom, #00000090,#00000000), url(../dayin/images/contact/banner-p.webp) no-repeat bottom center/ cover scroll;
        padding: 0;
        min-height: 70vh;
    }

        .page-banner h1 {
            font-size: 20px
        }

        .page-banner p {
            font-size: 16px;
        }
}
/*@media (max-width:767px){
    .page-banner {
        background: linear-gradient(to bottom, #00000000, #00000000), url(../dayin/images/contact/banner.webp) no-repeat center center/ cover scroll;
        min-height: auto;
        padding: 70px 0 260px
    }
  .page-banner h1{font-size:20px}
}*/
.all-offices {
    background: linear-gradient(to bottom, #00000000, #00000000), url(../dayin/images/contact/offices.webp) no-repeat center center/ cover scroll;
    padding: 70px 0;
}
    .all-offices h2 {
        color: #fff;
        font-size: 36px;
        font-weight: 800;
        margin-bottom: 18px;
    }
    .all-offices p {
        color: #ddd;
        font-size: 18px;
        line-height: 1.9;
    }
    .ao-list{display:flex;flex-direction:column;gap:18px; margin-top: 40px;}
.ao-card{
  background:#fff;border-radius:10px;
  display:flex;align-items:center;justify-content:space-between;gap:20px
}
    .ao-card.reveal.in {
        padding: 30px 28px;
    }
.ao-body h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.5
}
    .ao-body h3 .ao-country {
        color: var(--accent);
        font-weight: 800;
        margin-right: 6px;
        font-size: 20px;
        border-bottom: 1px solid #ccc;
    }
.ao-body p{margin:0;font-size:16px;color:var(--ink-3);line-height:1.7}
.ao-pin{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;
  text-decoration:none;cursor:pointer;transition:background .2s
}
.ao-pin:hover{background:var(--accent);color:#fff}
@media (max-width:767px){
  /*.all-offices{background-size:140%;background-position:top right}*/
  .ao-card{flex-direction:column;align-items:flex-start}
    .ao-body p{
        font-size: 15px;
    }
}
.offices{padding:110px 0 40px;background:#fff}
.offices-grid{margin-bottom:40px}
.office{background:#fff;border:1px solid var(--line);overflow:hidden;transition:all .35s;display:flex;flex-direction:column}
.office:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.08)}
.office .map-visual{aspect-ratio:16/10;background:#1a1a1c center/cover no-repeat;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.office .map-visual::before{content:"";position:absolute;inset:0;opacity:.45;z-index:1;background:linear-gradient(180deg,rgba(15,15,18,.1) 0%,rgba(15,15,18,.55) 100%),linear-gradient(to right,rgba(228,106,88,.35) 1px,transparent 1px),linear-gradient(to bottom,rgba(228,106,88,.35) 1px,transparent 1px);background-size:cover,28px 28px,28px 28px}
.office .map-visual .pin{z-index:2;width:42px;height:42px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);box-shadow:0 0 30px rgba(228,106,88,.6);position:relative}
.office .map-visual .pin::after{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}
.office .map-visual .flag{position:absolute;top:16px;left:16px;padding:5px 12px;background:var(--accent);color:#fff;font-family:"Bebas Neue",sans-serif;font-size:16px;letter-spacing:.15em;z-index:3}
.office-body{padding:28px 26px;flex:1;display:flex;flex-direction:column}
.office-body h3{font-size:18px;margin-bottom:16px}
.office-body .o-line{display:flex;gap:12px;padding:8px 0;font-size:13px;color:var(--ink-3);line-height:1.7}
.office-body .o-line .k{font-family:"Oswald",sans-serif;font-size:11px;color:var(--ink-4);letter-spacing:.15em;font-weight:600;text-transform:uppercase;min-width:56px;padding-top:2px}
.office-body .o-line .v{flex:1;color:var(--ink-2);font-weight:500}
.office-body .o-cta{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.office-body .o-cta .t{font-size:12px;color:var(--ink-4);letter-spacing:.1em}
.office-body .o-cta .map-btn{font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.2em;color:var(--accent);font-weight:700}
.chans{padding:70px 0;background:var(--bg-soft)}
.ch{background:#fff;padding:36px 28px;text-align:center;transition:all .3s;border-top:3px solid var(--accent)}
.ch:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.07)}
.ch .ch-icon{width:56px;height:56px;margin:0 auto 20px;background:var(--accent-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:"Bebas Neue",sans-serif;font-size:22px;color:var(--accent);letter-spacing:.02em}
.ch h4{font-size:16px;margin-bottom:8px}
.ch p{font-size:13.5px;color:var(--ink-3);line-height:1.85;margin-bottom:14px}
.ch .ch-val{font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.05em;color:var(--accent);font-weight:700}
.inquiry{padding:40px 0;background:#f6f6f8}
.inq-info h2{margin-bottom:18px}
.inq-info p{color:var(--ink-3);font-size:15.5px;line-height:1.95;margin-bottom:26px}
.inq-steps{display:grid;gap:18px;margin-top:30px}
.inq-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:flex-start;padding:22px;background:var(--bg-soft);border-left:3px solid var(--accent)}
.inq-step .sn{font-family:"Bebas Neue",sans-serif;font-size:36px;color:var(--accent);letter-spacing:.02em;line-height:1}
.inq-step h4{font-size:15px;margin-bottom:6px}
.inq-step p{font-size:13px;color:var(--ink-3);line-height:1.8;margin:0}
.inq-form{background:transparent;color:var(--ink);padding:0;margin:0 auto}
.inq-form-intro{font-size:18px;color:var(--ink);margin-bottom:26px}
.inq-form .form-group label{color:var(--ink-2)}
.inq-form .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.inq-form .form-group input,.inq-form .form-group textarea,.inq-form .form-group select{
  background:#fff;border:1px solid #d8d8dc;border-radius:6px;color:var(--ink);padding:14px 16px;font-size:14.5px
}
.inq-form .form-group input::placeholder,.inq-form .form-group textarea::placeholder{color:#8a8a8f}
.inq-form .form-group input:focus,.inq-form .form-group textarea:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.inq-form textarea.form-control{min-height:150px;resize:vertical}
.inq-form select.form-control{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23888' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:14px 9px;
  padding-right:46px
}
.inq-gender{display:flex;align-items:center;gap:26px;padding-top:6px}
.inq-gender .g-opt{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2);cursor:pointer;margin:0}
.inq-gender .g-opt input{position:absolute;opacity:0;width:0;height:0}
.inq-gender .g-opt .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid #c7c7cc;position:relative;flex:none}
.inq-gender .g-opt input:checked + .dot{border-color:var(--accent)}
.inq-gender .g-opt input:checked + .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.inq-form .submit{margin-top:10px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
    .inq-form .submit .btn-primary {
        display: inline-block;
        padding: 11px 22px;
        background: #ea6852;
        border-radius: 5px;
        color: #fff !important;
        font-weight: 700;
        letter-spacing: .15em;
        font-size: 13px;
        transition: all .3s;
        text-align: center;
        outline: none !important;
        border: none;
        box-shadow: none;
        font-family: "Metropolis", "Noto Sans TC";
        border-bottom: 2px solid #fff;
    }

        .inq-form .submit .btn-primary:hover {
            background: #e04830;
            border-bottom: 2px solid #e04830;
        }
    
/*.inq-form .submit .btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}*/
.inq-form .submit .tip{font-size:12px;color:#999}
.inq-form p{
    text-align: center;
}
.req {
    color: var(--accent)
}
@media(max-width:960px){
  .inq-form{padding:0 4px}
}

/* ── DNTCaptcha widget ── */
.captcha-wrap { margin-bottom: 4px; }
.captcha-wrap img { border-radius: 6px; margin-bottom: 10px; display: block; width: 220px; height: auto; border: 1px solid #d8d8dc; }
.captcha-input { margin-top: 6px; padding: 14px 16px !important; font-size: 16px !important; max-width: 220px; }
.captcha-error { display: block; font-size: 12px; color: #c92a2a; margin-top: 4px; }

.inq-form .form-group .form-control, .inq-form .form-group .form-select {
    color: #333;
    border-color: #aaa;
}
@media(max-width:960px) {
    
    .inq-form-intro {
        font-size: 15px;
    }
    .all-offices{
        padding: 70px 0;
    }
        .all-offices h2{
            font-size: 20px;
        }
    .ao-card.reveal.in{
        padding: 10px 15px;
    }
}