/**
 * season's greeting > css > en
 * version : 251209
*/

/* 공통 */
.seasons-greeting__wrap img{width:100%;height:100%;object-fit:cover;}
.seasons-greeting__wrap button:hover{text-decoration:none;}
.seasons-greeting__visual{position:relative;width:100%;overflow:hidden;}
.seasons-greeting__visual video{width:100%;object-fit:cover;}
.seasons-greeting__scroll{display:flex;gap:5px;flex-direction:column;align-items:center;position:fixed;left:50%;bottom:60px;transform:translateX(-50%);font-size:22px;color:#fff;}
.seasons-greeting__scroll .scroll-icon{display:block;width:10px;height:10px;transform:rotate(135deg);border-top:2px solid #fff;border-right:2px solid #fff;animation:bounce 1s infinite;}
.seasons-greeting__inner{max-width:1120px;width:100%;height:auto;margin:0 auto;text-align:center;}

/* select */
.cmpnt-select a{display:block;width:100%;height:100%;}
.cmpnt-select img{width:100%;height:100%;object-fit:cover;}
.cmpnt-select__inner{max-width:1120px;width:100%;height:auto;margin:0 auto;padding:160px 0;}
.cmpnt-select__text{font-size:20px;letter-spacing:0.19px;text-align:center;}
.cmpnt-select__title{margin-bottom:24px;font-size:88px;line-height:1;font-family:'HyundaiMedium';}
.cmpnt-select__desc{line-height:1.5;}
.cmpnt-select__sub-title{margin:12px 0 42px 0;}
.cmpnt-select__cta{display:none}
.cmpnt-select__list{display:flex;flex-wrap:wrap;gap:20px;overflow:hidden;}
.cmpnt-select__item.swiper-slide{width:calc(25% - 15px);height:auto;}

/* write */
.seasons-greeting__write .seasons-greeting__inner{padding:136px 0;width:382px;height:auto;}
.seasons-greeting__card{width:100%;height:auto;aspect-ratio:91/121;}
.seasons-greeting__form{margin-top:35px;width:100%;height:auto;text-align:left;}
.seasons-greeting__form p{line-height:1;color:#666;}
#container .seasons-greeting__form input{padding:0;width:100%;height:42px;border-width:0 0 1px;border-radius:0;border-color:rgba(0,0,0,0.1);outline:none;font-size:20px;}
.seasons-greeting__form input::placeholder{color:rgba(0,0,0,0.2);}
.seasons-greeting__btn{display:flex;gap:10px;margin:30px 0;width:100%;}
.seasons-greeting__btn button{width:50%;height:57px;}
.seasons-greeting__btn button:disabled{background:#eceff2;color:#999;}
.seasons-greeting__btn .save-btn{background:#eceff2;color:#0000ff;}
.seasons-greeting__btn .share-btn{background:#0000ff;color:#fff;}
.seasons-greeting__reset{text-align:center;}
.seasons-greeting__reset button{text-decoration:underline;color:#666;}

/* preview */
.seasons-greeting__preview .seasons-greeting__inner{margin:0 auto;padding:168px 0 151px;max-width:546px;}
.seasons-greeting__preview-card{position:relative;}
.seasons-greeting__card-text{position:absolute;}
.seasons-greeting__card-text.bottomcenter{bottom:35px;left:50%;transform:translateX(-50%);}
.seasons-greeting__card-text.bottomleft{bottom:35px;left:35px;}
.seasons-greeting__card-text.bottomright{bottom:35px;right:35px;}
.seasons-greeting__card-text.middleright{top:53%;right:35px;left:auto;}
.seasons-greeting__card-text.black{color:#000;}
.seasons-greeting__card-text.white{color:#fff;}
.seasons-greeting__card-text.yellow{color:#f9e000;}
.seasons-greeting__preview .seasons-greeting__btn{flex-direction:column;}
.seasons-greeting__preview .seasons-greeting__btn button{width:100%;font-size:18px;}
.seasons-greeting__preview .seasons-greeting__btn .send-btn{background:#0000ff;color:#fff;}

/* popup */
.seasons-greeting__popup{display:none;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;bottom:0;z-index:21;}
.seasons-greeting__popup.open{display:flex;}
.seasons-greeting__popup img{width:24px;height:24px;}
.seasons-greeting__popup-inner{display:flex;justify-content:center;align-items:center;position:relative;background:#fff;z-index:9999;}
.seasons-greeting__popup-cont{padding:6px 46px;text-align:center;}
.seasons-greeting__popup-icon{display:flex;gap:24px;}
.seasons-greeting__icon{display:flex;flex-direction:column;justify-content:center;align-items:center;}
.seasons-greeting__icon > span{margin-top:8px;font-size:14px;color:#666;}
.seasons-greeting__icon .icon-bg{display:flex;justify-content:center;align-items:center;width:56px;height:56px;border-radius:50%;}
.seasons-greeting__icon .icon-bg.sms{background:#eceff2;}
.seasons-greeting__icon .icon-bg.email{background:#eceff2;}
.seasons-greeting__icon .icon-bg.kakao{background:#f9e000;}
.seasons-greeting__icon .icon-bg.whatsapp{background:#1acc60;}
.seasons-greeting__popup-close{position:absolute;}
.seasons-greeting__popup-close::before, .seasons-greeting__popup-close::after{content:'';display:block;position:absolute;left:0;height:2px;transform:rotate(45deg);background:#000;}
.seasons-greeting__popup-close::after{transform:rotate(-45deg);}
.seasons-greeting__popup-dim{position:fixed;top:0;width:100%;height:100%;background:rgba(0,0,0,0.3);}

@keyframes bounce {
    0%,to {
        transform: translateY(-35%) rotate(135deg);
        animation-timing-function: cubic-bezier(.8,0,1,1)
    }

    50% {
        transform: translateY(0) rotate(135deg);
        animation-timing-function: cubic-bezier(0,0,.2,1)
    }
}

/* pc */
@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    .br-pc{display:block;}
    .br-mo{display:none;}

    .seasons-greeting__visual video{min-height:100vh;}

    .cmpnt-select__list{overflow:visible;}
    .cmpnt-select__item:hover{transform:scale(1.05);transition:all 0.5s;}
    .cmpnt-select .swiper-fraction, .cmpnt-select .swiper-pagination{display:none;}

    .seasons-greeting__preview .seasons-greeting__btn{margin:28px 0 0 0;}
    .seasons-greeting__preview .seasons-greeting__btn button{height:57px;}

    .seasons-greeting__popup-inner{padding:56px 20px 20px;}
    .seasons-greeting__popup-title{padding-bottom:32px;font-size:22px;letter-spacing:-1px;}
    .seasons-greeting__icon.mobile{display:none;}
    .seasons-greeting__popup-close{top:20px;right:20px;width:20px;height:20px;}
    .seasons-greeting__popup-close::before, .seasons-greeting__popup-close::after{width:20px;top:10px;}
}

/* mobile */
@media screen and (min-width:0) and (max-width: 740px){
    body{overflow-x:hidden;}
    .mobile{overflow:visible;}
    .br-pc{display:none;}
    .br-mo{display:block;}
    .seasons-greeting__visual{max-width:100%;min-height:100svh;aspect-ratio:9 / 16;}
    .seasons-greeting__visual video{width:100%;height:100%;}
    .seasons-greeting__scroll{position:absolute;bottom:50px;font-size:16px;}

    .cmpnt-select__inner{overflow:hidden;padding:72px 15px 100px;}
    .cmpnt-select__text{font-size:16px;}
    .cmpnt-select__title{margin-bottom:20px;font-size:40px;}
    .cmpnt-select__desc{line-height:25.6px;}
    .cmpnt-select__sub-title{margin:10px 0 25px 0;}
    .cmpnt-select__swiper{margin:0 auto;position:relative;width:calc(100% - 80px);max-width:500px;}
    .cmpnt-select__list{flex-wrap:nowrap;overflow:visible;gap:0;}
    .cmpnt-select__item.swiper-slide{width:auto;height:auto;flex-shrink:0;}
    .cmpnt-select .swiper-fraction{display:block;position:absolute;left:auto;right:1px;bottom:-30px;color:#9a9a9a;line-height:1;letter-spacing:-1.5px;}
    .cmpnt-select .swiper-pagination{position:absolute;left:50%;bottom:-60px!important;}
    .cmpnt-select .swiper-pagination-bullet{background:#e4dcd3;opacity:1;}
    .cmpnt-select .swiper-pagination-bullet-active{background:#0000ff;}
    
    .seasons-greeting__write .seasons-greeting__inner{padding:87px 15px;width:100%;height:auto;}
    .seasons-greeting__form p{font-size:15px;}
    .seasons-greeting__form input{font-size:17px;}
    .seasons-greeting__reset button{font-size:16px;}

    .seasons-greeting__preview .seasons-greeting__inner{padding:95px 15px;width:100%;}
    .seasons-greeting__card-text.bottomcenter{bottom:26px;}
    .seasons-greeting__card-text.bottomleft{bottom:26px;left:26px;}
    .seasons-greeting__card-text.bottomright{bottom:26px;right:26px;}
    .seasons-greeting__card-text.middleright{right:26px;}
    .seasons-greeting__preview .seasons-greeting__btn{margin:20px 0 0 0;}
    .seasons-greeting__preview .seasons-greeting__btn button{height:51px;}

    .seasons-greeting__popup-inner{padding:50px 16px 32px;}
    .seasons-greeting__popup-cont{padding:0;}
    .seasons-greeting__popup-title{padding-bottom:30px;font-size:18px;}
    .seasons-greeting__icon.mobile{display:flex;}
    .seasons-greeting__icon.mobile img{width:22px;height:16px;}
    .seasons-greeting__popup-close{top:20px;right:15px;width:16px;height:16px;}
    .seasons-greeting__popup-close::before, .seasons-greeting__popup-close::after{width:16px;top:8px;}
}