@charset "utf-8";

/*
#section1{ background: url(../images/main01.jpg) center no-repeat; background-size: cover;}
#section2{ background: url(../images/main02.jpg) center no-repeat; background-size: cover;}
#section3{ background: url(../images/main03.jpg) center no-repeat; background-size: cover;}
#section4{ background: url(../images/main04.jpg) center no-repeat; background-size: cover;}
#section5{ background: url(../images/main05.jpg) center no-repeat; background-size: cover;}
*/
#section1{ background: url(../images/main06.jpg) center no-repeat; background-size: cover; position:relative;}
#section1::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);}
/*#section0::after,#section1::after,#section2::after,#section3::after,#section4::after,#section5::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}*/
#section1::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(22,48,34,0.8);}

.main-video{width: 100vw; height: 100vh; object-fit: cover; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0;}

#loading{position: fixed; top: 0; left: 0; background: #163022; width: 100%; height: 100%; z-index: 9999;}
#loading span{display: block; width: 230px; height: 190px; position: absolute; /*top: 43.5%;*/top: 45%; left: 50%; transform: translate(-50%, -50%);}

#section0,
#section1,
#section2,
#section3,
#section4,
#section5{
	background-attachment: fixed;
	text-align: center;
	color: #000;
	/* padding:74px 0 0 0; */
}

.section2-bg{position: relative; height: 430px;}
.section2-bg::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 430px; background: rgba(0,0,0,0.13);}
.section2-bg img{width: 100%; height: 430px; object-fit: cover;}

.sectionText{
  position: absolute;
  top: 50%;
  right: 100px;
  text-align: right;
  transform: translateY(-50%);
  z-index: 1;
  color: #fff;
}
.sectionText p{margin-top: 31px;}
.sectionText h1{ color: #fff; font-size: 22px; letter-spacing: -1px; margin: 50px 0 10px;
-webkit-animation: fadeUp 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: fadeUp 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
/*text-shadow: 5px 5px 5px rgba(0,0,0,0.8);*/
}

.sectionText h2{
  font-size: 34px;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.24));
  font-weight: 400;
}
.sectionText h2 span{
  display: block;
  font-size: 28px;
  font-weight: 400;
}
.motion-text span{
    position: relative;
}

/*메인 텍스트 dot*/
/*
.motion-text span::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 4px; 
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
*/

/* .main-con-area{ color: #fff; font-size: 30px; letter-spacing: -1px;
  -webkit-animation: fadeUp 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
            animation: fadeUp 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
            position: absolute; top: 15%; left: 14%; transform: translate(-50%, -50%); color: #fff; z-index: 1; width: 75%; font-family:'NanumSquare';
  } */

.sectionText h4{
    color: #fff;
    font-size: 28px;
    -webkit-animation: fadeUp 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
    animation: fadeUp 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
    /*text-shadow: 5px 5px 5px rgba(0,0,0,0.8);*/
    font-weight: 200;
}
.fadeUp{
	-webkit-animation: fadeUp 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fadeUp 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.fadeDown{
	-webkit-animation: fadeDown 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fadeDown 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slideLeft{
	-webkit-animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
  }
}
.main-logo{ position: absolute; top:45%; left: 50%; text-align: center; transform: translate(-50%, -50%); z-index: 1;}

/* main scroll down */
.scroll-downs {position: absolute;bottom: 25px;left: 40px;margin: auto;height: 65px;transform: translate(0, -50%);}
.scroll-downs h2{color: #fff; transform: translate(50%, 20%); font-family: 'NanumSquare'; font-weight: 600; font-size: 12px; writing-mode:vertical-lr; rotate: 180deg;}
.mousey {width: 2px;height: 60px;opacity: 0.75;box-sizing: content-box;background: rgba(255,255,255,0.3);}
.scroller {width: 2px;height: 30px;background-color: #fff;animation-name: scroll;animation-duration: 2.2s;animation-timing-function: cubic-bezier(.15,.41,.69,.94);animation-iteration-count: infinite;top:0;position:relative;}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

/* quick menu */
.quick-menu{position: absolute; bottom: 60px; left: 100px; z-index: 10;}
.quick-menu a{text-decoration:underline; color: #e7eef6; font-size: 18px; display: block; margin-bottom: 10px; font-family: "freight-neo-pro"; position:relative;}
/* quick menu motion */
.quick-menu a:hover{text-decoration:none;}
.quick-menu a:last-child{margin-bottom: 0;}
.quick-menu a::before{ content: "";position: absolute;right: 0; bottom: 3px; width: 0; height: 1px;background-color: #fff;transition: .5s all;}
.quick-menu a:hover::before{left: 0;width: 100%;}

.main-box{position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); font-size: 0; z-index: 99; width: 100%;}
.main-box a{color: #fff; font-size: 20px; color: #ced5de; display: inline-block; line-height: 60px; vertical-align: middle; background:var(--main); width: 240px; text-align: left; padding: 0 40px; position: relative; font-weight: 400;}
.main-box a img{position: absolute;top: 50%;right: 40px;transform: translate(0, -50%); transition: all 0.3s;}
.main-box a:hover img{margin-top:-3px; transition:all 0.3s;}
.map-btn{background: rgba(255,255,255,0.1) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}

.weather{color: #fff; display: flex;}
.weather li{margin: 0 12px; position: relative; font-size: 18px; font-weight: 400;}
.weather li::after{content: '';position: absolute;top: 50%;left: -15px;width: 4px;height: 4px;border-radius: 50%;background: #fff;transform: translateY(-50%);}
.weather li:first-child::after{display: none;}
.weather li img{width: 37px; height: 26px;}

.sectionText2{ position: absolute; top:45%; left: 10%; width: 100%; text-align: left; line-height: 36px; opacity: 0; margin-top: calc(10vh - 3%); z-index: 1;}
.sectionText2 p{font-size: 36px; color: #fff; font-family: 'NanumMyeongjo'; font-weight: 200; line-height: 50px;}

.sectionText3{ position: absolute; top:50%; left: 10%; text-align: left; line-height: 36px; color: #fff; margin-top:-170px; opacity: 0}
.sectionText3 h2{ font-size: 25px; padding-bottom: 8px;}
.sectionText3 h1{ font-size: 50px; padding-bottom: 40px; font-weight: 400;}
.sectionText3 p{ font-size: 18px; padding-bottom: 15px;}

.main-con-area{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 1; font-family: 'NanumSquare'; width: 85%;}
.main-con-area .con-tit{font-size: 36px; letter-spacing: 0.5px; text-align: center;}
.main-con-area p{margin: 18px 0 65px; font-size: 16px; line-height: 25px;}
.main-img-area{display: flex;justify-content: center;align-items: center;width: 100%;margin: 0 auto;gap: 48px;}
.main-bg-img{width: 100%;object-fit: cover;filter: brightness(0.8);height: 100%;}
.main-img-area .con-img h3{text-align: center; color: #fff; font-size: 18px; margin-top: 25px;}
.con-img{position: relative;width: 380px;height: 520px;}
.con-img:last-child{margin-right: 0;}
.con-img span{position: absolute; top: 45%; left: 42%; transform: translate(-50%, -50%);}
.con-img span img{width: 130%;}

.text-wrap{position: absolute; top: 50%; left: 10%; transform: translateY(-50%); z-index: 1; line-height: 50px;}


/* section2 */
#section2{
  background: #fbfbf6;
}
#section2 .sec2-text-box{
  position: absolute;
  width: 542px;
  height: 582px;
  background: #ffffff;
  border: 1px solid #ebebeb;
  box-shadow: 5px 5px 8px 0 rgba(0, 0, 0, 0.09);
}


/* text motion */
h1 > span.word {
  display: block;
  overflow: hidden;
  position: relative;
}
h1 > span.word > span {
  float: left;
  font-size: 36px;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.05em;
  transition: 1.2s cubic-bezier(0.19, 1, 0.60, 1);
  transform: translateY(100%);
    z-index: 1;
    position: relative;
    margin-right: 10px;
    font-weight: 200;
}
h1 > span.word > span:last-child{margin-right: 10px;}
h1 > span.word:nth-child(1) > span:nth-child(1) {
  transition-delay: 0.10s;
}
h1 > span.word:nth-child(1) > span:nth-child(2) {
  transition-delay: 0.20s;
}
h1 > span.word:nth-child(1) > span:nth-child(3) {
  transition-delay: 0.30s;
}
h1 > span.word:nth-child(1) > span:nth-child(4) {
  transition-delay: 0.40s;
}
h1 > span.word:nth-child(1) > span:nth-child(5) {
  transition-delay: 0.50s;
}
h1 > span.word:nth-child(1) > span:nth-child(6) {
  transition-delay: 0.60s;
}
h1 > span.word:nth-child(1) > span:nth-child(7) {
  transition-delay: 0.70s;
}
h1 > span.word:nth-child(1) > span:nth-child(8) {
  transition-delay: 0.80s;
}
h1 > span.word:nth-child(1) > span:nth-child(9) {
  transition-delay: 0.90s;
}
h1 > span.word:nth-child(2) > span:nth-child(1) {
  transition-delay: 1s;
}
h1 > span.word:nth-child(2) > span:nth-child(2) {
  transition-delay: 1.10s;
}
h1 > span.word:nth-child(2) > span:nth-child(3) {
  transition-delay: 1.20s;
}
h1 > span.word:nth-child(2) > span:nth-child(4) {
  transition-delay: 1.30s;
}
h1 > span.word:nth-child(2) > span:nth-child(5) {
  transition-delay: 1.40s;
}
h1 > span.word:nth-child(2) > span:nth-child(6) {
  transition-delay: 1.50s;
}
h1 > span.word:nth-child(2) > span:nth-child(7) {
  transition-delay: 1.60s;
}
h1 > span.word:nth-child(2) > span:nth-child(8) {
  transition-delay: 1.70s;
}
h1 > span.word:nth-child(2) > span:nth-child(9) {
  transition-delay: 1.80s;
}
h1.is-visible > span.word > span {
  transform: translateY(0);
}


/** 갤러리
===================================*/
.bx-wrapper {
  position: relative;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  min-width: 320px;
  width: 100%;
  display: block;
}
.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: 30px;
  width: 100%;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 23px;
  height: 23px;
  outline: 0;
  background: url('../images/controls_p_w.png') center center no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background: url('../images/controls_p.png') center center no-repeat;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 23px;
  height: 23px;
  outline: 0;
  background: url('../images/controls_s.png') center center no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background: url('../images/controls_s_w.png') center center no-repeat;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  /*background: #fff;*/
  text-indent: -9999px;
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  outline: 0;
	border-radius: 50%;
	border:1px solid #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #fff;
}
.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;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-controls-direction a {
	position: absolute;
	bottom: 35px;
	outline: 0;
	width: 25px;
	height:25px;
	text-indent: -9999px;
	z-index: 70;
	/*font-size: 25px;*/
	color: #fff;
}
.bx-wrapper .bx-prev {
	left:185px;
	color: #b7b7b7;
	background:url(../images/btn_cL.png) no-repeat;
}
.bx-wrapper .bx-next {
	right:225px;
	color: #b7b7b7;
	background:url(../images/btn_cR.png) no-repeat;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

/*.main_popup*/
.main_popup a{ color:#fff; display: inline-block;}
.pull-right{float:right;}
.popup_bottom{
	overflow:hidden;
    background-color: #6d6d6d;
    color: #fff;
	font-size:14px;
    padding: 6px 10px;
	margin-top:-5px;
}

/* 240308 main slider */
.swiper, .swiper-container { overflow: hidden; }
.mainslider .swiper-slide{margin-top: 0;}
.swiper-slide { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.mainslider, .mainslider .swiper-slide {position: relative;width: 100%;height: 100%;overflow: hidden; z-index: 0;}
.mainslider:after { position: absolute; top: 0; left: 0; display: block; content: " "; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.15)); z-index: 1; }
.mainslider .swiper-slide .slide-img { display: block; width: 100%; height: 100%; background-size: cover; background-position: center center; overflow: hidden; }
.mainslider .swiper-slide .slide-img {
/*
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 3s;
    transition: -webkit-transform 3s;
    transition: transform 3s; transition: transform 3s,
    -webkit-transform 3s;
*/
     animation: zoomout 4s .4s both;
    -webkit-animation: zoomout 4s .4s both;
}
.mainslider .swiper-slide.swiper-slide-active .slide-img {
/*
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    -webkit-transition: -webkit-transform 3s;
    transition: -webkit-transform 3s;
    transition: transform 3s; transition: transform 3s,
    -webkit-transform 3s;
*/
    animation: zoomin 4s .4s both;
    -webkit-animation: zoomin 4s .4s both;
}
.slide-text { position: absolute; width: 100%; display: block; text-align: center;  top: 130px; z-index: 1; animation: slipup 1s .2s both; }

@keyframes zoomin {
	0% { transform: scale(1, 1); }
	100% { transform: scale(1.04, 1.04); }
}
@keyframes zoomout {
	0% { transform: scale(1.04, 1.04); }
	100% { transform: scale(1, 1); }
}
@keyframes slipup {
	0% { opacity: 0; transform: translateY(50px); }
	100% { opacity: 1; transform: translateY(0); }	
}	
@keyframes slipdown {
	0% { opacity: 0; transform: translateY(-10px); }
	100% { opacity: 1; transform: translateY(0); }	
}	
@keyframes slipright {
	0% { opacity: 0; transform: translateX(50px); }
	100% { opacity: 1; transform: translateX(0); }	
}

/* 240321 main popup */
.pop-wrap{width: 343px; margin: 0 auto; position: fixed; top: 50%; left: 50%; z-index: 999; background:transparent; transform: translate(-50%, -50%);}
.pop-box{width: 100%;}
.pop-box a{display: block; font-size: 0; margin-bottom: 8px;}
.pop-box a img{width: 100%;}

.pop-bottom{width: 100%; background: transparent; display: flex; justify-content: space-between;}
.pop-bottom a{color: #ced5de;}

.overlay{position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 998;}

/* text motion */
/*
.motion-text span{
  position: relative;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}*/

/* 외부링크추가 */
.quick-link{
  position: absolute;
  bottom: 24px;
  right: 100px;
  z-index: 99;
  display: flex;
  gap:30px;
  align-items: center;
}

/* 251111 배너 추가 */
.mini-banner{
    position: absolute;
    margin-top: 48px;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    right: 0;
}
.mini-banner li{
    max-width: 100%;
    background: rgba(22, 48, 34, 0.7);
    min-width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mini-banner li a{
  color: #ced5de;
  display: block;
  width: 100%;
  height: 100%;
  padding: 13px 42px 13px 17px;
  position: relative;
  font-weight: 600;
}
.mini-banner li a::before{
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 16px;
  width: 20px;
  height: 20px;
  background: url('/images/arrow-bn.svg');
}