@charset "utf-8";
 
#wrap {position:relative; padding-top:0}

#wrap .slick-dots {bottom:0; position:relative; width:auto; display:inline-block; vertical-align:top}
#wrap .slick-btn-wrap,
#wrap .slick-btn-wrap3 {position:absolute; bottom:10px; left:50%; transform:translateX(-50%); z-index:1;}
#wrap .slick-btn-wrap2 {position:absolute; bottom:10px; right:10px; z-index:1;}
#wrap .slick-pause-btn,
#wrap .slick-play-btn {color:#fff; display:none; width:14px; height:14px; overflow:hidden; font-size:0}
#wrap .slick-pause-btn.on {background:url('/images/main/vis_stop.png') no-repeat}
#wrap .slick-play-btn.on {background:url('/images/main/vis_play.png') no-repeat}
#wrap .slick-pause-btn.on,
#wrap .slick-play-btn.on {display:block; width:19px; height:20px}
.slick-dotted.slick-slider {margin-bottom:0 !important}
#wrap .slick-btn-box {display:inline-block}
#wrap .slick-dots li {vertical-align:middle; width:auto; height:auto; margin:0 3px}
#wrap .slick-dots li button {position:relative; width:15px; height:15px; padding:0; margin:0 auto}
#wrap .slick-dots li.slick-active button {width:15px; height:15px}
#wrap .slick-dots li button:before {color:transparent; border:3px solid #fff; border-radius:50%; transition:all 0.6s; opacity:1; width:8px; height:8px; top:50%; left:50%; transform:translate(-50%, -50%); line-height:inherit; content:''}
#wrap .slick-dots li.slick-active button:before {border:3px solid #fff; background:#f04d33; border-radius:50%; transition:all 0.6s; opacity:1; width:9px; height:9px; top:50%; left:50%; transform:translate(-50%, -50%)}

#_vis {margin-top:130px; position:relative}
#_vis,
#_vis ._vis {text-align:center; position:relative; overflow:hidden}
#_vis ._vis {display:block;background-position:50% 0;background-repeat:no-repeat;background-size:cover}
#_vis ._vis img {text-align:center; max-width:100%; position:relative}
#_vis .__p {margin:0 auto}

.section1 {background:#fff8f8; padding:60px 0}
.section2 {background:url('/images/main/m_bg.gif') center top no-repeat; padding:60px 0}

.story {max-width:1650px; margin:0 auto; position:relative}
.story > div {width:1500px; margin:0 auto; position:relative; overflow:hidden}

.story ul {font-size:0; display:flex; flex-wrap:wrap; margin-left:-20px; margin-bottom:50px}
.story ul li {display:inline-block; width: calc(25% - 46px); margin:3px 3px 3px 43px; position:relative; box-sizing:border-box}
.story ul li {background:#fff; box-shadow: 0px 1px 3px rgba(0,0,0,0.2); overflow: hidden; padding:10px; min-height:321px}
.story ul li a {position:absolute; top:0; left:0; width:100%; height:100%; font-size:0; z-index:1}
.story ul li .tmb {position:relative; padding-bottom:91%; background-position:center top; background-size:cover; border-radius:20px; border:1px solid #e3e3e3}
.story ul li .txt {font-size:18px; font-weight:500; padding:10px; /*text-overflow:ellipsis; white-space:nowrap; overflow:hidden;*/ line-height:1.5; padding-bottom:0}
.story ul li .txt span {display:block; font-size:14px; font-weight:300; margin-top:10px}

.story button {position:absolute; top:50%; left:0; transform:translateY(-50%); width:52px; height:53px; font-size:0; background:url('/images/main/btn_prev.png') no-repeat}
.story button.btn_next {right:0; left:inherit; background:url('/images/main/btn_next.png') no-repeat}

.container {clear:both; max-width:1500px; margin:0 auto; font-size:0}

.notice {width: calc(100% - 500px); display:inline-block; font-size:16px; position:relative; margin-right:50px; height:340px; vertical-align:top; border:1px solid #e3e3e3; border-radius:20px; box-sizing:border-box; background:#fff}

.notice > ul {font-size:0}
.notice > ul > li {display:inline-block; width:50%}
.notice > ul > li > a {font-size:23px; font-weight:500; color:#888; position:relative; padding:17px 0 25px 25px; display:block; box-sizing:border-box; background:#efefef url('/images/comm/btn_more2.png') right 20px center no-repeat}
.notice > ul > li:first-child > a {border-radius:20px 0 0 0}
.notice > ul > li:last-child > a {border-radius:0 20px 0 0}
.notice > ul > li.active > a {color:#fff; background:#10a247 url('/images/comm/btn_more1.png') right 20px center no-repeat}
.notice > ul > li > div {position:absolute; top:64px; left:0; display:block; width:100%; padding:0 20px; box-sizing:border-box}
.notice > ul > li:not(.active) > div {display:none}
.notice > ul > li > div > ul {display:block}
.notice > ul > li > div > ul > li {padding:35px 0 36px 80px; border-bottom:1px solid #e3e3e3; width:100%; position:relative; box-sizing:border-box}
.notice > ul > li > div > ul > li:last-child {border-bottom:none}
.notice > ul > li > div > ul > li > a {width:100%; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; display:block; font-size:18px}
.notice > ul > li > div > ul > li > span {position:absolute; top:50%; left:0; transform:translateY(-50%); font-size:14px; color:#737373; display:block; width:60px; text-align:center; line-height:1.2}
.notice > ul > li > div > ul > li > span strong {display:block; font-size:25px; font-weight:700; color:#10a247}
.notice > ul > li p {position:relative}
.notice > ul > li a.btn_more, 
.notice > ul > li.active > a.btn_more {position:absolute; top:-40px; right:20px; z-index:10; background-color:transparent; background-image:none; width:20px; height:20px; padding:0} 

.food {width:450px; display:inline-block; font-size:20px; background:#10a247; border-radius:30px; padding:30px; box-sizing:border-box; height:340px; vertical-align:top; position:relative; padding-top:17px}
.food h2 {font-size:20px; font-weight:400; margin-bottom:15px; background:url('/images/main/ico_food.png') no-repeat; color:#fff; text-align:left; padding:9px 0 8px 50px}
.food div {background:#fff; width:100%; height: calc(100% - 50px); overflow:hidden; text-align:center; padding:20px; box-sizing:border-box; line-height:1.8}
.food p {color:#fff; font-size:20px; font-weight:400; position:absolute; top:17px; right:70px}
.food .btn_more {position:absolute; top:20px; right:20px}

/*
.direct {width:100%; display:block}
.direct ul {display:flex; margin-left:-23px; margin-bottom:50px}
.direct li {vertical-align:top; width:20%; border:1px solid #94c73a; border-radius:30px; text-align:center; margin:3px 3px 3px 23px; background:#fff; box-shadow: 0px 1px 3px rgba(0,0,0,0.2); overflow: hidden}
.direct li a {display:block; width:100%; height:100%; font-size:20px; font-weight:500; padding:25px 0; box-sizing:border-box}
.direct li a img {margin-bottom:20px}
*/

.direct {width:100%; display:block}
.direct ul {display:flex; margin-left:-70px; margin-bottom:50px; flex-wrap:wrap}
.direct li {vertical-align:top; width: calc(33.33% - 70px); border:1px solid #94c73a; border-radius:30px; text-align:center; margin-left:70px; box-sizing:border-box; background:#fff; box-shadow: 0px 1px 3px rgba(0,0,0,0.2); overflow: hidden}
.direct li:nth-child(n+4) {margin-top:70px}
.direct li a {display:block; width:100%; height:100%; font-size:20px; font-weight:500; padding:50px 0; box-sizing:border-box}
.direct li a img {margin-bottom:20px}

h2 {font-size:35px; font-weight:500; margin-bottom:50px; text-align:center}

.sns {font-size:0; margin-left:-20px}
.sns > div {border:1px solid #dbdbdb; box-sizing:border-box; display:inline-block; width: calc(25% - 20px); height:250px; margin-left:20px; vertical-align:top; border-radius:15px 15px 0 0}

.youtube h2 {background:#d4262c url('/images/main/ico_youtube.gif') left 20px center no-repeat; color:#fff; font-size:18px; padding:18px 0 19px 60px; border-radius:15px 15px 0 0; text-align:left; margin-bottom:0}
.youtube .video {position:relative; padding-bottom:48.75%; height:0; overflow:hidden; height:195px; box-sizing:border-box; display:block}
.youtube .video iframe,
.youtube .video object,
.youtube .video embed {position:absolute; top:0; left:0; width:100%; height:100%;}

.facebook h2 {background:#435e99 url('/images/main/ico_facebook.gif') left 20px center no-repeat; color:#fff; font-size:18px; padding:18px 0 19px 60px; border-radius:15px 15px 0 0; text-align:left; margin-bottom:0}

.kakao a {width:100%; height:100%; display:block; background:#ffe800; text-align:center; box-sizing:border-box; padding-top:35px; border-radius:15px 15px 0 0}
.kakao a p {margin-top:30px; margin-bottom:20px; font-size:22px; font-weight:400}
.kakao a span {display:inline-block; font-size:16px; font-weight:400; padding:7px 13px; background:#3a2020; color:#fff; border-radius:15px}

.instar a {width:100%; height:100%; display:block; background:#f7f7f7; text-align:center; box-sizing:border-box; padding-top:35px; border-radius:15px 15px 0 0}
.instar  a p {margin-top:30px; margin-bottom:20px; font-size:22px; font-weight:400}
.instar  a span {display:inline-block; font-size:16px; font-weight:400; padding:7px 13px; background:#8a50a0; color:#fff; border-radius:15px}


@media all and (max-width:1200px){

	.container {width:100%; padding:0 10px; box-sizing:border-box}

	.story {width:100%; margin:0 auto; position:relative}
	.story > div {width: calc(100% - 150px)}

	.story button {left:10px}
	.story button.btn_next {right:10px}

}

@media all and (max-width:1024px){

	#_vis {margin-top:165px}

}

@media all and (max-width:768px){

	#_vis {margin-top:60px}

	.notice {width:100%; display:block; margin-right:0; margin-bottom:50px}

	.food {width:100%; display:inline-block; font-size:16px; background:#10a247; border-radius:30px; padding:30px; box-sizing:border-box; height:340px; vertical-align:top; position:relative; padding-top:17px}

	.direct ul {margin-left:-20px}
	.direct li {width: calc(33.333% - 20px); margin-left:20px}
	.direct li:nth-child(n+4) {margin-top:20px}

	.sns > div {width: calc(50% - 20px)}
	.sns > div:nth-child(n+3) {margin-top:30px}

}

@media all and (min-width:640px){

	.__m {display:none !important;}
	.__nobg {background-image:none !important;}

}

@media all and (max-width:640px){

	#_vis ._vis {height:auto}
	.__p {display:none !important;}

	.section1,
	.section2 {padding:30px 0}	
	.section2 {background:#fff}

	h2 {font-size:24px; margin-bottom:30px}

	.story ul {margin-bottom:40px}
	.story ul li .txt {font-size:16px}
	.story ul li {min-height:inherit}

	.notice {height:290px; margin-bottom:40px}
	.notice > ul > li > a {font-size:18px; padding:12px 0 20px 18px}
	.notice > ul > li > div > ul > li {padding:25px 0 26px 80px}
	.notice > ul > li > div > ul > li > a {font-size:16px}
	
	.notice > ul > li a.btn_more, 
	.notice > ul > li.active > a.btn_more {top:-40px; right:20px; padding:0} 
	
	.food p {right:50px}

	.direct ul {margin-left:-10px; margin-bottom:40px}
	.direct li {width: calc(33.333% - 10px); margin-left:10px}
	.direct li a {font-size:16px; padding:30px 0}

	.sns {margin-left:0}
	.sns > div {width:100%; margin-left:0}
	.sns > div:nth-child(n+2) {margin-top:30px}

}

@media all and (max-width:480px){

	.direct li {width: calc(50% - 10px)}
	.direct li:nth-child(n+3) {margin-top:10px}

}