@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
img { max-width: 100%; }
ul { list-style: none; padding: 0; margin: 0; }
section p { font-weight: 400; letter-spacing: -0.02em; }
.color-888 { color: #888; }

/* ------------------- sec01 - 상단 배너 영역 ------------------- */
.fullscreen { overflow: hidden; position: relative; height: 1000px; }
.fullscreen .background-image-holder {position:absolute; }
#yumoto_sec01 .container { position: absolute; z-index: 1; top: 40%; left: 50%; transform: translate(-50%,-50%); width: 100%; color: #2e500c;}
.sec01_txt01 { font-family: 'Jeju Myeongjo', serif; font-size: 32px; color: #51721b; margin: 0; }
.sec01_txt02 { font-family: 'Jeju Myeongjo', serif; font-size: 86px; line-height: 1.2; }
.sec01_txt03 { font-family: 'Lora', serif; font-size: 20px; letter-spacing: 1px; }
.sec01_txt04 { font-family: 'Lora', serif; font-size: 20px; letter-spacing: 19px; padding-left: 16px;}
.sec01_txt05 { font-size: 16px; margin-top: 60px; }
.sec01_txt06 { font-family: 'Jeju Myeongjo', serif; font-size: 24px; color: #170901; margin-bottom: 40px; }
.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: 24px; }
.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%); }

/* ------------------- sec03 - 4가지 자부심 ------------------- */
#yumoto_sec03 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec03_bg.jpg) no-repeat center; background-size: cover; }
#yumoto_sec03 .yumotokan_txt01 span { font-size: 18px; color: #383532; }
#yumoto_sec03 .yumotokan_txt02 { color: #242424; line-height: 1.6; }
.sec03_imgWrap { float: left; width: 190px; }
.sec03_txtWrap { float: left; width: calc(100% - 190px); padding-left: 20px; }
#yumoto_sec03 .row > div:nth-child(1),
#yumoto_sec03 .row > div:nth-child(2) { margin-bottom: 80px; }

/* ------------------- sec04 - 어디에 있을까? ------------------- */
#yumoto_sec04 { padding-bottom: 145px; }
.area_list { float: left; font-weight: 400; padding: 0 25px; }
.area_list > p { font-size: 24px; color: #31b4ea; margin-bottom: 20px; }
.area_list:nth-child(1) { padding-left: 0; }
.area_list:nth-child(2) { border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6;  }
.area_list:nth-child(3) { padding-right: 0; }
.ryokan_ListWrap .ryokan_list {
  float: left;
  width: 140px;
  height: 140px;
  border: 1px solid #d3d3d3;
  border-radius: 100%;
  margin-right: 13px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background: -webkit-linear-gradient(rgba(250,250,250,1) 1%, rgba(255,255,255,1) 65%, rgba(228,228,228,1) 100%);
  background: -o-linear-gradient(rgba(250,250,250,1) 1%, rgba(255,255,255,1) 65%, rgba(228,228,228,1) 100%);
  background: linear-gradient(rgba(250,250,250,1) 1%, rgba(255,255,255,1) 65%, rgba(228,228,228,1) 100%);
  -webkit-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
     -moz-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
      -ms-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -o-transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
          transition: all 0.2s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.ryokan_ListWrap .ryokan_list:last-child { margin-right: 0; }
.ryokan_ListWrap .ryokan_list .btn_txt01 { font-size: 13px; color: #31b4ea; margin-bottom: 5px; padding-top: 40px; }
.ryokan_ListWrap .ryokan_list .btn_txt02 { font-size: 16px; color: #000; line-height: 1.1; }
.ryokan_ListWrap .ryokan_list .btn_txt02 span { font-size: 12px; }
.ryokan_ListWrap .ryokan_list.active,
.ryokan_ListWrap .ryokan_list:hover { background: #31b4ea;  box-shadow: 0 0 10px rgba(0,0,0,0); }
.ryokan_ListWrap .ryokan_list.active .btn_txt01,
.ryokan_ListWrap .ryokan_list.active .btn_txt02,
.ryokan_ListWrap .ryokan_list:hover .btn_txt01,
.ryokan_ListWrap .ryokan_list:hover .btn_txt02 { color: #fff; }
.sec04_mapWrap { height: 860px; position: relative; display: none; }
.sec04_mapWrap .ryokan_item { max-width: 350px; background: #fff; position: absolute; left: calc(50% - 350px); top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 25px rgba(0,0,0,0.2); }
.sec04_mapWrap .ryokan_item > img { width: 100%; }
.sec04_mapWrap .ryokan_item .item_txt { position: relative; padding: 70px 10px 55px; }
.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; }
.sec04_mapWrap .ryokan_item .item_txt .sec04_txt02 { font-size: 30px; font-weight: 400; }
.sec04_map01 {background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec04_map01.jpg) no-repeat center; background-size: cover; }
.sec04_map02 {background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec04_map02.jpg) no-repeat center; background-size: cover; }
.sec04_map03 {background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec04_map03.jpg) no-repeat center; background-size: cover; }
.sec04_map04 {background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec04_map04.jpg) no-repeat center; background-size: cover; }
.sec04_map05 {background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec04_map05.jpg) no-repeat center; background-size: cover; }
.sec04_map06 {background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec04_map06.jpg) no-repeat center; background-size: cover; }
.sec04_map07 {background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec04_map07.jpg) no-repeat center; background-size: cover; }
.sec04_map-m { display: none; }
.sec04_circle { position: absolute; bottom: 30px; right: 30px; }

/* ------------------- sec05 - 7대 유모토칸 시설 ------------------- */
#yumoto_sec05 { overflow: hidden; background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_bg.jpg) center; }
.sec05_Box { max-width: 1535px; margin: auto; overflow: hidden; }
.sec05_boxWrap { float: left; background: #fff; border: 1px solid #ebebeb; padding: 0 20px 25px; margin: 0 5px; }
.sec05_boxWrap .yumotokan_txt01 { position: relative; padding: 15px 0 30px; }
.sec05_boxWrap .yumotokan_txt01:after {
  content: " ";
  display: block;
  width: 80px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #31b4ea;
}
.sec05_boxWrap:nth-child(2) .sec05_item { width: 100%; }
.sec05_item { position: relative; float:left; margin: 0 2px; }
.sec05_item a { display: block; max-width: 100%; height: 700px; width: 193px; }
.sec05_item a.sec05_img01 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_img01.png) no-repeat top center; background-size: 100%; }
.sec05_item a.sec05_img02 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_img02.png) no-repeat top center; background-size: 100%; }
.sec05_item a.sec05_img03 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_img03.png) no-repeat top center; background-size: 100%; }
.sec05_item a.sec05_img04 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_img04.png) no-repeat top center; background-size: 100%; }
.sec05_item a.sec05_img05 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_img05.png) no-repeat top center; background-size: 100%; }
.sec05_item a.sec05_img06 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_img06.png) no-repeat top center; background-size: 100%; }
.sec05_item a.sec05_img07 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/yumotokan_group/sec05_img07.png) no-repeat top center; background-size: 100%; }
.sec05_item a > img { width: 100%; }
.sec05_item .sec05_txtWrap { position: absolute; width: 100%; top: 30px; left: 50%; transform: translateX(-50%); }
.sec05_item .sec05_txtWrap .sec05_txt01 { font-family: 'Jeju Myeongjo', serif; font-size: 16px; margin: 13px 0 0; }
.sec05_item .sec05_txtWrap .sec05_txt02 { font-family: 'Jeju Myeongjo', serif; font-size: 24px; }
.home_icon { display: inline-block; width: 113px; height: 113px; background: #fe372d; border-radius: 100%; box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.home_icon img {position: relative; top: 50%; transform: translateY(-50%); }
.home_icon:hover { background: #ec251b;}

/* ----- 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;
}

@media only screen and (max-width: 1999px) {
  #yumoto_sec02 { width: 100%; }
}
@media only screen and (max-width: 1535px) {
  .sec05_Box { max-width: 1140px; }
  .sec05_boxWrap:nth-child(1) { width: calc(53.8% - 10px); }
  .sec05_boxWrap:nth-child(2) { width: calc(16.9% - 10px); }  
  .sec05_boxWrap:nth-child(3) { width: calc(29.2% - 10px); }
  .sec05_item { margin: 0; }
  .sec05_item a { height: 490px; width: 120px; margin: auto;}
  .sec05_item .sec05_txtWrap { width: 120px; }
  .sec05_boxWrap:nth-child(1) .sec05_item { width: 25%; }
  .sec05_boxWrap:nth-child(3) .sec05_item { width: 50%; }
  .sec05_item .sec05_txtWrap img { width: 50px; } 
  .sec05_item .sec05_txtWrap .sec05_txt01 { font-size: 12px; }
  .sec05_item .sec05_txtWrap .sec05_txt02 { font-size: 18px; }
}
@media only screen and (max-width: 1199px) {
  #yumoto_sec03 .yumotokan_txt01 span { font-size: 15px; }
  .sec03_imgWrap { width: 170px; }
  .sec03_txtWrap { width: calc(100% - 170px)}
  
  .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: calc(50% - 300px); }
  .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; }

  .sec03_imgWrap { float: none; }
  .sec03_txtWrap { float: none; width: 100%;  padding-left: 0; margin-top: 10px; }
  #yumoto_sec03 .row > div:nth-child(1), #yumoto_sec03 .row > div:nth-child(2) { margin-bottom: 50px; }
  
  .sec04_mapWrap { background-position: right -550px center; height: 600px; }
  .sec04_mapWrap .ryokan_item { max-width: 300px; position: relative; left: 15px; top: 15px; transform: translate(0,0); }
  .sec04_mapWrap .ryokan_item .item_txt { padding: 50px 10px 35px; }
  .sec04_mapWrap .ryokan_item .item_txt .sec04_logo { width: 70px; top: -35px; }
  .sec04_mapWrap .ryokan_item .item_txt .sec04_txt02 { font-size: 25px; }
  .sec04_circle { width: 200px; }
  
  .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: 45px; }
  .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; }

  .yumotokan_tit01 { font-size: 16px; }
  .yumotokan_tit02 { font-size: 21px; }
  .yumotokan_tit03 { font-size: 16px; }
  .yumotokan_txt01 { font-size: 18px; }
  .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; }
  
  #yumoto_sec03 .row > div { text-align: center; margin-bottom: 30px; }
  #yumoto_sec03 .row > div:nth-child(1), #yumoto_sec03 .row > div:nth-child(2) { margin-bottom: 30px; }
  .sec03_imgWrap { width: 150px; margin: auto; }  
  
  .area_list > p { font-size: 16px; }
  .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_mapWrap { height: auto; background: #f8f8f8; }
  .sec04_mapWrap .ryokan_item { max-width: calc(100% - 30px); left: 0; background: #f8f8f8; margin: auto; }
  .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; }
  .home_icon { width: 85px; height: 85px; }
}