form .form-contract-wrap .contract-select {display: flex; flex-direction: column; gap: 6px;}
form .form-contract-wrap .contract-select .check {display: flex; align-items: center; gap: 6px; height: 52px; background: #FFF0F1; border: solid 1px #FF4255; border-radius: 6px; padding: 8px;}
form .form-contract-wrap .contract-select .check strong {display: block; font-size: 16px; letter-spacing: -0.03em; color: #121212; background: url("/images/common/document/ic_important.svg") left center/24px 24px no-repeat; padding-left: 28px;}
form .form-contract-wrap .contract-select .check p {font-size: 14px; letter-spacing: -0.03em; color: #121212; margin-right: auto;}
form .form-contract-wrap .contract-select .check .radio-wrap {display: flex; gap: 20px; align-items: center; background: #fff; border-radius: 8px; border: solid 1px #d8e3ef; padding: 8px;}
form .form-contract-wrap .contract-select .check .radio-wrap input {display: block; width: 16px; height: 16px; background: url("/images/common/form/ic_radio-unchecked.svg") no-repeat;}
form .form-contract-wrap .contract-select .check .radio-wrap input:checked {background-image: url("/images/common/form/ic_radio-checked.svg");}
form .form-contract-wrap .contract-select .check .radio-wrap label {display: flex; align-items: center; gap: 4px; font-size: 14px; letter-spacing: -0.03em; color: #121212;}
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; position: relative; display: flex; flex-direction: column; min-height: 220px;}
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%); pointer-events: none;}
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 .info {display: grid; grid-template-columns: repeat(2, 1fr); padding: 12px 0 0;}
form .form-contract-wrap .contract-box .contractType .info ul { margin-left: 12px; border-left: solid 1px #d5e3f0; padding-left: 4px; display: flex; flex-direction: column; gap: 5px;}
form .form-contract-wrap .contract-box .contractType .info 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 .info 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 .info 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 .info ul li i.corp {background: #0080ff; color: #fff; font-weight: 400;}
form .form-contract-wrap .contract-box .contractType .info ul li i.person {background: #ffe894; color: #333;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap {position: relative; margin-top: auto; min-width: 230px; display: flex; flex-direction: column; gap: 6px;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap .contract-info {display: flex; align-items: center; gap: 16px;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap .contract-info p {font-weight: 600; font-size: 14px; letter-spacing: -0.03em; color: #121212; position: relative;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap .contract-info p:after {content: '*'; font-weight: 500; font-size: 18px; color: #ff0000; position: absolute; top: 0; right: -10px;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap .contract-info .sub {display: flex; align-items: center; gap: 5px;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap .contract-info .sub input[type='checkbox'] {width: 16px; height: 16px; border-radius: 3px; border: solid 1px #adaeb4; background: #fff;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap .contract-info .sub input[type='checkbox']:checked {border-color: #366cf1; background: url('/images/common/form/ic_check.svg') no-repeat #fff; background-size: cover;}
form .form-contract-wrap .contract-box .contractType .info .input-wrap .contract-info .sub label {font-weight: 400; font-size: 13px; letter-spacing: -0.03em; color: #444;}
form .form-contract-wrap .contract-box .contractType .input-wrap input:not([type=checkbox]) {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 input:disabled {background: #fff;}
form .form-contract-wrap .contract-box .contractType .input-wrap #contractAddress {position: relative;}
form .form-contract-wrap .contract-box .contractType .input-wrap #contractAddress 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;}
form .form-contract-wrap .contract-box .contractType:not(.on) {cursor: pointer;}
form .form-contract-wrap .contract-box .contractType:not(.on) input,
form .form-contract-wrap .contract-box .contractType:not(.on) label {cursor: pointer; pointer-events: none;}

@media (max-width: 1350px) {
  form .form-contract-wrap .contract-box .contractType {transition: unset;}
}
@media (max-width: 1060px) {
  form .form-contract-wrap .contract-box .contractType {transition: all 0.2s ease-in-out;}
  form .form-contract-wrap .contract-box .contractType .info {display: flex; flex-direction: column;}
  form .form-contract-wrap .contract-box .contractType .info ul {margin-top: 10px; margin-left: 0; border-left: 0; padding-left: 0;}
}

@media (max-width: 980px) {
  form .form-contract-wrap .contract-select .check {display: grid; grid-template-areas: "title radio" "desc radio"; height: 70px; gap: 0; grid-template-columns: 1fr min-content;}
  form .form-contract-wrap .contract-select .check > strong {grid-area: title;}
  form .form-contract-wrap .contract-select .check > p {grid-area: desc;}
  form .form-contract-wrap .contract-select .check > div {grid-area: radio; align-self: end;}
  form .form-contract-wrap .contract-select .check > div .radio-wrap {padding: 6px;}
  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 .info .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 {min-height: 38px;}
  form .form-contract-wrap .contract-box .contractType::after {content: none;}
  form .form-contract-wrap .contract-box .contractType strong {border-bottom-color: #d5e3f0; flex: 0 0 32px; padding-bottom: 6px;}
  form .form-contract-wrap .contract-box .contractType strong span {display: inline-block;}
  form .form-contract-wrap .contract-box .contractType .info .input-wrap {min-width: unset;}
  form .form-contract-wrap .contract-box .contractType.on {padding: 6px 10px 10px;}
  form .form-contract-wrap .contract-box .contractType.on strong {background-position: right top 1px;}
  form .form-contract-wrap .contract-box .contractType:not(.on) {flex: 1 0 38px; padding: 6px 10px; overflow-y: hidden;}
}

@media (max-width: 550px) {
  form .form-contract-wrap .contract-select .check {display: flex; flex-direction: column; align-items: flex-start; height: auto;}
  form .form-contract-wrap .contract-select .check > p {margin-top: 10px;}
  form .form-contract-wrap .contract-select .check > div .radio-wrap {margin-top: 10px;}
}