@charset "utf-8";

/**/
section{ width: 100%; height: 100%; position: relative; }
section.section01{ overflow: hidden; height: 95vh; position: relative;}
.black{color: #000 !important;}
.white{color: #fff;}
.wp100{width: 100%;}

/*main popup*/
.mainPopBnWrap{ width: 100%; text-align: center; z-index: 999; margin-top: 80px; position: relative;}
.mainPopBnWrap ul{ display: table; margin: auto;  font-size: 16px; border-collapse:separate;border-spacing:2px;}
.mainPopBnWrap .mainPop{ display: table-cell; width: 184px; height:184px; padding-right: 15px; vertical-align: top;}
.mainPopBnWrap .mainPop:last-child{padding-right: 0;}
.mainPopBnWrap .mainPop a img{ display: block;}
.mainPopBnWrap .mainPopR{ display: table-cell; width: 184px; height:184px; background-color:#3f2717; color: #fff; vertical-align: middle; cursor: pointer;}
.mainPopBnWrap .mainPopR p{ padding-bottom: 20px;}
.popup_bottom{overflow:hidden;background-color: #000;color: #fff;font-size:14px;}
.popup_bottom a{ color: #fff; font-size: 15px; line-height: 25px; text-align: center; padding: 3px 10px; display: block;}

/* main text */
.main-text-box{ position: absolute; left: 50%; top:35% ; z-index: 10; text-align: center; transform: translateX(-50%);}
.main-text-box h2{color: #fff; font-size: 20px; font-weight: 300;}
.main-text-box h3{ color: #fff; font-size: 30px; line-height: 40px; letter-spacing: 1.25px; font-weight: 400;}
.main-text-box h3 span{color: #4e6005;}


/* .main-reser-btn:before{
  position: absolute;
  content: '';
  display: inline-block;
  bottom: -180px;
  right: 0;
  width: 20px;
  height: 80%;
  background-color: #fff;
  animation: shiny-btn1 4s ease-in-out infinite;
}

@-webkit-keyframes shiny-btn1 {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
} */

/*section02*/
section.section02{ height: 100%; position: relative; width: 100%; display: flex; /*height: 885px;*/}
.main-area01{position: relative; width: 30%;}
.main-area01 .bg-img{ height: 100%; left: 0; position: absolute; right: 0; top:0; object-fit: cover; width: 100%; z-index: 2;}
.main-area01 .text-section02{ position:sticky; top:0; left:0; z-index:5; color: #fff; padding: 335px 160px 200px;}
.main-area01 .text-section02 h2{ font-size: 60px; letter-spacing: -1.8px; text-align: left; font-family: "Times New Roman", serif, 'Lora', serif; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.07); }
.main-area01 .text-section02 h3{ font-size: 20px; letter-spacing: 0.6px; text-align: left; padding-top:6px; }
.motion-awr{ line-height: 2.5; letter-spacing: 0.48px; margin-top:36px; margin-left: 116px; display: inline-block; position: relative;}
.motion-awr span{ letter-spacing: 0.48px; transition: 0.3s all ease;}
.motion-awr:hover span{ letter-spacing: 2px;}
.motion-awr svg{ position: absolute; right: -60px; width: 102px; height: 49px; bottom: -20px;}

.arw-st0{fill:none;}
.arw-st1{fill:#FFFFFF;}
.arw-st2{fill:none;stroke:#FFFFFF;}
.arw-st3{fill:#FFFFFF;}

.main-area02{position: relative; width: 70%;}
.main-box{display: flex; height: 332px;}
.main-box-con{width: calc(100%/3); position: relative;}
.main-con-text h2{font-size: 38px; color: #fff; text-shadow: 0 3px 6px rgb(0 0 0 / 16%);}
.main-con-text h3{font-size: 18px; color: #fff; font-weight: 300; text-shadow: 0 3px 6px rgb(0 0 0 / 16%); margin: 5px 0 20px 0;}
.main-hole-btn{background: #2a2a2a; color: #fff; padding: 7px 30px; font-weight: 300; position: relative;}
.main-hole-btn::before{ transform: scaleX(0);transform-origin: bottom right;}
.main-hole-btn:hover::before {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.main-hole-btn::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0 0 0 0;
  background: rgba(205,205,205,0.3);
  z-index: 1;
  transition: transform .3s ease;
}
@media (orientation: landscape) {
  body {
    grid-auto-flow: column;
  }
}
/* .main-con-text a:hover{background: rgba(0,0,0,0.3); transition: all 0.3s;} */

.main-con-text2{position: absolute; top: 30%; left: 50%; margin-left: -110px; color: #fff; text-align: center; font-weight: 300;}
.main-con-text2 h2{font-size: 25px; line-height: 45px;}
.main-con-text2 h3{font-size: 18px;}

.main-box-con:hover .main-con-btn{border:none;}
.main-con-btn{border: 1px solid #fff; width: 36px; height: 36px; border-radius: 50%; position: relative; margin: 30px auto;}
.main-con-btn img{ position: absolute; left: 40%; top: 27%;}
.main-con-btn::before,
.main-con-btn::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;}

.spin::before,
.spin::after {
    top: 0;
    left: 0;
}

.spin::before {border: 1px solid transparent;}

.main-box-con:hover .spin::before{
    border-top-color: #fff;
    border-right-color: #fff;
    border-bottom-color: #fff;
    transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.10s, border-bottom-color 0.15s linear 0.20s;
}

.spin::after {border: 0 solid transparent;}

.main-box-con:hover .spin::after{
    border-top: 1px solid #fff;
    border-left-width: 1px;
    border-right-width: 1px;
    transform: rotate(270deg);
    transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

.circle {border-radius: 100%;box-shadow: none;}

.circle::before,
.circle::after {border-radius: 100%;}

.main-con01{position: relative;}
.main-con-text{position: absolute; top: 40%; left: 50%; margin-left: -120px; text-align: center;}
.main-con01 img{width: 100%; height: 541px;}
.main-con02{height: 387px; padding: 40px 0 35px; border-bottom: 1px solid #e1e1e1; position: relative;}
.main-con02 img{margin: 0 auto;}
.customer{width: 100%; text-align: center;}
.customer h2{font-size: 25px; font-weight: 200; text-transform: uppercase; margin: 10px 0 20px;}
.customer h3{font-size: 20px; font-weight: 300; color: #434343; margin-top: 10px;}
.customer h3 span{font-weight: 500; margin-left: 10px; margin-right: 20px;}
.customer h3 a{display: inline-block; width: auto; height: 40px; line-height: 40px;}
.customer h3 a img{width: 120px; padding-top:13px; margin-left:10px}
.customer h4{font-size: 20px; font-weight: 400; margin: 20px 0;}
.customer p{font-size: 18px; font-weight: 400; margin-top: 10px;}
.customer div{display: block; background:#21322d; border-radius: 15px; width: 240px; color: #fff; text-align: center; margin: 30px auto; padding: 8px; cursor: pointer;}
.main-con03{background: url('/images/main/main-con03.png') center no-repeat #21322D; background-size: 100% 100%;}
.main-con04{background: url('/images/main/main-con04.png') center no-repeat #CAA07A; background-size: 100% 100%;}
.main-con05{text-align: center; position: absolute; right: 5px; top: -5px;}
.main-con05 a{width: 49%; display: inline-block; padding-top: 60px; vertical-align: top;}
.main-con05 a img{margin: 0 auto;}
.main-con05 a h2{margin-top: 10px;}
.main-con05::after {background: url(/images/main/main-con05-bg.svg) center center no-repeat;  content: "";display: block;height: 227px;width: 302px;position: absolute;top: 20%;left: 50%;margin-left: -150px; z-index: -1;}

/*section03*/
.main-area03{ height: auto; position: relative; width: 100%;}
.main-area03 .bg-img03{ background: url(/images/bg_main_section03.jpg) center center no-repeat; background-attachment: fixed; background-size: cover; width: 100%; height: 500px; position: relative;}
.main-box-area{ background-color: #fff; overflow: hidden; width: 100%; position: relative;}
.main-box-area li{ width: 33.33%; height: 225px; position: relative; text-align: center; border:1px solid #bbb; border-right:0; display: block; float: left;}
.main-box-area li:first-child{ border-left:0;}
.main-box-area li h2{ font-size: 30px; letter-spacing: 1.5px; position: absolute; top:47px; left: 0; text-align: center; width: 100%;}
.main-box-area li h3{ font-size: 15px; letter-spacing: -0.45px; position: absolute; bottom:38px; left: 0; text-align: center; line-height: 2em; color: #a8a8a8; width: 100%; }
.main-box-area li .btn-go{ width: 43px; height: 43px; text-align: center; padding:9px 0; font-size: 20px; background-color: #fff; color: #000; transition: 0.3s all ease-in-out; border:1px solid #bbb; position: absolute; right: -1px; bottom: -1px;}

.main-box-area li:hover .btn-go{ background-color: #000; color: #fff;}

/*main slider test*/
#main_slides {
  position:relative;
  width: 1px;
  height: 1px;
  left: -9999px;
}

#slideshow {
  position:relative;
  overflow: hidden;
  width: 100%;
  height: 980px;
}

#slideshow .slide, #slideshow span, #slideshow .static-content {
  display: block;
  position: absolute;
   width: 100%;
  height: 980px;
}

#slideshow .slide span {
  background-size: cover;
  background-position: center;
}

#slideshow span.animate {
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    animation-timing-function: linear;
}
#slideshow span.animate.in {
    -webkit-animation-name: in;
    -ms-animation-name: in;
    animation-name: in;
}

/*main-slider*/
.mSlick{position:absolute; width: 100%;height: 100%; top: 0; left: 0; z-index: -1;}
.mSlick .slick_con{position: relative; z-index: 1;}
.mCC_img{height: 100vh;}
.mCC_box{height: 100%;position: relative;z-index: 1;}
.mCC_box img{width: 100%;transition: all 5s cubic-bezier(0.7, 0, 0.3, 1);transform: scale(1.2); height: 100%; object-fit: cover;}
.mCC_box.slick-active img{transform: scale(1);}
/*.custom_paging{position: absolute;bottom: 90px;left: 53%;transform: translateX(-50%);color: #fff;font-size: 16px;font-weight: 300;z-index: 999;}*/
.custom_paging{
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    z-index: 999;
}
.slick-dots{position: absolute;left: 50%;transform: translateX(-50%);bottom: 95px;/*width: 150px;*/z-index: 999;}
.slick-dots li.slick-active>button{background: #000;}
.slick-dots li{float: left;}
.slick-dots li>button{background: #fff;display: inline-block;width: 45px;height: 2px;font-size: 0;}

/*main-facil*/
.main-text-box02{ text-align: center; margin:63px 0 110px;}
.main-text-box02 h1{  text-transform: uppercase; letter-spacing: -1.2px; color: #1e1e1e; font-size: 45px; font-family: "Times New Roman", serif, 'Lora', serif;}
.main-text-box02 p{ letter-spacing: 0.75px; color: #808080; font-size: 15px; line-height: 1.6em; padding-top: 26px; font-weight: 300;}

.main-facil-box{ width: 100%; position: relative; display: flex; justify-content: space-around; align-items: center; align-content: center; margin-bottom: 133px;}
.main-facil-box a{ max-width: 280px;  border-radius: 5px; width: 100%; text-align: center; padding: 85px 0 23px; position: relative; z-index: 1; background-color: #fff;}
.main-facil-box a::before{ content: ''; display: block; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16); width: 100%; transition: 0.3s box-shadow ease; max-width: 280px;  border-radius: 5px; width: 100%; height: 310px; position: absolute; top:0; left: 0; right:0; bottom:0; z-index: 0;}
.main-facil-box a:hover::before{ box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.56);}
.main-facil-box a p{ width: 100%; height: 63px; display: flex; align-items: center; align-content: center; text-align: center; justify-content: center; transition: 0.3s all ease;}
.main-facil-box a h1{ text-transform: uppercase; letter-spacing: 1px; color: #000; font-size: 20px; font-family: "Times New Roman", serif, 'Lora', serif; padding-top:85px; transition: 0.3s all ease;}
.main-facil-box a h3{ text-transform: uppercase; letter-spacing: -0.75px; color: #bcbcbc; font-size: 15px; padding-top:10px; transition: 0.3s all ease;}
.main-facil-box a:hover p{ transform: translateY(10px); }
.main-facil-box a:hover h1{ transform: translateY(-5px);}
.main-facil-box a:hover h3{ transform: translateY(-5px);}

/*.st1{fill:#000;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;}

.main-facil-box a h1:hover .line {
     stroke-dasharray: 300;
     stroke-dashoffset: 0;
     animation: dash 2s linear 0.2s both;
}
@keyframes dash {
   0% { stroke-dashoffset: 400; }
   100% { stroke-dashoffset: 0; }
 }*/
.main-notice{ background-color: #f9f9f9; padding:80px 114px;}
footer.bg-gray{ background-color: #f9f9f9; padding:52px 0;}
.main-text-box03{ text-align: left; margin-bottom: 43px;}
.main-text-box03 h3{ font-size: 15px; line-height: 2em; letter-spacing: 1.05px; color: #000; padding-bottom: 10px;}
.main-text-box03 h1{ font-size: 30px; line-height: 1.33em; color: #000;}

.notice-box-wrap{ width: 100%; overflow: hidden; display: flex; justify-content: space-between;}
.notice-box{ float: left; width: 32%; max-width: 542px; border:1px solid #8e8e8e; padding: 20px 24px; margin-left: 1%; position: relative;}
.notice-box:first-child{ margin-left: 0;}
.notice-box h3{ letter-spacing: 1.12px; color: #000; padding-bottom: 23px;}
.notice-box h2{ letter-spacing: 2.1px; font-size: 30px; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-bottom: 45px; cursor: pointer;}
.notice-box h4{ letter-spacing: 1.12px;}
.notice-box a{ position: absolute; right: 20px; bottom:18px; width: 63px; line-height: 26px; border-radius: 120px; text-align: center; display: block; font-size: 13px; background-color: #fff; border:1px solid #000; color: #000; transition: 0.3s all ease;}
.notice-box a:hover{ background-color: #000; border:1px solid #000; color: #fff;}

/** 갤러리
===================================*/
.bx-wrapper {
  position: relative;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  margin-bottom: 0 !important;
}
.bx-wrapper img {
  min-width: 320px;
  width: 100%;
  display: block;
  min-height: 596px;
  height: 596px;
  overflow: hidden;
  object-fit: cover;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: 10px;
  width: 100%;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  padding-top: 20px;
	z-index: 50;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #e1e1e1;
  text-indent: -9999px;
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  outline: 0;
	border-radius: 50%;
}
.bx-wrapper .bx-pager.bx-default-pager a.active{
  background: #e3ac32;
	width:30px;
	border-radius: 20px;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
.bx-wrapper .slider2 li{position: relative;}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-controls-direction{
    position: absolute;
	bottom: 0;
	outline: 0;
	width: 56px;
	height:56px;
	text-indent: -9999px;
	z-index: 70;
}
.bx-wrapper .bx-controls-direction a {
	position: absolute;
    top: 0;
    margin-top: 0;
    width: 56px;
    height: 56px;
}
.bx-wrapper .bx-prev {
	left:0;
	background:url(/images/main/controls_prev.svg) no-repeat;
	background-size: 56px 56px;
}
.bx-wrapper .bx-next {
	left:56px;
	background:url(/images/main/controls_next.svg) no-repeat;
	background-size: 56px 56px;
}
.bx-wrapper .bx-controls-direction a.disabled { display: none; }
.bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus{background-position: 0 0;}

/* 230829 수정 */
.main-box2{position: relative;}
.more-view{position: absolute; bottom: 20px; z-index: 999; background: #2a2a2a; padding: 10px 20px; right: 25px; color: #fff; font-size: 15px; text-align: center;}

.main-reser-wrap button{ border: 0; width: 164px; line-height: 60px; text-align: center; background-color: rgba(43, 175, 230, 0.86); font-size: 20px; color: #f8f8f8;}

.main-calendar-box{ width: 100%; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 0; transition: 0.3s ease-in-out all; padding: 20px 30px; font-weight: 500; z-index: 10; opacity: 0; visibility: hidden; display: flex; justify-content: center;}
.main-calendar-box h2{text-align: center; font-size: 20px; margin-bottom: 10px; font-weight: 400;}
.main-calendar-box.show{ opacity: 1; visibility: visible;}

.main-table {width: 100%; background-color: #fff; border-collapse: collapse;border-radius: 20px; border-style: hidden; box-shadow: 0 0 0 1px #707070; color: #434343; font-size: 18px; font-weight: 300;}
.main-table thead th:first-child{border-radius: 20px 0 0 0;}
.main-table thead th:last-child{border-radius: 0 20px 0 0;}
.main-table thead .top{border-radius: 20px 20px 0 0 !important;}
.main-table thead th{background: #21322d; color: #fff; padding: 5px 10px; text-align: center; border: 1px solid #BEBEBE; vertical-align: middle; font-size: 15px;}
.main-table tbody th{background: #F5F5F5; border: 1px solid #DCDCDC; vertical-align: middle; padding: 15px; white-space: pre-line;}
.main-table tbody tr:last-child th{border-radius: 0 0 0 20px;}
.main-table tbody td{border: 1px solid #DCDCDC; padding: 5px 10px; text-align: center; vertical-align: middle; white-space: pre-line; font-size: 15px;}
.main-table tbody tr img {display: block; margin: 0 auto; padding-bottom: 5px;}

.pop-close{display: inline-block; position: absolute; right: 10px; top: 10px; cursor: pointer;}

/* 230901 메인 배너 추가 */
.main-banner{height: 110px; width: 100%; overflow: hidden;}
.bn-slide-img{height: 100%; position: relative; z-index: 1;}
/*
.bn-slide-img:first-child{width: 150%;}
.bn-slide-img .pop-slide-box img:first-child{width: 150%;}
*/
.pop-slide-box img{width: 100%; object-fit: cover; height: 110px; position: relative;}
.banner-arrow{width: 100%;}
/*
.prevArrow{
    width: 43px;
    height: 43px;
    display: block !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url(/images/banner-prev.svg)no-repeat;
    z-index: 99;
    cursor: pointer;
}
.nextArrow{
    width: 43px;
    height: 43px;
    display: block !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: url(/images/banner-next.svg)no-repeat;
    z-index: 99;
    cursor: pointer;
}
*/

.slick-prev.slick-arrow{display: block !important;position: absolute;top: 50%;left: 0;transform: translateY(-50%); width: 43px; height: 43px;}
.slick-next.slick-arrow{display: block !important;position: absolute;top: 50%;right: 0;transform: translateY(-50%); width: 43px; height: 43px;}