@charset "utf-8";
.memberWrap { width:calc(100% - 48px) ; padding:30px 0; margin:10px auto; max-width: 327px;  }
.loginWrap { width:100%; margin:20px 0 0 0; }
.loginWrap > ul { width:100%; display:flex; flex-direction: column; }
.loginWrap > ul > li { width:100%; margin:0 0 16px 0; }
.loginWrap > ul > li > label { width:100%; display:flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; position:relative; padding-top:28px; }
.loginWrap > ul > li:nth-of-type(2){margin-bottom: 20px}
.loginWrap > ul > li:nth-of-type(3){margin-bottom: 12px}
.loginWrap > ul > li.btn_modif{margin-bottom: 0}
.loginWrap > ul > li > label > span { font-size:12.5px; margin:0 0 0 0; font-weight: 400; position:absolute; left:0; top:0; line-height: 20px; color: #2A303C !important;
    display:flex; width:100%; word-break: keep-all; white-space: nowrap;
}
.loginWrap input[type='text'],.loginWrap input[type='email'],.loginWrap input[type='number'], .loginWrap input[type='password'], .loginWrap select, .loginWrap textarea {
    width:100%; height:56px; padding:0 15px; border:#BBC0C9 1px solid; font-size:16px; font-weight: 500; border-radius: 2px; transition: border-color 0.3s;
}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #fff inset ; -webkit-text-fill-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
.gnbLogin .loginWrap > ul > li.findWrap > a:last-child:before{display: none}
.loginWrap input[type='text']::placeholder,.loginWrap input[type='email']::placeholder,.loginWrap input[type='number']::placeholder
, .loginWrap input[type='password']::placeholder,.loginWrap textarea::placeholder {
    color:#BBC0C9; font-weight: 400;
}
.loginWrap input[type='text']:focus,.loginWrap input[type='email']:focus,.loginWrap input[type='number']:focus, .loginWrap input[type='password']:focus
, .loginWrap select:focus, .loginWrap textarea:focus {
    border-color:#2A303C;
}
.loginWrap input[type='text']:focus + span,.loginWrap input[type='email']:focus + span,.loginWrap input[type='number']:focus + span
, .loginWrap input[type='password']:focus + span, .loginWrap textarea:focus + span {
    color:#431F88;
}
.loginWrap textarea { padding:15px; height:150px; }
.loginWrap > ul > li.findWrap { display:flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 0}
.loginWrap > ul > li.findWrap > a { font-size:11px; font-weight: 400; padding:0 10px; position:relative; }
.loginWrap > ul > li.findWrap > a:last-child:before { content:""; width:1px; height:8px; background-color:#D1D4DA; position:absolute; left:0; top:50%; transform: translateY(-50%); }

.loginWrap > ul > li.findWrap > a:hover{color: #2A303C; font-weight: 700}
.loginWrap .btn_submit { width:100%; height:47px; display:flex; align-items: center; justify-content: center; font-size:15px; font-weight: 700;
    color:#fff; background-color:#431F88; line-height: normal; border-radius: 2px; }

.loginWrap .btn_show_password { position:absolute; bottom:18px; right:20px; width:20px; height:20px; text-indent: -99999px;
    background: url('../svg/icon_show_password.svg') no-repeat center center; background-size:18px; }
.loginWrap .btn_show_password.focus{background-image: url('../svg/icon_show_password_off.svg');}
.loginWrap .btn_show_password.show_active{background-image: url('../svg/icon_show_password_active.svg');}
.loginWrap .btn_show_password.focus_out{background-image: url('../svg/icon_show_password_out.svg');}
.noMemberWrap { width:100%;  }
.noMemberWrap > h2 { font-size:14px; font-weight: 700; margin:0 0 12px 0; line-height: 22px }
.noMemberWrap > a { display:flex; align-items: center; justify-content: center; width:100%; height:56px; color:#fff; background-color:#4A515F; font-size:14px; border:0; border-radius: 2px; }

.snsLoginWrap { width:100%; margin:0 0 24px 0; padding:25px; background:#F1F2F3; display:flex; flex-direction: row;  align-items: center; flex-wrap: wrap;  justify-content: center}
.snsLoginWrap > h2 { font-size:12px; font-weight: 400; margin:0 0 15px 0; width:100%; text-align: center; }
.snsLoginWrap > a.icon_sns { display:inline-block; width:48px; height:48px; text-indent: -99999px; background:#ddd; border-radius: 100%; margin-left: 28px}
.snsLoginWrap > a.icon_sns_apple { background: url('../svg/icon_sns_apple.svg') no-repeat center center; background-size:cover; margin-left: 0}
.snsLoginWrap > a.icon_sns_google { background: url('../svg/icon_sns_google.svg') no-repeat center center; background-size:cover;}
.snsLoginWrap > a.icon_sns_kakao { background: url('../svg/icon_sns_kakao.svg') no-repeat center center; background-size:cover; }
.snsLoginWrap > a.icon_sns_naver { background: url('../svg/icon_sns_naver.svg') no-repeat center center; background-size:cover; }

.memberNotice { width:100%; line-height: 15px; color:#798493; font-weight: 400; font-size:11px; text-align: center;padding:10px 25px 0 25px; }
.memberNotice > strong { font-weight: 700; }
.memberNotice > strong > button{background: transparent; border: none; padding: 0; font-size: 11px; line-height: 15px; color: #798493; font-weight: 700}
.memberNotice > strong > button:active,
.memberNotice > strong > button:hover{color: #2A303C;}
.last_login{text-align: center; margin: 40px 0}
.last_login > p{font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: -0.5px; display: inline-block; }
.last_login > p > span{border-bottom: none;color: #431F88}
/*.joinWrap > ul.inputWrap > li { height:auto; max-height: 0; overflow: hidden; transition: max-height 0.8s; }
.joinWrap > ul.inputWrap > li.show { height:auto; max-height: 50vh; transition: max-height 0.8s; }*/
.joinWrap > ul.inputWrap > li { display:none; }
.joinWrap > ul.inputWrap > li.mb_email { display: block; }
.fixedButton { width:100%; display:flex; z-index: 9; flex-direction: row !important; justify-content: center; align-items: center; flex-wrap: wrap; position:fixed; left:0; bottom:0; }
.fixedButton.bottom-nav-top {bottom: 44px; border-top: 1px solid #BBC0C9;}
.fixedButton.bottom-nav-top li:first-of-type > button { border-top: none !important;}
.fixedButton > li { margin:0 !important; width:auto !important; flex:1 1;}
.fixedButton > li .matter-button-contained { border-radius: 0 !important; }
.fixedButton .btn_submit { /*position:fixed; left:0; bottom:0;*/ height:60px; font-size:15px; }
.fixedButton .btn_submit:disabled { color:#BBC0C9; background:#F6F7F8; }
.fixedButton .btn_cancel { width:100%; background:#EAECF0; border-color:#EAECF0; height:60px; line-height: 60px; font-size:15px; color:#5C6272; }
.loginWrap .veriMsg { width:100%; display:flex; margin:7px 0 0 0; font-size:10px; color:#431F88; font-weight: 400; }
.loginWrap .is_session { width: 100%;
    display: flex;
    margin: 7px 0 0 0;
    font-size: 10px;
    font-weight: 400;
    color: #EC696B; }
.loginWrap .veriMsg.error { color:#EC696B; }
.loginWrap .veriResult { display:flex;width:100%; margin:7px 0 0 0; font-size:10px; font-weight: 400; }
.loginWrap .veriResult > i { color:#BBC0C9; margin:0 10px 0 0; padding:0 0 0 10px; background:url('../img/common_input_ic_check_done.png') no-repeat left center; background-size:6px; color: #EC696B; font-weight: 400}
.loginWrap .veriResult > i.done { color:#431F88; background:url('../svg/icon_veri_done.svg') no-repeat left center; background-size:6px; }
.loginWrap .veriResult > i.error { color:#EC696B !important; background:url('../svg/icon_veri_error.svg') no-repeat left center; background-size:6px; }
.loginWrap input.error, .loginWrap select.error { border-color:#EC696B !important; }
.joinWrap .btn_show_timer { position:absolute; bottom:15px; right:20px; text-align: right; width:auto; height:20px; font-size:16px; }
.joinWrap .btn_show_timer.imminent {  color:#EC696B !important; }
.joinWrap .notice { margin: 12px 0 0 0; }
.joinWrap .notice > li { margin:0 0 4px 0; font-size:10px; font-weight: 400; }
.joinWrap .btn_send_code { height:18px; line-height: 18px; width:auto; padding:0 4px; border-radius: 2px; background:#B59C8E;font-size:9px; color:#fff;}
.joinWrap label.labelPhone { flex-direction: row; justify-content: space-between; }
.joinWrap label.labelPhone > select { flex: 1 1 30%; margin:0 5px 0 0; }
.joinWrap label.labelPhone > input[type='number'] { flex: 1 1 60%; }

.joinWrap label.labelCode { flex-direction: row; justify-content: space-between; }
.joinWrap label.labelCode > input { flex: 1 1 30%; margin:0 5px 0 0; }
.joinWrap label.labelCode > #mb_birth_code { flex: 1 1 50%; }
.joinWrap label.labelCode > #mb_birth_code2 { flex: 1 1 19%; text-align: center; max-width: 55px;}
.joinWrap label.labelCode > #mb_birth_code3 { flex: 1 1 11%; margin:0; padding:0; border:0; text-align: right; max-width: 56px; letter-spacing: 2.5px}

.modifyWrap { margin:0; }
.modifyWrap > ul.inputWrap > li { display:block; }

.normalTab { width:100%; margin: 30px 0 10px 0;  }
.normalTab > ul { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.normalTab > ul > li { flex:1 1; }
.normalTab > ul > li > * { width:100%; border-radius: 2px 2px 0 0;border:0; background:#F6F7F8; color:#BBC0C9; box-shadow: none; height:48px; line-height: 48px;
    border-bottom:#431F88 1px solid;}
.normalTab > ul > li > *.on { width:100%; border-radius: 2px 2px 0 0;border:0; background:#431F88; color:#ffffff; }

.memberDropWrap { width:100%; }
.memberDropWrap > ul { width:100%; display:flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; }
.memberDropWrap > ul > li { width:100%; margin:0 0 40px 0; }
.memberDropWrap > ul > li > strong { font-size:12.5px; font-weight: 700; color:#2A303C; display:inline-block; width:100%; margin:0 0 8px 0; line-height: 17px}
.memberDropWrap > ul > li > span, .memberDropWrap > ul > li > a { font-size:12.5px; font-weight: 400; color:#5C6272; line-height: 17px; letter-spacing: -0.5px; padding-left: 12px; display: block}
.memberDropWrap > ul > li > a { display:inline-block; padding:0 10px 0 12px; background:url('../svg/icon_arrow_right_gray.svg') no-repeat right center; }

.memberShiftWrap { width:100%; padding-bottom:80px; display:none; }
.memberShiftWrap[data-this-step='1'] { display: block; }
.memberShiftWrap > h4 { margin:40px 0 10px 0; font-size: 15px; font-weight: 400; color:#2A303C; }
.memberShiftWrap .mb_shift_date { font-size: 15px; font-weight: 700; color:#2A303C; padding:14px; background:#F1F2F3; }
.memberShiftWrap .mb_shift_date.center { text-align: center; font-weight: 400; line-height: 24px; }
.memberShiftWrap .mb_shift_date > strong { font-weight: 700; color:#431F88; }
.memberShiftWrap > h5 { margin:10px 0 10px 0; font-size: 11.5px; font-weight: 400; color:#5C6272; }
.memberShiftWrap > ul { width:100%; display:flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; margin:40px 0; }
.memberShiftWrap > ul > li { width:100%; display:flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.memberShiftWrap > ul > li > h5 { width:100%; margin:0px 0 10px 0; font-size: 15px; font-weight: 700; color:#2A303C;}
.memberShiftWrap > ul > li > h6 { width:100%; margin:0px 0 20px 0; font-size: 12.5px; font-weight: 400; color:#5C6272; }

.memberShiftWrap > ul.memberShiftKind { width:100%; display:flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex-wrap: wrap; margin:40px 0; }
.memberShiftWrap > ul.memberShiftKind > li { width:48%; height:100%; background:#fff; display:flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex-wrap: wrap; }
.memberShiftWrap > ul.memberShiftKind > li > button { width:100%; height:100%; min-height: 230px; background:#fff; border:#949FAC 1px solid; border-radius: 2px;
    display:flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap;  align-items: center; }
.memberShiftWrap > ul.memberShiftKind > li > button > strong { margin:20px 0 20px 0; font-size: 15px; font-weight: 700; color:#2A303C;  }
.memberShiftWrap > ul.memberShiftKind > li > button > img { margin:10px 0 10px 0; filter: grayscale(100%); }
.memberShiftWrap > ul.memberShiftKind > li > button > span { margin:20px 0 20px 0; font-size: 10px; font-weight: 400; color:#2A303C;  }
.memberShiftWrap > ul.memberShiftKind > li > button.on { border-color:#2A303C; }
.memberShiftWrap > ul.memberShiftKind > li > button.on > strong { color:#431F88; }
.memberShiftWrap > ul.memberShiftKind > li > button.on > span { color:#2A303C; }
.memberShiftWrap > ul.memberShiftKind > li > button.on > img { filter: grayscale(0%); }

.findAddr {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.findAddr input {
    width: 355px;
    margin-bottom: 10px;
}
.findAddr button {
    height: 55px;
    background-color: #4A515F;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 0px;
    border-radius: 2px;
    flex: 1 1 160px; margin:0 0 0 10px;
}

.modifyOuterWrap { padding-bottom:80px !important; }
#address_btn { height:55px; margin:10px 0 0 0; }
#address_btn.done { border:#431F88 1px solid; color:#431F88; box-shadow: none; background: #fff; }

.memberWrap .buttonWrap { width:100%; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; margin:20px 0 20px 0; }
.memberWrap .buttonWrap > li { width:auto; margin:0 10px; }
.memberWrap .buttonWrap > li > * { padding:0 20px; min-width: 80px; height:40px; line-height: 40px; box-shadow: none; }
.memberWrap .buttonWrap .btn_cancel { border:#BBC0C9 1px solid; background:#fff; color:#2A303C; font-size:14px; font-weight: 500; border-radius: 2px}
.memberWrap .buttonWrap #btn_member_modify { color:#fff; font-size:15px; font-weight: 700; }

.modifyOuterWrap { width:100%; }
/*.modifyOuterWrap form { padding:30px 0; }*/
.modifyOuterWrap form > h3 { font-size:12.5px; font-weight: 700; color:#2A303C; margin:0 0 16px 0; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.modifyOuterWrap .modifyPetsWrap { width:100%; }
.modifyOuterWrap .modifyPetsWrap > ul { width:100%; display:flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.modifyOuterWrap .modifyPetsWrap > ul > li { flex: 1 1 40%; max-width: 50%; min-height: 145px; background:#F6F7F8; position:relative; overflow: hidden; }
.modifyOuterWrap .modifyPetsWrap .btn_add_pet { width:100%; height:100%; background:url('../svg/icon_add_plus.svg') no-repeat center center; }
.modifyOuterWrap .modifyPetsWrap .pet_control { position:absolute; left:0; top:0; z-index: 2;
    padding:15px; width:100%; display:flex; flex-direction: row; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.modifyOuterWrap .modifyPetsWrap .pet_control label { line-height: normal; }
.modifyOuterWrap .modifyPetsWrap .pet_control .btn_add_image { width:20px; height:20px; background:#fff url('../svg/icon_camera.svg') no-repeat center center; border-radius: 100%; }

.modifyOuterWrap .modifyPetsWrap .pet_info { width:100%; padding:4px 19px; position:absolute; left:0; bottom:0; background:rgba(255,255,255, 0.5); z-index: 2; display: flex; align-items: center;}
.modifyOuterWrap .modifyPetsWrap .pet_info > strong {  font-size:16px; font-weight: 700; color:#2A303C; margin:0 12px 0 0; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 29px; line-height: 23px}
.modifyOuterWrap .modifyPetsWrap .pet_info > span {  font-size:11.5px; font-weight: 400; color:#4A515F; margin:0 6px 0 0; line-height: 16px;}
.modifyOuterWrap .modifyPetsWrap .pet_info > span:last-of-type{margin-right: 0}
.modifyOuterWrap .modifyPetsWrap .pet_img { width:100%; height:100%; position:absolute; z-index: 1; left:0; top:0; background:url('../svg/icon_pet_foot.svg') no-repeat center center; overflow: hidden; }
.modifyOuterWrap .modifyPetsWrap .pet_img > img { width:100%; position:absolute; display:inline-block; }
.modifyOuterWrap .modifyPetsWrap .pet_image { position:absolute; left:0; top:0; width:0px; height:0px; opacity: 0; }
.modifyOuterWrap .btn_pet_modify { width:auto; margin-left:auto; font-size:10px; font-weight: 400; color:#5C6272; height:20px; line-height: 20px; padding:0 6px; }

.petAddForm { position:fixed; width:100%; height:100%; left:0; bottom:-100%; transition: bottom 0.3s; padding: 2rem 1.5rem 100px 1.5rem;  }
.petAddForm.show { bottom:0; width:100%; height:100%; background:#fff; z-index: 9999;}
.petAddForm h2 { font-size:20px; font-weight: 700; margin:0 0 20px 0; width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.petAddForm h2 > strong { font-weight: 700; }
.petAddForm h3 { font-size:10px; font-weight: 400; margin:-10px 0 20px 0; }

.petAddButtonWrap { width:100%; position: absolute; left:0; bottom:0;  z-index: 99; }
.petAddButtonWrap > ul { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.petAddButtonWrap > ul > li { flex: 1 1; }
.petAddButtonWrap > ul > li > * { width:100%; height:60px; line-height: 60px; border-radius: 0; font-size:15px; font-weight: 700; }
.petAddButtonWrap > ul > li > *:disabled { color:#BBC0C9 !important; background:#F6F7F8 !important; }
.petAddButtonWrap > ul > li:last-child > * { background-color:#431F88; border-color:#431F88; color:#fff; }
.petAddButtonWrap > ul > li .btn_cancel { background:#fff; color:#5C6272; border-top: 1px solid #EAECF0}

.petsWrap > ul > li > label { position:relative; }
.petsWrap > ul > li > label > em { position:absolute; right:20px; bottom:20px; font-size:15px; font-weight: 400; color:#2A303C; }
.petsWrap .pet_delete_line { margin:30px 0; text-align: center; }
.petsWrap .pet_delete_line .pet_delete { background:#fff; font-size:12px; color:#5C6272; font-weight: 400; }
.petsWrap .pet_delete_line .pet_delete > i { text-decoration: underline; }

/*#footer { display:none; }*/
/** 기범 str **/
.nonMember{padding: 30px 0 65px 0;}
.nonMember h1{font-size: 20px; color: #2A303C; margin-bottom: 4px; display: block; font-weight: 700}
.nonMember p{font-size: 9px; color: #EC696B; display: block;}
.nonMember .loginWrap ul > li > label > span{display: flex; font-size:12.5px; margin:0 0 0 0; font-weight: 400; position:absolute; left:0; top:0; color: #2A303C !important}
.nonMember .loginWrap ul > li > label > span > p{color: #431F88; margin-left: 4px}
.nonMember .loginWrap ul > li > label > p{margin-top: 4px; color: #431F88; font-size: 9px; font-weight: 400;}
.nonMember .loginWrap ul > li > label.weight_text{position: relative}
.nonMember .loginWrap ul > li > label.weight_text:before{content: 'kg'; font-size: 15.5px; font-weight: 400; color: #2A303C; right: 20px; bottom: 18px; position: absolute;}
.nonMember .loginWrap ul > li > label.weight_text > input{padding-right: 45px}
.select_custom{width: 100%; height: 56px; padding: 0 15px; border: 1px solid #BBC0C9; font-size: 16px; font-weight: 500; border-radius: 2px; transition: border-color 0.3s; }
.guest_agree{list-style: none}
.sub_gust_agree > li > h4{font-size: 12.5px; color: #2A303C; margin-bottom: 8px;}
.sub_gust_agree .matter-checkbox > input + span{font-size: 15.5px; line-height: 21px}
.sub_gust_agree > li > div{display: flex; align-items: center; justify-content: space-between}
.sub_gust_agree > li > div > label{display: flex}
.sub_gust_agree > li > div > button{border: none; background: transparent; font-size: 11.5px}
.sub_gust_agree > li:first-of-type{margin-bottom: 20px}
.select_custom_title{width: 100%; position: relative; height: 56px; padding: 0 15px; border: 1px solid #BBC0C9; border-radius: 2px; transition: border-color 0.3s; font-size: 16px; color: #BBC0C9; background: url("../svg/icon_select_drop.svg") no-repeat right 26px center; display: block; text-align: left}
.hide{display: none}
.select_custom_sub{border: 1px solid #BBC0C9; border-radius: 2px; transition: border-color 0.3s; position: absolute; width: 100%; background-color: #FFFFFF; z-index: 9}
.select_custom_sub > li{margin-bottom: 0px;}
.select_custom_sub > li:last-of-type{margin-bottom: 0}
.select_custom_sub > li > button{background: white; font-size: 16.5px; border: none; display: block; padding: 0; height: 40px; padding-left: 22.97px; width: 100%; text-align: left}
.select_custom_sub > li:hover > button{background-color: #F6F7F8;}
.select_custom_sub > li:active > button{background-color: #431F88; color: #FFFFFF}

.select_petweight_title{width: 100%; position: relative; height: 56px; padding: 0 15px; border: 1px solid #BBC0C9; border-radius: 2px; transition: border-color 0.3s; font-size: 16px; color: #BBC0C9; background: url("../svg/icon_select_drop.svg") no-repeat right 26px center; display: block; text-align: left}
.select_petweight_sub{border: 1px solid #BBC0C9; border-radius: 2px; transition: border-color 0.3s; position: absolute; width: 100%; background-color: #FFFFFF;
    z-index: 9999; }
.select_petweight_sub > li{margin-bottom: 0 !important;}
.select_petweight_sub > li:last-of-type{margin-bottom: 0}
.select_petweight_sub > li > button{background: white; font-size: 16.5px; border: none; display: block; padding: 0; height: 40px; padding-left: 22.97px; width: 100%; text-align: left}
.select_petweight_sub > li:hover > button{background-color: #F6F7F8;}
.select_petweight_sub > li:active > button{background-color: #431F88; color: #FFFFFF}


.nonMember p.custom_title{font-size: 12.5px; color: #2A303C; transition: color 0.3s; display: block; margin-bottom: 8px; font-weight: 400}
.menu.active > button.select_custom_title{border-color: #2A303C}
.menu.active .select_custom_sub{border-color: #2A303C; border-top: none}
.petweight.active > button.select_petweight_title {border-color: #2A303C}
.petweight.active .select_petweight_sub{border-color: #2A303C; border-top: none}
.only_number,
.nonMember p.only_number,
.nonMember p.not_number{display: none; font-size: 9px; color: #EC696B; margin-top: 4px;}
.nonmemberInfo .nonmemberButton{margin: 0}
.nonmemberButton > li > .matter-button-contained{width: 100%; background: #F6F7F8; color: #BBC0C9; font-size: 15px; height: 60px; box-shadow: none; position: relative; z-index: -1}
.nonmemberButton > li > .matter-button-contained.active{background-color: #431F88; color: white; z-index: 9}
.TermsPop{position: fixed; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 9999}
.TermsPop > div{background: white; width: calc(100% - 48px); margin: 0 auto; }
.TermsPop > div > div{padding: 24px 20px; box-sizing: border-box; max-height: 572px; overflow-y: scroll}
.TermsPop > div > div > h2{font-size: 16px; font-weight: 700; line-height: 23px; padding-bottom: 15px; border-bottom: 1px solid #EAECF0; margin-bottom: 16px;}
.TermsPop > div > div > p{font-size: 15px; line-height: 21px; font-weight: 400}
.TermsPop > div > div > p:first-of-type{margin-bottom: 25px;}
.TermsPop > div > div > p > strong{display: block; font-weight: 700}
.TermsPop > div > button{font-size:15px; font-weight: 700; border: none; background-color: #431F88; width: 100%; color: white; height: 60px;}
.nonmemberInfo ul li{margin: 0 0 20px 0; position: relative}
.nonmemberInfo ul li.petweight{margin: 0;}
.nonmemberInfo ul.menu-ul li{margin-bottom: 0}
.nonmemberInfo ul > li > label{ width: 100%;display: flex;flex-direction: column;justify-content: flex-start;flex-wrap: wrap;position: relative; padding-top: 24px;}
.titleArea > h3.change-pc-text-join{line-height: 18px; font-size: 12px; letter-spacing: -0.5px; color: #2A303C; margin-top: 4px}

/*reserv_check_before.blade.php*/
.nonMember p.infoSearch{font-size: 15px; color: #2A303C; font-weight: 400; line-height: 21px; margin-bottom: 8px; margin-left: 0}
.nonMember > span{color : #5C6272; font-size: 11.5px; margin-bottom: 51px; display: block}
.guide_text{font-size: 12px; font-weight: 400; text-align: center; }
.guide_text > a{font-weight: 700; border-bottom: 1px solid #000}
.mb20{margin-bottom: 20px !important;}
#wr_category{color: #BBC0C9}
#wr_category:focus{color: #2A303C;}
.joinWrap .notice > li.GuideLetter{font-size: 12px; color: #2A303C;}
.nonMember h1.nonmember-searchtitle{margin-bottom: 16px;}

.newStyleJoinWrap .loginWrap{margin: 28px 0 0 0}
.noMemberWrap > a{ border: 1px solid #BBC0C9; background-color: #FFFFFF; color: #2A303C; font-weight: 500}
.noMemberWrap > a:active,
.noMemberWrap > a:hover{background-color: #4A515F; color: #FFFFFF; border-color: #4A515F}
.gnbLogin .loginWrap > ul > li.findWrap{margin-bottom: 32px}
.freeLogin .loginWrap > ul > li.findWrap{margin-bottom: 40px}
.last_login{text-align: center; margin: 0 0 40px 0}
.menu-ul > li{position: relative}
.PetKind{margin-bottom: 8px; font-size: 12.5px; font-weight: 400; line-height: 17px; letter-spacing: -0.5px; color: #2A303C; display: block}
/** 기범 fin **/
.password-pop{position: fixed; height: 100vh; width: 100%; background: rgba(0,0,0,0.5); z-index: 9999; top: 0; display: flex; align-items: center; justify-content: center}
.password-pop > div{width: calc(100% - 48px); max-width: 382px; margin: 0 auto; background-color: white;}
.password-pop > div > div:first-of-type{padding: 40px}
.password-pop > div > div:first-of-type > h3{font-size: 18px; font-weight: 700; line-height: 26.5px; letter-spacing: -0.5px; color: #2A303C; text-align: center; margin-bottom: 8px}
.password-pop > div > div:first-of-type > p{font-size: 14px; font-weight: 400; line-height: 20px; color: #5C6272; margin-bottom: 12px; text-align: center; display: block}
.password-pop > div > div:first-of-type > label > input{border: 1px solid #2A303C; height: 56px; width: 100%; text-align: center; font-size: 15px}
.password-pop > div > div:last-of-type{display: flex}
.password-pop > div > div:last-of-type > button{height: 47px; font-size: 14px; font-weight: 500; letter-spacing: -0.5px; line-height: 22.5px; color: #FFFFFF; width: 50%; color: #2A303C; border-top: 1px solid #BBC0C9; background-color: #FFFFFF}
.password-pop > div > div:last-of-type > button:last-of-type{background-color: #431F88; color: #FFFFFF}
.joinWrap label.labelPhone > select.join-selelct-phone{max-width: 104px}
.loginWrap input.join-input-phone{width: 219px;}
.reStyleFindAddr{display: block}
.address_find{font-size: 15px; height: 56px; border-radius: 2px}
.loginWrap > ul > li.btn-li-none{margin-bottom: 0}
.memberWrap .buttonWrap #btn_member_modify{line-height: 23px; border-radius: 2px}
.memberWrap .reButtonWrap{margin-bottom: 0; margin-top: 20px}
.modifyWrap{margin-bottom: 88px}
.modifyOuterWrap .modifyPetsWrap > ul > li{max-width: 145px; max-height: 145px; margin-bottom: 15px; margin-right: 21px}
.modifyOuterWrap .modifyPetsWrap > ul > li:nth-of-type(even){margin-right: 0}
.modifyOuterWrap .modifyPetsWrap > ul{justify-content: flex-start}
#address_btn{margin: 0}
.secession-info{text-align: center; font-size: 9px; font-weight: 400; line-height: 13px; color: #5C6272; display: block;  margin-top: 120px; transform: scale(0.9,0.9)}
.secession-info > a{text-decoration: underline; color: #5C6272;}
.mypageWrap .mypageContentWrap > h2.resize-info-title{margin: 0 0 40px 0}
.mbmodifyOuterWrap .modifyPetsWrap .pet_img > img{height: 100%; object-fit: cover;object-position: center center; position: absolute; left: 0; top: 0}
/* 가로 해상도가 768px 보다 작은 큰화면에 적용) */
.dropBtnbox > li .matter-button-contained{height: 60px; border-radius: 2px;font-size: 15px; font-weight: 700; line-height: 23px; letter-spacing: -0.5px}
.dropBtnbox > li:last-of-type .matter-button-contained{ color: #2A303C; background-color: #FFFFFF; border: 1px solid #BBC0C9; }
.dropWrap{max-width: 331px; margin: 2px auto; padding: 30px 0}
.dropWrap .titleArea{margin-bottom: 52px}
.dropWrap .titleArea > h2{font-size: 25px; line-height: 30px; margin-bottom: 4px}
.dropWrap .titleArea > h4{font-size: 20px; line-height: 29px; letter-spacing: -0.5px; margin-top: 0}

.dropPop .alertWrapInner{width: calc(100% - 40px); max-width: 327px; height: 572px}
.dropPop .alertWrapInner > h3{padding: 24px 0 15px 0; margin: 0 20px}
.dropPop .alertWrapInner > p{padding: 0 20px 0 20px; margin-bottom: 16.71px; font-size: 12.5px;line-height: 17px;letter-spacing: -0.5px;font-weight: 400;color: #2A303C;text-align: left; max-height: 435px}
.dropPop .alertWrapInner > p:first-of-type{margin-bottom: 0; padding-top: 16.71px}
.dropPop .alertWrapInner > p > strong{font-weight: 700; line-height: 21px;}
.dropPop .alertWrapInner > strong{ font-size: 15px; line-height: 21px; letter-spacing: -0.5px; color: #2A303C; padding: 0 20px; font-weight: 700}
.dropPop .alertWrapInner > ul{margin-top: 26px}
.dropPop .alertWrapInner > ul > li:last-child > *{height: 60px}
.mypage-custom-select > li{margin-bottom: 0}
#mb_email[readonly]{border: 1px solid #BBC0C9; background-color: #F6F7F8; color: #BBC0C9}
.newStyleJoinWrap{max-width: 327px; margin: 0 auto; padding: 33px 0; width: calc(100% - 48px)}
.loginWrap .guest-searchbtn:disabled{height: 56px; font-size: 15px; color: #BBC0C9; background-color: #F1F2F3;}
.loginWrap .guest-searchbtn{height: 56px; font-size: 15px; }


.termsNewArea{width: 100%;  max-width: 287px; margin: 50px auto 0;}
.termsNewArea > table{table-layout: fixed; width: 100%;border: 1px solid #D1D4DA}
.termsNewArea > table > thead > tr{border-bottom: 1px solid #D1D4DA}
.termsNewArea > table > thead > tr > th{font-size: 12px;line-height: 16px; color: #000; font-weight: 700; padding: 13px;}
.termsNewArea > table > tbody > tr > td{font-size: 12px; font-weight: 400; line-height: 16px; color: #000; padding: 12px 14px; vertical-align: middle}
.termsNewArea > table > tbody > tr > td:first-of-type{text-align: center}
.termsNewArea > table > tbody > tr > td > strong{font-weight: 700; margin-right: 7px}
.termsNewArea > table > tbody > tr:not(:last-of-type){border-bottom: 1px solid #D1D4DA}
.termsNewArea > table > tbody > tr > td:first-of-type,
.termsNewArea > table > thead > tr > th:first-of-type{border-right: 1px solid #D1D4DA}
.termsNewArea .mb-terms{display: table-row}
.termsNewArea .pc-col,
.termsNewArea .pc-terms{display: none}
.subscribeBox strong{display: block; font-weight: 700; font-size: 15px; margin-bottom: 10px}
.subscribeBox p{font-size: 15px; font-weight: 400; line-height: 2; margin-bottom: 20px }
.agreementArea{width: calc(100% - 48px); max-width: 327px; margin: 0 auto; padding: 32px 0}
.agreementArea > h2{font-size: 20px; line-height: 29px; color: #2A303C; margin-bottom: 4px}
.agreementArea > p{font-size: 12px; line-height: 18px; color: #2A303C; margin-bottom: 32px; font-weight: 400; display: block}
.all_agreement{padding-bottom: 16px; border-bottom: 1px solid #EAECF0; margin-bottom: 28px}
.agreement_content .sub_gust_agree > li > div i{color: #5C6272; font-size: 11px; font-weight: 400; line-height: 11px; padding: 2px; background-color: #F1F2F3; margin-right: 4px}
.popAgreementArea .all_agreement .sub_gust_agree .matter-checkbox > input + span{font-weight: 700; }
.agreementArea .agreement_content .sub_gust_agree .matter-checkbox > input + span{display: flex; align-items: center; font-weight: 400;}
.all_agreement .sub_gust_agree .matter-checkbox > input + span{font-weight: 700}
.agreement_content .sub_gust_agree .matter-checkbox > input + span{display: flex; align-items: center; font-weight: 400}
.agreement_content .sub_gust_agree > li{margin-bottom: 16px}
.all_agreement .sub_gust_agree > li:first-of-type{margin-bottom: 0}
.newTermsPop .alertWrapInner > p{display: none}
.newTermsPop .termsNewArea{margin-top: 20px; margin-bottom: 118px}
.google-join{font-size: 10px; color: #431F88; font-weight: 400; position: absolute; left: 35px; top: 3px}

.sub_gust_agree > li > div.agree-marketing {display: flex; flex-direction: column; align-items: start; margin-top: 8px; margin-left: 24px; padding: 7px 17px; background-color: #F6F7F8;}
.agree-marketing .matter-checkbox > input + span{ font-size: 11px; padding-left: 20px; }
.agree-marketing .matter-checkbox > input { left: 0; top: 2px; }
.sub_gust_agree > li > div.agree-marketing > div{ display: flex; }
.sub_gust_agree > li > div.agree-marketing > div > label:nth-of-type(2){ margin-left: 24px; }
.sub_gust_agree > li > div.agree-marketing > p{ font-size: 9px; line-height: 14px; text-align: left; color: #798493; }
@media only screen and (min-width: 768px) {
    .newTermsPop .termsNewArea{margin-top: 20px; margin-bottom: 176px}
    .memberWrap, .snsLoginWrap, .memberNotice { max-width: 327px; margin:0px auto; padding:100px 0 160px 0; }
    .dropWrap{max-width: 331px;}
    .snsLoginWrap { padding:0 0; background:#fff; }
    .snsLoginWrap > h2 { text-align: left; fonts-size:14px; }
    .snsLoginWrap > a.icon_sns { width:60px; height:60px; }
    .snsLoginWrap > a.icon_sns{margin-left: 24px}
    .snsLoginWrap > a.icon_sns_apple{margin-left: 7px}
    .snsLoginWrap > a.icon_sns_naver{margin-right: 7px}
    .memberNotice { padding: 48px 0 0 0; background:#fff; line-height: 16px}

    .fixedButton { position:relative; margin:20px 0 0 0;}
    #footer { display:block; }

    /**  비회원 예약신청 pc **/
    .nonMember {width:  100%; margin: 0 auto; max-width: 782px; padding: 100px 0 160px 0;   position: relative; }
    .nonmemberInfo{display: flex; justify-content: space-between; position: relative}
    .nonmemberInfo > div:first-of-type{width: 391px; padding-right: 64px; margin-right: 64px; border-right: 1px solid #EAECF0; padding-bottom: 65px;}
    .nonmemberInfo > div:last-of-type{width: 327px;}
    .nonmemberInfo > div:last-of-type > ul:first-of-type{padding-bottom: 108px}
    .terms_ul{position: absolute; width: 326px; left: 0; bottom: 160px}
    .nonMemberTitle{display: flex; align-items: flex-end; width: 326px;}
    .mbSearch{max-width: 327px}
    .modifyOuterWrap form > h3 { font-size:14px; }

    .PcAddformBox{background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; align-items: center; justify-content: center; display: none}
    .PcAddformBox.show{display: flex}
    .PcAddformBox > div{width: 100%; max-width: 382px; padding: 40px 39px; position: relative; max-height: 532px !important;}
    .modifyOuterWrap form.info_form{padding: 0}
    .PcAddformBox .petAddForm h2{font-size: 18px; font-weight: 700; line-height: 26.5px; letter-spacing: -0.5px; margin-bottom: 16px}
    .PcAddformBox .loginWrap > ul > li > label > span{font-size: 14px; font-weight: 400; line-height: 22px}
    .PcAddformBox .loginWrap input[type='text']{padding: 0 24px; font-size: 16px; font-weight: 400; line-height: 23px}
    .PcAddformBox .loginWrap select{background: url(../svg/icon_select_drop.svg) no-repeat right 26px center; -webkit-appearance:none;-moz-appearance:none; appearance:none; padding: 0 24px;}
    .PcAddformBox .petAddButtonWrap > ul > li > *{height: 47px; font-size: 14px; font-weight: 500; line-height: 22.5px}

    .reStyleLogin ul > li{margin-bottom: 20px}
    .reStyleLogin ul > li:nth-of-type(3){margin-bottom: 16px}

    .titleArea > h2{margin-bottom: 20px}
    .reStyleIdWrpa .titleArea > h2{margin-bottom: 4px}
    .snsLoginWrap > h2,
    .loginWrap > ul > li > label > span{font-size: 14px; line-height: 22px}
    .noMemberWrap > h2{font-weight: 400}
    .reStyleLogin{padding-bottom: 52px}
    .reStyleIdWrpa .fixedButton .btn_submit{height: 47px}

    .last_login{text-align: center; margin: 0 0 52px 0}
    .last_login > p{font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: -0.5px; color: #2A303C; padding: 3px 22px; border-radius: 20px; background-color: #F1F2F3; display: inline-block}
    .last_login > p > span{display: inline-block; font-weight: 500; color: #431F88; border-bottom: 1px solid #431F88; line-height: 1}

    .freeLogin .loginWrap > ul > li.findWrap{margin-bottom: 24px}

    .modifyPetsWrap > ul > li{min-width: 276px; min-height: 240px !important; flex: none !important; margin-left: 52px; min-height: 240px; max-width: 240px}
    .modifyPetsWrap > ul > li:nth-child(3n+1){margin-left: 0}
    .modifyOuterWrap form:not(#formDoc) > h3.pet-info-title{margin-bottom: 24px; padding-bottom: 20px}
    .mypageWrap .mypageContentWrap > h2.info-title-pe{margin: 0 0 32px 0}
    .dropBtnbox > li .matter-button-contained{height: 47px; border-radius: 2px;font-size: 15px; font-weight: 700; line-height: 23px; letter-spacing: -0.5px}
    .dropBtnbox > li:last-of-type .matter-button-contained{margin-left: 11px; color: #2A303C; background-color: #FFFFFF; border: 1px solid #BBC0C9; }
    .dropWrap .titleArea{margin-bottom: 60px}
    .dropWrap > ul > li > strong{font-size: 14px; line-height: 22px; margin-bottom: 4px}
    .memberDropWrap > ul > li > span, .memberDropWrap > ul > li > a{font-size: 14px; line-height: 22px}
    .memberDropWrap > ul > li{margin: 0 0 28px 0}

    .dropPop .alertWrapInner{height: 608px; max-width: 382px;}
    .dropPop .alertWrapInner > p{padding: 0 20px 0 20px; margin-bottom: 16.71px; font-size: 12.5px;line-height: 19px;letter-spacing: -0.5px;font-weight: 400;color: #2A303C;text-align: left; max-height: 435px}
    .dropPop .alertWrapInner > p > strong{font-weight: 700; line-height: 22px;}
    .dropPop .alertWrapInner > strong{ font-size: 14px; line-height: 22px; letter-spacing: -0.5px; color: #2A303C; padding: 0 20px; font-weight: 700}
    .dropPop .alertWrapInner > ul{margin-top: 31px}
    .modifyOuterWrap .modifyPetsWrap .pet_info{justify-content: center; padding: 7px 19px}
    .modifyOuterWrap .modifyPetsWrap .pet_info > strong{margin: 0 20px 0 0;font-size: 23px; line-height: 34px; max-width: 110px }
    .modifyOuterWrap .modifyPetsWrap .pet_info > span{margin: 0 8px 0 0; font-size: 18px; line-height: 26.5px}
    .secession-info{text-align: left; transform: translateX(-32px) translateY(-19px) scale(0.9,0.9); margin-top: 160px}
    .memberWrap .reButtonWrap{margin-top: 40px}
    .newStyleJoinWrap .titleArea > h2{margin-bottom: 4px; font-size: 25px; line-height: 37px}
    .newStyleJoinWrap .titleArea > h3{font-size: 11px; line-height: 16px; color: #5C6272; margin: 0}
    .newStyleJoinWrap .fixedButton{margin: 12px 0 0 0}
    .newStyleJoinWrap .fixedButton .btn_submit{height: 47px; }
    .newStyleJoinWrap .fixedButton .btn_submit:disabled{border: 1px solid #BBC0C9; color: #BBC0C9; background-color: #FFFFFF}

    .newStyleJoinWrap .loginWrap > ul > li:nth-of-type(2){margin-bottom: 16px}
    .joinWrap .notice > li.GuideLetter > br{display: none}

    .nonMember h1{margin-bottom: 0}
    .nonMember p{margin-left: 12px}
    .nonMember p.custom_title{margin-left: 0}
    .loginWrap .guest-searchbtn:disabled{height: 60px; font-size: 14px; color: #BBC0C9; background-color: #F1F2F3; font-weight: 500}
    .loginWrap .guest-searchbtn{height: 60px; font-size: 14px;  font-weight: 500}

    .termsNewArea{max-width: 790px;}
    .termsNewArea > table > colgroup > col:first-of-type{width: 27%}
    .termsNewArea > table > colgroup > col:nth-of-type(2){width: 53%}
    .termsNewArea > table > colgroup > col:last-of-type{width: 20%}
    .termsNewArea .mb-terms{display: none}
    .termsNewArea .pc-terms{display: table-cell; border-left: 1px solid #D1D4DA}
    .termsNewArea .pc-col{display: table-column}
    .termsNewArea > table > tbody > tr > td{font-size: 15px; line-height: 26.5px; font-weight: 400; padding: 14px 25px}
    .termsNewArea > table > thead > tr > th{font-size: 15px; line-height: 26.5px;}
    .all_agreement,
    .agreement_content{position: static}
}