.contact-page{background:#fff}
.contact-shell{width:1192px;max-width:calc(100vw - 80px);margin:0 auto}
.contact-hero{height:280px;background:#f5f6f9 url("https://img1.dxycdn.com/t/s7/2026/0916/703/4640593523419010012.png") center/cover no-repeat}
.contact-hero-content{height:100%;padding-bottom:12px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}
.contact-hero h1{margin:0;color:#333;font-size:48px;line-height:1.16;font-weight:600;white-space:nowrap}
.contact-hero p{width:801px;margin:0;color:#666;font-size:16px;line-height:24px}
.contact-content{padding:80px 0;display:grid;grid-template-columns:322px minmax(0,1fr);gap:80px;align-items:start}
.contact-info{padding:16px 0;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.contact-intro{width:100%;padding-bottom:32px;border-bottom:1px solid #ebedf0;display:flex;flex-direction:column;gap:32px}
.contact-intro>span{color:#7753ff;font-size:18px;line-height:normal;font-weight:500;letter-spacing:2px}
.contact-intro>div{display:flex;flex-direction:column;gap:12px}
.contact-intro h2{margin:0;color:#333;font-size:44px;line-height:normal;font-weight:600}
.contact-intro p,.contact-info-block p{margin:0;color:#999;font-size:16px;line-height:24px}
.contact-info-block{width:100%;display:flex;flex-direction:column;gap:24px}
.contact-info-block h3{margin:0;color:#333;font-size:16px;line-height:normal;font-weight:500;letter-spacing:2px}
.contact-info-block dl{width:257px;margin:0;display:flex;flex-direction:column;gap:24px}
.contact-info-block dl div{display:flex;flex-direction:column;gap:8px}
.contact-info-block dt{color:#333;font-size:18px;line-height:normal}
.contact-info-block dd{margin:0;color:#999;font-size:16px;line-height:normal}
.platform-support{gap:8px}
.platform-support a{display:inline-flex;align-items:center;gap:4px;color:#333;font-size:16px;line-height:normal;transition:color .2s ease}
.platform-support a img{width:16px;height:16px;display:block;transition:opacity .2s ease}
.platform-support a:hover,.platform-support a:focus-visible{color:#7753ff}
.platform-support a:hover img,.platform-support a:focus-visible img{content:url("/global/assets/Icon/dui_click-purple.svg")}
.platform-support a:focus-visible{outline:2px solid rgba(119,83,255,.22);outline-offset:4px;border-radius:2px}
.contact-form-card{min-width:0;padding:60px 80px 64px;border:1px solid #ebedf0;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.contact-form{display:flex;flex-direction:column;gap:32px}
.contact-form>header{display:flex;flex-direction:column;gap:12px}
.contact-form>header h2{margin:0;color:#333;font-size:36px;line-height:normal;font-weight:500}
.contact-form>header p{margin:0;color:#999;font-size:16px;line-height:normal}
.contact-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.contact-field{min-width:0;position:relative;display:flex;flex-direction:column;gap:8px;color:#333;font-size:14px;line-height:normal}
.contact-field>span,.contact-select-field>label{font-size:14px}
.contact-field input,.contact-field select,.contact-field textarea,.contact-select-trigger{width:100%;border:1px solid transparent;border-radius:4px;background:#f5f6f9;color:#333;font:inherit;font-size:16px;outline:0;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.contact-field input,.contact-field select,.contact-select-trigger{height:44px;padding:0 16px}
.contact-field textarea{height:94px;padding:12px 16px;resize:vertical;min-height:94px}
.contact-field input::placeholder,.contact-field textarea::placeholder{color:#ccc;opacity:1}
.contact-field select{appearance:none;color:#ccc;background-image:linear-gradient(45deg,transparent 50%,#bbb 50%),linear-gradient(135deg,#bbb 50%,transparent 50%);background-position:calc(100% - 19px) 19px,calc(100% - 15px) 19px;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.contact-field select:valid{color:#333}
.contact-field input:hover,.contact-field select:hover,.contact-field textarea:hover,.contact-select-trigger:hover{border-color:#d9dce3}
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus,.contact-select-trigger:focus,.contact-select-field.is-open .contact-select-trigger{border-color:#7753FF;background-color:#fff}
.contact-field input:-webkit-autofill{-webkit-text-fill-color:#333;-webkit-box-shadow:0 0 0 1000px #f5f6f9 inset;caret-color:#333}
.contact-field input:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px #f5f6f9 inset}
.contact-field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset}
.contact-field small,.consent-error,.contact-submit-error{min-height:0;color:#e3443f;font-size:14px;line-height:18px}
.contact-field small:empty,.consent-error:empty,.contact-submit-error:empty{display:none}
.contact-field.has-error input,.contact-field.has-error select,.contact-field.has-error textarea,.contact-field.has-error .contact-select-trigger{border-color:#e3443f}
.contact-select-field{z-index:4}
.contact-select-field.is-open{z-index:6}
.contact-select-trigger{display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}
.contact-select-trigger span{color:#ccc}
.contact-select-trigger.has-value span{color:#333}
.contact-select-trigger i{width:20px;height:20px;flex:0 0 20px;background:url("/global/assets/Icon/dui_unFold_bold.svg") center/20px 20px no-repeat;transform:none;transition:transform .2s}
.contact-select-field.is-open .contact-select-trigger i{transform:rotate(180deg)}
.contact-select-menu{position:absolute;z-index:10;left:0;right:0;top:73px;max-height:min(360px,calc(100vh - 120px));padding:6px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12);-webkit-overflow-scrolling:touch}
.contact-select-menu[hidden]{display:none}
.contact-select-menu button{width:100%;height:44px;padding:6px 12px;border:0;border-radius:8px;background:#fff;color:#333;font-size:16px;text-align:left;cursor:pointer}
.contact-select-menu button:hover,.contact-select-menu button:focus-visible{outline:0;color:#7753FF;background:#f5f6f9}
.contact-select-menu:not(:hover) button[aria-selected="true"]{color:#7753FF;background:#f5f6f9}
.contact-consent{display:flex;align-items:flex-start;gap:12px;color:#333;font-size:14px;line-height:22px;cursor:pointer}
.contact-consent input{width:16px;height:16px;margin:3px 0 0;flex:0 0 16px;appearance:none;border:1px solid #ccc;border-radius:2px;background:#fff;display:grid;place-content:center;cursor:pointer}
.contact-consent:hover input{border-color:#7753ff}
.contact-consent input:focus-visible{outline:2px solid rgba(119,83,255,.24);outline-offset:2px;border-color:#7753ff}
.contact-consent input:checked{border-color:#7753ff;background:#7753ff}
.contact-consent input:checked:after{content:"";width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.contact-consent a{color:#7753FF;text-decoration:underline}
.consent-error{margin-top:-28px;margin-left:28px}
.contact-submit{width:100%;height:52px;padding:10px;border:0;border-radius:40px;background:linear-gradient(171deg,#7753ff 0%,#a88dfb 100%);color:#fff;font-size:18px;font-weight:500;cursor:pointer;transition:background .2s}
.contact-submit:hover,.contact-submit:focus-visible{background:linear-gradient(135deg,#7753ff,#a88dfb);filter:none;transform:none}
.contact-submit:focus-visible{outline:2px solid rgba(119,83,255,.28);outline-offset:3px}
.contact-submit:active{transform:none}
.contact-submit-error{margin:0}
.contact-response-time{margin:0;color:#999;font-size:14px;line-height:normal}
.contact-copyright{height:60px;border-top:1px solid #ebedf0;display:flex;align-items:center;justify-content:center;color:#999;font-size:14px}
.contact-toast{position:fixed;z-index:1000;left:50%;top:clamp(120px,24vh,240px);transform:translateX(-50%);padding:20px 24px;border-radius:12px;background:rgba(0,0,0,.8);box-shadow:0 2px 5px rgba(0,0,0,.04);color:#fff;font-size:16px}
.contact-toast[hidden]{display:none}
.contact-toast.is-visible{animation:contact-toast-in .25s ease both}
@keyframes contact-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:1100px){.contact-content{grid-template-columns:280px minmax(0,1fr);gap:48px}.contact-form-card{padding:52px 48px}.contact-hero p{width:min(801px,80%)}}
@media(max-width:820px){.contact-shell{max-width:calc(100vw - 48px)}.contact-hero h1{font-size:44px}.contact-content{grid-template-columns:1fr}.contact-info{display:grid;grid-template-columns:1fr 1fr;gap:36px}.contact-intro{grid-column:1/-1}.contact-form-card{padding:48px}.contact-copyright{margin-top:0}}
@media(max-width:640px){.contact-shell{max-width:calc(100vw - 40px)}.contact-hero{height:320px}.contact-hero-content{gap:20px}.contact-hero h1{font-size:36px;white-space:normal}.contact-hero p{width:100%;font-size:15px}.contact-hero p br{display:none}.contact-content{padding:56px 0}.contact-info{display:flex}.contact-intro h2{font-size:36px}.contact-form-card{padding:36px 24px}.contact-form-row{grid-template-columns:1fr;gap:24px}.contact-form{gap:24px}.contact-form>header h2{font-size:30px}.contact-toast{top:120px}.contact-copyright{font-size:12px}}
@media(prefers-reduced-motion:reduce){.contact-toast.is-visible{animation:none}.contact-submit{transition:none}}

/* Match the primary CTA treatment used on dxy.cn. */
.contact-submit{background:linear-gradient(117deg,#7753ff,#a88dfb)}
.contact-submit:hover,.contact-submit:focus-visible{background:linear-gradient(117deg,#8c6eee,#a88dfb);transform:none;box-shadow:none;filter:none}