*{margin: 0; padding: 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; color: inherit;}
img{width: 100%; height: 100%; object-fit: cover;}

/* font style*/
@font-face {
    font-family: 'GapyeongWave';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/GapyeongWave.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* animation */
@keyframes wobbly {
    25%{rotate:5deg}
    50%{rotate:-5deg}
    75%{rotate:5deg}
    100%{rotate:0deg}
}
@keyframes turn {
    100%{rotate:1turn}
}

:root{
    --main_color : #F7DF53;
    --sub_color_1 : #487CBA;
    --sub_color_2 : #C97840;
    --sub_color_3 : #DB5B54;
    --sub_color_4 : #76A780;
    --bg_color : #FBFAF9;
    --font_color : #171717;
}

body{
    font-family: 'Pretendard-Regular';
    background-color: var(--bg_color);
}

header{
    font-family: 'GapyeongWave';
}

/* hero style start */
.hero{
    width: 100%; height: 100vh;
    display: flex;
    background-color: var(--bg_color);
    overflow: hidden;
    position: sticky;
}
.hero>div{
    width: 50%; height: 100%;
}
.hero .hero_left_box{
    text-align: center; color: var(--sub_color_1);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: 0 100%;
    background-color: #fff;
}
.hero .hero_left_box>p{
    font-size: 90px; line-height: 1.1;
}
.hero .hero_left_box>p:nth-child(1){
    margin: 130px auto 50px;
}
.hero .hero_left_box>p:nth-child(1)>span{
    color: var(--sub_color_4);
}
.hero .hero_left_box>p:nth-child(2){
    margin-bottom: 120px;
    position: relative;
}
.hero .hero_left_box>p:nth-child(2)>span{
    color: var(--sub_color_3);
}
.hero .hero_left_box>p:nth-child(2)::after{
    content:'';
    background: url(./img/OS_MenuBear_new.gif) no-repeat center/cover;
    width: 120px; height: 120px;
    position: absolute;
    left: 88%; top: -17%;
}
.hero .hero_left_box .cbt_box{
    display: flex; gap: 20px;
    margin: 0 auto 120px;
}
.hero .hero_left_box .cbt{
    width: 300px; height: 70px;
    border-radius: 35px;
    border: 2px solid #171717;
    background-color: var(--main_color);
    color: #171717; font-size: 20px;
    display: flex; align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
.hero .hero_left_box .cbt:nth-child(1)::after{
    content:'';
    background: url(./img/OS_Bear_02.png) no-repeat center/cover;
    width: 90px; height: 90px;
    position: absolute;
    top: -80.5%; right: 7%;
}
.hero .hero_left_box .cbt:nth-child(2)::after{
    content:'';
    background: url(./img/Barista_Blend_Sustainable_Option.png) no-repeat center/cover;
    width: 90px; height: 90px;
    position: absolute;
    top: -80%; left: 0;
}
.hero .hero_left_box .cbt:hover{
    background-color: var(--sub_color_4);
    animation: wobbly .5s ease-in-out;
}
.hero .hero_left_box .logo>img{
    object-fit: contain;
    transform: scale(30%);
}
.hero .hero_right_box{
    background: url(./img/os_picture14.png) no-repeat top/cover;
    position: relative;
    transform-origin: 100% 100%;
}
.hero .hero_right_box>div{
    position: absolute;
    transform: scale(100%);
}
.hero .hero_right_box .hero_sticker:nth-child(1){
    top: 5%; left: 15%;
    transform: scale(120%);
    animation: wobbly 5s ease-in-out infinite;
}
.hero .hero_right_box .hero_sticker:nth-child(2){
    top: 55%; left: 10%;
    transform: scale(120%);
    animation: turn 30s linear infinite;
}
.hero .hero_right_box .hero_sticker:nth-child(3){
    right: 10%;
    transform: scale(140%);
    animation: wobbly 10s linear infinite;
}
.hero .hero_right_box .hero_sticker:nth-child(4){
    bottom: 5%; right: 10%;
}

/* product intro style */
.product_intro{
    width: 100%; height: 100vh;
    display: flex;
    position: relative;
    overflow: hidden;
}
.product_intro .left_wing_wrap,
.product_intro .right_wing_wrap{
    width: 30%; height: 100%;
    overflow:hidden
}
.product_intro .center{
    width: 40%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    position: relative;
}
.product_intro .center>div{
    width: 55%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 15%; left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}
.product_intro .center>div.show{
    opacity: 1;
}
.product_intro>img{
    height: auto; width: auto;
    position: absolute;
    top: 80%;
    left: 50%;
}
.product_intro .center>div:nth-child(3){
    top: 25%; left: 50%;
}
.product_intro .center img{
    width: 60%;
    object-fit: contain;
}
.product_intro .center>div:nth-child(1):before{
    content: '';
    background: url(./img/OS_StickerSetForWeb-15.svg) no-repeat center/contain;
    width: 35%; height: 35%;
    position: absolute;
    bottom: -5%; left: -5%;
    animation: wobbly 5s ease-in-out infinite;
}
.product_intro .center>div:nth-child(1)::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-13.svg) no-repeat center/contain;
    width: 40%; height: 25%;
    z-index: -1;
    position: absolute;
    right: 0%; top: -8%;
    animation: wobbly 10s ease-in-out infinite;
}
.product_intro .center>div:nth-child(2):before{
    content: '';
    background: url(./img/Chocolate_K.svg) no-repeat center/contain;
    width: 40%; height: 40%;
    position: absolute;
    top: -5%; left: 0;
    animation: wobbly 5s ease-in-out infinite;
}
.product_intro .center>div:nth-child(2)::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-30.svg) no-repeat center/contain;
    width: 50%; height: 50%;
    z-index: -1;
    position: absolute;
    right: -10%; bottom: 3%;
    animation: wobbly 10s ease-in-out infinite;
}
.product_intro .center>div:nth-child(3):before{
    content: '';
    background: url(./img/OS_StickerSetForWeb-20.svg) no-repeat center/contain;
    width: 35%; height: 35%;
    position: absolute;
    bottom: -5%; left: -5%;
    animation: wobbly 5s ease-in-out infinite;
}
.product_intro .center>div:nth-child(3)::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-29.svg) no-repeat center/contain;
    width: 40%; height: 25%;
    z-index: -1;
    position: absolute;
    right: 0%; top: -8%;
    animation: wobbly 10s ease-in-out infinite;
}
.product_intro .os_picture{
    position: relative;
}
.product_intro .left_wing .op1{
    width: 60%;
    margin: 20% 0 50% 10%
}
.product_intro .left_wing .op2{
    width: 45%;
    margin: 0 0 30% 20%;
}
.product_intro .left_wing .op2::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-05.svg) no-repeat center/contain;
    width: 100px; height: 80px;
    display: inline-block;
    position: absolute;
    top: -10%; right: -10%;
}
.product_intro .left_wing .op3{
    width: 50%;
    margin: 0 0 20% 5%;
}
.product_intro .left_wing .op4{
    width: 50%;
    margin: 0 0 50% 20%;
}
.product_intro .left_wing .op5{
    width: 50%;
    margin: 0 0 40% 30%;;
}
.product_intro .left_wing .op5::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-21.svg) no-repeat center/contain;
    width: 150px; height: 150px;
    display: inline-block;
    position: absolute;
    top: -10%; left: -30%;
}
.product_intro .left_wing .op6{
    width: 50%;
    margin: 0 0 20% 5%;
}
.product_intro .left_wing .op7{
    width: 50%;
    margin: 0 0 60% 15%;
}
.product_intro .left_wing .op8{
    width: 55%;
    margin: 0 0 20% 40%;
}
.product_intro .left_wing .op8::after{
    content: '';
    background: url(./img/OS_Bear_Running.gif) no-repeat center/contain;
    width: 150px; height: 200px;
    display: inline-block;
    position: absolute;
    top: -100%; left: 0;
}
.product_intro .left_wing .op9{
    width: 50%;
    margin: 0 0 20% 5%;
}
.product_intro .left_wing .op18{
    width: 50%;
    margin: 50% 0 60% 20%;
}
.product_intro .left_wing .op18::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-10.svg) no-repeat center/contain;
    width: 100px; height: 100px;
    display: inline-block;
    position: absolute;
    top: -25%; right: -10%;
}
.product_intro .right_wing .op10{
    width: 70%;
    margin: 50% 0 60% 20%;
}
.product_intro .right_wing .op10::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-04.svg) no-repeat center/contain;
    width: 100px; height: 100px;
    display: inline-block;
    position: absolute;
    bottom: -10%; right: 10%;
}
.product_intro .right_wing .op11{
    width: 50%;
    margin: 50% 0 40% 20%;
}
.product_intro .right_wing .op11::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-27.svg) no-repeat center/contain;
    width: 100px; height: 100px;
    display: inline-block;
    position: absolute;
    bottom: -10%; right: -10%;
}
.product_intro .right_wing .op12{
    width: 50%;
    margin: 0 0 30% 50%;
}
.product_intro .right_wing .op13{
    width: 50%;
    margin: 20% 0 60% 40%;
}
.product_intro .right_wing .op14{
    width: 50%;
    margin: 50% 0 0 20%;
}
.product_intro .right_wing .op14::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-29.svg) no-repeat center/contain;
    width: 100px; height: 100px;
    display: inline-block;
    position: absolute;
    top: -10%; right: -10%;
}
.product_intro .right_wing .op15{
    width: 70%;
    margin: 50% 0 60% 20%;
}
.product_intro .right_wing .op15::after{
    content: '';
    background: url(./img/OS_Plant_Running.gif) no-repeat center/contain;
    width: 200px; height: 200px;
    display: inline-block;
    position: absolute;
    top: -40%; right: 0;
}
.product_intro .right_wing .op16{
    width: 40%;
    margin: 0 0 20% 20%;
}
.product_intro .right_wing .op16::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-22.svg) no-repeat center/contain;
    width: 150px; height: 150px;
    display: inline-block;
    position: absolute;
    top: -30%; right: -30%;
}
.product_intro .right_wing .op17{
    width: 50%;
    margin: 10% 0 20% 40%;
}

/* product desc style */
.product_desc{
    width: 100%; height: 100vh;
    background-color: var(--main_color);
    overflow: hidden;
}
.product_desc_inner{
    width: 1440px; height: 100%;
    margin: 0 auto;
    padding: 100px 90px 0;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.product_desc_inner .milk_desc{
    width: 800px;
    position: relative;
}
.product_desc_inner .milk_desc .brand_name{
    width: 240px;
}
.product_desc_inner .milk_desc .milk_name{
    position: relative;
    margin-bottom: 30px;
}
.product_desc_inner .milk_desc .milk_name h2{
    font-size: 64px;
    font-weight: 400;
    line-height: 1.2;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
}
.product_desc_inner .milk_desc .milk_name h2.show{
    opacity: 1;
}
.product_desc_inner .milk_desc .milk_info{
    width: 100%; height: 200px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 160px;
    opacity: 0;
}
.product_desc_inner .milk_desc .milk_info.show{
    opacity: 1;
}
.product_desc_inner .milk_desc .milk_info::after{
    content: '';
    background: url(./img/OS_Bear_02.png) no-repeat center/contain;
    width: 200px; height: 200px;
    position: absolute;
    top: -58.5%; right: 5%;
}
.product_desc_inner .milk_desc .milk_info>div{
    background-color: #fff;
    border: 2px solid #171717;
    color: var(--font_color);
    padding: 20px 0 0 20px;
}
.product_desc_inner .milk_desc .milk_ingredient{
    width: 220px; height: 100%;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.product_desc_inner .milk_desc .milk_ingredient>p:nth-child(1){
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 500;
}
.product_desc_inner .milk_desc .milk_ingredient>p:nth-child(2){
    line-height: 1.6;
    font-weight: 500;
}
.product_desc_inner .milk_desc .milk_ingredient>p>span{
    font-weight: 400;
}
.product_desc_inner .milk_desc .milk_100ml{
    width: 570px; height: 100%;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.product_desc_inner .milk_desc .milk_100ml>p:nth-child(1){
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 500;
}
.product_desc_inner .milk_desc .milk_100ml .text_box{
    display: flex; gap: 50px;
    font-weight: 500;
    line-height: 1.6;
    padding-left: 20px;
}

.product_desc_inner .milk_desc .milk_100ml .text_box span{
    font-weight: 400;
}
.product_desc_inner .milk_desc .milk_character{
    width: 100%; height: 300px;
    border: 2px solid #171717;
    border-radius: 30px;
    background-color: #fff;
    display: flex;
    position: absolute;
    overflow: hidden;
    top: 370px;
}
.product_desc_inner .character_card_wrap{
    width: 80%;
    transition: .5s ease-in-out;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
}
.product_desc_inner .character_card_wrap.show{
    opacity: 1;
}
.product_desc_inner .latte_character_wrap .character_card:nth-child(4) img{
    object-fit: contain;
}
.product_desc_inner .character_card_wrap .character_card{
    width: 100%; height: 300px;
    display: flex; align-items: center;
    padding: 20px 0 20px 30px;
}
.product_desc_inner .character_card_wrap .card_img{
    width: 200px; height: 200px;
}
.product_desc_inner .character_card_wrap .card_text{
    width: calc(100% - 200px); height: 100%;
    padding-top: 10px;
}
.product_desc_inner .character_card_wrap .card_text>div{
    text-align: center;
    color: var(--font_color);
}
.product_desc_inner .character_card_wrap .card_text .card_title{
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px;
}
.product_desc_inner .character_card_wrap .card_text .card_body{
    font-size: 20px;
}
.product_desc_inner .character_navi{
    width: 20%; height: 100%;
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0; right: 0;
}
.product_desc_inner .character_navi .up_btn,
.product_desc_inner .character_navi .down_btn{
    width: 50px; height: 50px;
    background-color: var(--sub_color_1);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
}
.product_desc_inner .character_navi .down_btn{
    padding-top: 5px;
}
.product_desc_inner .character_navi .up_btn:hover,
.product_desc_inner .character_navi .down_btn:hover{
    background-color: var(--main_color);
}
.product_desc_inner .milk_img{
    width: 400px; height: 700px;
    border-radius: 200px;
    z-index: 4;
    position: relative;
}
.product_desc_inner .milk_img::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-28-1.svg) no-repeat center/cover;
    width: 250px; height: 250px;
    position: absolute;
    bottom: -15%; right: -15%;
}
.product_desc_inner .milk_img .milk_img_box{
    width: 100%; height: 100%;
    border-radius: 200px;
    border: 2px solid #171717;
    position: relative;
    background-color: #fff;
}
.product_desc_inner .milk_img .milk_img_box img{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 200px;
    transition: .5s;
    opacity: 0;
}
.product_desc_inner .milk_img .milk_img_box img.show{
    opacity: 1;
}
.product_desc_inner .barista_btn,
.product_desc_inner .chocolate_btn,
.product_desc_inner .latte_btn{
    width: 120px; height: 160px;
    text-align: center;
    font-family: soap, sans-serif;
    color: var(--font_color);
    border-top-right-radius: 60px;
    border-top-left-radius: 60px;
    padding-top: 40px;
    line-height: .8;
    font-size: 20px;
    position: absolute;
    transition: .3s;
    cursor: pointer;
}
.product_desc_inner .barista_btn{
    background-color: var(--sub_color_1);
    top: 3%; right: 12%;
    transform: rotate(15deg);
    z-index: 3;
}
@keyframes brrr1 {
    20%{transform: translate(5%, -10%) rotate(15deg);}
    40%{transform: translate(5%, -10%) rotate(10deg);}
    60%{transform: translate(5%, -10%) rotate(20deg);}
    80%{transform: translate(5%, -10%) rotate(10deg);}
    100%{transform: translate(0, 0) rotate(15deg);}
}
.barista_btn:hover{
    transform: translate(5%, -10%) rotate(15deg);
    background-color: #fff;
    color: var(--main_color);
}
.product_desc_inner:hover .barista_btn{
    animation: brrr1 1s ease-in-out alternate 1;
}
.product_desc_inner .chocolate_btn{
    background-color: var(--sub_color_2);
    top: 8%; right: 6%;
    transform: rotate(45deg);
    z-index: 2;
}
@keyframes brrr2 {
    20%{transform: translate(10%, -10%) rotate(45deg);}
    40%{transform: translate(10%, -10%) rotate(40deg);}
    60%{transform: translate(10%, -10%) rotate(50deg);}
    80%{transform: translate(10%, -10%) rotate(40deg);}
    100%{transform: translate(0, 0) rotate(45deg);}
}
.chocolate_btn:hover{
    transform: translate(10%, -10%) rotate(45deg);
    background-color: #fff;
    color: var(--main_color);
}
.product_desc_inner:hover .chocolate_btn{
    animation: brrr2 1s 1s ease-in-out alternate 1;
}
.product_desc_inner .latte_btn{
    background-color: var(--sub_color_3);
    top: 17%; right: 2%;
    transform: rotate(75deg);
    z-index: 1;
}
@keyframes brrr3 {
    20%{transform: translate(15%, -5%) rotate(75deg)}
    40%{transform: translate(15%, -5%) rotate(70deg)}
    60%{transform: translate(15%, -5%) rotate(80deg)}
    80%{transform: translate(15%, -5%) rotate(70deg)}
    100%{transform: translate(0, 0) rotate(75deg)}
}
.latte_btn:hover{
    transform: translate(15%, -5%) rotate(75deg);
    background-color: #fff;
    color: var(--main_color);
}
.product_desc_inner:hover .latte_btn{
    animation: brrr3 1s 2s ease-in-out alternate 1;
}

/* product link style */
.product_link{
    width: 100%; height: 100vh;
    position: sticky;
}
.bear{
    width: 130px; height: 130px;
    margin: 50px auto 30px;
    position: relative;
}
.bear img{
    position: absolute;
}
.bear img:nth-child(1){
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(80%);
}
.bear img:nth-child(2){
    animation: turn 10s linear infinite;
}
.product_link_inner{
    width: 1440px; height: 700px;
    margin: auto;
    background-color: #fff;
}
.product_link_inner .text_box{
    font-family: soap, sans-serif;
    width: 100%; height: 50px;
    border: 1px solid #171717;
    font-size: 30px; line-height: 50px;
    overflow: hidden;
    display: flex;
    color: var(--font_color);
}
.product_link_inner .text_box>div{
    display: flex; gap: 10px;
    flex-shrink: 0;
    padding-left: 10px;
    animation: loopslide 50s linear infinite;
}
.product_link_inner .text_box p{
    margin: 0 10px;
    flex-shrink: 0;
}
@keyframes loopslide {
    100% {transform: translateX(-100%);}
}
/* .product_link_inner .text_box::before{
    content: '';
    background: url(./img/OS_StickerSetForWeb-11.svg) no-repeat center/contain;
    width: 130px; height: 130px;
    display: inline-block;
    position: absolute;
    top: -300%; left: 50%;
    transform: translateX(-50%) scale(80%);
}
.product_link_inner .text_box::after{
    content: '';
    background: url(./img/OS_StickerSetForWeb-33.svg) no-repeat center/contain;
    width: 130px; height: 130px;
    position: absolute;
    top: -300%; left: 45.5%;
    animation: turn 10s linear infinite;
} */
.product_link_inner .product_img_box{
    width: 100%; height: 650px;
    display: flex;
}
.product_link_inner .product_img_box>div{
    width: calc(100% / 3); height: 100%;
    transition: 1s;
}
.product_link_inner .product_img_box .product_barista{
    border-left: 1px solid #171717;
}
.product_link_inner .product_img_box .product_choco{
    border-left: 1px solid #171717;
    border-right: 1px solid #171717;
}
.product_link_inner .product_img_box .product_latte{
    border-right: 1px solid #171717;
}
.product_link_inner .product_img_box>div>div:nth-child(1){
    width: 100%; height: calc(100% - 100px);
    position: relative;
    transition: .5s;
}
.product_link_inner .product_img_box>div>div:nth-child(1)>div{
    width: 50%; height: 100%;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
@keyframes left_tilt {
    100%{transform: translate(-70%, -50%) rotate(-10deg);}
}
.product_link_inner .product_img_box>div>div:nth-child(1) img{
    object-fit: contain;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.product_link_inner .product_img_box>div>div:nth-child(1)>img{
    width: 25%;
    top: 55%;
}
@keyframes right_tilt {
    100%{transform: translate(15% , -50%) rotate(10deg);}
}
.product_link_inner .product_img_box .product_barista_img>div::before{
    content: '';
    background: url(./img/OS_StickerSetForWeb-23.svg) no-repeat center/contain;
    display: inline-block;
    width: 150px; height: 150px;
    position: absolute;
    bottom: 40%; left: 50%;
    transform: translate(-50%, 50%);
    transition: .5s;
}
.product_link_inner .product_img_box .product_barista_img>div::after{
    content: '';
    background: url(./img/Chocolate_Guilt_Free.svg) no-repeat center/contain;
    display: inline-block;
    width: 120px; height: 120px;
    position: absolute;
    top: 30%; right: 20%;
    z-index: -1;
    transition: .5s;
}
.product_barista:hover .product_barista_img{
    background-color: var(--main_color);
}
.product_barista:hover .product_barista_img>div{
    animation: left_tilt .5s ease-in-out alternate forwards;
}
.product_barista:hover .product_barista_img>img{
    animation: right_tilt .5s ease-in-out alternate forwards;
}
.product_barista:hover .product_barista_img>div::before{
    bottom: 20%; left: -20%;
    transform: translate(0, 0) rotate(-20deg);
}
.product_barista:hover .product_barista_img>div::after{
    top: 15%; right: -20%;
}
.product_link_inner .product_img_box .product_choco_img>div::before{
    content: '';
    background: url(./img/OS_StickerSetForWeb-29.svg) no-repeat center/contain;
    width: 100px; height: 100px;
    display: inline-block;
    position: absolute;
    top: 25%; right: 40%;
    transform: rotate(0deg);
    transition: .5s;
}
.product_link_inner .product_img_box .product_choco_img>div::after{
    content: '';
    background: url(./img/tasty.svg) no-repeat center/contain;
    width: 100px; height: 100px;
    display: inline-block;
    position: absolute;
    bottom: 15%; left: -8%;
    opacity: 0;
    transform: rotate(0deg);
    transition: .5s;
}
.product_choco:hover .product_choco_img{
    background-color: var(--sub_color_2);
}
.product_choco:hover .product_choco_img>div{
    animation: left_tilt .5s ease-in-out alternate forwards;
}
.product_choco:hover .product_choco_img>img{
    animation: right_tilt .5s ease-in-out alternate forwards;
}
.product_choco:hover .product_choco_img>div::before{
    top: 12%; right: -15%;
    transform: rotate(360deg);
}
.product_choco:hover .product_choco_img>div::after{
    opacity: 1; transform: rotate(360deg);
}
.product_link_inner .product_img_box .product_latte_img>div::before{
    content: '';
    background: url(./img/OS_StickerSetForWeb-20.svg) no-repeat center/contain;
    width: 100px; height: 100px;
    display: inline-block;
    position: absolute;
    top: 40%; right: 25%;
    opacity: 0;
    transform: rotate(0deg);
    transition: .5s;
}
.product_latte:hover .product_latte_img{
    background-color: var(--sub_color_3);
}
.product_latte:hover .product_latte_img>div{
    animation: left_tilt .5s ease-in-out alternate forwards;
}
.product_latte:hover .product_latte_img>img{
    animation: right_tilt .5s ease-in-out alternate forwards;
}
.product_latte:hover .product_latte_img>div::before{
    top: 22%; right: -10%;
    opacity: 1;
    transform: rotate(400deg);
}
.product_link_inner .product_img_box>div>.purchase_btn{
    width: 100%; height: 100px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    color: var(--font_color);
    border-top: 1px solid #171717;
    border-bottom: 1px solid #171717;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
}
.product_link_inner .product_img_box>div>.purchase_btn>p{
    font-size: 30px; font-weight: 500;
    line-height: 1; z-index: 1;
    transition: .5s;
}
.product_link_inner .product_img_box>div>.purchase_btn>p>span{
    font-size: 20px; line-height: 1;
    font-weight: 400;
}
.product_link_inner .product_img_box>div>.purchase_btn::after{
    content: '구매하기';
    font-size: 30px; font-weight: 500;
    line-height: 100px;
    color: #fff;
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}
.product_img_box>div:hover .purchase_btn{
    background-color: var(--sub_color_1);
}
.product_img_box>div:hover .purchase_btn>p{
    opacity: 0;
}

/* recipe style */
.recipe{
    width: 100%; height: 100vh;
    background-color: var(--sub_color_3);
    position: relative;
}
.recipe_wrap{
    width: 100%; height: 100%;
    overflow: hidden;
    display: flex;
}
.recipe_wrap .recipe_container{
    width: 4000px; height: 100%;
    flex-shrink: 0;
    position: relative;
    background-color: var(--sub_color_3);
    animation: flow 50s linear infinite;
}
@keyframes flow {
    100%{transform: translateX(-100%);}
}
.recipe_wrap .recipe_item{
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .5);
    overflow: hidden;
}
.recipe_wrap .recipe_item img{
    object-fit: contain;
    transform: scale(70%);
}
.recipe_wrap .recipe_container .recipe_item:nth-child(1){
    width: 450px; height: 450px;

}
.recipe_wrap .recipe_container .recipe_item:nth-child(2){
    width: 350px; height: 350px;
    bottom: 5%; left: 10%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(3){
    width: 200px; height: 200px;
    top: 3%; left: 25%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(4){
    width: 150px; height: 150px;
    top: 50%; left: 30%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(5){
    width: 300px; height: 300px;
    top: 20%; left: 40%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(6){
    width: 400px; height: 400px;
    bottom: -5%; left: 45%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(7){
    width: 350px; height: 350px;
    top: -5%; left: 60%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(8){
    width: 250px; height: 250px;
    top: 50%; left: 70%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(9){
    width: 150px; height: 150px;
    top: 20%; left: 75%;
}
.recipe_wrap .recipe_container .recipe_item:nth-child(10){
    width: 400px; height: 400px;
    top: 40%; left: 85%;
}
.recipe>p{
    position: absolute;
    top: 15%; left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-size: 96px;
    font-weight: 700;
    line-height: 1.2;
}
.recipe>.recipe_btn{
    width: 300px; height: 70px;
    background-color: #fff;
    color: var(--sub_color_3);
    line-height: 70px;
    font-size: 20px; font-weight: 500;
    text-align: center;
    border-radius: 35px;
    cursor: pointer;
    position: absolute;
    top: 60%; left: 50%;
    transform: translateX(-50%);
}
.recipe>.recipe_btn:hover{
    background-color: var(--sub_color_4); color: #fff;
}