@charset "utf-8";
/* error */
.form-write .form-head .form-label.point {color: var(--error);}
.check-wrap label.point {color: var(--error);}
/* form-wrap */
.form-wrap + .list-wrap {margin-top:1.5rem;}
.form-item + .form-item {margin-top:3rem;}
.form-head .form-label {font-size: 2.2rem;font-weight: 700; color: var(--gray900);}
.form-head + .form-body,
.form-body + .form-body {padding-top:1rem;}
.form-body {position: relative;}
.form-head {position: relative;overflow: hidden;}
.byte {float: right;font-size: 2rem;}
.field-wrap {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; flex: 1;}
.field-wrap + .field-wrap {margin-top:1rem;}
.field-item {display: flex; flex:1; align-items:center;}
.field-item + .field-item {margin-left:.8rem;}
.field-item > * + * {margin-left:.8rem;}
.field-item .dash {font-size:3rem;}
.field-item.col{flex-direction:column;align-items:flex-start;}
.field-item.col > * {margin:0;}
.field-item.col > *:first-of-type {margin-top:0;}
.field-item.type-line {border-bottom:1px solid var(--gray200);}
.form-wrap.lg .form-head .form-label {font-size:2.7rem; line-height:3.2rem;}
.form-wrap.lg .form-head + .form-body,
.form-wrap.lg .form-body + .form-body {padding-top:2rem;}
.form-divided {margin:1rem 0;}
.form-divided .form-item {flex:1; width:100%; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:flex-start;}
.form-divided .form-head {width:16rem; margin-top:2rem;}
.form-divided .form-body {flex:1; margin:0; padding:0;}
.form-divided .form-item.view {align-items:center;}
.form-divided .form-item.view .form-head {margin-top:0;}
.form-divided .form-item .col > * {margin-top:.5rem;}
.form-divided .field-item.col > *:first-of-type {margin-top:0;}
.form-divided .txt-indent {padding-left:2.5rem;}
.line-box+.form-divided {margin-top:3.5rem;}

.form-write {margin:2rem 0;}
.form-write .inp-text,
.form-write .inp-select {padding:0 1.5rem; font-size:1.8rem; border:none; border-radius:0;}
.form-write .inp-text:read-only,
.form-write .inp-file .file-name {color:#888;}
.form-write .inp-text.num {width:8rem;}
.form-write .btn-basic.round {flex-shrink:0; padding-left:2rem; padding-right:2rem;}
.form-write .form-item-group + .form-item-group {margin-top:2rem;}
.form-write .form-item + .form-item {margin-top:1.5rem;}
.form-write .form-item {flex-wrap:wrap; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; min-height:8rem; border-bottom:1px solid var(--gray200);}
.form-write .field-item .empty {position:relative; display: block; width:2rem; height:100%; margin-bottom:-11px; background-color:var(--white);}
.form-write .form-item-message {margin-top:1rem;}
.form-write .form-head {position:relative; padding-left:1.5rem;}

.form-write .form-head .form-label {font-size: 2.2rem;font-weight: 700; color: var(--gray900);}

.form-write .form-body {flex:1; margin:0; padding:0;}
.form-write .right {justify-content:flex-end;}

/* input text */
input, textarea {margin:0; padding:0; background-color: var(--white);}
input {font-size:100%; background:none; -webkit-appearance:none;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
/* input:-internal-autofill-selected {background-color: #252748 !important;} */
::placeholder {color:var(--gray600);}
input::placeholder{color:var(--gray600);}
input:-ms-input-placeholder {color:var(--gray600);}
.inp-text,
.inp-date,
.inp-select {width: 100%; height: 7rem; padding: 0 2.5rem; border: 1px solid var(--gray200); font-size: 2rem; color: var(--gray900); border-radius: 1.4rem; background-color:var(--white); text-overflow: ellipsis; white-space: nowrap; word-break: normal; vertical-align: middle;}
.inp-text.readonly,
.inp-text:read-only {background:#efeff1; color:var(--gray600);}
.inp-textarea {width: 100%; height: 18rem; border:none;}
.inp-textarea.has-line {padding:2.5rem; border:1px solid var(--gray200); border-radius:1.4rem;}
.inp-date {min-width:26.5rem; background-image: url('../img/icon/ico_date.png'); background-repeat: no-repeat; background-size: 3rem; background-position:calc(100% - 2.5rem) center;}
.inp-select {padding-right:5rem; background-image: url('../img/icon/ico_select.png'); background-repeat: no-repeat; background-size: 3rem; background-position:calc(100% - 2.5rem) center;}
.inp-select:invalid {color:var(--gray600);}
option[value=""][disabled] {display: none;}
option {color: black;}

.inp-file {position:relative; overflow:hidden; flex-wrap:nowrap; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; flex:1; height:6rem; padding:0 12rem 0 1.5rem;}
.inp-file input {width:96%; opacity:0; position: absolute;}
.inp-file label {position:absolute; right:0; display:inline-flex; align-items:center; min-width:8.2rem; height:4.3rem; padding:0 2rem; border-radius:4.3rem; border: 1px solid var(--gray500); background-color: var(--white); color: var(--gray900); font-weight:700; line-height:4.3rem; font-size:1.8rem;}
.inp-file .file-name {flex:1; display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:1; word-break:break-all;}

.form-unit {position:relative; flex:1;}
.form-unit .unit {position:absolute; right:2.5rem; top:50%; transform:translateY(-50%);}
.form-unit .inp-text {padding-right:4.5rem;}

.form-period {display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; width:100%;}
.form-period .inp-date {min-width:auto;}
.form-period > span {margin:0 .6rem;}

/* attach */
.inp-attach {overflow:hidden; position:absolute; display:block; width:100%; height:100%; text-indent:-999em;}
.inp-attach::before,
.inp-attach::after {content:""; display:block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--white);}
.inp-attach::before {width: 8rem; height: 1px;}
.inp-attach::after {height: 8rem; width: 1px;}
.inp-attach input {position: absolute; left: 0; top: 0; height: 100%; opacity: 0;}
/* checkbox */
.check-wrap {position: relative; display: inline-flex; min-height: 3rem; vertical-align: middle;}
.check-wrap input {opacity:0; position: absolute;}
.check-wrap label {position:relative; vertical-align:middle; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; /* flex-shrink: 0; */ padding-left: 4rem; color: var(--gray900); line-height:3rem; text-align:left;}
.check-wrap label::before,
.check-wrap label::after  {content: ''; position: absolute; left: 0; top: 0; flex-shrink: 0; display: block; width: 3rem; height: 3rem; border-radius: .8rem; background-size: contain; background-position: center center; background-repeat: no-repeat;}
.check-wrap label::before {border: 1px solid #bdbdbd; background-color:var(--white);}
/* .check-wrap label::after {background-image: url('../img/icon/ico_checkbox.png');} */
.check-wrap input:checked + label::after {background-color: var(--primary); background-image: url('../img/icon/ico_checkbox_on.png');}
.check-wrap input:focus + label::before {outline:-webkit-focus-ring-color auto 1px;}
.check-wrap + .check-wrap {margin-left: 4rem;}
.ellips label {width: 95%; position: relative; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; word-break: normal; vertical-align: middle;}

/* radio */
.radio-wrap {position: relative; display: inline-block; min-height: 3.6rem; vertical-align: middle;}
.radio-wrap input {opacity:0; position:absolute;}
.radio-wrap label {position:relative; vertical-align:middle; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; gap: .8rem; color: var(--gray900); line-height: 3.6rem; text-align: left;}
.radio-wrap label::before {content: ""; -ms-flex-negative: 0; flex-shrink: 0; display: block; width: 3.6rem; height: 3.6rem; padding: .2rem 0 0; box-shadow: inset 0  0 0 2px #bdbdbd; border-radius: 50%;}
.radio-wrap label::after  {content: ""; position: absolute; left: .9rem; top: .9rem; display: block; width: 1.8rem; height: 1.8rem; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); transition: background-color 0.2s, transform 0.3s, -webkit-transform 0.3s;}
.radio-wrap input:checked + label::before{ box-shadow: inset 0  0 0 2px var(--primary);}
.radio-wrap input:checked + label::after {background-color: var(--primary); -webkit-transform: scale(1); transform: scale(1);}
.radio-wrap input:focus + label::before {outline: -webkit-focus-ring-color auto 1px;}
.radio-wrap + .radio-wrap {margin-left: 4rem;}
.radio-wrap.type-2 {display:block; width:100%;}
.radio-wrap.type-2 label {position:relative; width:100%; gap:2.2rem; padding:2.3rem 2.8rem; font-weight:700; color:var(--secondary); font-size:2.5rem; border:1px solid var(--gray200); border-radius:1.5rem;}
.radio-wrap.type-2 input + label::after {left:3.7rem; top:3.1rem;}
.radio-wrap.type-2 input:checked + label {border-color:var(--secondary);}

/* selection */
.inp-selection-wrap {flex:1; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; justify-content:space-between; flex-wrap: nowrap;}
.inp-selection-item {position:relative; flex:1 1 0; display:block;} 
.inp-selection-item input {position:absolute;}
.inp-selection-item input + label {display:block; height:4.5rem; line-height:4.5rem; color:#888; border-radius:1.5rem; box-shadow:inset 0 0 0 1px #d9d9d9; text-align:center; transition:box-shadow .2s ease;}
.inp-selection-item input:checked + label {box-shadow:inset 0 0 0 3px var(--gray900); color:var(--gray900);}
.inp-selection-item + .inp-selection-item {margin-left:.3rem;}
.inp-selection-wrap input + .starbucks {background: url('../img/common/img_starbucks.png') no-repeat center bottom 1rem; background-size:9.1rem auto;}
.inp-selection-wrap.lg input + label {height:7rem; line-height:7rem; font-size:2.2rem;}
.inp-selection-wrap.lg input:checked + label {font-weight:700;}
.inp-selection-wrap.lg .inp-selection-item + .inp-selection-item {margin-left:.8rem;}