/* 전체 화면 템플레이트 */
.body__template {
    display: flex;
    justify-content: center;
    background-color: #ffffff;

    overflow-x: hidden;
    overflow-y: hidden;
}
.body__template.landing {
    height: calc(var(--vh, 1vh) * 100);
}
/*--------------------------------------------------*/

/* 고정 화면 프레임 - 링크서비스 메인 로고 영역 */
/* .body__frame .img__logo {
    width:100px;
    height:40px;
    margin-top:52px;
    margin-left:40px;
} */

/*--------------------------------------------------*/
/* 고정 화면 프레임 - 링크서비스 이미지 영역 */

.body__frame .frame__img .img_frame_background {
    position: absolute;
    top: 0;
    left: 19px;
    width: 230px;
    height: 254px;
}

.body__frame .frame__img .img_frame_background .img_frame_3d {
    position: absolute;
    top: 99px;
    left: 0;
    width: 150px;
    height: 150px;
}

.body__frame .frame__img .img_frame_background .img_frame_heart {
    position: absolute;
    top: 4.03px;
    left: 119.99px;

    width: 75.79px;
    height: 75.79px;
    transform: rotate -9.5 deg;
}

.body__frame .frame__img .img_frame_heart {
    position: absolute;
    top: 4.03px;
    left: 119.99px;

    width: 75.79px;
    height: 75.79px;
    transform: rotate -9.5 deg;
}

.body__frame .frame__img .img_frame_link {
    position: absolute;
    top: 88px;
    left: 157.84px;

    width: 60.26px;
    height: 60.26px;
    transform: rotate -6.09 deg;
}

.body__frame .frame__img .img_frame_paint {
    position: absolute;
    top: 145px;
    left: 103px;

    width: 50px;
    height: 50px;
    transform: rotate -3.33 deg;
}

.body__frame .frame__img .img_frame_shadow {
    position: absolute;
    top: 231px;
    left: 132px;

    width: 90px;
    height: 26px;
}

/*--------------------------------------------------*/

.animation_heart {
    animation: 5s linear alternate forwards running animation_heart;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

@keyframes animation_heart {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-7px);
    }
    50% {
        transform: translateY(7px);
    }
    75% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(-5px);
    }
}

.animation_link {
    animation: 5s linear alternate forwards running animation_link;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

@keyframes animation_link {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(4px);
    }
    50% {
        transform: translateY(-5px);
    }
    75% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(6px);
    }
}

.animation_paint {
    animation: 5s linear alternate forwards running animation_paint;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

@keyframes animation_paint {
    0% {
        transform: translateY(0px);
    }
    25% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(2px);
    }
    75% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(-1px);
    }
}

.animation_shadow {
    animation: 5s linear alternate forwards running animation_shadow;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

@keyframes animation_shadow {
    0% {
        width: 106px;
        height: 26px;
    }
    25% {
        width: 90px;
        height: 20px;
    }
    50% {
        width: 106px;
        height: 26px;
    }
    75% {
        width: 118px;
        height: 32px;
    }
    100% {
        width: 109px;
        height: 26px;
    }
}

/*--------------------------------------------------*/

/* 고정 화면 프레임 - 링크서비서 정보 영역 */

.body__template.landing {
    height: calc(var(--vh, 1vh) * 100);
}

.body__frame .frame__logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - 724px);
    min-height: 175px;
    row-gap: 12px;
}

.frame__logo.min-height {
    display: block;
    min-height: 35px;
    margin-top: 60px;
}

.body__frame .frame__icon {
    display: flex;
}

.body__frame .frame__icon img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.body__frame .frame__info .info__header p {
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.025em;
    text-align: left;
    color: #191f28;
}

.body__frame .frame__info .info__body {
    display: flex;
    align-items: center;
    margin-top: 1px;
}

.body__frame .frame__info .info__body img {
    width: 20px;
    height: 20px;
}

.body__frame .frame__info .info__body .row {
    display: flex;
    align-items: center;
}

.body__frame .frame__info .info__body .bold {
    margin-right: 4px;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.025em;
    text-align: left;
    color: #191f28;
}

.body__frame .frame__info .info__body .desc {
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.025em;
    text-align: left;
    color: #76808f;
}

/*==================================================*/

/* 화면 표시 영역  */
.body__template .body {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: all;
    height: calc(var(--vh, 1vh) * 100);
}

.body__template::-webkit-scrollbar {
    width: 0;
}
.body__template .body::-webkit-scrollbar {
    width: 0;
}

.body__template .body__frame {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: sticky;
    width: 526px;
    background-color: #ffffff;
}

.body__template .body .container__body {
    overflow-x: hidden;
    overflow-y: overlay;
}

.body__template .body .container .container__body {
    height: calc((var(--vh, 1vh) * 100) - 82px);
}
.frame__img {
    width: 443px;
    height: 513px;
}
/*--------------------------------------------------*/

/* 600px 미만 모바일웹 화면 */
@media (orientation: Portrait) and (max-width: 599px) {
    .body__template .body__frame {
        display: none;
    }

    .body__template .body {
        width: 100vw;
        overflow-y: auto;
    }

    .body__template .body .container {
        width: 100vw;
    }

    .body__template .body .container .container__tab {
        width: 100vw;
    }

    .body__template .body .container .container__body {
        width: 100vw;
    }

    .body__template .body .swiper.preview {
        height: calc((var(--vh, 1vh) * 100) - 128px);
    }

    .body__template .body .container .container__footer {
        width: 100vw;
        max-width: 100vw;
        height: auto;
    }
}

/*--------------------------------------------------*/

/* 600px 이상 1024px 이하 모바일웹 화면 */
@media all and (min-width: 600px) and (max-width: 1024px) {
    .body__template .body__frame {
        display: none;
    }

    .body__template .body {
        width: 390px;
        box-shadow: 0px 0px 100px 0px #7591b54d;
        overflow-y: auto;
    }

    .body__template .body .container {
        width: 390px;
    }

    .body__template .body .container .container__tab {
        width: 390px;
    }

    .body__template .body .container .container__body {
        width: 390px;
    }

    .body__template .body .container .container__footer {
        width: 390px;
    }

    .sidebar {
        width: 390px;
        max-width: 390px;
    }
}

/*--------------------------------------------------*/

/* 1025px 이상 PC웹 화면 */
@media (orientation: Portrait) and (min-width: 1025px) {
    .body__template .body {
        width: 390px;
        box-shadow: 0px 0px 100px 0px #7591b54d;
        overflow-y: auto;
    }

    .body__template.landing {
        overflow-y: scroll;
    }

    .body__template .body .container {
        width: 390px;
        overflow-y: hidden;
    }

    .body__template .body .container .container__tab {
        width: 390px;
    }

    .body__template .body .container .container__body {
        width: 390px;
    }

    .body__template .body .container .container__footer {
        width: 390px;
    }

    .sidebar {
        width: 390px;
        max-width: 390px;
    }
}

/*--------------------------------------------------*/

/* 1025px 이상 모바일웹 가로보기*/
@media (orientation: Landscape) and (min-width: 1025px) {
    .body__template .body {
        width: 390px;
        box-shadow: 0px 0px 150px 0px rgba(125, 140, 163, 0.15);
        overflow-y: auto;
    }

    .body__template .body .container {
        width: 390px;
        overflow-y: hidden;
    }

    .body__template .body .container .container__tab {
        width: 390px;
    }

    .body__template .body .container .container__body {
        width: 390px;
    }
    /* 
    .body__template .body .container .container__footer {
        width:390px;
    } */

    .sidebar {
        width: 390px;
        max-width: 390px;
    }
}

@media all and (max-height: 650px) and (max-width: 1024px) {
    .body__template .body__frame {
        display: none;
    }
}

@media all and (max-height: 650px) and (min-width: 1025px) {
    .body__template .body__frame {
        display: block;
        width: 526px;
        max-width: 526px;
        height: 100vh;
        background-color: #ffffff;
    }
}
@media all and (max-height: 900px) and (min-width: 1025px) {
    .body__template {
        overflow-y: scroll;
    }
    .frame__img {
        width: calc(443rem / 16);
        height: calc(513rem / 16);
    }
}