/* 태그 */
* {outline: none; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: transparent;}

html,
body {width: 100%; height: 100%;}

body {font-family: 'NotoSansCJKkr', Arial, Verdana, sans-serif;}

input[type="checkbox"],
input[type="radio"],
select,
button {cursor: pointer;}

button:disabled {cursor: auto;}


/* 클래스 */
.wrapper {width: 100%; min-width: 320px; height: 100%;}
.outer {display: table; width: 100%; height: 100%;}
.inner {display: table-cell; vertical-align: middle;}
.wrap {box-sizing: border-box; position: relative; margin: 0 auto;}

.mobileClick,
.mobileClick * {cursor: pointer;}


/* 얼럿 */
.alert {display: none; overflow: auto; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 3000;}
.alert .container {position: relative; width: 100%; min-width: 320px; height: 100%;}
.alert .box {width: 260px; padding: 20px 0; margin: 0 auto;}
.alert .zone {border-radius: 4px; background-color: #fff;}
.alert .body {padding: 24px 30px; color: #666; font-size: 13px; line-height: 24px; text-align: center;}
.alert .footer {position: relative; height: 45px;}
.alert .footer button {display: block; position: absolute; top: 0; width: 50%; height: 100%; padding: 0; margin: 0; border: none; font-weight: 500; font-size: 14px;}
.alert .footer button.cancel {left: 0; border-radius: 0 0 0 4px; background-color: #f5f5f5; color: #666;}
.alert .footer button.cancel:hover {background-color: #e6e6e6;}
.alert .footer button.confirm {right: 0; border-radius: 0 0 4px 0; background-color: #202845; color: #fff;}
.alert .footer button.confirm:hover {background-color: #12172c;}

.alert.typeConfirm .footer button {width: 100%; border-radius: 0 0 4px 4px;}
.alert.typeConfirm .footer button.cancel {display: none;}

.type-content.alertActive {overflow: hidden;}
.type-content.alertActive .alert {display: block;}


/* 모달 */
.modal {display: none; overflow: auto; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 2000;}
.modal .container {position: relative; width: 100%; min-width: 320px; height: 100%;}
.modal .box {width: 260px; padding: 20px 0; margin: 0 auto;}
.modal .zone {border-radius: 4px; background-color: #fff;}
.modal .body {padding: 24px 30px; color: #666; font-size: 13px; line-height: 24px; text-align: center;}
.modal .footer {position: relative; height: 45px;}
.modal .footer button {display: block; position: absolute; top: 0; width: 50%; height: 100%; padding: 0; margin: 0; border: none; font-weight: 500; font-size: 14px;}
.modal .footer button.cancel {left: 0; border-radius: 0 0 0 4px; background-color: #f5f5f5; color: #666;}
.modal .footer button.cancel:hover {background-color: #e6e6e6;}
.modal .footer button.confirm {right: 0; border-radius: 0 0 4px 0; background-color: #202845; color: #fff;}
.modal .footer button.confirm:hover {background-color: #12172c;}

.modal.sms .body {position: relative;}
.modal.sms .body .select .formSelect {text-align: left;}
.modal.sms .body .sms {padding-top: 10px;}
.modal.sms .body .sms textarea {display: block; box-sizing: border-box; width: 100%; height: 174px; padding: 14px 15px; margin: 0; border: 1px solid #e0e0e0; border-radius: 3px; background-color: #fff; color: #666; font-size: 13px; line-height: 24px; resize: none; -webkit-appearance: none;}
.modal.sms .body .sms textarea::placeholder {color: #d1d1d1;}
.modal.sms .body .sms textarea::-webkit-input-placeholder {color: #d1d1d1;}
.modal.sms .body .sms textarea:-ms-input-placeholder {color: #d1d1d1;}
.modal.sms .body .byte {padding-top: 5px; color: #666; line-height: 21px; text-align: right;}
.modal.sms .body .byte span {color: #d0202e;}

.modal.typeConfirm .footer button {width: 100%; border-radius: 0 0 4px 4px;}
.modal.typeConfirm .footer button.cancel {display: none;}

.type-content.modalActive {overflow: hidden;}
.type-content.modalActive .modal {display: block;}

.type-content.modalSmsActive {overflow: hidden;}
.type-content.modalSmsActive .modal.sms {display: block;}

.type-content.modalClosedHoleActive {overflow: hidden;}
.type-content.modalClosedHoleActive .modal.closedHole {display: block;}


/* 셀렉트 */
.formSelect {position: relative;}

.formSelectList {box-sizing: border-box; position: relative; height: 40px; border: 1px solid #e6e6e6; border-radius: 4px; background-color: #fff; cursor: pointer;}
.formSelectList:before {display: block; position: absolute; top: 0; right: 0; width: 39px; height: 100%; background: transparent url('../images/content/pc/arrow-type11.png') no-repeat center center; content: '';}
.formSelectList:after {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: '';}
.formSelectList input {box-sizing: border-box; width: calc(100% - 39px); height: 100%; padding: 0 0 0 15px; margin: 0; border: none; border-radius: 0; background-color: transparent; color: #666; font-size: 13px; cursor: pointer; -webkit-appearance: none;}
.formSelectList input::placeholder {color: #d1d1d1;}
.formSelectList input::-webkit-input-placeholder {color: #d1d1d1;}
.formSelectList input:-ms-input-placeholder {color: #d1d1d1;}
@media (max-width: 1279px) {
  .formSelectList {height: 45px;}
  .formSelectList input {font-size: 14px;}
}

.formSelectPopup {display: none; overflow: auto; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000;}
.formSelectPopup .formSelectPopup-container {position: relative; width: 100%; min-width: 320px; height: 100%;}
.formSelectPopup .formSelectPopup-box {width: 300px; padding: 20px 0; margin: 0 auto;}
.formSelectPopup .formSelectPopup-zone {border-radius: 4px; background-color: #fff;}
.formSelectPopup .formSelectPopup-header {display: none; box-sizing: border-box; padding: 15px; border-radius: 4px 4px 0 0; background-color: #f9f9f9;}
.formSelectPopup .formSelectPopup-header input {box-sizing: border-box; width: 100%; height: 40px; padding: 0 15px; margin: 0; border: 1px solid #e6e6e6; border-radius: 4px; background-color: #fff; color: #666; font-size: 13px; -webkit-appearance: none;}
.formSelectPopup .formSelectPopup-header input::placeholder {color: #d1d1d1;}
.formSelectPopup .formSelectPopup-header input::-webkit-input-placeholder {color: #d1d1d1;}
.formSelectPopup .formSelectPopup-header input:-ms-input-placeholder {color: #d1d1d1;}
.formSelectPopup ul.formSelectPopup-body {box-sizing: border-box; overflow: auto; list-style: none; max-height: 202px; padding: 5px 0; margin: 0;}
.formSelectPopup ul.formSelectPopup-body li label {display: block; box-sizing: border-box; position: relative; padding: 7px 15px 6px 15px; color: #666; font-size: 13px; line-height: 19px; cursor: pointer;}
.formSelectPopup ul.formSelectPopup-body li label:hover {background-color: #f5f5f5;}
.formSelectPopup ul.formSelectPopup-body li label:hover input:checked + input + i {background-color: #e6e6e6;}
.formSelectPopup ul.formSelectPopup-body li label input {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0; opacity: 0; z-index: 20; -webkit-appearance: none;}
.formSelectPopup ul.formSelectPopup-body li label input[type="checkbox"] {display: none;}
.formSelectPopup ul.formSelectPopup-body li label i {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.formSelectPopup ul.formSelectPopup-body li label span {position: relative; z-index: 10;}
.formSelectPopup ul.formSelectPopup-body li label input:checked + input + i {background-color: #e6e6e6;}
.formSelectPopup .formSelectPopup-footer {display: none; position: relative; height: 45px;}
.formSelectPopup .formSelectPopup-footer button {display: block; position: absolute; top: 0; width: 50%; height: 100%; padding: 0; margin: 0; border: none; font-weight: 500; font-size: 14px;}
.formSelectPopup .formSelectPopup-footer button.formSelectPopup-cancel {left: 0; border-radius: 0 0 0 4px; background-color: #f5f5f5; color: #666;}
.formSelectPopup .formSelectPopup-footer button.formSelectPopup-cancel:hover {background-color: #e6e6e6;}
.formSelectPopup .formSelectPopup-footer button.formSelectPopup-confirm {right: 0; border-radius: 0 0 4px 0; background-color: #202845; color: #fff;}
.formSelectPopup .formSelectPopup-footer button.formSelectPopup-confirm:disabled {opacity: 0.3;}
.formSelectPopup .formSelectPopup-footer button.formSelectPopup-confirm:hover {background-color: #12172c;}
.formSelectPopup.typeMulti ul.formSelectPopup-body li label {padding-left: calc(27px + 15px);}
.formSelectPopup.typeMulti ul.formSelectPopup-body li label i {top: 50%; left: 15px; width: 19px; height: 19px; margin-top: -8px; background: transparent url('../images/content/pc/checkbox-type01.png') no-repeat center top;}
.formSelectPopup.typeMulti ul.formSelectPopup-body li label input[type="checkbox"] {display: block;}
.formSelectPopup.typeMulti ul.formSelectPopup-body li label input[type="radio"] {display: none;}
.formSelectPopup.typeMulti ul.formSelectPopup-body li label input + input:checked + i {background-position: center bottom;}
.formSelectPopup.typeMulti .formSelectPopup-footer {display: block;}

.formSelectPopup.typeSearch .formSelectPopup-header {display: block;}

.formSelect .formSelectPopup {position: absolute; top: 46px; left: 0; width: 100%; height: auto; background-color: transparent; z-index: 30;}
.formSelect .formSelectPopup .formSelectPopup-container {min-width: auto; height: auto;}
.formSelect .formSelectPopup .formSelectPopup-box {width: 100%; padding: 0; margin: 0;}
.formSelect .formSelectPopup .formSelectPopup-zone {border: 1px solid #e6e6e6;}
.formSelect .formSelectPopup .formSelectPopup-header {border-radius: 3px 3px 0 0;}
.formSelect .formSelectPopup .formSelectPopup-footer button.formSelectPopup-cancel {border-radius: 0 0 0 3px;}
.formSelect .formSelectPopup .formSelectPopup-footer button.formSelectPopup-cancel:hover {background-color: #e6e6e6;}
.formSelect .formSelectPopup .formSelectPopup-footer button.formSelectPopup-confirm {border-radius: 0 0 3px 0;}
.formSelect .formSelectPopup .formSelectPopup-footer button.formSelectPopup-confirm:hover {background-color: #12172c;}

.type-content.select01Active .formSelect .formSelectPopup.select01,
.type-content.select02Active .formSelect .formSelectPopup.select02,
.type-content.select03Active .formSelect .formSelectPopup.select03,
.type-content.select04Active .formSelect .formSelectPopup.select04,
.type-content.select05Active .formSelect .formSelectPopup.select05,
.type-content.select06Active .formSelect .formSelectPopup.select06,
.type-content.select07Active .formSelect .formSelectPopup.select07,
.type-content.select08Active .formSelect .formSelectPopup.select08,
.type-content.select09Active .formSelect .formSelectPopup.select09,
.type-content.select10Active .formSelect .formSelectPopup.select10 {display: block;}
@media (max-width: 1279px) {
  .type-content.select01Active,
  .type-content.select02Active,
  .type-content.select03Active,
  .type-content.select04Active,
  .type-content.select05Active,
  .type-content.select06Active,
  .type-content.select07Active,
  .type-content.select08Active,
  .type-content.select09Active,
  .type-content.select10Active {overflow: hidden;}
  .type-content.select01Active .formSelectPopup.select01,
  .type-content.select02Active .formSelectPopup.select02,
  .type-content.select03Active .formSelectPopup.select03,
  .type-content.select04Active .formSelectPopup.select04,
  .type-content.select05Active .formSelectPopup.select05,
  .type-content.select06Active .formSelectPopup.select06,
  .type-content.select07Active .formSelectPopup.select07,
  .type-content.select08Active .formSelectPopup.select08,
  .type-content.select09Active .formSelectPopup.select09,
  .type-content.select10Active .formSelectPopup.select10 {display: block;}
  .type-content.select01Active .formSelect .formSelectPopup.select01,
  .type-content.select02Active .formSelect .formSelectPopup.select02,
  .type-content.select03Active .formSelect .formSelectPopup.select03,
  .type-content.select04Active .formSelect .formSelectPopup.select04,
  .type-content.select05Active .formSelect .formSelectPopup.select05,
  .type-content.select06Active .formSelect .formSelectPopup.select06,
  .type-content.select07Active .formSelect .formSelectPopup.select07,
  .type-content.select08Active .formSelect .formSelectPopup.select08,
  .type-content.select09Active .formSelect .formSelectPopup.select09,
  .type-content.select10Active .formSelect .formSelectPopup.select10 {display: none;}
}


/* 캘린더 */
.formCalendar {position: relative; width: 300px;}

.formCalendarList {box-sizing: border-box; position: relative; height: 40px; border: 1px solid #e6e6e6; border-radius: 4px; background-color: #fff; cursor: pointer;}
.formCalendarList:before {display: block; position: absolute; top: 0; right: 0; width: 50px; height: 100%; background: transparent url('../images/content/pc/calendar-type01.png') no-repeat center center; content: '';}
.formCalendarList input {box-sizing: border-box; width: calc(100% - 50px); height: 100%; padding: 0 0 0 15px; margin: 0; border: none; border-radius: 0; background-color: transparent; color: #666; font-size: 13px; cursor: pointer; -webkit-appearance: none;}
.formCalendarList input::placeholder {color: #d1d1d1;}
.formCalendarList input::-webkit-input-placeholder {color: #d1d1d1;}
.formCalendarList input:-ms-input-placeholder {color: #d1d1d1;}
@media (max-width: 1279px) {
  .formCalendarList {height: 45px;}
  .formCalendarList input {box-shadow: none; font-size: 14px;}
}

.formCalendarPopup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1000;}
.formCalendarPopup .formCalendarPopup-container {position: relative; width: 100%; min-width: 320px; height: 100%;}
.formCalendarPopup .formCalendarPopup-box {width: 100%; padding: 20px 0; margin: 0 auto;}
.formCalendarPopup .formCalendarPopup-zone {border-radius: 4px; background-color: #fff;}
.formCalendarPopup .formCalendarPopup-header {box-sizing: border-box; position: relative; height: 78px; padding: 0 30px; border-radius: 4px 4px 0 0; background-color: #fff;}
.formCalendarPopup .formCalendarPopup-header .title {position: absolute; top: 0; left: 112px; font-size: 18px; font-weight: 400; color: #222; line-height: 78px;}
.formCalendarPopup .formCalendarPopup-header .prev {overflow: hidden; position: absolute; top: 35px; left: 30px; width: 7px; height: 11px; background: transparent url('../images/content/pc/prev-type02.png') no-repeat center center; text-indent: -1000px; cursor: pointer;}
.formCalendarPopup .formCalendarPopup-header .next {overflow: hidden; position: absolute; top: 35px; right: 30px; width: 7px; height: 11px; background: transparent url('../images/content/pc/next-type02.png') no-repeat center center; text-indent: -1000px; cursor: pointer;}
.formCalendarPopup .formCalendarPopup-body ul {box-sizing: border-box; list-style: none; padding: 0 17px 0 18px; margin: 0;}
.formCalendarPopup .formCalendarPopup-body ul::after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';}
.formCalendarPopup .formCalendarPopup-body ul li {float: left; width: 30px; padding: 8px 0; margin: 0 4px 0 5px; color: #666; font-size: 13px; text-align: center;}
.formCalendarPopup .formCalendarPopup-body ul li.holiday {color: #d0202e;}
.formCalendarPopup .formCalendarPopup-body ul.num {padding-bottom: 18px; cursor: pointer;}
.formCalendarPopup .formCalendarPopup-body ul.num li {margin-top: 1px;}
.formCalendarPopup .formCalendarPopup-body ul li.active {border-radius: 50%; background-color: #202845; color: #fff;}
.formCalendarPopup .formCalendarPopup-body ul li.none {color: #ccc;}
.formCalendarPopup .formCalendarPopup02 {display: none;}
@media (max-width: 1279px) {
  .formCalendarPopup .formCalendarPopup-header {width: 320px; padding: 0; margin: 0 auto;}
  .formCalendarPopup .formCalendarPopup-box {padding: 0;}
  .formCalendarPopup .formCalendarPopup-header .prev {left: 18px;}
  .formCalendarPopup .formCalendarPopup-header .next {right: 18px;}
  .formCalendarPopup .formCalendarPopup-body {width: 320px; margin: 0 auto;}
  .formCalendarPopup .formCalendarPopup-body ul {padding: 0 2px 0 3px;}
  .formCalendarPopup .formCalendarPopup-body ul li {width: 45px; padding: 15px 0 16px 0; margin: 0; vertical-align: center;}
  .formCalendarPopup .formCalendarPopup-body ul li.active {width: 45px; margin: 0;}
}

.formCalendarPopup .formCalendarPopup-footer {display: block; position: relative; height: 50px; border-top: 1px solid #e6e6e6;}
.formCalendarPopup .formCalendarPopup-footer button {display: block; position: absolute; top: 0; width: 70px; height: 30px; padding: 0; margin: 0; border: none; border-radius: 4px; font-weight: 500; font-size: 14px;}
.formCalendarPopup .formCalendarPopup-footer button.formCalendarPopup-cancel {top: 10px; left: 15px; border: 1px solid #ccc; background-color: #fff; color: #666;}
.formCalendarPopup .formCalendarPopup-footer button.formCalendarPopup-cancel:hover {background-color: #e6e6e6;}
.formCalendarPopup .formCalendarPopup-footer button.formCalendarPopup-confirm {top: 10px; right: 15px; background-color: #202845; color: #fff;}
.formCalendarPopup .formCalendarPopup-footer button.formCalendarPopup-confirm:disabled {opacity: 0.3;}
.formCalendarPopup .formCalendarPopup-footer button.formCalendarPopup-confirm:hover {background-color: #12172c;}

.formCalendar .formCalendarPopup {position: absolute; top: 0; left: 310px; width: 310px; height: auto; background-color: transparent; z-index: 30;}
.formCalendar .formCalendarPopup .formCalendarPopup-container {min-width: auto; height: auto;}
.formCalendar .formCalendarPopup .formCalendarPopup-box {width: 100%; padding: 0; margin: 0;}
.formCalendar .formCalendarPopup .formCalendarPopup-zone {border: 1px solid #e6e6e6;}

.formCalendarPopup.typeTerm {box-sizing: border-box; width: 100%;}
.formCalendarPopup.typeTerm .formCalendarPopup-container {position: relative; width: 100%; min-width: 320px; height: 100%;}
.formCalendarPopup.typeTerm .formCalendarPopup-box {width: 623px; padding: 0; margin: 0 auto;}
.formCalendarPopup.typeTerm .formCalendarPopup-zone {border-radius: 4px; background-color: #fff;}
.formCalendarPopup.typeTerm .formCalendarPopup-wrap::after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';}
.formCalendarPopup.typeTerm .formCalendarPopup01 {float: left; width: 310px; border-right: 1px solid #e6e6e6;}
.formCalendarPopup.typeTerm .formCalendarPopup01 .next {display: none;}
.formCalendarPopup.typeTerm .formCalendarPopup02 .prev {display: none;}
.formCalendarPopup.typeTerm .formCalendarPopup02 {display: block; float: left; width: 310px; border-left: 1px solid #e6e6e6; margin-left: -1px;}
.formCalendarPopup.typeTerm .formCalendarPopup-body ul li.active {width: 39px; margin: 1px 0 0 0;  border-radius: 0; background-color: #f5f5f5; color: #666;}
.formCalendarPopup.typeTerm .formCalendarPopup-body ul li.active.holiday {color: #d0202e;}
.formCalendarPopup.typeTerm .formCalendarPopup-body ul li.startActive {width: 39px; margin: 1px 0 0 0; background: transparent url('../images/content/pc/start-type01.png') no-repeat center right / 35px 30px; color: #fff;}
.formCalendarPopup.typeTerm .formCalendarPopup-body ul li.endActive {width: 39px; margin: 1px 0 0 0; background: transparent url('../images/content/pc/end-type01.png') no-repeat center left / 35px 30px; color: #fff;}
@media (max-width: 1279px) {
  .formCalendarPopup.typeTerm {box-sizing: border-box; overflow: auto; width: 100%;}
  .formCalendarPopup.typeTerm .formCalendarPopup-container {position: relative; width: 100%; min-width: 320px; height: 100%;}
  .formCalendarPopup.typeTerm .formCalendarPopup-box {width: 100%;}
  .formCalendarPopup.typeTerm .formCalendarPopup-zone {border-radius: 4px; background-color: #fff;}
  .formCalendarPopup.typeTerm .formCalendarPopup01 {float: none; width: 100%; border-right: 0;}
  .formCalendarPopup.typeTerm .formCalendarPopup02 {float: none; width: 100%; border-top: 1px solid #e6e6e6; border-left: 0; margin-left: 0;}
  .formCalendarPopup.typeTerm .formCalendarPopup-body ul li {width: 45px; padding: 15px 0 16px 0; margin: 0; vertical-align: center;}
  .formCalendarPopup.typeTerm .formCalendarPopup-body ul li.active {width: 45px; margin: 0;}
  .formCalendarPopup.typeTerm .formCalendarPopup-body ul li.startActive {width: 45px; margin: 0; background: transparent url('../images/content/mobile/start-type01.png') no-repeat center right / 45px 45px;}
  .formCalendarPopup.typeTerm .formCalendarPopup-body ul li.endActive {width: 45px; margin: 0; background: transparent url('../images/content/mobile/end-type01.png') no-repeat center right / 45px 45px;}
}

.type-content.calendarActive .formCalendarPopup {display: none;}

.type-content.calendarActive .formCalendar .formCalendarPopup {display: block;}
@media (max-width: 1279px) {
  .type-content.calendarActive {overflow: hidden;}
  .type-content.calendarActive .formCalendarPopup {display: block;}
  .type-content.calendarActive .formCalendar .formCalendarPopup {display: none;}
}


/* 스위치 */
.component-switch .co-body {padding: 5px 0; line-height: 0;}
.component-switch .co-body label {display: inline-block; position: relative; line-height: 1.15; text-align: left;}
.component-switch .co-body label input {display: block; box-sizing: border-box; box-shadow: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; margin: 0; border: none; border-radius: 0; background-color: transparent; opacity: 0; z-index: 10; appearance: none; -webkit-appearance: none;}
.component-switch .co-body label input + i {display: block; position: relative; width: 58px; height: 30px; border-radius: 15px; background-color: #e0e0e0; font-style: normal;}
.component-switch .co-body label input + i::before {display: block; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.03); position: absolute; top: 50%; left: 2px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background-color: #fff; content: ''; transition-duration: 0.3s;}
.component-switch .co-body label input:disabled + i {background-color: #f1f1f1;}
.component-switch .co-body label input:checked + i {background-color: #202845;}
.component-switch .co-body label input:checked + i::before {left: 30px;}
.component-switch .co-body label input:disabled:checked + i {background-color: #f1f1f1;}