form .form-contract-wrap .contract-box {display: flex; gap: 10px;}
form .form-contract-wrap .contract-box .contractType {border-radius: 5px; border: solid 1px #d8e3ef; background: #fff; flex: 0 0 140px; transition: all 0.2s ease-in-out; padding: 6px 0 20px 20px; overflow-x: hidden; min-width: 0; cursor: pointer; position: relative;}
form .form-contract-wrap .contract-box .contractType::after { content: ''; position: absolute; top: 0; right: 0; display: block; width: 50px; height: 100%; background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);}
form .form-contract-wrap .contract-box .contractType strong {display: flex; align-items: center; height: 40px; font-weight: 600; font-size: 15px; letter-spacing: -0.03em; color: #282828; border-bottom: solid 1px #d5e3f0;}
form .form-contract-wrap .contract-box .contractType strong span {display: none;}
form .form-contract-wrap .contract-box .contractType strong i {margin-left: 4px; background: #ed4726; border-radius: 3px; padding: 3px 6px 4px 5px; font-weight: 500; font-size: 12px; color: #fff;}
form .form-contract-wrap .contract-box .contractType ul {margin-top: 10px; display: flex; flex-direction: column; gap: 5px;}
form .form-contract-wrap .contract-box .contractType ul li {display: flex; align-items: center; padding-left: 20px; position: relative; font-size: 13px; letter-spacing: -0.03em; line-height: 1.5; color: #333; overflow-x: hidden; white-space: nowrap;}
form .form-contract-wrap .contract-box .contractType ul li::before {content: ''; position: absolute; top: 50%; left: 10px; transform: translate(-50%, -50%); display: block; width: 4px; height: 4px; border-radius: 50%; background: #333;}
form .form-contract-wrap .contract-box .contractType ul li i {display: inline-block; border-radius: 3px; font-weight: 500; font-size: 12px; letter-spacing: -0.03em; color: #fff; padding: 2px 6px 3px 6px; margin-right: 6px;}
form .form-contract-wrap .contract-box .contractType ul li i.corp {background: #0080ff; color: #fff; font-weight: 400;}
form .form-contract-wrap .contract-box .contractType ul li i.person {background: #ffe894; color: #333;}
form .form-contract-wrap .contract-box .contractType .input-wrap {position: relative; margin-top: 20px; min-width: 200px;}
form .form-contract-wrap .contract-box .contractType:last-child .input-wrap {min-width: 300px;}
form .form-contract-wrap .contract-box .contractType .input-wrap input {width: 100%; height: 34px; border: solid 1px #d8e3ef; border-radius: 5px; padding: 0 70px 0 15px; font-size: 14px; color: #333;}
form .form-contract-wrap .contract-box .contractType .input-wrap button {position: absolute; top: 50%; right: 5px; transform: translateY(-50%); font-size: 12px; color: #fff; background-color: #4b4b4b; border-radius: 3px; display: flex; justify-content: center; align-items: center; width: 64px; height: 24px;}
form .form-contract-wrap .contract-box .contractType.on {flex: 1 0 auto; border-color: #006cff; padding-right: 20px;}
form .form-contract-wrap .contract-box .contractType.on strong {background: url("/images/common/form/ic_selected.svg") right center no-repeat;}
form .form-contract-wrap .contract-box .contractType.on strong span {display: inline;}
form .form-contract-wrap .contract-box .contractType.on::after {content: none;}

@media (max-width: 1250px) {
  form .form-contract-wrap .contract-box .contractType:last-child .input-wrap {min-width: 200px;}
}

@media (max-width: 980px) {
  form .form-contract-wrap .contract-box .contractType strong {font-size: 16px;}
  form .form-contract-wrap .contract-box .contractType strong i {font-size: 14px; margin-top: 1px;}
  form .form-contract-wrap .contract-box .contractType ul li {font-size: 15px;}
  form .form-contract-wrap .contract-box .contractType ul li i {font-size: 14px;}
  form .form-contract-wrap .contract-box .contractType .input-wrap button {font-size: 14px;}
}

@media (max-width: 620px) {
  form .form-contract-wrap .contract-box {flex-direction: column}
  form .form-contract-wrap .contract-box .contractType {flex: 1 0 auto; padding: 6px 10px;}
  form .form-contract-wrap .contract-box .contractType::after {content: none;}
  form .form-contract-wrap .contract-box .contractType strong {border-bottom-color: transparent; height: 26px;}
  form .form-contract-wrap .contract-box .contractType strong span {display: inline-block;}
  form .form-contract-wrap .contract-box .contractType .input-wrap {min-width: unset;}
  form .form-contract-wrap .contract-box .contractType:last-child .input-wrap {min-width: unset;}
  form .form-contract-wrap .contract-box .contractType ul {display: none;}
  form .form-contract-wrap .contract-box .contractType .input-wrap {display: none;}
  form .form-contract-wrap .contract-box .contractType.on {padding: 6px 10px 10px;}
  form .form-contract-wrap .contract-box .contractType.on strong {border-bottom-color: #d5e3f0; height: 32px; padding-bottom: 6px; background-position: right top 1px;}
  form .form-contract-wrap .contract-box .contractType.on ul {display: flex;}
  form .form-contract-wrap .contract-box .contractType.on .input-wrap {display: block;}
}