.titleBar{ width: 40px; height: 2px; background-color: #111; margin: 20px auto; }
.titleBar2{ width: 40px; height: 1px; background-color: #c0c0c0; margin: 20px auto; }
.titleBarB { width:40px; height:2px; background-color: #111; margin:20px auto;}
.titleBarV { width: 2px; height: 50px; background-color: #111; margin: 20px auto; }
.onsenVillageSec3 .titleBarV { background-color: #e1ac46; height: 40px; }
img { max-width: 100%; }
ul {margin: 0; list-style-type: none; padding: 0;}

/* ----------------------------------------------------------------
상단 지역 제목 / 설명 / 이미지
-----------------------------------------------------------------*/
.toptit { position: absolute; width: 100%; top: 35%; left: 0; z-index: 100; color: #fff; transform: translateY(-40%); padding: 0 10px; }
.toptit .title1 { font-size: 18px; font-weight: 500; margin: 30px 0 5px;}
.toptit .title2 { margin: 40px 0 0; font-size: 2.6em; font-weight: 600; font-family: 'Jeju Myeongjo', serif;}
.toptit .title3 { font-size: 6em; font-weight: 600; font-family: 'Jeju Myeongjo', serif;}
.toptit .title4 { font-size: 16px; font-weight: 400; }
.image-bg > div{ height:90vh; }
.swiper-container {
  position: relative;
  z-index: 30;
  width: 100%;
  height:100%;
}
.swiper-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-algn: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center
}
#sliderinfo1 {
  background: url(//cdn.hotelonsen.com/onsen2/img/event/oita/main_bg1.jpg) center bottom no-repeat;
  background-size: cover;
}
#sliderinfo2 {
  background: url(//cdn.hotelonsen.com/onsen2/img/event/oita/main_bg2.jpg) center bottom no-repeat;
  background-size: cover;
}
#sliderinfo3 {
  background: url(//cdn.hotelonsen.com/onsen2/img/event/oita/main_bg3.jpg) center bottom no-repeat;
  background-size: cover;
}
#slidercopyfixed {
  position: absolute;
  z-index: 31;
  width: 100%;
  height: 60px;
  margin-top: -60px;
  background: url('/premium/event/img/hoshinoya_intro/hoshinoya_intro_ban_bg.jpg') center;
  display: table;
}
#slidercopyfixed-cell {  display: table-cell;  height: 100%;  vertical-align: middle; }
#slidercopyfixed h3 { margin-top: 0px; margin-bottom: 0px; }
.slidercopyfixedh3 { color:#fff; }

@media only screen and (max-width: 767px){
  .toptit .title1 { font-size: 16px; }
  .toptit .title2 { font-size: 1.7em; margin: 20px 0 0; }
  .toptit .title3 { font-size: 3.4em; }
  .toptit .title4 { font-size: 14px; }
  .slidercopyfixedh3 { font-size: 14px; }
}

/* ----------------------- sec02 - 큐슈 오이타현 온천마을 어디가 있을까?----------------------- */
.sec02 { background-color: #ffe7f5; }
.sec02 .sec02_tit { color: #555; font-size: 3em; font-weight: 300; line-height: 1.2; }
.best5_tit { color: #555; font-size: 4.2em; font-weight: 300; line-height: 1.2; }
.best5_tit .bold { font-weight: 600; }
.sec02_map { position: relative; }
.sec02_map a { position: absolute; width: 95px; height: 36px; cursor: pointer; }
.sec02_map .sec02_map_btn1 { left: 630px; top: 301px; width: 112px;}
.sec02_map .sec02_map_btn2 { left: 688px; top: 222px;}
.sec02_map .sec02_map_btn3 { left: 411px; top: 269px;}
.sec02_map .sec02_map_btn4 { left: 459px; top: 309px; width: 128px;}
.sec02_map .sec02_map_btn5 { left: 532px; top: 249px; width: 128px;}

/* ----------------------- 오이타현 인기 온천마을 BEST 5 ----------------------- */
.onsenVillageSec2Tab .nav-tabs { border: none; background-color: rgba(255,255,255,.1); border:1px solid #ff4e71; display: flex;}
.onsenVillageSec2Tab .nav-tabs > li { width:20%; }
.onsenVillageSec2Tab .nav > li > a { text-align: center; padding: 30px 0; color:#ff4e71; font-size:1.4em; }
.onsenVillageSec2Tab .nav-tabs > li > a { margin-right: 0; border: 0; border-radius: 0; font-weight: bold; }
.onsenVillageSec2Tab .nav-tabs > li:focus > a, .onsenVillageSec2Tab .nav-tabs > li > a:focus, .onsenVillageSec2Tab .nav-tabs > li:hover > a, .onsenVillageSec2Tab .nav-tabs > li > a:hover {background-color: #ff4e71;  color:#fff;
  -webkit-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.onsenVillageSec2Tab .nav-tabs > li:focus,.onsenVillageSec2Tab .nav-tabs > li:hover{background-color: #ff4e71;  color:#fff;
  -webkit-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.onsenVillageSec2Tab .nav-tabs > li.active, 
.onsenVillageSec2Tab .nav-tabs > li.active > li:focus, 
.onsenVillageSec2Tab .nav-tabs > li.active > li:hover { border: none; background-color: #ff4e71; color: #fff; }
.onsenVillageSec2Tab .nav-tabs > li.active > a, 
.onsenVillageSec2Tab .nav-tabs > li.active > a:focus, 
.onsenVillageSec2Tab .nav-tabs > li.active > a:hover { border: none; background-color: #ff4e71; color: #fff; }

@media only screen and ( max-width: 1199px ) {
  .sec02_map a { display: none; }
}
@media only screen and ( max-width: 767px ) {
  .sec02 .sec02_tit {font-size: 2em;}
  .best5_tit {font-size: 2em;}
  .onsenVillageSec2Tab .nav > li > a{font-size: 1em;}
}
@media only screen and ( max-width: 468px ) {
  .onsenVillageSec2Tab .nav > li > a{font-size: 14px; padding: 15px 10px}
}
@media only screen and ( max-width: 360px ){
  .onsenVillageSec2Tab .nav-tabs > li{ width: 100%;border-bottom: 1px solid rgba(255,78,113,0.3);  border-right: 1px solid rgba(255,78,113,0.3); }
  .onsenVillageSec2Tab .nav-tabs > li:nth-child(2n){ border-right: none;}
  .btn_wrap{padding-top:0}
  .onsenVillageSec2Tab .nav-tabs{display: block;}
}

/* -------------------------------------------------------
내용 
 ------------------------------------------------------- */
.onsenVillageSec2 .tab-content h3, .onsenVillageSec2Ban_txt h3 { font-size: 2em; letter-spacing: -0.05em; font-weight: 300; color: #242424; line-height: 1.5em;}
.onsenVillage { z-index: 32; position: relative; background: url('//cdn.hotelonsen.com/img/onsen/village/mapBg.jpg') repeat; font-size: 14px; }
.onsenVillageTitle { color: #555;text-transform: uppercase;font-size: 3.8em;font-weight: 300; line-height: 1.3;}
.onsenVillageTitle .small { font-size: 0.5em;}
.onsenVillageMap { position: relative; overflow: hidden; }
.onsenVillage .container { padding: 0; }

@media only screen and (max-width: 767px) {
  .onsenVillage { font-size: 12px; }
  .onsenVillageTitle { font-size: 2em; }
  .onsenVillageMap img { width: 900px; margin-left: -90px; max-width: inherit;}
  .onsenVillageMap.VillageMap2 img { width: 100%; margin: auto; }
}
@media only screen and ( max-width: 468px ) {
  .onsenVillageSec2 .tab-content h3, .onsenVillageSec2Ban_txt h3{font-size: 1.5em;}
}

/* ------------------------- 온천 어디에 있나요? ------------------------- */
.onsenVillageTab { z-index: 32; position: relative; background: #fff url('//cdn.hotelonsen.com/img/onsen/onsen_main/hoshinoya_intro_ban_bg.jpg') repeat-x; font-size: 14px; border-bottom:1px solid #eee; }
.onsenVillageTab h3 { font-weight: 300; color:#fff; }
.onsenVillageTab .nav-tabs { border: none; background-color: rgba(255,255,255,.2) }
.onsenVillageTab .nav-tabs > li { width:100%; border-bottom: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #fff;}
.onsenVillageTab .nav-tabs > li:first-child { border-left: 1px solid #fff; }
.onsenVillageTab .nav > li > a { text-align: center; padding: 30px 0 0; color:#fff; font-size:1.4em; opacity: .8;}
.onsenVillageTab .nav-tabs > li > a { margin-right: 0; border: 0; border-radius: 0; }
.onsenVillageTab .nav-tabs > li:focus > a, .onsenVillageTab .nav-tabs > li > a:focus, .onsenVillageTab .nav-tabs > li:hover > a, .onsenVillageTab .nav-tabs > li > a:hover {opacity: 1;  background-color: #115991;  color:#fff;
  -webkit-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);}
.onsenVillageTab_mobile_img { display: none; }
.onsenVillageTab .nav-tabs > li.active > a, .onsenVillageTab .nav-tabs > li.active > a:focus, .onsenVillageTab .nav-tabs > li.active > a:hover { background-color: #fff; border: none; color: #115991; font-weight: bold;  opacity: 1;}
.onsenVillageTab img { width: 100%; }

a .busBanner {
  position: relative; background-color: #229ae6; color:#fff; padding:30px; border-radius: 10px; cursor: pointer;
  -webkit-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
a #busBannerIcon { position: absolute; top:-20px; right:50px; background-color: #ff4e71; width:70px; height:70px; border-radius: 35px; color:#fff; font-weight: bold; font-size: 16px; line-height: 18px; padding-top:17px; }
a #busBanner1 { font-size: 1.5em; }
a #busBanner2 { font-size: 2.5em; font-weight: 900; letter-spacing: -1px; }
a #busBanner2 .acc { color:#fff000; }
.busBanner:hover { background-color: #115991; }

@media only screen and (max-width: 767px) {  
  .busBanner #busBanner2{font-size: 1.25em;}
  .busBanner #busBanner1{font-size: 1em ;}
  .busBanner{padding: 15px !important;}
  .busBanner #busBannerIcon{right: 0;}
}
@media only screen and ( max-width:468px ){
.onsenVillageTab_mobile_img{display:block;}
.onsenVillageTab_pc_img{display: none;}
#busBannerIcon{display: none;}
.busbanner{margin-top: 0 !important;}
.onsenVillageTab .nav > li > a{font-size: 1em;}
}

/* ----------------------------------------------------------------
관광 & 맛집 어디가 좋을까? (-section-2.php)
-----------------------------------------------------------------*/
.onsenVillageSec2 { z-index: 32; position: relative; background-color: #fff; font-size: 14px; }
.onsenVillageSec2Title { color: #555; text-transform: uppercase; font-size: 3em;font-weight: 300; }
.onsenVillageSec2 img { width:100%; }

.onsenVillageSec2BanBtn { max-width:1000px; margin-left: auto; margin-right: auto; padding:20px; }
.onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt{text-align: left;}
.onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt h3{font-size: 1.5em;  margin: 5px 0;color:#fff; }
.onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt p{letter-spacing: -0.05em; font-size: 14px; color: #666;line-height: 1.75em;  color:#fff;  opacity: 0.8;}

.onsenVillageSec2 .sec-2-img-wrap{ width: 100%; height: 100%;}
.onsenVillageSec2 .sec-2-img-wrap img{ max-width: 100%;}
.onsenVillageSec2 .sec2-tab-txt{width: 100%; height: 100%;}
.onsenVillageSec2 .tab-content p, .onsenVillageSec2Ban_txt p{letter-spacing: -0.05em; font-size: 1em; color: #666;line-height: 1.75em;}
.sec2-tab-txt .sec2-tab-smallimg{max-width: 100%;  width: 100% ;}
.onsenVillageSec2 .sec2_ban{width: 100%; height: 100%;background: url(//cdn.hotelonsen.com/img/onsen/village/yufuin-sec2_ban_bg.jpg) 50% 0 no-repeat;}
.sec2_ban .btn-mod, .sec2_ban a.btn-mod{padding: 10px;  margin: 10px;  color: #666;  width: auto; min-width: 120px;  -webkit-box-shadow: 9px 9px 20px 2px rgba(0,0,0,0.1);  background-position:95% 50%;background-color: #fff;  background-image: url('//cdn.hotelonsen.com/img/onsen/village/icon_naver.png');  background-repeat: no-repeat;
-moz-box-shadow: 9px 9px 20px 2px rgba(0,0,0,0.1);
box-shadow: 9px 9px 20px 2px rgba(0,0,0,0.1);}
.sec2_ban .btn-mod-defult:hover,.sec2_ban .btn-mod-defult:focus,.sec2_ban a.btn-mod-defult:hover, .sec2_ban > a.btn-mod-defult:focus{color: rgba(0,0,0,0.8);background-color:rgba(136,240,100,0.85);  text-decoration: none;  outline: none;  border: 1px solid transparent;  border-color: transparent;}
.fa-angle-right{padding-left: 8px; font-size: 14px; color:#c0c0c0;}

@media only screen and ( max-width: 991px ) {
  .onsenVillageSec2 .sec2_ban{width: 100%; height: 100%;background: url(//cdn.hotelonsen.com/img/onsen/village/yufuin-sec2_ban_bg_mobile.jpg) 50% 0 no-repeat;}
  .sec2_ban .btn-mod, a.btn-mod{margin: 4px;}
  .onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt{font-size: 1.2em;}
  .onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt h3{font-size: 1.25em; line-height: 1.25em;}
  .btn_wrap{padding-top: 20px;}
}
@media only screen and ( max-width: 768px ) {
  .onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt{text-align: center;}
  .onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt h3{font-size: 1.25em; line-height: 1.25em;}
  .onsenVillageSec2Title{font-size: 28px;}
}
@media only screen and ( max-width: 560px ) {
  .btn_wrap{padding-top: 5px;}
}
@media only screen and ( max-width: 468px ) {
    .onsenVillageSec2Title{font-size: 21px;}
}
@media only screen and ( max-width: 447px ) {
  .onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt{text-align: center;}
  .onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt h3{font-size: 1em; line-height: 1.1em;}
  .onsenVillageSec2BanBtn .onsenVillageSec2Ban_txt p{font-size: 12px;}
  .sec2_ban .btn-mod, .sec2_ban a.btn-mod{margin: 4px auto; width: 100%; padding: 4px;}
}

/* ----------------------------------------------------------------
테마별로 보는 추천 료칸
-----------------------------------------------------------------*/
.onsenVillageSec3 { z-index: 32; position: relative; font-size: 14px; background: url('//cdn.hotelonsen.com/img/onsen/village/themeBg.jpg') repeat-x; }
.onsenVillageSec3Title { font-size: 3em;font-weight: 300;color:#fff;}

.onsenVillageSec3Tab .nav-tabs { border: none; background-color: rgba(0,0,0,.2)}
.onsenVillageSec3Tab .nav-tabs > li { width:25%; border-right:1px solid #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
.onsenVillageSec3Tab .nav-tabs > li:first-child { border-left:1px solid #fff; }
.onsenVillageSec3Tab .nav > li > a { text-align: center; padding: 30px 0; color:#fff; font-size:1.4em; } 
.onsenVillageSec3Tab .nav-tabs > li > a { margin-right: 0; border: 0; border-radius: 0; }
.onsenVillageSec3Tab .nav-tabs > li:focus > a, 
.onsenVillageSec3Tab .nav-tabs > li > a:focus, 
.onsenVillageSec3Tab .nav-tabs > li:hover > a, 
.onsenVillageSec3Tab .nav-tabs > li > a:hover {background-color: rgba(244,188,103,0.3);  color:#fff;
  -webkit-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.onsenVillageSec3Tab .nav-tabs > li.active > a, .onsenVillageSec3Tab .nav-tabs > li.active > a:focus, .onsenVillageSec3Tab .nav-tabs > li.active > a:hover { background-color: #e1ac46; border: none; color: #fff; }

.onsenVillageSec3 .titleBarV { background-color: #e1ac46; height: 40px; }
.themeTitle { color:#e1ac46; font-size: 2em; }
.bg-fff h4{font-size: 21px;letter-spacing: -0.05px; color: #242424; }
hr.titLine {width: 1px;  height: 30px;  margin: 0 auto 14px;border: 0;   background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);}
fieldset, img, table, caption, tbody, tfoot, thead, tr, th, td, button, hr{border: 0 none;}
@media only screen and ( max-width: 768px ) {
.onsenVillageSec3Title { font-size: 28px;  }
.themeTitle{font-size: 18px;}
.onsenVillageSec3 .tab-content img{padding-top: 0;}
}
@media only screen and ( max-width: 560px ) {
.onsenVillageSec3 .goodslist-item .areaTitle{top: 15%;}
.onsenVillageSec3 .goodslist-item .areaTitle p{font-size: 14px;}
.onsenVillageSec3 .goodslist-item .areaTitle h3{font-size: 18px; margin-top: 10px;}
.goodslist-grid.hide-titles .goodslist-item .goodslist-intro{bottom: -155px;}
.btn-mod.btn-borderW{ padding: 6px 12px;}
}
@media only screen and ( max-width: 468px ) {
  .onsenVillageSec3Tab .nav > li > a{font-size: 1em; padding:20px 0;}
  .onsenVillageSec3 .titleBarV {height: 25px; }
}
@media only screen and ( max-width: 360px ) {
.btn-mod.btn-borderW{ display: none;}
.onsenVillageSec3Tab .nav-tabs > li{width: 50%;}
.onsenVillageSec3Tab .nav-tabs > li:nth-child(3n){border-left: 1px solid #fff;}
}

/* ----------------------------------------------------------------
테마별로 보는 추천 료칸 리스트
-----------------------------------------------------------------*/
.goodslist-grid { list-style: none; margin: 0; padding: 0; }
.goodslist-item { width: 33.333333%; float: left; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.goodslist-grid.goodslist-grid-gut { margin: 0 0 0 -10px; }
.goodslist-grid.goodslist-grid-gut .goodslist-item { padding: 0 0 10px 10px; }
.goodslist-item>a { display: block; padding: 0 0 84px 0; position: relative; -moz-box-sizing: border-box; box-sizing: border-box; text-decoration: none; }

.goodslist-item a, .goodslist-item a:hover {
    color: #111;
    border: none;
}
.goodslist-img {
    position: relative;
    overflow: hidden;
}
.goodslist-img img {
    width: 100%;
    display: block;
    overflow: hidden;
}
/* 마우스 이벤트 */
.goodslist-intro {
    width: 100%;
    height: 120px;
    padding: 20px 20px 0 20px;
    -webkit-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
}
.goodslist-grid.hide-titles .goodslist-item>a {
    overflow: hidden;
    padding: 0;
}
.goodslist-grid.hide-titles .goodslist-item .goodslist-intro {
    opacity: 0;
    bottom: -94px;
}
.goodslist-grid.hide-titles .goodslist-item:hover .goodslist-intro {
    opacity: 1;
}
.goodslist-intro {
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.goodslist-item:hover .goodslist-intro {
    color: #fff;
    -webkit-transform: translateY(-99px);
    -moz-transform: translateY(-99px);
    transform: translateY(-99px);
    z-index: 3;
}
.goodslist-item .goodslist-img:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(250, 250, 250, 0);
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.goodslist-item:hover .goodslist-img:after {
    background: #111;
    opacity: .73;
}
.goodslist-item .goodslist-img>img {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.goodslist-item:hover .goodslist-img>img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}
.goodslist-grid.hide-titles .goodslist-item:hover .areaTitle { top: 20%; }
.areaTitle {
    position: absolute;
    top: 10%;
    width: 100%;
    padding: 0;
    color: #fff;
    font-weight: 300;
    font-size: 16px;
    text-align: center;
    z-index: 3;
    -webkit-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
@media only screen and (max-width: 767px) {
  .goodslist-item { width: 50%; }
  .goodslist-intro { height: 100px; }
  .goodslist-item:hover .goodslist-intro {
    -webkit-transform: translateY(-140px);
    -moz-transform: translateY(-140px);
    transform: translateY(-140px);
  }
}

/* ----------------------------------------------------------------
추천 맛집&카페
-----------------------------------------------------------------*/
.sec07_txt {font-size: 28px; margin-bottom: 0; }
.sec05Tit { font-size: 46px; line-height: 1.4; word-break: keep-all; }
.sec08 { z-index: 32; position: relative; background-color: #fffae1; font-size: 14px; }
.sec08 .sec05Tit { color: #01437f; }
.sec08 .choiceTab2 { border: 1px solid #24c6a9; background: #fff; }
.sec08 .choiceTab2 li a { text-align: center; padding: 20px 0; color: #656565; display: block; font-weight: 500; }
.sec08 .choiceTab2 > li:focus, 
.sec08 .choiceTab2 > li:hover,
.sec08 .choiceTab2 > li.active, 
.sec08 .choiceTab2 > li.active > li:focus, 
.sec08 .choiceTab2 > li.active > li:hover { background-color: #24c6a9;}
.sec08 .choiceTab2 > li:hover > a,
.sec08 .choiceTab2 > li.active > a, 
.sec08 .choiceTab2 > li.active > a:focus, 
.sec08 .choiceTab2 > li.active > a:hover,
.sec08 .choiceTab2 > li.on a,
.sec08 .choiceTab2 > li a:hover {
  background: #24c6a9;
  color: #fff;
  -webkit-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.17s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.sec08 .tab-content h3{ font-size: 2em; letter-spacing: -0.05em; font-weight: 300; color: #111; line-height: 1.2em; margin-bottom: 20px;}
.sec08 .tab-content h3 span { font-size: 0.7em; color: #666; }
.sec08 .tab-content p{ letter-spacing: -0.05em; font-size: 16px; color: #666; line-height: 1.75em; }
.sec08 hr { border-top: 1px solid #e2e0d6;}
.ryokan_txt { font-size: 28px; color: #24c6a9; font-weight: 500;}  
.go_txt { background-color: #24c6a9; color: #fff; font-size: 18px; padding: 20px 0;}
.box01 a { display: block; width: 100%; height: 100%; }
.box01 a img { width: 100%; }
.box01 a:hover .go_txt {  background-color: #f5864f; }

@media only screen and (max-width: 767px) {
  .sec07_txt { font-size: 17px; }
  .sec05Tit { font-size: 26px; line-height: 35px; }
  .ryokan_txt { font-size: 20px; }
  .go_txt {padding: 10px 0; }
}
@media only screen and ( max-width: 360px ){
  .sec08 .choiceTab2 li{width: 100%;border-bottom: 1px solid rgba(36,198,169,0.3);  border-right: 1px solid rgba(36,198,169,0.3);}
  .sec08 .choiceTab2 li:nth-child(2n){ border-right: none;}
  .sec08 .choiceTab2 li a { padding: 15px 0; }
}

/* ----------------------------------------------------------------
히타 온천 숙박시설 맞춤 소개
-----------------------------------------------------------------*/
.sec05_TitWrap { background: url(/event2018/img/ShimaneSale/sec05_bg.jpg) no-repeat center; background-size: cover; padding: 80px 0 150px; }
.bestBtn { position: relative; top: -39px; font-weight: 400;}
.bestBtn li a {  
  width: 100%;
  height: 100%;
  display: block;
  font-size: 24px;
  padding: 20px 0;
  -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  background: #24c6a9;
  color: #fff;
}
.bestList { position: relative; top: -80px; background: #fff; overflow: hidden;}
.sec05 .areaTitle .text01 { font-size: 14px; }
.sec05 .areaTitle .fa { font-size: 14px; }
.sec05 .areaTitle h3 {
  font-size: 17px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.sec05 .areaTitle .money { font-size: 24px; color: yellow; font-weight: 400; }
.kokonoe_ryokan { padding: 100px 0; background: url(/event2018/img/smallcity_hita/sec07_bg.jpg) no-repeat top center; }
.kokonoeWrap { margin-top: 10px; }
.kokonoeWrap a { display: block; width: 100%; height: 200px; position: relative; }
.kokonoeWrap a.ryokan-btn1 { background: url(//cdn.hotelonsen.com/onsen2/img/event/oita/kokonoe-btn_bg1.jpg) no-repeat right center; background-size: cover;}
.kokonoeWrap a.ryokan-btn2 { background: url(//cdn.hotelonsen.com/onsen2/img/event/oita/kokonoe-btn_bg2.jpg) no-repeat right center; background-size: cover;}
.kokonoeWrap a .btn-txt { color: #fff; position: absolute; width: 100%; height: 100%; text-align: right; right: 0;line-height: 1.3; padding: 25px; }
.kokonoeWrap a .btn-txt .btntxt1 { font-size: 15px; }
.kokonoeWrap a .btn-txt .btntxt2 { font-size: 25px; font-weight: 600; margin-bottom: 20px;}
.kokonoeWrap a .btn-txt .btntxt3 { font-size: 13px; }
.kokonoeWrap a .btn-txt .btntxt3 img { margin-left: 7px; }

@media only screen and (max-width: 767px) {
  .sec05_TitWrap { padding: 30px 0 60px; }
  .sec05 .areaTitle h3 { margin-top: 5px; margin-bottom: 5px; }
  .bestList { top: -50px; }
  .bestBtn li a { font-size: 18px; padding: 11px 0; }
  .sec05 .areaTitle .money { font-size: 18px; }
  .kokonoe_ryokan { padding: 80px 0; }
}