@charset "UTF-8";

/* header */
.fp-viewing-sec2:not(.nav_on) .header_logo svg,
.fp-viewing-sec2:not(.nav_on) .header_utiil svg {fill: #3a332c;}
.fp-viewing-sec2:not(.nav_on) .gnb_link {color: #3a332c;}

.fp-auto-height.fp-section, 
.fp-auto-height .fp-slide, 
.fp-auto-height .fp-tableCell {height: auto !important;}
.fp-tooltip {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

#fp-nav {position: fixed; z-index: 100; top: 50%; right: 5.21%; -webkit-transition-property: right, visibility, opacity; transition-property: right, visibility, opacity; -webkit-transition-duration: .3s; transition-duration: .3s; -webkit-transition-timing-function: cubic-bezier(.18,.52,.43,.99); transition-timing-function: cubic-bezier(.18,.52,.43,.99);}

@media (max-width: 992px) {
	#fp-nav {right: -5%; visibility: hidden; opacity: 0;}
}

#fp-nav a {display: block; width: 20px; height: 20px;}
#fp-nav li:last-child {display: none;}
#fp-nav li + li {margin-top: 13px;}
#fp-nav svg { display: block; width: 20px; height: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0.4; -webkit-transition-property: transform, opacity; transition-property: transform, opacity; -webkit-transition-duration: .4s; transition-duration: .4s; -webkit-transition-timing-function: cubic-bezier(.18,.52,.43,.99); transition-timing-function: cubic-bezier(.18,.52,.43,.99);}
#fp-nav path {-webkit-transition: fill 0.3s ease-in-out;transition: fill 0.3s ease-in-out;}
#fp-nav .cls-1 {fill: transparent;}
#fp-nav .cls-2 {fill: #3a332c;}
.dark #fp-nav .cls-2 {fill: #fff;}
#fp-nav .active svg,
#fp-nav .on svg,
#fp-nav a:hover svg {opacity: 1;}
#fp-nav .active svg,
#fp-nav .on svg {-webkit-transform: rotate(0);transform: rotate(0);}
#fp-nav .active .cls-1,
#fp-nav .on .cls-1,
#fp-nav a:hover .cls-1 {fill: #3a332c;}
.dark #fp-nav .active .cls-1,
.dark #fp-nav .on .cls-1,
.dark #fp-nav a:hover .cls-1 {fill: #fff;}

/* content */
body:not(.mobile) .sec1 .section_inner,
body:not(.mobile) .sec1 .img_warp {opacity: 0;} /* 첫로드시 튀는거 방지 */
.section {background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; overflow: hidden;}
.section .img_warp {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden;}
.section .img {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.section .img.obj {z-index: 10;} 
.sec1 {background-image: url(../../images/img/main_sec1_bg.jpg);
background-image: image-set(url(../../images/img/main_sec1_bg.webp) type("image/webp"), url(../../images/img/main_sec1_bg.jpg) type("image/jpeg"));}
.sec1 .img1 {background-image: url(../../images/img/main_sec1_img1.png);
background-image: image-set(url(../../images/img/main_sec1_img1.webp) type("image/webp"), url(../../images/img/main_sec1_img1.png) type("image/png"));}
.sec1 .img2 {background-image: url(../../images/img/main_sec1_img2.png);
background-image: image-set(url(../../images/img/main_sec1_img2.webp) type("image/webp"), url(../../images/img/main_sec1_img2.png) type("image/png"));}
.sec1 .obj {background-image: url(../../images/img/main_sec1_obj.png);
background-image: image-set(url(../../images/img/main_sec1_obj.webp) type("image/webp"), url(../../images/img/main_sec1_obj.png) type("image/png"));}
.on .img1,
.active .img1,
.fp-completely .img1 {-webkit-animation-name: fadeUpRight;animation-name: fadeUpRight;}
.on .img2,
.active .img2,
.fp-completely .img2 {-webkit-animation-name: fadeLeft;animation-name: fadeLeft;}
.on .obj,
.active .obj,
.fp-completely .obj {-webkit-animation-name: fadeIn;animation-name: fadeIn;}

@media (max-width: 992px) {
	.sec1 {background-image: url(../../images/img/main_sec1_bg_m.jpg);
background-image: image-set(url(../../images/img/main_sec1_bg_m.webp) type("image/webp"), url(../../images/img/main_sec1_bg_m.jpg) type("image/jpeg"));}
	.sec1 .img1 {background-image: url(../../images/img/main_sec1_img1_m.png);
background-image: image-set(url(../../images/img/main_sec1_img1_m.webp) type("image/webp"), url(../../images/img/main_sec1_img1_m.png) type("image/png"));}
	.sec1 .img2 {background-image: url(../../images/img/main_sec1_img2_m.png);
background-image: image-set(url(../../images/img/main_sec1_img2_m.webp) type("image/webp"), url(../../images/img/main_sec1_img2_m.png) type("image/png"));}
	.sec1 .obj {background-image: url(../../images/img/main_sec1_obj_m.png);
background-image: image-set(url(../../images/img/main_sec1_obj_m.webp) type("image/webp"), url(../../images/img/main_sec1_obj_m.png) type("image/png")); z-index: 0;}
	.sec1.active .img1,
	.sec1.fp-completely .img1 {-webkit-animation-name: fadeLeft;animation-name: fadeLeft;}
	.sec1.active .img2,
	.sec1.fp-completely .img2 {-webkit-animation-name: fadeUp;animation-name: fadeUp;}
}

.sec2 {background: #f9f3e2; overflow: hidden;}
.sec2 .img1 {background-image: url(../../images/img/main_sec2_img1.png);
background-image: image-set(url(../../images/img/main_sec2_img1.webp) type("image/webp"), url(../../images/img/main_sec2_img1.png) type("image/png"));}
.sec2 .img2 {background-image: url(../../images/img/main_sec2_img2.png);
background-image: image-set(url(../../images/img/main_sec2_img2.webp) type("image/webp"), url(../../images/img/main_sec2_img2.png) type("image/png"));}
.sec2 .obj {background-image: url(../../images/img/main_sec2_obj.png);
background-image: image-set(url(../../images/img/main_sec2_obj.webp) type("image/webp"), url(../../images/img/main_sec2_obj.png) type("image/png"));}

@media (max-width: 992px) {
	.sec2 .img1 {background-image: url(../../images/img/main_sec2_img1_m.png);
background-image: image-set(url(../../images/img/main_sec2_img1_m.webp) type("image/webp"), url(../../images/img/main_sec2_img1_m.png) type("image/png"));}
	.sec2 .img2 {background-image: url(../../images/img/main_sec2_img2_m.png);
background-image: image-set(url(../../images/img/main_sec2_img2_m.webp) type("image/webp"), url(../../images/img/main_sec2_img2_m.png) type("image/png")); z-index: 15;}
	.sec2 .obj {background-image: url(../../images/img/main_sec2_obj_m.png);
background-image: image-set(url(../../images/img/main_sec2_obj_m.webp) type("image/webp"), url(../../images/img/main_sec2_obj_m.png) type("image/png"));}
	.sec2.active .img1,
	.sec2.fp-completely .img1 {-webkit-animation-name: fadeUp;animation-name: fadeUp;}
	.sec2.active .img2,
	.sec2.fp-completely .img2 {-webkit-animation-name: fadeDowon;animation-name: fadeDowon;}
}

.sec3 {background: #524a3f;}
.sec3 .img1 {background-image: url(../../images/img/main_sec3_img1.jpg);
background-image: image-set(url(../../images/img/main_sec3_img1.webp) type("image/webp"), url(../../images/img/main_sec3_img1.jpg) type("image/jpeg"));}
.sec3 .img2 {background-image: url(../../images/img/main_sec3_img2.png);
background-image: image-set(url(../../images/img/main_sec3_img2.webp) type("image/webp"), url(../../images/img/main_sec3_img2.png) type("image/png")); z-index: 15;}
.sec3 .obj {background-image: url(../../images/img/main_sec3_obj.png);
background-image: image-set(url(../../images/img/main_sec3_obj.webp) type("image/webp"), url(../../images/img/main_sec3_obj.png) type("image/png")); background-position: center 0; height: 121.9%;}
.sec3.on .img1,
.sec3.active .img1,
.sec3.fp-completely .img1 {-webkit-animation-name: zoomOut;animation-name: zoomOut;}
.sec3.on .img2,
.sec3.active .img2,
.sec3.fp-completely .img2 {-webkit-animation-name: fadeUpRight;animation-name: fadeUpRight;}

.secFt {background-image: url(../../images/img/main_secFt_bg.jpg);
background-image: image-set(url(../../images/img/main_secFt_bg.webp) type("image/webp"), url(../../images/img/main_secFt_bg.jpg) type("image/jpeg")); position: relative; z-index: 20;}
.secFt #footer {background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,6,15,0.45)), to(rgba(0,6,15,0.12)));background: linear-gradient(0deg, rgba(0,6,15,0.45) 0%, rgba(0,6,15,0.12) 100%);}

@media (max-width: 992px) {
	.sec3 .img1 {background-image: url(../../images/img/main_sec3_img1_m.jpg);
background-image: image-set(url(../../images/img/main_sec3_img1_m.webp) type("image/webp"), url(../../images/img/main_sec3_img1_m.jpg) type("image/jpeg"));}
	.sec3 .img2 {background-image: url(../../images/img/main_sec3_img2_m.png);
background-image: image-set(url(../../images/img/main_sec3_img2_m.webp) type("image/webp"), url(../../images/img/main_sec3_img2_m.png) type("image/png"));}
	.sec3 .obj {background-image: url(../../images/img/main_sec3_obj_m.png);
background-image: image-set(url(../../images/img/main_sec3_obj_m.webp) type("image/webp"), url(../../images/img/main_sec3_obj_m.png) type("image/png"));}
}


@-webkit-keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}

@keyframes fadeIn {
	from {opacity: 0;}
	to {opacity: 1;}
}

@-webkit-keyframes zoomOut {
	from {-webkit-transform: scale(1.15); transform: scale(1.15);}
	to {-webkit-transform: scale(1); transform: scale(1);}
}

@keyframes zoomOut {
	from {-webkit-transform: scale(1.15);transform: scale(1.15);}
	to {-webkit-transform: scale(1);transform: scale(1);}
}

@-webkit-keyframes fadeUp {
	from {-webkit-transform: translate(0, 5%); transform: translate(0, 5%); opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;}
}

@keyframes fadeUp {
	from {-webkit-transform: translate(0, 5%); transform: translate(0, 5%); opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;}
}

@-webkit-keyframes fadeDowon {
	from {-webkit-transform: translate(0, -5%); transform: translate(0, -5%); opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;}
}

@keyframes fadeDowon {
	from {-webkit-transform: translate(0, -5%); transform: translate(0, -5%); opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;}
}

@-webkit-keyframes fadeUpRight {
	from {-webkit-transform: translate(-4%, 0); transform: translate(-4%, 0); background-position: 0 20%; opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0);	background-position: center center; opacity: 1;}
}

@keyframes fadeUpRight {
	from {-webkit-transform: translate(-4%, 0); transform: translate(-4%, 0); background-position: 0 20%; opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0); background-position: center center; opacity: 1;}
}

@-webkit-keyframes fadeLeft {
	from {-webkit-transform: translate(4%, 0); transform: translate(4%, 0);opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;}
}

@keyframes fadeLeft {
	from {-webkit-transform: translate(4%, 0); transform: translate(4%, 0);opacity: 0;}
	to {-webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;}
}

/* ie only (텍스트 튀는 문제 방지) */
.ie .section .content {opacity: 0; overflow: hidden; transition: opacity 1s ease;}
.ie .fp-completely .content,
.ie .active .content,
.ie .on .content {opacity: 1;}

.section_inner {height: 100%; min-height: 100vh; padding-top: 78px; position: relative; z-index: 50;}
.sec1, .sec3 {color: #fff;}
.sec1 .content {margin-left: 2.7%; -webkit-transform: translate(0, -35%); transform: translate(0, -35%);}
.sec2 .content {margin-right: 9.12%; text-align: right; -webkit-transform: translate(0, 60%); transform: translate(0, 60%);}
.sec3 .content {text-align: right; -webkit-transform: translate(0, 17%); transform: translate(0, 17%);}
.section .tit {font-size: 140px; line-height: 1; margin-bottom: .215em;}
.sec1 .tit,
.sec3 .tit {font-family: 'Cormorant Garamond', serif; letter-spacing: -0.075em;}
.sec2 .tit {font-family: 'League Spartan', sans-serif; font-weight: 100; letter-spacing: -0.025em; margin-right: -.05em; color: #544944;}
.sec3 .tit {font-weight: 300; font-style: italic;}
.sec1 .lines {padding-right: 1rem;}
.sec3 .lines {padding-right: 2.5rem;}
.section .txt {font-size: 24px; font-weight: 300; line-height: 1.416; margin-bottom: .75em;}

@media (max-width: 992px) {
	.section_inner {padding-top: 62px;}
	.section .content {margin: 0 2%;}
	.sec2 .content {-webkit-transform: translate(0, 108%);transform: translate(0, 108%);}
	.sec3 .content {text-align: left; -webkit-transform: translate(0, -85%); transform: translate(0, -85%);}
	.section .tit {font-size: 13.88vw; margin-bottom: .193em;}
	.section .txt {font-size: 3.88vw; line-height: 1.547;} 
}

@media (max-width: 576px) {
	.section_inner {padding-top: 43px;}
	.section .content {margin: 0;}
}

@media (max-width: 360px) {
	.section .tit {font-size: 50px;}
	.section .txt {font-size: 14px;} 
}

.section .link {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 114px; height: 32px; position: relative; overflow: hidden;}
.section .link .arrow {display: block; width: 100px; height: 1px; background: #fff; position:relative; z-index: 1;}
.active .link .arrow,
.fp-completely .link .arrow,
.on .link .arrow {-webkit-animation-name: arrowAni;animation-name: arrowAni;}
.section .link .arrow::after {content: ""; display: block; border: solid #fff; border-width: 0 1px 1px 0; width: 8px; height: 8px; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); position: absolute; right: 0; top: 50%; z-index: 1;}

.section .link .dot {display: block; width: 32px; height: 32px; border-radius: 50%; background: #ed1746; opacity: .5; position: absolute; right: 0; top: 0; -webkit-transition: opacity 0.3s cubic-bezier(.18,.52,.43,.99); transition: opacity 0.3s cubic-bezier(.18,.52,.43,.99);}
.section .link:hover .dot {opacity: 1;}
.active .link .dot,
.fp-completely .link .dot,
.on .link .dot {-webkit-animation-name: scaleAni;animation-name: scaleAni;}

.sec2 .link .arrow {background: #817f74;}
.sec2 .link .arrow::after {border-color: #817f74;}
.sec2 .link .dot {background: #f7d561; opacity: .65;}
.sec3 .link {margin-right: 2.5rem;}
.sec3 .link .arrow {background: #c3beb7;}
.sec3 .link .arrow::after {border-color: #c3beb7;}
.sec3 .link .dot {background: #000; opacity: .2;}

@media (max-width: 576px) {
	.section .link {width: 70px; height: 20px; }
	.section .link .dot {width: 20px; height: 20px;}
	.section .link .arrow {width: 62px;}
	.section .link .arrow::after {width: 5px; height: 5px;}
}

@-webkit-keyframes arrowAni {
	from {-webkit-transform: translateX(-120%); transform: translateX(-120%);}
	to {-webkit-transform: translateX(0); transform: translateX(0);}
}


@keyframes arrowAni {
	from {-webkit-transform: translateX(-120%); transform: translateX(-120%);}
	to {-webkit-transform: translateX(0); transform: translateX(0);}
}

@-webkit-keyframes scaleAni {
	from {-webkit-transform: scale(0); transform: scale(0);}
	to {-webkit-transform: scale(1); transform: scale(1);}
}

@keyframes scaleAni {
	from {-webkit-transform: scale(0); transform: scale(0);}
	to {-webkit-transform: scale(1); transform: scale(1);}
}

/* text animation */
.lines {display: inline-block; vertical-align: top; overflow: hidden;}
.active .ani,
.fp-completely .ani {-webkit-animation-timing-function: cubic-bezier(.18,.52,.43,.99);animation-timing-function: cubic-bezier(.18,.52,.43,.99); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-direction: alternate; animation-direction: alternate;}
.active .ani.img,
.fp-completely .ani.img {-webkit-animation-timing-function: cubic-bezier(.6,.45,.37,.82);animation-timing-function: cubic-bezier(.6,.45,.37,.82);}
.active .words,
.fp-completely .words,
.on .words {display: inline-block; -webkit-animation-name: slideUp; animation-name: slideUp;}

@-webkit-keyframes slideUp {
	from {-webkit-transform: translateY(140%); transform: translateY(140%);}
	top {-webkit-transform: translateY(0);}
}

@keyframes slideUp {
	from {-webkit-transform: translateY(140%); transform: translateY(140%);}
	top {-webkit-transform: translateY(0); transform: translateY(0);}
}