/*common*/
html {letter-spacing:-0.05em;}
* {
font-family:'Spoqa Han Sans Neo', sans-serif;
font-size:62.5%;
font-weight:400;
color:#111;
}
@media all and (min-width: 670px) {
    * {font-size: 76%;}
}
a {color:#111;}
h1, h2, h3, h4, h5, h6, p {cursor: default;}

.clearfix:after {content:"";display:block;clear:both;}



html {
    -webkit-touch-callout:none;
    -webkit-touch-select:none;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* inform */
.inform_box {width: 100%; max-width: 500px; margin: 0 auto;}
.sep_line {display: block; width: 100%; height: 1px; background: #fbbcd5;}



/* input text, num, tel, password, etc. */
.inform {display: block; width: 100%; padding: 11px 15px; border: 1px solid #fbbcd5; outline: 0; font-size: 1.4rem; border-radius: 30px; transition: all 0.2s ease;}
.inform_file {display: block; width: 75%; padding: 11px 15px; border: 1px solid #fbbcd5; background-color:white; outline: 0; font-size: 1.4rem; border-radius: 30px; transition: all 0.2s ease;}
.inform:active, .inform:focus, textarea:active, textarea:focus, .inform_select:focus {border-color: #e6006b;}
.inform:placeholder {color: #999;}
.inform:disabled, .inform:read-only {border-color: #ccc; background-color: #f1f1f1; color: #999;}



/* select */
.inform_select {width: 100%; padding: 11px 15px; border: 1px solid #fbbcd5; outline: 0; font-size: 1.4rem; background: url(/common/image/icon/ico_select.png) no-repeat 96% center; background-color: #fff; background-size: 13px; border-radius: 30px; transition: all 0.2s ease;}
select option {font-size: 1.4rem;}



/* inform_sep */
.inform_m {display: inline-block; width: 70%;}
.inform_m select {display: inline-block; width: 70%;}
.btn_inform {width: calc(30% - 9px); padding: 11px 0; margin-left: 5px; border:1px solid #e6006b; outline:0; font-size: 1.4rem; border-radius: 30px;}



/* inform_email */
.inform.inform_s {display: inline-block; width: 47%;}
.inform_email > span {display: inline-block; width: calc(6% - 4px); font-size: 1.4rem; text-align: center;}



/* inform_num */
.inform.inform_num {display: inline-block; width: 30%;}
.inform_sep .inform.inform_num + span {display: inline-block; width: calc(5% - 2px); font-size: 1.4rem; text-align: center;}



/* input radio, checkbox */
.inform_radio input[type=radio], .inform_chk input[type=checkbox] {display: none;}
.inform_radio input[type=radio] + label, .inform_chk input[type=checkbox] + label {position: relative; font-size: 1.4rem;}
.inform_radio label + input + label {margin-left: 20px;}
.inform_radio input[type=radio] + label:before, .inform_chk input[type=checkbox] + label:before {content: ''; display: inline-block; width: 20px; height: 20px; margin-right: 5px; border: 1px solid #fbbcd5; background: #fff; border-radius: 50%; vertical-align: -5px;}
.inform_chk input[type=checkbox] + label:before {border-radius: 3px;}
.inform_radio input[type=radio]:checked + label:before {border-color: #e6006b;}
.inform_chk input[type=checkbox]:checked + label:before {border-color: #e6006b; background: url(/common/image/icon/ico-checked.png) no-repeat center 3px; background-color: #e6006b; background-size: 16px;}
.inform_radio input[type=radio]:checked + label:after {content: ''; position: absolute; display: block; top: 50%; left: 4px; width: 12px; height: 12px; margin-top: -6px; background-color: #e6006b; border-radius: 50%;}
@media all and (min-width: 670px) {
    .inform_radio input[type=radio]:checked + label:after {margin-top: -5px;}
}



/* inform_advice */
.inform_advice {line-height: 1.6rem; padding: 5px 4% 10px; font-size: 1.2rem; color: #999;}
.inform_advice.caution {color: #f00;}



/* textarea */
textarea {width: 100%; height: 300px; margin: 10px 0; padding: 16px; font-size: 1.4rem; border: 1px solid #fbbcd5; background: #fff; border-radius: 20px; overflow: auto; resize: none; transition: all 0.2s ease;}



/* datepicker */
.inform_date span {padding: 0 5px; font-size: 1.6rem;}
.inform_date .calender {display: inline-block; width: calc(50% - 12px);}
.inform_date .calender input {width: 100%; padding: 11px 15px; border: 1px solid #fbbcd5; outline: 0; font-size: 1.4rem; background: url(/common/image/icon/ico-calender.png) no-repeat 90% center; background-size: 14px; border-radius: 30px; transition: all 0.2s ease;}
.inform_date .calender input:focus, .calender input:hover {border-color: #e6006b;}
.ui-datepicker.ui-widget.ui-widget-content {width: auto; max-width: 400px; left: 50% !important; padding:0; margin-top: 5px; border: 1px solid #e6006b; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateX(-50%);}
.ui-datepicker .ui-datepicker-header {padding: 5px; margin:0; border: 0; background: rgb(230,0,107); border-radius: 0;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top: 50%; width: 15px; height: 15px; background: url(/common/image/icon/ico_select_fff.png) no-repeat center center; background-size: 15px; transform: translateY(-50%) rotate(90deg);}
.ui-datepicker .ui-datepicker-prev {left: 4%;}
.ui-datepicker .ui-datepicker-next {right: 4%; transform: translateY(-50%) rotate(-90deg);}
.ui-datepicker .ui-datepicker-title {margin: 0; font-size: 1.4rem; color: #fff;}
.ui-datepicker .ui-datepicker-title span {font-size: inherit; color: inherit;}
.ui-datepicker th {padding: 3px 0; font-size: 1.4rem;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {padding: 7px 8px; border: 1px solid transparent; outline: 0; font-size: 1.4rem; background: transparent; border-radius: 50%; text-align: center;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border-color: #e6006b; color: #111;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {color: #fff; background: #e6006b;}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {opacity: 0.5;}
/* 갤럭시 폴드 */
@media all and (max-width: 326px) {
    .inform_date .calender input {padding: 11px 6px; background-size: 10px; background-position-x: 93%;}
}


/* 파일 필드 숨기기 */
.upload {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0;
}


/* btn */
.btn_cursor {cursor: pointer;}
.btn_box {text-align: center; width: 100%; max-width: 500px; margin: 0 auto;}
.btn_search {display: inline-block; line-height: 40px; width: 100px; vertical-align: middle; text-align: center; color: #fff; font-size: 1.2rem; background-color: #e6006b; cursor: pointer; border: 0; border-radius: 50px; transition: all 0.2s; appearance:0;}
.btn_big {display: block; width: 100%; padding: 11px 15px; font-size: 1.4rem; font-weight: 500; border:0; outline:0; border-radius: 30px;}
.btn_main {color: #fff; background-color: #e6006b;}
.btn_white {border: 1px solid #fbbcd5; background-color: #fff;}
input[type=button]:disabled, .btn_gray {background-color: #f1f1f1; color: #999;}





/* category_box */
.category_list {display: flex; flex-wrap: wrap;}
.category_item {padding: 7px 12px; margin: 0 8px 8px 0; font-size: 1.4rem; background-color: #f1f1f1; border-radius: 30px;}
.category_item.active {background-color: #f83b86; color: #fff; transition: background-color 0.3s ease;}





/* search_box */
.search_box {display: inline-flex; width: 100%; padding: 20px 4%; justify-content: space-between;}
.search_box .inform_search:hover {border: 1px solid #e6006b;}
.search_box .inform_search {width: 75%; border: 1px solid #fbbcd5; border-radius: 30px; overflow: hidden;}
.search_box .inform_search select {width: 25%; height: 100%; padding: 0 4% 0 4%; font-size: 1.4rem; border: 0; border-right: 1px solid #fbbcd5; background: url(/common/image/icon/ico_select.png) no-repeat 85% center; background-size: 12px;}
.search_box .inform_search input[type=text] {width: calc(75% - 4px); height: 100%; padding: 0 4%; border:0; font-size: 1.4rem;}
.search_box .btn_search {width: calc(25% - 9px); font-size: 1.4rem; border:0; outline:0; border-radius: 30px;}





/* pagination */
.pagination {display: flex; align-items: flex-start; justify-content: center;}
.pagination a {display: inline-block; width: 30px; line-height: 30px; margin: 0 2px; font-size: 1.4rem; background-color: rgba(255,255,255,0.8); border-radius: 50%; text-align: center;}
.pagination a.active {color: #fff; background-color: #e6006b;}
.pagination a#next, .pagination a#prev {background:#fff2f7;}




/* header */
.header {position: fixed; top: 0; left: 0; right: 0; background: rgba(255,255,255,0.6); z-index: 100; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
padding-top : calc(env(safe-area-inset-top));
padding-top : calc(constant(safe-area-inset-top));
-webkit-transform: translateZ(0);
}
.btn_back {display: inline-block; width: 15%; line-height: 50px; padding-left: 4%; font-size: 22px; font-weight: 700; color: #111; text-align: left;}
.main_tit {position: fixed; display: flex; width: 70%; height: 50px; top: 0; left: 50%; font-size: 1.8rem; font-weight: 500; color: #111; transform: translateX(-50%); justify-content: center; align-items: center; z-index: 100;
top : calc(env(safe-area-inset-top));
top : calc(constant(safe-area-inset-top));
-webkit-transform: translateX(-50%) translateZ(0);
}
.header.mem_header {background: rgba(230,0,107,0.9);}
.mem_header .btn_back {color: #fff;}
.mem_header .main_tit {color: #fff;}


/* container */
.container {padding-top: 50px; min-height: 100vh;

padding-top : calc(50px + env(safe-area-inset-top));
padding-top : calc(50px + constant(safe-area-inset-top));
}



/* sub */
.sub_tit {padding-bottom: 10px; font-size: 1.6rem; font-weight: 500;}
.sub_txt {font-size: 1.4rem;}





/* member */
.mem_bg {background-color: #e6006b;}

.mem_top {max-width: calc(500px + 8%); padding: 70px 4% 50px; margin: 0 auto; text-align: left;
padding-top : calc(70px + env(safe-area-inset-top));
padding-top : calc(70px + constant(safe-area-inset-top));
}
.mem_top img {width: 100px;}
.mem_top .txt_wrap {padding-top: 15px;}
.mem_top p {padding-top: 5px; color: #fff; font-size: 1.4rem; word-break: keep-all;}
.mem_top p.bold_txt {font-size: 1.6rem; font-weight: 500;}

.mem_cont {background-color: #fff; min-height: calc(100vh - 203px); padding: 30px 6% 40px; margin-top: -20px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
.mem_cont .sub_tit {max-width: 500px; margin: 0 auto; font-size: 1.8rem; font-weight: 500; padding-bottom: 5px;}
.mem_cont .sub_txt {max-width: 500px; padding-bottom: 10px; margin: 0 auto; font-size: 1.4rem; word-break: keep-all;}



/* bottom_notice */
.bottom_notice {margin-top: 40px; padding: 20px 4%; background: #fff; font-size: 1.4rem; font-weight: 400; color: #111;}
.bottom_notice p , .bottom_notice span {font-size: inherit; font-weight: inherit; color: inherit;}
.bottom_notice b {font-size: inherit; font-weight: 700; color: inherit;}
.bottom_notice i {font-size: inherit; font-weight: inherit; color: inherit; font-style:italic;}

/* none_notice */
.none_notice {background: #fff; border-radius: 20px; padding: 20px; margin-top: 20px; text-align: center;}
.none_notice p {font-size: 1.4rem;}

/* list none */
div ul li.none, div.none {display: block; line-height: 30px; font-size: 1.4rem; text-align: center;}



/* master_loading */
.master_loading {display: none; position: fixed; top:0; left:0; bottom:0; right:0; background: rgba(255,255,255,0.7); z-index: 9999; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);  -webkit-transform: translateZ(0);}
    .master_loading span {
        display: block;
        position: absolute;
        width: 5vmin;
        height: 5vmin;
        top: 50%;
        left: calc(49% - 15vmin);
        background: #d0006f;
        border-radius: 50% 50% 50% 0;
        transform: translate(-50%, -50%);
        animation: loading 1.0s infinite alternate;
        -webkit-animation: loading 1.0s infinite alternate;
    }
.master_loading span:nth-child(2) {left: calc(50% - 5vmin); animation-delay: 0.2s; -webkit-animation-delay: 0.2s;}
.master_loading span:nth-child(3) {left: calc(50% + 5vmin); animation-delay: 0.4s; -webkit-animation-delay: 0.4s;}
.master_loading span:nth-child(4) {left: calc(50% + 15vmin); animation-delay: 0.8s; -webkit-animation-delay: 0.8s;}
.master_loading span:nth-child(5) {left: calc(50% + 25vmin); animation-delay: 1.0s; -webkit-animation-delay: 1.0s;}
@keyframes loading {
    0% {transform: translate(-50%, -50%);}
    100% {transform: translate(-50%, -200%);}
}
.master_loading p {
    display: block;
    position: absolute;
    top: 58%;
    left: calc(54% - 0vmin);
    color: #d0006f;
    transform: translate(-50%, -50%);
    font-size: 2vh;
    text-align: center;
}


/* small_loading */
.small_loading {position: absolute; display: block; width: 100%; height: 146px; bottom:0; left:0; background: rgba(255,255,255,0.7); z-index: 10; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);}
.small_loading span {
        display: block;
        position: absolute;
        width: 5vmin;
        height: 5vmin;
        top: 35%;
        left: calc(50% - 20vmin);
        background: #d0006f;
        border-radius: 50% 50% 50% 0;
        transform: translate(-50%, -50%);
        animation: loading 1.0s infinite alternate;
        -webkit-animation: loading 1.0s infinite alternate;
    }.small_loading span:nth-child(2) {left: calc(50% - 10vmin); animation-delay: 0.2s; -webkit-animation-delay: 0.2s;}
.small_loading span:nth-child(3) {left: calc(50% + 0vmin); animation-delay: 0.4s; -webkit-animation-delay: 0.4s;}
.small_loading span:nth-child(4) {left: calc(50% + 10vmin); animation-delay: 0.8s; -webkit-animation-delay: 0.8s;}
.small_loading span:nth-child(5) {left: calc(50% + 20vmin); animation-delay: 1.0s; -webkit-animation-delay: 1.0s;}
.small_loading p {
    display: block;
    position: absolute;
    top: 73%;
    left:50%;
    color: #d0006f;
    transform: translate(-50%, -50%);
    font-size: 2vh;
    text-align: center;
}


/* modal_ok */
.modal_ok {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); z-index: 999; text-align: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);  -webkit-transform: translateZ(0);}
    .modal_ok .inner {
        position: absolute;
        width: 92vw;
        top: 50%;
        left: 50%;
        max-width: 500px;
        height:auto;
        /*max-height: 500px;*/
        background: #fff;
        border-radius: 20px;
        transform: translate(-50%, -50%);
        overflow: auto;
    }
.modal_ok .inner p {padding: 30px 4%; font-size: 1.4rem;}
.modal_ok .inner input {border-radius: 0; margin: 0;}
.modal_ok .btn_box {margin:0; padding:0;}

/* modal_ok2 */
.modal_ok2 {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); z-index: 999; text-align: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);  -webkit-transform: translateZ(0);}
.modal_ok2 .inner {
    position: absolute;
    width: 92vw;
    top: 50%;
    left: 50%;
    max-width: 500px;
    height:auto;
    /*max-height: 500px;*/
    background: #fff;
    border-radius: 20px;
    transform: translate(-50%, -50%);
    overflow: auto;
}
.modal_ok2 .inner p {font-size: 1.4rem; text-align: left; line-height: 150%;}

.modal_txt2{
    padding: 4% 5.5%; 
}
.modal_txt2 li{
    display: flex;
    column-gap: 1rem;
}
.modal_txt2 li p:first-child{
    width: 60px;
}
.modal_ok2 .inner input {border-radius: 0; margin: 0;}
.modal_ok2 .btn_box {margin:0; padding:0;}



/* modal_yn */
.modal_yn {display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.5); z-index: 999; text-align: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);  -webkit-transform: translateZ(0);}
.modal_yn .inner {position: absolute; width: 92vw; top: 50%; left: 50%; max-width: 500px; max-height: 300px; background: #fff; border-radius: 20px; transform: translate(-50%, -50%); overflow: auto;}
.modal_yn .inner p {padding: 30px 4%; font-size: 1.4rem;}
.modal_yn .inner .btn_box {display: flex; margin:0; padding:0;}
.modal_yn .inner input {border-radius: 0; width: 50%; margin:0;}



/* modal_address */
.modal_address {display: none; position: fixed; top:0; left:0; bottom:0; right:0; background: rgba(0,0,0,0.5); z-index: 999; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);  -webkit-transform: translateZ(0);}
.modal_address .btn_close {position: absolute; top: 21px; right:16px; font-size: 1.6rem;}
.modal_address .inner {position: absolute; width: 92vw; max-height: 95vh; top: 50%; left: 50%; padding: 16px; background: #fff; border-radius: 20px; transform: translate(-50%, -50%); overflow: auto;}

.modal_address .inform_advice {font-size: 1.6rem; padding: 5px 0 5px; color: #111; font-weight: 500;}
.modal_address .inform_advice:before {content:''; display: inline-block; width: 15px; height: 15px; margin-right: 5px; background: #e91f7d; border-radius: 50% 50% 0 50%; vertical-align: -1px;}
.modal_address .inform_select {width: 49%; margin-top: 5px;}
.modal_address .inform_select + .inform_select {margin-left: calc(2% - 4px);}
.modal_address input[type=text] {margin-top: 5px; margin-bottom:0;}
.modal_address .inform_sep input:nth-child(1) {width: 100%;}
.modal_address .inform_sep input {width: 47%;}
.modal_address .inform_sep input + span {width: calc(6% - 2px);}

.modal_address .address_list .top {background: #fff2f7; padding: 0 2%;}
.modal_address .address_list .top p + p {text-align: center;}
.modal_address .address_list ul {max-height: 36vh; overflow: auto;}
.modal_address .address_list li {padding: 0 2%; border-bottom: 1px solid #fff2f7;}
.modal_address .address_list p {display: inline-block; width: 20%; font-size: 1.4rem; line-height: 28px;}
.modal_address .address_list p + p {width: calc(80% - 3px);}