@charset "utf-8";
:root{
--inpotcolor:#f00;
--askwidth:1200px
}

.page-wrap-ask{ position:relative;max-width:var(--askwidth);margin:0 auto;padding:25px 25px;}
.ai-f{display:flex; gap:5px 10px; align-items:center; flex-wrap:wrap;margin-bottom:25px;}
#toaskform{position:relative}
#toaskform::before{background:var(--theme-color); position:absolute; inset:0; content:''; opacity:.3}
.web66-ai-form{position:relative;width:100%;padding:10px;background:#ffffff;border-radius:12px;border:1px solid #d1d5db;box-shadow:0 8px 30px rgba(0,0,0,0.3);}
.web66-ai-form::after{content:''; position:absolute;right:10px; top:10px;background-image:url(https://s.web66.com.tw/_file/web66/webimg/web66logo.png); width:149px; height:50px; background-size:100%; opacity:.3}
.inpotim::after{content:'*'; color:#f00;}
.web66-ai-form h2{margin:0 0 10px;font-size:22px;color:#1f2937;}

.web66-ai-form .desc{font-size:14px;color:#4b5563;}

.form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px 24px;}

.f{position:relative;margin-bottom:15px;}

.f.full{grid-column:1 / -1;}

.f input,.f textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;outline:none;background:#f9fafb;}
input:focus, select:focus, textarea:focus{box-shadow:0 6px 8px rgba(0, 122, 255, 0.08), 0 0 1px 1px #007aff;}
.f textarea{resize:none;}
.f img{vertical-align:middle}
.f label{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;color:#6b7280;pointer-events:none;background:#f9fafb;padding:2px 2px; width:90%;transition:.25s;}
.f input:valid+label,
.f input:focus+label,.f textarea:focus+label,.f label.inpotim,.f textarea:valid+label{top:-10px;color:#222;font-weight:600; background: none;}
.snone{font-size:12px; color:#f00; position:absolute; right:8px; top:8px}
.web66-ai-form button{min-width:100%;padding:14px;border:none;border-radius:8px;background:#2563eb;color:#f9fafb;font-size:24px;font-weight:600;cursor:pointer;transition:background 0.3s;box-shadow:0 8px 30px rgba(0,0,0,0.3);}
.web66-ai-form button:hover{background:#e53935;}
#seraiok{text-align:center; font-size:14px; color:#f00}
.pay16{animation: pay16 infinite 2.5s linear; padding-right:8px;}
@keyframes pay16 {
  0% { opacity:1}
  50% {opacity:.2}
  100% {opacity:1}
}
.web66-note{margin-top:12px;font-size:13px;color:#6b7280;grid-template-columns: 30px 1fr; display:grid; gap:12px}
.toline{ border-right:2px solid #6b7280}
@media (max-width:768px){
	.f.full2,.full2{grid-column:1 / -1;}
	.form-grid{grid-template-columns:1fr 1fr;}
.page-wrap-ask{padding:20px 8px;}
.web66-ai-form button{min-width:60%}
.web66-note{width:auto; margin:auto}
}