@charset "UTF-8";

/* -------------------------------cmm-form-style 공통 폼 스타일---------------------------------*/
/* 폼 호버, 포커스, 액티브 효과 */
.txtinput-cmm input:hover, .txtinput-cmm input:focus,.textarea-cmm textarea:focus, .search-cmm input:hover, .search-cmm input:focus, .searchinput-cmm input:hover, .searchinput-cmm input:focus, .send-input input:hover, .send-input input:focus{border: 1px solid #60D1BD; box-sizing: border-box; position: relative;z-index: 3;box-shadow:inset 0px 0px 0px 1px #60D1BD; color: #222;}

/* 텍스트 인풋 */
input::placeholder{color: #bbb!important;}
.txtinput-cmm{width: 100%; display:inline-block; position:relative; vertical-align:middle; box-sizing:border-box;display: flex;flex-direction: row;position: relative;}
.txtinput-cmm input{overflow: hidden; position: relative; font-weight: 500; width: 100%!important; outline: none; height: 48px;border: 1px solid #ccc;padding: 0 16px;font-size: 15px;border-radius: 4px;background-color: transparent;color: #bbb;}
.txtinput-cmm input.error{border-color: #EB003B!important;outline: none;position: relative;}
.txtinput-cmm input.error:hover, .txtinput-cmm input.error:focus{box-shadow: none;}
.txtinput-cmm input:disabled{background-color: #ccc!important;border: 1px solid #999!important;}
.txtinput-cmm input:disabled::placeholder{color: #eee!important;}
.txtinput-cmm input:disabled + .search-icon i{color: #eee!important;}
.txtinput-cmm input:read-only{background-color: #f5f5f5;border: 1px solid #ccc;color: #525252!important;}
.txtinput-cmm input:read-only:hover{border: 1px solid #ccc; box-shadow: none;color: #525252!important;}
.txtinput-cmm input:read-only::placeholder{color: #525252!important;}
.txtinput-cmm input:valid{color: #222!important;}

/* send input */
.send-input{display: flex;gap: 8px;width: 100%;margin-top: 24px;}
.send-input input{width: 100%;border: 1px solid #ccc;height: 48px;padding: 0 16px;color: #656565;outline: none;font-size: 15px;border-radius: 4px;}

/* 셀렉트 박스 */
.select-box{display: flex;flex-direction: column;gap: 8px;align-items: flex-start;}
.select-box-row{display: flex;flex-direction: row;gap: 8px;align-items: flex-start;width: 100%;}
.select-box-100{display: flex;flex-direction: column;gap: 8px;width: 100%!important;align-items: flex-start;}
.select-box-col{display: flex;flex-direction: column!important;gap: 8px!important;align-items: flex-start;}

/* upload-box */
.upload-box{width: 100%;display: flex;flex-direction: column;gap: 8px;}
.upload-box .error-text{margin-bottom: 8px;}
.flex-row-col{flex-wrap: wrap;}
.flex-row-col .w100{width: calc(100% - 58px);height: 48px;}

/* 텍스트에어리어 박스 */
.textarea-box{width: 100%;display: flex;flex-direction: column;}
.textarea-gap-box .error-text{margin-top: 8px;}

/* 검색창1 */
.search-txt{width: 100%;height: 48px;margin-bottom: 32px;}
.search-txt .txtinput-cmm input{position: relative;}
.search-txt .txtinput-cmm input::placeholder{color: #bbb;font-size: 15px;}
.search-txt .txtinput-cmm input:valid{color: #222!important;}
.search-icon{z-index: 100; position: absolute;right: 16px;top: 50%;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;}
.search-icon i{font-size: 20px;color: #525252;}
.search-txt-size{width: 320px!important;margin-bottom: 0px!important;}

.txtinput-cmm:has(.search-icon) input{padding-right: 40px;}

/* 검색창2 */
.search-btn-cmm, .search-btn-cmm2{width: 100%;height: 48px;}
.search-btn-cmm button{font-size: 16px;color: #fff;display: flex;flex-direction: row;align-items: center;justify-content: center;}
.search-btn-cmm img{margin-left: 10px;}
.search-btn-cmm2{margin-left: 0!important;}
.search-btn, .verify-btn{width: 120px!important;}
.search-btn-cmm2.search-btn{width: 48px!important;display: flex;align-items:center ;justify-content: center;}
.search-btn{display: flex;align-items: center;justify-content: center;}

/* 폼 앞 쪽의 전화번호 */
.tell-em{font-weight: normal; position: absolute; line-height: 48px; width: 58px;height: 48px;display: inline-block;text-align: center;font-size: 15px;color: #bbb;border: 1px solid #ccc;border-right: 0;border-radius: 4px 0px 0px 4px;}
.tell-em-input{padding-left: 53px!important;}
.tell-em-input2{padding-left: 4px!important;}
.tell-em.active{color: #999;}

.select-div-box{width: 100%;display: flex;gap: 24px;white-space: nowrap;}
.select-div-box > div{width: fit-content!important;}
.select-box-row2{display: flex;flex-direction: row; gap: 24px;}

/* 셀렉트 박스 */
.select-cmm{width: 100%;position: relative;background-color: #fff;}
.select-cmm:hover .select-cmm-option{color: #222!important;}
.select-cmm-186{width: 186px!important;}
.icon-arrow{width: 20px;height: 20px;background: url(../images/arrow-down-icon.svg);position: absolute;right: 16px;top: 50%;transform: translateY(-50%);}
.select-cmm-option:hover .icon-arrow{width: 20px;height: 20px;background: url(../images/arrow-down-hover.svg);position: absolute;right: 16px;top: 50%;transform: translateY(-50%);}
.select-cmm select:disabled + .icon-arrow{background: url(../images/icon-arrow-disabled.svg);position: absolute;z-index: 11;}
.select-cmm select.error{border-color: #EB003B!important;outline: none;}
.select-cmm-option{overflow: hidden; font-weight: 500; white-space: nowrap;text-overflow: ellipsis; color: #656565; cursor: pointer; background-color: transparent; border-radius: 4px;z-index: 3;position: relative; width: 100%; padding: 0 16px;height: 48px; display:inline-block;vertical-align:middle; box-sizing:border-box;outline: none;border: 1px solid #ccc;font-size: 15px;-o-appearance: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding-right: 40px;box-sizing: border-box;}
.select-cmm-option:hover{border: 1px solid #60D1BD;box-shadow: inset 0px 0px 0px 1px #60D1BD;}
.select-cmm select[disabled]{background-color: #ccc!important;border: 1px solid #999!important;color: #eee!important;}
.select-cmm select[read-only]{background-color: #f5f5f5!important;border: 1px solid #ccc!important;color: #525252!important;}
.select-cmm select:valid{color: #222!important;}

/* 텍스트에어리아 */
.textarea-cmm{display:inline-block; position:relative;width: 100%;}
.textarea-cmm textarea{resize: vertical!important;color: #bbb; box-sizing: border-box; border-radius: 4px; width: 100%;border: 1px solid #ccc;height: 144px;resize: auto;outline: none;padding: 16px;font-size: 15px;line-height: 1.5;font-weight: 500;}
.textarea-cmm textarea:hover{border: 1px solid #60D1BD;box-shadow: inset 0px 0px 0px 1px #60D1BD; color: #222;}
.textarea-cmm textarea::placeholder{color: #bbb;font-size: 15px;font-weight: 500;line-height: 150%;}
.textarea-cmm textarea:disabled{background-color: #ccc;border: 1px solid #999;color: #eee!important;}
.textarea-cmm textarea:read-only{background-color: #f5f5f5;border: 1px solid #ccc;color: #525252!important;}
.textarea-cmm textarea:valid{color: #222!important;}
.textarea-box.error textarea{border: 1px solid #EB003B!important;}
.textarea-box.error .help-text em{color: #EB003B!important;}
.textarea-cmm.ck-off .ck-editor__main:after{content:''; position: absolute; top:0; right:0; bottom:0; left:0; background-color:#eee;z-index: 1;border: 1px solid #ccc;}
.textarea-cmm.ck-off .ck-editor__editable{pointer-events:none!important;}
.textarea-cmm .ck-editor__main{position: relative;}

/* 라디오박스-1(기본) */
.radio-cmm{white-space: nowrap;word-break: break-all;cursor: pointer;font-weight: normal;}
label.radio-cmm{color: #656565;display: flex;flex-direction: row;gap: 4px;align-items: center;}
.radio-cmm input, .radio-box-cmm input[type="radio"]{display: none;}
.radio-cmm .rd-btn{cursor: pointer; position: relative; width: 24px;height: 24px;display: inline-block;border-radius: 50%;background: url(../images/radio-button-gray.svg);vertical-align: middle;}
.radio-cmm input[type="radio"]:checked + .rd-btn{background: url(../images/radio-button-line.svg)!important;}
.radio-cmm input[type="radio"]:disabled + .rd-btn{background: url(../images/radio-button-fullgray.svg)!important;}

/* 라디오박스-2(가로로 합쳐진 모양-regist-challenge3) */
.radio-box-cmm{overflow: hidden; position: relative; cursor: pointer;display: block;display: flex;align-items: center;justify-content: center;font-size: 16px;font-weight: 500;width: 100%;height: 48px;}
.sradio-box-cmm{background-color: #fff; position: relative; cursor: pointer;display: block;display: flex;align-items: center;justify-content: center;font-size: 16px;font-weight: 500;width: 100%;height: 36px!important;border-radius: 4px;}
.radio-box-cmm .rd-btn, .radio-box-cmm .rd-btn2, .radio-box-cmm .rd-btn3{width: 100%;height: 48px;display: flex;align-items:center ;justify-content: center;}
.radio-box-cmm .rd-btn5{display: flex;flex-direction: column!important;width: 100%;height: 48px;align-items: center;justify-content: center;}
.radio-box-cmm .rd-btn{color: #60D1BD;}
.radio-box-cmm .rd-btn2{color: #FF9559;}
.radio-box-cmm .rd-btn3{color: #525252;height: 36px!important;font-size: 14px!important;}
.radio-box-cmm .rd-btn5{color: #525252;font-size: 16px!important;}
.radio-box-cmm input[type="radio"]:checked + .rd-btn{background-color: #60D1BD;color: #fff;}
.radio-box-cmm input[type="radio"]:checked + .rd-btn2{background-color: #FF9559;color: #fff;}
.radio-box-cmm input[type="radio"]:checked + .rd-btn3{background-color: #525252;color: #fff;border-radius: 4px;}
.radio-box-cmm input[type="radio"]:checked + .rd-btn5{background-color: #525252;color: #fff;border-radius: 4px;}
.radio-box-cmm .rd-btn i, .radio-box-cmm .rd-btn2 i{display: none;}
.radio-box-cmm input[type="radio"]:checked + .rd-btn i,.radio-box-cmm input[type="radio"]:checked + .rd-btn2 i{display: inline-block;font-size: 20px;margin-right: 4px;}
.green-line{width: 100%;display: flex;flex-direction: row;height: 48px;border: 2px solid #60D1BD;border-radius: 4px;overflow: hidden;} 
.orange-line{width: 100%;display: flex;flex-direction: row;height: 48px;border: 2px solid #FF9559;border-radius: 4px;}
.yellow-line{width: 100%;display: flex;flex-direction: row;border: 1px solid #FFF0D3;border-radius: 4px;}
.gray-line, .s-gray-line{width: 100%;display: flex;flex-direction: row;border-radius: 4px;background-color: #fff;border-radius: 4px;}
.s-gray-line .input-box{gap: 8px;}
.date-check .gray-line{background-color: transparent;}

/* 체크박스 */
/* check-cmm */
.check-cmm, .check-type-cmm, .check-select-cmm, .check-gray-cmm{cursor: pointer; line-height: 1.5;font-size: 16px;display: flex!important;align-items: center;}
.check-terms{margin-top: 48px;}
.check-terms .check-cmm{margin-bottom: 12px;}
.check-terms .check-cmm:last-child{margin-bottom: 0px!important;}
.check-select-cmm{display: flex;align-items: center;}
.check-icon, .check-type-icon{cursor: pointer; position: relative;min-width: 24px;height: 24px;display: inline-block;vertical-align: middle;margin-right: 4px;background-image: url(../images/checkbox-blank-line.svg);}
.check-cmm:hover .check-icon, .check-cmm:hover .check-type-icon{width: 24px;height: 24px;display: inline-block;vertical-align: middle;margin-right: 4px;background-image: url(../images/checkbox-green-line.svg);}
.check-cmm + .check-icon{ background-image: url(../images/checkbox-green-hover.svg)!important;}
.check-cmm input[type="checkbox"]:checked ~ .check-icon{ background-image: url(../images/checkbox-green-hover.svg)!important;}
.check-cmm input[type="checkbox"]:disabled ~ .check-icon{background-image: url(../images/checkbox-gray-line.svg);}
.check-cmm .check-txt{font-weight: normal; display: flex;align-items: center;text-align: left;color: #525252;font-size: 16px;white-space: nowrap;line-height: 150%;}
.check-cmm input[type="checkbox"], .switch-check-cmm input[type="checkbox"], .check-type-cmm input[type="checkbox"],.type-check-cmm input[type="checkbox"], .check-hori-cmm input[type="checkbox"], .check-select-cmm input[type="checkbox"], .check-gray-cmm input[type="checkbox"]{display: none;}
.check-cmm-mr{white-space: nowrap; display: flex;align-items: center;justify-content: right;}
.check-cmm-ml{margin-right: 12px;white-space: nowrap; display: flex;align-items: center;justify-content: left;height: 48px;}
.check-cmm-12{margin-right: 12px;width: 20%;}
.check-select-icon{margin-right: 4px; cursor: pointer; width: 16px;height: 16px;background: url(../images/check-line-gray.svg);}
.check-select-txt{color: #ccc;font-size: 14px;}
.check-select-cmm input[type="checkbox"]:checked + .check-select-icon{background: url(../images/check-line-green.svg);}
.check-select-cmm input[type="checkbox"]:checked + .check-select-icon + .check-select-txt{color: #525252;}
.check-select-cmm input[type="checkbox"]:disabled + .check-select-icon{background: url(../images/checkbox-gray-line.svg);}
.check-cmm span{text-align: left;white-space: nowrap;}

/* switch checkbox 스위치 모양의 껐다 켜는 체크박스 */
.switch-check-cmm .slider{vertical-align: middle; transition: all 0.3s; cursor: pointer; width: 40px;height: 22px;display: inline-block;border-radius: 20px;position: relative;background-color: #DAF8F3;}
.switch-check-cmm .slider::after{transition: all 0.3s; position: absolute;content: "";width: 16px;height: 16px;border-radius: 50%;background-color: #fff;top: 50%;transform: translateY(-50%);left: 3px;}
.switch-check-cmm input[type="checkbox"]:checked + .slider{background-color: #60D1BD;}
.switch-check-cmm input[type="checkbox"]:checked + .slider::after{background-color: #fff;left: 20px;}
.check-type-cmm .check-type-icon{width: 24px;height: 24px;display: block;border: none;font-size: 20px;color: #ccc;}
.check-type-icon.on{color: #111;}
.switch-check-cmm input[type="checkbox"]:disabled + .slider{vertical-align: middle; transition: all 0.3s; cursor: pointer; width: 40px;height: 22px;display: inline-block;border-radius: 20px;position: relative;background-color: #ccc;}




/* -------------------------box----------------------- */
/* form-box */
.form-box{display: flex;flex-direction: row;width: 100%;margin-top: 32px;}

/* label-box */
.label-box{position: relative;margin-right: 24px;min-width: 200px;display: flex;align-items: flex-start!important;display: block;}
.label-box-margin{align-items: flex-start!important;display: flex!important;}
.label-box-margin .label-txt{margin-left: 8px;}

/* label-txt */
.label-txt{display: block;font-size: 16px;position: relative;word-break:keep-all;width: 200px;height:48px;display: flex;flex-direction: row;font-weight: 600;text-align: left;color: #222;}
.label-txt-light{font-weight: normal!important;}
.label-txt-100{width: 100%!important;height: auto!important;font-size: 15px;color: #222;font-weight: normal;margin-bottom: 12px;line-height: 100%;}
.label-txt span{color: #EB003B;font-family: pps;font-weight: bold;margin-right: 2px;}
.label-subtitle{min-width: 250px;max-width: 250px;display: flex;align-items: center;margin-right: 0!important;}

/* input-box */
.input-box{width: 100%!important; display: flex;flex-direction: row!important;position: relative; gap: 8px;align-items: flex-start;}
.input-box-col{width: 100%; display: flex;flex-direction: column!important;position: relative; gap: 0px!important;align-items: flex-start;}
.input-box-50{display: flex;flex-direction: row;align-items: center;justify-content: center;text-align: left;}
.input-box-50 > label{width: 50%;}
.input-box-gap5{gap: 5px!important;}
.input-box-nogap{width: 100%!important; display: flex;flex-direction: row;position: relative; gap: 0px!important;align-items: center;}
.input-box input[type="number"]::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
.input-box2{align-items: center!important;}
.input-box2 p{color: #656565;font-size: 15px;}

/* txtinput-box */
.txtinput-box{width: 100%;display: flex; flex-direction: column; gap: 8px;align-items: flex-start;}
.txtinput-box-start{display: flex;align-items: flex-start!important;flex-direction: column;width: 100%;gap: 8px;}
.txtinput-box-col{display: flex;flex-direction: column!important;width: 100%;gap: 8px;margin-bottom: 8px;}

.input-container{width: 100%;}

/* selected-box */
.selected-box, .datepicker-box{width: 100%;display: flex; flex-direction: column; gap: 8px;align-items: flex-start;}

/* file-box */
.filebox{width: 100%;display: flex;align-items: flex-start;}
.filebox input[type="file"]{display: none;}
.filebox-input{box-sizing: border-box; width: 100%; outline: none;height: 46px;border: 1px solid #ccc;margin-right: 8px;}
.filebox-8 .filebox-input{margin-right: 0!important;}

/* check-box */
.check-box{width: 100%;display: flex; flex-direction: column; gap: 8px;align-items: flex-start;}
.check-box .check-cmm{margin-bottom: 0;}
.check-box .error-text{line-height: 150%!important;}

/*세종특별자치시 disabled*/
.select-cmm.disabled, .select-cmm.disabled:hover {background-color: #e0e0e0 !important; cursor: default !important;}
.select-cmm.disabled .select-cmm-option {background-color: #e0e0e0 !important; color: #f5f5f5 !important; pointer-events: none;}