@charset "UTF-8";

/************************  reset ************************/
@font-face {font-family: 'JNE-Bareun-TTF-Light'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-1@1.0/JNE-Bareun-TTF-Light.woff2') format('woff2'); font-weight: 200; font-style: normal;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0px; padding:0px; border:0; outline:0; vertical-align:baseline; background:transparent;}
div {margin:0px; padding:0px; border:0; outline:0; vertical-align:baseline; background:transparent;}
body{line-height:1; font-family: noto-sans-cjk-kr,'noto-sans-cjk-kr', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:#231e1e; font-size:12px; font-weight: 400; font-style: normal;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block; margin:0px; padding:0px;}
strong {font-weight: 700;font-family: noto-sans-cjk-kr,'noto-sans-cjk-kr', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }
button {border:none; background:none; cursor: pointer; padding: 0px; margin: 0px; color:#000000;}
a{margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; text-decoration:none; color:#000000;}
ul, ol {list-style:none;}
.good_hide {visibility:hidden; overflow: hidden; position: absolute; left:-10000px; height:1px; width:1px; text-indent: -10000px;}
table {border-collapse: collapse; border-spacing: 0;}
[type="radio"] {appearance: none;border-radius: 50%;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; outline: none;}
select::-ms-expand {display: none;}
input {outline: none;}
textarea {font-family: noto-sans-cjk-kr,'noto-sans-cjk-kr', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; outline: none; resize: none; border-radius: 0px;}
/************************ //reset ************************/


/* 전체 wrap */
.summer06-wrap {
    width: 100%;
    max-width: 720px;
    margin: auto;
}

.summer06-wrap * {
    box-sizing: border-box;
}

.summer06-wrap img {
    display: block;
    width: 100%;
}




/* 초기 커버 */
.summer06-cover {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,0%);
    width: 100%;
    z-index: 99;
    max-width: 720px;
}

.summer06-cover span {
    position: absolute;
    top: 35.5%;
    left: 54%;
    width: 17%;
    animation: hand 2s infinite;
}

@keyframes hand {
    0% {
        transform: translate(0px,0px);
    }
    100% {
        transform: translate(-100px,0px);
    }
}

/* 메인 swiper 설정 */
.mySwiper {
    height: 100vh;
    overflow: hidden;
}

/* 슬라이드 내 공통 */
.summer-parts {
    width: 100%;
    position: relative;
}

[class^="ico-"] {
    display: block;
    width: 100%;
}

.apng {
    position: absolute;
}

.apng-left {
    left: 10%;
    top: 30%;
    width: 100px;
}

.apng-right {
    right: 10%;
    top: 30%;
}

.apng-bottom {
    bottom: 31%;
    left: 50%;
    transform: translateX(-50%) rotate(358deg);
}

/* 각 슬라이드별 */
/*.summer-parts3 .parts3-swiper {*/
/*    position: absolute;*/
/*    top: 60%;*/
/*    left: 6%;*/
/*    width: 83%;*/
/*}*/

.summer-parts3 .parts3-swiper {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translateX(-50%);
    width: 77%;
}

.summer-parts3 .letter-bottom {
    position: absolute;
    bottom: 4%;
    right: 12%;
    width: 60%;
}

.summer-parts3 .parts3-swiper-cover {
    border-radius: 14px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 2;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

.summer-parts3 .cover-img {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
}

.summer-parts3 .cover-img::before {
    content: '';
    margin: 0 auto 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: 82px;
    background: url("/assets/images/magazine/202506/sum_slide05_arrow.png") no-repeat center/100% 100%;
    animation: slideArrow 0.8s ease-in-out infinite;
}

@keyframes slideArrow {
    0% {
        transform: translateX(-20px);
    }
    50% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(-20px);
    }
}



.summer-parts4 .part4-gif {
    position: absolute;
    top: 16%;
    left: 6%;
    width: 85%;
}

.summer-parts4 .parts4-swiper {
    position: absolute;
    top: 60%;
    left: 6%;
    width: 85%;
}

.summer-parts5 .parts5-swiper {
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translateX(-50%);
    width: 87%;
}

.summer-parts8 .parts8-swiper {
    position: absolute;
    top: 40%;
    left: 6%;
    width: 88%;
}

.summer-parts9 .parts9-swiper {
    position: absolute;
    top: 65%;
    left: 6%;
    width: 88%;
}

.summer-parts10 .g1 {
    background: #f3b462;
    position: absolute;
    bottom: 30.3%;
    left: 33.1%;
    width: 8%;
    border-radius: 8px 8px 0px 0px;
}

.summer-parts10 .g1.on {
    animation: up1 1s forwards;
}

.summer-parts10 .g2 {
    background: #fca12a;
    position: absolute;
    bottom: 30.3%;
    right: 33.6%;
    width: 8%;
    border-radius: 8px 8px 0px 0px;
}

.summer-parts10 .g2.on {
    animation: up2 1s forwards 0.5s;
}

@keyframes up1 {
    0% {
        height: 0%;
    }
    100% {
        height: 6.5%;
    }
}

@keyframes up2 {
    0% {
        height: 0%;
    }
    100% {
        height: 9.3%;
    }
}

.summer-parts11 .parts11-swiper {
    position: absolute;
    top: 44%;
    left: 6%;
    width: 88%;
}

.summer-parts12 .parts12-swiper {
    position: absolute;
    top: 59%;
    left: 6%;
    width: 88%;
}

.summer-parts13 .parts13-swiper {
    position: absolute;
    top: 44.9%;
    left: 7%;
    width: 86%;
}

.summer-parts15 .parts15-swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.summer-parts15 .parts15-swiper .txt {
    position: absolute;
    width: 75%;
}

.summer-parts15 .parts15-swiper .txt01 {
    left: 6%;
    top: 63%;
    opacity: 0;
}

.summer-parts15 .parts15-swiper .txt01.on {
    animation: txtAni 1s forwards 0.2s
}

.summer-parts15 .parts15-swiper .txt02 {
    left: 6%;
    top: 65%;
    opacity: 0;
}

.summer-parts15 .parts15-swiper .txt02.on {
    animation: txtAni 1s forwards 0.2s
}

.summer-parts15 .parts15-swiper .txt03 {
    left: 50%;
    transform: translateX(-50%);
    top: 59%;
    opacity: 0;
}

.summer-parts15 .parts15-swiper .txt03.on {
    animation: txtAni2 1s forwards 0.2s
}

.summer-parts15 .parts15-swiper .swiper-button-prev:after , .summer-parts15 .parts15-swiper .swiper-button-next:after {
    color: #ffffff;
}

.summer-parts15 .bottom {
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

.summer-parts15 .quick-bottom02 {
    display: block;
    width: 86%;
    position: absolute;
    /*top: 85%;*/
    bottom: 8%;
}

.summer-parts15 .bottom02 {
    position: absolute;
    width: 72%;
    top: 73%;
    transform: translate(-50%, -20px);
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.summer-parts15 .bottom02.on {
    display: block !important;
    transform: translate(-50%, 0);
    animation: opa 0.7s ease-in, bottom02ani 1.2s ease-in-out 0.4s infinite;
}

@keyframes opa {
    0% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

@keyframes bottom02ani {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -12px);
    }
}

@keyframes txtAni {
    0% {
        opacity: 0;
        transform: translate(0%,30px);
    }

    100% {
        opacity: 1;
        transform: translate(0%,0px);
    }
}

@keyframes txtAni2 {
    0% {
        opacity: 0;
        transform: translate(-50%,30px);
    }

    100% {
        opacity: 1;
        transform: translate(-50%,0px);
    }
}

.area-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.left-center {
    left: 50%;
    transform: translateX(-50%);
}

.summer-parts16 .txt-area {
    width: 75%;
    position: absolute;
    top: 27%;
}

.summer-parts16 .face-area {
    margin: 0 auto;
    width: 55%;
    position: absolute;
    top: 45%;
}

.summer-parts16 .btn-area {
    width: 80%;
    margin: 0 auto;
    position: absolute;
    bottom: 50px;
}

.summer-parts16 .ico-smile {
    display: block;
    position: absolute;
    right: 7%;
    top: -14px;
    width: 15%;
}

.summer-parts17 .btn-app {
    position: absolute;
    width: 50%;
    left: 6%;
}

.summer-parts17 .btn-app.btn-app01 {
    top: 75.5%;
    height: 95px;
}

@media (max-width: 720px) {
    .summer-parts17 .btn-app.btn-app01 {
        height: auto;
    }
}

.summer-parts17 .btn-app.btn-app02 {
    top: 83.5%;
}

.ico-smile {
    display: inline-block;
    animation: faceShake 2s ease-in-out infinite;
    transform-origin: center bottom;
}

.ico-smile img {
    display: block;
    max-width: 100%;
    height: auto;
}

@keyframes faceShake {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(-8deg);
    }
    30% {
        transform: rotate(6deg);
    }
    45% {
        transform: rotate(-4deg);
    }
    60% {
        transform: rotate(2deg);
    }
    75% {
        transform: rotate(-1deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    color: #b2b2b2;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    color: #b2b2b2;
}

/* 디버깅용 */
.none {
    display: none;
}