@charset "utf-8";


* {
	box-sizing: border-box;
}
:root {
    --main-brown: #6D5D52;
    --sub-brown: #503F30;
    --main-black: #464646;
}
html{
	scroll-behavior:smooth;
  overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'arita-m';
	color: var(--main-black);
	word-break: keep-all;
  overflow-x: hidden;
}

.section {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 125px 11.46vw;
}
.section_nopad {
  position: relative;
  z-index: 1;
  background: #fff;
}
ul,
li {
	list-style: none;
	margin: 0;
	padding: 0;
  font-family: 'pret-r';
}
img {
	padding: 0;
	margin: 0;
  object-fit: cover;
  max-width: 100%;
}
h1,
h2,
h3,
h4 {
	margin: 0;
	padding: 0;
	letter-spacing: 0.04em;
  line-height: 1.666;
  font-weight: normal;
	color: var(--main-brown);
}
h2 span, h3 span {
  font-family: 'arita-m';
}
p, span {
	padding: 0;
	margin: 0;
  font-family: 'pret-r';
  line-height: 2;
  /* letter-spacing: 0.04em; */
}

a {
	text-decoration: none;
}
.mo, .mo_inline {display: none;}

/* AOS 커스텀 */
/* 딜레이 */
.delay03 { transition-delay: 0.3s !important; }
.delay06 { transition-delay: 0.6s !important; }
.delay10 { transition-delay: 1.0s !important; }
.delay13 { transition-delay: 1.3s !important; }
.delay23 { transition-delay: 2.3s !important; }

/* 지속 시간 */
.duration20 { transition-duration: 2.0s !important; }
.duration25 { transition-duration: 2.5s !important; }
.duration30 { transition-duration: 3.0s !important; }
.duration50 { transition-duration: 5.0s !important; }

.o-hidden {overflow: hidden;}
[data-aos=fade-left] {transform: translate3d(50px, 0, 0) !important;}
[data-aos=fade-right] { transform: translate3d(-50px, 0, 0) !important;}
[data-aos=fade-up] { transform: translate3d(0, 50px, 0) !important;}
[data-aos=fade-down] { transform: translate3d(0, -50px, 0) !important;}
[data-aos^=fade][data-aos^=fade].aos-animate { transform: translateZ(0) !important;}

@media(max-width:768px){
	.mo {display: block;}
  .mo_inline {display: inline-block;}
	.pc {display: none;}

  .section {
    padding: 55px 0;
  }
  p, span {
    letter-spacing: 0;
  }
}

/* 그림자 위로 사진 이동*/
.shadow01 {
  overflow: hidden;
  transform: translate(-10px, -10px);
  box-shadow: 15px 15px 3px #a1a0a0;
  opacity: 0.7;
  transition: transform 1s ease-in-out, box-shadow 1s ease-in-out, opacity 1s ease-in-out;
}
.shadow01.active {
  transform: translate(0px, 0px);
  box-shadow: 3px 3px 3px #a1a0a0;
  opacity: 1;
}

/* zoom */
.zoom {
  transform: scale(0.7);
  filter: grayscale(0.5);
  transition: transform 1.25s cubic-bezier(0.45, 0, 0.55, 1), filter 1.25s cubic-bezier(0.45, 0, 0.55, 1);
}
.zoom.active {
  transform: scale(1);
  filter: grayscale(0);
}

/**/
.topslide h2 {
    font-family: 'arita-m'
}
.topslide p {
    font-family: 'arita-l';
}

.topslide .scroll{
    opacity: 0;
    transform: translateY(50px);
    filter: blur(12px);
    transition: opacity 1.6s cubic-bezier(.19,1,.22,1),
                transform 1.6s cubic-bezier(.19,1,.22,1),
                filter 1.6s cubic-bezier(.19,1,.22,1),
                letter-spacing 1.6s cubic-bezier(.19,1,.22,1);
}

.topslide h2.scroll{
    letter-spacing: 0.4em; /* 초기값은 원래 자간보다 넓게 시작 */
}
.topslide span.scroll{
    letter-spacing: 0.5em;
}

.topslide h2.scroll.active{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    letter-spacing: 0.15em; /* 원래 자간으로 수렴 */
    transition-delay: 0.1s;
}
.topslide span.scroll.active{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    letter-spacing: 0.25em;
    transition-delay: 0.6s;
}


/* 텍스트 블러 */
.text-blur span{display:inline-block;animation:textBlur 1s both}
.text-blur span:nth-of-type(1){animation-delay:0.1s}
.text-blur span:nth-of-type(2){animation-delay:0.5s}
.text-blur span:nth-of-type(3){animation-delay:1.2s}
.text-blur span:nth-of-type(4){animation-delay:1.4s}
@keyframes textBlur{
  0%{ filter: blur(10px); opacity: 0; transform: translateX(100px); }
  100%{ filter: blur(0); opacity: 1; transform: translateX(0); }
}


/* more 버튼 공용 */
.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 23px;
  padding: 10px 25px 7px 35px;
  border: 1px solid var(--main-black);
  border-radius: 35px;
  text-decoration: none;
}
.more-btn span {
  font-size: 25px;
  font-family: 'arita-m';
}
.more-btn .arrowbox::before {
    border: 1px solid var(--main-black);
}

.more-btn .arrowbox img {
    filter: invert(1);
}

.more-btn:hover .arrowbox::before {
    transform: rotate(-135deg);
}
.more-btn:hover .arrowbox img {
    transform: translateX(14px);
}

.more-btn.white {
  border: 1px solid #fff;
  color: #fff;
}
.more-btn.white .arrowbox::before {
    border: 1px solid #fff;
}
.more-btn.white .arrowbox img {
    filter: invert(0);
}

/* 화살표 공통 */
 .arrowbox {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    margin: 6px 0px 6px;
}
.arrowbox img {
    width: 28px;
    transform: translateX(-11px);
    /* animation: move_lr 3s infinite; */
    transition: 0.5s;
}
.arrowbox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    border: 1px solid #fff;
    transform: rotate(45deg);
    transition: all 0.3s linear;
}
.arrowbox:hover::before {
    transform: rotate(-135deg);
}
.arrowbox:hover img {
    transform: translateX(14px);
}
@media (max-width:1200px) {
  .more-btn {
    padding: 6px 20px 4px 30px;
  }
  .more-btn span {
    font-size: 20px;
  }
}
@media (max-width:768px) {
  .more-btn {
    gap: 16px;
    padding: 6px 15px 5px 20px;
    border-radius: 35px;
  }
  .more-btn span {
    font-size: 14px;
  }

  .arrowbox {
    width: 18px;
    height: 18px;
}
  .arrowbox::before {
    width: 17px;
    height: 17px;
  }
  .arrowbox img {
    width: 21px;
    max-width: 21px;
    transform: translateX(-8px);
  }
}


/* 상세페이지 타이틀 */
.preview {
  padding: 160px 0 100px;
}
.preview h2{
    font-size: 51px;
    text-align: center;
}
.preview p{
    text-align: center;
    font-size: 17px;
}
@media(max-width:768px){
  .preview {
    padding: 100px 0 40px;
  }
  .preview h2 {
      font-size: 35px;
  }
  .preview p {
      font-size: 13px;
  }
}

/* 섹션 wrap 테두리 */
.wrap-border {
    border: 2.5vw solid var(--main-brown);
    transition: border 1.5s ease-in-out;
}
.wrap-border.active {
    border: 0px solid #ccc;
}
@media (max-width:768px) {
  .wrap-border {
    border: 20px solid var(--main-brown);
    transition: border 1.5s ease-in-out;
  }
  .wrap-border.active {
      border: 0px solid #ccc;
  }
}