.sub_wrap.dookki{overflow:hidden;}
 
.dookki-sec-1{position:relative} 
.dookki-sec-1>img{position:absolute;} 
.dookki-sec-1 .tg.active,.dookki-sec-1 .tg.revealed{top:0 !important;inset: 0 !important;} 
.dookki-sec-1 .pin-spacer.pinlev{/* inset: auto auto auto 0 !important; */left: 0 !important;} 

.dookki_info{padding-left:50%;}
.dookki_info li{overflow:hidden;}
.dookki_info li:last-child{margin-bottom:0 !important;}
.dookki_info h6{color:#ff661c; font-weight:900;}
.dookki_info h6 span{font-weight:400; font-size:60%}
.dookki_info p{color:#210b00;font-weight:300;line-height: 1.5em;}
.dookki_info p.gray{color:#7c7c7c;}
.price{}
.price>div{float:left; border:1px solid #ff661c}
.price .p_tit{background-color:#ff661c;color:#fff;font-weight:600;text-align: center;}
.price .p_tit span{display:block;font-weight:300;color: #fff;}
.price .p_con{color:#210b00;font-weight:600;background: #fff;text-align: center;}
.price .p_con em{font-weight:600;}




.guide_tab{text-align:center;}
.guide_tab span{position:relative; display:inline-block; vertical-align:middle; background-color:#ded7c0; color:#fff; font-weight:600; text-align:center; cursor:pointer}
.guide_tab span i{display:none}
.guide_tab span.on{background-color:#ff661c;}
.guide_tab span.on i{position:absolute;color:#fff;display: block;}
 

.guide_slide{position:relative;}
.guide_slide li{position:relative;font-size: 0;}
.guide_slide li img,.guide_slide li>div{display:inline-block; vertical-align:middle;}
.guide_slide>span{position:absolute; cursor:pointer; color:#ded7c0; top:50%; }
.g_left{left:0;}
.g_right{right:0;}
 

.guide_slide .cc_box{position:absolute;opacity:0; transform: scale(5) rotate(-15deg); transition-duration: .2s !important; transition-delay: .5s !important}
.guide_slide .swiper-slide-active .cc_box{opacity: 1;transform: scale(1) rotate(-15deg)}

.guide_slide li h5{color:#ff661c; font-weight:900;}
.guide_slide li p{color:#210b00; font-weight:400;}

.guide_box{font-size:0; display:none;}
.guide_box >div{display:inline-block; vertical-align:middle;}

.guide_video{width: 50%;height:100%;}
.guide_info{width:50%; }
.guide_info li{color:#210b00; font-weight:300; line-height:1.3em}
.guide_info ul{display:inline-block}
.guide_info ul li{text-align:left;}
.guide_info ul li.last{margin-bottom:0;}
.guide_info .num{display:inline-block; color:#fff; text-align:center; border-radius:50%; background-color:#210b00; font-weight:300}


.recipe{margin-top: 8vw;}
.recipe li{position:relative; float:left; background-color:#fff;}
.recipe li .cc_box{position:absolute;  transition-delay: 1s }
.recipe li h6{color:#210b00; font-weight:300;}
.recipe li h6 em{color:#ff661c; font-weight:bold; display:inline-block}
.sauce{font-size:0;}
.sauce>div{display:inline-block;background-color:#f7f6f3;vertical-align: middle;}
.sauce .plus{background-color:#fff;padding:0;height: auto;}
.sauce .plus i{color:#210b00}

.sauce>div img:first-child{margin-left:0;}
.sauce span{display:block; color:#210b00; font-weight:300}
.sauce span em{font-weight:bold;}

.x1 .sauce>div{width:100%;}

.x2 .sauce>div{width:44%;}
.x2 .sauce .plus{width:12%;}

.x3 .sauce>div{width:26%;}
.x3 .sauce .plus{width:11%;}

.x4 .sauce>div{width: 24%;}
.x4 .sauce .plus{width:4%;}

.explain{color:#7c7c7c;font-weight:300;line-height: 1.2em;}



.taste span{display:inline-block;border:1px solid #ff661c;background-color:#fff;color:#ff661c;font-weight:bold;text-align: center;transform: scale(5) rotate(-15deg);border-radius:50%}

.mealkit-sec-2, .mealkit-sec-3{position:relative; z-index:1;}
.mealkit-sec-2{}
.mealkit-sec-2 img{position:absolute; right:0;}
.mealkit-sec-2 li{float:left; background-color:#fff;}
.mealkit-sec-2 li h6{color:#210b00;font-weight:500;word-break: keep-all;line-height: 1.1em;}
.mealkit-sec-2 li h6 span{display:block; color:#ff661c; font-weight:900;}
.mealkit-sec-2 li p{position:relative;font-weight:300;line-height: 1.3em;}
.mealkit-sec-2 li p::after{position:absolute;  left:0; border:1px solid #ff661c; content:''; border-radius:50%;}
.mealkit-sec-2 li p span{display:block;color:#7c7c7c;font-weight:300;line-height: 1.1em;}

.mealkit-sec-3{}
.mealkit-sec-3 li{display:table; float:left; background-color:#fff;}
.mealkit-sec-3 li div{display:table-cell; vertical-align:middle; text-align:center}
.mealkit-sec-3 li img{display:block;  margin:0 auto}
.mealkit-sec-3 li h6{color:#ff661c; font-weight:900;}
.mealkit-sec-3 li p{color:#210b00; font-weight:300;}
.mealkit-sec-3 li p span{display:block;}


.notice{background-color:#e5e3db}
.notice>div{float:left; width:50%}
.notice h6{position:relative; color:#210b00; font-weight:bold}
.notice h6 span{display:inline-block; vertical-align:middle; background-color:#ff661c; border-radius:50%; color:#fff; text-align:center;}
.notice p,.notice li{color:#210b00; font-weight:300; line-height:1.3em}
.notice ul{display:inline-block}
.notice ul li{text-align:left;}
.notice ul li.last{margin-bottom:0;}
.notice .num{display:inline-block; color:#fff; text-align:center; border-radius:50%; background-color:#210b00; font-weight:300}




.pop{position:fixed;top:0;left:0;width:100%;height:100%;z-index: 99; display:none}
.pop .popbox{position:absolute; top:50%; left:50%; background:#fff; border:1px solid #000; height:70vh; margin-top:-35vh; overflow-y:scroll}
.pop .popbox span{display:block;position: fixed;cursor:pointer;}
.popbox th{font-weight:300;}
.popbox th,.popbox td{border:1px solid #000;word-break: keep-all;line-height: 1.5em;}
.popbox thead th{background-color:#000; color:#fff; text-align:center;}
.popbox tbody th{background-color:#f7f6f3; color:#000;}
.popbox tbody td{ color:#000;}

.info-sec-1 button{position:relative; display:block; background-color:#ff661c; color:#fff; text-align:center; font-weight:600}
.info-sec-1 button::after{position:absolute; content:''; display:block; border-radius:50%; background-color:#fff;}




.dookki-sec-2 .video{margin:0 auto;}

.dookki-sec-2 .video{width:100%;padding:28% 0;}
.dookki-sec-2 .video iframe{top: -25%;left: 0;height: 150%;width: 100%;}

.ware-sec-3 .video{width:100%;padding: 28% 0;}
.ware-sec-3 .video iframe{top: -25%;left: 0;height: 150%;width: 100%;}

@media (min-width:1300px) {
 

 
 
.dookki-sec-1>img{top:247px;left:0;width: 46%;}  
.dookki_info{margin-top:200px;}
.dookki_info li{margin-bottom:100px}
.dookki_info h6{font-size:40px; margin-bottom:25px;}
.dookki_info p{font-size:22px;}

.dookki-sec-2{margin-top: 300px;}



.price{margin: 0 -0.7% 10px;}
.price>div{width: 31.5%;margin: 0 0.7% 1.4%;border-radius: 25px;overflow: hidden;}
.price .p_tit{padding: 10px 0;font-size: 22px;}
.price .p_tit span{font-size: 18px;margin-top: 5px;}
.price .p_con{padding: 20px 0;font-size: 30px;}
.price .p_con em{font-weight:600;}

 
.guide_tab {margin-bottom: 100px;}
.guide_tab span{width:180px; height:85px; line-height:85px; font-size:30px; border-radius:43px}
.guide_tab span.on i{top:11px;right:35px;font-size: 10px;}

.guide_slide li img{width:45%; margin-right:5%;}
.guide_slide li div{width:50%;}
.guide_slide .cc_box{left: 40%;top:0;}
.guide_slide li h5{font-size:30px;margin-bottom: 30px;}
.guide_slide li p{font-size:40px;}

.guide_slide{padding:0 11%;}
.guide_slide>div{padding:2% 0;}
.guide_slide>span{font-size:60px; margin-top:-30px;}

.guide_info li{font-size: 20px;margin-bottom: 15px;}
.guide_info .num{width: 35px;height: 35px;margin-right: 15px;line-height: 35px;font-size: 17px;}



.recipe ul{margin:0 -1.5%;}
.recipe li{width:47%;margin: 0 1.5% 3%;padding: 3.5%;padding: 3%;text-align: center;border-radius: 25px;}
.recipe li h6{font-size:40px; margin-bottom:25px;}
.recipe li .cc_box{top: 30px;right: 15%;width: 6vw;height: 3vw;line-height: 3vw;font-size: 1vw;}
.sauce>div{padding: 25px 0 0;border-radius:25px;height: 140px;}
.sauce img{width: 2.8vw;margin-right:-3px;}
.sauce img:not(:first-of-type){margin-left:-7px; margin-right:0;}
 
.sauce span{font-size: 22px;margin-bottom:15px;}
.sauce .plus i{font-size:20px;}

.explain{font-size: 13px;margin-top: 4px;padding: 0 3%;}

.spoon{margin-top:10px;}




.taste{margin-top:50px;}
.taste span{width:20%;height:6vw;font-size:1.5vw;line-height:6vw;margin-left: -0.2%;}

.mealkit-sec-2, .mealkit-sec-3{margin-top:200px;}
.mealkit-sec-2 img{top:50%; width:auto; z-index:-1;}
.mealkit-sec-2 ul{margin:0 -1.5%}
.mealkit-sec-2 li{width:30%;margin:0 1.5%;padding:3%;height:350px;border-radius: 25px;}
.mealkit-sec-2 li h6{font-size:35px;margin-bottom: 30px;}
.mealkit-sec-2 li h6 span{font-size:25px; margin-bottom:10px}
.mealkit-sec-2 li p{font-size: 21px;padding-left: 18px;margin-bottom:15px;}
.mealkit-sec-2 li p::after{top: 7px;width:15px;height:15px;}
.mealkit-sec-2 li p span{font-size: 17px;margin-top:10px}


.mealkit-sec-3 ul{margin:0 -1.5%;}
.mealkit-sec-3 li{width:47%; margin:0 1.5% 3%; height:400px; border-radius:25px;}
.mealkit-sec-3 li img{width:27%;}
.mealkit-sec-3 li h6{font-size:25px; margin:20px 0;}
.mealkit-sec-3 li p{font-size:25px; }
.mealkit-sec-3 li p span{margin-top:20px}


.notice{padding:40px 0; border-radius:25px}
.notice>div{padding:0 50px;}
.notice h6{font-size:25px; margin-bottom:10px; line-height:50px}
.notice h6 span{width:50px; height:50px; font-size:20px; line-height:50px; margin-right:15px;}
.notice p{font-size:20px; padding-left:65px}
.notice li{font-size:25px; margin-bottom:20px;}

.notice .num{width:40px; height:40px; margin-right:20px; line-height:40px; font-size:20px}


.pop .popbox{padding: 50px;width:900px;margin-left:-450px;}
.popbox th,.popbox td{font-size:16px;}
.popbox thead th{height:40px;}
.popbox tbody td{padding:10px;}
.pop .popbox span{top: 18vh;right: 50%;font-size:20px;margin-right: -398px;}

.info-sec-1 button{width:300px; height:85px; font-size:30px; margin:100px auto 0; border-radius:40px}
.info-sec-1 button::after{width:10px; height:10px; top:13px; right:40px;}


.ware-sec-1 .gall_list{margin-top: 100px;}

.ware-sec-3{margin-top: 100px;}

}
 
@media (min-width:640px){

.guide_video{padding: 14% 0;}
.guide_video iframe{top: -40%;left: 0;height: 180%;width: 100%;}
.guide_info{padding-left:5%}
}
@media (min-width: 640px) and (max-width: 1299px){
 
 
.dookki-sec-1>img{top: 33vw;left: -11vw;width: 42.7vw;}  
.dookki-sec-1 .tg.active, .dookki-sec-1 .tg.revealed{left: -11vw !important;position: relative;}
.dookki_info{margin-top: 16vw;padding-left: 31vw;}
.dookki_info li{margin-bottom: 8.5vw;}
.dookki_info h6{font-size: 3.3vw;margin-bottom: 1.5vw;}
.dookki_info p{font-size: 1.8vw;}

.dookki-sec-2{margin-top: 10vw;}


.price{margin: 0 -0.7% 10px;}
.price>div{width: 31.5%;margin: 0 0.7% 1.4%;border-radius: 25px;overflow: hidden;}
.price .p_tit{padding: 1vw 0;font-size: 1.8vw;}
.price .p_tit span{font-size: 1.5vw;margin-top: 0.5vw;}
.price .p_con{padding: 1.5vw 0;font-size: 2.5vw;}
.price .p_con em{font-weight:600;} 


.guide_tab {margin-bottom: 17vw;}
.guide_tab span{width: 15vw;height: 7vw;line-height: 7vw;font-size: 2.5vw;border-radius: 3.5vw;}
.guide_tab span.on i{top: 1vw;right: 2vw;font-size: 0.5vw;}

.guide_slide li img{width: 42vw;margin-right: 4vw;}
.guide_slide li div{width: calc(100% - 46vw);}
.guide_slide .cc_box{left: 38vw;top:0;}

.guide_slide li h5{font-size: 2.5vw;margin-bottom: 2vw;}
.guide_slide li p{font-size: 3.3vw;}

.guide_slide{padding: 0 8vw;}
.guide_slide>span{font-size: 5vw;margin-top: -2.5vw;}

.guide_info li{font-size: 1.5vw;margin-bottom: 1vw;}
.guide_info .num{width: 3vw;height: 3vw;margin-right: 1vw;line-height: 3vw;font-size: 1.5vw;}




.recipe ul{margin:0 -1.5%;}
.recipe li{width: 100%;padding: 3.5%;padding: 4vw 0 3vw;text-align: center;border-radius: 1.5vw;margin-bottom: 5vw;}
.recipe li h6{font-size: 3vw;margin-bottom: 2.5vw;}
.recipe li .cc_box{top: 30px;right: 33%;width: 10vw;height: 4vw;line-height: 4vw;font-size: 1.5vw;}
.sauce{width: 50vw;margin: 0 auto;}
.sauce>div{padding: 2vw 0 0;border-radius:25px;height: 13vw;}
.sauce img{width: 5vw;margin-right:-3px;}
.sauce img:not(:first-of-type){margin-left:-7px; margin-right:0;}
 
.sauce span{font-size: 2vw;margin-bottom: 1.5vw;}
.sauce .plus i{font-size: 2vw;}

.explain{font-size: 1.2vw;margin-top: 1vw;padding: 0 9%;}

.spoon{margin-top: 1vw;}



.taste{margin-top:50px;}
.taste span{width: 18vw;height: 9vw;font-size: 2.5vw;line-height: 9vw;margin-left: -0.2%;}

.mealkit-sec-2, .mealkit-sec-3{margin-top: 15vw;}
.mealkit-sec-2 img{top: 82%;width: 27vw;z-index:-1;right: -6vw;}
.mealkit-sec-2 ul{margin:0 -1.5%}
.mealkit-sec-2 li{width:30%;margin:0 1.5%;padding:3%;height: 33vw;border-radius: 25px;}
.mealkit-sec-2 li h6{font-size: 3vw;margin-bottom: 4vw;height: 3em;line-height: 1.2em;}
.mealkit-sec-2 li h6 span{font-size: 2vw;margin-bottom: 1vw;}
.mealkit-sec-2 li p{font-size: 1.8vw;padding-left: 2.6vw;margin-bottom: 1vw;}
.mealkit-sec-2 li p::after{top: 0.4vw;width: 1.5vw;height: 1.5vw;}
.mealkit-sec-2 li p span{font-size: 1.5vw;margin-top: 1vw;}


.mealkit-sec-3 ul{margin:0 -1.5%;}
.mealkit-sec-3 li{width:47%; margin:0 1.5% 3%; height:400px; border-radius:25px;}
.mealkit-sec-3 li img{width: 15vw;}
.mealkit-sec-3 li h6{font-size: 2vw;margin: 2vw 0;}
.mealkit-sec-3 li p{font-size: 2vw;}
.mealkit-sec-3 li p span{margin-top:20px}


.notice{padding: 3vw 0;border-radius:25px}
.notice>div{padding: 0 3vw;}
.notice h6{font-size: 2vw;margin-bottom:10px;line-height:50px}
.notice h6 span{width: 4.5vw;height: 4.5vw;font-size: 2vw;line-height: 4.5vw;margin-right: 1vw;}
.notice p{font-size: 1.6vw;padding-left: 6vw;line-height: 1.5em;}
.notice li{font-size:2vw; margin-bottom:2vw;}

.notice .num{width:4vw; height:4vw; margin-right:2vw; line-height:4vw; font-size:2vw}


.pop .popbox{padding: 50px;width: 90vw;margin-left: -45vw;}
.popbox th,.popbox td{font-size:16px;}
.popbox thead th{height:40px;}
.popbox tbody td{padding:10px;}
.pop .popbox span{top: 21vh;right: 10vw;font-size: 5vw;}

.info-sec-1 button{width:300px; height:85px; font-size:30px; margin:100px auto 0; border-radius:40px}
.info-sec-1 button::after{width:10px; height:10px; top:13px; right:40px;}


.ware-sec-1 .gall_list{margin-top: 7vw;}
.ware-sec-3{margin-top: 10vw;}
}
@media (max-width:1299px){
 
}
@media (max-width: 640px){
 
 .dookki-sec-1 .sub_tit2 em{display:block;}
.dookki-sec-1>img{width: 78.5vw;position: absolute;top: 66vw;left: -4vw;}  
.dookki_info{padding-top: 116vw;padding-left: 0;}
.dookki_info li{margin-bottom: 14vw;}
.dookki_info h6{font-size: 6vw;margin-bottom: 1.5vw;}
.dookki_info p{font-size: 3.5vw;}
.dookki-sec-2{margin-top: 14vw;}


.price{margin: 0 -0.7% 10px;}
.price>div{width: 31.5%;margin: 0 0.7% 1.4%;border-radius: 2vw;overflow: hidden;}
.price .p_tit{padding: 1vw 0;font-size: 4vw;}
.price .p_tit span{font-size: 2.8vw;margin-top: 0.8vw;}
.price .p_con{padding: 2.5vw 0;font-size: 5vw;}
.price .p_con em{font-weight:600;} 


.guide_tab{margin-bottom: 20vw;text-align: center;}
.guide_tab span{width: 23%;height: 10vw;font-size: 3.2vw;line-height: 10vw;/* margin-right: 2vw; */border-radius: 5vw;vertical-align: middle;}
.guide_tab span.on i{top: 1vw;right: 3vw;font-size: 1vw;}


.guide_slide li img{width: 100%;}
.guide_slide li div{width: 100%;margin-top: 10vw;text-align: center;}
.guide_slide .cc_box{right: -10vw;top:0;}
.guide_slide li h5{font-size: 3.5vw;margin-bottom: 2vw;}
.guide_slide li p{font-size: 5vw;}

.guide_slide{padding: 0 10vw;}
.guide_slide>span{font-size: 8vw;margin-top: -4vw;}


.guide_box>div{width:100%;}

.guide_video{padding: 28.2% 0;margin-bottom: 6vw;}
.guide_video iframe{top: -40%;left: 0;height: 180%;width: 100%;}

.guide_info li{font-size:3vw; margin-bottom:2vw;}
.guide_info .num{width:5vw; height:5vw; margin-right:2vw; line-height:5vw; font-size:3vw}



.recipe ul{margin:0 -1.5%;}
.recipe li{width: 100%;padding: 3.5%;padding: 5vw;text-align: center;border-radius: 1.5vw;margin-bottom: 5vw;}
.recipe li h6{font-size: 5vw;margin-bottom: 4vw;}
.recipe li .cc_box{top: 3vw;right: 24%;width: 15vw;height: 7vw;line-height: 7vw;font-size: 2.5vw;}
.sauce{}
.sauce>div{padding: 4vw 0 0;border-radius:25px;height: 22vw;}
.sauce img{width: 8.6vw;margin-right:-3px;}
.sauce img:not(:first-of-type){margin-left:-7px; margin-right:0;}
 
.sauce span{font-size: 3.5vw;margin-bottom: 2.5vw;}
.sauce .plus i{font-size: 3vw;}

.explain{font-size: 2vw;margin-top: 1vw;padding: 0 9%;}

.spoon{margin-top: 1vw;}



.taste{margin-top: 5vw;text-align: center;}
.taste span{width: 28vw;height: 14vw;font-size: 4vw;line-height: 14vw;margin-left: 1vw;margin-bottom: 4vw;}

.mealkit-sec-2, .mealkit-sec-3{margin-top: 20vw;}
.mealkit-sec-2 img{top: 85%;width: 33vw;z-index:-1;right: -24px;}
.mealkit-sec-2 ul{}
.mealkit-sec-2 li{width: 100%;padding: 5vw;border-radius: 4vw;margin-bottom: 5vw;}
.mealkit-sec-2 li h6{font-size: 4.5vw;margin-bottom: 4vw;}
.mealkit-sec-2 li h6 span{font-size: 3vw;margin-bottom: 3vw;}
.mealkit-sec-2 li p{font-size: 3.5vw;padding-left: 4vw;margin-bottom: 1vw;}
.mealkit-sec-2 li p::after{top: 1vw;width: 2vw;height: 2vw;}
.mealkit-sec-2 li p span{font-size: 3vw;margin-top: 1vw;}


.mealkit-sec-3 ul{margin:0 -1.5%;}
.mealkit-sec-3 li{width:47%;margin:0 1.5% 3%;height: 47vw;border-radius:25px;}
.mealkit-sec-3 li img{width: 17.9vw;}
.mealkit-sec-3 li h6{font-size: 3vw;margin: 2vw 0;}
.mealkit-sec-3 li p{font-size: 3.5vw;padding: 0 3vw;line-height: 1.3em;}
.mealkit-sec-3 li p span{margin-top: 2vw;font-size: 3vw;}


.notice{padding: 5vw ;border-radius:25px}
.notice>div{width: 100%;margin-bottom: 6vw;}
.notice h6{font-size: 4vw;margin-bottom: 1vw;line-height: 5vw;}
.notice h6 span{width: 5vw;height: 5vw;font-size: 3vw;line-height: 5vw;margin-right: 1vw;}
.notice p{font-size: 3vw;padding-left: 6vw;line-height: 1.5em;}
.notice li{font-size:3vw; margin-bottom:2vw;}

.notice .num{width:5vw; height:5vw; margin-right:2vw; line-height:5vw; font-size:3vw}



.pop .popbox{padding: 3.5vw;width: 90vw;margin-left: -45vw;}
.popbox th,.popbox td{font-size: 3vw;}
.popbox thead th{height: 6vw;}
.popbox tbody td{padding: 2vw;}
.pop .popbox span{top: 17vh;right: 11vw;font-size: 7vw;}

.info-sec-1 button{width: 40vw;height: 10vw;font-size: 4vw;margin:100px auto 0;border-radius: 5vw;}
.info-sec-1 button::after{width: 1vw;height: 1vw;top: 2vw;right: 5vw;}


.ware-sec-1 .gall_list{margin-top: 10vw;}
.ware-sec-3{margin-top: 15vw;}
}