@charset "utf-8";
img {max-width: 100%;}
ul { list-style: none; padding: 0; margin: 0; }
.color-888 { color: #888; }
#footer_common { padding-top: 0;}
p { letter-spacing: -0.03em; }
.red {color: #be010a; }
.blue {color: #195d86; }


/* ///////////// sec01 - villa_honegg_hotel ///////////// */
#sec01 {
  background: url(//cdn.hoteltira.com/img/CH/event/villa_honegg_hotel/sec01_bg.jpg) no-repeat center;
  background-size: cover;
  overflow: inherit;
  height: 70vh;
}
#sec01 > .container { position: relative; transform: translateY(-50%); top: 30%; }
.sec01_txtWrap { padding: 70px 10px; margin: auto; text-align: left; color:#2a5589;}
.sec01_txtWrap > img { margin-bottom: 40px; }
.sec01_txtWrap .sec01_txt { color: #2a5589; font-size: 18px; }
.sec01_txtWrap2 { background-color:rgba(23,111,166,0.3); bottom: 0px; position: absolute; width: 100%;}
.sec01_tit01 { font-size: 16px; }
.sec01_txt { font-size: 20px; }
.seo01_sub {padding: 70px 10px; margin: auto; text-align: left; color:#fff; }

@media only screen and (max-width: 767px) {
  .sec01_tit01 { font-size: 14px; }
  .seo01_sub { padding: 20px 10px; }
  .seo01_sub > img { width: 250px; }
  .sec01_txtWrap > img { width: 200px; margin-bottom: 20px; }
  .sec01_txtWrap .sec01_txt { font-size: 15px; }
}

/* ///////////// sec02-1 - 호텔 ///////////// */
.sec02_sub { width: 100%; height: 1100px; position: relative;}
#sec02 > .container { position: relative; }
.sec02_bg-1 {
  border: 1px solid #2a5589;
  height: 535px;
  position: absolute;
  max-width: calc(100% - 0px);
  width: 100%;
  left: 50%;
  top: 82%;
  transform: translate(-50%,-50%);
}
.sec02-1_imgwrap {  width: 50%; position: relative; display: inline-block;}
.sec02-1_imgwrap .sec02_img01 { padding-top: 0%; left:0px; position:absolute; }
.sec02-1_imgwrap .sec02_img02 { left: -43%; top:428px; position:absolute; }
.sec02-1_imgwrap .sec02_img03 { left: 23%; top:500px; position:absolute; }
.sec02-1_txtWrap {  width: 50%; float: left; position: relative; }
.sec02-1_txt {
  text-align: left;
  color: #767676;
  width: 100%;
  margin-top: 130px;
  background: #fff;
  padding: 15px 0;
}
.sec02_subtit{font-size: 16px; font-weight: 400; padding-top: 10px; display: inline-block;}
.sec02-1_txt span {  position: relative; display: inline-block;
}
 .sec02_sub_mb { display: none;}

@media only screen and (max-width: 1199px) {
  .sec02_sub { height: 950px; }
  .sec02-1_imgwrap .sec02_img02 { left: -43%; top: 428px; position:absolute; }
  .sec02-1_imgwrap .sec02_img03 { left: 55px;  top: 469px;  position:absolute;}
}
@media only screen and (max-width: 992px) {
  .sec02_bg-1{height: 475px;}
  .sec02_sub { height: 825px; }
  .sec02-1_txt { margin-top: 10px;  padding: 10px;}
  .sec02-1_imgwrap .sec02_img02 { left: 0; top: 370px; }
  .sec02-1_imgwrap .sec02_img03 { left: -100%; top: 370px;}
  .sec02-1_txt span { right: 0; }
}
@media only screen and (max-width: 767px) {
  .sec02_sub { height: auto; }
  .sec02_bg-1 { display: none; }
  .sec02-1_imgwrap { width: 100%; }
  .sec02-1_imgwrap .sec02_img01 { position: relative; width: 100%;}
  .sec02-1_imgwrap .sec02_img02,.sec02-1_imgwrap .sec02_img03 { top: 0; position: relative; left: 0; width: 50%; float: left; padding-top: 10px; }
  .sec02-1_txtWrap { width: 100%; margin-top: 10px; border: 1px solid #2a5589;}
  .sec02-1_txt { margin: 0; padding: 30px; text-align: left;}

}

/* ///////////// sec02 - 호텔 ///////////// */
.sec02_sub { width: 100%; height: 1100px; position: relative;}
#sec02 > .container { position: relative; }
.sec02_bg {
  border: 1px solid #2a5589;
  height: 535px;
  position: absolute;
  max-width: calc(100% - 100px);
  width: 100%;
  left: 50%;
  top: 82%;
  transform: translate(-50%,-50%);
}
.sec02_imgwrap {  width: 50%; position: relative; }
.sec02_img01 { padding-top: 0%; left:0px; position:absolute; }
.sec02_img02 { left: 19%; top:558px; position:absolute; }
.sec02_img03 { left: 85%; top:500px; position:absolute; }
.sec02_txtWrap {  width: 50%; float: right; position: relative; }
.sec02_txt {
  text-align: right;
  color: #767676;
  width: 100%;
  margin-top: 130px;
  background: #fff;
  padding: 15px 0;
}
.sec02_txt span { right: 45px; position: relative; }
 .sec02_sub_mb { display: none;}

@media only screen and (max-width: 1199px) {
  .sec02_sub { height: 950px; }
  .sec02_img02 { top: 463px; }
  .sec02_img03 { left: 99%; top: 425px;}
}
@media only screen and (max-width: 992px) {
  .sec02_sub { height: 825px; }
  .sec02_txt { margin-top: 50px; }
  .sec02_img02 { left: 0; top: 370px; }
  .sec02_img03 { left: 100%; top: 370px;}
  .sec02_txt span { right: 0; }
}
@media only screen and (max-width: 767px) {
  .sec02_sub { height: auto; }
  .sec02_bg { display: none; }
  .sec02_imgwrap { width: 100%; }
  .sec02_img01 { position: relative; width: 100%;}
  .sec02_img02, .sec02_img03 { top: 0; position: relative; left: 0; width: 50%; float: left; padding-top: 10px; }
  .sec02_txtWrap { width: 100%; margin-top: 10px; border: 1px solid #2a5589;}
  .sec02_txt { margin: 0; padding: 30px; text-align: left;}
  .mb_none {display: none; }
  .sec02_sub_pc { display: none;}
  .sec02_sub_mb { display: block;}
}

/* ///////////// sec03 - 호텔 ///////////// */
#sec03 {}
.sec03_tit { text-align:left;}
.sec03_txt { text-align:left; color:#767676; width: 52%; border: 1px solid #2a5589; height: 400px; padding: 40px 50px; }

.sec03_txt_01  { font-size:18px; padding-bottom: 5px; border-bottom: 1px solid #195d86; color:#195d86; display: inline-block; margin-bottom: 20px; }
.sm_txt { font-size: 14px; }
.sec03_bg { position: relative; clear: both;}
.sec03_imgWrap { overflow: hidden; }
.sec03_img01 { top: 50px; left: 40%; position: absolute; }
.sec03_img02 { right: 0; top:236px; position:absolute; }
.sec03_sub { width: 100%; height: 1100px; position: relative;}
.sec03_bg .row { padding:0;}
.topmargin-xl { margin-top: 100px; }

@media only screen and (max-width: 992px) {
  .sec03_txt { width: 100%; height: 250px; }
  .sec03_img01, .sec03_img02 { position: relative; float: left; width: 50%; top: 0; left: 0; margin-top: 10px; }
  .topmargin-xl { margin-top: 50px; }
}
@media only screen and (max-width: 767px) {
  .sec03_txt { height: auto; }
  .sec03_img01, .sec03_img02 { width: 100%;  }
  .topmargin-xl { margin-top: 30px; }
}

@media only screen and (max-width: 450px) {
  .sec03_txt { padding: 30px; }
  .sec03_txt_02 br { display: none; }
}


/* ///////////// sec04 - SPECIAL  TIP ///////////// */
#sec04 .container { position: relative; top: -300px; }
.sec04_bgWrap { height: 515px; background: url(//cdn.hoteltira.com/img/CH/event/villa_honegg_hotel/sec04_bg.jpg) no-repeat center; background-size: cover; }
.sec04_sub { float: right; }
.sec04 { position: relative; }
.sec04_imgwrap { position: relative; z-index: 1; margin-top: 10px; width: 55%; }
.sec04_img01 { margin-top: 10px; }
.sec04_img02 { margin-top: 10px; display: block; position: relative; right: -12%; }
.sec04_img03 { margin-top: 10px; position: absolute; bottom: 50px; left: 71.5%; }
.sec04_sub02 { position: absolute; right: -78%; bottom: 195px;}
.sec04_txtWrap { border: 1px solid #2a5589; padding: 50px; position: absolute; max-width: calc(100% - 25px); width: 100%; right: 0; top: 40px; height: 500px;}
.sec04_txt { color: #767676; width: 40%; float: right;}
.sec04_txt span { color: #195d86; font-size: 18px; font-weight: 800; }

@media only screen and (max-width: 1199px) {
  .sec04_img03 { left: 84%; }
  .sec04_sub02 { bottom: -10px; }
}
@media only screen and (max-width: 992px) {
  .sec04_bgWrap { height: 300px; }
  #sec04 .container { top: -200px; }
  .sec04_img02 { left:0; top: 100px; }
  .sec04_img03 { left:91%; bottom: -100px; }
  .sec04_sub02 { bottom: -167px; }
}
@media only screen and (max-width: 767px) {
  .sec04_bgWrap { height: 250px; }
  #sec04 .container { top: -150px; }
  .sec04_imgwrap { width: 100%; margin: 0;}
  .sec04_img01 { width: 100%; }
  .sec04_img02 { top: 0; float: left; width: 50%;}
  .sec04_img03 { bottom: 0; position: relative; float: left; left: 0; width: 50%; }
  .sec04_sub02 { position: relative; right: 0; bottom: 0; float: left; margin: 10px 0;}
  .sec04_txtWrap { position: relative; height: auto; top: 0px; overflow: hidden; max-width: 100%; padding: 30px;}
  .sec04_txt { text-align: left; width: 100%; }
}

/* ///////////// sec05 - 얼리버드 프로모션 ///////////// */
#sec05 { position: relative; }
.sec05_bg { border: 1px solid #2a5589; height: 850px; width: calc(100% - 65px); position: absolute; right: 0; }
.sec05_sub01 { position: relative; display: block; padding: 0 20px 50px 0; background: #fff;}
.sec05_sub02 { left: -50px; position: relative; }
.sec05_img01 { position: relative; float: left; }
.sec05_txtWrap { float:right;  margin-right: 45px; width: 40%; }
.sec05_txt01 { font-size: 18px; color: #767676; }
.sec05_txt01 span { font-weight: 700; }
.sec05_txt02 { font-size: 16px; color: #767676; }
.sec05_txt02  span { font-size: 18px; }
.bar01 { width: 100%; height: 1px; background: #ededed; margin: 20px auto; }
.sec05_sub03 { margin-top: 35px; }

@media only screen and (max-width: 1199px) {
  .sec05_sub02 { left: 0; }
}
@media only screen and (max-width: 992px) {
  .sec05_bg { height: 730px; }
  .sec05_img01 { width: 40%; }
  .sec05_txtWrap { margin-right: 0; width: 60%; padding: 0 20px;}
  .sec05_sub03 { margin: 0; }
}
@media only screen and (max-width: 767px) {
  .sec05_bg { width: 100%; height: 95%; }
  .sec05_sub01 { width: 100%; padding: 0 5px 20px 5px; }
  .sec05_sub02 { width: 220px; }
  .sec05_img01 { width: 100%; }
  .sec05_txtWrap { width: 100%; padding: 20px 0; }
  .sec05_txt01, .sec05_txt02 span { font-size: 16px; }
  .sec05_txt01 br { display: none; }
  .sec05_txt02 { font-size: 14px; }
  .bar01 { margin: 30px auto; }
}


/* ///////////// sec06 - 스위스 빌라호네그 할인 예약하러 가기 ///////////// */
#sec06 { background:url(//cdn.hoteltira.com/img/CH/event/villa_honegg_hotel/sec06_bg.jpg) no-repeat center; background-size: cover; }
#sec06 a { display: inline-block; color: #fff; font-size: 25px; background: rgba(15,67,110,0.8); border-radius: 50px; padding: 18px 45px; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); word-break: keep-all;
  -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
#sec06 a:hover { background: rgba(12, 53, 86, 0.8); }
.arrow { position: relative; top: -3px; margin-left: 10px; }

@media only screen and (max-width: 767px) {
  #sec06 a { width: calc(100% - 30px); font-size: 20px; }
  .arrow { width: 10px; top: -2px; }
}