@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; }
#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;}
/* ------------------- sec01 - 상단 배너 영역 ------------------- */
.fullscreen { overflow: hidden; position: relative; height: 1000px; }
.fullscreen .background-image-holder {position:absolute; }
#yumoto_sec01 .container { position: absolute; z-index: 1; top: 32%; 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: #fff; letter-spacing: -0.02em; padding-top: 15px;}

.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%); }

/* ------------------- sec03 - \ ------------------- */
#yumoto_sec03 { background-color: #3389ff; }
#yumoto_sec03 .yumotokan_txt01{ color: #fff;  padding:35px 0px 20px;}
#yumoto_sec03 .yumotokan_txt02 { color: #fff; line-height: 1.6;  font-size: 16px;}
.sec03_txt {padding-top: 100px; }
.mobile_map{display: none;}
.container1950{ width: 90%; margin-right: 5%; margin-left: 5%; overflow: hidden; }


/*리조트 시설 특징*/
#vinpearl_feature{margin-bottom: 50px;}
.feature_box {position: relative;}
.feature_box .feature_bg{position: absolute;top: -20px;left: 0; z-index: 5 ;}
.feature_txt{position: absolute; top: 54%; width: 90%;}
.feature_txt h4{color: #000; font-size: 24px; font-weight: 700; margin-top: -17px;}
.feature_txt p{color: #666; font-size: 16px;}
.sectit{padding: 50px 0 100px;}
.feature_box .row .col-md-6{padding: 25px; position: relative;}
.feature_box .row .col-md-6:nth-child(3) .feature_txt h4,.feature_box .row .col-md-6:nth-child(4) .feature_txt h4,.feature_box .row .col-md-6:nth-child(3) .feature_txt p,.feature_box .row .col-md-6:nth-child(4) .feature_txt p{color: #fff;}

.sec03_map{position: relative;}
.sec03_map .btn{position: absolute;padding: 0;}
.sec03_map .btn.link01{top: 70px;left: 287px;}
.sec03_map .btn.link02{top: 310px;left: 234px;}
.sec03_map .btn.link03{left: 267px;top: 339px;}
.sec03_map .btn.link04{left: 302px;top: 376px;}
.sec03_map .btn.link05{top: 620px;left: 372px;}
.sec03_map .btn.link06{bottom: 137px; left: -10px;}
/*리조트 top 3*/
#top_resort{background-color: #8fd5ff; padding: 100px 0;}
.resort_tit{padding-bottom: 30px;}

.resortTab .resort_list{width: 33%; background-color: #fff; display: inline-block;padding: 15px 0;cursor: pointer;}
.resortTab .resort_list p{color:#000; font-size: 20px; font-weight: 700; margin-bottom: 5px; margin-top: 0;}
.resortTab .resort_list span{color: #888; font-size: 16px;}
.resortTab .resort_list.active{background-color: #024aff; position: relative;}
.resortTab .resort_list.active p,.resortTab .resort_list.active span{color: #fff;}
.resortTab .resort_list.active::after{content: ""; display: block; width: 0;   height: 0;  border-left: 25px solid transparent;   border-right: 25px solid transparent;  border-top: 30px solid #024aff; bottom: -15px; left: 42%; position: absolute;}
.resort_txt{padding: 30px 15px; background-color: rgba(255,255,255,0.4);}
.resort_txt h4{color: #000; font-size: 24px; }
.resort_txt span{color: #666;}
.resort_txt p{font-size: 16px; color: #666;padding-top: 25px;}
.sec04_resortWrap { position: relative; display: none; }
.sec04_resortWrap  > 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_item .item_txt { position: relative; padding: 30px 20px; }
.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: 900px;}
.mapBg img{position: absolute; right: 0;}

.sec04_btnWrap .ryokan_list{width: 19.7%; 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 { 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%); }
.home_icon: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) {
  #yumoto_sec03 .yumotokan_txt01 span { font-size: 15px; }

  .sec03_imgWrap { width: 170px;}
	#yumoto_sec03 .col-md-8{padding-right: 0;padding-left: 0;}
	#yumoto_sec03 .yumotokan_txt01{font-size: 20px;}
	.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 }
  .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_slider .col-sm-6{padding: 0;}
  .sec03_txt{padding: 0 30px 40px;}
  #yumoto_sec03 .yumotokan_txt02{font-size: 14px;}
  #yumoto_sec03 .yumotokan_txt01{padding: 20px 0;font-size: 20px;}
  .sec03_imgWrap img{width: 80px;}
  .feature_bg{display: none;}
  .sec04_mapWrap {}
  .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_item .item_txt .sec04_logo { width: 70px; top: -35px; }
  .sec04_mapWrap .ryokan_item .item_txt .sec04_txt02 { font-size: 25px; }
  .sec04_circle { width: 200px; }

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

  .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: 20px; }
  .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; }


  .area_list > p { font-size: 16px; }
  .resortTab .resort_list{width: 33.333%;}
  .resortTab .resort_list.active::after{left: 30%;}
  .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; }
  .resortTab .resort_list {padding: 15px 5px; }
  .resortTab {display: flex;}
  .resortTab .resort_list:nth-child(2){border-right: 1px solid #ddd;}
  .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; }
	.sec04_mapWrap .containerBox{margin-top: 50px;}
	.mapBg img{margin-top: -40px;}
  .home_icon { width: 85px; height: 85px; }
}
@media only screen and (max-width: 610px) {
.pc_map{display: none;}
.mobile_map{display: block;padding: 20px;}
.sec03_map .btn{display: none;}
}
@media only screen and (max-width: 560px) {

  .resortTab .resort_list p{font-size: 18px;}
  .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;}
}