html,body {
    background-color: #F6F6F6;
    width: 100%;
    overflow-x: hidden;
}

.main {
    overflow: hidden;
}

.top-section {
    position: relative;
    padding: 30px 0 55px;
}

.top-section .visual-wrapper {
    position: relative;
    height: 414px;
    max-width: 375px;
    margin: 0 auto;
}

.top-section .date {
    position: absolute;
    top: 30px;
    right: 23px;
    width: 95px;
    height: 15px;
    background: url("https://og.kakaobank.io/view/1d9bbcca-c171-44fc-b61e-8c80b3a3dc74") no-repeat;
    background-size: contain;
}

.top-section .sun {
    display: block;
    position: absolute;
    width: 256px;
    height: 256px;
    background: url("https://og.kakaobank.io/view/7c989e84-ffc0-462d-85a8-85c3171be10d") no-repeat;
    background-size: contain;
    bottom: -30px;
    left: -24px;
    opacity: 0.3;

}

.top-section .cloud1 {
    display: block;
    position: absolute;
    bottom: 50px;
    right: -40px;
    width: 202px;
    height: 130px;
    background: url("https://og.kakaobank.io/view/e04062aa-54a1-4d23-a7cb-6f7dcf79f88c") no-repeat;
    background-size: contain;

}

.top-section .cloud1::before {
    content: '';
    position: absolute;
    top: 44px;
    left: 1px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    width: 84px;
    height: 84px;
    border-radius: 65px;
}



.top-section .cloud1::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 45px;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    width: 112px;
    height: 113px;
    border-radius: 81px
}



.top-section .cloud2 {
    display: block;
    position: absolute;
    bottom: 0;
    left: -66px;
    width: 157px;
    height: 101px;
    background: url("https://og.kakaobank.io/view/e4dbfbd2-dd85-4255-9e96-c9e41afc7dba") no-repeat;
    background-size: contain;

}

.rising .top-section .sun {
    -webkit-animation: sunrise 1s forwards;
    animation: sunrise 1s forwards;
}

.rising .top-section .cloud1 {
    -webkit-animation: cloudrise1 .9s forwards .2s;
    animation: cloudrise1 .9s forwards .2s;
}

.rising .top-section .cloud2 {
    -webkit-animation: cloudrise2 .7s forwards .2s;
    animation: cloudrise2 .7s forwards .2s;
}



.rised .top-section .sun {
    left: 24px;
    bottom: 120px;
    opacity: 1;
}

.rised .top-section .cloud1 {
    bottom: 140px;
}

.rised .top-section .cloud2 {
    bottom: 65px;
}



.rised .top-section .cloud1 {
    -webkit-animation: dongsil1 1.9s ease-in-out infinite ;
    animation: dongsil1 1.9s ease-in-out infinite ;

}

.rised .top-section .cloud2 {
    -webkit-animation: dongsil2 1.7s ease-in-out infinite;
    animation: dongsil2 1.7s ease-in-out infinite;

}

.rised .top-section.ver2 .cloud1 {
    -webkit-animation: dongsil1 1.9s ease-in-out infinite ;
    animation: dongsil1 1.9s ease-in-out infinite ;

}

.rised .top-section.ver2 .cloud2 {
    -webkit-animation: dongsil2 2.2s ease-in-out infinite;
    animation: dongsil2 2.2s ease-in-out infinite;

}



@-webkit-keyframes sunrise {
    0% {
        bottom: -30px;
        left: -24px;
        opacity: 0.3;
    }

    100% {
        left: 24px;
        bottom: 120px;
        opacity: 1;
    }
}



@keyframes sunrise {
    0% {
        bottom: -30px;
        left: -24px;
        opacity: 0.3;
    }

    100% {
        left: 24px;
        bottom: 120px;
        opacity: 1;
    }
}

@-webkit-keyframes cloudrise1 {
    0% {
        bottom: 50px;
    }

    100% {
        bottom: 140px;
    }
}

@keyframes cloudrise1 {
    0% {
        bottom: 50px;
    }

    100% {
        bottom: 140px;
    }
}

@-webkit-keyframes cloudrise2 {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 65px;
    }
}

@keyframes cloudrise2 {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 65px;
    }
}

@-webkit-keyframes dongsil {
    0% {
        bottom: 120px;
    }

    51% {
        bottom: 110px;
    }

    100% {
        bottom: 120px;
    }
}

@keyframes dongsil {
    0% {
        bottom: 120px;
    }

    51% {
        bottom: 110px;
    }

    100% {
        bottom: 120px;
    }
}

@-webkit-keyframes dongsil1 {
    0% {
        bottom: 140px;
    }

    31% {
        bottom: 135px;
    }

    100% {
        bottom: 140px;
    }
}

@keyframes dongsil1 {
    0% {
        bottom: 140px;
    }

    31% {
        bottom: 135px;
    }

    100% {
        bottom: 140px;
    }
}

@-webkit-keyframes dongsil2 {
    0% {
        left: -66px;
        bottom: 65px;
    }

    51% {
        bottom: 68px;
    }

    100% {
        left: -66px;
        bottom: 65px;
    }
}

@keyframes dongsil2 {
    0% {
        left: -66px;
        bottom: 65px;
    }

    51% {
        bottom: 68px;
    }

    100% {
        left: -66px;
        bottom: 65px;
    }
}

.top-section .cloud2::after {
    content: '';
    position: absolute;
    top: 25px;
    left: 81px;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    width: 75px;
    height: 75px;
    border-radius: 63.25px
}

.top-section .ryan {
    display: block;
    position: absolute;
    top: 169px;
    left: 50%;
    margin-left: -169px;
    width: 328px;
    height: 279px;
    background: url("https://og.kakaobank.io/view/216260ce-5fc1-411c-b87f-07db88de3ea8") no-repeat;
    background-size: contain;

}

.top-section .ryan::before {
    position: absolute;
    display: block;
    z-index: -1;
    top: 165px;
    left: -100px;
    content: '';
    width: 331px;
    height: 96px;
    background: linear-gradient(0deg, #F6F6F6 10.37%, rgba(255, 255, 255, 0) 103.85%);
}

.top-section .goodmorning {
    position: absolute;
    width: 100%;
    left: 75px;
    top: 120px;
}

.top-section .goodmorning .img-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    padding-bottom: 220px;

}

.rising .top-section .goodmorning .img-wrapper {
    -webkit-animation: rotate 1.4s .2s forwards;
            animation: rotate 1.4s .2s forwards;
}

.goodmorning .img-wrapper {
    content: '';
    display: block;
    width: 241.5px;
    height: 90px;
    background: url("https://og.kakaobank.io/view/e4dc8db7-7b60-493c-a91b-c35e5824079d") no-repeat;
    background-size: contain;
}



@-webkit-keyframes rotate {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    80% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
    }
}



@keyframes rotate {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    80% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: rotate(360deg);
    }
}

/* 
@-moz-keyframes rotate {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0);
    }
}

@-ms-keyframes rotate {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0);
    }
}

@-o-keyframes rotate {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(0);
    }
} 
 */

.top-section .title {
    display: block;
    text-indent: -999em;
    width: 279px;
    height: 215.5px;
    background: url("https://og.kakaobank.io/view/bd1658a0-de0e-4aab-93cb-7de150670276") no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.section .inner {
    max-width: 375px;
    position: relative;
    margin: 0 auto;
}

.part1 {
    position: relative;
    padding: 0 0 43px;
}

.part2, .part3, .part4 {
    position: relative;
    padding: 50px 0;
}

.part5 {
    background-color: #E4EAF4;
    padding: 58px 0 64px;
}

.part1 .text-wrapper {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 314px;
    height: 319px;
    background: url("https://og.kakaobank.io/view/5ccb9c2a-b4c1-4c08-893e-0a0533584861") no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.part1 .text-wrapper:after {
    position: absolute;
    top: 205px;
    left: 129.5px;
    display: block;
    content: '';
    width: 13px;
    height: 30px;
    background: url("https://og.kakaobank.io/view/bf4374de-5934-4709-841f-5c8079bb17f3") no-repeat;
    background-size: contain;
    margin: 0 auto;
    -webkit-animation: twinkle 1s infinite;
    animation: twinkle 1s infinite;
}

@-webkit-keyframes twinkle {
    0% {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }

    65% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

.part2 .text-wrapper {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 267px;
    height: 113.5px;
    background: url("https://og.kakaobank.io/view/128176d5-e0a8-46ac-a9a3-6c5964c3920d") no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.part3 .text-wrapper {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 260.5px;
    height: 120px;
    background: url("https://og.kakaobank.io/view/956458bd-493c-486f-b0ba-f279d1c7a8e2") no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.part4 .text-wrapper {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 269.5px;
    height: 120px;
    background: url("https://og.kakaobank.io/view/43fb8265-4160-4415-a2b5-f665c1e0841e") no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.part2 .image-wrapper {
    position: relative;
    max-width: 440px;
}

.part3 .image-wrapper {    display: block;
    padding: 14px 0;
    width: 336px;
    overflow: hidden;
    margin: 0 auto;
}

.part4 .image-wrapper {    display: block;
    width: 324px;
    padding: 36px 0 0;
    margin: 0 auto;
}



.part2 .sub-txt {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 288.5px;
    height: 23px;
    background: url("https://og.kakaobank.io/view/9f2f8f79-097c-4697-aa5c-131db891eb43") no-repeat;
    background-size: contain;
    margin: 41px auto 0;
}
.part3 .sub-txt {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 187px;
    height: 46px;
    background: url("https://og.kakaobank.io/view/1e8133d2-0680-4263-9a4e-6fea6da3d090") no-repeat;
    background-size: contain;
    margin: 23px auto 0;
}

.part4 .sub-txt {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 237.5px;
    height: 36.5px;
    background: url("https://og.kakaobank.io/view/b6fe9ee4-ea1f-490e-beeb-228c2e97d321") no-repeat;
    background-size: contain;
    margin: 39px auto;
}

.part2 .image-wrapper .weeks {
    display: block;
    position: absolute;
    top: 52px;
    left: 50%;
    margin-left: -220px;
    width: 453px;
    height: 54.5px;
    overflow: hidden;

}

.part2 .image-wrapper .weeks:after {
    position: absolute;
    content: '';
    display: block;
    width: 453px;
    height: 54.5px;
    background: url("https://og.kakaobank.io/view/762b2d60-69c4-4839-8470-b4d863531dcf");
    background-size: contain;
    -webkit-animation: slide 20s linear infinite;
    animation: slide 20s linear infinite;
}


@keyframes slide {
    0% {
        background-position: 444px 0px
    }

    100% {
        background-position: 0 0px
    }
}

@-webkit-keyframes slide {
    0% {
        background-position: 444px 0px
    }

    100% {
        background-position: 0 0px
    }
}


.part2 .image-wrapper .won {
    position: relative;
    display: block;
    width: 158px;
    height: 158px;
    background: url("https://og.kakaobank.io/view/363db352-c0b8-4a64-8b05-240d55ac282c") no-repeat;
    background-size: contain;
    margin: 25px auto;
}

.part2 .image-wrapper .won::after {
    content: '';
    position: absolute;
    display: block;
    width: 85.5px;
    height: 94.5px;
    background: url("https://og.kakaobank.io/view/9449a665-fd9b-402f-8c73-fe534a8c7561") no-repeat;
    background-size: contain;
    top: 86px;
    left: 95.5px;
    -webkit-animation: ring 5s linear infinite;
    animation: ring 5s linear infinite;
}

@-webkit-keyframes ring {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }


    25% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }

    27% {
        -webkit-transform: rotate(-12deg);
                transform: rotate(-12deg);
    }

    29% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }

    31% {
        -webkit-transform: rotate(-8deg);
                transform: rotate(-8deg);
    }

    33% {
        -webkit-transform: rotate(6deg);
                transform: rotate(6deg);
    }

    35% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    37% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    39% {
        -webkit-transform: rotate(-1deg);
                transform: rotate(-1deg);
    }

    41% {
        -webkit-transform: rotate(1deg);
                transform: rotate(1deg);
    }

    43% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
}

@keyframes ring {
    0% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }


    25% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }

    27% {
        -webkit-transform: rotate(-12deg);
                transform: rotate(-12deg);
    }

    29% {
        -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
    }

    31% {
        -webkit-transform: rotate(-8deg);
                transform: rotate(-8deg);
    }

    33% {
        -webkit-transform: rotate(6deg);
                transform: rotate(6deg);
    }

    35% {
        -webkit-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }

    37% {
        -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
    }

    39% {
        -webkit-transform: rotate(-1deg);
                transform: rotate(-1deg);
    }

    41% {
        -webkit-transform: rotate(1deg);
                transform: rotate(1deg);
    }

    43% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(0);
                transform: rotate(0);
    }
}

.part3 .image-wrapper .starbucks {
    position: relative;
    display: inline-block;
    width: 112px;
    height: 203px;
    background: url("https://og.kakaobank.io/view/3199315e-9483-4fff-9264-678e956d54c2") no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 8.5px;
}

.part3 .image-wrapper .daily {
    position: relative;
    display: inline-block;
    width: 97.5px;
    height: 55px;
    background: url("https://og.kakaobank.io/view/6e6e23e6-7079-4eb6-a380-d0a88865883a") no-repeat;
    background-size: contain;
    vertical-align: middle;
    -webkit-animation: daily 2s linear infinite;
    animation: daily 2s linear infinite;
}

@-webkit-keyframes daily {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }

    43% {
        -webkit-transform: translateY(10px);
                transform: translateY(10px)
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

@keyframes daily {
    0% {
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }

    43% {
        -webkit-transform: translateY(10px);
                transform: translateY(10px)
    }

    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0)
    }
}

.part4 .image-wrapper .moneys {
    display: inline-block;
    width: 199.5px;
    height: 127.5px;
    background: url("https://og.kakaobank.io/view/e8693d83-2682-437e-8809-09462b4b5b44") no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: 0 4.5px 0 7.5px;

}

.part4 .image-wrapper .il {
    display: inline-block;
    width: 52px;
    height: 79px;
    background: url("https://og.kakaobank.io/view/246e9f98-b291-4e49-b745-b9bbac718d86") no-repeat;
    background-size: contain;
    vertical-align: middle;
    -webkit-animation: dudun1 4s linear infinite 1s;
    animation: dudun1 4s linear infinite 1s;
}

.part4 .image-wrapper .oak {
    display: inline-block;
    width: 52px;
    height: 79px;
    background: url("https://og.kakaobank.io/view/0151b8dd-c2a7-4956-96d8-505f444e2e67") no-repeat;
    background-size: contain;
    vertical-align: middle;
    -webkit-animation: dudun1 4s linear infinite 1.4s;
    animation: dudun1 4s linear infinite 1.4s;

}

@-webkit-keyframes dudun1 {
    0% {
        opacity: 0.4;
        scale: 0.5;
    }

    8% {
        opacity: 1;
        scale: 1;
    }

    70% {
        opacity: 1;
        scale: 1;
    }
    100% {
        opacity: 1;
        scale: 1;
    }

}

@keyframes dudun1 {
    0% {
        opacity: 0.4;
        scale: 0.5;
    }

    8% {
        opacity: 1;
        scale: 1;
    }

    70% {
        opacity: 1;
        scale: 1;
    }
    100% {
        opacity: 1;
        scale: 1;
    }

}


.part2 .inner:before, .part4 .inner:before {
    content: '';
    display: block;
    position: absolute;
    width: 314px;
    height: 3px;
    left: 0;
    top: -50px;
    background: #E4E6EB;

}

.part3 .inner:before {
    content: '';
    display: block;
    position: absolute;
    width: 314px;
    height: 3px;
    right: 0;
    top: -50px;
    background: #E4E6EB;

}


.part5 .inner {
    display: block;
  
    text-indent: -9999em;
    width: 310.5px;
    height: 234px;
    background: url("https://og.kakaobank.io/view/183d627d-22ce-4b0e-a3e8-89f49fe81051") no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.stamp-section {
    background: #FFFFFF;
    border-radius: 52px;
    padding: 39px 0;
    max-width: 375px;
    margin: 0 auto;
}

.stamp-title {
    display: block;
  
    text-indent: -9999em;
    width: 155px;
    height: 24.7px;
    background: url("https://og.kakaobank.io/view/72845e33-854b-432f-b925-2f239dc3178c") no-repeat;
    background-size: contain;
    margin: 0 auto;
    margin-bottom: 40px;
}


.stamp-title.result {
    background: url("https://og.kakaobank.io/view/3680cb15-9aca-4027-a946-a4de612aefac") no-repeat;
    background-size: contain;
    width: 285.5px;
    height: 135px;
    margin-bottom: 26px;

}


.stamp-board {
    position: relative;
    line-height: 0;
  
    width: 318px;
    height: 577.5px;
    background-size: contain;
    margin: 0 auto;
}

.stamp-board:before {
    display: block;
    position: absolute;
    left: 6px;
    top: 7px;
    width: 304px;
    height: 559px;
    content: '';
    background: url("https://og.kakaobank.io/view/48a87d7a-4b8b-4e82-8026-a014d3574db2") no-repeat;
    background-size: contain;
    margin: 0 auto;
}

.stamp {
    display: inline-block;
    position: relative;
  
    text-indent: -9999em;
    overflow: hidden;
    margin: 0 auto;
    width: 67px;
    height: 67px;
    margin:7.3px 6px;
    opacity: 0.9;
}

.stamp.join::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 67px;
    width: 68px;
    height: 67.5px;
    background: url("https://og.kakaobank.io/view/f389d785-aea8-49dd-beb6-e71cbc24fe4f") no-repeat;
    background-size: contain;
}

.stamp.weekend::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 67px;
    height: 68.8px;
    background: url("https://og.kakaobank.io/view/c34378c7-41bc-4752-b871-518f3b297edf") no-repeat;
    background-size: contain;
}


.bonus {
    display: block;
  
    text-indent: -9999em;
    width: 296px;
    height: 68.9px;
    background: url("https://og.kakaobank.io/view/a0f2d917-7542-4b7c-a0ee-c0e9217f2019") no-repeat;
    background-size: contain;
    margin: 30px auto 43px;

}

.summary-benefit {
    display: block;
  
    text-indent: -9999em;
    width: 312.5px;
    height: 357.5px;
    background: url("https://og.kakaobank.io/view/1f1442a2-3f2e-436c-8df4-e36c3c52e175") no-repeat;
    background-size: contain;
    margin: 30px auto 43px;
}

.summary-benefit {
    position: relative;
    display: block;
  
    text-indent: -9999em;
    width: 312.5px;
    height: 357.5px;
    background: url("https://og.kakaobank.io/view/1f1442a2-3f2e-436c-8df4-e36c3c52e175") no-repeat;
    background-size: contain;
    margin: 30px auto 43px;
}

.summary-benefit .highlight {
    position: absolute;
    display: block;
    left: 8px;
    top: 72px;
    width: 180px;
    height: 7.5px;
}

.summary-benefit .highlight:after {
    content: '';
    height: 100%;
    display: block;
    background: rgba(255, 215, 103, 0.4);
    -webkit-animation: wideWidth 4s infinite;
            animation: wideWidth 4s infinite;
}

.summary-benefit .highlight+.highlight {
    width: 184.5px;
    top: 211px;
}

.summary-benefit .highlight+.highlight:after {
    -webkit-animation: wideWidth 4s infinite .8s;
            animation: wideWidth 4s infinite .8s;
}

.summary-benefit .highlight+.highlight+.highlight {
    width: 167.5px;
    top: 350px;
}

.summary-benefit .highlight+.highlight+.highlight:after {
    -webkit-animation: wideWidth 4s infinite 1.8s;
            animation: wideWidth 4s infinite 1.8s;
}


@-webkit-keyframes wideWidth {
    0% {
        width: 0%
    }

    20% {
        width: 100%
    }

    100% {
        width: 100%
    }
}


@keyframes wideWidth {
    0% {
        width: 0%
    }

    20% {
        width: 100%
    }

    100% {
        width: 100%
    }
}


.share-product {
    text-align: center;
    padding: 75px 0 60px;
    background-color: #fff;
}

.tit-share {
    width: 248px;
    height: auto;
}


@-webkit-keyframes loop-seq-ani {
    0% {
        background-position: 0px 0px
    }

    100% {
        background-position: 0 -1896pxpx
    }
}


@keyframes loop-seq-ani {
    0% {
        background-position: 0px 0px
    }

    100% {
        background-position: 0 -1896pxpx
    }
}

.list-share {
    text-align: center;
  
    padding: 29px 0 0;
}

.list-share li {
    display: inline-block;
    position: relative;
    width: 70px;
    height: 70px;
    padding: 0 12px
}

.list-share .ico_product {
    display: inline-block;
    width: 70px;
    height: 70px;
    text-indent: -9999em;
}

.list-share .ico_kakao {
    background: url("https://og.kakaobank.io/view/e03aaac5-68a8-45fd-87ec-26ac757d3e9b") no-repeat;
    background-size: contain;
}

.list-share .ico_facebook {
    background: url('https://og.kakaobank.io/view/1a448b7e-023e-4aff-b2bc-d1c88654c531') no-repeat;
    background-size: contain;
}

.list-share .ico_more {
    background: url("https://og.kakaobank.io/view/578b1ee2-fd72-4d7e-8b2d-b7d2fc8cd9d7") no-repeat;
    background-size: contain;
}

#kakaoFoot {
    padding: 65px 50px 180px;
    background-color: #EDEFF2;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.86;
    letter-spacing: normal;
    text-align: left;
    color: #767A85;
}

#kakaoFoot .inner {
    max-width: 375px;
    margin: 0 auto;
}

#kakaoFoot h2 {
    text-align: left;
    margin: 0 0 20px;
    font-size: 25px;
    font-weight: 800;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: -0.5px;
}

.text-list.non-accordion {
    margin-bottom: 20px;
}

#kakaoFoot h3 {
    padding-left: 12px;
    font-weight: normal;
}
#kakaoFoot h3 strong{
    font-weight: 700;}

#kakaoFoot li {
    text-align: left;
    color: #767A85;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 28px;
    position: relative;
    padding-left: 12px;
}


#kakaoFoot li:before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background-color: #767A85;
}

#kakaoFoot .policy>li {
    margin-left: 0;
    opacity: 1;
}

.publish-number {
    margin: 0 12px;
}




.btn-apply {
    position: fixed;
    bottom: 0;
    padding: 20px 15px;
    width: 100%;
    box-sizing: border-box;
}

.btn-apply .btn{
    display: block;
    position: relative;
    background: #FAAD33;
    text-indent: -999em;
    border-radius: 20px;
    width: 100%;
    height: 64px;
}

.btn-apply .btn::after {
    position: absolute;
    left: 0%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    content: '';
    background: url("https://og.kakaobank.io/view/4251cee5-6e5d-46e4-ab6b-d472234da581") no-repeat;
    width: 129.5px;
    height: 21px;
    background-size: contain;
}

.btn-apply .calculate,
.btn-apply .joined,
.btn-apply .end {
    background-color: #A4AABD
}

.btn-apply .joined::after {
    background: url("https://og.kakaobank.io/view/460d48d0-2d6e-457e-b3ec-56730697cc2f") no-repeat;
    width: 119.5px;
    height: 21px;
    background-size: contain;
}

.btn-apply .reward::after {
    background: url("https://og.kakaobank.io/view/31d10e20-5c6b-4014-bb27-5602a7ab74ec") no-repeat;
    width: 78px;
    height: 20.5px;
    background-size: contain;
}

.btn-apply .calculate::after {
    background: url("https://og.kakaobank.io/view/3b696444-7c44-4051-837e-b3febaf95ff1") no-repeat;
    width: 107.5px;
    height: 20.5px;
    background-size: contain;
}

.btn-apply .end::after {
    background: url("https://og.kakaobank.io/view/9956901b-f119-4963-afb7-8b59e1e319a8") no-repeat;
    width: 180.5px;
    height: 21px;
    background-size: contain;
}


.popup {
    z-index: 1000;
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
}

.popup.open {
    display: block;
}

.popup .bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
}

.popup-content {
    position: relative;
    display: inline-block;
    width: 330px;
    background-color: #fff;
    border-radius: 30px;
    padding: 59px 22px 20px;
    box-sizing: border-box;
}

.popup-content .title {
    font-weight: bold;
    text-align: center;
    font-weight: 700;
    font-size: 20.5px;
    line-height: 30.5px;
    letter-spacing: normal;
    text-align: center;
    color: #2E3035;
}

.popup-img-txt  {
    position: relative;
    display: block;
    margin:0 auto;
    text-indent: -99999em;
}

.popup-img-txt.congre {
  
    width: 209.5px;
    height: 79px;
    background: url("https://og.kakaobank.io/view/aebe8dcc-e2e4-44a3-a515-10d1c8e59aa9") no-repeat;
    background-size: contain;
}
.popup-img-txt.notaccount {
  
    width: 239.5px;
    height: 103px;
    background: url("https://og.kakaobank.io/view/b61d77f7-b45d-4cd3-a9cc-683bec924814") no-repeat;
    background-size: contain;
}
.popup-img-txt.notwinner {
  
    width: 235px;
    height: 79.5px;
    background: url("https://og.kakaobank.io/view/4540c3ba-5f28-44f2-b56d-9de176a6b34a") no-repeat;
    background-size: contain;
}
.congre-ryan{
    display: block;
    width: 164.5px;
    height: 127px;
    background: url("https://og.kakaobank.io/view/1fda1533-a38f-4387-b1c3-338446ec2bf3") no-repeat;
    background-size: contain;
    margin: 14px auto 0;
}
.ddam-ryan{
    display: block;
    width: 110px;
    height: 130.5px;
    background: url("https://og.kakaobank.io/view/62affc46-847f-46d4-95ea-5d9a34d6b9a5") no-repeat;
    background-size: contain;
    margin: 14px auto 0;
}


.popup-content .desc span{
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
    font-size: 17.5px;
    line-height: 22px;
    padding-top: 30px;
}

.popup-content .desc a {
    text-decoration: underline;
    color: #666 !important;
}

.popup-content .btn-ok:focus, .popup-content .btn-ok:focus-visible {
    outline: none;
    border: 0 none;
}

.popup-content .btn-ok,.popup-content .btn-no,.popup-content .btn-yes {
    width: 100%;
    height: 66px;
    position: relative;
  
    margin: 32px 0 0;
    text-indent: -99999em;
    background: #FAAD33;
    border-radius: 33px;
}
.popup-content .bg-blue {
    background: #90BDFF;
}
.popup-content .btn-ok::after{
    content: '';
    display: block;
    margin:0 auto;
    width: 41.5px;
    height: 24.5px;
    background: url("https://og.kakaobank.io/view/fa7188bf-96e1-4e06-8589-b1612259cb72") no-repeat;
    background-size: contain;
    position: absolute;
    top: 21px;
    bottom: 0;
    left: 0;
    right: 0;
}
.popup-content .btn-no::after{
    content: '';
    display: block;
    margin:0 auto;
    width: 31px;
    height: 17px;
    background: url("https://og.kakaobank.io/view/3ad964ca-23e6-490b-8d5a-05c7ddf3fd0f") no-repeat;
    background-size: contain;
    position: absolute;
    top: 23px;
    bottom: 0;
    left: 0;
    right: 0;
}
.popup-content .btn-yes::after{
    content: '';
    display: block;
    margin:0 auto;
    width: 99px;
    height: 17px;
    background: url("https://og.kakaobank.io/view/f8f11456-05a1-453e-a458-9ad0209c383d") no-repeat;
    background-size: contain;
    position: absolute;
    top: 23px;
    bottom: 0;
    left: 0;
    right: 0;
}

.popup-content .btn-ok.bg-sky {
    background: #90BDFF;
}

.popup-content .button-wrapper {
    display: flex;
}

.popup-double  .popup-content {
    padding-top:41.5px;
}

.popup-content .btn-no {
    width: 170px;
    text-align: center;
    color: #fff;
    height: 66px;
    background: #53565F;
    border-radius: 66px;
    font-style: normal;
}

.popup-content .btn-no+.btn-yes {
    text-align: center;
    color: #fff;
    height: 66px;
    background: #FAAD33;
    border-radius: 66px;
    font-style: normal;
    margin-left:8px;

}



@media screen and (max-width: 800px) {
    .top-section {
        padding-top: 0px
    }

}

@media screen and (max-width: 320px) {}


/* 테스트끝나면폐기처분 */
.btn-apply .test {
    position: relative;
    text-indent: 1px;
    border-radius: 20px;
    box-sizing: border-box;
    width: 10%;
    padding: 10px;
    border: 1px solid #ccc;
}

.btn-apply .test::after {
    content: none;
}

.ch-ir{
    display: block;
    text-indent: -999em;
    overflow: hidden;
    width: 0;
    height: 0;
}