@charset "utf-8"; /*common*/

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@font-face { font-family: 'GowunBatang-Regular'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'InkLipquid'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }

body { font-family: 'Noto Sans KR', 'sans-serif'; letter-spacing:-0.5px; font-weight:400; font-size: 16px; background-color:#fff; line-height:normal; color:#363C46; text-align: left; word-break: keep-all; }
html { height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, fieldset, p, button, input { margin: 0; padding: 0 }
ul, ol, dl { list-style: none }
ul { list-style: none; padding: 0; margin: 0 }
img, fieldset, iframe { border: 0 }
img { vertical-align:top }
input, select, button { font-family: 'Noto Sans KR', 'sans-serif'; vertical-align: middle; }
input { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; }
textarea:focus, input:focus { outline: none; }
textarea { font-family: 'Noto Sans KR', 'sans-serif'; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
button, input { position: relative; border:none; }
button { cursor:pointer; outline: none; border:none; }
em, address { font-style: normal }
a { text-decoration: none; color: inherit; display: block; position: relative; }
.clear { clear: both; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
* { -webkit-tap-highlight-color:transparent }
img.map, map area { outline: none; }
img::-moz-selection { background-color: transparent; color: #000; }
img::selection { background-color: transparent; color: #000; }

.relative { position: relative; }
.blind { position: absolute; top: -9999px; left: -9999px; width: 1px; height: 1px; margin: -1px; overflow: hidden; text-align: left; text-indent: -9999em }
.obj { position: absolute; z-index: 2; }

.pc { display: block; }
.mo { display:none; }

#wrap { padding-top:104px; position: relative; min-width:1280px; }
#wrap .wrap { width:100%; max-width:1280px; margin: 0 auto; position: relative; }

#header { font-size:18px; color:#FFFFFF; position: fixed; width:100%; top:0px; left:0px; z-index: 100; }
#header #mainMenu {background-image:url('https://chaochai1.cafe24.com/images/gnb_bg1.png'); transition: all .3s ease-in-out; position: relative; z-index: 2; }
#header.type2 #mainMenu { color:#333333; background: none; background-color: #FFFFFF; }   
#header .wrap { display: flex; }
#header h1 { margin:20px 48px; }
#header h1 span img { width:98px; height:auto; }
#header h1 span.type1 { display: block; }
#header h1 span.type2 { display: none; }
#header.type2 h1 span.type1 { display: none; }
#header.type2 h1 span.type2 { display: block; }
#header.type2.moBtnActive h1 span.type1 { display: block; }
#header.type2.moBtnActive h1 span.type2 { display: none; }
#header .wrap nav { display: flex; align-items: center; }
#header .wrap nav dl { margin:0px 20px; }
#header .wrap nav dl a { padding:0px 20px }
#header .wrap nav dt a { padding:30px 20px }
#header .wrap nav dl dd { display: none; }
#header .wrap nav dl span::after { margin-left:20px; content: ''; width: 10px; height: 10px; border-top: 2px solid #F5F5F5; border-right: 2px solid #F5F5F5; display: inline-block; transform: rotate(135deg); vertical-align: 4px; }
#header.type2 .wrap nav dl span::after { border-top: 2px solid #333333; border-right: 2px solid #333333; }
#header .wrap nav dl.active span::after { transform: rotate(314deg); vertical-align: -3px; }
#header #subMenu { background-color: #FFFFFF; height:0; overflow: hidden; }
#header #subMenu ul { padding:24px 0px; margin-left:210px; display: flex; }
#header #subMenu .subNum2 ul {margin-left:515px;}
#header #subMenu li { margin:0px 10px; color:#666666; }
#header #subMenu li a { padding:0px 20px; }
#header #subMenu li a:hover {color:#000000;}

#footer { padding:40px 0px; background-color: #F6F6F6; position: relative;}
#footer #banner ul { display: flex; justify-content: center; }
#footer #banner ul li { margin:0px 8px; }
#footer #banner ul li img { width:360px; height:auto; }
#footer .side{display: flex;}
#footer .bottom { padding:40px; display: flex; justify-content: space-between; color:#666666; }
#footer .bottom h3 { font-size:16px; }
#footer .bottom h3 span a { display: inline-block; }
#footer .bottom h3 span::before { margin:0px 8px; width: 2px; height: 15px; content: ''; display: inline-block; background-color: #666666; vertical-align: -1px; }
#footer .bottom h3 p { font-size:12px; margin-top:5px; font-weight: 400; color:#999999; }


/* 메인 */           /* 241226 */
/* #wrap.main { background-color: #8D021F;} */
#wrap.main { background-image: url(https://chaochai1.cafe24.com/images/main_bg.png); background-repeat:no-repeat; background-position-x:center; position: relative; width: 100%;background-size: cover;}

/* #wrap.main { background-image: url(../../images/main_bg.png); height: 100vh; background-size: cover; background-position-x: center; position: fixed; width: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }  */       /* 241226  {background-color: #8D021F;}*/
#wrap.main #content { text-align: center; }
#wrap.main #content .section { background-repeat:no-repeat; background-position-x:center; position: relative; }
#wrap.main #content #section1 {padding-top:60px;}
/* #wrap.main #content #section2 {padding-top:134px; padding-bottom: 950px; height:0; background-color:#FFE387; overflow: hidden; } */
#wrap.main #content #section2 {padding-top:134px; padding-bottom: 950px; height:0; background-image: url(https://chaochai1.cafe24.com/images/main_bg_section2.jpg); background-size: cover; background-position-x: center; overflow: hidden; }
/* #wrap.main #content #section2 {padding-top:134px; padding-bottom: 950px; background-image: url(../../images/main_bg_section2.jpg); background-size: cover; background-position-x: center; position: fixed; width: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden; }  */

#wrap.main #content .evtBtn { position: fixed; width:90px; height:90px; bottom:20px; right:20px; z-index: 5; }
#wrap.main #content .evtBtn img {width:100%; height:auto; }
#wrap.main #content #section1 .player{width:979px; height:550px; margin:0px auto; margin-bottom:85px; box-shadow: 0px 20px 40px 0px #0000004D; background-color: #000000;}
#wrap.main #content #section1 p.txt2 {margin:85px 0px; }
#wrap.main #content #section1 .img1{margin-bottom:-70px;}
#wrap.main #content #section1 .txt1 img{max-width:453px;}
#wrap.main #content #section1 .txt2 img{max-width:450px;}
#wrap.main #content #section1 .img1 img{max-width:155px;}
#wrap.main #content #section1 .img2 img{max-width:1280px;}
#wrap.main #content #section1 .img3 img{max-width:600px; padding-top:100px;}

#wrap #content .rotateTable.wrap { display: flex; justify-content: center; flex-direction: column; align-items: center; }
#wrap #content .rotateTable.wrap .top {height: 475px;  display: block; display: block; }
#wrap #content .rotateTable.wrap .top .txt { display:none; }
#wrap #content .rotateTable.wrap .top .txt.active { display:block; transition:all 0.5s; }
#wrap #content .rotateTable.wrap .top .txt .btn { margin:0 auto; margin-top:30px; width:138px; height:55px; line-height:55px; background-color:rgba(128, 36, 54, 1); font-size:20px; color:#fff; border-radius: 100px; }
#wrap #content .rotateTable.wrap .top .txt .sub1 { font-family: 'InkLipquid'; margin-bottom:24px; color:#7A0001; font-size:40px; font-weight: 400; }  /* 241226 */
#wrap #content .rotateTable.wrap .top .txt .sub2 { font-family: 'GowunBatang-Regular'; font-weight:700; color:#8D021F; padding:6px 12px; font-size:20px; background-color:#FFFFFF4D; border-radius: 6px; display: inline; } /* 241226 color:#006963; */
#wrap #content .rotateTable.wrap .top .txt .title {margin-top:16px; font-size:40px;  font-family: 'GmarketSansMedium'; color:#8D021F; font-weight: 700;  } /* 241226 color:#F5F5F5;  text-shadow: 0px 4px 4px #006B664D;*/
#wrap #content .rotateTable.wrap .rotate {width:729px; height:723px; background-image: url(https://chaochai1.cafe24.com/images/main_rotate3.png); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; animation: Rotate 9s linear infinite; -webkit-animation: Rotate 9s linear infinite;  background-size: contain; position:relative; }
#wrap #content .rotateTable.wrap .rotate .product {width: 128px; height: 177px;  transition:all 0.5s; transform-origin: bottom; -webkit-transform-origin: bottom; position: absolute; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; }
#wrap #content .rotateTable.wrap .rotate .product img { width: 100%; height: 100%; }
#wrap #content .rotateTable.wrap .rotate .p1 { top: -4%; left: 41.7%; }
#wrap #content .rotateTable.wrap .rotate .p2 { top: 4%; right: 19.5%; -webkit-transform: rotate(45deg); }
#wrap #content .rotateTable.wrap .rotate .p3 { top: 25.6%; right: 11%; -webkit-transform: rotate(90deg); }
#wrap #content .rotateTable.wrap .rotate .p4 { top: 46.8%; right: 20%; -webkit-transform: rotate(135deg); }
#wrap #content .rotateTable.wrap .rotate .p5 { top: 56%; left: 41%; -webkit-transform: rotate(180deg); }
#wrap #content .rotateTable.wrap .rotate .p6 { bottom: 28.8%; left: 20%; -webkit-transform: rotate(225deg); }
#wrap #content .rotateTable.wrap .rotate .p7 { top: 25.5%; left: 11%; -webkit-transform: rotate(270deg); }
#wrap #content .rotateTable.wrap .rotate .p8 { top: 4%; left: 20%; -webkit-transform: rotate(315deg); }
#wrap #content .rotateTable.wrap .rotate .product.active { scale:1.58; transition:all 0.5s; }
#wrap #content .rotateTable.wrap .rotate-txt { top: 63%; font-size: 26px; line-height:1.2;  letter-spacing: -2px;  font-family: 'GowunBatang-Regular'; font-weight: 700; color:#690000; position: absolute;} /* 241226   color: rgba(0, 150, 168, 1); */
#wrap.main #content .rotateTable.wrap .rotate-txt .btn{margin-top:15px;}
#wrap.main #content .rotateTable.wrap .rotate-txt .btn img{max-width:213px;}
#wrap #content .rotateTable.wrap .rotate-txt span { display:block; font-weight: 400;}
#wrap #content .rotateTable.wrap .rotate .product .tail {line-height: 1.1; right: -5px; top: -10px; font-size: 10px;  opacity:0; position: absolute; background-color: #C54A68; border-radius: 50%; color:#F5F5F5; width:40px; height:40px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
#wrap #content .rotateTable.wrap .rotate .product.active .tail { opacity: 1; }
.paused { animation-play-state: paused !important; }

/* 서브 */
#wrap.sub { padding-top: 0; }
#wrap.sub #content .wrap { width:100%; max-width:1170px; margin: 0 auto; position: relative; }
#wrap.sub #header #mainMenu { background-color:transparent; }         /* 241226 */
#wrap.sub #header #mainMenu dt a { color:#FFFFFF80; }       
#wrap.sub #header #mainMenu dl.active dt a { color:#8D021F; }     /* 241226 */
#wrap.sub #header #mainMenu dt.on a { color:#8D021F; }            /* 241226 */
#wrap.sub #header.type2 #mainMenu dt a { color:#33333380; }
#wrap.sub #header.type2 #mainMenu dl.active dt a { color:#333333; }
#wrap.sub #header.type2 #mainMenu dt.on a { color:#333333; }
#wrap.sub #header .wrap nav dl span::after { border-color:#FFFFFF80; }
#wrap.sub #header.type2 .wrap nav dl span::after { border-color:#33333380; }
#wrap.sub #header.type2 #mainMenu { background-color: #ffffff; color:#33333380; border-bottom: 1px solid #E6E6E6; }
#wrap.sub #header.moBtnActive #mainMenu { background-color: #8D021F; }  /* */
#wrap.sub #footer .wrap { max-width:1280px; }

/* 스토리 */
#wrap.story #section1 { background-image: url(https://chaochai1.cafe24.com/images/story_bg.jpg); height: 100vh; background-size: cover; background-position-x: center; position: fixed; width: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }
#wrap.story #section1 .logo { position:relative; z-index: 2; }
#wrap.story #section1::after { content:""; width:100%; height:100%; background-color: #00000066; position: absolute; top:0; left:0; }
#wrap.story #section1 .txt { position:relative; z-index: 2; color: #FFFFFF; text-align: center; font-size: 36px; font-family: 'GowunBatang-Regular'; line-height: 48px; margin-top: 47px; }
#wrap.story #section2 { position: absolute; z-index: 2; width: 100%; margin-top: 90vh; overflow: hidden; padding-top: 9vw; }
#wrap.story #section2 .circle { background: #fff; width: 132%; height: 0; border-radius: 50%; position: absolute; left: 50%; transform: translate(-50%, 0); padding-bottom: 40%; z-index: 0; margin-top: -9%; }
#wrap.story #section2 .inner { background-color: #Fff; padding-top: 10px; padding-bottom: 80px; }
#wrap.story #section2 .wrap .con { display: flex; position:relative; }
#wrap.story #section2 .wrap .con .img { background-repeat: no-repeat; background-size: contain; width: 450px; height: 300px; }
#wrap.story #section2 .wrap .con1 .img { background-image: url(https://chaochai1.cafe24.com/images/story_con1_img.png); }
#wrap.story #section2 .wrap .con2 .img { background-image: url(https://chaochai1.cafe24.com/images/story_con2_img.png); }
#wrap.story #section2 .wrap .con3 .img { background-image: url(https://chaochai1.cafe24.com/images/story_con3_img.png); }
#wrap.story #section2 .wrap .con .txt { margin-left: 80px; }
#wrap.story #section2 .wrap .con .txt dl dt { font-family: 'GowunBatang-Regular'; font-size: 44px; font-weight: 700; margin-top: 8px; margin-bottom: 24px; }
#wrap.story #section2 .wrap .con .txt dl dd { font-size: 18px; line-height: 36px; color: #666666; }
#wrap.story #section2 .wrap .con .txt dl dd+dd { margin-top: 35px; }
#wrap.story #section2 .wrap .con+.con { margin-top:160px; }

/* 프로덕트 */
#wrap.product { }
#wrap.product #section1 { background-image: url(https://chaochai1.cafe24.com/images/product_bg.png); background-position-y: center; background-position-x: center; height: 70.48vh; background-size: cover; position: fixed; width: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }
/* #wrap.product #section1 .txt{margin-top:-3%; width:500px; float:right; text-align: center;} */
#wrap.product #section1 .txt{margin-top:-3%; width:500px; text-align: left;}
#wrap.product #section1 .txt .sub1 { font-size:48px; font-family: 'InkLipquid'; color:#FFE387; }
#wrap.product #section1 .txt .sub2 { font-size:24px; font-family: 'GowunBatang-Regular'; color:#F5F5F5CC; }
#wrap.product #section1 .txt .title { margin-bottom: 20px; font-size:48px; font-family: 'GowunBatang-Regular'; color:#F5F5F5 }
#wrap.product #section2 {position: absolute;z-index: 2;width: 100%;margin-top: 56vh;overflow: hidden;padding-top: 8vw;}
#wrap.product #section2 .circle {background: #fff;width: 132%;height: 0;border-radius: 50%;position: absolute;left: 50%;transform: translate(-50%, 0);padding-bottom: 40%;z-index: 0;margin-top: -8vw;}
#wrap.product #section2 .inner {  background-color: #Fff; }
#wrap.product #section2 .inner .product-menu.main { display: flex; }
#wrap.product #section2 .inner .product-menu.main li { cursor:pointer; margin-right: 32px; color:#999999; font-size:32px; }
#wrap.product #section2 .inner .product-menu.main li.active { font-weight:700; color:#333333; }
#wrap.product #section2 .inner .product-menu.sub { display: flex; margin-top: 48px; }
#wrap.product #section2 .inner .product-menu.sub li {font-size: 18px; margin-right: 8px; padding:13px 25px; border-radius: 50px; cursor:pointer; color:#999999; background-color:#F6F6F6;  }
#wrap.product #section2 .inner .product-menu.sub li.active { color:#fff; font-weight:700; }
#wrap.product #section2 .inner .product-list{display: none;}
#wrap.product #section2 .inner .product-wrap {padding-top: 64px;padding-bottom: 96px;}
#wrap.product #section2 .inner .product-wrap ul {display: block; overflow: hidden;}
#wrap.product #section2 .inner .product-wrap ul li {width: 33.3%;float: left;margin-bottom: 64px;}
#wrap.product #section2 .inner .product-wrap li a { display:flex; flex-direction: column; align-items: center; text-align: center;}
#wrap.product #section2 .inner .product-wrap li .img {max-width:300px;}
#wrap.product #section2 .inner .product-wrap li .sub { margin-top:24px; margin-bottom:12px; background-color:#F6F6F6; font-size:16px; border-radius: 4px; padding: 4px 8px; }
#wrap.product #section2 .inner .product-wrap li .title { font-family: 'GmarketSansMedium'; font-weight: 500; font-size:30px; line-height: 37px;}
#wrap.product #section2 .inner .product-wrap li .link{display: none;}
#wrap.product #section2 .inner .product-wrap ul li .tail {font-size: 16px; right: 8%;top: 0%; width: 60px;height: 60px; background-color: #00B9AE;font-weight: 700; color: #F5F5F5;border-radius: 50%; line-height: 1.1;display: flex;flex-direction: column;align-items: center;justify-content: center;position: absolute;}
#wrap.product #section2 .inner .product-wrap ul.pType2 li .tail {background-color: #C54A68;}
#wrap.product #section2 .inner .product-wrap li .tail span{display:block;}
#wrap.product #content .wrap .product-menu.sub li:nth-child(1).active { background-color:#00B9AE; }
#wrap.product #content .wrap .product-menu.sub li:nth-child(2).active { background-color:#C54A68; }
#wrap.product #content .wrap .product-wrap ul.pType1 li .sub { color:#00B9AE; }
#wrap.product #content .wrap .product-wrap ul.pType2 li .sub { color:#C54A68; }

/* 프로덕트_팝업(상세) */
.popup {position: fixed;top: 0;right: 0;bottom: 0;left: 0;width: 100%;height: 100%; z-index: 999;box-sizing: border-box; background-color: hsla(0, 0%, 0%, 0.4);text-align: center;display: none;}
.popup:before{content: ""; display: inline-block; height: 100%; vertical-align: top; margin-right: -0.05em;}
.popup .close a{width:100%; height:100%; top:0%; left:0%; position: absolute; font-size:0px;}
#popup_detail .fade{position: fixed; width:100%; height:100%; top:0px; left:0px;}
#popup_detail .wrap {width: 720px; margin-top:10vh; position: relative; z-index: 2;box-sizing: border-box; display: inline-block;}
#popup_detail .content {position: relative; padding-bottom: 160px}
#popup_detail .content img{width:100%; height:auto;}
#popup_detail .content #player{height:400px;}
#popup_detail .scrollWrap{height:80vh; border-radius: 20px; background-color: #ffffff; overflow: hidden; overflow-y: auto; position: relative; }
#popup_detail .scrollWrap::-webkit-scrollbar { width:10px;  background-color: #eae6db; } 
#popup_detail .scrollWrap::-webkit-scrollbar-thumb { background-color: #36342f; } 
#popup_detail .top{width:64px; height:64px; top:20px; right:30px; position: absolute; z-index: 2; cursor:pointer;}
#popup_detail .top .close img{width:100%;}
#popup_detail .link{width:100%; bottom:0px; left:0px; position: absolute; z-index: 2; }
#popup_detail .link a img{width:100%; height:auto; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; overflow: hidden;}

/* 레시피 */
/* #wrap.recipe #content .wrap{width:1120px;} */
#wrap.recipe #section1 { background-image: url(https://chaochai1.cafe24.com/images/recipe_bg.png); background-position-y: center; background-position-x: center; height: 70.48vh; background-size: cover; position: fixed; width: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; }
/* #wrap.recipe #section1 .txt{margin-top:-3%; width:500px; float:right; text-align: center;} */
#wrap.recipe #section1 .txt{margin-top:-3%; width:500px; text-align: left;}
#wrap.recipe #section1 .txt .sub1 { font-size:48px; font-family: 'InkLipquid'; color:#FFE387; }
#wrap.recipe #section1 .txt .sub2 { font-size:24px; font-family: 'GowunBatang-Regular'; color:#F5F5F5CC; }
#wrap.recipe #section1 .txt .title { margin-bottom: 20px; font-size:48px; font-family: 'GowunBatang-Regular'; color:#F5F5F5 }
#wrap.recipe #section2 {position: absolute;z-index: 2;width: 100%;margin-top: 56vh;overflow: hidden;padding-top: 8vw;}
#wrap.recipe #section2 .circle {background: #fff;width: 132%;height: 0;border-radius: 50%;position: absolute;left: 50%;transform: translate(-50%, 0);padding-bottom: 40%;z-index: 0;margin-top: -8vw;}
#wrap.recipe #section2 .inner {background-color: #Fff; }
#wrap.recipe #section2 .inner .product-menu.sub { display: flex;}
#wrap.recipe #section2 .inner .product-menu.sub li {font-size: 18px; margin-right: 8px; border-radius: 50px; color:#999999;  background-color:#F6F6F6; position: relative;}
#wrap.recipe #section2 .inner .product-menu.sub li.active { color:#fff; font-weight:700; }
#wrap.recipe #section2 .inner .product-menu.sub li a{padding:13px 25px;}
#wrap.recipe #section2 .inner .product-wrap {padding-top: 64px;padding-bottom: 96px;}
#wrap.recipe #section2 .inner .product-wrap ul {display: block; overflow: hidden;}
#wrap.recipe #section2 .inner .product-wrap ul li {width: 33.3%;float: left;margin-bottom: 64px;}
#wrap.recipe #section2 .inner .product-wrap li a { display:flex; flex-direction: column; align-items: center; text-align: center;}
#wrap.recipe #section2 .inner .product-wrap li .img {max-width:360px; border-radius: 10px; overflow: hidden;}
#wrap.recipe #section2 .inner .product-wrap li .title {font-size:28px; line-height: 32px; margin-top:20px; font-family: 'GmarketSansMedium'; font-weight: 500; }
#wrap.recipe #content .wrap .product-menu.sub li:nth-child(1).active { background-color:rgba(0, 150, 168, 1);}
#wrap.recipe #content .wrap .product-menu.sub li:nth-child(2).active { background-color:rgba(0, 64, 110, 1) }

/* 레시피_상세 */
#wrap.recipe.detail #section2 {margin-top: 0px; padding-top: 105px;}
#wrap.recipe.detail #section2 .inner {padding-top:20px; padding-bottom:100px;}
#wrap.recipe.detail #section2 .inner #player{margin-bottom:40px; height:630px;}
#wrap.recipe.detail #section2 .inner #slider{margin-bottom:40px;}
#wrap.recipe.detail #section2 .inner #slider img{width:100%; height:auto;}
#wrap.recipe.detail #section2 .inner #recipe{margin-bottom:50px; text-align: center;}
#wrap.recipe.detail #section2 .inner .btnContainer{width:650px; margin:0px auto; display: flex; justify-content: space-between;}
#wrap.recipe.detail #slider .swiperWrap {max-width:720px; margin:0px auto; position: relative; } 
#wrap.recipe.detail #slider .swiperWrap .swiper-slide {overflow: hidden;} 
#wrap.recipe.detail #slider .swiperWrap .swiper-pagination {padding:8px 12px; border-radius: 20px;  bottom:30px; left: 50%;-webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); text-align: center; } 
#wrap.recipe.detail #slider .swiperWrap .swiper-pagination-bullet { width:12px; height:12px; margin:0px 5px; border-radius:50%; background:rgba(255, 255, 255, 0.5) } 
#wrap.recipe.detail #slider .swiperWrap .swiper-pagination-bullet-active { background:rgba(255, 255, 255, 1); } 


/* 이벤트 */
#wrap.event1 #content .wrap {max-width:1200px; text-align: center;}
#wrap.event1 #content .section {position: relative; }
#wrap.event1 #section1 {height:890px; padding-top:180px; box-sizing: border-box; background-image: url(https://chaochai1.cafe24.com/images/event_bg.jpg); background-size: cover; background-position-x: center;}
#wrap.event1 #section1 h2 img{max-width:300px;}
#wrap.event1 #content #section2{padding:80px 0px; background: linear-gradient(0deg, #7D0000, #7D0000), linear-gradient(125.43deg, rgba(0, 0, 0, 0.4) 5.33%, rgba(0, 0, 0, 0) 58.88%, rgba(0, 0, 0, 0) 76.36%, rgba(0, 0, 0, 0.4) 112.99%); }
#wrap.event1 #content .section p.title span::before { width: 20px; height: 1px; margin:0px auto; margin-bottom:25px; content: ''; display: block; background-color: #FFFFFF; }
#wrap.event1 #content .section p.title span{font-size:20px; margin-top:25px; font-family: 'GowunBatang-Regular'; color: #FFFFFFB2; display: block;}
#wrap.event1 #content #section2 .box{width:620px; margin:0px auto; margin-top:30px; padding:15px 30px; font-size:20px; background: #FFFFFF; box-sizing: border-box; text-align: left;}
#wrap.event1 #content #section2 .box li{margin:20px 0px; padding-left:90px; position: relative;}
#wrap.event1 #content #section2 .box li span{font-weight: 700; color:#690000; top:0px; left:0px; position: absolute;}
#wrap.event1 #content #section2 .btn{margin-top:30px;}
#wrap.event1 #content #section2 .btn a{width:154px; margin:0px auto;}
#wrap.event1 #content #section2 .btn a img{width:100%; height:auto;}
#wrap.event1 #content #section2 .btn p{ margin-top:11px; }
#wrap.event1 #content #section2 .btn p span{font-size:12px; font-weight: 700;; color:#999999; display: inline-block; position: relative;}
#wrap.event1 #content #section2 .btn p span::before { width: 14px; height: 14px; top:3px; left:0px; position: absolute;  content: ''; display: block;background-image: url(https://chaochai1.cafe24.com/images/event_section2_ico1.png); background-size: cover;}
#wrap.event1 #content #section2 .btn p span a{padding-left:17px; display: inline-block; width:auto;}
#wrap.event1 #content #section3 {background: linear-gradient(180deg, #FFE8C6 0%, #FCF7E5 100%); padding-top:134px; padding-bottom: 870px; height:0; overflow: hidden; }
#wrap.event1 #content .rotateTable.wrap .rotate {background-image: url(https://chaochai1.cafe24.com/images/event_rotate.png);}
#wrap.event1 #content .rotateTable.wrap .top .txt .btn {background-color:#962F43;}
#wrap.event1 #content .rotateTable.wrap .top .txt .sub1 {color:#C54A68; }
#wrap.event1 #content .rotateTable.wrap .top .txt .sub2 {font-weight:700; color:#7D0000; background-color:#FFFFFF4D; }
#wrap.event1 #content .rotateTable.wrap .top .txt .title {color:#333333; text-shadow:none; }
#wrap.event1 #content .rotateTable.wrap .rotate-txt {color:#690000; }
#wrap.event1 #content #section4{padding:60px 0px; background-image:url(https://chaochai1.cafe24.com/images/event_section4_bg.png); background-position:center;}
#wrap.event1 #content #section4 .box{margin-top:35px;}
#wrap.event1 #content #section4 .box ul{display: flex; justify-content: center;}
#wrap.event1 #content #section4 .box li{margin-right:35px;}
#wrap.event1 #content #section4 .box li:last-child{margin-right:0px;}
#wrap.event1 #content #section4 .box li img{max-width:376px;}
#wrap.event1 #content #section5{padding:60px 0px; background: #7D0000;}
#wrap.event1 #content #section5::before { width: 64px; height: 16px; margin-left:-32px; content: ''; display: block; position: absolute; top:-1px; left:50%; background-image: url(https://chaochai1.cafe24.com/images/event_section5_arrow.png); background-size: cover;}
#wrap.event1 #content #section5 p.title span em{display: block; margin-bottom:20px;}
#wrap.event1 #content #section5 p.title span em.small{font-size:14px; margin-top:-10px; margin-bottom:0px;}
#wrap.event1 #content #section5 .box{margin-top:35px;}
#wrap.event1 #content #section5 .btn{margin-top:50px;}
#wrap.event1 #content #section5 .btn a{width:154px; margin:0px auto;}
#wrap.event1 #content #section5 .btn a img{width:100%; height:auto;}
#wrap.event1 #content #section6{padding:60px 0px; background: #FCF7E5;}
#wrap.event1 #content #section6::before { width: 64px; height: 16px; margin-left:-32px; content: ''; display: block; position: absolute; top:-2px; left:50%; background-image: url(https://chaochai1.cafe24.com/images/event_section6_arrow.png); background-size: cover;}
#wrap.event1 #content #section6 p.title span{color:#666666;}
#wrap.event1 #content #section6 p.title span::before {display: none;}
#wrap.event1 #content #section6 p.title span em{display: block; margin-bottom:20px;}
#wrap.event1 #content #section6 p.title span em.small{font-size:14px; margin-top:-10px; margin-bottom:0px;}
#wrap.event1 #content #section6 .box{margin-top:35px;}
#wrap.event1 #content .section p.title em.txt1::before { width: 20px; height: 1px; margin:0px auto; margin-top:25px; margin-bottom:25px; content: ''; display: block; background-color: #7D0000; }
#wrap.event1 #content .section p.title em.txt1 b{color: #7D0000;}

#wrap .popup.common {overflow-y: auto;}
#wrap .popup.common .wrap {width:720px; vertical-align: middle; box-sizing: border-box;  display: inline-block; overflow: hidden;}

#wrap.event1 .popup.common .wrap{border-radius: 30px; margin-top:100px; padding:10px 0px; background-color: #FFFFFF;}
#wrap.event1 .popup.common .close{width:50px; top:25px; right:25px;}
#wrap.event1 .popup.common .close img{width:100%; height:auto;}
#wrap.event1 .popup.common .content{text-align: left;}
#wrap.event1 .popup.common .content .title{font-size:35px; margin-top:50px; padding:30px; font-weight: 700;; color: rgba(105, 0, 0, 1); border-bottom: 1px solid rgba(230, 230, 230, 1)}
#wrap.event1 .popup.common .content .box{font-size:20px; padding:40px; color: rgba(102, 102, 102, 1);}
#wrap.event1 .popup.common .content .box li{margin:10px 0px; padding-left:15px; position: relative;}
#wrap.event1 .popup.common .content .box li::before {width: 4px; height: 4px; top:12px; left:0px; border-radius: 50%; position: absolute; content: ''; display: block; background-color: rgba(102, 102, 102, 1);; vertical-align: -1px; }
#wrap.event1 .popup.common .content .box .btn{margin-top:30px; text-align: center;}

#wrap.event1 #popup_policy .content .box dl{padding-bottom:30px; margin-bottom:30px; border-bottom:1px solid rgba(230, 230, 230, 1)}
#wrap.event1 #popup_policy .content .box dl dt{font-size:24px; font-weight: 700;; color: rgba(105, 0, 0, 1);}
#wrap.event1 #popup_policy .content .box p.txt1{font-size:24px; font-weight: 700;; color: rgba(105, 0, 0, 1); text-align: center;}

#wrap.event1 #popup_register .wrap{background-color: #fff9f3;}
#wrap.event1 #popup_register .container{margin:30px; margin-top:100px; margin-bottom:0px; padding:8px; background-image:url(https://chaochai1.cafe24.com/images/event_popup_bg.jpg); background-position:center; text-align: center;}
#wrap.event1 #popup_register .container .inner{font-size:24px; padding:40px; font-weight: 500; border:1px solid rgba(255, 233, 177, 1); font-family: 'GowunBatang-Regular';}
#wrap.event1 #popup_register .container .inner h4{margin-bottom:40px;}
#wrap.event1 #popup_register .container .inputBox{padding:30px 0px; margin:30px 0px; border-top:2px solid rgba(255, 233, 177, 0.4); border-bottom:2px solid rgba(255, 233, 177, 0.4); text-align: left;}
#wrap.event1 #popup_register .container .inputBox ul>li {height:60px; line-height:60px; margin:20px 0px; padding-left:150px;  position: relative; color: rgba(232, 204, 171, 1);}
#wrap.event1 #popup_register .container .inputBox ul>li span{top:0px; left:0px; position: absolute;}
#wrap.event1 #popup_register .container .inputBox ul>li input{font-size:20px; padding:0px 10px; width:100%; height:100%; background: rgba(255, 249, 243, 1); vertical-align: top;}
#wrap.event1 #popup_register .container .inputBox ul>li.addr{margin-bottom:0px;}
#wrap.event1 #popup_register .container .inputBox ul>li.addr1{margin:5px 0px; padding-left:0px; padding-right:200px;}
#wrap.event1 #popup_register .container .inputBox ul>li.addr2{margin:5px 0px; padding-left:0px;}
#wrap.event1 #popup_register .container .inputBox ul>li.addr1 a{width:200px; top:0px; right:0px; position: absolute; color:rgba(105, 0, 0, 1); background-color: rgba(232, 204, 171, 1); text-align: center;}
#wrap.event1 #popup_register .container .inputBox ul>li.sns ol{display: flex; justify-content: space-between;}
#wrap.event1 #popup_register .container .inputBox ul>li.sns ol li{width:32%; text-align: center;}
#wrap.event1 #popup_register .container .inputBox ul>li.sns ol li label{cursor:pointer;}
#wrap.event1 #popup_register .container .inputBox ul>li.sns ol li input[type="radio"]{display:none; }
#wrap.event1 #popup_register .container .inputBox ul>li.sns ol li input[type="radio"] + em {display:block; color:rgba(174, 122, 122, 1); background-color: rgba(105, 0, 0, 1);}
#wrap.event1 #popup_register .container .inputBox ul>li.sns ol li input[type="radio"]:checked + em {color:rgba(105, 0, 0, 1); background-color: rgba(232, 204, 171, 1); }
#wrap.event1 #popup_register .container .agree{margin-top:30px; color:rgba(255, 255, 255, 1);}
#wrap.event1 #popup_register .container .agree label{cursor:pointer;}
#wrap.event1 #popup_register .container .agree label input{width:25px; height:25px; margin-right:10px; vertical-align: -2px;}
#wrap.event1 #popup_register .container .agree a{display: inline-block;}

#wrap.event1 #popup_review .wrap{background-color: #fff9f3;}
#wrap.event1 #popup_review .container{margin:30px; margin-top:100px; margin-bottom:0px; padding:8px; background-color: #fcf7e5;}
#wrap.event1 #popup_review .container .inner{font-size:24px; padding:40px; font-weight: 600; box-shadow: 0px 4px 20px 0px rgba(191, 155, 119, 0.3); border:1px solid #dac9a9;  color:rgba(105, 0, 0, 1); font-family: 'GowunBatang-Regular'; text-align: center;}
#wrap.event1 #popup_review .container .inner h4{margin-bottom:40px;}
#wrap.event1 #popup_review .container .inner p.txt1{margin-top:30px; font-weight: 500;;}
#wrap.event1 #popup_review .container .inputBox{padding:30px 0px; margin-top:30px; border-top:1px solid #ba9e72; text-align: left;}
#wrap.event1 #popup_review .container .inputBox ul>li {height:60px; line-height:60px; margin:20px 0px; padding-left:150px;  position: relative;}
#wrap.event1 #popup_review .container .inputBox ul>li span{top:0px; left:0px; position: absolute;}
#wrap.event1 #popup_review .container .inputBox ul>li input{font-size:20px; padding:0px 10px; width:100%; height:100%; background: rgb(255, 255, 255); vertical-align: top;}
#wrap.event1 #popup_review .box{padding-top:20px;}

/*이벤트2*/
#wrap.event2 #section1{position: relative;}
#wrap.event2 #content .wrap{width:100%; height:100%; max-width:none; position: absolute;}
#wrap.event2 #section1 img{width:100%; height:auto;}
#wrap.event2 #section1 .player{width: 40.8%; height: 15.8%; top: 28.1%; left: 29.8%; background-color: #000000;}
#wrap.event2 #section1 .link{width: 8.4%; height: 2%;bottom: 2.9%;}
#wrap.event2 #section1 .link1{left: 41.5%;}
#wrap.event2 #section1 .link2{right: 41.5%;}
#wrap.event2 #section1 .link a{font-size:0px; position: absolute; width:100%; height:100%;}

#wrap.event1 .popup2{top:130px; right:100px; z-index:10; position: absolute;}
#wrap.event2 .popup2{top:130px; right:100px; z-index:10; position: absolute;}

/*이벤트3*/
#wrap.event3 .section{position: relative;}
#wrap.event3 #section1 img, #wrap.event3 #section2 img{width:100%; height:auto;}
#wrap.event3 .link a{font-size:0px; position: absolute; width:100%; height:100%;}
#wrap.event3 .link{width: 8.4%; height: 2.3%;bottom: 3.9%;}
#wrap.event3 .link1{left: 41.2%;}
#wrap.event3 .link2{right: 41.2%;}
#wrap.event3 .popup2{top:130px; right:100px; z-index:10; position: absolute;}
#wrap.event3 .popup2{top:130px; right:100px; z-index:10; position: absolute;}

/*이벤트4*/
#wrap.event4 .section{position: relative;}
#wrap.event4 #section1 img, #wrap.event4 #section2 img, #wrap.event4 #section3 img{width:100%; height:auto;}
#wrap.event4 .link a{font-size:0px; position: absolute; width:100%; height:100%;}
#wrap.event4 .link{width: 8.4%; height: 6.3%;bottom: 10.9%;}
#wrap.event4 .link1{left: 41.2%;}
#wrap.event4 .link2{right: 41.2%;}
#wrap.event4 .popup2{top:130px; right:100px; z-index:10; position: absolute;}
#wrap.event4 .popup2{top:130px; right:100px; z-index:10; position: absolute;}

/*이벤트5*/
#wrap.event5 #section1{position: relative;}
#wrap.event5 #content .wrap{width:100%; height:100%; max-width:none; position: absolute;}
#wrap.event5 #section1 img{width:100%; height:auto;}
#wrap.event5 #section1 .player{width: 40.8%; height: 15.8%; top: 27.7%; left: 29.8%; background-color: #000000;}
#wrap.event5 #section1 .link{width: 8.4%; height: 2%;bottom: 1.6%;}
#wrap.event5 #section1 .link1{left: 41.5%;}
#wrap.event5 #section1 .link2{right: 41.5%;}
#wrap.event5 #section1 .link a{font-size:0px; position: absolute; width:100%; height:100%;}

/* 이벤트5 페이지 팝업(이벤트종료) */
#popup_detail_event .wrap {width: 720px; margin-top:20vh; position: relative; z-index: 2;box-sizing: border-box; display: inline-block;}
#popup_detail_event .content {position: relative;}
#popup_detail_event .content img{width:100%; height:auto;}
#popup_detail_event .wrap .link{width: 47%; height: 14.4%;bottom: 9.6%;}
#popup_detail_event .wrap .link1{left: 26.5%;}
#popup_detail_event .wrap .link1 a {width: 100%; height: 100%;}


/* 모바일 */
@media (max-width: 1024px) {
   img { width:100%; height:auto; }
   img.wid90 { width:90%; }
   img.wid80 { width:80%; }
   img.wid70 { width:70%; }
   img.wid60 { width:60%; }
   img.wid50 { width:50%; }
   img.wid40 { width:40%; }
   img.wid30 { width:30%; }
   img.wid20 { width:20%; }
   img.wid15 { width:15%; }
   img.wid10 { width:10%; }
   body { font-size:14px; }
   .pc { display:none; }
   .mo { display:block; }

   #wrap { min-width:auto; letter-spacing:0px; }

   #header { font-size:12px; }
   #header #mainMenu { padding:15px 0px; }
   #header.moBtnActive #mainMenu { background: none; background-color:#8D021F; } /*  */
   #header .wrap { display: block; }
   #header h1 { width:48px; margin:0px auto; margin-bottom:15px; }
   #header h1 span img { width:53px; }
   #header .wrap nav { margin:0px 60px; justify-content: space-between; }
   #header .wrap nav dl { margin:0px 0px; }
   #header .wrap nav dl a { padding:0px 10px }
   #header .wrap nav dl span::after { display: none; }

   #header button { position: absolute; top:10px; right:10px; margin:0em; border:none; background:none; z-index: 10; }
   #header button span { display:block; }
   #header .lines-button { padding:10px; transition:.3s; cursor:pointer; user-select:none; }
   #header .lines { display:inline-block; width:25px; height:2px; background:#ecf0f1; transition:0.3s; position:relative; }
   #header .lines:before,#header .lines:after { display:inline-block; width:25px; height:2px; background:#ecf0f1; transition:0.5s; position:absolute; left:0; content:''; }
   #header .lines:before { top:0.5rem; }
   #header .lines:after { top:-0.5rem; }
   #header .lines-button:hover .lines:before { top:0.5rem; }
   #header .lines-button:hover .lines:after { top:-0.5rem; }
   #header .lines-button.x.close .lines { background:transparent; }
   #header .lines-button.x.close .lines:before,#header .lines-button.x.close .lines:after { width:25px; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; top:0; }
   #header .lines-button.x.close .lines:before { -webkit-transform:rotate3d(0,0,1,45deg); transform:rotate3d(0,0,1,45deg); }
   #header .lines-button.x.close .lines:after { -webkit-transform:rotate3d(0,0,1,-45deg); transform:rotate3d(0,0,1,-45deg); }
   #header.type2 .lines { background:#333333; }
   #header.type2 .lines:before,#header.type2 .lines:after { background:#333333; }
   #header.type2.moBtnActive .lines { background:#ecf0f1; }
   #header.type2.moBtnActive .lines:before,#header.type2.moBtnActive .lines:after { background:#ecf0f1; }

   #header .mobileMenu { padding:20px 0px; top:60px; left:0px; width:100%; display:none; position: absolute; z-index: 2; background-color: #8D021F; } /* 241226 */
   #header .fade { background-color: rgba(0, 0, 0, 0.25); display: none; position: fixed; width:100%; height:100%; top:0px; left:0px; z-index: 1; }
   #header .mobileMenu a { color: #ffffff; font-size:16px; padding:10px 20px; display: block; font-weight: 600; }
   #header .mobileMenu nav dl span::after { margin-left:10px; right:23px; position: absolute; content: ''; width: 10px; height: 10px; border-top: 2px solid #F5F5F5; border-right: 2px solid #F5F5F5; display: inline-block; transform: rotate(135deg); vertical-align: 4px; }
   #header .mobileMenu nav dl dt.active span::after { transform: rotate(314deg); top:18px; }
   #header .mobileMenu nav dl dd { padding:15px 0px; background-color: rgba(0, 0, 0, 0.1); display: none; }
   #header .mobileMenu nav dl dd a { font-weight: 400; }

   #footer { padding:0px 0px; }
   #footer #banner ul { display: block; }
   #footer #banner ul li { margin:0px 0px; }
   #footer #banner ul li img { width:100%; }
   #footer .bottom { padding:20px; }
   #footer .bottom .sns { width:26px }
   #footer .bottom .shop { width:26px }
   #footer .bottom h3 { font-size:12px; }
   #footer .bottom h3 span::before { margin:0px 5px; width: 2px; height: 10px; vertical-align: -1px; }
   #footer .bottom h3 p { font-size:10px; margin-top:3px; }

   #wrap.main #content #section1 {padding-top:30px; background-size: cover; }
   #wrap.main #content .evtBtn { width: 50px; height: 50px; bottom: 75px; right: 10px; }
   #wrap.main #content #section2 { padding-top:57px; padding-bottom: 590px; background-size: cover; }
   
   #wrap.main #content #section1 .player{width:auto; height:55vw; margin:15px; margin-bottom:30px; box-shadow: 0px 10px 20px 0px #0000004D;}
   #wrap.main #content #section1 p.txt2 {margin:30px 0px; }
   #wrap.main #content #section1 .img1{margin-bottom:-20px;}
   #wrap.main #content #section1 .img3 img {padding-top:0px;}
   
   #wrap #content .rotateTable.wrap .top { height: 275px; }
   #wrap #content .rotateTable.wrap .top .txt>img { height: 110px; }
   #wrap #content .rotateTable.wrap .top .txt .sub1 { font-size:20px; margin-bottom:16px; }
   #wrap #content .rotateTable.wrap .top .txt .sub2 { font-size:16px; padding:4px 10px; }
   #wrap #content .rotateTable.wrap .top .txt .title { font-size:32px; margin-top:10px; }
   #wrap #content .rotateTable.wrap .top .txt .btn { font-size:12px; width:90px; height:37px; line-height:37px; margin-top:15px; }
   #wrap #content .rotateTable.wrap .rotate { width:442px; height:439px; }
   #wrap #content .rotateTable.wrap .rotate .product { width:78px; height:107px; }
   #wrap #content .rotateTable.wrap .rotate .product.active { scale: 1.4; }
   #wrap #content .rotateTable.wrap .rotate-txt { top: 65%; font-size: 20px;letter-spacing: -1px; }
   #wrap.main #content .rotateTable.wrap .rotate-txt {top:63%;}
   #wrap.main #content .rotateTable.wrap .rotate-txt .btn{margin-top:15px;}
   #wrap.main #content .rotateTable.wrap .rotate-txt .btn img{max-width:130px;}
   #wrap #content .rotateTable.wrap .rotate .product .tail { top: -10px; width: 30px; height: 30px; font-size:9px; }

   #wrap.sub #content .wrap { width:90%; }
   #wrap.sub #footer .wrap { width:100%; }
   #wrap.sub #footer .bottom { padding:20px; }

   #wrap.story #section1 { background-image: url(https://chaochai1.cafe24.com/images/m_story_bg.jpg);}
   #wrap.story #section1 .txt { font-size:20px; line-height: 36px; margin-top:24px; }
   #wrap.story #section1 .logo { width:66px; }
   #wrap.story #section2 .wrap .con { flex-direction: column; }
   #wrap.story #section2 .wrap .con .txt dl dt { font-size:24px; text-align: center; }
   #wrap.story #section2 .wrap .con .txt dl dd { font-size:14px; text-align: center; line-height: 28px; }
   #wrap.story #section2 .wrap .con .img { width: 100%; height:auto; background:none; }
   #wrap.story #section2 .wrap .con .txt { margin-left: 0; }
   #wrap.story #section2 .wrap .con .txt .sub-txt { text-align: center; }
   #wrap.story #section2 .wrap .con .txt .sub-txt img { width:auto; margin:0 auto; }
   #wrap.story #section2 .wrap .con+.con { margin-top:72px; }
   #wrap.story #section2 .wrap .con3 .img { top:13%; }
   #wrap.story #section2 .wrap .con .txt dl dd+dd { margin-top:20px; }
   #wrap.story #section2 .inner { padding-top:0px; padding-bottom:48px; }

   #wrap.product #section1{ height: 55vh; background-image: url(https://chaochai1.cafe24.com/images/m_product_bg.png); background-position-x: 23%;}
   #wrap.product #section1 .txt{margin-top:3%; width:165px;}
   #wrap.product #section1 .txt .sub1{width:47px;height: 25px; margin:0px auto;}
   #wrap.product #section1 .txt .title{font-size:20px;margin-bottom: 8px;}
   #wrap.product #section1 .txt .sub2{font-size:12px;}
   #wrap.product #section2 .circle{margin-top: -10vw;}
   #wrap.product #section2{margin-top:47vh; padding-top: 10vw;}
   #wrap.product #section2 .inner{padding-top:10px;}
   #wrap.product #section2 .inner .product-wrap{padding-top:24px; padding-bottom: 0;}
   #wrap.product #section2 .inner .product-menu.main li{font-size:16px; margin-right: 16px;}
   #wrap.product #section2 .inner .product-menu.main li.active{}
   #wrap.product #section2 .inner .product-menu.sub{margin-top:24px;}
   #wrap.product #section2 .inner .product-menu.sub li{font-size:14px; padding: 8px 15px;}
   #wrap.product #section2 .inner .product-menu.sub li.active{}
   #wrap.product #section2 .inner .product-wrap ul li{width: 50%; margin-bottom: 48px;}
   #wrap.product #section2 .inner .product-wrap li .title{font-size:15px; line-height:20px;}
   #wrap.product #section2 .inner .product-wrap li .sub{font-size:8px;margin-top: 10px;margin-bottom: 10px;}
   #wrap.product #section2 .inner .product-wrap ul li .tail{font-size: 11px;width: 40px;height: 40px;right:0%;top: 0%;}

   #popup_detail .wrap {width: 96%; margin-top:2vh;}
   #popup_detail .content {padding-bottom: 20vw}
   #popup_detail .content #player{height:169vw;}
   #popup_detail .scrollWrap{height:90vh; }
   #popup_detail .scrollWrap::-webkit-scrollbar { width:5px; } 
   #popup_detail .top{width:40px; height:40px; top:10px; right:10px; }

   #wrap.recipe #section1{ height: 55vh; background-image: url(https://chaochai1.cafe24.com/images/m_recipe_bg.png); background-position-x: 23%;}
   #wrap.recipe #section1 .txt{margin-top:3%; width:165px;}
   #wrap.recipe #section1 .txt .sub1{width:47px;height: 25px; margin:0px auto;}
   #wrap.recipe #section1 .txt .title{font-size:20px;margin-bottom: 8px;}
   #wrap.recipe #section1 .txt .sub2{font-size:12px;}
   #wrap.recipe #section2 .circle{margin-top: -10vw;}
   #wrap.recipe #section2{margin-top:47vh; padding-top: 10vw;}
   #wrap.recipe #section2 .inner{padding-top:10px;}
   #wrap.recipe #section2 .inner .product-wrap{padding-top:24px; padding-bottom: 0;}
   #wrap.recipe #section2 .inner .product-menu.sub li{font-size:14px; }
   #wrap.recipe #section2 .inner .product-menu.sub li a{padding: 8px 15px;}
   #wrap.recipe #section2 .inner .product-wrap ul li{width: 50%; margin-bottom: 25px;}
   #wrap.recipe #section2 .inner .product-wrap ul li a{margin:0px 7px;}
   #wrap.recipe #section2 .inner .product-wrap li .title{margin-top:15px; font-size:14px; line-height:17px;}

   #wrap.recipe.detail #section2 .inner {padding-top:10px; padding-bottom:50px;}
   #wrap.recipe.detail #section2 .inner #player{margin-bottom:20px; height:159vw;}
   #wrap.recipe.detail #section2 .inner #slider{margin-bottom:20px;}
   #wrap.recipe.detail #section2 .inner #recipe{margin-bottom:20px;}
   #wrap.recipe.detail #section2 .inner .btnContainer{width:100%;}
   #wrap.recipe.detail #section2 .inner .btnContainer span{margin:0px 5px;}
   #wrap.recipe.detail #slider .swiperWrap .swiper-pagination {padding:2px 7px; border-radius: 20px;  bottom:5px; } 
   #wrap.recipe.detail #slider .swiperWrap .swiper-pagination-bullet { width:7px; height:7px; margin:2px 3px; border-radius:50%; background:rgba(255, 255, 255, 0.5) } 
   #wrap.recipe.detail #slider .swiperWrap .swiper-pagination-bullet-active { background:rgba(255, 255, 255, 1); } 

   #wrap.event1 #content .container{display: block;}
   #wrap.event1 #section1 {height:121vw; padding-top:38vw; background-image: url(https://chaochai1.cafe24.com/images/event_m_bg.jpg);}
   #wrap.event1 #section1 h2 img{max-width:50vw;}
   #wrap.event1 #content #section2{padding:35px 0px;}
   #wrap.event1 #content .section p.title img{max-width:72vw;}
   #wrap.event1 #content .section p.title span::before {margin-bottom:15px;}
   #wrap.event1 #content .section p.title span{font-size:14px; margin:0px 30px; margin-top:17px;}
   #wrap.event1 #content #section2 .box{width:auto; padding:10px 20px; font-size:14px; letter-spacing: -0.5px;}
   #wrap.event1 #content #section2 .box li{margin:10px 0px; padding-left:66px; }
   #wrap.event1 #content #section2 .btn{margin-top:20px;}
   #wrap.event1 #content #section3 { padding-top:40px; padding-bottom: 490px;}
   #wrap.event1 #content .rotateTable.wrap .rotate {background-image: url(https://chaochai1.cafe24.com/images/event_rotate.png);}
   #wrap.event1 #content .rotateTable.wrap .rotate-txt {font-size:17px; top:60%;}
   #wrap.event1 #content #section4{padding:35px 0px; background-size: cover; background-image: url(https://chaochai1.cafe24.com/images/event_section4_m_bg.png);}
   #wrap.event1 #content #section4 p.title img{height:15vw; width:auto; max-width: none;}
   #wrap.event1 #content #section4 p.title span{margin-top:15px;}
   #wrap.event1 #content #section4 .box ul{display: block;}
   #wrap.event1 #content #section4 .box li{margin:25px 0px;}
   #wrap.event1 #content #section4 .box li:last-child{margin-right:0px;}
   #wrap.event1 #content #section4 .box li img{max-width:none;}
   #wrap.event1 #content #section5{padding:40px 0px;}
   #wrap.event1 #content #section5 p.title img{height:15vw; width:auto; max-width: none;}
   #wrap.event1 #content #section5 p.title span{margin-top:15px;}
   #wrap.event1 #content #section5 p.title span em{display: block; margin-bottom:20px;}
   #wrap.event1 #content #section5 p.title span em.small{font-size:10px; margin-top:-10px; margin-bottom:0px;}
   #wrap.event1 #content #section5 .box{margin:20px 0px;}
   #wrap.event1 #content #section5 .btn{margin-top:30px;}
   #wrap.event1 #content #section6{padding:40px 0px;}
   #wrap.event1 #content #section6 p.title img{height:15vw; width:auto; max-width: none;}
   #wrap.event1 #content #section6 p.title span{margin-top:15px;}
   #wrap.event1 #content #section6 p.title span em{margin-bottom:15px;}
   #wrap.event1 #content #section6 p.title span em.small{font-size:10px; margin-top:-10px; margin-bottom:15px;}
   #wrap.event1 #content .section p.title em.txt1::before {margin-top:15px; margin-bottom:15px;}

   #wrap .popup.common .wrap {width:96%;}

   #wrap.event1 .popup.common .wrap{border-radius: 20px; margin-top:10px; margin-bottom:10px;}
   #wrap.event1 .popup.common .close{width:32px; top:15px; right:15px;}
   #wrap.event1 .popup.common .content .title{font-size:18px; margin-top:30px; padding:15px;}
   #wrap.event1 .popup.common .content .box{font-size:12px; padding:20px 15px;}
   #wrap.event1 .popup.common .content .box li{margin:8px 0px; padding-left:10px; }
   #wrap.event1 .popup.common .content .box li::before {width: 2px; height: 2px; top:9px; }
   #wrap.event1 .popup.common .content .box .btn{margin-top:30px; text-align: center;}
   #wrap.event1 .popup.common .content .box .btn img{max-width:600px;}

   #wrap.event1 #popup_policy .content .box dl{padding-bottom:20px; margin-bottom:20px;}
   #wrap.event1 #popup_policy .content .box dl dt{font-size:14px;}
   #wrap.event1 #popup_policy .content .box p.txt1{font-size:14px;}

   #wrap.event1 #popup_register .container{margin:15px; margin-top:50px; padding:8px; background-size: cover;}
   #wrap.event1 #popup_register .container .inner{font-size:12px; padding:25px 15px; }
   #wrap.event1 #popup_register .container .inner h4{margin-bottom:20px;}
   #wrap.event1 #popup_register .container .inner h4 img{max-width:200px;}
   #wrap.event1 #popup_register .container .inputBox{padding:20px 0px; margin:20px 0px; border-top:1px solid rgba(255, 233, 177, 0.4); border-bottom:1px solid rgba(255, 233, 177, 0.4);}
   #wrap.event1 #popup_register .container .inputBox ul>li {height:30px; line-height:30px; margin:10px 0px; padding-left:70px;}
   #wrap.event1 #popup_register .container .inputBox ul>li input{font-size:12px; padding:0px 5px;}
   #wrap.event1 #popup_register .container .inputBox ul>li.addr1{margin:3px 0px; padding-right:100px;}
   #wrap.event1 #popup_register .container .inputBox ul>li.addr2{margin:3px 0px; }
   #wrap.event1 #popup_register .container .inputBox ul>li.addr1 a{width:100px; }
   #wrap.event1 #popup_register .container .agree label input{width:18px; height:18px; margin-right:5px; vertical-align: -4px;}
   #wrap.event1 #popup_register .box{padding-top:0px;}

   #wrap.event1 #popup_review .container{margin:15px; margin-top:50px; padding:3px;}
   #wrap.event1 #popup_review .container .inner{font-size:12px; padding:25px 15px;}
   #wrap.event1 #popup_review .container .inner h4{margin-bottom:20px;}
   #wrap.event1 #popup_review .container .inner h4 img{max-width:200px;}
   #wrap.event1 #popup_review .container .inner p.txt1{margin-top:30px;}
   #wrap.event1 #popup_review .container .inputBox{padding:20px 0px; margin-top:20px; padding-bottom:0px;}
   #wrap.event1 #popup_review .container .inputBox ul>li {height:30px; line-height:30px; margin:10px 0px; padding-left:70px;}
   #wrap.event1 #popup_review .container .inputBox ul>li input{font-size:12px; padding:0px 5px;}
   #wrap.event1 #popup_review .box{padding-top:5px;}
   
	#wrap.event2 #content .wrap{width:100%;}
	#wrap.event2 #section1 .player{width: 85%; height: 9.9%; top: 26.9%; left: 7.5%;}
	#wrap.event2 #section1 .link{width: 42%; height: 3%; bottom: 2.1%;}
	#wrap.event2 #section1 .link1{left: 6.8%;}
	#wrap.event2 #section1 .link2{right: 6.8%;}
	
	#wrap.event1 .popup2{width:90%; top:250px; right:5%;}
	#wrap.event2 .popup2{width:90%; top:120px; right:5%;}
	#wrap.event3 .popup2{width:90%; top:120px; right:5%;}
	#wrap.event4 .popup2{width:90%; top:120px; right:5%;}
	
	#wrap.event3 .link{width: 23.4%; }
	#wrap.event3 .link1{left: 26.2%;}
	#wrap.event3 .link2{right: 26.2%;}
	
	#wrap.event4 .link{width: 23.4%; }
	#wrap.event4 .link1{left: 26.2%;}
	#wrap.event4 .link2{right: 26.2%;}
	
   #wrap.event5 #content .wrap{width:100%;}
	#wrap.event5 #section1 .player{width: 85%; height: 9.9%; top: 26.7%; left: 7.5%;}
	#wrap.event5 #section1 .link{width: 42%; height: 3%; bottom: 2.2%;}
	#wrap.event5 #section1 .link1{left: 6.8%;}
	#wrap.event5 #section1 .link2{right: 6.8%;}

   #wrap.event5 .link{width: 23.4%; }
	#wrap.event5 .link1{left: 26.2%;}
	#wrap.event5 .link2{right: 26.2%;}

   #popup_detail_event .wrap {width: 96%; margin-top:20vh;}
   #popup_detail_event .content {padding-bottom: 20vw}
   #popup_detail_event .top{width:40px; height:40px; top:10px; right:10px; }
   #popup_detail_event .wrap .link{width: 48%; height: 11%; bottom: 31.5%;}
   #popup_detail_event .wrap .link1{left: 26%;}   
   #popup_detail_event .wrap .link1 a {width: 100%; height: 100%;}
}

@media (max-width: 600px){
   #wrap.story #section2 { padding-top: 15vw; }
   #wrap.story #section2 .circle { margin-top: -15%; }
}

@media (max-width: 1024px) and (min-width: 700px) {
   #wrap.product #section2 .inner .product-wrap ul li .tail{right:6vw; top:0px;}
}


@media (min-width: 1001px){
   #header:hover #mainMenu { color:#333333; background: none; background-color: #FFFFFF; border-bottom: 1px solid #E6E6E6; }
   #header:hover #mainMenu h1 span.type1 { display: none; }
   #header:hover #mainMenu h1 span.type2 { display: block; }
   #header:hover #mainMenu .wrap nav dl span::after { border-top: 2px solid #333333; border-right: 2px solid #333333; }
   #wrap.sub #header:hover #mainMenu { color:#333333; background: none; background-color: #FFFFFF; border-bottom: 1px solid #E6E6E6; }
   #wrap.sub #header:hover #mainMenu dt a { color:#333333; }
   #wrap.sub #header:hover #mainMenu dl.active dt a { color:#333333; }
   #wrap.sub #header:hover #mainMenu dt.on a { color:#333333; }
   #wrap.sub #header:hover .wrap nav dl.active span::after { border-top: 2px solid #333333; border-right: 2px solid #333333; }
   #wrap.sub #header:hover.type2 .wrap nav dl span::after { border-top: 2px solid #333333; border-right: 2px solid #333333; }
}




   @keyframes Rotate { 
   from { transform: rotate(360deg); }
   to { transform: rotate(0deg); }
   }

   @-webkit-keyframes Rotate { 
   from { -webkit-transform: rotate(360deg); }
   to { -webkit-transform: rotate(0deg); }
   }