/*
 * 乐一番官网合作咨询样式文件

 * @author: zhuzl<me@zhuzhilong.com>
 * @date: 2025-05-17 17:44:56
 */
.block-banner {
  position: relative;
  z-index: 0;
  height: 400px;
  background: url(https://cms-image.leyifan.cn/resources/image/2026/08/28/842778078040133.png) center center / cover no-repeat;
}
.channel-name {
    position: absolute;
    top: 190px;
    left: 240px;

    font-size: 48px;
    font-weight: 600;
    line-height: 62px;
    color: #FFFFFF;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
}
.page-main {
    display: flex;
    justify-content: center;
    padding: 56px 0;
    background-color: #F6F8F9;
}
.container {
    width: 1440px;
    margin: 0;
    padding: 0;
}
.row {
    margin: 0;
}
.page-intro h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 42px;
    text-align: center;
    color: #222222;
}
.page-intro p {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #666666;
}
div.apply-form-box {
    margin-top: 40px;
    padding: 48px;
    border-radius: 16px;
    background-color: #FFFFFF;
}
.apply-form {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.apply-form .form-group {
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
}
.apply-form .form-group.form-group-textarea {
  align-items: flex-start;
}
.apply-form .col-form-label {
    width: 80px;
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    color: #222222;
}
.apply-form .col-form-input {
  /* flex: 1; */
  position: relative;
}
.apply-form .col-form-input label.error {
  color: var(--primary-color);
  position: absolute;
  margin: 0;
  margin-top: 5px;
}
.apply-form .form-control {
  background: #F9F9F9;
  border-radius: 12px;
  height: 64px;
  border: none;
  box-shadow: unset;
  width: 1240px;
  padding: 0 24px;
}
.apply-form .form-control.error {
  border: 1px solid var(--primary-color);
}
.apply-form .form-group.form-group-textarea .form-control {
  height: 200px;
  padding: 20px 24px;
  box-sizing: border-box;
}
.apply-form .form-control::placeholder{
  color: #AAAAAA;
  font-size: 16px;
}

.apply-result {
  padding: 160px 0;
   display: flex;
  flex-direction: column;
   align-items: center;
  text-align: center;
}
.apply-result h3 {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  margin-bottom: 16px;
}
.apply-result p {
  font-size: 14px;
  color: #999999;
}

@media (min-width: 1440px) and (max-width:1919px){
    .container {
        width: clamp(1392px, calc(1392px + (100vw - 1440px) * 48 / 480), 1440px);
    }
    .apply-form .form-control {
        width: clamp(1192px, calc(1192px + (100vw - 1440px) * 48 / 480), 1240px);
    }
}

@media (min-width: 1280px) and (max-width:1439px){
    .block-banner {
        height: clamp(356px, calc(356px + (100vw - 1280px) * 44 / 160), 400px);
    }
    .channel-name {
        top: clamp(168px, calc(168px + (100vw - 1280px) * 22 / 160), 190px);
    }
    .container {
        width: clamp(1232px, calc(1232px + (100vw - 1280px) * 1), 1392px);
    }
    .apply-form .form-control {
        width: clamp(1032px, calc(1032px + (100vw - 1280px) * 1), 1192px);
    }
}

@media (min-width: 1024px) and (max-width:1279px){
    .block-banner {
        height: clamp(285px, calc(285px + (100vw - 1024px) * 71 / 256), 356px);
    }
    .channel-name {
        top: clamp(143px, calc(143px + (100vw - 1024px) * 25 / 256), 168px);
        left: clamp(80px, calc(80px + (100vw - 1024px) * 160 / 256), 240px);
        font-size: clamp(32px, calc(32px + (100vw - 1024px) * 16 / 256), 48px);
        line-height: clamp(42px, calc(42px + (100vw - 1024px) * 20 / 256), 62px);
    }
    .container {
        width: clamp(976px, calc(976px + (100vw - 1024px) * 1), 1232px);
    }
    .apply-form .form-control {
        width: clamp(776px, calc(776px + (100vw - 1024px) * 1), 1032px);
    }
}

@media (min-width: 840px) and (max-width:1023px){
    .block-banner {
        height: clamp(234px, calc(234px + (100vw - 840px) * 51 / 184), 285px);
    }
    .channel-name {
        top: clamp(118px, calc(118px + (100vw - 840px) * 25 / 184), 143px);
        left: 80px;
        font-size: clamp(32px, calc(32px + (100vw - 1024px) * 16 / 256), 48px);
        line-height: clamp(42px, calc(42px + (100vw - 1024px) * 20 / 256), 62px);
    }
    .container {
        width: clamp(792px, calc(792px + (100vw - 840px) * 1), 976px);
    }
    .apply-form .form-control {
        width: clamp(592px, calc(592px + (100vw - 840px) * 1), 776px);
    }
}

@media (min-width: 768px) and (max-width:839px){
    .block-banner {
        height: 400px;
        margin-top: 96px;
    }
    .channel-name {
        top:  201px;
        left: 80px;
        font-size: 32px;
        line-height: 42px;
    }
    .container {
        width: clamp(720px, calc(720px + (100vw - 768px) * 1), 792px);
    }
    .apply-form .form-control {
        width: clamp(520px, calc(520px + (100vw - 768px) * 1), 592px);
    }
}

@media (min-width: 600px) and (max-width:767px){
    .block-banner {
        height: clamp(313px, calc(313px + (100vw - 600px) * 87 / 168), 400px);
        margin-top: 96px;
    }
    .channel-name {
        top: clamp(167px, calc(167px + (100vw - 600px) * 34 / 168), 201px);
        left: clamp(24px, calc(24px + (100vw - 600px) * 56 / 168), 80px);
        font-size: 32px;
        line-height: 42px;
    }
    .container {
        width: clamp(552px, calc(552px + (100vw - 600px) * 1), 720px);
    }
    .page-intro h3 {
        font-size: clamp(24px, calc(24px + (100vw - 600px) * 8 / 168), 32px);
        line-height: clamp(32px, calc(32px + (100vw - 600px) * 10 / 168), 42px);
    }
    div.apply-form-box {
        padding: clamp(32px, calc(32px + (100vw - 600px) * 16 / 168), 48px);
    }
    .apply-form {
        gap: clamp(32px, calc(32px + (100vw - 600px) * 16 / 168), 48px);
    }
    .apply-form .form-control {
        width: 448px;
    }
    .apply-form .form-group {
        flex-direction: column;
        gap: 12px 24px;
        align-items: start;
    }
}

@media (min-width: 480px) and (max-width:599px){
    .block-banner {
        height: clamp(250px, calc(250px + (100vw - 480px) * 63 / 120), 313px);
        margin-top: 96px;
    }
    .channel-name {
        top: clamp(126px, calc(126px + (100vw - 480px) * 41 / 120), 167px);
        left: 24px;
        font-size: clamp(30px, calc(30px + (100vw - 480px) * 2 / 120), 32px);;
        line-height: clamp(40px, calc(40px + (100vw - 480px) * 2 / 120), 42px);;
    }
    .page-main {
        padding: clamp(40px, calc(40px + (100vw - 480px) * 16 / 120), 56px) 0;
    }
    .container {
        width: clamp(448px, calc(448px + (100vw - 480px) * 1), 552px);
    }
    .page-intro h3 {
        font-size: clamp(20px, calc(20px + (100vw - 480px) * 4 / 120), 24px);
        line-height: clamp(26px, calc(26px + (100vw - 480px) * 6 / 120), 32px);
    }
    .page-intro p {
        font-size: clamp(13px, calc(13px + (100vw - 480px) * 3 / 120), 16px);
        line-height: clamp(17px, calc(17px + (100vw - 480px) * 5 / 120), 22px);
    }
    div.apply-form-box {
        margin-top: clamp(32px, calc(32px + (100vw - 480px) * 8 / 120), 40px);
    }
    div.apply-form-box {
        padding: clamp(24px, calc(24px + (100vw - 480px) * 8 / 120), 32px);
    }
    .apply-form {
        gap: 32px;
    }
    .apply-form .form-control {
        width: clamp(400px, calc(400px + (100vw - 480px) * 48 / 120), 448px);
        height: clamp(56px, calc(56px + (100vw - 480px) * 8 / 120), 64px);
    }
    .apply-form .form-group {
        flex-direction: column;
        gap: clamp(8px, calc(8px + (100vw - 480px) * 4 / 120), 12px) 24px;
        align-items: start;
    }
    .apply-form-btn {
        padding-top: clamp(32px, calc(32px + (100vw - 480px) * 16 / 120), 48px) !important;
    }
}

@media (max-width:479px){
    .block-banner {
        height: clamp(188px, calc(188px + (100vw - 360px) * 62 / 120), 250px);
        margin-top: 96px;
    }
    .channel-name {
        top: clamp(95px, calc(95px + (100vw - 360px) * 31 / 120), 126px);
        left: 24px;
        font-size: 30px;
        line-height: 40px;
    }
    .page-main {
        padding: 40px 0;
    }
    .container {
        width: clamp(328px, calc(328px + (100vw - 360px) * 1), 448px);
    }
    .page-intro h3 {
        font-size: 20px;
        line-height: 26px;
    }
    .page-intro p {
        font-size: 13px;
        line-height: 17px;
    }
    div.apply-form-box {
        margin-top: 32px;
    }
    div.apply-form-box {
        padding: clamp(16px, calc(16px + (100vw - 360px) * 8 / 120), 24px);
    }
    .apply-form {
        gap: clamp(24px, calc(24px + (100vw - 360px) * 8 / 120), 32px);
    }
    .apply-form .form-control {
        width: clamp(296px, calc(296px + (100vw - 360px) * 104 / 120), 400px);
        height: 56px;
    }
    .apply-form .form-group {
        flex-direction: column;
        gap: 8px 24px;
        align-items: start;
    }
    .apply-form-btn {
        padding-top: 32px !important;
    }
}