/* BASIC css start */
#header {margin-bottom:0 !important;}
#footer {margin-top:0 !important;}

/* 메인 슬라이드 */
.swiper1 {width:100%;height:487px;margin:0px auto;}
.swiper1 .swiper-slide {cursor:move;}
.swiper1 .swiper-slide div {background-repeat:no-repeat;width:100%; height:100%; background-position:center top;margin;0 auto:text-align:center;}
.swiper1 .swiper-slide > a > div {background-repeat:no-repeat;width:100%; height:100%; background-position:center top;}
.swiper1 .swiper-pagination1 {bottom:32px !important;}
.swiper1 .swiper-pagination1 .swiper-pagination-bullet {width:12px; height:12px; background-color:transparent; border:2px solid #fff; opacity:1;}
.swiper1 .swiper-pagination1 .swiper-pagination-bullet-active {background-color:#fff;}
.swiper1 .swiper-button-next1 {position:absolute; right:50%; top:290px; z-index:100; width:62px; height:62px; margin-right:-600px; cursor:pointer; background:url("/design/hiapple/0718exapple/btn_next.png") no-repeat;}
.swiper1 .swiper-button-prev1 {position:absolute; left:50%; top:290px; z-index:100; width:62px; height:62px; margin-left:-600px; cursor:pointer; background:url("/design/hiapple/0718exapple/btn_prev.png") no-repeat;}


/* 공통 타이틀 텍스트 스타일 */
.m_title_area .m_title00 {padding-top:65px; text-align:center;}
.m_title_area .m_title01 {font-size:16px; color:#999; font-family:"Oswald", "Open Sans", "Nanum Gothic", sans-serif; letter-spacing:4px;  padding-top:10px; text-align:center;}
.m_title_area .m_title02 {font-size:38px; color:#010101; letter-spacing:-1px; font-weight:bold; font-family: 'scd-bold', 'Noto Sans KR', sans-serif; font-weight:700;  text-align:center; margin-top:10px;}
.m_title_area .m_title03 {font-size:14px; line-height:22px; color:#777; text-align:center;}
.m_title_area .yellow_line {width:150px; height:4px; background-color:#be040e; margin:24px auto;}


/* 메인 우측 퀵바 스타일 */
.fixed_icon {position:fixed; top:193px; right:20px; z-index:2222; cursor:pointer; }
.fixed_icon div {width:50px; height:50px; color:#222; background-color:#fff; font-size:12px; letter-spacing:-0.5px; border-radius:50px;  float:right; clear:both; position:relative; border-right:0px; margin-bottom:8px;text-align:center;}
.fixed_icon div span {position:absolute; top:0px; right:0px; width:100%; opacity:0; }
.fixed_icon div:hover span {opacity:1; background-color:#be040e; width:150px; height:50px; border-radius:50px; color:#fff; line-height:50px; }
.fixed_icon div img {padding-top:16px;}
a.anchor {display: block;position: relative;top:0;visibility: hidden;}


/* 1번영역 관련 스타일 시작 */
.m_section01 {width:100%;}
.m_section01 .inner {width:1100px; margin:0 auto;}


/* 2번영역 레시피 롤링리스트 */
.m_section02 {width:100%;background-color:#fbfbfb;}
.m_section02 .inner {position:relative; width:1100px; margin:0 auto; padding-bottom:50px;}

.swiper2  { width:1100px; margin:0 auto; margin-top:60px;}
.swiper2 .swiper-wrapper { margin-top:60px; text-align:center;}
.swiper2 .swiper-wrapper .thumb { width:338px; height:209px; margin-left:auto; margin-right:auto; position:relative;}
.swiper2 .swiper-wrapper .thumb a,
.swiper2 .swiper-wrapper .thumb img { width:338px; height:209px;}
.swiper2 .swiper-wrapper .text_area {height:328px; border:1px solid #dedede; width:336px; margin:0 auto; background-color:#fff;}
.swiper2 .swiper-wrapper .text_area .text01 { padding-top:45px; font-size:24px; color:#010101;}
.swiper2 .swiper-wrapper .text_area .text02 { padding-top:15px; font-size:14px; color:#777; line-height:21px;}
.swiper-button-next2 {position:absolute; right:-50px; top:550px; z-index:10; width:39px; height:39px; cursor:pointer; background:url("/design/hiapple/0718exapple/roll_right.gif") no-repeat; outline:none;}
.swiper-button-prev2 {position:absolute; left:-50px; top:550px; z-index:10; width:39px; height:39px; cursor:pointer; background:url("/design/hiapple/0718exapple/roll_left.gif") no-repeat; outline:none;}

.swiper2 .text_pban { position:absolute; top:0px;  width:338px; height:209px; background-color:rgba(0, 0, 0, 0); text-align:center; color:rgba(0, 0, 0, 0);
-moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear;}
.swiper2  a:hover .text_pban { background-color:rgba(0, 0, 0, 0.5); color:#fff;}
.swiper2 .btn { font-size:20px; font-weight:700; display:block; width:170px; height:60px; border:5px solid rgba(0, 0, 0, 0); line-height:60px; margin:0 auto; margin-top:68px;
-moz-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear;}
.swiper2 a:hover .btn { font-size:20px; font-weight:700; border:5px solid #fff !important; width:170px; height:60px;}

.swiper2 .re_icon_area { width:100%; padding-top:45px; text-align:center;}
.swiper2 .re_icon_area li { display:inline-block; cursor:pointer;}
.swiper2 .re_icon_area li:hover .icon { border:1px solid #dedede; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;  transition: all 0.5s; background-color:#fff;
  -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg);transform: rotate(30eg); outline:1px solid transparent;}
.swiper2 .re_icon_area li .icon { width:54px; height:54px; background-color:#f5f5f5; border-radius:54px;  margin:0px 2px !important; border:1px solid #f5f5f5;
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;  transition: all 0.5s; outline:1px solid transparent;}
.swiper2 .re_icon_area li .icon img { padding-top:16px;}
.swiper2 .re_icon_area li .r_text { font-size:12px; color:#777; padding-top:8px;}


/* 3번영역 관련 스타일 시작 */
.m_section03 .sec-other_menu {overflow:hidden; height: calc(100% - 44px);background-color: #b2b2b2; margin-top:90px;}
.m_section03 .sec-other_menu li {float: left;width:33.33%; height: 459px;}
.m_section03 .sec-other_menu a {display: block;overflow: hidden;position: relative;width: 100%;height: 100%;}
.m_section03 .sec-other_menu .bg {display: block;width: 100%;height: 100%;-webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; -webkit-transform: scale(1.01); -ms-transform: scale(1.01); transform: scale(1.01);}
.m_section03 .sec-other_menu .txt_ttitle {position:absolute; top:20%; left:15%; z-index: 2; color:#fff;text-align:left; font-size:30px;font-family: 'scd-regular', 'Noto Sans KR', sans-serif; font-weight:600;}
.m_section03 .sec-other_menu .txt_ttitle2 {position:absolute; top:40%; left:15%; z-index: 2; color:#fff;text-align:left; font-size:16px; }
.m_section03 .sec-other_menu .zoom:hover .bg {-webkit-transform: scale(1.07);-ms-transform: scale(1.07);transform: scale(1.07);}
.m_section03 .sec-other_menu li:first-child .bg {background-image: url('/design/hiapple/0718exapple/process_ban01.jpg'); background-position:center; background-size: cover;}
.m_section03 .sec-other_menu li:first-child + li .bg {background-image: url('/design/hiapple/0718exapple/process_ban02.jpg'); background-position:center; background-size: cover;}
.m_section03 .sec-other_menu li:first-child + li + li .bg {background-image: url('/design/hiapple/0718exapple/process_ban03.jpg'); background-position:center; background-size: cover;}
.m_section03 .sec-other_menu li:first-child + li + li + li .bg {background-image: url('/design/hiapple/0718exapple/process_ban04.jpg'); background-position:center; background-size: cover;}
.m_section03 .sec-other_menu li:first-child + li + li + li + li .bg {background-image: url('/design/hiapple/0718exapple/process_ban05.jpg'); background-position:center; background-size: cover;}
.m_section03 .sec-other_menu li:first-child + li + li + li + li + li .bg {background-image: url('/design/hiapple/0718exapple/process_ban06.jpg'); background-position:center; background-size: cover;}


/* 4번영역 관련 스타일 시작 */
.m_section04 {width:100%; height:1000px; background-color:#f9f9ec;}
.m_section04 .inner {width:1100px; margin:0 auto;}
.m_section04 .keep_list ul li {float:left; width:297px; padding-left:104px;}
.m_section04 .keep_list ul li:first-child {padding-left:0px !important;}
.m_section04 .keep_txt01 {font-size:30px; font-family: 'scd-regular', 'Noto Sans KR', sans-serif; font-weight:600; color:#222; padding-top:28px; text-align:center;}
.m_section04 .keep_txt02 {font-size:15px; font-family:"Open Sans", "Nanum Gothic", sans-serif; color:#999; padding-top:5px; font-weight:bold; text-align:center;}
.m_section04 .keep_txt03 {font-size:16px; color:#010101; padding-top:10px; text-align:center;letter-spacing:-2px;}
.m_section04 .keep_list li .keep_thumb img {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;  transition: all 0.5s; outline:1px solid transparent;}
.m_section04 .keep_list li:hover .keep_thumb img { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;  transition: all 0.5s; 
 -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg);transform: rotate(30eg); outline:1px solid transparent;}


/* 5번영역 관련 스타일 시작 */
.m_section05 {width:100%; height:865px;}
.m_section05 .panel_text_area {position:absolute; left:55%; top:250px; width:1200px;}
.m_section05 .panel_text1 {font-size:50px; color:#fff; font-family: 'scd-regular', 'Noto Sans KR', sans-serif; font-weight:600; line-height:55px;}
.m_section05 .panel_text1 span {font-weight:100;}
.m_section05 .panel_text2 {font-size:16px; line-height:21px; color:#d3d3d3; padding-top:28px;}


.swiper3 {margin:0px auto;}
.swiper3 .swiper-slide a {display:block; height:865px; background-repeat:no-repeat; background-position:center top;}
.swiper3 .swiper-slide img {display:block; margin:0px auto; }
.swiper3 .swiper3_text > .inner > ul {position:absolute; bottom:70px; z-index:1000; width:100%; text-align:center;}
.swiper3 .swiper3_text > .inner > ul > li {display:inline-block; width:163px; height:38px; margin-left:5px; background-color:transparent; border:1px solid #fff; border-radius:38px;}
.swiper3 .swiper3_text > .inner > ul > li:first-child {margin-left:0;}
.swiper3 .swiper3_text > .inner > ul > li > a {display:block; height:38px; color:#fff; line-height:38px; text-align:center;}
.swiper3 .swiper3_text > .inner > ul > li.swiper_over {border:1px solid #be040f;}
.swiper3 .swiper3_text > .inner > ul > li.swiper_over a {color:#be040f;}
.swiper3 .swiper-pagination {display:none;}


/* 6번영역 관련 스타일 시작 */
.m_section06 {width:100%; height:1010px; background-color:#fbfbfb;}
.m_section06 .inner {width:1200px; margin:0 auto;}
.m_section06 .faq_area ul li {float:left; width:368px; height:516px; border:1px solid #dedede; background-color:#fff; margin-left:45px;}
.m_section06 .faq_area ul li:first-child {margin-left:0px;}
.m_section06 .faq_area li:hover {border:1px solid #be040e; }
.m_section06 .faq_area li .faq_thumb img {border:0px solid #dedede;  -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;  transition: all 0.5s; }
.m_section06 .faq_area li:hover .faq_thumb img {border:0px solid #dedede;  -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;  transition: all 0.5s; 
  -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg);transform: rotate(30deg);}
.m_section06 .faq_thumb {padding-top:30px; padding-bottom:35px; text-align:center;}
.m_section06 .faq_txt01 {font-size:24px; color:#222; letter-spacing:-1px; font-family: 'scd-medium'; line-height:28px; text-align:center;}
.m_section06 .faq_txt01 span{font-weight:400; }
.m_section06 .faq_border {width:30px; height:1px; background-color:#222; margin:20px auto; }
.m_section06 .faq_txt02 {font-size:13px; color:#222;  line-height:23px; letter-spacing:-0.6px; color:#777;  text-align:center;}


/* 7번영역 관련 스타일 시작 */
.m_section07 {width:100%; height:1099px; background: url("/design/hiapple/0718exapple/insta_bg.jpg") no-repeat center; background-color:#2e2f31; } 
.m_section07 .inner {width:1100px; margin:0 auto; text-align:center;}
.m_section07 .insta_logo {padding-top:80px; padding-bottom:30px;}
.m_section07 .insta_txt01 {font-family: 'scd-regular', 'Noto Sans KR', sans-serif; font-weight:600; color:#fff; font-size:38px; letter-spacing:-0.3px;}
.m_section07 .insta_txt02 {font-family:"Oswald", "Open Sans", "Nanum Gothic", sans-serif; color:#fff; font-size:16px; letter-spacing:2px;}
.m_section07 .insta_txt03 { color:#fff; font-size:14px; line-height:22px; padding-top:25px;}
.m_section07 .insta_go a { display:inline-block; text-align:center; width:163px; border:1px solid #fff; color:#fff; height:39px; border-radius:39px; line-height:39px; font-size:14px; margin:40px 0px; opacity:0.5;}
.m_section07 .insta_go a:hover {opacity:1;}


/* 8번영역 관련 스타일 시작 */
.m_section08 {width:100%; height:480px; background-color:#be040e;}
.m_section08 .inner {width:1100px; margin:0 auto; text-align:center;}
.m_section08 .store_txt01 {font-size:40px; color:#fff; letter-spacing:-0.3px; font-weight:bold; font-family: 'scd-regular', 'Noto Sans KR', sans-serif; font-weight:600; padding-top:100px;}
.m_section08 .store_txt03 {font-size:25px; color:#fff; letter-spacing:-0.3px; padding-bottom:30px; color:#f9eab7;}
.m_section08 .store_txt02 {font-size:16px; line-height:22px; color:#fff; padding-top:20px;}
.m_section08 .map_go a { display:inline-block; text-align:center; width:254px; border:1px solid #fff; color:#fff; height:49px; border-radius:49px; line-height:49px; font-size:14px; margin:30px auto; opacity:1;}
.m_section08 .map_go a:hover {background-color:#fff; color:#be040e;}
#topbanner .topbanner	{display:none;margin:0px;width:100%;text-align:center; height:405px; background-color:#be040e;}
#topbanner .btnarea {position:relative; top:0px;margin:0 auto;width:39px; height:0px;z-index:200;}
#topbanner .closebtn {cursor:pointer;width:39px;height:39px;background:url('/design/hiapple/0718exapple/closebtn.gif');}
#topbanner .openbtn {display:block !important;}




/* 9번영역 관련 스타일 시작 */
.m_section09 {width:100%; height:270px; margin:47px 0 70px 0;}
.m_section09 .inner {width:1100px; margin:0 auto; }
.m_section09 .box1 {float:left; width:340px; height:180px;}
.m_section09 .box1 .tab a {font-size:13px;line-height:24px;}
.m_section09 .box2 {float:left; width:340px; height:180px; margin-left:45px;}
.m_section09 .box2 .tab  {font-size:13px;line-height:24px;}
.m_section09 .box3 {float:left; width:330px; height:180px; margin-left:45px;}




/* 10번영역 관련 스타일 시작 */
.m_section10 {width:100%; margin:47px 0 70px 0;}
.m_section10 .inner {width:1075px; margin:0 auto; }
.m_section10 .img1 { width:80px; height:80px;}
.m_section10 .rbox { width:90%;border-bottom:1px solid #d5d5d5; padding:15px 0 15px 0; margin:0 auto; }
.m_section10 .rbox2 {vertical-align:top;padding:14px 0 0 0; text-align:center;}
.m_section10 .rbox3 {font-size:13px;letter-spacing:-0.3px; line-height:130%;}
.m_section10 .rbox4 {text-align:center;margin-top:55px;}



/* BASIC css end */