@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; }

/* ------------------- sec01 - 상단 배너 영역 ------------------- */
.toptit { position: absolute; width: 100%; top: 25%; left: 0; z-index: 100;}
.daubet_bg { position: relative; }
.daubet_bg > div {height:90vh;}
.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(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec01_bg.jpg) center bottom no-repeat;
  background-size: cover;
}
#sliderinfo2 {
  background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec01_bg.jpg) center bottom no-repeat;
  background-size: cover;
}
#slidercopyfixed {
  position: absolute;
  bottom: 0; 
  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; }

#zen_sec01 { position: relative; }
#zen_sec01 .container { position: absolute; z-index: 99; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 100%; color: #2e500c; color: #fff; }
.sec01_txt01 { font-family: 'Jeju Myeongjo', serif; font-size: 25px; margin: 15px 0; line-height: 1.3;}
.sec01_txt02 { font-family: 'Jeju Myeongjo', serif; font-size: 86px; line-height: 1.3;}
.sec01_txt03 { font-size: 20px; font-family: 'Lora', serif; display: inline-block; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding: 3px; margin: 25px 0 50px; }
.sec01_btnWrap li { display: inline-block; width: 130px; height: 130px; border-radius: 100%;  background: #000; position: relative; overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.3); margin: 0 10px;}
.sec01_btnWrap li a { font-size: 17px; color: #fff; width: 100%; height: 100%; position: absolute; left: 0; padding-top: 39px; }
.sec01_btnWrap li a span { font-size: 15px; padding-right: 12px; background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec01_arrow_off.png) no-repeat right center; }
.sec01_btnWrap li:nth-child(1) a { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec01_btn_bg1.png) no-repeat center;}
.sec01_btnWrap li:nth-child(2) a { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec01_btn_bg2.png) no-repeat center;}
.sec01_btnWrap li:hover { background: #fff;}
.sec01_btnWrap li a:hover { color: #000;}
.sec01_btnWrap li a:hover span { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec01_arrow_on.png) no-repeat right center;}
.main_logo { position: absolute; z-index: 5; bottom: 80px; right: 40px; display: block;}


/* ------------------- sec02 ------------------- */
.zen_tit01 { font-size: 38px; margin-bottom: 60px;}
.zen_txt01 { font-size: 26px; margin: 15px 0 20px; }
.zen_txt01 b{ font-size: 33px; }
.zen_txt02 { font-size: 16px; }
.zen_txt03 { font-size: 20px; }

#zen_sec02 .container{ width: 1950px; overflow: hidden; }
#zen_sec02 .row { margin-right: -25px; margin-left: -25px; }
#zen_sec02 .row .col-md-6 { padding-right: 25px; padding-left: 25px; }
.sec02_bg { background: #fbf8f4; }
.sec02_imgWrap { float: right; }
.sec02_txtWrap { float: left; } 
.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 ------------------- */
#zen_sec03 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec03_bg.jpg) no-repeat center; background-size: cover; }
.sec03_item {  position: relative; width: 100%; height: 250px; box-shadow: 0 0 10px rgba(0,0,0,0.25); margin-top: 10px; }
.sec03_txtBox { position: absolute; background: rgba(255,255,255,0.95); width: 360px; height: 210px; top: 50%; transform: translateY(-50%); padding-left: 30px; }
.sec03_item .sec03_txtBox > div { position: absolute; top: 50%; transform: translateY(-50%); }
.sec03_num { font-family: 'Jeju Myeongjo', serif; font-size: 20px; color: #c9932b; line-height: 1.1; }
.sec03_num span { font-size: 15px; }
.sec03_item01 .sec03_txtBox,
.sec03_item03 .sec03_txtBox,
.sec03_item05 .sec03_txtBox{ left: calc(50% + 15px); }
.sec03_item02 .sec03_txtBox,
.sec03_item04 .sec03_txtBox{ right: calc(100% / 2 + 15px); }
.sec03_item01 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec03_img01.jpg) no-repeat center; background-size: cover; }
.sec03_item02 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec03_img02.jpg) no-repeat center; background-size: cover; }
.sec03_item03 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec03_img03.jpg) no-repeat center; background-size: cover; }
.sec03_item04 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec03_img04.jpg) no-repeat center; background-size: cover; }
.sec03_item05 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec03_img05.jpg) no-repeat center; background-size: cover; }


/* ------------------- sec04 ------------------- */
.logo_tit { width: 52px; }
.artName { display: inline-block; border-bottom: 1px solid #e1e1e1; padding: 0 10px 7px; position: relative; margin-bottom: 20px; }
.artName:after { content: " "; display: block; position: absolute; width: 65px; height: 1px; background: #000; bottom: -1px; left: 50%; transform: translateX(-50%); }
.intro_tit { position: relative; }
.intro_tit > .zen_txt03 { position: relative; text-align: left; z-index: 1; display: inline-block; padding-right: 10px; background: #fff; }
.sec04_bar { position: absolute; width: 100%; height: 1px; background: #e1e1e1; bottom: 15px; }
.sec04_bar:after { content: " "; display: block; position: absolute; width: 23px; height: 1px; background: #e1e1e1; transform: rotate(45deg); right: -2px; bottom: 8px; }


/* ------------------- sec05 ------------------- */
#zen_sec05 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/pattern.jpg); }
#zen_sec05 .zen_txt03 { line-height: 1.3; margin-bottom: 25px; }
#zen_sec05 .zen_txt03 b { font-size: 30px; }
.sec05_txt { font-family: 'Jeju Myeongjo', serif; font-size: 15px; background: #81815b; display: inline-block; color: #fff; padding: 3px 8px;}


/* ------------------- sec06 ------------------- */
.ryokan_ListWrap .ryokan_list {
  display: inline-block;
  width: 205px;
  height: 205px;
  border: 1px solid #f0f0f0;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 100%; 
  background: -webkit-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(228,228,228,1) 100%);
  background: -o-linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(228,228,228,1) 100%);
  background: linear-gradient(rgba(255,255,255,1) 0%, 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 img { padding: 25px 0 10px; }
.ryokan_ListWrap .ryokan_list .btn_txt01 { font-size: 13px; color: #ffa800; margin-bottom: 5px; }
.ryokan_ListWrap .ryokan_list .btn_txt02 { font-size: 21px; color: #000; line-height: 1.3; }
.ryokan_ListWrap .ryokan_list .btn_txt02 span { font-size: 12px; }
.ryokan_ListWrap .ryokan_list.active,
.ryokan_ListWrap .ryokan_list:hover { background: #ffa800;  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; }
.sec06_mapWrap { height: 900px; position: relative; display: none; }
.sec06_mapWrap .ryokan_item { width: 625px; background: #fff; position: absolute; left: calc(50% - 500px); top: 10%; box-shadow: 0 0 10px rgba(0,0,0,0.15); overflow: hidden; }
.sec06_mapWrap .ryokan_item > img { width: 50%; float: left; }
.sec06_mapWrap .ryokan_item .item_txt { float: left; text-align: left; padding: 30px; }
.sec06_mapWrap .ryokan_item .item_txt .sec06_txt01 { font-size: 15px; color: #ff4657; }
.sec06_mapWrap .ryokan_item .item_txt .sec06_bar { width: 25px; height: 2px; background: #ff4556; margin: 10px 0 15px; }
.sec06_mapWrap .ryokan_item .item_txt .sec06_txt02 { font-size: 15px; color: #b9b9b9; margin: 0; }
.sec06_mapWrap .ryokan_item .item_txt .sec06_txt03 { font-size: 25px; font-weight: 700; line-height: 1.1; margin-bottom: 20px; }
.sec06_mapWrap .ryokan_item .item_txt .zen_txt02 { margin-bottom: 20px; }
.sec06_mapWrap .ryokan_item .item_txt a { font-size: 15px; background: #ffa800; padding: 5px 15px; color: #fff; border-radius: 100px;}
.sec06_mapWrap .ryokan_item .item_txt a:hover { background: #e89600; }
.sec06_map01 {background: #c5e8c5 url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec06_map01.jpg) no-repeat center; }
.sec06_map02 {background: #c5e8c5 url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec06_map02.jpg) no-repeat center; }
.sec06_mapWrap .map_m { width: 100%; }


/* ------------------- sec07 ------------------- */
#zen_sec07 { background: #656c4e; overflow: hidden; }
.sec07_itemWrap { position: relative; overflow: hidden;}
.sec07_item { width: 50%; float: left; position: relative; }
.sec07_item > img { float: left; width: calc(100% - 360px); }
.sec07_item .txtWrap { float: left; width: 360px; padding: 20px 5px 0; }
.sec07_item .txtWrap .txtbox { position: absolute; top: 50%; transform: translateY(-50%); width: 360px; }
.sec07_item .txtWrap .txtbox .sec07_txt01 { font-size: 18px;}
.sec07_item .txtWrap .txtbox .sec07_txt02 { font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 50px; }
.sec07_item .txtWrap a { font-size: 15px; padding: 5px 15px; color: rgba(255,255,255,0.8); border-radius: 100px; border: 1px solid rgba(255,255,255,0.8); }
.sec07_item .txtWrap a:hover {background: #fff; color: #000; }
.sec07_item01 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec07_pattern01.png) repeat-x bottom, url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec07_bg01.jpg); }
.sec07_item01 .txtWrap .txtbox { right: 0; }
.sec07_item02 { background: url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec07_pattern02.png) repeat-x bottom, url(//cdn.hotelonsen.com/onsen2/img/branding/zen_group/sec07_bg02.jpg); }
.sec07_item02 > img { float: right; }
.sec07_item02 .txtWrap .txtbox { left: 0; }
.sec07_itemWrap .sec07_logo{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

.home_icon { display: inline-block; width: 113px; height: 113px; background: #ffc000; 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: #ffa500;}

/* ----- 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) {
  #zen_sec02 .container { width: 100%; }
}
@media only screen and (max-width: 1300px) {
  .sec07_item > img { width: 100%; }
  .sec07_item .txtWrap { width: 100%; }
  .sec07_item .txtWrap .txtbox { position: relative; top: 0; transform: inherit; width: 100%; padding: 20px 0 30px;}
}
@media only screen and (max-width: 1199px) {
  .daubet_bg > div {height:100vh;}  
  .zen_txt01 { font-size: 22px; }
  .zen_txt01 b{ font-size: 26px; }
  
  .sec06_mapWrap { height: 730px; }
  .sec06_map01, .sec06_map02 { background-size: cover; }
}
@media only screen and (max-width: 991px) {  
  .sec02_logoWrap { margin-top: 10px; }  
  .sec03_item01 .sec03_txtBox, .sec03_item03 .sec03_txtBox, .sec03_item05 .sec03_txtBox { left: 50%;}
  .sec03_item02 .sec03_txtBox, .sec03_item04 .sec03_txtBox { right: 50%; }  
  .sec05_txt { margin-top: 10px; }
  #zen_sec05 .zen_txt03 { margin-bottom: 15px; }
  #zen_sec05 .zen_txt03 b { font-size: 22px; }
  #zen_sec05 .sec02_imgWrap { float: none; }
  .sec06_mapWrap .ryokan_item { top: 5%; left: 15px; }
  .sec07_itemWrap .sec07_logo { top:30%;}
}
@media only screen and (max-width: 767px) {
  .slidercopyfixedh3 { font-size: 1.3em; }
  #zen_sec01 .container { top: 40%; }
  .sec01_txt01 { font-size: 18px; }
  .sec01_txt02 { font-size: 40px; }
  .sec01_txt03 { font-size: 15px; margin: 0 0 20px; }
  .sec01_btnWrap li { width: 110px; height: 110px; margin: 0 5px;}
  .sec01_btnWrap li a { font-size: 15px; padding-top: 34px;}
  .sec01_btnWrap li a span { font-size: 13px; }

  .zen_tit01 { font-size: 21px; margin-bottom: 30px;}
  .zen_txt01 { font-size: 18px; }
  .zen_txt01 b{ font-size: 22px; }
  .zen_txt02 { font-size: 14px; }
  .zen_txt03 { font-size: 17px; }

  .carousel-control.left img { left: 10px; width: 15px; }
  .carousel-control.right img { right: 10px; width: 15px; }

  .sec03_item { height: 300px; }
  .sec03_txtBox { top: auto; bottom: 0; transform: translateY(0); width: 100%; height: auto;  padding: 15px; }
  .sec03_item .sec03_txtBox > div { position: relative; top: auto; transform: translateY(0); }
  .sec03_item01 .sec03_txtBox, .sec03_item03 .sec03_txtBox, .sec03_item05 .sec03_txtBox, .sec03_item02 .sec03_txtBox, .sec03_item04 .sec03_txtBox { left: 0;}
  
  .ryokan_ListWrap .ryokan_list { width: 130px; height: 130px; }
  .ryokan_ListWrap .ryokan_list img { width: 17px; padding: 10px 0 0; }
  .ryokan_ListWrap .ryokan_list .btn_txt02 { font-size: 17px; }
  .sec06_mapWrap { height: auto; }
  .sec06_mapWrap .ryokan_item { position: relative; top: 0; left: 15px; width: calc(100% - 30px); }
  .sec06_mapWrap .ryokan_item > img { width: 100%; }
  .sec06_mapWrap .ryokan_item .item_txt { padding: 20px 15px 25px; }
  .sec06_mapWrap .ryokan_item .item_txt .sec06_txt01,
  .sec06_mapWrap .ryokan_item .item_txt .sec06_txt02{ font-size: 13px; }
  .sec06_mapWrap .ryokan_item .item_txt .sec06_bar { margin: 5px 0 10px; }
  .sec06_mapWrap .ryokan_item .item_txt .sec06_txt03 { font-size: 18px; margin-bottom: 15px; }
  .sec06_map01, .sec06_map02 { background: #f7f0dd; padding-top: 15px; }
  
  .sec07_item .txtWrap .txtbox .sec07_txt01 { font-size: 15px; }
  .sec07_item .txtWrap .txtbox .sec07_txt02 { font-size: 22px; }
  .sec07_itemWrap .sec07_logo { top: 15%; width: 50px; }
  .home_icon { width: 85px; height: 85px; }
}