:root {
	--color-1: #342b25;
	--color-2: #58504b;
	--color-3: #f8efe9;
	--font-e: 'Playfair Display', serif;
	--font-m: 'Montserrat', sans-serif;
}
/* ===============================================================
    * common
=============================================================== */
/* body */
html {scroll-behavior: smooth;}
body {font-family: '맑은 고딕','malgun gothic',Helvetica,'Apple SD Gothic Neo','Apple SD 산돌고딕 Neo','Microsoft NeoGothic','Droid sans', sans-serif; font-size: 16px; font-weight: normal; line-height: 1; overflow-x: hidden; color: var(--color-1);}
body::-webkit-scrollbar {width: 6px;}
body::-webkit-scrollbar-thumb {height: 17%; background-color: var(--color-1); border-radius: 2px;}
body::-webkit-scrollbar-track {background-color: transparent;}
/* font */
.fonte {font-family: var(--font-e);}
.fontm {font-family: var(--font-m);}
.thin {font-weight: 100;} .exlight {font-weight: 200;} .light {font-weight: 300;} .regular {font-weight: 400;} .medium {font-weight: 500;} .semibold {font-weight: 600;} .bold {font-weight: 700;} .exbold {font-weight: 800;} .fblack {font-weight: 900;}
.ttu {text-transform: uppercase;} .ttc {text-transform: capitalize;} .tal {text-align: left;} .tac {text-align: center;} .tar {text-align: right;}
em {font-style: normal;}
/* color */
.c1 {color: var(--color-1);}
.c2 {color: var(--color-2);}
.c3 {color: var(--color-3);}
.cf {color: #fff;}
/* display */
.width-max {max-width: 1710px; width: 100%; margin: 0 auto; padding: 0 15px;}
.dpb {display: block; width: 100%; height: 100%;}
.dib {display: inline-block;}
.fl {float:left;} .fr {float:right;} .clear:after {content:''; display: block; clear:both;}
.none-pc {display: none;}
/* classed */
.bg-img {background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: 100%;}
.full-img {width: 100%; height: 100%; object-fit: cover;}
.wrap {padding: 120px 0;}
.btn-more {width: 180px; height: 56px; line-height: 56px; text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--color-1); color: var(--color-1); transition: .4s;}
.btn-more:hover {box-shadow: inset 0 0 0 56px var(--color-1); color: #fff;}
@media (max-width: 992px){
	.none-pc {display: block;}
	.none-mo {display: none;}
	.wrap {padding: 60px 0;}
	.m50 {margin-top: 50px;}
	.btn-more {width: 150px; height: 42px; line-height: 42px;}
}

/* ===============================================================
    * banner
=============================================================== */
.banner {position: relative; width: 100%; height: 660px; overflow: hidden;}
.banner:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(24,24,24,.7);}
.banner .tit {position: absolute; z-index: 1; left: 50%; right: 0; top: 50%; transform: translateY(-50%); color: #fff;}
.banner .tit h2 {font-size: 110px; padding-left: 130px; margin-bottom: 60px; opacity: 0; animation: bannerH2 1s forwards ease;}
.banner .tit p {font-size: 12px; line-height: 32px; opacity: 0; padding-left: 50%; animation: bannerP 1s .2s forwards ease; white-space: nowrap;}
@media (max-width: 992px){
	.banner {height: 262px;}
	.banner .tit {left: 0; top: 60%; padding: 0 15px;}
	.banner .tit h2 {font-size: 55px; padding-left: 50px; margin-bottom: 20px; animation: mBannerH2 1s forwards ease;}
	.banner .tit p {font-size: 10px; line-height: 20px; padding-left: 50px; animation: mBannerP 1s .2s forwards ease;}
}
@keyframes bannerH2 {
	0% {padding-left: 130px; opacity: 0;}
	100% {padding-left: 10px; opacity: 1;}
}
@keyframes bannerP {
	0% {padding-left: 50%; opacity: 0;}
	100% {padding-left: 30%; opacity: 0.6;}
}
@keyframes mBannerH2 {
	0% {padding-left: 50px; opacity: 0;}
	100% {padding-left: 0; opacity: 1;}
}
@keyframes mBannerP {
	0% {padding-left: 50px; opacity: 0;}
	100% {padding-left: 0; opacity: 0.6;}
}

/* ===============================================================
    * full-slider
=============================================================== */
.full-slider {position: relative; overflow: hidden; width: 100%; height: 100vh;}
.full-slider .scrollTo {position: absolute; z-index: 10; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 40px; color: #fff; cursor: pointer;}
.full-slider .full-tit {position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.full-slider .full-tit h2 {font-size: 34px; letter-spacing: 0.1em; color: #fff;}
.full-slider .swiper-slide {position: relative; width: 100%; height: 100vh;}
.full-slider .swiper-slide img {position: absolute; width: 100%; height: 100%; object-fit: cover; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.full-pager {position: absolute; z-index: 10; left: 50%; bottom: 75px; transform: translateX(-50%); font-size: 14px; color: #ccc; text-align: center;}
.full-pager .swiper-pagination-current {font-size: 24px; color: #fff;}
.full-ctrl {position: absolute; z-index: 10; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: center; pointer-events: none;}
.full-ctrl .nav-btn {padding: 30px; font-size: 80px; color: #fff; cursor: pointer; pointer-events: all;}
@media (max-width: 992px){
	.full-slider {height: auto;}
	.full-slider .scrollTo {display: none;}
	.full-slider .full-tit {display: none;}
	.full-slider .swiper-slide {height: auto; padding-bottom: 56.25%;}
	.full-pager {font-size: 12px; bottom: 15px;}
	.full-pager .swiper-pagination-current {font-size: 12px;}
	.full-ctrl .nav-btn {padding: 15px; font-size: 30px;}
}
/* ===============================================================
    * effect
=============================================================== */
/* .delay3 {transition-delay: .3s;}
.txtEf {opacity: 0; transform: translateX(50px); transition: .5s;}
.txtEf.animate {opacity: 1; transform: translateX(0);}
.opa {opacity: 0; transition: .5s;}
.opa.animate {opacity: 1;} */

.wow {position: relative; opacity: 0;}
.delay3 {animation-delay: .3s;}
.fadeLeft {transform: translateX(70px); animation: fadeLeft 2s forwards}
.fadeRight {transform: translateX(-70px); animation: fadeRight 2s forwards;}
.fadeDown {transform: translateY(-50px); animation: fadeDown 2s forwards;}
@keyframes fadeLeft {
    0% {transform: translateX(70px); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
}
@keyframes fadeRight {
    0% {transform: translateX(-70px); opacity: 0;}
    100% {transform: translateX(0); opacity: 1;}
}
@keyframes fadeDown {
    0% {transform: translateY(-50px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}