@charset "utf-8";

html {font-size: 10px;}
body { background-color: #fff; margin: 0; height: 100%; font-size: 1rem; min-height: auto; color: #343434; }

.mobile__head {position: relative; display: flex; justify-content: center; align-items: center; height: 4.8rem;}
.mobile__head .name__ {font-size: 1.8rem; font-weight: 600;}
#mobileShare { z-index: 99990; position: fixed; top: 1.4rem; right: 2rem; display: inline-block; width: 2.2rem; height: 2.0rem; text-indent: -9999px; background-repeat: no-repeat; background-position: center; background-image: url(https://img.lifet.co.kr/icon/share_m.svg); cursor: pointer; background-size: 2.2rem;}
img {max-width: 100%; vertical-align: top;}

.button {width: 100%; padding: 1.45rem; color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 130%; border-radius: 0.8rem;}

.group01 {position: relative;}
.group01 .swiper_wrap {position: absolute; top: 50%; width: 100%; transform: translateY(-50%);}
.group01 .pettone_swiper {overflow: hidden; /*padding: 0 3.8rem;*/}
/* .group01 .pettone_swiper .swiper-slide {padding: 0 2rem;} */
/* .group01 .pettone_swiper .swiper-slide img {margin-right: -10px;} */

.modal-dialog .bottom_sheet .content-area.ai_check {max-width: 440px; padding: 0;}
.modal-dialog .bottom_sheet .content-area.ai_check .head div:first-child {z-index: 10; padding-left: 2rem; border: 0; font-size: 2rem;}
.modal-dialog .modal-content.bottom_sheet {align-items: flex-end; background-color: transparent;}
.modal-dialog .bottom_sheet .content-area {max-width: none; padding: 2rem 0 0; border-radius: 2rem 2rem 0 0;}
.bottom_sheet .ai_check .contWrap.dislocation {overflow-y: auto; max-height: calc(100dvh - 43px); padding: 6.6rem 2rem 5rem; text-align: left;}


.group02 {padding: 0 2.9rem 6rem; background-color: #ECEEF0;}
.group02 h2 {padding: 5.8rem 0 1.5rem; font-size: 3rem; font-weight: 700; line-height: 130%; text-align: center;}
.group02 h2 + p {color: #5299FF; font-size: 1.8rem; font-weight: 600; line-height: 130%; letter-spacing: -0.36px;}
.group02 .inner {position: relative; height: 46.2rem; margin: 0 -2.9rem; background: linear-gradient(180deg, #FFF 0%, #ECEEF0 100%);}
.group02 .inner::before {content:''; position: absolute; top: 2.2rem; left: 0; width: 100%; height: 100%; background: url('https://img.lifet.co.kr/event/pettone_section02_bg.png') no-repeat left top; background-size: 100%;}
.group02 .img_upload {position: relative; display: flex; justify-content: center;  width: 29rem; height: 34rem; margin: 0 auto; border-radius: 20px; border: 1.5px solid #DFDFDF; background-color: #FFF; box-shadow: 4px 4px 6px 0 rgba(200, 200, 200, 0.18);}
.group02 .img_upload button {display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 1.8rem; font-weight: 600; line-height: 130%; }
.group02 .img_upload button img {margin-bottom: 1.2rem;}
.group02 .input {display: flex; align-items: center; height: 4.2rem; margin: 0 1.35rem 0; border-radius: 0.3rem; background-color: #fff;}
.group02 .input_pet + .input { margin-bottom: 1.2rem;}
.select2-container--open .select2-dropdown--below.marginTop2 {margin-top: -21px;}
/* 강아지/고양이 선택 컴포넌트 */
.group02 .input_pet {
    margin: 2rem 1.35rem 1.2rem;
}
.group02 .input_pet .check-col-06 {gap: 0.7rem;}
.group02 .input_pet .check-col-06 li {flex: 1; margin-bottom: 0;}
.group02 .input_pet .check-col-06 li .checkBtn input + label {height: 4.4rem; padding: 1rem 0; font-size: 1.6rem; font-weight: 500; line-height: 150%; border: 1px solid #E3E3E3; box-shadow: none;}
.group02 .input_pet .check-col-06 li .checkBtn input:checked + label {border: 0; background-color: #68A5FE;}
.group02 .input_pet .check-col-06 li + li {margin-left: 0;}
.group02 .input label {width: 7rem;  font-size: 1.6rem; font-weight: 600; line-height: 130%; text-align: center;}
.group02 .input input, .group02 .input select {flex: 1; border: 0;}
.group02 .input input {min-width: 100px; height: 4.2rem; padding: 0; border: 0; font-size: 1.6rem; font-weight: 500; line-height: 130%; border-radius: 0;}
.select2-container {z-index: 100; flex: 1; margin: -1rem 0;}
.select2-search--dropdown {height: 4.2rem;}
.group02 .input input::placeholder, .select2-container--default .select2-selection--single .select2-selection__placeholder {color: #949494; font-size: 1.6rem; font-weight: 500; line-height: 130%; }
.select2-container--default .select2-selection--single {height: 100%; padding: 0; border: 0; background-image: url(https://img.lifet.co.kr/icon/gnb_arrow.svg); background-size: 1.3rem;}
.select2-container--open .select2-dropdown--below.marginTop2 input {border: 0;}
.select2-container--default .select2-search--dropdown .select2-search__field {height: 100%; padding-left: 12px; font-size: 1.6rem; font-weight: 500; background-image: url(https://img.lifet.co.kr/icon/gnb_arrow.svg); background-size: 1.3rem; background-position: right 1.4rem center; background-color: #fff;}
.group02 .button {margin-top: 3rem; background: #5B9EFF;}
.group02 .button.disabled, .group02 .button:disabled {font-weight: 600; background: #ccc; color: #888; cursor: not-allowed;}
.dislocation_guide {margin-bottom: 2.8rem;}
.dislocation_guide .tit {margin-bottom: 0.8rem; font-size: 1.8rem;}
.dislocation_guide .swiper-slide {height: auto;}
.dislocation_guide .img {margin-bottom: 2.1rem;}
.dislocation_guide .img div > img {height: auto;}
.dislocation_guide .img div {width: 100%; height: auto; margin-left: 0;}
.dislocation_guide .swiper-pagination {position: static;}
.select2-container--default .select2-selection--single .select2-selection__rendered {display: flex; align-items: center;font-size: 1.6rem; font-weight: 500;}
.swiper-pagination-bullet-active {background-color: #68A5FE;}
.swiper-pagination-bullet {vertical-align: top;}
.contWrap.dislocation .m-profile .btn-area .btn-next {height: 4.2rem; font-size: 1.6rem; line-height: 4.2rem;}
.group02 .upload_picture {position: relative; width: 29rem; height: 34rem; margin: 0 auto; border-radius: 2rem; border: 1.5px solid #FFF; box-shadow: 4px 4px 6px 0 rgba(200, 200, 200, 0.18); overflow: hidden;}
.group02 .upload_picture img {width: 100%; height: 100%; object-fit: cover;}
.group02 .upload_picture .close {overflow: hidden; position: absolute; top: 0.6rem; right: 0.6rem; width: 3.9rem; height: 3.9rem; text-indent: -99999px; background: url(https://img.lifet.co.kr/event/pettone_close.png) no-repeat center; background-size: 3.9rem;}
.group02 > div {display: none;}
.group02 .step03 {text-align: center;}
.group02 .step03 img {position: relative; top: -7rem; width: 27.3rem;}
.group02 .step04 {margin-bottom: -3rem;}
.group02 .step04 h2 {margin-right: 6.6rem; margin-left: 6.6rem;}
.group02 .step04 h2 em {margin-right: 0.8rem; color: #68A5FE;}
.group02 .step04 h2 span {display: inline-block;}
.group02 .step04 .inner {text-align: center;}
.group02 .step04 .result_img button {display: block; height: auto;}
.group02 .pettone_area {display: flex; flex-direction: column; align-items: flex-start; width: 10.1rem; height: 13.7rem; margin: 0 auto; text-align: left; border: 1px solid #DFDFDF; box-shadow: 4px 4px 12px 0 rgba(200, 200, 200, 0.18);}
.group02 .pettone_color {width: 100%; height: 10rem;}
.group02 .pettone_text {flex: 1; padding: 0.55rem; height: 0.8rem; font-size: 1rem; font-weight: 600; line-height: 130%; letter-spacing: -0.2px;}
.group02 .pettone_text span {display: block;}
.group02 .pettone_name {position: relative; display: inline-flex;  margin: 1.2rem 0 0; padding: 0.5rem 2rem; font-size: 2rem; font-weight: 700; line-height: 140%; text-align: center; border-radius: 6.2rem; background-color: #FFF; box-shadow: 4px 4px 12px 0 rgba(200, 200, 200, 0.18);}
.group02 .pettone_name::after {content: ''; position: absolute; top: 5.8rem; left: 50%; display: inline-block; width: 2.4rem; height: 1.4rem; margin-left: -1.2rem; background: url(https://img.lifet.co.kr/event/pettone_arrow.svg) no-repeat;}
.select2-search__field {-webkit-user-select: text; user-select: text;}
.loading_container {position: relative; height: 60px;  display: flex; justify-content: center; align-items: center;}

/* 개별 문구 스타일 */
.loading_text {position: absolute; padding: 1.4rem 2rem; opacity: 0; text-align: center; font-size: 1.6rem; font-weight: 600; line-height: 150%; word-break: keep-all; animation: fadeLoop 25s infinite; border-radius: 1.2rem; background-color: #F9FAFA ;}

/* 페이드 효과 키프레임 */
@keyframes fadeLoop {
    0% { opacity: 0; transform: translateY(10px); }
    2% { opacity: 1; transform: translateY(0); }  /* 약 0.5초간 페이드 인 */
    18% { opacity: 1; transform: translateY(0); } /* 약 4초간 유지 */
    20% { opacity: 0; transform: translateY(-10px); } /* 약 0.5초간 페이드 아웃 */
    100% { opacity: 0; }
}

/* 각 문구별 5초 간격 딜레이 설정 */
.loading_text:nth-child(1) { animation-delay: 0s; }
.loading_text:nth-child(2) { animation-delay: 5s; }
.loading_text:nth-child(3) { animation-delay: 10s; }
.loading_text:nth-child(4) { animation-delay: 15s; }
.loading_text:nth-child(5) { animation-delay: 20s; }

.group02 .capture_area {margin: -12.3rem -2.9rem 0; padding-top: 2rem; padding-bottom: 1rem;}
.group02 .capture_img {position: relative; width: 30rem; height: 40rem; margin: 0 auto;  border: 0.15rem solid #fff; border-radius: 1rem; box-shadow: 4px 4px 12px 0 rgba(200, 200, 200, 0.18);}
.group02 .capture_img .logo {position: absolute; top: 1.5rem; left: 1.5rem; opacity: .7;}
.group02 .capture_img .logo img {width: 8rem;}
.group02 .result_img img {width: 30rem; height: 40rem; object-fit: cover; border-radius: 1rem;}
.group02 .triangle {display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 1.8rem; font-weight: 600; line-height: 130%;}
.group02 .triangle span {display: inline-block; width: 2.3rem; height: 2.3rem;}
.group02 .bloon_ani {height: 3.9rem; margin: 0 0 3rem; padding: 1.35rem 0 0; font-size: 1.6rem; font-weight: 600; line-height: 130%; text-align: center; background: url(https://img.lifet.co.kr/event/pettone_bloon.png) no-repeat center; background-size: 18.9rem; animation: floating 1s ease-in-out infinite;}
@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(3px); /* 15px 만큼 부드럽게 위로 이동 */
    }
    100% {
        transform: translateY(0px);
    }
}
.group02 .step04 button {width: 100%; height: 5rem; font-size: 1.6rem; font-weight: 700; border-radius: 0.8rem;}
.group02 .step04 button + button {margin-top: 1rem; background-color: #fff;}
.group02 .step04 button.disabled, .group02 .step04 button:disabled {background-color: #ccc; color: #888; cursor: not-allowed; border: 0;}
.group02 .step04 button.btn_line span {margin-left: 0.6rem;}
.event_share {display: flex; flex-direction: column; align-items: center;}
.event_share .sns_wrap {display: flex;}
.event_share .tit { margin: 2.8rem 0 1.2rem; font-size: 1.6rem; font-weight: 700; line-height: 130%;}
.event_share .sns_wrap .sns + .sns {margin-left: 1.2rem;}
.event_share .sns_wrap .sns .icon {display: flex; justify-content: center; align-items: center; width: 4.8rem; height: 4.8rem; border-radius: 50%;}
.event_share .sns_wrap .sns .icon.kakao {background-color: #FEE500;}
.event_share .sns_wrap .sns .icon.url {background-color: #000;}
.event_share .sns_wrap .sns .icon img {width: 2.8rem;}
.event_share .sns_wrap .sns span {display: block; margin-top: 0.8rem; font-size: 1.2rem; font-weight: 500; line-height: 130%; text-align: center;}

.group03 {position: relative; padding: 0 0 5rem; text-align: center; background-color: #E7E9EC;}
.btn_wrap {padding: 0 2.9rem;}
.btn_wrap button {display: flex; align-items: center; justify-content: center; width: 100%; height: 5rem; padding: 1rem 2.6rem 1rem 3.2rem; color: #fff; font-size: 1.6rem; font-weight: 600; border-radius: 0.8rem; border: 0; background-color: #343434;}
.btn_wrap button::after {content: ''; display: inline-block; width: 2.1rem; height: 2.1rem; margin-left: 0.4rem; background: url(https://img.lifet.co.kr/icon/arrow_white.svg) no-repeat center; background-size: 0.8rem;}
.btn_wrap button + button {margin-top: 1.2rem;}

.group04 {position: relative; padding: 0 0 5rem; text-align: center; background-color: #5B9EFF;}

.group05 {position: relative; padding: 4rem 0 5rem; text-align: center; background-color: #D3E6FF;}
.group05 > img {width: 7rem;}
.group05 h2 {margin: 1.2rem 0 2.5rem; font-size: 3rem; font-weight: 700; line-height: 130%;}
.group05 h2 em {color: #5B9EFF;}
.group05 .store_swiper {overflow: hidden;}
.group05 .store_swiper .swiper-slide {width: 28rem; box-shadow: 0 2px 6px 0 rgba(140, 159, 192, 0.25);}
.group05 .store_swiper .swiper-slide img {width: 28rem;}

.group06 {padding: 5rem 2.9rem; background: linear-gradient(0deg, #CFE2FF 3.6%, #F3F8FF 52.35%), #FEFEFE;}
.group06 h2 {margin: 0 -2.9rem; font-size: 3rem; font-weight: 700; line-height: 130%; text-align: center; letter-spacing: -0.6px;}
.group06 h2 span {color: #68A5FE;}
.group06 .gif_bg {margin: 0 -2.9rem 0; background: url(https://img.lifet.co.kr/event/pettone_section06_bg.png) no-repeat left 2.7rem top 7.9rem; background-size: 100%;}
.group06 button {display: flex; align-items: center; justify-content: center; width: 100%; height: 5rem; margin-top: 3rem; padding-left: 0.6rem; color: #fff; font-size: 1.6rem;  font-weight: 600; border-radius: 0.8rem; border: 0; background-color: #5B9EFF;}
.group06  button::after {content: ''; display: inline-block; width: 2.1rem; height: 2.1rem; margin-left: 0.4rem; background: url(https://img.lifet.co.kr/icon/arrow_white.svg) no-repeat center; background-size: 0.8rem;}

@media (min-width: 750px) {
    html {font-size: 14px;}
    #container {overflow: hidden; position: relative; max-width: 520px; margin: 4.8rem auto 0;}
    .mobile__head {overflow: hidden; max-width: 520px; margin: 0 auto;}
    #container .mobile__head .name__.hTitle {display: block;}
    .mobile__head {z-index: 300; overflow: visible; position: fixed; width: 100%; top: 6.7rem; display: flex; justify-content: center; align-items: center; height: 4.8rem; border-bottom: 1px solid #D8D8D8; background-color: #fff;}
    .mobile__head .name__ {font-size: 1.8rem; font-weight: 600;}
    .mobile__head .back {z-index: 1; position: absolute; left: 0; top: 0; width: 5rem; height: 5rem; background-repeat: no-repeat; background-position: center; background-size: 2.2rem; background-image: url(https://img.lifet.co.kr/icon/back.svg); }
    #container.pettone_event {overflow: hidden; max-width: 520px; margin: 0 auto 0;  padding: 6.7rem 0 0;}
    .app_top ~ #container.pettone_event {padding-top: 11.5rem;}
    header.app_top ~ #container.pettone_event {padding-top: 9.5rem;}
    .app_top ~ #container .mobile__head {top: 9.5rem;}
    #mobileShare {z-index: 10; position: absolute;}
    .select2-container--open .select2-dropdown--below.marginTop2 input {height: 58px;}
    .select2-results__option {font-size: 1.4rem; line-height: 58px;}
    .select2-container {margin: -0.5rem 0;}
    .select2-container--open .select2-dropdown--below.marginTop2 {margin-top: -38px;}
    .select2-container--default .select2-results > .select2-results__options {max-height: 400px;}
}