@charset "UTF-8";

/* common */
.section {position:relative;padding:80px 0;}
.main {overflow: hidden;width: 100%;}
.inner {padding: 0 40px;}
.section h2 img {margin-bottom:40px;}
img {vertical-align: bottom; max-width:100%;}
#btnApply { z-index:3; }
#btnApply .apply-btn {width:315px;background:url(https://og.kakaobank.io/view/2f0a44ae-5f8d-483b-becb-ad5452b55cfd) no-repeat top 14px center / 153px  38px;background-color:#FD963F;}

/* section1 - main */
#section1 {position:relative;background:#FFEACB;padding-top:0;}
#section1 .top-title {margin:35px 0 24px;}
#section1 .top-title h3 {font-size: 0;letter-spacing: 0;word-spacing: 0;}
#section1 .top-title .modu {width:108px;}
#section1 .top-title .season {width:35px;}
#section1 .title .sub-tit {width: 154px;margin-left:3px;}
#section1 .title .main-tit {width: 217px;margin-top: -5px;}
#section1 .title .date {width: 97px;margin-left:3px;}
#section1 .sub-script {position:absolute;bottom:0;left:0;width:100%;text-align: center;}
#section1 .sub-script img {width:231px;}
#section1 .main-visual {position:relative;height:454px;height:530px;margin-top:-70px;}
#section1 .main-visual span {display: inline-block;position:absolute;}
#section1 .main-visual .cloud1 {/*top: 190px;*/bottom:218px;left: 24px;width:81px; height:51px; background:url(https://og.kakaobank.io/view/0b121d5b-a19b-4365-9154-7d2d7ee3f5a0) no-repeat center / 81px 51px;}
#section1 .main-visual .cloud2 {/*top: -60px;*/bottom:463px;right: -8px;width:108px; height:64px; background:url(https://og.kakaobank.io/view/abb7739a-33c9-4213-ad23-137e985a805a) no-repeat center / 108px 64px;}
#section1 .main-visual .sun {/*top: 19px;*/bottom:244px;left: 38px;width: 195px; height:197px; background:url(https://og.kakaobank.io/view/a52b3779-1154-45bd-a8f9-b48a499def91) no-repeat center / 195px 197px;}
#section1 .main-visual .mountain {bottom:42px;left:50%;transform:translateX(-50%);width: 554px; height:195px; background:url(https://og.kakaobank.io/view/aae1a975-a359-44d8-a18d-90301dd7180b) no-repeat center / 554px 195px;}
#section1 .main-visual .chunsik {/*top: 3px;*/bottom:155px;right: -32px;width:296px; height:300px; background:url(https://og.kakaobank.io/view/38fcb3be-4b77-424f-9f2b-e674e0e12353) no-repeat center / 296px 300px;}
#section1 .main-visual .chunsik {background: url(https://og.kakaobank.io/view/fafb014b-e155-4de8-a3e4-94bcd18ea9c1) no-repeat 0 0 / 2400px 300px; animation: sequence 0.8s infinite steps(8)}

#section1 .main-visual .cloud1 {animation: floatCloud 3s 1s infinite alternate;}
#section1 .main-visual .cloud2 {animation: floatCloud2 3s 1s infinite alternate;}
#section1 .main-visual .sun {opacity:0; animation: riseUp 1.5s 0s cubic-bezier(0.58, 0.38, 0.56, 0.97) 1 forwards; }
#section1 .main-visual .sun {opacity:0; animation: riseUp 1.5s 0s cubic-bezier(0.37, -0.14, 0.39, 1.22) 1 forwards; }
@keyframes sequence {
    0% {background-position:0 0;}
    100% {background-position: -2400px 0 ;}
}

@keyframes riseUp {
    0% {opacity:0; transform: translateY(100px)}
    100% {opacity:1; transform: translateY(0)}
}
@keyframes floatCloud{
  100% {transform: translateY(14px)}
}
@keyframes floatCloud2{
    100% {transform: translateY(-14px)}
}


/* section2 */
#section2 h2 img {width: 287px}
#section2 article {position:relative;margin-top:2px;}
#section2 .deco-chunsik {position:absolute; top:0;left:33px;padding-left: 10px; padding-right: 10px;transform: scale(0.95);}
#section2 .deco-chunsik::before{content: ''; width: 45px; height: 20px; background-color: #FFD17C; z-index: -1; position: absolute; top: 40px; right: 19px;}
#section2 .deco-chunsik .face {position: relative;z-index: 2;display: inline-block;width: 60.5px;height: 52.5px;background:url(https://og.kakaobank.io/view/b6cec1d0-4c4a-4bb8-b1c1-e1ac274389c4) no-repeat center / 60.5px 52.5px;}
#section2 .deco-chunsik .arm-l {position: absolute;z-index: 1;left: 0;bottom:0;display: inline-block;width: 23px;height:30px;background:url(https://og.kakaobank.io/view/289961f2-09ab-4a10-92cb-3a65fa8005a7) no-repeat center / 23px 30px;}
#section2 .deco-chunsik .arm-r {position:absolute;z-index: 1;right:0;bottom:0;display: inline-block;width: 23px;height:29px;background:url(https://og.kakaobank.io/view/ec89c28a-356b-4bfe-a974-64fa2f73f26e) no-repeat center / 23px 29px;}

#section2 .draw-list {position: relative;padding-top: 48px;z-index: 2;}
#section2 .draw-list img {vertical-align: middle;}
#section2 .draw-list li {margin-top:15px;}
#section2 .draw-list li:first-child {margin-top:0;}

#section2 .draw-list dt {display: inline-block;width:140px;height:78px;background-color:#FA7519;background-position: center;background-repeat: no-repeat;border-radius: 16px;vertical-align: middle;}
#section2 .draw-list dd {display: inline-block;margin-left:18px;height: 78px;line-height: 78px;vertical-align: middle;}
#section2 .draw-list .comp1 dt {background-image: url(https://og.kakaobank.io/view/d5a2ce59-1469-4cee-aa6d-8058916b8e76);background-size:104px auto;}
#section2 .draw-list .comp1 dd img {width: 72px;}
#section2 .draw-list .comp2 dt {background-image: url(https://og.kakaobank.io/view/fb3defae-1149-413a-8928-0c8b8fe96d95);background-size:90px auto;}
#section2 .draw-list .comp2 dd img {width: 85px;}
#section2 .draw-list .comp3 dt {background-image: url(https://og.kakaobank.io/view/efcbaaa1-318a-4fd3-9fcb-9b02c5e9336e);background-size:77px auto;}
#section2 .draw-list .comp3 dd img {width: 95px;}



#section2 .deco-chunsik .face {
    animation: chunsikFace 1.5s 0s infinite ease-in reverse;
}
#section2 .deco-chunsik .arm-l {
    transform-origin: right center;
    animation: chunsikArmL 1.5s 0s infinite ease-in reverse;
}
#section2 .deco-chunsik .arm-r {
    transform-origin: left center;
    animation: chunsikArmR 1.5s 0s infinite ease-in reverse;
}
@keyframes chunsikFace {
    50% {transform: translateY(-2px)}
}
@keyframes chunsikArmL {
    50% {transform: rotate(-20deg)}
}
@keyframes chunsikArmR {
    50% {transform: rotate(20deg)}
}

/* section3 */
#section3 {background:#FFEACB;}
#section3 h2 img {width:246px;}
#section3 h2 .deco-pocket {width:41px; height:45.5px;background:url(https://og.kakaobank.io/view/bbbdb0b2-3688-4624-83b1-ad4efd0efa85) no-repeat center / 41px 45.5px;margin-bottom:22.5px;transform: rotate(-10deg);
animation: aniRotate 1s 0s infinite ease-in-out alternate; transform-origin: bottom center;}
#section3 li img {vertical-align: bottom; width: 295px;}
#section3 .card-motion {position:relative;margin-top:48px;}
#section3 .wrap-card {position: absolute;left: 15%; bottom: 12.5%;width: 70%;display: flex;justify-content: space-between;}
#section3 .wrap-card img {width: 32%;}
#section3 .wrap-card img:first-of-type {margin-right:auto;}
#section3 .wrap-card img:last-of-type {margin-left:auto}

#section3 .play-inmotion .wrap-card img:nth-of-type(1) {
    animation: aniScale 1.8s 0s ease-in 1;
    transform-origin: bottom right;
}
#section3 .play-inmotion .wrap-card img:nth-of-type(2) {
    animation: aniScale 1.8s 1.8s ease-in 1;
    transform-origin: bottom center;
    position:relative;
    z-index: 2;
}
#section3 .play-inmotion .wrap-card img:nth-of-type(3) {
    animation: aniScale 1.8s 3.6s ease-in 1;
    transform-origin: bottom left;
}

@keyframes aniRotate {
    0% {transform: rotate(0deg)}
    100% {transform: rotate(10deg)}
}
@keyframes aniScale {
    0% {transform:scale(1)}
    15% {transform:scale(2.03);}
    85% {transform:scale(2.03)}
    100% {transform:scale(1);}
}

.inner.wrap-hr {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.hr {
    display: inline-block;
    width:100%;
    height:2.3px;
    background:#061922;
    opacity: 0.2;
}

/* section4 */
#section4 {background:#FFEACB;}
.theme-default #section4 #share {background:none;}
#section4 h2 img {width: 213px; vertical-align: bottom;}
#section4 .gift-image {vertical-align: bottom; margin-bottom:60px;width:295px;}


/* popup */
.popups .modal-content {padding:14px;}
.popups .copy {font-size:20px;}
.popups .okay-btn .btn-ok {
    background: #FA7519;
}

.info-tit{
    margin-bottom:40px
}


@media screen and (max-width: 375px) {
    #section1 .main-visual .cloud2 {
        bottom:436px;
        width: 92px;
        height: 55px;
        background-size: 92px 55px;
    }
    #section2 .draw-list dt {
        width: 140px;
    }
}
@media screen and (max-width: 360px) {
    .inner {padding: 0 10%;}
    #btnApply .apply-btn {width:268px;background-size: 131px 32px;background-position: top 16px center;}
}
@media screen and (max-width: 320px) {
    .inner {padding: 0 22px;}
}