@charset "utf-8";

/* 헤더 서식 */

header{
  width:100%;
  position:fixed;
  top:0px; left:0px;
  z-index:100;
}
.h_inner{background:#fae09d;}
.h_top{
  height:94px;
  display:flex;
  justify-content:center;
  position:relative;
}
.h_top > h1{position:relative;z-index:101;padding:10px;width:112px;}
.h_top > h1 img{width:100%;}
.h_top > .lnb{
  width:120px;
  position:absolute;
  right:0px; top:50px;
  display:flex;
  justify-content:space-between;
}
.lnb > li > a{
  font-size:14px;
  font-weight:bold;
}

/* 메인 내비게이션 */
.nav_wrap{
  position:absolute;
  width:100%;
  height:56px;
  background:#363535;
  overflow:hidden;
  transition:0.5s;
}
.nav_wrap:hover{height:410px; background:rgba(0,0,0,.8);}
.gnb > li{position:relative;}
.gnb > li > a{padding:11px 30px;}
.gnb > li:hover > a{
  border-bottom:4px solid #ff5207;
  transition:0.1s;
}
.sub, .t_sub{
  position:absolute;
  width:100%;
  padding-top:10px;
}
.t_sub{display:none;}
.sub > li, .t_sub > li{text-align:center;line-height:40px;}
.sub > li > a, .t_sub > li > a{
  color:#fff;
  font-size:15px;
  font-weight:500;
  display:block;
}
.sub > li > a:hover{color:#ff5207;}
.h_bottom{
  width:100%; height:56px;
  font-size:18px;
  font-weight:500;
  text-align:center;
  line-height:56px;
  background:#fae09d;
}
.h_bottom > ul{
  display:flex;
  justify-content:space-around;
}
.h_bottom a{font-weight:bold;}

/* 메인 서식 */
main{
  padding-top:150px;
  width:100%;
  margin:0px auto;
}
.m_banner02 > article, .m_banner03, .con02_map, .h_top, .h_bottom > ul, .m_banner04 > .tema, .m_banner05 > .notice, .f_inner{width:1000px;margin:0px auto;}
.m_banner02 > article > h2, .m_banner03 > article > h2, .m_banner04 > article > h2{
  text-decoration:underline;
  text-underline-offset:15px;
}

/* 첫번째 레이아웃 서식 */
.m_banner01{
  width:100%;
  height:720px;
  position:absolute;
  left:0px;
  top:150px;
  overflow:hidden;
  background:url('../images/main_banner.jpg') no-repeat;
  background-position-y:30px;
  background-size:100%;
  background-attachment:fixed;
}
@media screen and (max-width:1335px){
  .m_banner01{background-size:120%;background-position-X:-120px;}
}
@media screen and (max-width:1120px){
  .m_banner01{background-size:130%;background-position-X:-125px;background-position-y:50px;height:650px;}
  .word{bottom:26% !important;}
}
.m_banner01 > p{
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%, -50%);
  font-weight:bold;
  font-size:35px;
  line-height:100px;
  text-align:center;
  color:#fff;
  z-index:2;
}
.txt_point{font-size:50px;}
.m_banner01 > img:first-child{
  position:absolute;
  top:30%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:1;
}
.small_txt{font-size:25px;display:inline-block;position:relative;color:#f00;animation:small_title 2s infinite;}
.small_txt:after{
  position:absolute;
  left:0px; top:0px;
  content:attr(data-text);
  -webkit-text-stroke: 2px #fff;
  z-index:-1;
}
@keyframes small_title{
  0%{transform:translateY(0%);}
  50%{transform:translateY(10%);}
  100%{transform:translateY(0%);}
}

.search_box{
  width:350px; height:40px;
  border:none;
  background:#fff;
  border-radius:50px;
  position:absolute;
  top:60%;
  left:50%;
  transform:translate(-50%, -50%);
  padding:0px 15px;
  display:flex;
  justify-content:space-between;
}
.search_box > input[type=text]{
  width:300px;
  font-size:16px;
  border:none;
}
.search_box > input[type=image]{
  width:30px; height:30px;
  padding-top:5px;
}
.word{
  width:515px;height:36px;
  overflow:hidden;
  position:absolute;
  bottom:28%;left:50%;
  transform:translate(-50%, -50%);
}
.word_inner{
  width:100%;
  position:relative;
}
.word_inner > ul{
  width:1020px;
  display:flex;
  position:absolute;top:0px;left:0px;
}
.word_inner > ul > li{
  width:78px;
  margin:0px 5px;
  padding:10px 20px;
  background:#f5f695;
  border-radius:20px;
  text-align:center;
}
.word_inner > ul > li a{font-weight:500;color:#000000;}

/* 두번째 레이아웃 서식 */
.m_banner02{
  margin-top:700px;
  width:100%; height:850px;
  text-align:center;
  background:linear-gradient(#fff 50%, #fff8d3 50%);
  position:relative;
}
.m_banner02 > article{padding-top:50px;}
.m_banner02 > article > h2{
  float:left;
  padding:20px 0px;
}
.m_banner02 > article > p{
  float:left;clear:left;
  font-size:20px;
  padding:20px 0px;
}
.m_banner02 > article > p > br{display:none;}
.m_banner02 > article > p > i{color:#ff5207;font-size:25px;}
.con02_map{
  height:600px;
  display:flex;
  position:relative;
  justify-content:space-around;
}
.con02_map > .m01{width:55%;}
.con02_map > .m02{width:45%;}

.m01 > dl{
  height:540px;
  padding-top:20px;position:relative;
}
.m01 > dl > dt{
  border:2px solid #ff5207;
  border-radius:20px;
  width:40%;margin:0px auto;
  padding:15px 0px;
  font-size:20px;
  position:absolute;
  bottom:-74px; left:50%;
  transform:translateX(-50%);
}
.m01 > dl > dt > a{font-weight:500;}
.m01 > dl > dt > a > i.fa{
  position:absolute;
  right:15px;bottom:9px;
  padding:5px;
}
.m01 > dl > dd{width:250px; height:258px; overflow:hidden;padding:10px 10px;}
.m01 > dl > dd:first-of-type, .m01 > dl > dd:nth-of-type(3){float:left;}
.m01 > dl > dd:nth-of-type(2), .m01 > dl > dd:last-of-type{float:right;}
.m01 > dl > dd a{
  display:block;
  width:100%;height:100%;
  position:relative;
  border:1px solid #ccc;
  overflow:hidden;
}
.m01 > dl > dd > a > img{width:100%;}
.m01 > .daejeon_list > dd{float:left !important;}

.festa_info{
  width:250px; height:65px;
  position:absolute;
  bottom:0px;left:0px;
  background:#fff;
}
.festa_info > p{padding:4px 0px;text-align:left; text-indent:10px;}
.festa_info > p:first-child{font-size:17px;font-weight:500;padding-top:10px;}

.con02_map dl{display:none;}

.con02_map li input[type=radio]:checked + dl{display:block;}

/* 지도 서식 */
@media screen and (min-width:1024px) {
  /* PC 서식에서의 마우스오버 효과 */
  /* 지도 */
  .m01 > dl > dt:hover > a > i.fa{
    border-radius:50%;
    background:#ff5207;
    color:#fff;
  }
  .btn:hover{color:#fff;transform:translateX(25px);}
  .btn01:hover{background:url('../images/map_seoul.png');}
  .btn02:hover{
    background:url('../images/map_incheon.png')no-repeat;
    background-position:29px 17px;
  }
  .btn03:hover{background:url('../images/map_gyeonggi.png');}
  .btn04:hover{background:url('../images/map_kangwon.png');}
  .btn05:hover{background:url('../images/map_chungnam.png');}
  .btn06:hover{background:url('../images/map_chungbuk.png');}
  .btn07:hover{
    background:url('../images/map_sejong.png')no-repeat;
    background-position:8px 0px;
  }
  .btn08:hover{background:url('../images/map_daejeon.png');}
  .btn09:hover{background:url('../images/map_gyeongbuk.png');}
  .btn10:hover{background:url('../images/map_gyeongnam.png');}
  .btn11:hover{
    background:url('../images/map_daegu.png')no-repeat;
    background-position:-3px 0px;
  }
  .btn12:hover{
    background:url('../images/map_ulsan.png')no-repeat;
    background-position:-3px 0px;
  }
  .btn13:hover{background:url('../images/map_busan.png')no-repeat;}
  .btn14:hover{background:url('../images/map_jeonnam.png')no-repeat;}
  .btn15:hover{background:url('../images/map_jeonbuk.png');}
  .btn16:hover{
    background:url('../images/map_gwangju.png')no-repeat;
    background-position:-1px 0px;
  }
  .btn17:hover{background:url('../images/map_jeju.png');}
  .btn18:hover{
    background:url('../images/map_ulleung.png')no-repeat;
    background-position:15px 27px;
  }
  .btn19:hover{
    background:url('../images/map_dokdo.png')no-repeat;
    background-position:5px 0px;
  }

  /* 테마 */
  .tema_inner > div > a:hover{width:310px;}
  .tema_inner > div > a:hover > .tema_info{width:310px;background:rgba(0,0,0,.4);}
  .tema_inner > div > a:hover > .tema_info > h3{width:310px;}
}
.m02{
  position:relative;
  transform:translateX(50px);
}
.m02 > img{
  position:relative;
}
.m02 > label{
  position:absolute;
  font-size:13px;
  display:block;
  font-weight:bold;
  transform:translateX(25px);
}

/* 지도 버튼 서식 */
.btn01{ 
  left:110px; top:82px;
  line-height:33px;
  width:36px; height:33px;
  z-index:120;
}
.btn02{
  left:60px; top:64px;
  line-height:28px;
  width:52px; height:50px;
  z-index:100;
}
.btn03{
  left:62px; top:47px;
  width:123px; height:147px;
  line-height:170px;
}
.btn04{
  left:156px; top:15px;
  width:153px; height:168px;
  line-height:168px;
}
.btn05{
  left:38px; top:180px;
  width:122px; height:126px;
  line-height:126px;
}
.btn06{
  left:138px; top:163px;
  width:109px; height:139px;
  line-height:70px;
}
.btn07{
  left:111px; top:224px;
  width:60px; height:29px;
  line-height:29px;
}
.btn08{
  left:129px; top:243px;
  width:28px; height:31px;
  line-height:33px;
}
.btn09{
  left:184px; top:167px;
  width:147px; height:166px;
  line-height:160px;
}
.btn10{
  left:160px; top:312px;
  width:144px; height:99px;
  line-height:99px;
}
.btn11{
  left:225px; top:286px;
  width:43px; height:40px;
  line-height:44px;
}
.btn12{
  left:294px; top:322px;
  width:34px; height:29px;
  line-height:27px;
}
.btn13{
  left:272px; top:343px;
  width:100px; height:46px;
  line-height:46px;
}
.btn14{
  left:39px; top:361px;
  width:148px; height:108px;
  line-height:115px;
}
.btn15{
  left:63px; top:287px;
  width:124px; height:90px;
  line-height:90px;
}
.btn16{
  left:81px; top:384px;
  width:35px; height:22px;
  line-height:22px;
}
.btn17{
  left:50px; top:496px;
  width:64px; height:38px;
  line-height:38px;
}
.btn18{
  left:310px; top:120px;
  width:40px; height:40px;
  line-height:25px;
}
.btn19{
  left:338px; top:155px;
  width:40px; height:20px;
  line-height:30px;
}
input[type=radio]{display:none;}

/* 세번째 레이아웃 서식 */
.m_banner03{height:500px;}
.m_banner03 > article{width:1000px;padding-top:100px;}
.m_banner03 > article p{font-size:25px;line-height:40px;padding-top:56px;}
.m_banner03 > article > h2{padding-bottom:80px;}
.m_banner03 > article > div{
  width:480px;height:200px;
  border-radius:20px;
}
.m_banner03 > article > div a{display:block;width:100%;display:flex;}
.m_banner03 > article > div span{color:#f00;font-weight:600;}
.with_food > a > img{width:43%;padding:0px 20px;}
.with_place > a > img{width:32%;padding:0px 40px;}
.with_food{float:left;background:#fff899;}
.with_place{float:right;background:#d5ffc8;}

/* 네번째 레이아웃 서식 */
.m_banner04{
  width:100%; height:650px;
  background:linear-gradient(to top ,#fff 58%, #fce0de 42%);
}
.tema{position:relative;}
.tema > h2{position:absolute;top:60px;left:0px;color:#ff5207;}
.tema > p{position:absolute;top:130px;left:0px;font-size:20px;}
.tema > p > br{display:none;}
.tema_inner{
  display:flex;justify-content:space-around;
  transform:translateY(180px);
  padding:30px 20px;
  background:#fff;
  border-radius:20px;
}
.tema_inner > div{overflow:hidden;border-radius:20px;}
.tema_inner > div img{height:100%;}
.tema_inner > div > a{
  display:block;width:200px;height:300px;
  transition:0.5s;
  position:relative;
}
.tema_info{
  position:absolute;bottom:0px;left:0px;
  color:#fff;
  width:200px;height:100%;
  transition:0.5s;
}
.tema_info > h3{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  font-size:25px;font-weight:500;
  position:absolute;bottom:60px; left:20px;
  width:160px;
}
.tema_info > p{line-height:30px; position:absolute; bottom:30px; left:20px;}

/* 다섯번째 레이아웃 서식 */
.m_banner05{width:100%; height:360px;}
.notice{display:flex;justify-content:center;}
.notice > h2{display:none;}
.event_list{
  width:323px;height:235px;
  position:relative;
  border:2px solid #ff5207;
  border-radius:20px;

}
.event_list img{width:100%;}
.event_list a{display:block;}
.event_list > div{position:absolute;top:20px;left:16px;border-radius:14px;overflow:hidden;}
.event_list > .list01{z-index:3;}
.event_list > .list02{z-index:2;display:none;}
.event_list > .list03{z-index:1;display:none;}

.notice_list{
  width:calc(100% - 407px);
  height:195px;
  padding:0px 40px;
}
.notice_list a{display:block;}
.notice_list > a{font-size:26px;font-weight:500;line-height:50px;}
.notice_list > a > i.fa{float:right;}
.notice_list > ul > li{line-height:44px;border-top:1px solid #d8d8d8;}
.notice_list > ul > li:last-child{border-bottom:1px solid #d8d8d8;}
.notice_list > ul > li > a{font-size:18px;}
.notice_list > ul span{font-weight:500;color:#ff5207;padding-right:10px;}

/* 푸터서식 */
footer{
  width:100%;height:150px;
  background:#363535;
  margin:0px auto;
}
.f_inner{
  height:150px;
  display:flex;
  justify-content:space-around;
}
.f_inner > h2{padding-top:40px;}
.f_inner nav > ul{
  width:500px;
  display:flex;
  font-size:14px;
  margin: 30px 0;
}
.f_inner nav > ul > li{padding-right:80px;}
.f_inner nav a{color:#fff;text-decoration:underline;}
.c_info > ul{
  width:500px;
  color:#fff;
  font-size:12px;
  display:grid;
  grid-template-columns:repeat(3, 167px);
  grid-template-rows:repeat(3, 15px);
}
.c_info .info04{grid-area:2/1/3/5;}
.c_info .info07{grid-area:3/1/4/5;}
.sns_btn > ul{
  padding-top:20px;
  width:180px;
  display:flex;
  justify-content:space-between;
}