.titleBar { 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; }

/* ----------------------------------------------------------------
상단 지역 제목 / 설명 / 이미지
-----------------------------------------------------------------*/
.sec01 .container { position: relative; top: 100px; }
.sec01 .container .jnto_logo1{ position: absolute; left: 15px;}
.sec01 .container .jnto_logo2{ position: absolute; right: 15px;}
#kyoto_slider .carousel-inner>.item>img.slide_img {}
#kyoto_slider .carousel-inner>.item>img.slide_img_m {display: none; }


.sliderFixed { position: absolute; left: 50%; top: 50%; z-index: 31; margin: 0; width: 700px; height: 440px; transform:translate(-50%, -50%); }
.mainsliderRedbox { display: table;  text-align: center;  border: 1px solid #e62335;  width: 100%;  height: 100%;  position: relative;  background-color: rgba(0, 0, 0, .4); color: #fff; font-size: 14px; }
.sliderFixedCell { display: table-cell; vertical-align: middle;  padding:20px; }
.mainsliderRedbox h1 { font-size: 4em; font-weight: 300; }
.mainsliderRedbox h2 { margin-top: 0px; }

@media only screen and (max-width: 450px) {  
  .sec01 .container .jnto_logo1,.sec01 .container .jnto_logo2 {height: 35px; }
  #kyoto_slider .carousel-inner>.item>img.slide_img { display: none; }
  #kyoto_slider .carousel-inner>.item>img.slide_img_m {display: block; margin-left: 0; width: 100%; height: 200px;}
  .mainsliderRedbox { width: 300px;  height: 300px;  font-size: 12px; margin-left: auto; margin-right: auto; padding:20px; }
  .mainsliderRedbox h1 { font-size: 2.5em; }
  .mainsliderRedbox h2 { font-size: 1.5em; }
}
@media only screen and (max-width: 320px) {
  .sec01 .container { top:60px; }
}




#promotionCopyfixed {position: relative;top: 100%;margin-top: -60px;z-index: 31;width: 100%;height: 60px;background: url('//cdn.hotelonsen.com/img/onsen/onsen_main/hoshinoya_intro_ban_bg.jpg') center;display: table;}
#promotionCopyfixed-cell {display: table-cell;height: 100%;vertical-align: middle;}
#promotionCopyfixed h3 {margin-top: 0px;margin-bottom: 0px;color: #fff;}
@media only screen and (max-width: 767px) {
  #promotionCopyfixed h3 {font-size: 1.3em;}
  .kyotoStamp img {width: 100%}
}




/* ----------------------------------------------------------------
온천 어디에 있나요? (-section-1.php)
-----------------------------------------------------------------*/

.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: 4em;font-weight: 300; }
.onsenVillageMap { position: relative; overflow: hidden; }
.onsenVillage .container { padding: 0; }

.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:50%; 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; 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%; }

@media only screen and (max-width: 767px) {
  .onsenVillage { font-size: 12px; }
  .onsenVillageTitle { font-size: 2em; }
  .onsenVillageMap img { width: 900px; margin-left: -90px; }
  .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%; }
.onsenVillageSec2Tab { }
.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; }
.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 h3,.onsenVillageSec2Ban_txt h3{ font-size: 2em; letter-spacing: -0.05em; font-weight: lighter; color: #242424;line-height: 1.5em;}
.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;}
  .onsenVillageSec2Tab .nav > li > a{font-size: 1em;}
  .tab-content img{padding-top:15px;}
}
@media only screen and ( max-width: 560px ) {
  .btn_wrap{padding-top: 5px;}
  .onsenVillageSec2 .tab-content h3, .onsenVillageSec2Ban_txt h3{font-size: 1.5em;}
}
@media only screen and ( max-width: 468px ) {
    .onsenVillageSec2Title{font-size: 21px;}
    .onsenVillageSec2Tab .nav > li > a{font-size: 14px; padding: 15px 10px}
}
@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;}
}
@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;}
}

/* ----------------------------------------------------------------
테마별로 보는 추천 료칸
-----------------------------------------------------------------*/
.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;
}

@media only screen and (max-width: 767px) {
  .goodslist-item:hover .goodslist-intro {
    -webkit-transform: translateY(-140px);
    -moz-transform: translateY(-140px);
    transform: translateY(-140px);
  }
}

.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);
}

@media only screen and (max-width: 767px) {
    .goodslist-item { width: 50%; }
    .goodslist-intro { height: 100px; }
}
.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);
}