@charset "utf-8";

@font-face {
    font-family: 'PlayfairDisplay';
    src: url('https://s1.unipware.com/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

:root {
    --primary-color: #FF966A;
    --primary-color02: #FB6C6B;
    --middle-color: #FF971D;
    --main-bold-color: #2FC5AA;
    --sub-color: #D9FAF4;
    --dark-grey-color: #8E8E8E;
    --grey-color: #D4D4D4;
    --light-grey-color: #C0C0C0;
    --white-color: #fff;
    --bg-black-op-5: #00000080;
    --shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.wrap {
    position: relative;
    max-width: 768px;
    margin: 0 auto;
    text-align: center;
    padding: 1.5rem;
    height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
footer,
div,
input,
button {
    font-family: 'Pretendard';
}


/* 인덱스 */
.logo {
    height: 60px;
}

.ico_heart {
    position: absolute;
    width: 30px;
    top: -30px;
    left: -30px;
}

.btn_measure {
    background: linear-gradient(to bottom, var(--primary-color), var(--primary-color02));
    color: var(--white-color);
    font-size: clamp(19px, 3vw, 21px);
    border-radius: 30px;
    width: 15vw;
    min-width: 300px;
}

.btn_measure::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(https://s1.unipware.com/images/ico_heart_w.svg) 50% 50% no-repeat;
    margin-right: 10px;
    background-size: contain;
    animation: pulse 0.8s ease-in-out infinite alternate;
    /* 애니메이션 적용 */
}

.slideshow-wrapper {
    overflow: hidden;
    width: 330px;
}

.slideshow {
    transition: transform 0.5s ease-in-out;
}

.main_img img {
    margin-left: 10px;
}

.main_img img {
    width: 330px;
    padding: 20px;
}

.hearts-container {
    position: absolute;
    bottom: 20px;
    left: -20px;
    width: 100%;
    height: 100%;
    z-index: -5;
}

.heart {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: url(https://s1.unipware.com/AIcrush/images/ico_heart.svg) 50% 50% no-repeat;
    background-size: contain;
    opacity: 0;
    animation: rise 5s linear infinite;
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) scale(1.5);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        /* 기본 크기 */
    }

    100% {
        opacity: 0;
        transform: scale(1);
        /* 최대 크기 */

    }
}


/* 측정 */
.cam_area {
    height: 78vh;
    overflow: hidden;
}

.img_measure {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 100%;
    background: url(https://s1.unipware.com/AIcrush/images/img_measure.jpg) 50% 50% no-repeat;
    background-size: cover;
}

.logo_outline {
    position: absolute;
    width: 90px;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    top: 6%;
    left: 50%;
    margin: 0 auto;
}

.guide_line.active {
    top: 30%;
    left: 30px;
    position: absolute;
    width: clamp(180px, 18vw, 250px);
    height: clamp(200px, 28vw, 250px);
    border: 5px solid var(--primary-color02);
    border-radius: 20px;
}

.guide_line {
    top: 25%;
    right: 10px;
    position: absolute;
    width: clamp(180px, 18vw, 250px);
    height: clamp(200px, 28vw, 250px);
    border: 5px solid var(--light-grey-color);
    border-radius: 20px;
}

.measure_heart {
    width: 70px;
    height: 70px;
    background: url(https://s1.unipware.com/AIcrush/images/ico_measure_heart.svg) 50% 50% no-repeat;
    transition: opacity 0.5s ease;
}

.measure_heart02 {
    position: relative;
    width: 70px;
    height: 70px;
    background: url(https://s1.unipware.com/AIcrush/images/ico_measure_heart02.svg) 50% 50% no-repeat;
    transition: opacity 0.5s ease;
}

.measure_heart02_blur {
    position: absolute;
    top: -5px;
    width: 85px;
    height: 85px;
    background: url(https://s1.unipware.com/AIcrush/images/ico_measure_heart02_blur.svg) 50% 50% no-repeat;
    background-size: cover;
    animation: pulse 0.8s ease-in-out infinite alternate;
    /* 애니메이션 적용 */
}

.measure_heart03 {
    position: relative;
    width: 70px;
    height: 70px;
    background: url(https://s1.unipware.com/AIcrush/images/ico_measure_heart03.svg) 50% 50% no-repeat;
    transition: opacity 0.5s ease;
}

.measure_heart03_blur {
    position: absolute;
    top: -5px;
    width: 85px;
    height: 85px;
    background: url(https://s1.unipware.com/AIcrush/images/ico_measure_heart03_blur.svg) 50% 50% no-repeat;
    background-size: cover;
    animation: pulse 0.8s ease-in-out infinite alternate;
    /* 애니메이션 적용 */
}

.hidden {
    opacity: 0;
}

.percent {
    position: absolute;
    color: var(--white-color);
    font-weight: 600;
    transform: translateX(-50%) translateY(-50%);
    top: 35%;
    left: 50%;
}

.btn_result {
    border: 2px solid var(--primary-color02);
    color: var(--primary-color02);
    padding: 8px 15px;
    border-radius: 50px;
    font-weight: 700;
}

.btn_result:after {
    display: block;
    width: 20px;
    height: 20px;
    content: "";
    background: url(https://s1.unipware.com/AIcrush/images/ico_arrow.svg) 50% 50% no-repeat;
    margin-left: 10px;
    animation: slideInFromLeft 0.5s ease-in-out infinite alternate;
    /* 애니메이션 적용 */
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        /* 처음에는 투명 */
    }

    100% {
        opacity: 1;
        /* 완전히 나타남 */
    }
}

.img_capture {
    width: 100%;
}

.img_capture>div {
    width: 100%;
    height: 250px;
    background: url(https://s1.unipware.com/AIcrush/images/img_measure.jpg) 50% 50% no-repeat;
    background-size: contain;
}




/* 결과 페이지 */
.wrap.result {
    overflow: hidden;
}

.percent_w .number {
    font-size: clamp(30px, 20vw, 70px);
    letter-spacing: -6px;
    color: var(--primary-color02);
    font-family: 'PlayfairDisplay', sans-serif;
}

.percent_w .symbol {
    font-size: clamp(15px, 20vw, 30px);
    color: var(--primary-color02);
    font-weight: 100;
    font-family: 'PlayfairDisplay', sans-serif;
}

.text {
    font-size: clamp(15px, 5vw, 16px);
    font-weight: 700;
}

.text.pink {
    color: var(--primary-color02);
}

.retry_save_w div {
    border: 2px solid var(--primary-color02);
    padding: 8px 15px;
    border-radius: 20px;
    color: var(--primary-color02);
    font-weight: 700;
    background: var(--white-color);
    font-size: clamp(14px, 2vw, 15px);
}

.retry_save_w div::before {
    display: block;
    width: 15px;
    height: 15px;
    content: "";
    margin-right: 8px;
    background-size: contain;
}

.retry_save_w div:not(:last-child) {
    margin-right: 20px;
}

.retry::before {
    background: url(https://s1.unipware.com/AIcrush/images/ico_retry.svg) 50% 50% no-repeat;
}

.save::before {
    background: url(https://s1.unipware.com/AIcrush/images/ico_save.svg) 50% 50% no-repeat;
}


.sns_area {
    margin: 0 auto;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
}

.sns_w div {
    display: block;
    width: 40px;
    height: 40px;
}

.kakao {
    background: url(https://s1.unipware.com/AIcrush/images/ico_kakao.svg) 50% 50% no-repeat;
    background-size: contain;
}

.facebook {
    background: url(https://s1.unipware.com/AIcrush/images/ico_facebook.svg) 50% 50% no-repeat;
    background-size: contain;
}

.x {
    background: url(https://s1.unipware.com/AIcrush/images/ico_x.svg) 50% 50% no-repeat;
    background-size: contain;
}

.instagram {
    background: url(https://s1.unipware.com/AIcrush/images/ico_instagram.svg) 50% 50% no-repeat;
    background-size: contain;
}

.sns_w div:not(:last-child) {
    margin-right: 20px;
}

.ico_result img {
    position: absolute;
    z-index: -1;
    animation: slideInFromLeft s ease-in-out infinite alternate;
}

.ico_result01 {
    width: 34px;
    top: 10%;
    left: 10%;
    animation: slideInFromLeft 0.5s ease-in-out infinite alternate;
}

.ico_result02 {
    width: 45px;
    top: 25%;
    right: 10%;
    animation: slideInFromLeft 1.5s ease-in-out infinite alternate;
}

.ico_result03 {
    width: 109px;
    left: 0;
    bottom: 35%;
    animation: slideInFromLeft 2s ease-in-out infinite alternate;
}

.ico_result04 {
    width: 167px;
    bottom: 12%;
    right: 0;
    animation: slideInFromLeft 1s ease-in-out infinite alternate;
}

.number.middle,
.symbol.middle,
.text.pink.pt-3.middle,
.text.pink.pb-4.middle {
    color: var(--middle-color);
}
.retry_save_w.middle div {
    border: 2px solid var(--middle-color);
    color: var(--middle-color);
}

.retry_save_w.middle .retry::before {
    background: url(https://s1.unipware.com/AIcrush/images/ico_retry_middle.svg) 50% 50% no-repeat;
}

.retry_save_w.middle .save::before {
    background: url(https://s1.unipware.com/AIcrush/images/ico_save_middle.svg) 50% 50% no-repeat;
}

.sns_w.middle .kakao {
    background: url(https://s1.unipware.com/AIcrush/images/ico_kakao_middle.svg) 50% 50% no-repeat;
    background-size: contain;
}

.sns_w.middle .facebook {
    background: url(https://s1.unipware.com/AIcrush/images/ico_facebook_middle.svg) 50% 50% no-repeat;
    background-size: contain;
}

.sns_w.middle .x {
    background: url(https://s1.unipware.com/AIcrush/images/ico_x_middle.svg) 50% 50% no-repeat;
    background-size: contain;
}

.sns_w.middle .instagram {
    background: url(https://s1.unipware.com/AIcrush/images/ico_instagram_middle.svg) 50% 50% no-repeat;
    background-size: contain;
}



.number.low,
.symbol.low,
.text.pink.pt-3.low,
.text.pink.pb-4.low {
    color: var(--dark-grey-color);
}


.retry_save_w.low div {
    border: 2px solid var(--dark-grey-color);
    color: var(--dark-grey-color);
}

.retry_save_w.low .retry::before {
    background: url(https://s1.unipware.com/AIcrush/images/ico_retry_low.svg) 50% 50% no-repeat;
}

.retry_save_w.low .save::before {
    background: url(https://s1.unipware.com/AIcrush/images/ico_save_low.svg) 50% 50% no-repeat;
}

.sns_w.low .kakao {
    background: url(https://s1.unipware.com/AIcrush/images/ico_kakao_low.svg) 50% 50% no-repeat;
    background-size: contain;
}

.sns_w.low .facebook {
    background: url(https://s1.unipware.com/AIcrush/images/ico_facebook_low.svg) 50% 50% no-repeat;
    background-size: contain;
}

.sns_w.low .x {
    background: url(https://s1.unipware.com/AIcrush/images/ico_x_low.svg) 50% 50% no-repeat;
    background-size: contain;
}

.sns_w.low .instagram {
    background: url(https://s1.unipware.com/AIcrush/images/ico_instagram_low.svg) 50% 50% no-repeat;
    background-size: contain;
}
















/* 미디어쿼리 */
@media (max-height:740px) {
    .wrap.result{
        overflow-y: scroll;
    }
    .sns_area {
        position: static;
        transform: translateX(0);
        padding: 20px;
    }
}
@media (max-width:740px) {
    .main_img img {
        margin:0
    }
}
@media (max-width:680px) {
    .slideshow-wrapper {
        width: 310px
    }
}
@media (max-width:568px) {
    .slideshow-wrapper {
        width:280px
    }
    .main_img img {
        width:280px;
    }
}
@media (max-width:320px) {
    .main_img img {
        width:260px; 
    }
}