/* 공통 */
ul { list-style: none; padding: 0; margin: 0; }
.yufuin_tit01 { font-size: 38px; line-height: 1.3; font-weight: 400; }
.yufuin_tit01 span { font-weight: 600; color: #fe1e1c; }
.yufuin_tit02 { font-size: 25px; font-weight: 400; }
.yufuin_txt01 { font-size: 16px; color: #666; font-weight: 400; }
.yufuin_price { float: left; font-size: 18px; font-weight: 400; color: #fe1e1c; margin-top: 5px; }
.bar01 { width: 40px; height: 2px; background: #e27f7f; margin: 10px 0; }
.look_btn a { 
  float: right; 
  display: inline-block; 
  width: 135px; 
  font-size: 14px; 
  border: 1px solid #6f2a0c; 
  padding: 7px 10px; 
  color: #6f2a0c; 
  font-weight: 400; 
  background: url(/event2018/img/yufuin_open/look_btn_green.png) no-repeat; 
  background-position: right 10px center; 
  -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);
      -ms-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);
          transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.look_btn a:hover { color: #fff; background: #fe1e1c url(/event2018/img/yufuin_open/look_btn_white.png) no-repeat; background-position: right 10px center; border: 1px solid #fe1e1c;}

/*  ------------------ sec01 - 상단 배너 영역 ------------------  */
.background-image-holder { position: absolute; z-index: -1; }
.sec01 { position: relative; }
.sec01_txtWrap { position: absolute; top: 42%; transform: translateY(-50%); width: 100%;}
.sec01_txtWrap .sec01_txt01 { font-size: 27px; margin-bottom: 20px; }
.sec01_txtWrap .sec01_txt02 { font-size: 40px; font-weight: 100; display: inline-block; background: url(/event2018/img/yufuin_open/sec01_txt02_bg.png) no-repeat center; background-size: 100% 100%; padding: 3px 55px; }
.sec01_txtWrap .sec01_txt02 { font-size: 40px; font-weight: 100; display: inline-block; background: url(/event2018/img/yufuin_open/sec01_txt02_bg.png) no-repeat center; background-size: 100% 100%; padding: 3px 55px; }
.sec01_txtWrap .sec01_txt03 { font-size: 70px; font-weight: 600; line-height: 1.2; }
.sec01_txtWrap .sec01_txt03 span { font-size: 80px; color: #ffe933; }
.sec01_txtWrap .sec01_txt04 { display: inline-block; font-size: 17px; margin-top: 35px; padding: 8px 10px; line-height: 1.3; border-top: 1px solid #fff; border-bottom: 1px solid #fff; word-break: keep-all; }
/* 호텔온센닷컴의 브랜드를 믿으세요 */
#slidercopyfixed { position: absolute; top: 100%; 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; }

/*  ------------------ sec02 - 숙소만의 장점 영역 ------------------  */
.sec02 { background: url(/event2018/img/yufuin_open/sec02_bg.jpg) no-repeat center; background-size: cover; }
.sec02_list { background: #fff; box-shadow: 0px 0px 20px rgba(0,0,0,0.15); border: 1px solid #d4d6d7; padding: 40px 10px; margin-bottom: 10px; }
.sec02_list img { display: block; margin: auto; }
.sec02_list .sec02_txt01 { font-family: 'Roboto', sans-serif; font-size: 28px; font-weight: 400; color: #fe1e1c; display: inline-block; border-bottom: 2px solid #fe1e1c; margin: 15px 0 10px; }
.sec02_list .sec02_txt02 { font-size: 20px; font-weight: 600; }

/*  ------------------ sec03 - 숙소추천 영역 ------------------  */
.sec03 { background: #fff; padding-top: 80px; }
.sec03_titWrap { position: relative; display: inline-block; }
.sec03_titWrap .sec03_bubble { position: absolute; left: 15px; top: -42px;}
.sec03_titWrap .sec03_bubble img { position: relative; }
.sec03_titWrap .sec03_bubble p { font-size: 20px; color: #ff5662; width:100%; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); }
.sec03_tit02 { font-size: 20px; }
.sec03_txtWrap { position: absolute; width: 490px; bottom: 23px; right: 25px; background: rgba(255,255,255,0.9); box-shadow: 0px 0px 20px rgba(0,0,0,0.25); padding: 25px 10px 25px 30px; } 
.sec03_txtWrap .yufuin_txt01 { margin: 0 0 20px; }
.sec03_txtWrap .sec03_number { position: absolute; top: 0; right: 10px; background: #ff5662; padding: 20px 15px 15px; font-size: 20px; font-weight: 100; color: #fff; line-height: 1.1; text-align: center; }
.sec03_txtWrap .sec03_number span { font-family: 'Roboto', sans-serif; font-size: 25px; }

#sec03_itemWrap .carousel-control {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  background-image: none ;
}
.sec03 .carousel-control.left { left: -40px; }
.sec03 .carousel-control.right { right: -40px; }

/*  ------------------ sec04 - 4가지 스타일 영역 ------------------  */
.sec04 { background: url(/event2018/img/yufuin_open/sec04_bg.jpg) no-repeat center; background-size: cover;}
.width_830 { width: 830px; }
.sec04_ListWrap li .sec04_list > img { width: 100%; }
.sec04_ListWrap .sec04_list:hover { box-shadow: 0px 0px 20px rgba(0,0,0,0.25); }
.sec04_txtWrap { overflow: hidden; background: #fff; padding: 25px; margin-bottom: 15px; }
.sec04_txtWrap .sec04_txt01 { font-size: 16px; color: #1e5ac8; margin: 0; font-weight: 500; }
.sec04_txtWrap .bar01 { background: #1e5ac8; }
.sec04_txtWrap .yufuin_txt01 { margin: 0 0 20px; }
.sec04_txtWrap .yufuin_txt01 br { display: none; }

/*  ------------------ sec05 - 유후인 숙소 BEST 9 영역 ------------------  */
.sec05 { position: relative; }
.sec05 .sec05_bg { position: absolute; top: 0; width: 100%; height: 755px; background: url(/event2018/img/yufuin_open/sec05_bg.jpg); }
.sec05 .container { position: relative; }
.sec05 .yufuin_tit01 span { color: #fdff43; }

.at_btn-1 { border:none; }
.at_btn .at_btn-1 li { position: relative; border: 1px solid #2e4686; border-left: none; width: 25% !important; font-size: 22px; font-weight: 400; padding: 30px 0; color: #fff; }
.at_btn .at_btn-1 li:nth-child(1) { background: url(/event2018/img/yufuin_open/sec04_btn_bg01_off.png) no-repeat top 40% center; border-left: 1px solid #2e4686; }
.at_btn .at_btn-1 li:nth-child(2) { background: url(/event2018/img/yufuin_open/sec04_btn_bg02_off.png) no-repeat top 40% center;}
.at_btn .at_btn-1 li:nth-child(3) { background: url(/event2018/img/yufuin_open/sec04_btn_bg03_off.png) no-repeat top 40% center;}
.at_btn .at_btn-1 li:nth-child(4) { background: url(/event2018/img/yufuin_open/sec04_btn_bg04_off.png) no-repeat top 40% center;}
.at_btn .at_btn-1 li:nth-child(1).active, .at_btn .at_btn-1 li:nth-child(1):hover { background: #fff url(/event2018/img/yufuin_open/sec04_btn_bg01_on.png) no-repeat top 40% center; color: #172549; }
.at_btn .at_btn-1 li:nth-child(2).active, .at_btn .at_btn-1 li:nth-child(2):hover { background: #fff url(/event2018/img/yufuin_open/sec04_btn_bg02_on.png) no-repeat top 40% center; color: #172549; }
.at_btn .at_btn-1 li:nth-child(3).active, .at_btn .at_btn-1 li:nth-child(3):hover { background: #fff url(/event2018/img/yufuin_open/sec04_btn_bg03_on.png) no-repeat top 40% center; color: #172549; }
.at_btn .at_btn-1 li:nth-child(4).active, .at_btn .at_btn-1 li:nth-child(4):hover { background: #fff url(/event2018/img/yufuin_open/sec04_btn_bg04_on.png) no-repeat top 40% center; color: #172549; }
.at_btn .at_btn-1 li:after {
  content: " ";
  display: block;
  position: absolute;
  left: calc(50% - 10px);
  bottom: 0;
  border-style: solid;
  border-width: 15px 15px 0 15px;
  border-color: #fff transparent transparent transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  opacity: 0;
}
.at_btn .at_btn-1 li.active:after, .at_btn .at_btn-1 li:hover:after { 
  -webkit-transform: translateY(14px);
  transform: translateY(14px); 
  opacity: 1;
}
.area_tab_ctn { overflow: hidden; background: #fff; padding: 25px; }

.bar02 { width: 22px; height: 2px; background: #fff; margin: 0 auto 20px; }
.ryokanlist_txtWrap { position: absolute; top: 35px; width: 100%; z-index: 1; font-weight: 400; }
.ryokanlist_txtWrap .ryokan_kind { font-size: 14px; color: #fdf2b5; margin: 0; }
.ryokanlist_txtWrap .ryokan_name { font-size: 25px; color: #fff; line-height: 1.3; }
.ryokanlist_txtWrap .ryokan_price { font-size: 18px; color: #fff; }
.ryokan_badge { position: absolute; top: 5px; left: 5px; width: 90px; }
.ryokan_badge img { width: 100%; }
.sec05 .goodslist-grid .goodslist-item { padding: 0 0 15px 15px; }
.sec05 .goodslist-grid .goodslist-item .goodslist-img:after { 
  background: -webkit-linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 65%);
  background: -o-linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 65%);
  background: linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 65%); 
}
.sec05 .goodslist-grid .goodslist-item:hover .goodslist-img:after { 
  border: none; 
  background: -webkit-linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,7) 100%);
  background: -o-linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,7) 100%);
  background: linear-gradient(rgba(0,0,0,0.8) 0%, rgba(0,0,0,7) 100%); 
}
.sec05 .goodslist-grid .goodslist-item .goodslist-intro { height: auto; }
.sec05 .goodslist-grid .goodslist-item .goodslist-intro { bottom: -60px; }
.sec05 .goodslist-grid .goodslist-item .goodslist-intro .goodslistbtn {  
  text-align: left;
  width: 135px; 
  font-size: 14px; 
  border: 1px solid #fff; 
  padding: 7px 10px; 
  color: #fff; 
  font-weight: 400; 
  background: rgba(255,255,255,0.1) url(/event2018/img/yufuin_open/look_btn_white.png) no-repeat; 
  background-position: right 10px center;
}

@media only screen and (max-width: 992px) {
  .yufuin_tit02 { font-size: 22px; }
  
  .sec02_list .sec02_txt02 { font-size: 18px; }
  .sec02_list .yufuin_txt01 br, .sec03_txtWrap .yufuin_txt01 br {display: none; }
  
  .sec03_txtWrap { width: 45%; padding: 20px; }
  .sec03_txtWrap .sec03_number { padding: 10px; font-size: 15px; }
  .sec03_txtWrap .sec03_number span { font-size: 20px; }
  
  .width_830 { width: 750px; }
  .sec04_txtWrap .yufuin_txt01 br { display: block; }
  
  .at_btn .at_btn-1 li { font-size: 18px; }
  .bar02 { margin: 0 auto 10px; }
  .ryokanlist_txtWrap { top: 20px; }
  .ryokanlist_txtWrap .ryokan_kind { font-size: 12px; }
  .ryokanlist_txtWrap .ryokan_name { font-size: 22px; }
  .ryokanlist_txtWrap .ryokan_price { font-size: 16px; }
  .ryokan_badge { width: 50px; }
}
@media only screen and (max-width: 767px) {
  .yufuin_tit01 { font-size: 22px; }
  .yufuin_tit02 { font-size: 20px; }
  .yufuin_txt01 { font-size: 14px; }
  .yufuin_price { font-size: 16px; }
  .look_btn a { width: 120px; }
  .sec01_txtWrap .sec01_txt01 { font-size: 20px; margin-bottom: 10px; }
  .sec01_txtWrap .sec01_txt02 { font-size: 24px; padding: 0 30px; }
  .sec01_txtWrap .sec01_txt03 { font-size: 35px; }
  .sec01_txtWrap .sec01_txt03 span { font-size: 40px; }
  .sec01_txtWrap .sec01_txt04 { margin-top: 10px; }
  .slidercopyfixedh3 { font-size: 14px; }
  
  .sec02_list { padding: 20px 10px; }
  .sec02_list img { width: 60px; }
  .sec02_list .sec02_txt01 { font-size: 25px; margin: 5px 0; }
  
  .sec03 .carousel-indicators { bottom: 2px; }
  .sec03_titWrap .sec03_bubble { left: 0; }
  .sec03_titWrap .sec03_bubble img { width: 135px; }
  .sec03_titWrap .sec03_bubble p { font-size: 14px; }
  .sec03_tit02 { font-size: 14px; }
  .sec03_txtWrap { position: relative; width: 100%; right: 0; bottom: 0; background: #f7f7f7; padding-bottom: 80px;}
  #sec03_itemWrap .carousel-control { top: 85px; background: #fff; }
  #sec03_itemWrap .carousel-control img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 15px; }
  .sec03 .carousel-control.left { left: 0; }
  .sec03 .carousel-control.right { right: 0; }
  .sec03 .carousel-indicators li { border: 1px solid #705703; }
  .sec03 .carousel-indicators .active { background-color: #705703;}
  
  .width_830 { width: 100%; }
  .sec04_txtWrap { padding: 20px; }
  .sec04_txtWrap .sec04_txt01 { font-size: 14px; }
  
  .sec05 .sec05_bg { height: 400px; }
  .at_btn .at_btn-1 li { font-size: 13px; padding: 15px 0; background-size: 80px !important; background-position: center !important; }
  .at_btn .at_btn-1 li:after { border-width: 10px 10px 0 10px; }
  .at_btn .at_btn-1 li.active:after, .at_btn .at_btn-1 li:hover:after { -webkit-transform: translateY(9px); transform: translateY(9px);}
  .area_tab_ctn { padding: 10px; }
  .ryokanlist_txtWrap { top: 15px; }
  .ryokanlist_txtWrap .ryokan_kind { font-size: 10px; }
  .ryokanlist_txtWrap .ryokan_name { font-size: 16px; }
  .ryokanlist_txtWrap .ryokan_price { font-size: 13px; }
  .ryokan_badge { top: auto; left: auto; bottom: 5px; right: 5px; }
  .sec05 .goodslist-grid .goodslist-item { padding: 0 0 10px 10px;}
  .sec05 .goodslist-grid .goodslist-item .goodslist-intro { bottom: -80px; }
  .sec05 .goodslist-grid .goodslist-item .goodslist-intro .goodslistbtn { width: 100px; font-size: 12px; padding: 5px 7px; }
}

/* 하단 슬라이드 배너 */
.btm_slidebanner .carousel-control { width: 5%; }
.btmslide_Box .row { padding-top: 20px; }
.btmslide_titWrap { padding-top: 10px; color: #fff; padding-left: 40px; }
.btmslide_titWrap p { font-size: 1.4em; }
.btmslide_titWrap  h3 { font-size: 3em; margin-top: 0; }

.onsenBus { background: #f65a87; height: 200%; overflow: hidden; }
.onsenwifi { background: #ca213d; height: 200%; overflow: hidden; }
.onsenBlog { background: linear-gradient(126deg, #03c036 25%, #00ca76 74%); height: 200%; overflow: hidden; }
.onsenwifi .container{background: url(/event2018/img/goldtime2019/onsenwifi_bg.png) 85% 87% no-repeat; }
.onsenBlog .container{background: url(/event2018/img/goldtime2019/onsenBlog_bg.png) 85% 87% no-repeat; }

.btn.btn_Bus { background-color: #fff; padding:6px 20px; margin-top: 12px; color: #f65a87; font-size: 1.2em; }
.btn.btn_wifi { background-color: #fff; padding:6px 20px; margin-top: 12px; color: #ca213d;font-size: 1.2em; }
.btn.btn_blog { background-color: #fffeb7;padding:6px 20px; margin-top: 12px; color: #242424;font-size: 1.2em; }

@media only screen and (max-width: 767px) {
  .btmslide_Box { padding-top: 0; position: relative; }
  .btmslide_Box .container { background-image: none; }
  .btmslide_Box .row { padding-top: 0; }
  .btmslide_Box .col-xs-4 { position: absolute; bottom: 0; right: 0; }
  .btmslide_titWrap { padding: 28px; }
}
@media only screen and (max-width: 560px) {
  .btmslide_titWrap{ padding: 30px 15px; }
  .btmslide_titWrap p { font-size: 1em; }
  .btmslide_titWrap h3 { font-size: 1.6em; }
  .btmslide_Box .col-xs-4 { right: 45px; }
  .btmslide_Box .col-xs-4 img { height: 170px; }
  .btmslide_titWrap .btn { padding: 6px 12px; }
}