@charset "utf-8";
#header	{ position: absolute; top: 0; left: 0; right: 0; }

#main_kakao_link	{ position: absolute; top: -33px; left: 0; right: 0; text-align: center; height: 66px; line-height: 66px; }
#main_kakao_link img	{ display: inline; vertical-align: middle; max-width: 42.96875%; }


/***************************
	Visual
****************************/

#main_visual												{ position: relative; }
#main_visual .flex-viewport .slides li em					{ display: block; position: relative; background: no-repeat 50% 50%; background-size: cover; }
#main_visual .flex-viewport .slides li em i					{ display: block; position: relative; max-width: 1200px; margin: 0 auto; }
#main_visual .flex-viewport .slides li em i:before			{ content: ""; display: block; position: relative; padding-top: 79.16%; }
#main_visual .flex-viewport .slides li em.vis-mo			{ display: none; }
#main_visual .flex-viewport .slides li em.vis-mo i:before	{ padding-top: 125%; }

#main_visual .flex-direction-nav a						{ display: block; position: absolute; top: 50%; margin-top: -50px; width: 30px; height: 100px; overflow: hidden; text-indent: -999px; background: url('../images/main/splte_main_visual.png') no-repeat 0 0; z-index: 10; }
#main_visual .flex-direction-nav a.flex-prev			{ left: 50%; margin-left: -600px; }
#main_visual .flex-direction-nav a.flex-next			{ right: 50%; margin-right: -600px; background-position: 0 100%; }
#main_visual .flex-direction-nav a.flex-prev:hover		{ background-position: 100% 0; }
#main_visual .flex-direction-nav a.flex-next:hover		{ background-position: 100% 100%; }

#main_visual .flex-control-paging				{ display: block; position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; }
#main_visual .flex-control-paging li			{ display: inline-block; vertical-align: bottom; }
#main_visual .flex-control-paging li + li		{ margin-left: 10px; }
#main_visual .flex-control-paging a				{ display: block; position: relative; overflow: hidden; text-indent: -999px; width: 60px; height: 5px; background: #ddd6d8; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; }
#main_visual .flex-control-paging a.flex-active	{ height: 10px; background: #ed003a; }

@media all and (max-width: 1220px) {
	#main_visual .flex-direction-nav a.flex-prev			{ left: 0; margin-left: 0px; }
	#main_visual .flex-direction-nav a.flex-next			{ right: 0; margin-right: 0px; }
}
@media all and (max-width: 1000px) {
	#main_visual .flex-viewport .slides li em.vis-pc	{ display: none; }
	#main_visual .flex-viewport .slides li em.vis-mo	{ display: block; }

}



/***************************
	Quick Link
****************************/

@media all and (min-width: 1001px) {
	#main_quick						{ padding: 18px 0; text-align: center; }
	#main_quick	 li					{ display: inline-block; position: relative; }
	#main_quick	 li + li			{ padding-left: 85px; }
	#main_quick	 li + li:before		{ content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 85px; background: url('../images/main/ico_line_main_quick.png') no-repeat 50% 50%; }
	#main_quick	 li a				{ display: block; position: relative; width: 177px; background: #000000; overflow: hidden; }
	#main_quick	 li a em			{ display: block; position: absolute; padding-top: 35px; top: 0; left: 0; right: 0; bottom: 0; background: url('../images/main/bak_quick_tool.png') no-repeat 50% 50%; background-size: 100% 100%; z-index: 2; }
	#main_quick	 li a:before		{ content: ""; display: block; position: relative; padding-top: 100%; z-index: 0; }
	#main_quick	 li a:after			{ content: ""; display: block; position: absolute; top: 100%; left: 0; right: 0; bottom: 0; background: url('../images/main/bak_quick_over.png') no-repeat 50% 100%; z-index: 1; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; }
	#main_quick	 li a:hover:after	{ top: 0; }
}
@media all and (max-width: 1000px) {
	#main_quick						{ padding: 0.85em 0; text-align: center; }
	#main_quick	 li					{ display: block; position: relative; float: left; width: 25%; }
	#main_quick	 li:before			{ content: ""; display: block; padding-top: 100%; }
	#main_quick	 li a				{ display: block; position: absolute; top: 0.65em; bottom: 0.65em; left: 0.65em; right: 0.65em; background: #000000; border-radius: 100%; }
	#main_quick	 li a em			{ display: block; position: relative; padding-top: 1.5em; }
	#main_quick	 li a em img		{ max-width: 70%; }
	#main_quick	 li:nth-child(odd) a	{ background: #c60e3b; }
}


/***************************
	Menu List Link
****************************/

@media all and (min-width: 1001px) {
	#main_menu_list						{ padding: 50px 0; background: #f9f9f9; }
	#main_menu_list .item				{ display: block; position: relative; width: 33.33%; float: left; background: no-repeat 50% 50%; background-size: cover; }
	#main_menu_list .item:before		{ content: ""; display: block; position: relative; padding-top: 100%; z-index: 0; }
	#main_menu_list .item.col-2			{ width: 66.66%; }
	#main_menu_list .item.col-2:before	{ padding-top: 50%; }
	#main_menu_list .item .inner		{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: -999px; overflow: hidden; z-index: 1; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; background: rgba(0, 0, 0, .6); }
	#main_menu_list .item .inner:hover	{ opacity: 1.0; }
	#main_menu_list .item .inner:before	{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: no-repeat 50% 50%; background-size: contain; }

	#main_menu_list .item.menu-01		{ background-image: url('../images/main/img_main_menu_01.jpg'); }
	#main_menu_list .item.menu-02		{ background-image: url('../images/main/img_main_menu_02.jpg'); }
	#main_menu_list .item.menu-03		{ background-image: url('../images/main/img_main_menu_03.jpg'); }
	#main_menu_list .item.menu-04		{ background-image: url('../images/main/img_main_menu_04.jpg'); }
	#main_menu_list .item.menu-05		{ background-image: url('../images/main/img_main_menu_05.jpg'); }

	#main_menu_list .item.menu-01 .inner			{ background: url('../images/main/img_main_menu_01_bak.png'); opacity: 1; }
	#main_menu_list .item.menu-01 .inner:before		{ background-image: url('../images/main/img_main_menu_01_ico.png'); background-size: 80% auto; }
	#main_menu_list .item.menu-02 .inner:before		{ background-image: url('../images/main/img_main_menu_02_on.png'); }
	#main_menu_list .item.menu-03 .inner:before		{ background-image: url('../images/main/img_main_menu_03_on.png'); }
	#main_menu_list .item.menu-04 .inner			{ background: rgba(237, 0, 33, .5); opacity: 1; }
	#main_menu_list .item.menu-04 .inner:before		{ background-image: url('../images/main/img_main_menu_04_ico.png'); background-size: auto auto; }
	#main_menu_list .item.menu-05 .inner:before		{ background-image: url('../images/main/img_main_menu_05_on.png'); }
}
@media all and (max-width: 1000px) {
	#main_menu_list						{ padding: 1.0em 0; background: #f9f9f9; }
	#main_menu_list .item				{ display: block; position: relative; width: 50%; float: left; background: no-repeat 50% 50%; background-size: cover; }
	#main_menu_list .item:before		{ content: ""; display: block; position: relative; padding-top: 100%; z-index: 0; }
	#main_menu_list .item.col-2			{ width: auto; float: none; clear: both; }
	#main_menu_list .item.col-2:before	{ padding-top: 50%; }
	#main_menu_list .item .inner		{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: -999px; overflow: hidden; z-index: 1; }
	#main_menu_list .item .inner:before	{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: no-repeat 50% 50%; background-size: contain; }
	#main_menu_list .item.menu-03		{ position: absolute; top: 0em; right: 1.0em; width: auto; left: 50%; float: none; left: ; }
	#main_menu_list .item.menu-04		{ position: absolute; bottom: 0; right: 1.0em; width: auto; left: 50%; float:none; }

	#main_menu_list .item.menu-01		{ background-image: url('../images/main/img_main_menu_01_mo.jpg'); }
	#main_menu_list .item.menu-02		{ background-image: url('../images/main/img_main_menu_02_mo.jpg'); }
	#main_menu_list .item.menu-03		{ background-image: url('../images/main/img_main_menu_03_mo.jpg'); }
	#main_menu_list .item.menu-04		{ background-image: url('../images/main/img_main_menu_04_mo.jpg'); }
	#main_menu_list .item.menu-05		{ background-image: url('../images/main/img_main_menu_05_mo.jpg'); }
}


/***************************
	Special TXT Box
****************************/

.main-content-line	{ display: block; position: relative; clear: both; margin-top: 65px; height: 10px; background: url('../images/main/line_main_specail_list.png'); }

@media all and (min-width: 1001px) {
	#main_specail_list			{ position: relative;}
	#main_specail_list:before	{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; height: 230px; background: url('../images/main/bak_specail_pattern.png'); }
	#main_specail_list:after	{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 10px; }
	#main_specail_list .item	{ width: 33.33%; float: left; text-align: center; }
}
@media all and (max-width: 1000px) {
	#main_specail_list				{ position: relative; background: url('../images/main/bak_specail_pattern_mo.jpg') repeat-x 0 0; background-size: contain; }
	#main_specail_list .fix-layout	{ padding: 0; }
	#main_specail_list .line		{ display: block; position: relative; clear: both; height: 10px; background: url('../images/main/line_main_specail_list.png'); }
	.main-content-line				{ margin-top: 0; height: 0.5em; margin-top: 1.5em; }
}

/***************************
	haccp List
****************************/

@media all and (min-width: 1001px) {
	#main_haccp_list					{ padding: 85px 0 75px; margin: 0; overflow: hidden; }
	#main_haccp_list .fix-layout		{ padding: 0; }
	#main_haccp_list .title				{ position: relative; max-width: 550px; margin: 0 auto 35px; padding: 0; }
	#main_haccp_list .title:before		{ content: ""; display: block; position: relative; padding-top: 35.28%; }
	#main_haccp_list .title span		{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; text-indent: -999px; background: url('../images/main/tlt_haccp.png') no-repeat 50% 50%; background-size: contain; }

	#haccp_list									{ margin: 0 -15px; }
	#main_haccp_list .item						{ position: relative; width: 33.33%; padding: 0 15px; float: left; box-sizing: border-box; }
	#main_haccp_list .item:before				{ content: ""; display: block; position: relative; padding-top: 84.2105%; z-index: 0; }
	#main_haccp_list .item > *					{ display: block; position: absolute; top: 0; left: 15px; right: 15px; bottom: 0; overflow: hidden; text-indent: -999px; background: no-repeat 50% 50%; background-size: cover; }

	#main_haccp_list .item.menu-01 > *			{ background-image: url('../images/main/img_main_haccp_01.jpg'); }
	#main_haccp_list .item.menu-02 > *			{ background-image: url('../images/main/img_main_haccp_02.jpg'); }
	#main_haccp_list .item.menu-03 > *			{ background-image: url('../images/main/img_main_haccp_03.jpg'); }
}
@media all and (max-width: 1000px) {
	#main_haccp_list					{ padding: 4.0em 0 2.0em; overflow: hidden; }
	#main_haccp_list .title				{ position: relative; padding: 0; }
	#main_haccp_list .title:before		{ content: ""; display: block; position: relative; padding-top: 30.625%; }
	#main_haccp_list .title span		{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; text-indent: -999px; background: url('../images/main/tlt_haccp_mo.png') no-repeat 50% 50%; background-size: contain; }
	#main_haccp_list .fix-layout		{ padding: 0; }

	#haccp_list									{ margin: 2.2em -0.4em 0; overflow: hidden; }
	#main_haccp_list .item						{ position: relative; width: 33.33%; padding: 0 0.4em; float: left; box-sizing: border-box; }
	#main_haccp_list .item:before				{ content: ""; display: block; position: relative; padding-top: 84.236453%; z-index: 0; }
	#main_haccp_list .item > *					{ display: block; position: absolute; top: 0; left: 0.4em; right: 0.4em; bottom: 0; overflow: hidden; text-indent: -999px; background: no-repeat 50% 50%; background-size: cover; }

	#main_haccp_list .item.menu-01 > *			{ background-image: url('../images/main/img_main_haccp_01_mo.jpg'); }
	#main_haccp_list .item.menu-02 > *			{ background-image: url('../images/main/img_main_haccp_02_mo.jpg'); }
	#main_haccp_list .item.menu-03 > *			{ background-image: url('../images/main/img_main_haccp_03_mo.jpg'); }

}


/***************************
	Notice Board List
****************************/

@media all and (min-width: 1001px) {
	#main_notice_list					{ position: relative; padding: 75px 0 95px; background: #eeeeee; overflow: hidden;  }
	#main_notice_list .title			{ position: relative; max-width: 199px; margin: 0 auto 35px; padding: 0; }
	#main_notice_list .title:before		{ content: ""; display: block; position: relative; padding-top: 33.17%; }
	#main_notice_list .title span		{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; text-indent: -999px; background: url('../images/main/tlt_notice.png') no-repeat 50% 50%; background-size: contain; }
	#main_notice_list a.ui-more			{ display: block; position: absolute; top: 25px; right: 0; background: url('../images/main/btn_more.png') no-repeat 0 0; background-size: contain; width: 101px; height: 41px; overflow: hidden; text-indent: -999px; }
	#main_notice_list .fix-layout		{ padding: 0; }

	.board-list ul							{ margin: 0 -13px; overflow: hidden; }
	.board-list li							{ display: block; position: relative; padding: 0 13px; box-sizing: border-box; float: left; width: 25%; }
	.board-list li:before					{ content: ""; display: block; position: relative; padding-top: 100%; z-index: 0; }
	.board-list li a						{ display: block; position: absolute; top: 0; left: 13px; right: 13px; bottom: 0; text-align: center; z-index: 1; background: no-repeat 50% 50%; background-size:cover; }
	.board-list li a:before,
	.board-list li a:after					{ content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
	.board-list li a span					{ display: inline-block; max-width: 90%; vertical-align: middle; opacity: 1; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; }
	.board-list li a span:before			{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); opacity: 1; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; }
	.board-list li a sup					{ display: block; position: relative; font-size: 15px; color: #fff; font-family: 'Jeju Myeongjo'; letter-spacing: 0.5em; padding-bottom: 1.0em; }
	.board-list li a em						{ display: block; position: relative; font-family: 'Hanna'; font-size: 28px; color: #fff; }
	.board-list li a:hover span				{ opacity: 1.0; }
	.board-list li a:hover span:before		{ opacity: 1.0; }
}
@media all and (max-width: 1000px) {
	#main_notice_list					{ position: relative; padding: 3.6em 0 1.6em; background: #eeeeee; overflow: hidden; }
	#main_notice_list .title			{ position: relative; padding: 0; margin-bottom: 2.0em; }
	#main_notice_list .title:before		{ content: ""; display: block; position: relative; padding-top: 11.3333%; }
	#main_notice_list .title span		{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; text-indent: -999px; background: url('../images/main/tlt_notice_mo.png') no-repeat 50% 50%; background-size: contain; }
	#main_notice_list a.ui-more			{ display: block; position: absolute; top: 1.35em; right: 0.7em; background: url('../images/main/btn_more.png') no-repeat 0 0; background-size: contain; width: 5.05em; height: 2.05em; overflow: hidden; text-indent: -999px; }

	.board-list ul							{ margin: 0 -0.75em; overflow: hidden; }
	.board-list li							{ display: block; position: relative; padding: 0.75em; box-sizing: border-box; float: left; width: 50%; }
	.board-list li:before					{ content: ""; display: block; position: relative; padding-top: 100%; z-index: 0; }
	.board-list li a						{ display: block; position: absolute; top: 0.75em; left: 0.75em; right: 0.75em; bottom: 0.75em; text-align: center; z-index: 1; background: no-repeat 50% 50%; background-size: cover; }
	.board-list li a:before,
	.board-list li a:after					{ content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
	.board-list li a span					{ display: inline-block; width: 80%; vertical-align: middle; }
	.board-list li a span:before			{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); }
	.board-list li a sup					{ display: block; position: relative; font-size: 0.75em; color: #fff; font-family: 'Jeju Myeongjo'; letter-spacing: 0.5em; padding-bottom: 0.5em; }
	.board-list li a em						{ display: block; position: relative; font-family: 'Hanna'; font-size: 1.3em;  line-height: 1.3em; color: #fff; word-wrap: break-word; word-break: keep-all; }
}


/***************************
	Instargram List
****************************/
@media all and (min-width: 1001px) {
	#instagram_list					{ padding: 85px 0 75px; overflow: hidden; }
	#instagram_list .title			{ position: relative; max-width: 382px; margin: 0 auto 35px; padding: 0; }
	#instagram_list .title:before	{ content: ""; display: block; position: relative; padding-top: 19.6335%; }
	#instagram_list .title span		{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; text-indent: -999px; background: url('../images/main/tlt_insta.png') no-repeat 50% 50%; background-size: contain; }
	#instagram_list a.ui-more		{ display: block; position: absolute; top: 30px; right: 0; background: url('../images/main/btn_more.png') no-repeat 0 0; background-size: contain; width: 101px; height: 41px; overflow: hidden; text-indent: -999px; }

	#instagram_gallery_list					{ position: relative; max-width: 1825px; margin: 0 auto 17px; }
	#instagram_gallery_list .inner			{ height: 300px; line-height: 300px; overflow: hidden; }
	#instagram_gallery_list .inner ul		{ list-style: none; margin: 0; padding: 0; height: 100%; }
	#instagram_gallery_list .inner ul li	{ float: left; width: 300px; height: 100%; margin: 0 4px 0 0; padding: 0; text-align: center; }

	#instagram_gallery_list .slidee li img		{ width:100%; height:100%;}

	#instagram_list .scrollbar						{ margin: 0; height: 3px; background: #f9f9f9; border: 2px solid #f9f9f9; box-sizing: content-box; line-height: 0; }
	#instagram_list .scrollbar .handle				{ width: 100px; height: 100%; background: #000000; cursor: pointer; }
	#instagram_list .scrollbar .handle .mousearea	{ position: absolute; top: -9px; left: 0; width: 100%; height: 20px; }
}
@media all and (max-width: 1000px) {
	#instagram_list					{ padding: 3.9em 0 2.5em; overflow: hidden; }
	#instagram_list .title			{ position: relative; margin-bottom: 2.3em; }
	#instagram_list .title:before	{ content: ""; display: block; position: relative; padding-top: 12.6666%; }
	#instagram_list .title span		{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; text-indent: -999px; background: url('../images/main/tlt_insta_mo.png') no-repeat 50% 50%; background-size: contain; }


	#instagram_gallery_list						{ margin: 0 auto; max-width: 640px; padding: 0 1.0em; }
	#instagram_gallery_list .slidee				{ transform: translateZ(0px) translateX(0px) !important; width: auto !important; margin: 0 -0.1em; }
	#instagram_gallery_list .slidee li			{ width: 50%; float: left; padding: 0.1em; box-sizing: border-box; }
	#instagram_gallery_list .slidee li img		{ display: block; width:175px; height:175px;}

	#instagram_list .scrollbar	{ display: none; }
	#instagram_list a.ui-more	{ display: block; margin-top: 1.0em; font-size: 1.1em; text-align: center; padding: 1.22em 0; border: 1px solid #c0c0c0; }
}