.sample-request-page {
  max-width: 1920px;
  margin: 0 auto;
  padding: 18px 24px 30px;
  background: linear-gradient(180deg, #f7f8fb 0%, #f2f4f8 100%);
  color: #17315f;
}
.sample-request-page .ui.container {
  width: 100%;
  max-width: 1400px;
  padding: 0 10px;
}
.sample-request-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(18, 52, 106, 0.08);
}
.sample-request-logo {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: #0a3f88;
}
.sample-request-logo .mark {
  width: 40px;
  height: 40px;
  margin: 0 4px;
  background: #e53a2f;
  border-radius: 6px;
  position: relative;
}
.sample-request-logo .mark span,
.sample-request-logo .mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.sample-request-logo .mark span {
  width: 22px;
  height: 8px;
}
.sample-request-logo .mark::before {
  width: 8px;
  height: 22px;
}
.sample-request-meta {
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
  color: #5c6c84;
  text-align: right;
}
.sample-request-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  gap: 26px;
  margin-top: 18px;
}
.sample-request-copy {
  width: 52%;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17, 66, 140, 0.08);
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(10, 46, 108, 0.05);
}
.sample-request-form {
  width: 48%;
}
.copy-panel {
  min-height: 386px;
  padding: 34px 34px 28px;
  /*background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.88) 52%, rgba(239, 245, 255, 0.78) 100%), radial-gradient(circle at 72% 50%, rgba(31, 111, 212, 0.1) 0%, rgba(31, 111, 212, 0) 42%);*/
  background-image: url(/szsunmed/2026/07/06/bg-ai.png);
  background-position: top right;
  background-repeat: no-repeat;
  position: relative;
  background-size: 100%;
}
/*.copy-panel::after {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -26px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 22px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 32px rgba(25, 81, 164, 0.08);
}*/
.copy-panel h1 {
  font-size: 42px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.9px;
  color: #0d3676;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.copy-panel .intro {
  max-width: 420px;
  font-size: 17px;
  line-height: 1.75;
  color: #485b79;
  position: relative;
  z-index: 1;
}
.sample-benefits {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 36px;
  position: relative;
  z-index: 1;
}
.sample-benefits li {
  width: calc(25% - 14px);
  min-width: 120px;
  color: #17315f;
}
.icon-svg,
.step-svg,
.notice-svg,
.safe-icon,
.field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-svg svg,
.step-svg svg,
.notice-svg svg,
.safe-icon svg,
.field-icon svg,
.process-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sample-benefits li .icon-svg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 50%;
  border: 1px solid #dae3f1;
  background: #fff;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #164f9f;
}
.sample-benefits li strong,
.sample-benefits li em {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  font-style: normal;
  font-weight: 700;
}
.sample-benefits li em {
  color: #384e72;
}
.copy-detail {
  padding: 22px 34px 28px;
}
.detail-block + .detail-block {
  margin-top: 20px;
}
.detail-block h2 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 800;
  color: #0d3676;
  margin-bottom: 10px;
}
.detail-block p {
  font-size: 15px;
  line-height: 1.7;
  color: #556783;
}
.buyer-list {
  margin-top: 12px;
}
.buyer-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.85;
  color: #17315f;
  font-weight: 600;
}
.buyer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1e5db8;
}
.process-block {
  padding: 18px 18px 16px;
  border-radius: 12px;
  background: #f5f7fb;
}
.process-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.process-list li {
  width: 33.33%;
  position: relative;
  padding-right: 20px;
}
.process-arrow {
     position: absolute;
    right: 25px;
    top: 0;
    width: 130px;
    height: 40px;
    color: #a8b4c8;
}
.process-list li:last-child .process-arrow {
  display: none;
}
.process-list li .step-svg {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d9e2f1;
  color: #1e5db8;
  margin-bottom: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.process-list li strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
  color: #17315f;
  margin-bottom: 4px;
}
.process-list li p {
  font-size: 12px;
  line-height: 1.6;
  color: #5b6d89;
}
.notice-box {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #edf3ff;
  color: #17315f;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
}
.notice-box > .notice-svg {
     width: 60px;
    height: 60px;
    color: #1e5db8;
    margin-top: 2px;
    flex: 0 0 24px;
    min-width: 60px;
}
.notice-box strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 800;
  margin-bottom: 2px;
}
.notice-box p {
  font-size: 12px;
  line-height: 1.6;
  color: #4d5f7a;
}
.form-card {
  height: 100%;
  padding: 26px 24px 22px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(17, 66, 140, 0.08);
  box-shadow: 0 14px 34px rgba(10, 46, 108, 0.05);
}
.form-card h3 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 800;
  color: #0d3676;
  margin-bottom: 10px;
}
.form-card > p {
  font-size: 14px;
  line-height: 1.7;
  color: #556783;
  margin-bottom: 18px;
}
.form-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 14px;
}
.form-field {
  width: 100%;
}
.form-field.full {
  width: 100%;
}
.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #17315f;
  font-weight: 700;
}
.form-field label em {
  color: #dc4738;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d8e0ec;
  background: #fff;
  font-size: 14px;
  color: #17315f;
}
.form-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
}
.form-field textarea {
  height: 84px;
  padding: 12px 14px;
  resize: vertical;
}
.select-field {
  position: relative;
}
.select-field::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #8a98ac;
  border-bottom: 1.5px solid #8a98ac;
  transform: rotate(45deg);
  pointer-events: none;
}
.form-field input::-webkit-input-placeholder,
.form-field textarea::-webkit-input-placeholder {
  color: #96a2b6;
}
.form-field input:-moz-placeholder,
.form-field textarea:-moz-placeholder {
  color: #96a2b6;
}
.form-field input::-moz-placeholder,
.form-field textarea::-moz-placeholder {
  color: #96a2b6;
}
.form-field input:-ms-input-placeholder,
.form-field textarea:-ms-input-placeholder {
  color: #96a2b6;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #96a2b6;
}
.reference-field {
  margin-top: 2px;
  margin-bottom: -4px;
}
.field-tip {
  font-size: 13px;
  line-height: 1.6;
  color: #5d6d84;
}
.resource-field {
  display: block;
}
.input-with-icon {
  position: relative;
  display: block;
  margin-bottom: 10px;
}
.input-with-icon .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #9aa6b6;
}
.input-with-icon input[type="text"] {
  padding-left: 42px;
}
.upload-btn {
  min-width: 220px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #d8e0ec;
  background: #fff;
  color: #5e6e87;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  justify-content: flex-start;
  padding: 0 14px;
}
.upload-btn input {
  display: none;
}
.upload-btn .field-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #8f9db0;
  flex: 0 0 16px;
}
.upload-btn-full {
  width: 100%;
}
.submit-row {
  text-align: center;
}
.submit-row button {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 8px;
  background: #0d4aa3;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(13, 74, 163, 0.18);
  -webkit-transition: 0.3s all;
  -moz-transition: 0.3s all;
  transition: 0.3s all;
}
.submit-row button:hover {
  background: #08397f;
}
.submit-row p {
  margin-top: 10px;
  font-size: 12px;
  color: #6f7f95;
}
.safe-icon {
  width: 12px;
  height: 12px;
  color: #8b99ab;
  margin-right: 6px;
  vertical-align: -2px;
}
.sample-request-stats {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 16px 0 4px;
}
.sample-request-stats li {
  width: 25%;
  text-align: center;
}
.sample-request-stats li strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: #0d3676;
}
.sample-request-stats li span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #586983;
}
@media (max-width: 1600px) {
  .sample-request-page {
    padding-left: 18px;
    padding-right: 18px;
  }
  .copy-panel h1 {
    font-size: 38px;
  }
  .form-card h3 {
    font-size: 22px;
  }
}
@media (max-width: 1366px) {
  .sample-request-main {
    gap: 24px;
  }
  .copy-panel,
  .copy-detail,
  .form-card {
    padding-left: 28px;
    padding-right: 28px;
  }
  .copy-panel {
    min-height: 360px;
  }
  .copy-panel h1 {
    font-size: 34px;
  }
  .copy-panel .intro,
  .detail-block p {
    font-size: 15px;
  }
  .sample-benefits li {
    width: calc(50% - 12px);
  }
}
@media (max-width: 1100px) {
  .sample-request-main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .sample-request-copy,
  .sample-request-form {
    width: 100%;
  }
  .sample-request-stats {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
  }
  .sample-request-stats li {
    width: calc(50% - 9px);
  }
}
@media (max-width: 768px) {
  .sample-request-page {
    padding: 16px 10px 24px;
  }
  .sample-request-page .ui.container {
    padding: 0 6px;
  }
  .sample-request-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .sample-request-logo {
    font-size: 40px;
  }
  .sample-request-logo .mark {
    width: 30px;
    height: 30px;
  }
  .sample-request-logo .mark span {
    width: 16px;
    height: 6px;
  }
  .sample-request-logo .mark::before {
    width: 6px;
    height: 16px;
  }
  .sample-request-meta {
    text-align: left;
    font-size: 12px;
  }
  .copy-panel,
  .copy-detail,
  .form-card {
    padding: 22px 18px;
  }
  .copy-panel::after {
    width: 160px;
    height: 160px;
    border-width: 16px;
    right: -20px;
    bottom: -20px;
  }
  .copy-panel h1 {
    font-size: 30px;
    letter-spacing: -0.8px;
  }
  .copy-panel .intro {
    font-size: 15px;
  }
  .sample-benefits {
    gap: 18px 12px;
  }
  .sample-benefits li {
    width: calc(50% - 6px);
    min-width: 0;
  }
  .detail-block h2,
  .form-card h3 {
    font-size: 22px;
  }
  .process-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .process-list li {
    width: 100%;
    padding-right: 0;
  }
  .process-list li:not(:last-child)::after {
    content: "";
  }
  .upload-btn {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .copy-panel h1 {
    font-size: 28px;
  }
  .sample-benefits li,
  .sample-request-stats li {
    width: 100%;
  }
  .sample-request-stats {
    gap: 14px;
  }
  .sample-request-stats li strong {
    font-size: 30px;
  }
  .sample-request-stats li span {
    font-size: 13px;
  }
  .form-field input[type="text"],
  .form-field input[type="email"],
  .form-field select,
  .form-field textarea,
  .upload-btn,
  .submit-row button {
    font-size: 15px;
  }
}