.fullscreen { overflow: hidden; position: relative;}
.fullscreen .background-image-holder.fadeIn { position: absolute;}
.image-bg .container { position: relative;}
img{max-width:100%;}
.secfive {background:url(/premium/event/img/hoshinoya_intro/map_bg.jpg) repeat 0 0; }


.hoshinoyaban-img { color:#fff; }
.hoshinoyaban-img h1 { font-size: 24px; color:#fff;font-family: 'Nanum Myeongjo', serif; font-weight: 700;}
.title1 { font-size: 60px; margin-bottom:-30px; }
.title2 { font-size: 80px; font-family: 'Nanum Myeongjo', serif;}
.title3 { font-size: 16px;  text-shadow: 0 2px 8px rgba(5,5,5,0.5);}
.sec_titwrap {margin-bottom: 15px;}
.sec_titwrap span{font-size: 16px; border-bottom: 1px solid #666; color: #666;}
.sec_titwrap h2{font-size: 38px; margin-top: 10px;color: #000;}


@media only screen and (max-width: 767px) {
  .hoshinoyaban-img h1 { font-size: 18px; padding-top:20px; color:#fff;}
  .title1 { font-size: 18px; margin-bottom:-10px; }
  .title2 { font-size: 50px; }
  .title3 { font-size: 11px; text-align: justify; }
  .image-square h2 { font-size: 16px; }
}

.content h2 { line-height: 130%; }
.content p { line-height: 180%; }

/* selector */
#hoshinoya_ryokan_selector{
  position:relative; width: 100%;  height: 571px;  display: inline-block;
  background: url(/premium/event/img/hoshinoya_intro/japanMap.png) no-repeat 0 0;}
#hoshinoya_ryokan_selector.bali{  background: url(/premium/event/img/hoshinoya_intro/baliMap.png) no-repeat 50% 30%;}
#hoshinoya_ryokan_selector.taiwan{  background: url(/premium/event/img/hoshinoya_intro/taiwanMap.png) no-repeat 50% 30%;}
.hoshinoya_ryokan_pointer {position:absolute;z-index:30;width:26px;height:37px;background:url(/premium/event/img/hoshinoya_intro/bali_click.png) 0px 0px no-repeat; cursor:pointer;

    -webkit-animation-name: pointer-ic; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 30s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation-name: pointer-ic;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}
.activeBtn{z-index:40;background: url(/premium/event/img/hoshinoya_intro/bali_click_active.png) 0 00 no-repeat; height: 45px; width: 36px;}
.activeCtn{display:block !important}
#hoshinoya_ryokan_selector div:after{clear: both; display: inline-block;padding: 2px 5px; border:1px solid red;font-size: 12px;border-radius: 30px;  background-color: #fff;  color: #000;}
#hoshinoya_ryokan_selector .activeBtn.hoshinoya_ryokan_pointer::after{background-color: red ;
color: #fff ; top: 9px; }
#hoshinoya_ryokan_pointer-1{left:50px;top:429px;}
#hoshinoya_ryokan_pointer-1:after{content: "호시노야 오키나와(타케토미 섬)"; position: absolute; width: 175px;  top: 3px; left: 25px;}
#hoshinoya_ryokan_pointer-1.activeBtn{left: 45px;  top: 420px;}
#hoshinoya_ryokan_selector
#hoshinoya_ryokan_pointer-1.activeBtn.hoshinoya_ryokan_pointer::after{left: 40px;}

#hoshinoya_ryokan_pointer-2{left: 214px;  top: 333px;}
#hoshinoya_ryokan_pointer-2:after{content: "호시노야 교토"; position: absolute; width: 90px;  top: 3px; right: 32px;}
#hoshinoya_ryokan_pointer-2.activeBtn{    left: 204px;
    top: 321px;}
#hoshinoya_ryokan_selector #hoshinoya_ryokan_pointer-2.activeBtn.hoshinoya_ryokan_pointer::after{right: 38px;}

#hoshinoya_ryokan_pointer-3{left: 294px; top: 315px;}
#hoshinoya_ryokan_pointer-3.activeBtn { left: 286px; top: 302px;}
#hoshinoya_ryokan_pointer-3:after{content: "호시노야 후지"; position: absolute; width: 90px;  top: 3px; left: 24px;}
#hoshinoya_ryokan_selector #hoshinoya_ryokan_pointer-3.activeBtn.hoshinoya_ryokan_pointer::after{left: 39px;}

#hoshinoya_ryokan_pointer-4{left: 329px; top: 296px;}
#hoshinoya_ryokan_pointer-4.activeBtn { left: 322px; top: 280px;}
#hoshinoya_ryokan_pointer-4:after{content: "호시노야 도쿄"; position: absolute; width: 90px;  top: 3px; left: 24px;}
#hoshinoya_ryokan_pointer-4.activeBtn.hoshinoya_ryokan_pointer::after{left: 39px;}

#hoshinoya_ryokan_pointer-5{left: 304px; top: 277px;}
#hoshinoya_ryokan_pointer-5:after{content: "호시노야 가루이자와(도쿄)"; position: absolute; width: 150px;  top: 3px; right: 31px;}
#hoshinoya_ryokan_pointer-5.activeBtn{left: 296px;  top: 264px;}
#hoshinoya_ryokan_pointer-5.activeBtn.hoshinoya_ryokan_pointer::after{right: 40px;}

#hoshinoya_ryokan_pointer-6{top: 143px; left: 121px;}
#hoshinoya_ryokan_pointer-6:after{content: "호시노야 구꽌"; position: absolute; width: 90px;  top: 3px; left: 24px;}
#hoshinoya_ryokan_pointer-6.activeBtn{top: 128px; left: 118px;}
#hoshinoya_ryokan_pointer-6.activeBtn.hoshinoya_ryokan_pointer::after{left: 39px;}

#hoshinoya_ryokan_pointer-7{top: 240px;  left: 214px;}
#hoshinoya_ryokan_pointer-7:after{content: "호시노야 발리(우붓)"; position: absolute; width: 120px;  top: 3px; left: 24px;}
#hoshinoya_ryokan_pointer-7.activeBtn{top: 223px; left: 209px;}
#hoshinoya_ryokan_pointer-7.activeBtn.hoshinoya_ryokan_pointer::after{left: 39px;}

@keyframes pointer-ic {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}
@-moz-keyframes pointer-ic {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}
@-webkit-keyframes pointer-ic {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}
@-ms-keyframes pointer-ic {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}







.hoshinoya_ryokan_abridgement{display:none;}
#hoshinoya_ryokan_abridgement-1{}
#hoshinoya_ryokan_abridgement-2{}
#hoshinoya_ryokan_abridgement-3{}
#hoshinoya_ryokan_abridgement-4{}
#hoshinoya_ryokan_abridgement-5{}




@media only screen and (max-width: 1199px) {
.secfive {display: none;}
}

@media only screen and (max-width: 767px) {
  #hoshinoya_ryokan_selector{height:400px}
  .hoshinoya_ryokan_abridgement {top: 0;}
  .jp-map-bk {
      background-size: cover;
      margin-top: 100px;
      margin-left: -150px;
      width: 300px;
      height: 299px;
  }

}


/*sec01*/
.yumotokan_tit01 { font-size: 20px; margin-bottom: 0;}
.yumotokan_tit02 { font-size: 38px;  letter-spacing: -0.03em;}
.myeongjo.bold{font-size: 20px; letter-spacing: -0.03em; margin-top: 0;margin-bottom: 15px;}
.myeongjo.bold b{display: block;margin-bottom: 8px;font-size: 34px; color: #000;line-height: 1.34;}
.sec01 .row p{font-size: 15px; color: #666;letter-spacing: -0.03em; line-height: 1.7}
.toptit { position: absolute; width: 100%; top: 25%; left: 0; z-index: 100;}
.topbanner { width: 100%;}
.topbanner2 { width: 100%; position: absolute; bottom: 130px; z-index: 99; left: 50%; transform: translateX(-50%);}
.topbanner img { display: block; margin: auto; }
.topbanner2 img { display: block; margin: auto; }

@media only screen and (max-width: 767px) {
.toptit { top: 15%; }
.hoshinoyaban-img { padding: 0 10px; }
}



.container2000{  max-width: 2000px; padding:0 50px; margin-left: auto; margin-right: auto;}
.sec01_wrap2{background-color: #e9f6f9;}
.sec01_wrap1 .myeongjo.bold{color:#1e4b68;}
.sec01_wrap3{background-color: #fbf3d7;}
.sec01_wrap4{background-color: #f1fcdf;}
.hoshinoyaConBack1 {
  height: 500px;
  background: url('/premium/event/img/hoshinoya_intro/hoshinoya_group01.jpg') center;
  background-size: cover;

}
.hoshinoyaConBack2 {
  height: 500px;
  background: url('/premium/event/img/hoshinoya_intro/hoshinoya_group02.jpg') center;
  background-size: cover;

}
.hoshinoyaConBack3 {
  height: 500px;
  background: url('/premium/event/img/hoshinoya_intro/hoshinoya_group03.jpg') center;
  background-size: cover;

}
.hoshinoyaConBack4 {
  height: 500px;
  background: url('/premium/event/img/hoshinoya_intro/hoshinoya_group04.jpg') center;
  background-size: cover;

}
@media only screen and (max-width: 1280px){

  .topbanner2 { bottom: 100px; }
}
@media only screen and (max-width: 1199px){
  .myeongjo.bold{font-size: 26px;}
  .sec01 .row p{font-size: 14px;}
}
@media only screen and (max-width: 991px){
  .hoshinoyaConBack1,.hoshinoyaConBack2,.hoshinoyaConBack3,.hoshinoyaConBack4{height: 400px; margin-bottom: 15px;}
	.topbanner2 { width: 80%; }
  .myeongjo.bold b{font-size: 28px;}
  .myeongjo.bold{font-size: 20px;}
  .sec01_wrap1 .myeongjo.bold{}
  .sec01 .row p{font-size: 14px;}

}
@media only screen and (max-width: 767px){
  .myeongjo.bold b{font-size: 18px;}
  .container2000{padding-right: 15px; padding-left: 15px;}
  .yumotokan_tit01{font-size: 16px;}
  .yumotokan_tit02{font-size: 28px;}
  .bar02{margin-bottom: 20px;}
  .topbanner2 { bottom: 50px; }
  .myeongjo.bold { font-size: 16px; }
  .slidercopyfixedh3 { font-size: 14px;  }
}

.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(/premium/event/img/hoshinoya_intro/main_bg1.jpg) center bottom no-repeat;
  background-size: cover;
}
#sliderinfo2 {
  background: url(/premium/event/img/hoshinoya_intro/main_bg2.jpg) center bottom no-repeat;
  background-size: cover;
}
#sliderinfo3 {
  background: url(/premium/event/img/hoshinoya_intro/main_bg3.jpg) center bottom no-repeat;
  background-size: cover;
}
#sliderinfo4 {
  background: url(/premium/event/img/hoshinoya_intro/main_bg4.jpg) center bottom no-repeat;
  background-size: cover;
}
#slidercopyfixed {
  position: absolute;
  top: 90%;
  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; }


/*"프리미엄 서비스"*/

.bar02 { width: 2px; height: 55px; background: #e1e1e1; margin: 15px auto 55px; }
.sec_feature{background: url(/premium/event/img/hoshinoya_intro/sec03_bg.jpg) 0% 50% no-repeat;}
.featureWrap .imgwrap{position: relative;  height: 200px; }
.featureBox1 .imgwrap{background: url(/premium/event/img/hoshinoya_intro/premium_01.jpg) 50% 50% no-repeat;}
.feature_txt{position: absolute;  z-index: 5; top: 15%;    left: 40px;}
.featureWrap > img{border-bottom: 1px solid #debe9e;}
.featureWrap h3{color: #f5ebe1}
.featureWrap p{color: #f5ebe1}

.sec_feature .sec_titwrap span{ border-bottom: 1px solid #eee; color: #eee;}

.feature_txt_right{position: absolute;  z-index: 5; top: 15%;   right: 40px;}

.featureBox2 .imgwrap{background: url(/premium/event/img/hoshinoya_intro/premium_02.jpg) 50% 50% no-repeat;}
.featureBox3 .imgwrap{background: url(/premium/event/img/hoshinoya_intro/premium_03.jpg) 50% 50% no-repeat;}
.featureBox4 .imgwrap{background: url(/premium/event/img/hoshinoya_intro/premium_04.jpg) 50% 50% no-repeat;}
.featureBox5 .imgwrap{background: url(/premium/event/img/hoshinoya_intro/premium_05.jpg) 50% 50% no-repeat;}

.featureBox4 h3,.featureBox4 p{color: #000;}

.sec_feature .sec_titwrap h2{color: #debe9e}
@media only screen and (max-width: 767px){
  .feature_txt_right{background-color: rgba(5,5,5,0.5); top: 20px; right: 35px; padding: 15px;}
  .feature_txt{background-color: rgba(5,5,5,0.5); top: 20px; left: 35px;padding: 15px;}
  .featureBox4 h3, .featureBox4 p{color: #f5ebe1}
  .sec_titwrap h2{font-size: 24px;}
  .sec_titwrap span{font-size: 14px;}
}


/*"주요 시설 소개"*/
#facility{background-color: #dce7ef;}
.facility_tit h4 { font-size: 28px; color: #000;}
.facility_tit span{font-size: 14px; color: #fff; background-color: #000;padding: 3px 6px; font-weight: 700;}
.yumotokan_txt02 { font-size: 14px; line-height: 1.7; letter-spacing: -0.03em;}
.sec02_txtWrap{padding-top: 5%;}
#facility .left.carousel-control img{position: absolute; top: 45%; left:20px;}
#facility .right.carousel-control img{position: absolute; top: 45%; right:20px;}
@media only screen and (max-width: 991px){
  #facility .row .carousel-inner .item img{width: 100%;}
}
/*일곱개의 호시노야*/
.new_icon{position: absolute;  bottom: 11px;  right: 0;}
.hoshinoya_ryokan .col_1_5 { width: 19.5%; margin-right:0 !important; position: relative; display: inline-block;;}

.hoshinoya_info {
    position: absolute;
    left: 15px;
    bottom: 70px;
    width: 100%;
    padding: 0;
    color: #fff;
    text-align: left;
}

.hoshinoya_info h3 { font-size: 30px; color:#fff; }

.home_icon{display: inline-block; width: 113px; height: 113px; background: #00baff; border-radius: 100%; box-shadow: 0 10px 15px rgba(0,0,0,0.1);}
.home_icon img{position: relative; top: 50%; transform: translateY(-50%);}

@media only screen and (max-width: 991px) {
    .hoshinoya_info h3 {font-size: 18px;color: #000;font-weight: 700;}
    .hoshinoya_info p{display: none;}
    .hoshinoya_info { text-align: center; left: 0; bottom: 321px;}
    .new_icon {
    position: absolute;
    bottom: 8px;
    right: -6px;
    transform: rotate(-5deg);
}
}
@media only screen and (max-width: 767px) {
      .hoshinoya_ryokan .col_1_5{width: 19%; margin-bottom: 55px;}
    .hoshinoya_ryokan h2 { font-size: 24px }
    .hoshinoya_info {text-align: center;}
    .hoshinoya_info h3{font-size: 13px;}
    .hoshinoya_info{bottom: -47px;}

}

.icon-sp {
    position: absolute;
    background: url(/premium/event/img/hoshinoya_intro/2016new.png) no-repeat 0 0;
    margin-top: 550px;
    margin-left: 74px;
    width: 180px;
    height: 60px;
    z-index: 3;
    -webkit-animation-name: noitem-bln1anm; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 30s; /* Safari 4.0 - 8.0 */
    -webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
    animation-name: icon-spAnm;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}

@keyframes icon-spAnm {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}
@-moz-keyframes icon-spAnm {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}
@-webkit-keyframes icon-spAnm {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}
@-ms-keyframes icon-spAnm {
  0% {transform: translate(0px, 0px);}
  50% {transform: translate(0px, 5px);}
  100% {transform: translate(0px, 0px);}
}

@media only screen and (max-width: 991px) {
  .icon-sp {
      margin-top: 100%;
      margin-left: -10px;
  }
}