/* main-sec */
.main-sec {position: relative; width: 100%; height: 100vh !important; overflow: hidden; z-index: 2; background: #000;}
/* #main-sec3 {background: #3a3a3a;} */
/* .page_dim.on {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100vh; background: #000; z-index: 1; opacity: 1;}
.page_dim.on {animation: beforeOn 1s 1s linear both;} */
/* .main-sec.swiper-slide-next:before {animation: beforeOn2 2s 1s linear both; position: fixed; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100vh; background: #000; z-index: 1; opacity: 1;}
.main-sec.swiper-slide-prev:before {animation: beforeOn3 2s 1s linear both; position: fixed; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100vh; background: #000; z-index: 1; opacity: 1;} */
@keyframes beforeOn {
        0% { opacity: 1;}
        100% { opacity: 0;}
}
/* @keyframes beforeOn2 {
        0% { opacity: 1;}
        100% { opacity: 0;}
}
@keyframes beforeOn3 {
        0% { opacity: 1;}
        100% { opacity: 0;}
} */
.main-sec .kv-bg {animation: kenburns-right 20s ease-out alternate-reverse infinite; width: 100%; height: 100%; object-fit: cover; background: #000; overflow: hidden;}


/* @keyframes kenburns-right {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 50%;
            transform-origin: 84% 50%;
  }
  50% {
    -webkit-transform: scale(1.25) translateX(20px);
            transform: scale(1.25) translateX(20px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
  100% {
    -webkit-transform: scale(1.25) translateX(20px);
            transform: scale(1.25) translateX(20px);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
} */
.main-sec .kv-bg img {width: 100%; height: 100%; object-fit: cover;}
/* .main-sec .kv-bg img.on {animation: opItm 1s 1s linear both; transition: all 1s;}
@keyframes opItm {
        0%{opacity: 0;}
        100%{opacity: 1;}
} */

.main-sec .left-content {position: absolute; top: 0; left: 0; background: rgba(38, 38, 38, 0.72); display: flex; align-items: flex-start; justify-content: space-between; flex-flow: column; width: 600px; height: 100vh; padding: 295px 60px 50px; box-sizing: border-box; z-index: 3;}
#main-sec3 .left-content {background: transparent;}
.main-sec .left-content
.main-sec .left-content .top-box {position: relative; transition: all 1s;}
.main-sec .left-content.left-content2 {display: flex; flex-flow: column; justify-content: flex-start; gap: 13px; padding-top: 295px;}
.main-sec .left-content.left-content2 p {font-size: 18px; font-weight: bold; line-height: 1.17; color: #fff; text-transform: uppercase; cursor: pointer;}
/* .main-sec .left-content .top-box.on {animation: left100 1s 1s linear both; left: 100px; transition: all 1s;}
@keyframes left100 {
        0%{left: 100px;}
        100%{left: 0;}
} */
.main-logo {position: fixed; top: 60px; left: 60px; width: 259px; height: auto; margin-bottom: 74px; z-index: 10;}
.main-logo img {width: 100%; height: auto;}
.main-sec .left-content .top-box {position: relative; display: flex; align-items: flex-start; justify-content: flex-start; flex-flow: column; width: 100%; height: 100%;}
/* .main-sec .left-content .top-box nav {margin-bottom: 75px;}
.main-sec .left-content .top-box nav ul {}
.main-sec .left-content .top-box nav ul li {margin-bottom: 10px;}
.main-sec .left-content .top-box nav ul li a {font-size: var(--size20); font-weight: bold; line-height: 1.2; color: var(--white); transition: all .3s;}
.main-sec .left-content .top-box nav ul li:hover a {margin-left: 20px; transition: all .3s;} */

.main-sec .left-content .top-box .introduction {}
.introduction .works {position: relative; padding-bottom: 9px; font-size: var(--size42); font-weight: 900; line-height: 1.24; color: var(--white); font-family: 'Montserrat', sans-serif; text-transform: uppercase;}
/* .introduction .works::before {position: absolute; bottom: 0; left: 0; content: ''; display: block; width: 50px; height: 5px; background: var(--white); font-family: 'Montserrat', sans-serif;} */
.introduction .works-sub {margin-bottom: 50px; font-size: var(--size22); font-weight: bold; line-height: 1.23; color: var(--white); font-family: 'Montserrat', sans-serif;}

.main-sec .left-content .top-box .more {display: block; width: 50px; height: auto; animation: heartbeat 1.5s ease-in-out infinite both;}
@keyframes heartbeat {
        from {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-transform-origin: center center;
                  transform-origin: center center;
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        10% {
          -webkit-transform: scale(0.91);
                  transform: scale(0.91);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        17% {
          -webkit-transform: scale(0.98);
                  transform: scale(0.98);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
        33% {
          -webkit-transform: scale(0.87);
                  transform: scale(0.87);
          -webkit-animation-timing-function: ease-in;
                  animation-timing-function: ease-in;
        }
        45% {
          -webkit-transform: scale(1);
                  transform: scale(1);
          -webkit-animation-timing-function: ease-out;
                  animation-timing-function: ease-out;
        }
      }
.main-sec .left-content .top-box .more img {transition: all .3s;}
.main-sec .left-content .top-box .more:hover img {margin-left: 20px; transition: all .3s;}

.bottom-box {position: fixed; left: 60px; bottom: 40px; z-index: 10;}
.bottom-box .address {margin-bottom: 20px; font-size: var(--size13); font-weight: 300; line-height: 1.15; color: var(--white);}
.bottom-box .copyright {font-size: var(--size10); font-weight: 300; line-height: 1.15; color: var(--grayc7);}


/* detail-sec */
section:not(.main-sec) {padding-top: 185px;}
.l-y-c-wrapper {width: 644px; height: auto; margin: 0 auto 68px; display: none !important;}
.l-y-c-wrapper ul {display: flex; align-items: center; justify-content: space-between; text-align: center; margin-top: 50px;}
.l-y-c-wrapper ul li {}
.l-y-c-wrapper ul li .tit {margin-bottom: 7px; font-size: var(--size12); font-weight: 300; line-height: 1.17; color: #bab7b7;}
.l-y-c-wrapper ul li .sub {font-size: var(--size13); font-weight: 300; line-height: 1.15; color: var(--gray76);}

/* content-img */
.content-img {display: flex; align-items: center; justify-content: center; width: 100%;}
.content-img p {display: none;}
.content-img .arrow-box {opacity: 1; position: fixed; top: 50%; z-index: 10; transition: all 1s;}
.content-img .arrow-box.on {opacity: 1; transition: all 1s;}
.content-img .arrow-box:first-of-type {left: 20px; transform: rotate(0deg);}
.content-img .arrow-box:last-of-type {right: 20px; transform: rotate(0deg);}
.content-img .arrow-box a {display: block; font-size: var(--size18); font-weight: 400; line-height: 1.17; color: var(--grayc7); transition: all .3s;}
.content-img .img-box {width: 1324px; height: auto;}
.content-img .img-box img {width: 100%; height: auto; margin-bottom: 55px;}

/* contact_us */
.contact_us {width: 100%; height: auto; padding-top: 195px;}
.contact_us .d-flex {display: flex; align-items: center; justify-content: center; margin-top: 150px;}
.contact_us .txt-box {width: 566px; height: auto; padding: 148px 38px; margin-right: 90px; box-sizing: border-box; background: var(--gray94); font-size: var(--size17); font-weight: 300; line-height: 1.41; color: #fff;}
.contact_us .contact-txt {}
.contact_us .tell-email {margin-bottom: 40px; font-size: var(--size15); font-weight: 300; line-height: 2; color: var(--gray71);}
.contact_us .send-btn {width: 192px; height: 50px; border-radius: 25px; border: 1px solid var(--gray71); font-size: 15px; font-weight: 400; line-height: 1.2; color: var(--gray71); transition: all .3s;}
.contact_us .send-btn:hover {background: var(--gray71); color: var(--white); transition: all .3s;}

/* popup-area */
.popup-area {display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 500px; width: 100%; height: auto; padding: 26px 30px 40px; background: var(--black02); box-sizing: border-box; z-index: 11;}
.popup-area .popup-header {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 51px;}
.popup-area .popup-header .popup-tit {font-size: var(--size24); font-weight: 600; line-height: 1.21; color: var(--white);}
.popup-area .popup-header .close-btn {position: absolute; right: 0; width: 20px; height: auto;}

.popup-area .popup-body {}
.popup-area .popup-body .input-box {width: 100%; height: auto; margin-bottom: 40px;}
.popup-area .popup-body .input-box:last-of-type {margin-bottom: 0;}
.popup-area .popup-body .input-box input {width: 100%; height: 30px; padding: 0 10px; background: transparent; box-sizing: border-box; border-bottom: 1px solid var(--gray70); outline: none; font-size: var(--size15); font-weight: 300; line-height: 2; color: #fff;}
.popup-area .popup-body .help-btn {display: block; width: 100%; padding: 0 10px; padding-bottom: 80px; margin-bottom: 40px; border-bottom: 1px solid var(--gray70); margin-top: 40px; font-size: var(--size15); font-weight: 300; line-height: 2; color: #fff; box-sizing: border-box;}
.popup-area .popup-body .send-btn {width: 100%; height: 50px; border-radius: 25px; border: 1px solid var(--gray71); font-size: var(--size15); font-weight: 400; line-height: 1.2; color: var(--gray71);}
.popup-area .popup-body .send-btn:hover {background: var(--white); transition: all .3s;}

/* dim */
.dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); background: rgba(255, 255, 255, 0.3); z-index: 10;}


/* works-gallery */
.works-gallery {}
.works-gallery li {max-width: 440px; width: 100%; height: auto; transition: initial !important;}
.works-gallery li .child-box {position: relative; width: 100%; height: 100%;}
.works-gallery li a .link-box {opacity: 0; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; flex-flow: column; width: 100%; height: 100%; padding: 20px 0; -webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px); border-radius: 5px; box-sizing: border-box; transition: all .3s;}
.works-gallery li a img {border-radius: 5px;}
.works-gallery li:hover .link-box {opacity: 1; z-index: 1;}
.works-gallery li a .link-box .tit {position: absolute; font-size: var(--size18); font-weight: 400; line-height: 1.17; color: var(--white);}
.works-gallery li a .link-box .trigger {position: absolute; display: flex; bottom: 20px; align-items: center; justify-content: center; width: 167px; height: 50px; border-radius: 25px; border: 1px solid var(--white); font-size: var(--size15); font-weight: 400; line-height: 1.2; color: var(--white);}
.works-gallery li .address-dl {display: none;}

/* works-gallery li 가 on 일때 */
.works-gallery li.on a .link-box .tit {position: static;}
.works-gallery li.on a .link-box .trigger {position: static; bottom: none;}
.works-gallery li.on {max-width: 100%; margin-bottom: 100px;}
.works-gallery li.on.aos-animate {animation: tilt-in-tl 0.65s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes tilt-in-tl {
        0% {
          -webkit-transform: rotateY(35deg) rotateX(20deg) translate(-250px, -250px) skew(12deg, 15deg);
                  transform: rotateY(35deg) rotateX(20deg) translate(-250px, -250px) skew(12deg, 15deg);
          opacity: 0;
        }
        100% {
          -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
                  transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
          opacity: 1;
        }
      }
.works-gallery li.on:last-of-type {margin-bottom: 0;}
.works-gallery li.on a  {display: flex; align-items: center; justify-content: center; flex-flow: row-reverse; width: 1000px; margin: 0 auto;}
.works-gallery li.on a img {width: 100%; height: auto;}
.works-gallery li.on a .link-box {opacity: 1; width: auto; height: auto; top: 50%; left: 130px; transform: translateY(-50%); align-items: flex-start;}
.works-gallery li.on a .link-box .tit {width: 100%; margin-bottom: 23px; font-size: var(--size16); font-weight: 400; line-height: 1.19; color: var(--gray58); text-align: left;}
.works-gallery li.on a .link-box .trigger {width: 145px; height: 44px; font-size: var(--size12); font-weight: 400; line-height: 1.17; color: var(--gray71); border-color: var(--gray71);}
.works-gallery li.on .address-dl {display: flex; align-items: center; justify-content: flex-start; width: 100%; margin-bottom: 11px;}
.works-gallery li.on .address-dl:last-of-type {margin-bottom: 23px;}
.works-gallery li.on .address-dl dt {min-width: 59px; width: auto; margin-right: 12px;; font-size: var(--size12); font-weight: 300; line-height: 1.17; color: var(--grayac);}
.works-gallery li.on .address-dl dd {font-size: var(--size12); font-weight: 300; line-height: 1.17; color: var(--gray58);}


/* tab-menu */
.tab-menu {display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-bottom: 28px; padding-left: 4px; margin-top: 70px;}
.tab-menu button {display: flex; align-items: center; justify-content: space-between; width: 21px; padding: 0; border-radius: 3px; box-sizing: border-box; font-size: var(--size13); font-weight: 400; line-height: 1.15; color: var(--grayc7); text-indent: -9999px;}
.page-tit .sub {display: none !important;}
/* .tab-menu button.active {background: var(--gray71); color: var(--white);} */
/* .tab-menu .grid-btn {min-width: 80px; height: 25px;}
.tab-menu .grid-btn img {width: 10px; height: auto;}
.tab-menu .list-btn {min-width: 80px; height: 25px;}
.tab-menu .list-btn img {width: 10px; height: auto;}
.tab-menu img {margin-right: 4px;} */


/* intro */
.intro {animation: intro 1.5s 0.1s linear alternate both; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999;}
.intro:before {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; width: 33px; height: 59px; background: url(./../img/intro_logo.png)no-repeat 50% 50%; background-size: cover;}
@keyframes intro {
        0% {top: 0; opacity: 1;}
        5% {top: 0; opacity: 1;}
        100% {top: -100vh; opacity: 0;}
}
.intro img {width: 100%; height: 100vh; object-fit: cover;}

.id_sns-area {position: fixed; bottom: 40px; right: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 10;}
.id_sns-area img {width: 30.52px; height: auto;}

.id_sns-area.id_sns-area_sub {position: initial; transform: initial; margin-top: 100px;}


/* full-page */
/* body {overflow: hidden;} */
.full-page {position: relative; width: 100%; height: 100vh; transition: all 1s;}
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {display:none;}
/* .full-page > section {position: absolute; top: 0; left: 0;} */

.target-area {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;}
.target-area a {font-size: 20px; font-weight: bold; color: #fff;}

/* .swiper-pagination {display: flex; align-items: flex-end; flex-flow: column; opacity: 1 !important; gap: 20px; right: 60px !important;} */
.swiper-pagination {display: none !important;}
.swiper-pagination-bullet {width: 30px; height: 2px; background: #dadada; right: 0; opacity: 1 !important; border-radius: 0; transition: all .3s;}
.swiper-pagination-bullet-active {width: 50px; background: #fff; opacity: 1 !important; transition: all .3s;}
.swiper-pagination-bullet {pointer-events: none;}

.page-number {position: fixed; bottom: 100px; right: 60px; z-index: 10;}
.page-number .on-number {letter-spacing: 1px; color: #ececec; font-size: 34px; font-weight: 400; line-height: 38px;}
.page-number .all-number {font-size: 24px; font-weight: 400; color: #fff; opacity: .3; border-left: 1px solid #fff; padding-left: 10px; margin-left: 20px;}


/* contact */
.contact-wrap {width: 100%; height: 100%; background: #27292b;}
.contact-area {display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; max-width: 700px; width: 100%; padding-top: calc(50vh - 210px); margin: 0 35.344vw;}
.contact-area .adm_text_edit {min-width: 230px; margin-right: 40px; font-size: 18px; font-weight: 300; line-height: 1.5; color: #fff;}
.contact-area .contacttxt {margin-bottom: 40px; font-size: 18px; font-weight: 300; line-height: 1.5; color: #fff;}
.contact-area .send-btn {display: flex; align-items: center; justify-content: center; width: 192px; height: 50px; border-radius: 25px; border: 2px solid #fff; font-size: 15px; font-weight: 400; line-height: 1.2; color: #fff;}

/* contact-pop */
.contact-pop {display: none; position: fixed; top: 50%; left: calc(50% + 300px); transform: translate(-50%, -50%); min-width: 554px; width: auto; padding: 30px 33px 44px; background: #27292b; z-index: 9999; box-sizing: border-box; border: 0.5px solid #fff;}
.contact-pop .popup-hd {display: flex; justify-content: center; margin-bottom: 63px;}
.contact-pop .popup-hd .popup-tit {font-size: 26px; font-weight: 600; line-height: 1; color: #fff;}
.contact-pop .popup-hd .close-pop {position: absolute; top: 33px; right: 33px; width: 22px; height: auto;}
.contact-pop .popup-body {width: 100%; height: auto;}
.contact-pop .popup-body .input-box {width: 100%; height: auto;}
.contact-pop .popup-body .input-box input {width: 100%; height: auto; padding: 0 11px 12px; margin-bottom: 44px; box-sizing: border-box; border-bottom: 0.5px solid #707070; font-size: 16px; font-weight: 300; color: #717171; outline: none;}
.contact-pop .popup-body .input-box textarea {width: 100%; height: 109px; padding: 0 11px; margin-bottom: 44px; box-sizing: border-box; border-bottom: 0.5px solid #707070; font-size: 16px; font-weight: 300; color: #717171; outline: none; resize: none;}
.contact-pop .popup-body .popup-btn {display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 25px; border: 0.5px solid #717171; box-sizing: border-box; font-size: 16px; font-weight: 400; line-height: 1.19; color: #717171;}

.id_sns-area_sub_txt {font-size: 12px; font-weight: 300; line-height: 1.17; color: #9a9a9a; text-align: center; padding-bottom: 41px; margin-top: 20px;}


.page_tab {position: relative;}
.page_tab .tab-menu {position: absolute; top: 0; left: 5px; margin: 0; padding: 0; gap: 13px;}

.detailimgs {-webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.hidden {display: none;}