@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
img { max-width: 100%; }
a, a:hover, a:active, a:focus { text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
section p { font-weight: 400; letter-spacing: -0.02em; }
.color-888 { color: #888; }
#top_resort .btn.seemore{background-color: #024aff; width: 150px; height: 150px; padding: 30px 0; margin-top: 50px;}
#top_resort .btn.seemore a{font-size: 22px;}
.btn.seemore{border-radius: 50%; background-color: #00baff;width: 100px; height: 100px; padding: 18px 0;}
.btn.seemore a{color: #fff; font-weight: 700; font-size: 16px;line-height: 1.2;}

#site_nav_pc { background-color: #4c87e5; }

#promotionCopyfixed {
  position: relative;
  top: 100%;
  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;
  }
}


/* ------------------- sec01 - 상단 배너 영역 ------------------- */
.fullscreen { overflow: hidden; position: relative; height: 1000px; }
.fullscreen .background-image-holder {position:absolute; }
#yumoto_sec01 .container { position: absolute; z-index: 1; top: 30%; left: 50%; transform: translate(-50%,-50%); width: 100%; color: #fff;}
.sec01_txt01 { font-family: 'Jeju Myeongjo', serif; font-size: 32px; color: #51721b; margin: 0; }
.sec01_txt02 { font-size: 16px; color: #333; letter-spacing: -0.02em; padding-top: 15px;}
.sec01_txt03 { font-size: 24px; color: #f67808; letter-spacing: -0.02em; }

.bar01 { max-width: 510px; height: 1px; background: rgba(255,255,255,0.7); margin: 25px auto; }
.sec01_logoWrap { position: absolute; width: 100%; z-index: 1; bottom: 0; background: rgba( 131,215,23,0.1); }
.sec01_logoWrap .sec01_logo { display: inline-block; margin: 0 20px;}
#promotionCopyfixed { margin-top: 0; }

/* ------------------- sec02 - \ ------------------- */
.yumotokan_tit01 { font-size: 20px; }
.yumotokan_tit02 { font-size: 38px; }
.yumotokan_tit03 { font-size: 24px; margin: 0; }
.yumotokan_txt01 { font-size: 30px;  line-height: 1.2;  }
.yumotokan_txt02 { font-size: 15px; line-height: 1.8; }
.bar02 { width: 2px; height: 55px; background: #e1e1e1; margin: 15px auto 95px; }

#yumoto_sec02 { width: 1950px; overflow: hidden; }
#yumoto_sec02 .row { margin-right: -25px; margin-left: -25px; }
#yumoto_sec02 .row .col-md-6 { padding-right: 25px; padding-left: 25px; }
.sec02_imgWrap { float: right; }
.sec02_txtWrap { float: left; }
#yumoto_sec02 .yumotokan_txt01 { margin: 15px 0 17px; }
.sec02_logoWrap .sec02_logo { display: inline-block; margin-right: 20px; }
.item img { width: 100%; }
.carousel-control.left img { position: absolute; top: 50%; left: 30px; transform: translateY(-50%); }
.carousel-control.right img{ position: absolute; top: 50%; right: 30px; transform: translateY(-50%); }

.row .col-md-4:nth-child(1) .fusion-sec3{background: url('//cdn.hotelonsen.com/onsen2/img/global/VN/event/fusion/fusion-sec3-1.jpg') 50% 0  no-repeat; height: 750px;}
.row .col-md-4:nth-child(2) .fusion-sec3{background: url('//cdn.hotelonsen.com/onsen2/img/global/VN/event/fusion/fusion-sec3-2.jpg') 50% 0  no-repeat; height: 750px;}
.row .col-md-4:nth-child(3) .fusion-sec3{background: url('//cdn.hotelonsen.com/onsen2/img/global/VN/event/fusion/fusion-sec3-3.jpg') 50% 0  no-repeat; height: 750px;}


/*리조트 top 3
.resortTab_txt{font-size: 14px; color: #888; text-align: left;}
.resortTab_txt h5{font-size: 18px; color: #242424; margin-bottom: 5px;}
.resortTab_txt h5 img{padding-right: 5px;}
.resortTab_txt p{font-size: 14px; color: #888; padding-bottom: 15px;}
.resort_tit{padding-bottom: 30px;}
.top_resort_main{font-size: 16px; color: #888; }
.resortTab .resort_list{ background-color: #e0e0e0; display: inline-block; padding: 15px 6px;cursor: pointer;}
.resortTab .resort_list a{color:#000; font-size: 22px; font-weight: 700; margin-bottom: 5px; margin-top: 0;}
.resortTab .resort_list a span { display: block; font-weight: 400; font-size: 16px; color: #888;}
.resortTab .resort_list.on { background-color: #024aff; position: relative; }
.resortTab .resort_list.on a, .resortTab .resort_list.on a span  { color: #fff; }
*/

/*리조트 top 3*/
#top_resort{ /*background-color: #8fd5ff; */ padding: 100px 0;}
.resortTab_txt{font-size: 14px; color: #888; text-align: left;}
.resortTab_txt h5{font-size: 18px; color: #242424; margin-bottom: 5px;}
.resortTab_txt h5 img{padding-right: 5px;}
.resortTab_txt p{font-size: 14px; color: #888; padding-bottom: 15px;}
.resort_tit{padding-bottom: 30px;}
.top_resort_main{font-size: 16px; color: #888; }
.resortTab .resort_list{ background-color: #fff; display: inline-block;padding: 15px 6px;cursor: pointer; border-top: 1px solid #eee; border-bottom: 1px solid #eee; border-right: 1px solid #eee; }
.resortTab .resort_list:first-child { border-left: 1px solid #eee; }

.resortTab .resort_list p {color:#000; font-size: 20px; margin-bottom: 5px; margin-top: 0;}
/* .resortTab .resort_list span{color: #888; font-size: 16px;} */
.resortTab .resort_list.active{background-color: #00baff; position: relative;}
.resortTab .resort_list.active p,.resortTab .resort_list.active {color: #fff;}
.resortTab .resort_list.active::after{content: ""; display: block; width: 0;   height: 0;  border-left: 15px solid transparent;   border-right: 15px solid transparent;  border-top: 15px solid #00baff; bottom: -15px; left: 41%; position: absolute;}

.resorttp-1 { font-weight: 500; color: #00baff; font-size: 20px; }
.resorttp-2 { font-weight: 500; color: #e8175d; font-size: 20px;}
.resorttp-3 { font-weight: 500; color: #000; font-size: 20px;}
.resortTab .resort_list.active .resorttp-1,
.resortTab .resort_list.active .resorttp-2,
.resortTab .resort_list.active .resorttp-3
 {color: #fff;}



.resort_txt{padding: 30px 15px; background-color: rgba(255,255,255,0.4);}
.resort_txt h3{color: #000; font-size: 32px; }
.resort_txt h4{color: #000; font-size: 26px; line-height: 1.4; margin-top: 50px;  text-align: left;}
.resort_txt span{color: #666;}
.resort_txt p{font-size: 16px; color: #666;padding-top: 5px;text-align: left;}
.resortTab_img p{font-size: 18px; color: #242424; padding-top: 15px;}
.sec04_resortWrap { position: relative; display: none; }
.sec04_resortWrap .row > div{padding: 5px;}


.sec4rTitle { width:50px; background-color: #111; height:2px; margin-left: auto; margin-right: auto; }




/*
.resortTab2 .resort_list2 { background-color: #fefefe; display: inline-block; padding: 15px 0;cursor: pointer; border-bottom: 1px solid #999;}
.resortTab2 .resort_list2 a {color:#999; font-size: 18px; font-weight: lighter; margin-bottom: 5px; margin-top: 0;}
.resortTab2 .resort_list2.on { position: relative; background: #fff; border: 1px solid #999; border-bottom: #fff;}
.resortTab2 .resort_list2.on a, .resortTab .resort_list2.on a span  { color: #333; font-weight: lighter; }
*/
.resortTab2 { margin-left: auto; margin-right: auto; }
.resort_list2 { margin-left: 10px; margin-right: 10px; display: inline-block; }
.resortTab2 .resort_list2 { width:150px; height:150px; border-radius: 50%; border: 1px solid #00baff; padding-top:40px; }
.resortTab2 .resort_list2 a {color:#00baff; font-size: 18px; font-weight: lighter; margin-bottom: 5px; margin-top: 0;}
.resortTab2 .resort_list2.on { background: #00baff;; color:#fff; border: 1px solid #00baff;}
.resortTab2 .resort_list2.on a, .resortTab .resort_list2.on a span  { color: #fff; }
@media only screen and (max-width: 767px) {
  .resort_list2 { margin-left: 2px; margin-right: 2px; }
  .resortTab2 .resort_list2 { width:100px; height:100px; border-radius: 50%; border: 1px solid #00baff; padding-top:20px; }
  .resortTab2 .resort_list2 a { font-size: 15px; }
  .resorttp-1, .resorttp-2, .resorttp-3 { font-size: 12px;}
}

.resort_txt{padding: 30px 15px; background-color: rgba(255,255,255,0.4);}
.resort_txt h3{color: #000; font-size: 32px; }
.resort_txt h4{color: #000; font-size: 26px; line-height: 1.4; margin-top: 50px;  text-align: left;}
.resort_txt span{color: #666;}
.resort_txt p{font-size: 16px; color: #666;padding-top: 5px;text-align: left;}
.resortTab_img p{font-size: 18px; color: #242424; padding-top: 15px;}
.sec04_resortWrap .row > div{padding: 5px;}


/* ------------------- sec04 - 어디에 있을까? ------------------- */
#yumoto_sec04 { padding-bottom: 145px;  background-color: #e3f7ff;}

.sec04_mapWrap { display: none; }
.sec04_mapWrap .containerBox{position: relative;margin-top: 100px;}
.sec04_mapWrap .ryokan_item { background: #fff;  box-shadow: 0 0 25px rgba(0,0,0,0.2); max-width: 500px; position: absolute;top: 0; left: 100px; display: inline-block; z-index: 1;}
.sec04_mapWrap .ryokan_item1 { left: 20px; width: calc(33% - 10px); top: -50px; }
.sec04_mapWrap .ryokan_item2 { left: calc(33% + 20px); width: calc(33% - 10px); top: -50px; }
.sec04_mapWrap .ryokan_item3 { left: calc(66% + 20px); width: calc(33% - 10px); top: -50px; }
.sec04_mapWrap .ryokan_item .item_txt { position: relative; padding: 30px 20px; }
.sec04_mapWrap .ryokan_item1 .item_txt,
.sec04_mapWrap .ryokan_item2 .item_txt,
.sec04_mapWrap .ryokan_item3 .item_txt { padding: 15px; }
.sec04_mapWrap .ryokan_item .item_txt .sec04_logo { position: absolute; left: 50%; transform: translateX(-50%); top: -43px; }
.sec04_mapWrap .ryokan_item .item_txt .sec04_txt01 { font-size: 16px; color: #31b4ea;margin-bottom: 0; }
.sec04_mapWrap .ryokan_item .item_txt .sec04_txt02 { font-size: 30px; font-weight: 400; }
.mapBg{position: relative; height: 600px;}
.mapBg img{position: absolute; right: 0; top: 0; width:50%}

.sec04_btnWrap .ryokan_list{width: 24.5%; background-color: #fff; display: inline-block;padding: 15px 0; cursor: pointer;}

.sec04_btnWrap .ryokan_list p{color:#242424; font-size: 20px; font-weight: 500; margin-bottom: 5px; margin-top: 0;}
.sec04_btnWrap .ryokan_list.active{background-color: #00baff;position: relative;}
.sec04_btnWrap .ryokan_list.active::after{content: ""; display: block; width: 0;   height: 0;  border-left: 15px solid transparent;   border-right: 15px solid transparent;  border-top: 15px solid #00baff; bottom: -15px; left: 41%; position: absolute;}
.sec04_btnWrap .ryokan_list.active p,.resortTab .ryokan_list.active span{color: #fff;}


.sec04_circle { position: absolute; bottom: 30px; right: 30px; }
.home_icon { background: #e3f7ff}
.home_icon a{ 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 a img {position: relative; top: 50%; transform: translateY(-50%); }
.home_icon a:hover { background: #3389ff;}


/* ----- fadeTextAnim ----- */
.fadeTextAnim > span {
	opacity: 0;
  -webkit-transition: opacity 0.65s 0s linear;
     -moz-transition: opacity 0.65s 0s linear;
      -ms-transition: opacity 0.65s 0s linear;
       -o-transition: opacity 0.65s 0s linear;
          transition: opacity 0.65s 0s linear;
}
.fadeTextAnim > span.is_view { opacity: 1; }
.fadeTextAnim > span:nth-child(2n) {
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
}
.fadeTextAnim > span:nth-child(3n+1) {
	-webkit-transition-delay: .15s;
	transition-delay: .15s;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
  opacity: 1;

  }

  0,
  100% {
    opacity: 0.25;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  0%,
  100% {
    opacity: 0.25;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;

}
@media only screen and (max-width: 1999px) {
  #yumoto_sec02 { width: 100%; }
}
@media only screen and (max-width: 1535px) {
  .sec02_logoWrap .sec02_logo img{width: 80px;}
}
@media only screen and (max-width: 1199px) {
	.sec03_txt{padding-right: 0;padding-left: 0;}
  .feature_txt{    width: 90%; }
  .feature_box .row .col-sm-6{padding: 10px;}
  .sec04_btnWrap {display: flex;}
  .sec04_btnWrap .ryokan_list:last-child{border-right: none;}
  .sec04_btnWrap .ryokan_list{border-right: 1px solid #ddd; padding: 15px 8px;}
.sec04_btnWrap .ryokan_list p{font-size: 16px;}
  .area_list > p { font-size: 20px; margin-bottom: 10px; }
  .area_list:nth-child(1) { width: 100%; padding: 0; margin-bottom: 15px; }
  .area_list:nth-child(1) .ryokan_ListWrap .ryokan_list { float: none; display: inline-table; }
  .area_list:nth-child(2) { float: none; display: inline-block; border-left: none; }
  .area_list:nth-child(3) { float: none; display: inline-block; }
  .sec04_mapWrap .ryokan_item { left: -10px }
  .sec04_mapWrap .ryokan_item1 {left: 0;}
  .sec04_mapWrap .ryokan_item2 {left: 33%;}
  .sec04_mapWrap .ryokan_item3 {left: 66%}
  .sec04_mapWrap .ryokan_item1 .item_txt .sec04_txt02,
  .sec04_mapWrap .ryokan_item2 .item_txt .sec04_txt02,
  .sec04_mapWrap .ryokan_item3 .item_txt .sec04_txt02 { font-size: 24px; }
  .sec05_item a > img { width: 116px; }
  .sec05_item .sec05_txtWrap .sec05_txt02 { font-size: 16px; }
}
@media only screen and (max-width: 992px) {
  .bar02 { margin: 15px auto 55px; }
  .sec02_logoWrap { margin-top: 10px; }
  .sec02_logoWrap .sec02_logo { margin-right: 5px; }
  .sec02_logoWrap .sec02_logo img { width: 60px; }
  .resortTab .resort_list a { font-size: 18px; }
  .resortTab .resort_list a span { font-size: 14px; }
  #sec03_slider .col-sm-6{padding: 0;}
  .sec03_txt{padding: 0 30px 40px;}
  .resort_txt h4{font-size: 20px; margin-top: 0;}

  .resort_txt p{font-size: 14px;}

  .feature_bg{display: none;}
  .sec04_mapWrap .ryokan_item { max-width: 100%; position: relative; left: 0; top: 0; transform: translate(0,0); }
  .sec04_mapWrap .ryokan_item > img{width: 100%;}
  .sec04_mapWrap .ryokan_item .item_txt { padding: 50px 10px 35px; }
  .sec04_mapWrap .ryokan_item1 .item_txt,
  .sec04_mapWrap .ryokan_item2 .item_txt,
  .sec04_mapWrap .ryokan_item3 .item_txt { padding: 10px; }
  .sec04_mapWrap .ryokan_item .item_txt .sec04_logo { width: 70px; top: -35px; }
  .sec04_mapWrap .ryokan_item .item_txt .sec04_txt02 { font-size: 24px; }
  .sec04_mapWrap .ryokan_item1 .item_txt .sec04_txt02,
  .sec04_mapWrap .ryokan_item2 .item_txt .sec04_txt02,
  .sec04_mapWrap .ryokan_item3 .item_txt .sec04_txt02 { font-size: 18px; }
  .sec04_circle { width: 200px; }

.mapBg{height: auto;}
  .mapBg img{position: relative; margin-top: -190px;}

  .sec05_boxWrap { margin: 0; }
  .sec05_boxWrap:nth-child(1) { width: 100%; margin-bottom: 5px; }
  .sec05_boxWrap:nth-child(2) { width: 33.3333%; }
  .sec05_boxWrap:nth-child(3) { width: 66.6666%; }
  .sec05_item { width: 100%; }
  .sec05_item a { width: 170px; height: 620px; }
  .sec05_item a > img { width: 180px; }
}
@media only screen and (max-width: 767px) {
  .fullscreen { height: calc(100vh - 60px); }
  .sec01_txt01 { font-size: 20px; }
  .sec01_txt02 { font-size: 14px; color:#fff; }
  .sec01_txt03 { font-size: 15px; }
  .sec01_txt04 { letter-spacing: 12px; padding-left: 8px; }
  .sec01_txt05 { font-size: 14px; margin-top: 20px; }
  .sec01_txt06 { font-size: 15px; margin-bottom: 15px; }
  .bar01 { margin: 15px auto; }
  .sec01_logoWrap .sec01_logo { width: 90px; margin: 0 5px; }
  #yumoto_sec02 .yumotokan_txt01{font-size: 18px;color: #000;}
  .yumotokan_tit03 { font-size: 16px; }
  .yumotokan_txt01 { font-size: 18px; color: #fff;}
  .yumotokan_txt02 { font-size: 14px; }
  .bar02 { height: 35px; margin: 15px auto 30px; }
  .carousel-control.left img { left: 10px; width: 15px; }
  .carousel-control.right img { right: 10px; width: 15px; }

  #fusionsec3 .row .col-md-4 .fusion-sec3{height: 500px; background-position: 50% -150px; margin-bottom: 15px;}

  .resort_txt{padding: 0;}
  .area_list > p { font-size: 16px; }
  .resort_txt h4{padding-top: 10px;}
  .resortTab .resort_list { padding: 10px 0; min-height: 70px; }
  .resortTab .resort_list a {font-size: 14px; font-weight: lighter; }
  .resortTab .resort_list a span { font-size: 10px; }
  .resortTab .resort_list.active::after{left: 30%;}
  .resortTab2 .resort_list2 a { font-size: 14px;}
  .ryokan_ListWrap .ryokan_list { border-radius: 0; height: 75px; }
  .ryokan_ListWrap .ryokan_list .btn_txt01 { font-size: 11px; padding-top: 15px; margin: 0; }
  .ryokan_ListWrap .ryokan_list .btn_txt02 { font-size: 13px; }
  .area_list:nth-child(1) .ryokan_ListWrap .ryokan_list { float: left; width: 25%; margin: 0; display: table-cell; }
  .area_list:nth-child(2) { padding: 0 10px 0 0; width: 35%; float: left;}
  .area_list:nth-child(2) .ryokan_ListWrap .ryokan_list { width: 100%; height: 65px;}
  .area_list:nth-child(3) { padding-left: 10px; width: 65%; float: left; }
  .area_list:nth-child(3) .ryokan_ListWrap .ryokan_list { width: 50%; margin: 0; height: 65px; }

  .sec04_resortWrap .row > div{padding: 15px;}
  .sec04_mapWrap .ryokan_item { max-width: calc(100% - 30px); left: 0; background: #f8f8f8; margin: auto; }
  .sec04_mapWrap .ryokan_item1, .sec04_mapWrap .ryokan_item2, .sec04_mapWrap .ryokan_item3 { width: 100%; margin-bottom: 10px; }
  .sec04_mapWrap .ryokan_item .item_txt { padding: 45px 10px 15px; }
  .sec04_mapWrap .ryokan_item .item_txt .sec04_txt01 { font-size: 14px; margin: 0; }
  .sec04_mapWrap .ryokan_item .item_txt .sec04_txt02 { font-size: 20px; }
  .sec04_map-m { display: block; }
  .sec04_circle { width: 120px; bottom: 10px; right: 10px; }

  .sec05_boxWrap { padding: 0 5px 15px; color: blue;}
  .sec05_boxWrap .yumotokan_txt01 { padding: 15px 0 0; }
  .sec05_item { width: 80px; margin: auto; }
  .sec05_item a { height: 300px; width: 80px; }
  .sec05_item .sec05_txtWrap { width: 80px; top: 15px; }
  .sec05_item .sec05_txtWrap img { width: 35px; }
  .sec05_item .sec05_txtWrap .sec05_txt01 { margin: 5px 0 0; }
	.sec04_mapWrap .containerBox{margin-top: 50px;}
	.mapBg img{margin-top: -40px;}
  .home_icon { width: 85px; height: 85px; }

  .top_resort_main { font-size: 11px; }
  .resortTab .resort_list p { font-size: 13px; font-weight: 500; }

}

@media only screen and (max-width: 610px) {
.pc_map{display: none;}
.mobile_map{display: block;padding: 20px;}
}

@media only screen and (max-width: 560px) {
  .feature_box .row .col-md-6{padding: 15px;}
  .feature_txt img{width: 100px;}
  .feature_txt{width: 94%; top: 49%;}
  .feature_txt h4{font-size: 20px;}
  .feature_txt p{font-size: 14px;}
  #top_resort .btn.seemore{width: 100px; height: 100px; padding: 10px; margin-top: 20px;}
  #top_resort .btn.seemore a{font-size: 16px; padding: 10px 0;  display: inline-block;}
}
@media only screen and (max-width: 360px) {
  .resortTab2 .resort_list2 {  min-height: 75px;}
}

.tap2p { font-size: 14px; text-align: justify; margin-bottom: 30px;  }
.tap2p span { font-weight: 500; color:#024aff;}