.background-image-holder { position: absolute; }
.image-bg .container { position: relative; z-index: 3; }

img, embed, object, video {
    max-width: 100%;
}
h2 {font-weight: 300; line-height: 1.4; word-break: keep-all;}
h3 {font-size:1.1em; font-weight: 300; line-height: 1.4; word-break: keep-all;}
h4 {font-size:1.6em; font-weight: 300; line-height: 1.4; word-break: keep-all;}



/* //////////////////////////// 상단배너 영역 //////////////////////////// */
.jr_blossomban-img { color:#245e63; margin-top: 30%; }
.jr_blossomban-img h1 { font-size: 24px; color:#245e63; font-weight:300;}
.title1 { font-size: 4em; margin-bottom:-30px; }
.title2 { font-size: 72px; }
.title3 { font-size: 14px; padding-top: 50px; }

@media only screen and (max-width: 768px) {
  .jr_blossomban-img h1 { font-size: 20px;}
  .title1 { font-size: 2.8em; margin-bottom:-10px; }
  .logo_img {max-width:70% !important; }

}

@media only screen and (max-width: 450px) {
  .jr_blossomban-img { margin-top: 55%;}
  .jr_blossomban-img h1 { font-size: 12px; color:#245e63;}
  .title1 { font-size: 18px; margin-bottom:-10px; }
  .title2 { font-size: 30px; }
  .title3 { font-size: 11px;  word-break: keep-all;}  

}

/* //////////////////////////// section 2번째 - 벚꽃처럼 흐드러진 5개의 블라썸 호텔 영역 //////////////////////////// */
.jrBc-1 { position: relative; background-color: #fff; z-index: 4; }
.jrBc-1 .container{
	max-width: 2000px;
	width:100%; 
    padding:0 50px;
    margin-left: auto;
    margin-right: auto;
	font-size:1.2em;
}

.jr_blossomConBack1 {
  height: 500px;
  background: url('/premium/event/img/jr_blossom/jr_blossom-1.jpg') center;
  background-size: cover;
}
.jr_blossomConBack2 {
  height: 500px;
  background: url('/premium/event/img/jr_blossom/jr_blossom-2.jpg') center;
  background-size: cover;
}
.container2000Tit {  margin: 50px 0; }
.h2small {font-size:.8em;}
.section_line::before {content: ""; display: block; background-color:#bb0019; width:1px; height:50px; margin:30px auto; clear:both;}
.jrBcimg01, .jrBctext01, .jrBcimg02, .jrBctext02 { width:50%; padding:0 15px; }
.jrBcimg01, .jrBctext02 {float:left;}
.jrBcimg02, .jrBctext01 {float:right;}


@media only screen and (max-width: 1200px) {
	.jrBc-1 .container {padding:0 15px; }
	.container2000Tit {margin: 0; }
	.myeongjo { font-size: 27px; }
}
@media only screen and (max-width: 992px) {
	.jrBcimg01, .jrBctext01, .jrBcimg02, .jrBctext02 {width:100%; float:none; text-align:center; }
	.container2000Tit { padding-bottom: 20px !important;}
	.jr_blossomConBack1, .jr_blossomConBack2 { height: 400px; }
}

@media only screen and (max-width: 450px) {
	.container2000Tit h2 {margin-top:0; }
	.h2small { font-size: 17px;}
	.myeongjo { font-size: 20px;}
	.jr_blossomConBack1, .jr_blossomConBack2 { height: 250px; }
}




/* //////////////////////////// section 3번째 - 네츄럴 프리미엄을 추구하는 블라썸이 지향하는 4가지! //////////////////////////// */
.tab4 { z-index:32; position:relative; background-color:#fff; font-size:14px;}
#event_contant_4 { padding:0; list-style:none; }
#event_contant_4 p {color:#fff;}
#event_contant_4 li {padding-bottom:50px; padding-top: 10px;}
#event_contant_4 li .point4_img {width:35%;}
.point4_text {    
	width: 53%;
    right: 15px;
    left: auto;
	top:0px; 
	position:absolute;
}
.roundimg_text { font-size:1.4em; }

@media (max-width: 1200px){
	#event_contant_4 li { padding-bottom: 80px;}
}
@media (max-width: 992px){
	#event_contant_4 li { padding-bottom: 20px; }
	#event_contant_4 li .point4_img { width: 25%;}
	.point4_text { width: 65%; right: 15px; top: 10%;}
}
@media (max-width: 600px){
	#event_contant_4 li .point4_img { width: 100%; text-align: center; margin-bottom: 20px;}
	#event_contant_4 li .point4_img img { width:160px; }
	.point4_text { width: 100%; right: 0; top:0; position: relative; text-align: center;}
	.roundimg_text { font-size: 1.2em;}
}



/* //////////////////////////// section 4번째 - 네츄럴 프리미엄 호텔, 블라썸으로의 초대 //////////////////////////// */
.tab4Tab .nav-tabs { border: none; background-color:#fff;  display: flex;}
.tab4Tab .nav-tabs li {width:20%}
.tab-content {background-color: #fff;}
.tab4Tab .nav > li > a {text-align: center; padding: 80px 0; color: #fff; font-size: 1.2em; border-radius:0px; border:0px; margin-right:10px; font-weight: 500; background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); border-radius: 50% }
.tab4Tab .nav-tabs li a:hover, .tab4Tab .nav-tabs > li.active > a, .onsenVillageSec2Tab .nav-tabs > li.active > a:focus, .onsenVillageSec2Tab .nav-tabs > li.active > a:hover { border: none; background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%); color: #fff; border-radius: 50%; }
.font300 {font-weight:300}

@media only screen and (max-width: 1200px) {
	.tab4Tab .nav > li > a { padding: 58px 0;}
}
@media only screen and (max-width: 992px) {
	.tab4Tab .nav > li > a { padding: 36px 0;}
}
@media only screen and (max-width: 767px) {
	.tab4Tab { text-align:center; }
	.tab4Tab .nav > li > a { font-size: 1em; padding: 0; height: 80px; border-radius: 0; margin-right: 5px; }
	.tab4Tab .nav-tabs li a:hover, .tab4Tab .nav-tabs > li.active > a, .onsenVillageSec2Tab .nav-tabs > li.active > a:focus, .onsenVillageSec2Tab .nav-tabs > li.active > a:hover { border: none; background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%); color: #fff; border-radius: 0; }
	.blossomLogoA {display:none;}
}



/* //////////////////////////// section 5번째 - 지도 //////////////////////////// */
  .activeCtn{display:block !important}
  .jrBlossomMap { position: relative; overflow:hidden; background: url('/premium/event/img/jr_blossom/jr_blossom_hana-3.jpg') no-repeat; background-size: cover; }
  .jrBlossomMap h2 { font-weight: 300; line-height: 1.4; }
  #jrBlossomSelector { position: relative; height: 700px; }
  .jrBlossomPointer {position:absolute;z-index:30;width:26px;height:37px;background:url(/premium/event/img/jr_blossom/jr_blossom_intro_ct4_btn.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;
  }
  @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);}
  }

  .jrBlossomAbridgement{display:none;position:absolute;left:0px;top:50px; z-index: 1;}
  #jrBlossomPointer-1{right:410px;top:380px}
  #jrBlossomPointer-2{right:430px;top:380px}
  #jrBlossomPointer-3{right:560px;top:630px}
  #jrBlossomPointer-4{right:395px;top:390px}
  #jrBlossomPointer-5{right:195px;top:320px}
  .activeBtn{z-index:40;background:url(/premium/event/img/jr_blossom/jr_blossom_intro_ct4_btn.png) 0px -37px no-repeat}
  .jpMapBk {
      position: absolute;
      background: url(/premium/event/img/jr_blossom/jp-map-bk.png) no-repeat ;
      background-size: cover;
      margin-top: 70px;
      right: 0px;
      width: 617px;
      height: 614px;
  }
@media only screen and (max-width: 1200px) {
  .jrBlossomAbridgement img{ width:80%; }
}
@media only screen and (max-width: 992px) {
  #jrBlossomSelector { height: 500px; }
  .jpMapBk { margin-top: 70px; right: -100px; width: 400px; height: 398px; }
  #jrBlossomPointer-1{right:170px;top:260px}
  #jrBlossomPointer-2{right:180px;top:260px}
  #jrBlossomPointer-3{right:260px;top:418px}
  #jrBlossomPointer-4{right:150px;top:270px}
  #jrBlossomPointer-5{right:22px;top:220px}
}

@media only screen and (max-width: 768px) {
    #jrBlossomSelector { height: 500px; }
    .jpMapBk { margin-top: 70px; right: -100px; width: 400px; height: 398px; }
    #jrBlossomPointer-1{right:170px;top:260px}
    #jrBlossomPointer-2{right:180px;top:260px}
    #jrBlossomPointer-3{right:260px;top:418px}
    #jrBlossomPointer-4{right:150px;top:270px}
    #jrBlossomPointer-5{right:22px;top:220px}
}
@media only screen and (max-width: 450px) {
	.jrBlossomAbridgement img{ width:300px; } 
}


/* //////////////////////////// section 6번째 - “블라썸” 브랜드 5대 주요 시설 //////////////////////////// */
.jr_blossom_ryokan .col_1_5 { 
	width: 20%; 
	display: block;
    position: relative;
    float: left;
}
.jr_blossom_info {
    position: absolute;
    top: 70px;
	left:10%;
    width: 80%;
    color: #fff;
    text-align: left;
}

.jr_blossom_info .p_tit { font-size: 30px; color:#fff; font-weight:500; }


@media only screen and (max-width: 992px) {
    .jr_blossom_info .p_tit { font-size: 1.4em; margin-top: 10px; }
    .jr_blossom_info { text-align: left; top: 25%;}
}
@media only screen and (max-width: 768px) {
    .jr_blossom_ryokan h2 { font-size: 16px; }   
    .jr_blossomban-img h2 { font-size: 14px; }
}
@media only screen and (max-width: 450px) {
	 .jr_blossom_info .p_tit { font-size: 18px; }
}


}