@charset "utf-8";


@media (max-width: 1400px) {

#wrap #content .section.default h3{padding: 15% 0 90px 0;}

.sub_visual .visual_list li.vs1 .m_inner{position:relative; margin:50px auto 0px auto;  width:80%; max-width:1200px; text-align:left; color:#fff; line-height:64px; padding:100px 0 0 2%; }
.sub_visual .visual_list li.vs1 .m_inner img, .sub_visual .visual_list li.vs2 .m_inner img, .sub_visual .visual_list li.vs3 .m_inner img{width:80%; max-width:316px;}
.sub_visual .visual_list li.vs2 .m_inner{position:relative; margin:50px auto 0px auto; text-align:left; width:80%; padding:100px 0 0 0; font-size:54px; color:#fff; line-height:64px;}
.sub_visual .visual_list li.vs3 .m_inner{position:relative; margin:50px auto 0px auto; text-align:left; width:80%; padding:100px 0 0 0; font-size:54px; color:#fff; line-height:64px;}
.sub_visual .visual_list li.vs4 .m_inner{position:relative; margin:50px auto 0px auto; text-align:left; width:80%; padding:100px 0 0 0; font-size:54px; color:#fff; line-height:64px;}



}/* 1400px End */


@media (max-width: 1300px) {



}/* 1300px End */





@media (max-width: 1200px) {


#wrap #content .sub_nav .container{width: 100%;border-left: none;}
#wrap #content .sub_nav ul li:last-child a{border-right: none;}

.container{width: 100%;}

}/* 1200px End */


@media (max-width: 1199px) {

#wrap #content{width: 100%; height:auto !important; padding-top:0;}
#wrap #content:after{display: block;content: '';clear: both;}

#sub #wrap #content{width: 100%;}
#sub #wrap #content .container{width:98%; margin: 0 1%; padding:60px 0;}

#wrap #header{position: fixed !important;  top: 0;left: 0;height: 65px; background:#fff !important; z-index:9998 !important; border-bottom: 1px solid #ccc;}
#wrap #header .inner{width:100%;}
#wrap #header .top_box{display: block;}
#wrap #header .container.pc{display: none;}
#wrap #content .container{width:100%; margin: 0 auto;padding:0px 0;}



#wrap #header .container.mobile .menu{position: relative;z-index: 3;float: right;width: 35px;text-align: right;}
#wrap #header .container.mobile .menu img{width: 32px;margin-top: 25px;}


#wrap .sub_nav.pc .container{width: 100%;height: 58px;margin: 0 auto;border-right: 1px solid #e1e1e1;border-left: 1px solid #e1e1e1; }

#wrap #content .section.default .container{width:98%; height: 100%; margin-left:auto !important; margin-right:auto !important;}
#wrap #content .section.default h3{padding:9% 0 20px 0;text-align: center;font-size: 42px;color: #fff;font-weight:600; letter-spacing:-0.03em;}


#wrap #header.on{border-bottom: none;}
#wrap #header .container.pc{display: none;}
#wrap #header .container.mobile{display: block;padding: 0 10px;background: #fff; height: 65px;border-bottom: 1px solid #ccc;}
#wrap #header .container.mobile h1.logo{float: left;padding: 0 0 0 0px;}
#wrap #header .container.mobile h1.logo img{margin-top:20px;width:140px;}

#wrap #header .container.mobile .menu{float: right;padding: 0 0px 0 0;}
#wrap #header .container.mobile .menu img{width: 30px;margin-top: 21px;}



#wrap .sub_vis{height:280px;}

#wrap .sub_vis h3{font-size:36px;color: #696969; line-height:60px !important; font-weight:400; letter-spacing:-0.03em; text-align: center; padding:145px 0 0px 0 !important;  }
#wrap .sub_vis p.txt{font-size:16px;color: #696969;font-weight:400; text-align: center; padding-top:0px;}
#wrap .sub_nav.pc .depth2 ul li.duble{float: left;margin-left:5px; padding-right:9px; letter-spacing:-0.05em; padding-top:10px;background:url(../img/s_img/sub_nav_bar.gif) no-repeat right 43%; text-align:center; line-height:18px !important;}
#wrap .sub_nav.pc .depth2 ul li.duble a{font-size:12px;color: #222; letter-spacing:-0.07em;  line-height:18px !important;font-weight: normal; text-align:center;}
#wrap .sub_nav.pc .depth2 ul li.duble a span.cut{display:block;}


h4{display: none;}

#wrap #content .section{height: auto;}
#wrap #content .section.default .container{height: auto;}
#wrap #content .section.default h3{padding: 18% 0 90px 0;font-size: 36px;}


/* 1199px sub */

#wrap .sub_nav.pc{display: none;}
#wrap .sub_nav.mobile{display: block;}

#wrap .sub_nav.mobile a.selected span.txt{display: block;width: 100%; padding-right:5px; height:60px;line-height: 60px;font-size:18px; letter-spacing:-0.07em; font-weight: 500;text-align: center;color: #090909;}
#wrap .sub_nav.mobile a.selected span.txt span.cut{display:block; }

#wrap .sub_nav.pc{display: none;}

#wrap .sub_nav.mobile{display: block;}


/* section별 타이틀*/

.section#section1 h3{padding:115px 0 0px 0;font-size: 28px;}
.section#section2 h3{padding:115px 0 0px 0;font-size: 28px; }
.section#section3 h3{padding:115px 0 0px 0;font-size: 28px; }




/* 1199px 메인 SECTION1 - 왜목마을 */

.section#section1 #product{clear:both; width:100%; height:auto; margin:60px 0 0 0; padding-bottom:80px;}
.section#section1 #product ul{width:100%; max-width:990px;}

.section#section1 #product ul.prd01 li{height:auto; min-height:395px; }
.section#section1 #product ul.prd01 li.b1{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size:100%;}
.section#section1 #product ul.prd01 li.b2{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size:100%;}
.section#section1 #product ul.prd01 li.b3{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size:100%;}
.section#section1 #product ul.prd01 li div.hello {position:relative; width:100%; text-align:left; padding:18px 0 0 18px;}
.section#section1 #product ul.prd01 li div.hello img{width:91%; max-width:300px; margin:0 auto; }





/* 1199px SECTION2 - 왜목마을 숙박  */

.section#section2 .por_outer { width:98%; max-width:990px; margin:80px auto 0 auto !important; height:auto;  padding-bottom:80px; }
.section#section2 .por_list li dt { width:100%; height:auto; overflow:hidden; }

.section#section2 .por_outer h3{ margin:30px 0;  }
.section#section2 .por_list li dt { width:100%; height:auto; }
.section#section2 .por_list li dt img {max-width:100%; width:100%; height:auto; }

.section#section2 .por_list li.last {margin-right:0px;  }
.section#section2 .por_list li dt { width:100%; height:auto;  }
.pro_action .hover .sub_tit a {  padding-top:30%; }





/*1199px 메인 SECTION3 -  계절별 먹거리 */



.section#section3 .about_box {  width:100%; max-width:990px; margin:40px auto 0 auto !important;height: 480px;}
.section#section3 .area {width:100%;  }



.section#section3 .icon_bar ul li a span.more_btn {display:block; width:75px; height:75px; margin:0 auto; margin-top:-75px; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;border-radius:50px; }
.section#section3 .icon_bar ul li a:hover span.more1,#section1 .icon_bar ul li.area01 a:focus span.more1 {background-size:75px;}
.section#section3 .icon_bar ul li a:hover span.more2,#section1 .icon_bar ul li.area01 a:focus span.more2 {background-size:75px;}
.section#section3 .icon_bar ul li a:hover span.more3,#section1 .icon_bar ul li.area01 a:focus span.more3 {background-size:75px;}
.section#section3 .icon_bar ul li a:hover span.more4,#section1 .icon_bar ul li.area01 a:focus span.more4 {background-size:75px;}





}/* 1199px End*/



@media (max-width: 991px) {
#wrap #content .container{width: 100%;margin: 0 auto;padding:0px 0;}
#sub #wrap #content .container{width:96%; margin: 0 auto; padding:60px 0;}
#wrap #content{width: 100%; height:auto !important; }
#wrap #content:after{display: block;content: '';clear: both;}

#wrap #content .section.default .container{width:96%; height: 100%; margin-left:auto !important; margin-right:auto !important;}
#wrap #content .section.default h3{padding:10% 0 20px 0;text-align: center;font-size: 38px;color: #fff;font-weight:600; letter-spacing:-0.03em;}




/* 991px sub */

#wrap .sub_nav.pc{display: none;}
#wrap .sub_nav.mobile{display: block;}

#wrap .sub_nav.mobile a.selected span.txt{display: block;width: 100%; padding-right:5px; height:60px;line-height: 60px;font-size:18px; letter-spacing:-0.07em; font-weight: 500;text-align: center;color: #090909;}
#wrap .sub_nav.mobile a.selected span.txt span.cut{display:block; }

#wrap .sub_nav.pc{display: none;}

#wrap .sub_nav.mobile{display: block;}

/* 991px sub(common) */
#wrap #content h4{display: none;}


#wrap #content .section.default h3{padding: 25% 0 80px 0;font-size: 30px;}

#wrap .sub_vis{height:280px;}
#wrap .sub_vis h3{font-size:34px;color: #696969; line-height:60px !important; font-weight:400; letter-spacing:-0.03em; text-align: center; padding:145px 0 0px 0 !important;  }
#wrap .sub_vis p.txt{font-size:16px;color: #696969;font-weight:400; text-align: center; padding-top:0px;}

.hide{display:none;}






/* section별 타이틀*/

.section#section1 h3{padding:80px 0 0px 0;font-size: 26px;}
.section#section2 h3{padding:80px 0 0px 0;font-size: 26px; }
.section#section3 h3{padding:80px 0 0px 0;font-size: 26px; }




/* 991px 메인 SECTION1 - 왜목마을 */

.section#section1 #product{clear:both; width:96%; height:auto; margin:60px auto 0 auto; padding-bottom:80px;}
.section#section1 #product ul{width:100%; max-width:760px;}

.section#section1 #product ul.prd01 li{height:100%; min-height:320px; position : relative;}
.section#section1 #product ul.prd01 li.b1{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size:100% 326px;}
.section#section1 #product ul.prd01 li.b2{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size:100% 326px;}
.section#section1 #product ul.prd01 li.b3{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size:100% 326px;}
.section#section1 #product ul.prd01 li div.hello {position:relative; width:100%; text-align:left; padding:15px 0 0 15px;}
.section#section1 #product ul.prd01 li div.hello img{width:100%; max-width:213px; margin:0 auto; }


.section#section1 #product ul.prd01 li dl{position:absolute; top:68%; left:15px; text-align:left; width:90%; }

.section#section1 #product ul.prd01 li dl dt{font-size:16px; padding-top: 3px;}
.section#section1 #product ul.prd01 li dl dd{font-size:13px;}
.section#section1 #product ul.prd01 li dl dd.btn{padding-right:18px; position : absolute; bottom: 0; right: 0; }





/* 991px 메인 SECTION2 - 왜목마을 숙박 */

.section#section2 {clear:both; width:100%; height:100%; margin:0px auto; padding:0;background:url(../img/s_img/section2_bg.jpg) repeat-y center 0;}

.section#section2 .por_outer {width:96%; height:auto; max-width:760px; margin:20px auto 0 auto !important;  padding-bottom:60px;}
.pro_action .hover .sub_tit a {  padding-top:26%; }

.section#section2 .por_list { display:block; position:relative; width:100%; padding:0;margin-top:60px; overflow:hidden;}

.section#section2 .por_list li {width:50%; max-width:100%; float:left; margin:0 auto 40px auto; text-align:center;}
.section#section2 .por_list li.last {margin-right:0px; }

.section#section2 .por_list li dl{max-width:285px;margin:0 auto;text-align:center;width: 94%;}






/* 991px 메인 SECTION3 -  계절별 먹거리 */


.section#section3{clear:both; position:relative;width:100%; height:auto; margin:0 auto;  background:#fff url(../img/s_img/section3_bg.jpg) no-repeat center bottom;}

.section#section3 .about_box {  width:100%; max-width:760px; margin:60px auto 0 auto !important; height: auto;}
.section#section3 .area {width:100%;  min-height:980px;}
.section#section3 .icon_bar ul li {width:50%; margin:0 auto 40px auto; }

.section#section3 .icon_bar ul li a {width: 96%; margin:0 auto;}

.section#section3 .icon_bar ul li a span.img_area {width:100%; max-width:256.5px;  margin:0 auto;padding-top:15px; overflow:hidden; transition:margin 0.35s ease-in-out; text-align:center;}
.section#section3 .icon_bar ul li a span.img_area img {width:100%; max-width:256.5px;  margin:0 auto; transition: 0.35s ease-in-out; text-align:center;}



.section#section3 .icon_bar ul li a span.more_btn {display:block; width:90px; height:90px; margin:0 auto; margin-top:-90px; transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;border-radius:50px; }
.section#section3 .icon_bar ul li a:hover span.more1,#section1 .icon_bar ul li.area01 a:focus span.more1 {background-size:90px;}
.section#section3 .icon_bar ul li a:hover span.more2,#section1 .icon_bar ul li.area01 a:focus span.more2 {background-size:90px;}
.section#section3 .icon_bar ul li a:hover span.more3,#section1 .icon_bar ul li.area01 a:focus span.more3 {background-size:90px;}
.section#section3 .icon_bar ul li a:hover span.more4,#section1 .icon_bar ul li.area01 a:focus span.more4 {background-size:90px;}









}/* 991px End*/


@media (max-width: 768px) {

#wrap #header{position: fixed;top: 0;left: 0;height:60px; background:#fff !important;  }
#wrap #header .container.mobile h1.logo img{margin-top:20px; width:140px; }
#wrap #header .container.mobile .menu img{width: 32px;margin-top:20px;}


#sub #wrap #content .container{width:94%; margin:0 auto; position:relative; padding:40px 0;}
#sub #wrap #content h4{font-size:24px;color: #090909;text-align: center;font-weight: 500;margin-bottom:55px;}
#sub #wrap #content h4 span{font-size:24px;}
/* #sub #wrap #content h5{clear:both; font-size:18px; color: #111; text-align:left; font-weight:600; line-height:28px;margin:20px 0 20px 0; letter-spacing:-0.05em; padding-left:20px; background:url('../img/s_img/h5_bull_m.gif') no-repeat 0 13px; } */
#sub #wrap #content h5.fir{margin-top:0;}
#sub #wrap #content{width: 100%; height:auto !important; }
#sub #wrap #content:after{display: block;content: '';clear: both;}
#sub #wrap #content{width: 100%;}


#wrap .sub_vis{height:260px;}
#wrap .sub_vis h3{font-size:32px;color: #696969; line-height:60px !important; font-weight:bold; letter-spacing:-0.03em; text-align: center; padding:130px 0 0px 0 !important;  }
#wrap .sub_vis p.txt{font-size:15px;color: #696969;font-weight:400; text-align: center; padding-top:0px;}


 .apst-button{display:none;}


#wrap #content .section.default h3{padding: 25% 0 80px 0;font-size: 30px;}

#wrap #content .sub_nav .select{display: block;}
#wrap #content .sub_nav ul{display: none;padding: 35px 0;}
#wrap #content .sub_nav ul li{float: none;width: 100% !important;}
#wrap #content .sub_nav ul li.on{} 
#wrap #content .sub_nav ul li a{background: transparent;color: #fff;border-right: none;font-size: 22px;height: 55px;line-height: 55px;} 
#wrap #content .sub_nav ul li.on a{background: transparent;color: #fff;} 
#wrap #content .sub_vis{height: 280px;}
#wrap #content .sub_vis h3{font-size: 35px;letter-spacing: -1px;line-height: 280px;}
#wrap .sub_vis#sub1{background: url(../img/p_img/sub_vis1_m.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub2{background: url(../img/p_img/sub_vis2_m.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub3{background: url(../img/p_img/sub_vis3_m.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub4{background: url(../img/p_img/sub_vis4_m.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub5{background: url(../img/p_img/sub_vis5_m.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}
#wrap .sub_vis#sub6{background: url(../img/p_img/sub_vis6_m.jpg) no-repeat center center;-webkit-background-size: cover;background-size: cover;}



/* section별 타이틀*/

.section#section1 h3{padding:80px 0 0px 0;font-size: 20px;}
.section#section2 h3{padding:80px 0 0px 0;font-size: 20px; }
.section#section3 h3{padding:80px 0 0px 0;font-size: 20px; }



/* 768px 메인 SECTION1 - 왜목마을 */

.section#section1 #product{clear:both; width:100%; height:auto; margin:60px 0 0 0; padding-bottom:80px; background:#c7ddeb url(../img/s_img/section1_bg.jpg) no-repeat center bottom;}
.section#section1 #product ul{width:100%; max-width:370px; text-align:center; margin:0 auto; padding-left:0;}
.section#section1 #product ul.prd01 li{float: none;width:100%; max-width:300px; height:440px; margin:0 auto;}

.section#section1 #product ul.prd01 li{height:auto; min-height:370px; }
.section#section1 #product ul.prd01 li.b1{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size: 100% 360px;}
.section#section1 #product ul.prd01 li.b2{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size: 100% 360px;}
.section#section1 #product ul.prd01 li.b3{background: url(../img/s_img/product_bg.png) no-repeat 0 0; background-size: 100% 360px;}
.section#section1 #product ul.prd01 li div.hello {position:relative; width:91%; text-align:center; padding:15px 0 0 16px;}
.section#section1 #product ul.prd01 li div.hello img{width:100%; max-width:300px; margin:0 auto; }
.section#section1 #product ul.prd01 li dl{position:absolute; top:72%; left:15px; text-align:left; width:91%; }


.section#section2 .por_list li dd { font-size:16px; }


.section#section2 .por_outer {margin:0px auto 0 auto !important;  padding-bottom:40px;}























}/* 768px End*/



@media (max-width: 576px) {


#wrap #content .sub_vis{height: 220px;}
#wrap #content .sub_vis h3{line-height: 220px;}









}/* 576px End */




@media (max-width: 480px) {

.section#section1 #product{ margin:40px 0 0 0; }

.section#section1 #product ul.prd01 li dl dt{font-size:22px; }

.section#section1 h3{padding:60px 0 0px 0;font-size: 20px;}
.section#section2 h3{padding:60px 0 0px 0;font-size: 20px; }
.section#section3 h3{padding:60px 0 0px 0;font-size: 20px; }


.section#section1 h3 span.line{display:block; background:url(../img/s_img/wave_line.png) no-repeat center bottom;}
.section#section2 h3 span.line{display:block; background:url(../img/s_img/wave_line.png) no-repeat center bottom;}
.section#section3 h3 span.line{display:block; background:url(../img/s_img/wave_line.png) no-repeat center bottom;}




.section#section2 .por_list li {width:100%; max-width:100%; float:left; margin:0 auto 40px auto; text-align:center;}
.section#section2 .por_list li.last {margin-right:auto; }



.section#section3 .area {width:100%;  min-height:1840px;}
.section#section3 .icon_bar ul li {width: 100%;margin:0 auto 40px auto;}
.section#section3 .about_box {  margin:40px auto 0 auto !important; }



}/* 480px End */