@charset "utf-8";
@import url("dark-theme.css");

/* header */
.header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  transition: transform 0.3s ease-in-out;
}

.gnb-open .header-wrap {
  z-index: 110;
}

body:has(.tab-menu) .header-wrap,
body.header-bg .header-wrap {
  background: url(../../assets/images/common/bg-default.png) no-repeat center center / cover;
}

.header-wrap:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--black02);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.72,0,0.28,1);
  pointer-events: none;
}

.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: min(6rem, 3.125vw) 10.4rem min(2.4rem, 1.25vw);
  max-width: 192rem;
  box-sizing: border-box;
}

.header-box .logo {
  position: relative;
  z-index: 130;
}

.header-box .logo a {
  display: block;
  width: min(10.9rem, 5.677vw);
  height: min(4.1rem, 2.135vw);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 45' fill='%23CA0019'><path d='M12.1274 20.7294H15.0556C15.9952 20.7718 16.9139 20.9896 17.7508 21.3684C18.5877 21.7472 19.3237 22.2781 19.9102 22.9263C21.3055 24.2804 22.0467 28.0699 22.0467 33.1472C22.0467 39.3886 24.8791 42.5125 30.2674 42.5125C31.8126 42.4768 33.3422 42.2303 34.8019 41.7823V40.3084C29.6779 41.4027 29.5166 38.9597 29.5166 36.8188C29.5166 26.8518 27.6539 21.713 19.3216 20.2491V20.117C24.2922 19.5099 30.6406 17.1329 30.6406 10.2151C30.6406 1.71589 23.6888 0.912109 17.8889 0.912109H0V2.44229H5.29936V40.2438H0V41.7808H17.4066V40.2438H12.1317L12.1274 20.7294ZM12.1274 2.44004H16.7613C21.5148 2.44004 23.2798 4.21521 23.2798 11.0684C23.2798 16.5683 21.309 19.2078 16.4928 19.2078H12.1274V2.44004Z'/><path d='M76.0673 40.2396H81.3483V41.7766H63.9452V40.2396H69.2262V3.48234H69.064L58.3859 41.7773H56.5765L45.9473 3.48234H45.8487V40.2396H51.0216V41.7766H38.8516V40.2396H44.1239V2.43808H38.8524V0.910156H52.6218L60.0977 28.8725L67.8379 0.910156H81.3483V2.43808H76.0673V40.2396Z'/><path d='M86.9522 41.9549H86.2031V31.4268H87.2251C88.6588 36.9982 92.3396 41.2724 97.5151 41.2724C102.112 41.2724 106.492 37.7999 106.492 32.4099C106.492 28.8035 105.739 27.1505 101.626 25.2547C99.656 24.4017 91.3839 21.2753 90.5668 20.6698C87.4815 18.4681 86.2546 14.7304 86.2546 11.3176C86.2206 8.85554 86.9782 6.43531 88.4399 4.33686C89.2371 3.0157 90.4305 1.91283 91.89 1.14818C93.3496 0.383527 95.0193 -0.0136196 96.7172 0.000356555C99.1825 0.000356555 102.638 1.77782 103.72 2.68999L105.739 0.912535H106.492V10.4572H105.419C104.245 5.37226 101.092 1.40596 96.3388 1.40596C92.7155 1.40596 88.7608 4.27306 88.7608 8.86849C88.7608 19.0161 108.999 12.4758 108.999 29.1169C108.999 37.4932 104.402 42.6919 97.421 42.6919C95.8467 42.7361 94.2833 42.4481 92.861 41.8517C91.4388 41.2554 90.1989 40.3681 89.2448 39.2638L86.9522 41.9549Z'/></svg>") no-repeat center center / 100%;
  background-color: var(--color09);
}

/* 메뉴 토글 버튼 */
.btn-menu {
  position: relative;
  width: min(4.4rem, 2.292vw);
  height: min(1.5rem, 0.781vw);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 130;
}

.btn-menu:before,
.btn-menu:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: max(2px, 0.104vw);
  background: var(--black100);
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;
}

.btn-menu:before {
  top: 0;
}

.btn-menu:after {
  top: 100%;
}

.btn-menu.active:before,
.btn-menu.active:after {
  top: 50%;
  width: 100%;
  transition: transform 0.3s ease-in-out 0.3s, top 0.3s ease-in-out;
}

.gnb-open .btn-menu:before,
.gnb-open .btn-menu:after {
  background: var(--black02) !important;
}

.btn-menu.active:before {
  transform: rotate(39deg);
}

.btn-menu.active:after {
  transform: rotate(-39deg);
}

/* 헤더 컬러 정의 */
body:is(.main, .work.detail) .header-box .logo a {
  background-color: var(--white100);
}

body:is(.main.gnb-open) .header-box .logo a,
body:is(.header-bg):not(.dark-theme) .header-box .logo a {
  background-color: var(--color09);
}

body:is(.main, .work.detail, .about) .btn-menu:before,
body:is(.main, .work.detail, .about) .btn-menu:after {
  background: var(--white100);
}

body:is(.header-bg):not(.dark-theme) .btn-menu:before,
body:is(.header-bg):not(.dark-theme) .btn-menu:after {
  background: var(--black100);
}

/* 메뉴 레이어 */
nav.gnb {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 100vh;
  background-color: var(--white100);
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  visibility: visible;
}

body:not(.gnb-open) nav.gnb {
  visibility: hidden;
}

nav.gnb.active {
  transform: translateY(0);
}

.gnb-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: min(6rem, 3.125vw) 10.4rem;
  max-width: 192rem;
  height: 100vh;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.gnb-list li {
  overflow: hidden;
}

.gnb-list li+li {
  padding: min(5.7rem, 2.969vw) 0 0;
}

.gnb-list li a {
  display: inline-block;
  position: relative;
  font-size: min(7.5rem, 3.906vw);
  line-height: 1;
  font-weight: var(--font-weight-medium);
  color: var(--black02);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
}

@media screen and (min-width: 1025px) {
  .gnb-list li a:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(42.4rem, 22.083vw);
    height: min(9.1rem, 4.74vw);
    background: var(--white100) url(../../assets/images/common/img-gnb-hover-work.png) no-repeat center center / 100%;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  
  .gnb-list li:nth-child(1) a:after {
    background-image: url(../../assets/images/common/img-gnb-hover-work.png);
  }
  
  .gnb-list li:nth-child(2) a:after {
    background-image: url(../../assets/images/common/img-gnb-hover-about.png);
  }
  
  .gnb-list li:nth-child(3) a:after {
    background-image: url(../../assets/images/common/img-gnb-hover-story.png);
  }
  
  .gnb-list li:nth-child(4) a:after {
    background-image: url(../../assets/images/common/img-gnb-hover-contact.png);
  }
  
  .gnb-list li a:hover:after {
    opacity: 1;
  }
}

.gnb.active .gnb-list li a {
  transform: translateY(0);
  opacity: 1;
}

/* 메뉴 아이템 순차적 애니메이션 지연 */
.gnb.active .gnb-list li:nth-child(1) a {
  transition-delay: 0.2s;
}

.gnb.active .gnb-list li:nth-child(2) a {
  transition-delay: 0.3s;
}

.gnb.active .gnb-list li:nth-child(3) a {
  transition-delay: 0.4s;
}

.gnb.active .gnb-list li:nth-child(4) a {
  transition-delay: 0.5s;
}

.gnb.active .gnb-list li:nth-child(5) a {
  transition-delay: 0.6s;
}

/* GNB 헤더 */
.gnb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-box .gnb-header .logo a {
  background-color: var(--color09) !important;
}

/* 닫기 버튼 */
.btn-close {
  position: relative;
  width: 2.188vw;
  height: 1.771vw;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 110;
}

.btn-close:before,
.btn-close:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: min(5.2rem, 2.76vw);
  height: min(0.2rem, 0.13vw);
  background: var(--black02);
}

.btn-close:before {
  transform: rotate(38deg);
}

.btn-close:after {
  transform: rotate(-38deg);
}

/* OLD HOME 링크 */
.old-home {
  padding: 0 0 min(10rem, 5.208vw);
}

.old-home a {
  display: inline-flex;
  align-items: center;
  font-size: min(3.4rem, 1.771vw);
  color: var(--black02);
}

.old-home .arrow {
  margin: 0 0 0 min(1.5rem, 0.781vw);
  font-size: min(4.4rem, 2.292vw);
  transform: rotate(-45deg)
}

@media screen and (max-width: 1024.98px) {
  .header-box {
    padding: min(2.35rem, 5.357vw) 2.8rem;
  }

  .header-box .logo a {
    width: min(6rem, 13.636vw);
    height: min(2.4rem, 5.455vw);
  }

  .btn-menu {
    width: min(3.7rem, 8.409vw);
    height: min(9px, 2.045vw);
  }

  .btn-menu:before,
  .btn-menu:after {
    width: min(3.7rem, 8.409vw);
    height: min(1px, 0.227vw);
  }

  .gnb-inner {
    position: relative;
    justify-content: center;
    padding: 0 2.8rem;
  }

  .gnb-header {
    position: absolute;
    top: 0;
    left: 0;
    padding: min(2.35rem, 5.357vw) 2.8rem;
    box-sizing: border-box;
  }

  .btn-close {
    width: min(3.7rem, 8.409vw);
    height: min(2.25rem, 5.104vw);
  }

  .btn-close:before,
  .btn-close:after {
    width: min(4.35rem, 9.886vw);
    height: min(1px, 0.227vw);
  }

  .btn-close:before {
    transform: rotate(30deg);
  }

  .btn-close:after {
    transform: rotate(-30deg);
  }

  .gnb-list li+li {
    padding: min(4rem, 9.091vw) 0 0;
  }

  .gnb-list li a {
    font-size: min(5.3rem, 12.045vw);
  }

  .old-home {
    padding: min(7.5rem, 17.045vw) 0 0;
  }

  .old-home a {
    font-size: min(2.4rem, 5.455vw);
  }

  .old-home .arrow {
    margin: 0 0 0 min(5px, 1.136vw);
    font-size: min(3rem, 6.818vw);
  }
}

/* btn top */
.btn-top {
  display: none;
}

/* footer */
.footer-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  background: var(--color01);
}

.main .footer-wrap {
  position: relative;
}

.work.detail .footer-wrap {
  display: none;
}

.about.fp-viewing-about .footer-wrap {
  display: none;
}

@media screen and (min-width: 1025px) {
  .main.header-bg .footer-wrap {
    position: fixed;
  }
  
  /* 푸터 고정 영역 */
  .wrap {
    padding-bottom: min(8rem, 4.167vw);
  }

  /* 푸터 없는 페이지 예외처리 */
  .work.detail .wrap,
  .contact .wrap {
    padding-bottom: 0;
  }
}

.footer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: min(2.5rem, 1.302vw) 10.4rem;
  max-width: 192rem;
  box-sizing: border-box;
}

.copyright-box p {
  font-size: min(2rem, 1.042vw);
  line-height: min(3rem, 1.563vw);
  color: var(--color03);
}

.foot-contact-box {
  display: flex;
  align-items: center;
  gap: 0 min(7rem, 3.646vw);
}

.foot-contact-box .logo-box {
  width: min(30.6rem, 15.937vw);
  height: min(2.25rem, 5.114vw);
  background: url(../../assets/images/common/img-foot-logo@2x.png) no-repeat center center/100%;
}

.foot-contact-box .btn-contact {
  display: inline-flex;
  align-items: center;
  gap: min(5px, 0.26vw);
  font-size: min(2.5rem, 1.302vw);
  line-height: min(2.75rem, 1.432vw);
  font-weight: var(--font-weight-semibold);
  color: var(--color03);
}

.foot-contact-box .btn-contact:after {
  content: '';
  display: block;
  width: min(1.2rem, 0.625vw);
  height: min(1.2rem, 0.625vw);
  border: min(2.5px, 0.13vw) solid var(--color03);
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
}

@media screen and (max-width: 1024.98px) {
  body.work.detail .header-wrap{
    z-index: 110;
  }
  /* btn top */
  .btn-top {
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: min(5rem, 11.364vw);
    right: min(5rem, 11.364vw);
    z-index: 20;
    width: min(4rem, 9.091vw);
    height: min(4rem, 9.091vw);
    border-radius: 50%;
    background: var(--color16);
    transition: all .3s;
  }

  .btn-top:after {
    content: '';
    position: relative;
    top: min(-1px, -0.227vw);
    left: min(-1px, -0.227vw);
    width: min(2.05rem, 4.659vw);
    height: min(1.4rem, 3.182vw);
    background: var(--white100);
    mask: url(../../assets/images/common/ico-btn-top@2x.png) no-repeat center center/100%;
    transition: all .3s;
  }

  body.about .btn-top {
    display: none;
  }
  body.work.detail .btn-top {
    z-index: 110;
  }
  body.work.detail.gnb-open .btn-top {
    z-index: 100;
  }
  /* footer */
  .footer-wrap {
    position: relative;
    background: var(--black02);
  }

  .about .footer-wrap {
    display: none;
  }

  .footer-box {
    flex-direction: column-reverse;
    align-items: center;
    gap: min(2.26rem, 5.136vw);
    padding: min(3.35rem, 7.614vw)0;
  }

  .copyright-box p {
    font-size: min(1.3rem, 2.955vw);
    line-height: min(1.56rem, 3.545vw);
  }

  .foot-contact-box {
    gap: 0 min(6.15rem, 13.977vw);
  }

  .foot-contact-box .logo-box {
    width: min(19.85rem, 45.114vw);
    height: min(1.43rem, 3.25vw);
  }

  .foot-contact-box .btn-contact {
    flex-shrink: 0;
    font-size: min(1.6rem, 3.636vw);
    line-height: min(2rem, 4.545vw);
  }

  .foot-contact-box .btn-contact:after {
      width: min(0.8rem, 1.818vw);
      height: min(0.8rem, 1.818vw);
      border-width: min(2.5px, 0.568vw);
  }
}

.wrap {
  position: relative;
  background: url(../../assets/images/common/bg-default.png) repeat-y center center/100%;
}

.wrap:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--black02);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.72,0,0.28,1);
}
.work.list .wrap:before{
  transition: none;
}
.main .wrap {
  overflow-x: hidden;
}

/* work detail */
.work.detail .wrap:before{
  display: none;
}

.wrapper {
  margin: 0 auto;
  padding: 0 10.4rem;
  max-width: 192rem;
  box-sizing: border-box;
}

.sub-container {
  position: relative;
}

body:is(.work.list) .sub-container{
  padding: min(17.3rem, 9.01vw) 0 0;
}
body:is(.story.list) .sub-container{
  padding: min(17.3rem, 9.01vw) 0 0;
}
body:is(.contact) .sub-container{
  padding: min(16rem, 8.333vw) 0 0;
}

/* page title */
.title {
  padding: 0 0 0.214vw;
  overflow: hidden;
}

.page-title {
  font-size: 6.56vw;
  line-height: 1;
  color: var(--black85);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(100px);
}
.page-title.aos-animate{
  opacity: 1;
  transform: translateY(0);
}
/* 타이틀에 로고이미지 포함 시 */
.page-title:has(.title-logo-box){
  display: flex;
  align-items: flex-end;
  min-height: 6.72vw;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}
.page-title .title-logo-box{
  display: inline-block;
}
.page-title .title-logo-box.shinsegae{
  width: 28.28vw;
}
.page-title .title-logo-box.emart{
  width: 17.29vw;
}
.page-title .title-logo-box.shinsegae-property{
  width: 24.11vw;
}
.page-title .title-logo-box img{
  max-width: 100%;
}
/* hash-tab */
.tab-menu {
  position: sticky;
  top: min(10rem, 5.208vw);
  z-index: 100;
  margin: 0 0 min(1.9rem, 0.99vw);
  border-bottom: 1px solid var(--color02);
  background: url(../../assets/images/common/bg-default.png) no-repeat center center/cover;
}
.tab-menu .tab-list{
  opacity: 0;
}
.tab-menu .tab-list.aos-animate{
  opacity: 1;
}
.tab-menu .tab-list li {
  width: auto;
}

.tab-menu .tab-list li a {
  display: block;
  position: relative;
  padding: 0 0 min(0.4rem, 0.214vw); 
  font-size: min(2.5rem, 1.3vw);
  line-height: min(2.75rem, 1.46vw);
  color: var(--color02);
  font-weight: var(--font-weight-medium);
  transition: color .3s;
}
.tab-menu .tab-list li a:hover{
  color: var(--color01);
}
.tab-menu .tab-list li.active a {
  padding: 0 0 min(1rem, 0.52vw);
  color: var(--color01);
}

.tab-menu .tab-list li.active a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: min(-0.2rem, -0.1vw);
  width: 100%;
  height: min(0.4rem, 0.21vw);
  background: var(--color01);
}

@media screen and (min-width: 1025px) {
   /* type-of-client */
  body:is(.work.list.type-of-client) .sub-container{
    padding: min(17.6rem, 9.17vw) 0 0;
  }
  
  body:is(.work.list.type-of-client) .title{
    padding: 0 0 min(4rem, 2.14vw);
  }
  
  .page-title a {
    pointer-events: none;
  }
  .tab-menu{
    padding: 30px 0 0;
  }
  /* story list 탭 메뉴 */
  .tab-menu:has(.tab-list.mobile-flex){
    padding: min(2.4rem, 1.25vw) 0 0;
  }
  .tab-menu .tab-list {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: min(4.8rem, 2.5vw);
  }
}

@media screen and (max-width: 1024.98px) {
  .wrap.open-popup:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    height: 100vh;
    background: var(--black10);
    opacity: 1;
  }
  .wrapper {
    padding: 0;
  }
  body:is(.work.list, .story.list) .sub-container{
    padding: min(11rem, 25vw) 0 0;
  }
  body:is(.contact) .sub-container{
    padding: min(7.1rem, 16.136vw) 0 0;
  }
  .title {
    padding: 0 2.8rem min(7rem, 15.91vw);
  }
  .title:has(.page-desc) {
    padding: 0 2.8rem min(8rem, 18.182vw);
  }
  .page-title {
    font-size: min(5.8rem, 13.18vw);
    line-height: 1;
    letter-spacing: 0;
  }
  .page-title:has(.title-logo-box){
    min-height: min(6rem, 13.64vw);
  }
  .page-title .open-popup {
    position: relative;
    display: block;
  }
  .page-title .open-popup:after {
    content: '';
    display: inline-flex;
    margin: 0 0 1.82vw 3.41vw;
    width: min(2.6rem, 5.91vw);
    height: min(2.6rem, 5.91vw);
    background: url(../../assets/images/common/btn-side-menu.svg) no-repeat center center/cover;
  }
  .page-title .open-popup:has(.title-logo-box){
    display: flex;
    align-items: flex-end;
  }
  .page-title .open-popup:has(.title-logo-box):after{
    margin: 0 0 0 3.41vw;
  }
  .page-title .title-logo-box.shinsegae{
    width: min(29.3rem, 66.59vw);
  }
  .page-title .title-logo-box.emart{
    width: min(14.2rem, 32.27vw);
  }
  .page-title .title-logo-box.shinsegae-property{
    width: min(23.4rem, 53.18vw);
  }
  .title .page-desc{
    padding: min(2.18rem, 4.955vw) 0 0;
    font-size: min(2rem, 4.5vw);
    line-height: min(3rem, 6.82vw);
    opacity: 0;
    transform: translateY(100px);
  }
  .title .page-desc.aos-animate{
    opacity: 1;
    transform: translateY(0);
  }

  .tab-menu {
    top: min(7.1rem, 16.168vw);
  }

  .tab-menu .tab-list li:nth-of-type(1) {
    padding: 0 0 0 min(2.8rem, 6.36vw);;
  }
  .tab-menu .tab-list li{
    margin: 0 min(2.6rem, 5.91vw) 0 0;
  }
  .tab-menu .tab-list li a {
    padding: 0 0 min(6px, 1.364vw);
    font-size: min(1.8rem, 4.09vw);
    line-height: min(2rem, 4.55vw);
  }

  .tab-menu .tab-list li.active a {
    padding: 0 0 min(6px, 1.364vw);
  }

  .tab-menu .tab-list li.active a:after {
    bottom: 0;
    height: min(3px, 0.68vw);
  }
}