/* 상단 */

.gnb {background: #ffffff;  }
.gnb .logo {padding-left: 15px;}
.gnb .logo img {height: 34px;}

.gnb .top_section {padding: 28px 0; position: relative; max-width: 1200px; margin: 0 auto;}
.gnb .top_section .gnb_right {position: absolute; right: 15px; top: 28px; }
.gnb .top_section .gnb_right ul li {display: inline-block; text-align: center; line-height: 1.0; margin-left: 20px;}
.gnb .top_section .gnb_right ul li .img {padding: 0 0 5px 0;}
.gnb .top_section .gnb_right ul li .img img {height: 14px;}
.gnb .top_section .gnb_right ul li a {color: #463a43; font-size: 1.2rem;}


.nav_mid_wrap {padding: 0 0 0 0;   background: #f3f3f3;
    position: sticky;  position: -webkit-sticky; top: 0;  z-index: 998;
}


ul.nav_mid { margin: 0 auto; max-width: 1200px; }
ul.nav_mid li {display: inline-block; padding: 0 16px; height: 56px; line-height: 56px; vertical-align: middle;}
ul.nav_mid li:first-child {padding-left: 15px;}
ul.nav_mid li.hv {}


ul.nav_mid li a {font-size: 1.4rem; line-height: 1.0; font-weight: 500; color: #000; padding: 5px 0;  cursor: pointer;}
ul.nav_mid li a strong {font-size: 14px; font-weight: bold;}

ul.nav_mid a.hv_anchor {position: relative; display: inline-block; line-height: 46px; }

ul.nav_mid li.hv:focus a.hv_anchor,
ul.nav_mid li.hv:focus-within a.hv_anchor,
ul.nav_mid li.hv:hover a.hv_anchor,
ul.nav_mid a.hv_anchor:focus,
ul.nav_mid a.hv_anchor.active,
ul.nav_mid a.hv_anchor:hover { color: #E11834;}


ul.nav_mid a.hv_anchor:after { content: "";   height: 100%; width: 0%;
    position: absolute;
    border-bottom: 2px solid #FF0000;
    bottom: 0px;  left: 0;
    transition: width 300ms ease-in-out;
}

ul.nav_mid li.hv:focus a.hv_anchor:after,
ul.nav_mid li.hv:focus-within a.hv_anchor:after,
ul.nav_mid li.hv:hover a.hv_anchor:after,
ul.nav_mid a.hv_anchor:focus:after,
ul.nav_mid a.hv_anchor.active:after,
ul.nav_mid a.hv_anchor:hover:after { width: 100%; }

ul.nav_mid .sn_body {position: absolute; left: 0; top: 56px; width: 100%;  text-align: left; z-index: 999;
    background-color: #f3f3f3; overflow: hidden;
    max-height: 0; opacity: 0;
    transition: all 0.2s ease-in-out;
}
ul.nav_mid .hv:hover .sn_body { max-height: 600px; opacity: 1; }

ul.nav_mid .snb_content {padding: 30px 0; max-width: 1200px; margin: 0 auto;}
ul.nav_mid .snb_content dl {height: auto; line-height: normal;}
ul.nav_mid .snb_content dl dd {display: inline-block; margin: 0 16px;  vertical-align: top;}
ul.nav_mid .snb_content dl dd:first-child {margin-left: 15px;}
ul.nav_mid .snb_content dl dd a {color: #000000; font-size: 1.4rem; font-weight: 500;}
ul.nav_mid .snb_content dl dd a strong { font-weight: 700;}


ul.nav_mid .snb_content dl dd.childAutoD3 {}
ul.nav_mid .snb_content dl dd .d3 {padding: 10px 0 0 0;}
ul.nav_mid .snb_content dl dd .d3 dl {display: block; }
ul.nav_mid .snb_content dl dd .d3 dl dd {display: block; margin: 0;}
ul.nav_mid .snb_content dl dd .d3 dl dd a {display: block; font-weight: normal; padding: 8px 0;}


.mobile_nav_wrap { position: sticky;  position: -webkit-sticky; top: 0; background: #fff;  z-index: 998;
    height: 50px; display: none;
}

.mobile_gnb {position: relative;}
.mobile_gnb .logo {position: absolute; left: 50%; top: 12px; transform: translateX(-50%);}
.mobile_gnb .logo img {height: 20px;}

.mobile_gnb .gnb_right {position: absolute; right: 15px; top: 15px; }
.mobile_gnb .gnb_right li {display: inline-block; font-size: 0; margin-left: 11px;}
.mobile_gnb .gnb_right .img img {height: 18px;}

.mobile_gnb .ham {position: absolute; left: 15px; top: 15px; }
.mobile_gnb .ham .xi {font-size: 20px;}

.side_menu {width: 100%; max-width: 390px;  height: 100%; overflow-y: auto; background: #f3f3f3;
    position: fixed; left: -100%; top: 0;  transition: all 0.1s ease-out;
    opacity: 0;
}
.side_menu.active {opacity: 1; left: 0; z-index: 99;}
.side_menu .close {display: block; width: 30px; height: 30px; text-align: center; position: absolute; right: 10px; top: 20px; }
.side_menu .close i.xi {font-size: 20px; color: #000;}

html.expand #side_bgc {position: fixed; top:0; right:0; width:100%; height:100%;  background: rgba(0,0,0,.7); }
.side_menu .side_logo {padding: 15px 0; text-align: center;}
.side_menu .side_logo img {height: 19px;}

#side_list { width:100%;  margin:0; position: relative; }
#side_list li {display:block; padding: 0 0; margin-left: 5px; height:auto; line-height:40px; position:relative; border-bottom: 1px solid #dcdcdc;}
#side_list li.hv {}
#side_list li.hv:after {display: block; position: absolute; right:0; top:0;  width:40px; height:50px; line-height:50px; text-align: center; font-size: 15px; content: "\e941"; font-family:'xeicon';
    transform:  rotate(0deg);transition: transform 120ms 200ms ease-out;    color: #313131;
}
#side_list li.hv.on:after {	transform: rotate(-180deg);    transition: transform 120ms ease-in-out;}
#side_list li.hv.none:after {display: none;}

#side_list li a {font-size:15.5px; padding: 0 15px;  display: block; height:50px; line-height:50px; font-weight:500 ; border-bottom:none;}
#side_list li a.active,
#side_list li a:hover {border-bottom:none;}

#side_list li .sn_body {display:none;}
#side_list li dl { width:100%; min-height:40px; height:auto;  padding: 5px 0; text-align:left;  position: relative;  }
#side_list li dl dd {display:block;  margin:0 ; padding:0; height: auto; line-height: auto; vertical-align:top; border-bottom:none;}
#side_list li dl dd a {padding-left: 25px;}



@media (max-width: 768px) {
    .mobile_nav_wrap {display: block;}
    .gnb {display: none;}
    .nav_mid_wrap {display: none;}
}



/* 하단 */
.tail_wrap { padding: 0 15px 0; }
.tail_wrap .tail { padding: 40px 0; max-width: 1600px; margin: 0 auto; position:relative; font-size: 1.6rem; color: #4d4d4d;
    border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;
     display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
}
.tail_wrap .tail a {color: #4d4d4d;}

.tail .item {flex: 0 0 16%; margin-bottom: 30px;}
.tail .item.large {flex: 0 0 20%; }


.tail_wrap .tail .com_info {  line-height: 1.7; font-size: 1.5rem; color:  rgba(0,0,0,0.5);}
.tail_wrap .tail .com_info p {font-size: 1.6rem; font-weight: bold; line-height: 1; margin: 0 0 20px 0; color: #fff;}

.tail_wrap .copy {padding: 20px 0; text-align: center;  font-size: 1.2rem; color: #4d4d4d;}
.tail_wrap .copy img {height: 21px; vertical-align: middle; margin-right: 21px;}

.tail_wrap .btm_title {margin: 0 0 10px 0; font-weight: 500;}
.tail_wrap dl.btm_list {}
.tail_wrap dl.btm_list dd {padding: 3px 0;}
.tail_wrap dl.btm_list dd a {font-size: 1.5rem;  font-weight: normal; letter-spacing: -0.05rem;}
.tail_wrap dl.btm_list dd a:before {content:"\e93f"; font-family: "xeicon";}


@media (max-width: 1600px) {
    .tail .item {flex: 0 0 15%;}
    .tail .item.large {flex: 0 0 25%; }

    
}


@media (max-width: 1024px) {
    .tail .item {display: none;}
    .tail .item.large {display: block; width: 100%; flex: 0 0 100%; margin-bottom: 0;}
 
}
@media (max-width: 768px) {

    .tail_wrap .btm_title {font-size: 1.3rem;}
    .tail_wrap dl.btm_list dd a {font-size: 1.2rem;}
    .tail_wrap .tail .com_info {font-size: 1.3rem;}
}



.btn_sns_wrap {padding: 29px 0 0 0; font-size: 0;}
.btn_sns_wrap a {display: inline-block; margin-right: 3px;}

.btn_fix_kakao {position: fixed; width: 64px; right: 20px; bottom: 20px; z-index: 10;}    
.btn_fix_kakao a {display: block;}
.btn_fix_kakao a img {width: 100%;}

@media (max-width: 768px) {
    .btn_fix_kakao {position: fixed; width: 38px; right: 15px; bottom: 15px;} 
}


/* 중간 */

.contents_body {max-width: 1200px; margin: 0 auto; padding: 70px 15px;}
h1.pt,
h2.pt {font-weight: 500; font-size: 3.8rem; line-height: 1.0; margin: 0 0 30px 0;}

@media (max-width: 1024px) {
    .contents_body {padding: 35px 15px;}
    h1.pt,
    h2.pt { font-size: 2.4rem;}
      
}


.video-container {    position:relative;    padding-bottom:56.25%;    padding-top:0;    height:0;    overflow:hidden;}
.video-container iframe, 
.video-container object, 
.video-container embed{    position:absolute;    top:0;    left:0;    width:100%;    height:100%;}



/* matters */

.matter_wrap {max-width: 1920px; margin: 0 auto; overflow: hidden; }
.matter_wrap section {overflow: hidden; margin-bottom: 60px;}
.matter_wrap section:after {content:""; display:block; clear:both;}
.matter_wrap section img {max-width: 100%;}

.matter_wrap section.space {margin: 0 7.5% 60px;}

.matter_wrap .imgOnly {position: relative; font-size: 0; z-index: 10; }
.matter_wrap .imgOnly img {width: 100%;}
.matter_wrap .ab {position: absolute; width: 24%; right: -4%; bottom: 4%;}
.matter_wrap .ab img {width: 100%;}
.matter_wrap .redLine {color: #f80000; font-size: 1.6rem; margin: 0 0 30px 0; font-weight: bold;}
.matter_wrap .redLine span {display: inline-block; position: relative; padding: 0 0 5px 0;}
.matter_wrap .redLine span:after {content:""; display: block; width: 2000%; height: 1px; background: #f80000;
     position: absolute; right: 0;  bottom: 0;
}

.matter_wrap .t1 {font-size: 4.0rem; color: #0c0c0c; margin: 0 0 29px 0; font-weight: bold; position: relative;}
.matter_wrap .t1.white {color: #ffffff;}
.matter_wrap .t2 {font-size: 2.4rem; color: #0c0c0c; margin: 0 0 ; line-height: normal;}
.matter_wrap .t2 span.c { font-weight: bold; color: #cc1719;}

.matter_wrap .t4 {font-size: 1.6rem; color: #000000; margin: 0 0 ; line-height: 1.5;}
.matter_wrap .t4.white {color: #ffffff;}

.matter_wrap .t1 .tt_img {width: 16%; position: absolute; left: 50%; top: -50px;}
.matter_wrap .t1 .tt_img img {width: 100%;}

.matter_wrap .more_view {padding: 40px 0 0;}
.matter_wrap .more_view a {display: inline-block; background: #f80000; line-height: 40px; border-radius: 20px 20px 20px 0;  padding: 0 25px; color: #fff; font-size: 1.8rem; cursor: pointer;}
.matter_wrap .more_view a:after {content:" \e90b"; font-family: "xeicon";}

.matter_wrap .more_view.recipe {position: absolute; bottom: 15px; left: 15px;}

.box_type1 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;}
.box_type1 .item {flex: 0 0 50%; position: relative;}
.box_type1 .item.black {background: #282a2b;}
.box_type1 .pos_vert {position: absolute; width: 70%; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%);}

.box_type1 .conts {max-width: 1200px; margin: 0 auto; padding: 0 15px;}

.box_type2  {background: #0c0c0c; padding: 57px 0 80px;}
.box_type2 .conts {max-width: 1200px; margin: 0 auto; padding: 0 15px;}

.matter_wrap .t3 {font-size: 4.0rem; color: #ffffff; margin: 0 0 29px 0; font-weight: bold;
    position: relative; margin-left: 24px;
}
.matter_wrap .t3 span {font-weight: normal;}
.matter_wrap .t3:before {content:"“"; display: block; width: 20px; position: absolute; left: -24px; top: -5px }
.matter_wrap .t3.not {margin-left: 0;}
.matter_wrap .t3.not:before {display: none;}


.matter_wrap .redLine2 {color: #ffffff; font-size: 1.6rem;  margin: 0 0 56px 0; font-weight: bold;}
.matter_wrap .redLine2 span {position: relative; padding: 0 0 5px 0;}
.matter_wrap .redLine2 span:after {content:""; display: block; width: 1000%; height: 1px; background: #f80000;
     position: absolute; right: 0; bottom: 0;
}
.matter_wrap .redLine2 p {color: #f80000; display: inline;}

.matter_wrap .more_movie {position: absolute; right: 15px; bottom: 0px; }
.matter_wrap .more_movie a {display: inline-block; font-size: 2.4rem; color: #ffffff; font-weight: bold; cursor: pointer;}


@media (max-width: 1400px) {
    .matter_wrap .t1 {font-size: 3.0rem; line-height: 1.3;}
    .matter_wrap .t3 {font-size: 3.0rem; line-height: 1.3;}

    .matter_wrap .t2 {font-size: 2.0rem; }
    .matter_wrap .more_view a {font-size: 1.7rem;}
}

@media (max-width: 1300px) {
    .box_type1 .pos_vert.no_ab {width: 100%; position: static;
        left: auto; top: auto; transform: none;
        padding-left: 50px;
    }    
}

@media (max-width: 1200px) {

    .box_type1.early {display: block;}
    .box_type1.early .item {display: block; width: 100%;}
    .box_type1.early .item.item_txt {padding: 50px 50px;}
    .box_type1.early .pos_vert {width: 100%; position: static;
        left: auto; top: auto; transform: none;
    }

    .matter_wrap .t1 {font-size: 2.0rem; line-height: 1.3;}
    .matter_wrap .t1 .tt_img {left: auto; right: 0; top: -40px;}
    .matter_wrap .t2 {font-size: 1.4rem; }
    .matter_wrap .more_view a {font-size: 1.6rem;}
    .matter_wrap .more_movie a {font-size: 1.6rem;}
}

@media (max-width: 768px) {
    .matter_wrap section {margin-bottom: 40px;}
    .matter_wrap section.space {margin: 0 15px 40px;}

    .box_type1 {display: block;}
    .box_type1 .item {display: block; width: 100%;}
    .box_type1.early .item.item_txt,
    .box_type1 .item.item_txt {padding: 30px 30px;}
    .box_type1 .pos_vert {width: 100%; position: static;
        left: auto; top: auto; transform: none;
    }
    .box_type1 .pos_vert.no_ab {padding-left: 0;}
    .box_type2 {padding: 35px 0;}


    .matter_wrap .redLine2 {margin-bottom: 28px;}
    .matter_wrap .redLine2:after {left: 0;  }

    .matter_wrap .more_view a {font-size: 1.5rem; line-height: 34px; border-radius: 17px 17px 17px 0; }
    .matter_wrap .more_movie a {font-size: 1.5rem;}

    .matter_wrap .t3 {font-size: 2.0rem; margin-left: 14px;}
    .matter_wrap .t3:before {left: -14px; }

    .matter_wrap .t4 {font-size: 1.4rem; }

}



.box_type3  {background: #000000; padding: 0; position: relative;}
.box_type3:after {content:""; display:block; clear:both;}
.box_type3 .conts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px;}

.box_type3 .conts .item {padding: 70px 0 0 110px;}

.box_type3 .addImg {  text-align: right; font-size: 0;}
/* .box_type3 .addImg img {width: 100%; max-width: 1120px;} */
.box_type3 .addImg img {width: 100%;}
.box_type3 .t4 { color: #fff; max-width: 580px; line-height: 1.8; padding: 40px 0 30px 0;}

@media (max-width: 820px) {
    .box_type3 .conts { display: block; gap: 0;}
    .box_type3 .conts .item {padding: 50px 30px;}
}


.matter_wrap .t5 {font-size: 1.6rem; color: #000000; margin: 0 0 ; line-height: 1.5;}
.matter_wrap .t5 .t51 {font-weight: 600; font-size: 1.8rem; color: #cc1719; margin: 0 0 10px 0;}

.matter_wrap .lr_box {display: grid; grid-template-columns: 0.9fr 1fr ; column-gap: 80px;}
.matter_wrap .lr_box .t7 { font-size: 2.2rem; font-weight: 500; }
.matter_wrap .lr_box .t7 .c {color: #cc1719;}
@media (max-width: 768px) {
    .matter_wrap .lr_box { display: block; }
    .matter_wrap .lr_box .txt_box { padding: 20px 15px 20px 15px;}
}

.size_wrap {}
.size_wrap .st {text-align: center; margin: 0 0 50px 0; font-weight: 600; font-size: 3.0rem;}

.size_wrap .group {display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 15px; row-gap: 30px}
.size_wrap .group.grid4 {  grid-template-columns: 1fr 1fr 1fr 1fr; }
.size_wrap .group .item {text-align: center;}
.size_wrap .group .sname { font-weight: 500; font-size: 1.6rem;}
.size_wrap .group .img {}
.size_wrap .group .img img  {max-height: 191px; max-width: 100%;}

@media (max-width: 768px) {
    .size_wrap {padding: 0 15px;}
    .size_wrap .st {font-size: 2.4rem;}
    .size_wrap .group.grid4,
    .size_wrap .group {grid-template-columns: 1fr 1fr; }
    .size_wrap .group .sname  {font-size: 1.4rem;}
}



.matter_wrap .t6 {text-align: center; font-size: 3.1rem; font-weight: bold; margin: 0 0 30px 0; line-height: 1.2;}

.matter_wrap .matter_cook { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
    align-items: center;
    margin: 0 0 30px 0;
}

.matter_cook .item {flex: 0 0 50%; order: 2; }
.matter_cook .item.order_first {order: 1; }
.matter_cook .item .img img {width: 100%;}

.matter_cook.movie {gap: 30px; }
.matter_cook.movie .item {flex: 0 0 calc(50% - 15px);}

.matter_cook .movie,
.matter_cook .movie iframe {border-radius: 8px;}

@media (max-width: 468px) {
    .matter_wrap .t6 {font-size: 2.7rem;}
    .matter_wrap .matter_cook {margin-bottom: 45px;}
    .matter_cook .item,
    .matter_cook.movie .item {flex: 0 0 100%; }
    .matter_cook .item.order_first {order: 3; }

}

.matter_wrap .sbody { position: relative; }
.matter_wrap .sbody .img {}
.matter_wrap .sbody .img img {width: 100%;}
.matter_wrap .sbody .img.mobile { display: none;}

.matter_wrap .sbody .txt_body { position: absolute; width: 460px; right: 0; top: 50%; transform: translateY(-50%);
    padding: 0 50px 0 0; z-index: 5; color: #fff; font-size: 1.7rem; line-height: 1.66;
}

@media (max-width: 768px) {
    .matter_wrap .sbody .txt_body {position: static; right: auto; top: auto; transform: translateY(0); padding: 15px 15px 0; width: 100%; color: #000; font-size: 1.6rem;}
    .matter_wrap .sbody .img.pc { display: none;}
    .matter_wrap .sbody .img.mobile { display: block;}
}


.s5_wrap {display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; margin: 40px 0;}
.s5_wrap .item .t11 { font-size: 3.6rem; color: #000000; margin: 0 0 29px 0; font-weight: bold;}
.s5_wrap .item .t11 span { color: #de001f;}
.s5_wrap .item .img_pc { text-align: center; padding: 30px 0 40px;}
.s5_wrap .item .img_mo { display: none;}

.s5_wrap .img {text-align: center; padding: 30px 0 40px;}
.s5_wrap .signature {display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 40px;
    padding: 40px 0 0 0;
}
.s5_wrap .signature .item { display: flex; }
.s5_wrap .signature .thumb {flex: 0 0 140px;}
.s5_wrap .signature .thumb img {max-width: 120px;}
.s5_wrap .signature .desc {font-size: 1.6rem;}
.s5_wrap .signature .desc strong {display: block; margin: 0 0 14px 0;}


@media (max-width: 1200px) {
    .s5_wrap .signature { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px;
        padding: 40px 0 0 0;
    }
}
@media (max-width: 768px) {
    .s5_wrap {display: block; padding: 0 15px;}
    .s5_wrap .item .t11 {font-size: 2.2rem; line-height: 1.3;}
	.s5_wrap .item .img_pc { display: none;}
    .s5_wrap .item .img_mo { display: block;}
}








.recipe_wrap { overflow: hidden;  background: #f6f6f6;}
.recipe_wrap.mb {margin-bottom: 50px;}
.recipe_wrap section {overflow: hidden; margin-bottom: 60px; max-width: 1920px; margin: 0 auto;}
.recipe_wrap section:after {content:""; display:block; clear:both;}
.recipe_wrap section img {max-width: 100%;}
.recipe_wrap section.space {margin: 0 7.5% 60px;}

.recipe_wrap section:nth-child(2n) .recipe_type1 .item_img {order: 1;} /* 짝수행은 이미지가 뒤에 나오게 */ 


.recipe_wrap .imgOnly {position: relative; font-size: 0; z-index: 10; }
.recipe_wrap .imgOnly img {width: 100%;}

.recipe_type1 { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;}
.recipe_type1 .item {flex: 0 0 50%; position: relative;}
.recipe_type1 .item.black {background: #282a2b;}


.recipe_wrap .redLine {color: #f80000; font-size: 1.6rem; margin: 0 0 30px 0; font-weight: bold;}
.recipe_wrap .redLine span {display: inline-block; position: relative; padding: 0 0 5px 0;}
.recipe_wrap .redLine span:after {content:""; display: block; width: 2000%; height: 1px; background: #f80000;
     position: absolute; right: 0;  bottom: 0;
}

.recipe_wrap .txt_box {padding: 50px 50px; margin-bottom: 50px;}


.recipe_wrap .t1 {font-size: 4.0rem; color: #0c0c0c; margin: 0 0 29px 0; font-weight: bold; position: relative;}
.recipe_wrap .t2 {font-size: 1.6rem; color: #0c0c0c; margin: 0 0 ; line-height: 1.5;}

.recipe_wrap .t2 .kt {font-weight: bold; margin: 0 0 14px 0; font-size: 1.2em;}
.recipe_wrap .t2 .st {font-weight: bold; margin: 0 0 6px 0;}
.recipe_wrap .t2 ol {padding-left: 15px; margin-bottom: 30px; list-style-type: decimal;}
.recipe_wrap .t2 ol li {}

.recipe_wrap .t2 ul {padding-left: 15px; list-style-type: none; } 
.recipe_wrap .t2 ul li {}


@media (max-width: 1400px) {
    .recipe_wrap .t1 {font-size: 3.0rem; line-height: 1.3;}
    .recipe_wrap .t2 {font-size: 1.8rem; }

}


@media (max-width: 1200px) {
    .recipe_wrap .txt_box {padding: 30px 30px 0 30px;}

    .recipe_wrap .t1 {font-size: 2.0rem; line-height: 1.3;}
    .recipe_wrap .t2 {font-size: 1.3rem; }

}

@media (max-width: 768px) {
    .recipe_wrap section {margin-bottom: 40px;}
    .recipe_wrap section.space {margin: 0 15px 40px;}

    .recipe_type1 {display: block;}
    .recipe_type1 .item {display: block; width: 100%;}

    .recipe_wrap .txt_box {padding: 25px 25px; margin-bottom: 0;}
}


/* video */
#pop_youtube {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 1000;    background: rgba(0,0,0,0.9);    display: none;}
#pop_youtube #video_box {    position: fixed;    top: 50%;    left: 50%;    width: 860px;    height: 484px;    margin: -222px 0 0 -430px;    background: #000; }
#pop_youtube #video_box .pop_close {    position: absolute;    top: -61px;    right: 0;    display: block;    width: 41px;    height: 41px; background: transparent; font-size: 0;
    border: 0; outline: 0;
}
#pop_youtube #video_box .pop_close:after {content:"\e921"; font-size: 30px; font-family: 'xeicon'; color: #ffffff;}    

@media (max-width: 860px) {
    #pop_youtube {    position: fixed;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 1000;    background: rgba(0,0,0,0.9);    display: none;}
    #pop_youtube #video_box {    position:absolute;    top: 70px;    left: 0;    width: 100%;    height:100%;  margin:0;    background: #000; }

    #pop_youtube #video_box .pop_close {    position: absolute;  border:none;  top: -61px;    right: 0;    display: block;    width: 41px;    height: 41px;    font-size: 0;  background: transparent; border: 0; outline: 0; }
    #pop_youtube #video_box .pop_close:after {content:"\e921"; font-size: 30px; font-family: 'xeicon'; color: #ffffff;}
    
}


/* 마이페이지 사이드 */


.my_page_wrap { max-width: 1200px; margin: 0 auto; padding: 20px 0;
    display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
}
.my_page_wrap .mypage_body {flex: 0 0 calc(100% - 200px); padding-left: 50px; }
.my_page_wrap .my_summ { flex: 0 0 150px;}

.my_summ .thumb {width: 100px; float: left; margin-left: -80px; }
.my_summ .thumb img {width: calc(100% - 15px); border-radius: 38px;}
.my_summ .info {padding: 15px 15px; border: 1px solid #dcdcdc; text-align: center;}
.my_summ .uname {color: #999999;}
.my_summ .uname strong {font-size: 1.6rem; color: #000;}

.my_summ .my_title {font-size: 1.8rem; font-weight: bold; margin: 0 0 10px 0; color: #000000;}

.my_page_wrap .my_menu {}
.my_page_wrap .my_menu ul {}
.my_page_wrap .my_menu ul li {padding: 14px 5px; border-bottom: 1px solid #dcdcdc;}

.my_page_wrap .my_menu ul li a {color: #313131;}
.my_page_wrap .my_menu ul li a.active  {color: #000000; font-weight: bold;}


.order_table {}
.order_table th {font-weight: 500;}
.order_table td {text-align: center; font-size: 1.5rem; color: #000;}

.order_table tr.bg0 td {background: #fafafa; }
.order_table .empty {padding: 50px 0; text-align: center; color: #888888;}

.my_page_wrap .total_count {font-size: 1.2rem; padding: 0 0 5px 0;}

.title_myp {font-weight: 500; font-size: 1.7rem; margin: 0 0 30px 0;}

@media (max-width: 768px) {
    .my_page_wrap .mypage_body {flex: 0 0 calc(100% - 130px); padding-left: 30px; }
    .my_page_wrap .my_summ { flex: 0 0 120px;}
    .title_myp  {margin: 0 0 18px;}
    .order_table td {font-size: 1.3rem; }   
}
@media (max-width: 468px) {
    .my_page_wrap {display: block; padding: 0;}
    .my_page_wrap .mypage_body {display: block; width: 100%; padding-left: 0; padding-top: 30px; }
    .my_page_wrap .my_summ { display: block; width: 100%;}
    .my_summ .my_title {font-size: 1.45rem; margin: 0 0 5px 0;}
    .my_summ .uname strong {font-size: 1.4rem;}

    .my_page_wrap .my_menu ul {font-size: 0; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc;}
    .my_page_wrap .my_menu ul li {padding: 10px 0; text-align: center; display: inline-block; width: 50%; font-size: 1.25rem;}

    .order_table thead th {font-size: 1.2rem; }    
    .order_table td {font-size: 1.0rem; }   

}



.csr {}  
.csr h2 {font-size: 2.2rem; margin: 0 0 30px 0;}

.csr .csr_txt1 {font-size: 1.8rem; font-weight: normal; margin: 0 0 40px 0; color: #808080;}

.csr_box  { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
    margin: 0 0 50px 0;
}
.csr_box .img {flex: 0 0 300px; order: 2;}
.csr_box .img img {width: 100%; }
.csr_box .csr_desc {flex: 0 0 calc(100% - 300px); padding-right: 40px; line-height: 1.7; font-size: 1.6rem; font-weight: normal;}
.csr_box .csr_desc .t1 {font-size: 1.9rem; font-family: 'Noto Serif KR', serif; font-weight: bold; margin: 0 0 30px 0;}
.csr_box .csr_desc .t1 span {color: #ed1c24; font-family: 'Noto Serif KR', serif;}

@media (max-width: 768px) {
    .csr_box   {display: block; margin: 0 0 50px 0;}
    .csr_box .img {margin: 0 0 20px ;}
    .csr_box .csr_desc {font-size: 1.5rem; padding-right: 0;}
    .csr_box .csr_desc .t1 {font-size: 1.7rem;}
}



.company {}  
.company h2 {font-size: 2.2rem; margin: 0 0 30px 0;}
.company .com_txt1 {font-size: 1.8rem; font-weight: normal; margin: 0 0 20px 0; color: #808080;}
.company .com_txt2 {font-size: 2.2rem; font-weight: bold; margin: 0 0 20px 0; color: #000;}

.company .com_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; padding: 30px 0;}
.company .com_box .img {flex: 0 0 30%; padding-right: 30px;}
.company .com_box .img img {width: 100%;}
.company .com_box .com_desc {flex: 0 0 70%;  line-height: 1.5; font-size: 1.6rem;}

.company .ment {font-size: 3.0rem; line-height: 1.4; font-weight: bold; margin: 0 0 30px 0;}


.com_brand {padding: 50px 0;}    
.brand_history { padding: 0;}
.brand_history ul {  margin: 0 -10px;
     display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; 
}    
.brand_history ul li {flex: 0 0 25%; padding: 30px 10px; margin: 0 0 30px 0; border-top: 1px solid #000;}

.brand_history ul .year {font-size: 2.2rem; font-style: italic; font-weight: 500;} 
.brand_history ul .desc {font-size: 1.6rem; line-height: 1.3; }
.brand_history ul .img {margin: 8px 0; }
.brand_history ul .img img {width: 100%;}


@media (max-width: 768px) {
    .com_brand {padding: 30px 0;}    
    .company .com_txt1 {font-size: 1.6rem;}
    .company .com_box {display: block;} 
    .company .com_box .img {display: inline-block; width: 150px; float: left; padding: 0 15px 15px 0;}
    .company .com_box .com_desc {font-size: 1.5rem;}
    .company .ment {font-size: 2.0rem;}
    .brand_history ul li {flex: 0 0 50%; margin: 0 0 15px 0;}
    .brand_history ul .desc {font-size: 1.4rem;}
}





.csr .fitem_wrap {}
.csr .fitem_wrap .item {display: none;}
.csr .fitem_wrap .item:first-child {display: block;}

.csr .txt1 {font-size: 1.8rem; font-weight: normal; margin: 0 0 20px 0; color: #808080;}
.csr strong.color {color: #ed1c24;}
.csr  img {max-width: 100%;}
.csr .menu_care {margin: 0 0 50px 0;}
.csr .menu_care ul {border-top: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; font-size: 0; }
.csr .menu_care li { display: inline-block; width: 33.33333%; position: relative;  padding: 0 0 0; vertical-align: top; }

.csr .menu_care li a {text-align: center; line-height: 1.2; margin: 0 0;  padding: 15px 0; font-size: 1.4rem; font-weight: normal; letter-spacing: -0.04rem;
    display: block;  cursor: pointer; color: #939393; border-left: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
}
.csr .menu_care li a.active  {background: #e5e5e5; color: #000000; font-weight: bold; border-left: 0;}



.csr .t1 {line-height: 1.0; font-size: 2.0rem; font-weight: 500; margin: 15px 0;}
.csr .t1:before {content:""; display: block; width: 3px; height: 15px; display: inline-block; margin-right: 9px; background: #ed1c24;}

.csr .t2 {line-height: 1.4; font-size: 1.6rem; font-weight: normal; margin: 15px 0;}

.csr .num_list {list-style-type: decimal; padding-left: 30px; border-top: 1px solid #e6e6e6;
    margin: 30px 0;
}
.csr .num_list li {position: relative;  padding: 15px 5px 15px 0;}

.csr .num_list li:after {display: block; content:""; position: absolute; width: calc(100% + 30px); height: 100%;  left: -30px; top: 0; border-bottom: 1px solid #e6e6e6;
    z-index: -1;
}
.csr .num_list li:nth-child(2n):after  {background: #f6f6f6;}



.ck_point {padding: 50px 0 0 0;}

.ck_point .thumb_txt { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
    background: #f6f6f6; padding: 20px 0;
}
.ck_point .thumb_txt .thumb {flex: 0 0 264px;  text-align: center;}
.ck_point .thumb_txt .thumb img {max-width: 100%;}
.ck_point .thumb_txt .desc {flex: 0 0 calc(100% - 264px); padding-right: 15px; line-height: 1.5;}
.ck_point .thumb_txt .dt {color: #ed1c24; font-weight: bold; margin: 0 0 5px 0; font-size: 1.5rem;}
.ck_point span.color {display: inline-block; height: 12px; border-radius: 6px; width: 40px; background: #ccc;}
.ck_point span.color.green {background: #1fb048;}
.ck_point span.color.red {background: #ee363c;}

.csr .txt_box {background: #f6f6f6; padding: 20px 20px; line-height: 1.8; margin: 0 0 40px 0;}


.csr .img_box {margin: 0 0 40px 0;}
.csr .img_box:after {content:""; display:block; clear:both;}
.csr .img_box .thumb {float: right; padding: 0 0 5px 5px;}
.csr .img_box .thumb img {max-width: 100%;}


@media (max-width: 1024px) {
    .ck_point .thumb_txt .thumb {flex: 0 0 180px; }
    .ck_point .thumb_txt .desc {flex: 0 0 calc(100% - 180px); }
}

@media (max-width: 768px) {
    .csr .txt1 {font-size: 1.6rem; }
    .csr .t2 {font-size: 1.5rem;}

    .ck_point .thumb_txt { display: block;  padding: 15px 15px;  }
    .ck_point .thumb_txt:after {content:""; display:block; clear:both;}
    .ck_point .thumb_txt .thumb {width: 140px; float: left;}
    .ck_point .thumb_txt .thumb img {margin: 0 5px 5px 0;}
    .ck_point .thumb_txt .desc {padding-right: 0;}

    .csr .img_box .thumb {width: 160px;}


}

@media (max-width: 468px) {
    .csr .menu_care li a  {font-size: 1.2rem;}
    .csr .menu_care li a.active {font-weight: 500;}
}

@media (max-width: 320px) {
    .csr .menu_care li a {min-height: 60px;}

}


/* 멤버십 */
.membership_wrap {padding: 100px 0 0;}

.membership_wrap .inner {max-width: 1200px; margin: 0 auto; padding: 0 15px;}

.membership_wrap .t1 {font-size: 4.0rem; font-family: 'IBM Plex Sans KR'; font-weight: bold; color: #483c46; line-height: 1.0; margin: 0 0 20px; }
.membership_wrap .t2 {font-size: 4.8rem; color: #483c46; font-weight: bold; line-height: 1.0; margin: 0 0 20px; }
.membership_wrap .t3 {font-size: 2.0rem; color: #4d4d4d; font-weight: normal; line-height: 1.4; margin: 0 0 20px; }
.membership_wrap .t31 {font-size: 2.2rem; color: #4d4d4d; font-weight: bold; }

.membership_wrap .btn_fiss {padding: 15px 0 65px 0}
.membership_wrap .btn_fiss a { display: inline-block; height: 56px; line-height: 56px; padding: 0 40px; background: #FF0000; color: #ffffff; font-size: 1.6rem; font-weight: bold; }

.membership_wrap .mem_img {border-top: 1px solid #858585; padding: 24px 0 80px 0; font-size: 0;}
.membership_wrap .mem_img img {display: inline-block; width: 33.3333%;}

.membership_wrap .benefit_wrap {background: #f3f3f3; padding: 60px 0; margin-bottom: 60px; position: relative;}
.membership_wrap .benefit_wrap .img {position: absolute; left: 50%; top: 50%; transform: translateY(-50%) }
.membership_wrap .benefit_wrap .img img {max-width: 100%;}

.membership_wrap .t4 {font-size: 2.4rem; color: #483c46; font-weight: bold; line-height: 1.0; margin: 0 0 20px; }
.membership_wrap .t5 {font-size: 4.0rem; font-family: 'IBM Plex Sans KR'; font-weight: bold; color: #483c46; line-height: 1.0; margin: 0 0 20px; }
.membership_wrap .t6 {font-size: 2.4rem; color: #4d4d4d; font-weight: bold; line-height: 1.3; margin: 0 0 20px; position: relative; z-index: 3;}

.membership_wrap ul.bnf_list {margin: 0 0 30px 0; position: relative; z-index: 3;}
.membership_wrap ul.bnf_list li {line-height: 1.4; margin: 0 0 10px 0; padding-left: 30px; color: #4d4d4d; font-weight: normal;font-size: 2.0rem;}
.membership_wrap ul.bnf_list li span {display: inline-block; width: 30px;  float: left; margin-left: -30px; text-decoration: underline; color: #FF0000; }

.membership_wrap .btn_fiss2 {padding: 15px 0 65px 0}
.membership_wrap .btn_fiss2 a { display: inline-block; height: 56px; line-height: 56px; padding: 0 40px; background: #ffc200; color: #3e2a2f; font-size: 1.6rem; font-weight: bold; }


.membership_wrap .t7 {font-size: 2.4rem; color: #483c46; font-weight: bold; line-height: 1.0; margin: 0 0 20px; }
.membership_wrap .t8 {font-size: 4.0rem; color: #483c46; font-weight: bold; line-height: 1.0; margin: 0 0 20px; }

.membership_wrap .btn_fiss2 {padding: 15px 0 65px 0}
.membership_wrap .btn_fiss2 a { display: inline-block; height: 56px; line-height: 56px; padding: 0 40px; background: #ffc200; color: #3e2a2f; font-size: 1.6rem; font-weight: bold; }

.membership_wrap ul.sns { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
    margin: 60px 0;
}
.membership_wrap ul.sns li {flex: 0 0 20%; position: relative; padding-top: 20px; margin-bottom: 20px;}
.membership_wrap ul.sns li:after {position: absolute; content:""; display: block; width: 90%; height: 1px; background: #858585; left: 0; top: 0;}
.membership_wrap ul.sns li p {margin: 24px 0; font-size: 2.4rem; font-weight: bold; color: #483c46; line-height: 1.0;}
.membership_wrap ul.sns li div {font-size: 1.8rem; font-weight: normal; color: #4d4d4d; line-height: 1.5;}
.membership_wrap ul.sns img {max-width: 100%;}

.membership_wrap .mem_btm { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap;
    padding: 120px 0 70px 0;
}
.membership_wrap .mem_btm .item {flex: 0 0 50%; text-align: center;}

.membership_wrap .t9 {font-size: 2.4rem; color: #483c46; font-weight: bold; line-height: 1.0; margin: 0 0 20px; }
.membership_wrap .t10 {font-size: 1.8rem; color: #4d4d4d; font-weight: normal; line-height: 1.0; margin: 0 0 20px; }

@media (max-width: 1200px) {
    .membership_wrap .benefit_wrap .img {width: calc(50% - 60px); left: auto;  right: 15px;}
}

@media (max-width: 768px) {
    .membership_wrap {padding-top: 50px;}
    .membership_wrap .benefit_wrap .img {top: 10%;  transform: translateY(0)  }
}

@media (max-width: 468px) {
    .membership_wrap .benefit_wrap .img {top: auto; position: static; width: 100%; text-align: center;}
    .membership_wrap .benefit_wrap .img img {width: calc(100% - 30px);}


    .membership_wrap .t1 {font-size: 2.4rem;}
    .membership_wrap .t2 {font-size: 3.0rem;}
    .membership_wrap .t3 {font-size: 1.7rem;}
    .membership_wrap .t31 {font-size: 1.9rem; }

    .membership_wrap .mem_img img {width: 100%;}


    .membership_wrap .t4 {font-size: 1.7rem; }
    .membership_wrap .t5 {font-size: 2.4rem; }
    .membership_wrap .t6 {font-size: 1.7rem; }

    .membership_wrap ul.bnf_list li {font-size: 1.7rem;}


    .membership_wrap .t7 {font-size: 1.7rem;}
    .membership_wrap .t8 {font-size: 2.6rem;}


    .membership_wrap ul.sns li {flex: 0 0 50%;}
    .membership_wrap ul.sns li p {margin: 15px 0; font-size: 1.7rem; }
    .membership_wrap ul.sns li div {font-size: 1.5rem; }

    .membership_wrap .mem_btm {padding-top: 60px;}
    .membership_wrap .mem_btm .item {flex: 0 0 100%;}

    .membership_wrap .t9 {font-size: 1.8rem; line-height: 1.5;}
    .membership_wrap .t10 {font-size: 1.5rem;  }
}