/****************************** UI KIT ******************************/
/* 폰트 */
.font-apple {font-family: 'AppleSDGothicNeo', sans-serif;} /* 300, 400, 500, 700 */
.font-nsans {font-family: 'Noto Sans KR', sans-serif;} /* 300, 500, 700, 800, 900 */
.font-eland {font-family: 'ELANDChoice', sans-serif;} /* 300, 500, 700 */

.fz30 {font-size: 30rem !important;}
.fz28 {font-size: 28rem !important;}
.fz26 {font-size: 26rem !important;}
.fz24 {font-size: 24rem !important;}
.fz22 {font-size: 22rem !important;}
.fz20 {font-size: 20rem !important;}
.fz18 {font-size: 18rem !important;}
.fz17 {font-size: 17rem !important;}
.fz16 {font-size: 15rem !important;}
.fz15 {font-size: 15rem !important;}
.fz14 {font-size: 14rem !important;}
.fz13 {font-size: 13rem !important;}
.fz12 {font-size: 12rem !important;}
.fz10 {font-size: 10rem !important;}

.fw100 {font-weight: 100 !important;}
.fw200 {font-weight: 200 !important;}
.fw300 {font-weight: 300 !important;}
.fw400 {font-weight: 400 !important;}
.fw500 {font-weight: 500 !important;}
.fw600 {font-weight: 600 !important;}
.fw700 {font-weight: 700 !important;}
.fw800 {font-weight: 800 !important;}
.fw900 {font-weight: 900 !important;}

h1, h2, h3, h4, h5, h6 {line-height: 1.22;}

/* 폰트 색상 */
.color-01 {color: #62cbc9;}
.color-02 {color: #5e5e5e;}
.color-03 {color: #323e48;}
.color-black {color: #000;}
.color-white {color: #fff;}

/* 배경 & 그림자 */
.bg-color-01 {background-color: #49d8d1;}
.bg-color-02 {background-color: #62cbc9;}
.bg-color-03 {background-color: #dff3f2;}
.box-shadow-01 {box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.16);}

/* 디스플레이 */
.not_scroll{position: fixed; overflow: hidden; width: 100%; height: 100%} /* 스크롤 커버 - class 'wrap'에게 addClass 'not_scroll' */
.hidden {display: none !important;}
.flex {display: flex;}
.flex-between {display: flex; justify-content: space-between;}
.flex-start {display: flex; justify-content: flex-start !important;}
.text-align-center {text-align: center;}
.maxline-1 {display: inline-block !important; width: 100%; max-width: 350px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.maxline-2 {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.maxline-3 {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.width-450 {width: 450px; max-width: 100%;}
.width-600 {width: 600px; max-width: 100%;}
.width-800 {width: 800px; max-width: 100%;}
.width-1000 {width: 1000px; max-width: 100%;}
.width-1200 {width: 1200px; max-width: 100%;}

/****************************** BREEDERS' PARK 양식 ******************************/
.data-item {margin-bottom: 24px;}
.data-item:last-child {margin-bottom: 0;}
.data-item .item-title {margin-bottom: 8px;}
.data-item .item-title > span {color: #888;}
.data-item .item-title > span > em {color: red; margin-left: 3px; font-size: 14px; font-weight: 900; vertical-align: middle;}
.data-item .item-field {}
.data-item .item-field .field-element {position: relative; display: flex; align-items: center; width: 100%; max-width: 100%; height: 48px; background-color: #fff; border: 1px solid #d8d8d8; border-radius: 8px; transition: border-color 0.15s; padding: 8px 15px; margin-bottom: 12px;}
.data-item .item-field .field-element:last-of-type {margin-bottom: 0;}
.data-item .item-field .field-element:focus-within {border-color: #512b6d;}
.data-item .item-field .field-element input {width: 100%; height: 100%; border: none; background: transparent; font-size: 15px;}
.data-item .item-field .field-element input::placeholder {color: #d8d8d8;}

.data-item .item-field .field-element select {display: inline-flex; justify-content: center; align-items: center; width: 100%; height: 100%; border: none; font-size: 15px;}
.data-item .item-field .field-element select option {color: #000;}
.data-item .item-field .field-element select:invalid, select option[value=""] {color: #d8d8d8;}

.data-item .item-field .text-alert {display: none; font-size: 13px; margin-top: 4px; opacity: 0.8;}
.data-item .item-field .text-alert.active {display: block;}
.data-item .item-field .text-alert.error {color: red;}
.data-item .item-field .text-alert.success {color: green;}
@media screen and (max-width: 480px) {
    .data-item .item-title {margin-bottom: 6px;}
    .data-item {margin-bottom: 18px;}
}

.button-item {width: 100%; text-align: center;}
.button-sm {display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; height: 100%; max-width: 100%; padding: 0 6px; cursor: pointer; font-size: 12px; font-weight: 600;}
.button-md {display: inline-flex; justify-content: center; align-items: center; width: 400px; max-width: 100%; height: 52px; cursor: pointer; font-size: 16px;}
.button-modal {display: inline-flex; justify-content: center; align-items: center; width: 100%; max-width: 100%; padding: 12px 0; cursor: pointer; font-size: 15px; font-weight: 700; color: #512b6d;}
.button-primary {background-color: #512b6d; border: 1px solid #512b6d; border-radius: 8px; color: #fff; transition: background-color 0.35s, border-color 0.35s;}
.button-primary:hover {background-color: #6c3b8f; border: 1px solid #6c3b8f;}
.button-secondary {background-color: #fff; border: 1px solid #512b6d; border-radius: 8px; color: #512b6d;}

.text-info {color: #888; cursor: pointer;}
.text-info {position: relative; padding-left: 25px; font-size: 14px;}
.text-info::after {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-58%); width: 18px; height: 18px; background: url('../img/info-circle-regular-24.png') center center no-repeat; background-size: cover;}

/****************************** 기존 컴포넌트 스타일링 ******************************/
/* 스크롤바 스타일링 */
::-webkit-scrollbar {width: 4px; background: none;}
::-webkit-scrollbar-thumb {background: #bcbcbc; border-radius: 10px; opacity: .4;} /* 막대 */
::-webkit-scrollbar-track {background: none;}

/* 체크박스 스타일링 */
.item-check {position: relative; display: flex; margin-bottom: 12px;}
.item-check:last-child {margin-bottom: 0;}
.item-check:after {display: block; clear: both; content: '';}
.item-check > input[type="checkbox"] {display: none;}
.item-check > input[type="checkbox"] + label {display: inline-flex; align-items: center; width: 20px; height: 20px; background: #fff; border-radius: 4px; border: 1.5px solid #49565e; cursor: pointer;}
.item-check > input[type="checkbox"]:checked + label {background: #512b6d url('../img/check_white_24dp.svg') center center no-repeat; background-size: 17px;}
.item-check > input[type="checkbox"] + label > span {position: absolute; top: 2px; left: 30px; display: block; font-size: 14px; color: #464646;}
.item-check > input[type="checkbox"] + label > span > button {text-decoration: underline; margin-left: 4px; cursor: pointer;}
.item-check.all-agree {padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eee;}

@media screen and (max-width: 480px) {
    .item-check > input[type="checkbox"] + label {width: 18px; height: 18px;}
}

/****************************** 플러그인 & 라이브러리 ******************************/
/* 플러그인 : 데이트피커 */
#ui-datepicker-div {z-index: 105 !important;}
.datepicker-container {display: flex; align-items: center;}
.datepicker-container .dp-item {position: relative;}
.datepicker-container .dp-item input {display: inline-flex; justify-content: center; align-items: center; width: 120px; height: 32px; border: 1px solid #dbdbdb; border-radius: 7px; font-size: 14rem; color: #000;}
.datepicker-container .do-span {margin: 0 4px; color: #b3b3b3;}
.datepicker-container.setting-popup .dp-item input {height: 42px; background-color: #fff;}
.ui-datepicker-trigger {display: none;}

@media screen and (max-width: 480px) {
    .ui-datepicker-trigger {display: none; position: absolute; top: 50%; right: 6rem; transform: translateY(-50%); width: 18px;}
}

/* CKEDITOR */
.cke_1.cke_chrome {border-color: #ddd !important; border-top: none;}
.cke_1 .cke_top {background: #f2f9f9 !important; border-color: #ddd !important;}
.cke_1 .cke_bottom {display: none !important;}

/****************************** QUICK ******************************/
/* 마진 & 패딩 */
.p-0{padding:0} .p-3{padding:3px} .p-5{padding:5px} .p-10{padding:10px} .p-15{padding:15px} .p-20{padding:20px} .p-25{padding:25px} .p-30{padding:30px} .p-35{padding:35px} .p-40{padding:40px} .p-45{padding:45px} .p-50{padding:50px} .p-55{padding:55px} .p-60{padding:60px} .p-65{padding:65px} .p-70{padding:70px} .p-75{padding:75px} .p-80{padding:80px} .p-85{padding:85px} .p-90{padding:90px} .p-95{padding:95px} .p-100{padding:100px} .pt-0{padding-top:0} .pt-3{padding-top:3px} .pt-5{padding-top:5px} .pt-10{padding-top:10px} .pt-15{padding-top:15px} .pt-20{padding-top:20px} .pt-25{padding-top:25px} .pt-30{padding-top:30px} .pt-35{padding-top:35px} .pt-40{padding-top:40px} .pt-45{padding-top:45px} .pt-50{padding-top:50px} .pt-55{padding-top:55px} .pt-60{padding-top:60px} .pt-65{padding-top:65px} .pt-70{padding-top:70px} .pt-75{padding-top:75px} .pt-80{padding-top:80px} .pt-85{padding-top:85px} .pt-90{padding-top:90px} .pt-95{padding-top:95px} .pt-100{padding-top:100px} .pr-0{padding-right:0} .pr-3{padding-right:3px} .pr-5{padding-right:5px} .pr-10{padding-right:10px} .pr-15{padding-right:15px} .pr-20{padding-right:20px} .pr-25{padding-right:25px} .pr-30{padding-right:30px} .pr-35{padding-right:35px} .pr-40{padding-right:40px} .pr-45{padding-right:45px} .pr-50{padding-right:50px} .pr-55{padding-right:55px} .pr-60{padding-right:60px} .pr-65{padding-right:65px} .pr-70{padding-right:70px} .pr-75{padding-right:75px} .pr-80{padding-right:80px} .pr-85{padding-right:85px} .pr-90{padding-right:90px} .pr-95{padding-right:95px} .pr-100{padding-right:100px} .pb-0{padding-bottom:0} .pb-3{padding-bottom:3px} .pb-5{padding-bottom:5px} .pb-10{padding-bottom:10px} .pb-15{padding-bottom:15px} .pb-20{padding-bottom:20px} .pb-25{padding-bottom:25px} .pb-30{padding-bottom:30px} .pb-35{padding-bottom:35px} .pb-40{padding-bottom:40px} .pb-45{padding-bottom:45px} .pb-50{padding-bottom:50px} .pb-55{padding-bottom:55px} .pb-60{padding-bottom:60px} .pb-65{padding-bottom:65px} .pb-70{padding-bottom:70px} .pb-75{padding-bottom:75px} .pb-80{padding-bottom:80px} .pb-85{padding-bottom:85px} .pb-90{padding-bottom:90px} .pb-95{padding-bottom:95px} .pb-100{padding-bottom:100px} .pl-0{padding-left:0} .pl-3{padding-left:3px} .pl-5{padding-left:5px} .pl-10{padding-left:10px} .pl-15{padding-left:15px} .pl-20{padding-left:20px} .pl-25{padding-left:25px} .pl-30{padding-left:30px} .pl-35{padding-left:35px} .pl-40{padding-left:40px} .pl-45{padding-left:45px} .pl-50{padding-left:50px} .pl-55{padding-left:55px} .pl-60{padding-left:60px} .pl-65{padding-left:65px} .pl-70{padding-left:70px} .pl-75{padding-left:75px} .pl-80{padding-left:80px} .pl-85{padding-left:85px} .pl-90{padding-left:90px} .pl-95{padding-left:95px} .pl-100{padding-left:100px}
.m-0{margin:0} .m-3{margin:3px} .m-5{margin:5px} .m-10{margin:10px} .m-15{margin:15px} .m-20{margin:20px} .m-25{margin:25px} .m-30{margin:30px} .m-35{margin:35px} .m-40{margin:40px} .m-45{margin:45px} .m-50{margin:50px} .m-55{margin:55px} .m-60{margin:60px} .m-65{margin:65px} .m-70{margin:70px} .m-75{margin:75px} .m-80{margin:80px} .m-85{margin:85px} .m-90{margin:90px} .m-95{margin:95px} .m-100{margin:100px} .mt-0{margin-top:0} .mt-3{margin-top:3px} .mt-5{margin-top:5px} .mt-10{margin-top:10px} .mt-15{margin-top:15px} .mt-20{margin-top:20px} .mt-25{margin-top:25px} .mt-30{margin-top:30px} .mt-35{margin-top:35px} .mt-40{margin-top:40px} .mt-45{margin-top:45px} .mt-50{margin-top:50px} .mt-55{margin-top:55px} .mt-60{margin-top:60px} .mt-65{margin-top:65px} .mt-70{margin-top:70px} .mt-75{margin-top:75px} .mt-80{margin-top:80px} .mt-85{margin-top:85px} .mt-90{margin-top:90px} .mt-95{margin-top:95px} .mt-100{margin-top:100px} .mr-0{margin-right:0} .mr-3{margin-right:3px} .mr-5{margin-right:5px} .mr-10{margin-right:10px} .mr-15{margin-right:15px} .mr-20{margin-right:20px} .mr-25{margin-right:25px} .mr-30{margin-right:30px} .mr-35{margin-right:35px} .mr-40{margin-right:40px} .mr-45{margin-right:45px} .mr-50{margin-right:50px} .mr-55{margin-right:55px} .mr-60{margin-right:60px} .mr-65{margin-right:65px} .mr-70{margin-right:70px} .mr-75{margin-right:75px} .mr-80{margin-right:80px} .mr-85{margin-right:85px} .mr-90{margin-right:90px} .mr-95{margin-right:95px} .mr-100{margin-right:100px} .mb-0{margin-bottom:0} .mb-3{margin-bottom:3px} .mb-5{margin-bottom:5px} .mb-10{margin-bottom:10px} .mb-15{margin-bottom:15px} .mb-20{margin-bottom:20px} .mb-25{margin-bottom:25px} .mb-30{margin-bottom:30px} .mb-35{margin-bottom:35px} .mb-40{margin-bottom:40px} .mb-45{margin-bottom:45px} .mb-50{margin-bottom:50px} .mb-55{margin-bottom:55px} .mb-60{margin-bottom:60px} .mb-65{margin-bottom:65px} .mb-70{margin-bottom:70px} .mb-75{margin-bottom:75px} .mb-80{margin-bottom:80px} .mb-85{margin-bottom:85px} .mb-90{margin-bottom:90px} .mb-95{margin-bottom:95px} .mb-100{margin-bottom:100px} .ml-0{margin-left:0} .ml-3{margin-left:3px} .ml-5{margin-left:5px} .ml-10{margin-left:10px} .ml-15{margin-left:15px} .ml-20{margin-left:20px} .ml-25{margin-left:25px} .ml-30{margin-left:30px} .ml-35{margin-left:35px} .ml-40{margin-left:40px} .ml-45{margin-left:45px} .ml-50{margin-left:50px} .ml-55{margin-left:55px} .ml-60{margin-left:60px} .ml-65{margin-left:65px} .ml-70{margin-left:70px} .ml-75{margin-left:75px} .ml-80{margin-left:80px} .ml-85{margin-left:85px} .ml-90{margin-left:90px} .ml-95{margin-left:95px} .ml-100{margin-left:100px}
/* 퍼센테이지 */
.w01p {width: 1%;}.w02p {width: 2%;}.w03p {width: 3%;}.w04p {width: 4%;}.w05p {width: 5%;}.w06p {width: 6%;}.w07p {width: 7%;}.w08p {width: 8%;}.w09p {width: 9%;}.w10p {width: 10%;}.w11p {width: 11%;}.w12p {width: 12%;}.w13p {width: 13%;}.w14p {width: 14%;}.w15p {width: 15%;}.w16p {width: 16%;}.w17p {width: 17%;}.w18p {width: 18%;}.w19p {width: 19%;}.w20p {width: 20%;}.w21p {width: 21%;}.w22p {width: 22%;}.w23p {width: 23%;}.w24p {width: 24%;}.w25p {width: 25%;}.w26p {width: 26%;}.w27p {width: 27%;}.w28p {width: 28%;}.w29p {width: 29%;}.w30p {width: 30%;}.w31p {width: 31%;}.w32p {width: 32%;}.w33p {width: 33%;}.w34p {width: 34%;}.w35p {width: 35%;}.w36p {width: 36%;}.w37p {width: 37%;}.w38p {width: 38%;}.w39p {width: 39%;}.w40p {width: 40%;}.w41p {width: 41%;}.w42p {width: 42%;}.w43p {width: 43%;}.w44p {width: 44%;}.w45p {width: 45%;}.w46p {width: 46%;}.w47p {width: 47%;}.w48p {width: 48%;}.w49p {width: 49%;}.w50p {width: 50%;}.w51p {width: 51%;}.w52p {width: 52%;}.w53p {width: 53%;}.w54p {width: 54%;}.w55p {width: 55%;}.w56p {width: 56%;}.w57p {width: 57%;}.w58p {width: 58%;}.w59p {width: 59%;}.w60p {width: 60%;}.w61p {width: 61%;}.w62p {width: 62%;}.w63p {width: 63%;}.w64p {width: 64%;}.w65p {width: 65%;}.w66p {width: 66%;}.w67p {width: 67%;}.w68p {width: 68%;}.w69p {width: 69%;}.w70p {width: 70%;}.w71p {width: 71%;}.w72p {width: 72%;}.w73p {width: 73%;}.w74p {width: 74%;}.w75p {width: 75%;}.w76p {width: 76%;}.w77p {width: 77%;}.w78p {width: 78%;}.w79p {width: 79%;}.w80p {width: 80%;}.w81p {width: 81%;}.w82p {width: 82%;}.w83p {width: 83%;}.w84p {width: 84%;}.w85p {width: 85%;}.w86p {width: 86%;}.w87p {width: 87%;}.w88p {width: 88%;}.w89p {width: 89%;}.w90p {width: 90%;}.w91p {width: 91%;}.w92p {width: 92%;}.w93p {width: 93%;}.w94p {width: 94%;}.w95p {width: 95%;}.w96p {width: 96%;}.w97p {width: 97%;}.w98p {width: 98%;}.w99p {width: 99%;}.w100p {width: 100%;}
/* 인덱스 */
.z-100 {z-index: 100 !important;} .z-105 {z-index: 105 !important;} .z-110 {z-index: 110 !important;} .z-115 {z-index: 115 !important;} .z-120 {z-index: 120 !important;}

.pc {display: block;}
.mobile {display: none;}
@media screen and (max-width: 480px) {
    .pc {display: none;}
    .mobile {display: block;}
}