/* 폰트파일 */

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Roboto:wght@100..900&display=swap');
.anonymous-pro-regular {
  font-family: "Anonymous Pro", monospace;
  font-weight: 400;
  font-style: normal;}

@font-face{
    font-family: 'pp mori';
    src: url(../font/PPMori-Regular.otf);
    font-weight: 400;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}
html {font-family: 'Pretendard';}

/* index.html */
/* header*/
.main {height: 100vh; background: url(../img/main_back.jpg) no-repeat center / cover ;}
.header {display: flex; justify-content: center; align-items: center; position: relative; height: 100px;}
.logo {position: fixed; text-align: center; font-size: 24px; font-family: "Anonymous Pro", monospace; font-weight: 400; z-index: 997;}
/* 메뉴 */
.menu {position: fixed; right: 40px; z-index: 999;}
.menu-wrap {position: relative; width: 34px; height: 26px; cursor: pointer;}
.menu-wrap .line {position: absolute; width: 100%; height: 4px; background: #222; right: 0;}
.menu-wrap .line:first-child {top: 0; transform-origin: 15% 50%; transition: .3s;}
.menu-wrap .line:nth-child(2) {top: calc(50% - 2px);width: 80%;}
.menu-wrap .line:last-child {bottom: 0; transform-origin: 15% 50%; transition: .3s;}
.menu-wrap.active .line:first-child{transform: rotate(45deg) translateX(10%);}
.menu-wrap.active .line:nth-child(2){opacity: 0;}
.menu-wrap.active .line:last-child {transform: rotate(-45deg) translateX(10%);}
#background {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background: rgba(0, 0, 0, .2); opacity: 0; z-index: 100;}
.main-nav {max-width: 480px; width: 100%; height: calc(var(--vh, 1vh) * 100); position: fixed; top:0; right: 0; bottom: 0; background-color: #fff;  padding: 0 3% 2%; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 998;}
.main-nav nav {padding-top: 24vh; }
.main-nav nav ul {display: flex; flex-direction: column; gap: 30px;}
.main-nav li {position: relative; font-weight: 500; font-size: 3rem;}
.main-nav li:nth-child(2)::after {content: '4'; width: 20px; height: 20px; border-radius: 50px; background: #CE0000; font-size: 1rem; display: inline-block; text-align: center; position: absolute; padding-top: 1px; color: #fff;}
.main-nav .contact {margin-top: auto; color: #444; display: flex; flex-direction: column; gap: 20px;}
.main-nav .contact span {margin-bottom: 5px; display: block;}
.main-nav .contact .add {font-size: 0.875rem; color: #cccccc; word-break: keep-all;}
.main-nav.active {transform: translateX(0);}
#background.active {display: block; opacity: 1;}

.inner {max-width: 1640px; width: 100%; margin: 0 auto; padding: 0 20px;} 
.main-tit {background: url(../img/main_con.png) no-repeat center; height: 442px; width: 100%; position: relative; display: flex; justify-content: center; align-items: start; margin-top: 10%;}
.con-nav {display: flex; margin-top: 6%;}
.con-nav li {flex : 1; font-family: 'pp mori'; font-size: 1.5rem; text-align: center;}
.con-nav li::before {display: inline-block; content: ''; width: 12px; height: 12px; border-radius: 50%; border: 1px solid #222; margin-right: 10px;}
.con-nav li:hover::before {background: #222; transition: ease-in-out 0.5s;}
.footer {font-family: 'pp mori'; position: fixed; bottom: 20px; left:0; right: 0; text-align: center; color: #999; z-index: 996; font-size: 16px;}


.m_main-tit {display: none;}

/* .path {fill : none; stroke: black; animation: draw 2s linear forwards;}
@keyframes draw {
  0% {

  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 0; 
    fill: black;
  }
}
.path1 {stroke-dashoffset : 647; stroke-dasharray: 647;}
.path2 {stroke-dashoffset : 1368; stroke-dasharray: 1368;}
.path3 {stroke-dashoffset : 1307; stroke-dasharray: 1307;}
.path4 {stroke-dashoffset : 875; stroke-dasharray: 875;}
.path5 {stroke-dashoffset : 708; stroke-dasharray: 708;}
.path6 {stroke-dashoffset : 1316; stroke-dasharray: 1316;}
.path7 {stroke-dashoffset : 472; stroke-dasharray: 472;}
 */


/* work.html */
.full {padding: 0 20px;}
.work-con {display: flex; align-items: flex-start; flex-wrap : wrap; padding-top: 10vh;}
.work-con li{width: 25%; padding: 0 10px; flex: 0 0 25%;}
.work-con li .num {padding: 0 0 20px;}
.work-con li .img {overflow: hidden; }
.work-con li img {width :100%;}
.work-con li:nth-child(n+5) {margin-top: 10vh;}
.work-con li p {margin: 15px 0 5px; letter-spacing: -0.35px; font-size: 20px;}
.work-con li span {color: #c4c4c4; text-transform: uppercase;}
.work-con li:hover img{transform: scale(1.05); transition: all ease-in-out 0.4s;}
/* 팝업 */
.popup-wrap {width: 100%; height: 100vh; position: fixed; inset: 0; display: none; overflow-y: scroll; background: rgba(0,0,0,0.5); z-index: 1000;}
.popup-wrap .popup-con {max-width: 1280px; background-color: #fff;  width: 100%; margin: 6rem auto; position: relative; display: none;}
.popup-wrap.on {display: block;}
.popup-con.on { display: block; }
.popup-wrap .popup-con .close-btn {position: fixed; top: 8rem; right: calc((100% - 1280px)/2 + 40px); width: 50px; height: 50px; border:0; background: url(../img/btn_close.svg) no-repeat center; color: #222; transition: all .3s ease-in-out; text-indent: -9999px; }
/* .popup-wrap .popup-con .close-btn:after {content: "\00d7"; font-size:30pt; line-height: 27px;} */
.popup-wrap .popup-con .img-box {width: 100%; height: 600px; background: url(../img/workthumb01.jpg) no-repeat center/ cover; }
.popup-wrap .popup-con .txt-box {display: flex; flex-direction: column; gap: 10px; padding: 50px 40px; letter-spacing: -0.35px;}
.popup-wrap .popup-con .txt-box li:first-child {text-align: center; font-size: 32px; margin-bottom: 40px;}
.popup-wrap .popup-con .txt-box li {font-size: 20px; }
.popup-wrap .popup-con .txt-box li h2 {font-size: 2rem; font-weight: 600;}
.popup-wrap .popup-con .txt-box li span {color: #999; margin-right: 10px;}
.popup-wrap .popup-con img {margin: 0 auto; width: 80%;}
body.modal-open {overflow: hidden;}

.popup-wrap .modal2 .img-box {background-image: url(../img/workthumb02.jpg);}
.popup-wrap .modal3 .img-box {background-image: url(../img/workthumb03.jpg);}
.popup-wrap .modal4 .img-box {background-image: url(../img/workthumb04.jpg);}

.popup-wrap .popup-con .text-box {display: flex; justify-content: space-between; align-items:center; padding: 60px 100px 50px 60px;}
.popup-wrap .popup-con .text-box .tit h2 {font-size: 2.25rem; font-weight: 600; margin-bottom: 4px;}
.popup-wrap .popup-con .text-box .tit .client {font-size: 1.25rem; color: #666;}
.popup-wrap .popup-con .text-box .project {display: flex; flex-direction: column; gap: 10px; font-size:1.125rem;}
.popup-wrap .popup-con .text-box .project .list {display: flex;}
.popup-wrap .popup-con .text-box .project .list span {color: #999; width: 90px;}
.popup-wrap .popup-con .overview {display: flex; width: 70%; margin: 10% auto; align-items: baseline; gap: 2rem;}
.popup-wrap .popup-con .overview .subtit {color: #666; text-transform: uppercase; flex-shrink: 0; font-family: 'pp mori';}
.popup-wrap .popup-con .overview p {line-height: 1.4; font-size: 1.125rem; flex: 1;}

/* about.html */
.about .full {background: url(../img/about_bg1.png) no-repeat center / cover; width: 100%; height: 600px; }
.about .main-txt {font-size: 3.75rem; padding-top: 7.5rem; margin-bottom: 300px; letter-spacing: -0.35px;} 
.about .con_box {display: flex; flex-wrap: wrap; gap: 20em; padding-top: 100px;} 
.about .con_box .list {font-family: pp mori; font-size: 3.125rem; color: #d8d8d8; padding-left: 12%;}
.about .con_box .right_box {flex: 2; display: flex; flex-direction: column; gap: 4.75rem; padding-top: 6%; padding-right: 10%;}
.about .con_box .right_box strong {font-size: 1.625rem; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; display: block;}
.about .con_box .right_box p {font-size: 1.375rem; line-height: 1.5; color: #222; word-break: keep-all; letter-spacing: -0.35px;}
.tags {display: flex; justify-content: end; padding: 14% 0 7%}


/* archive.html */

.archive .full {width: 100%; margin-bottom: auto;}
.archive .tit {padding-top: 7%; text-align: center; font-size: 2.375rem;} 
.archive .txt-box {padding-top: 5.3%; display: flex; flex-direction: column;}
.archive .txt-box p {font-size: 24px; line-height: 2.5; background: url(../img/archive_bg.png) repeat-y left top; padding: 0 20px 10%; letter-spacing: -0.35px;}
.time {align-self: flex-end; font-family: 'pp mori'; font-size: 1.375rem; color: #b9b9b9;}
/* display: flex; flex-wrap: wrap;  width: calc(100% / 3);*/
.archive .img-box { padding: 15% 0 5% 0; column-count: 3; column-gap: 20px;}
.archive .img-box li {break-inside: avoid; margin-bottom: 10px;}
.archive .img-box li img {width: 100%;  display: block; margin-bottom: 10px;} 
.archive .img-box li p {margin-bottom: 10px; line-height: 1.5;}
i.em {vertical-align: text-bottom;}
.archive .m_txt-box {display: none;}
.archive .m_txt-box p {font-size: 24px; line-height: 2.5; background: url(../img/m_archive_bg.png) repeat-y left top; padding: 0 20px 10%; letter-spacing: -0.35px;}



/* ㅡㅡㅡㅡㅡ반응형 리사이징ㅡㅡㅡ*/

/* 일반 데스크탑 (1281px ~ 1440px) */
@media (max-width: 1440px) {
.about .con_box {gap: 14em;}
.about .con_box .list {padding-left: 5%;}
.about .con_box .right_box {padding-right: 5%;}
}

/* 랩탑 / 태블릿 가로 (1025px ~ 1280px) */
@media (max-width: 1280px) {
  html{font-size: 14px;}
  /* .logo {font-size: 1.5rem;} */
  .menu {right: 30px;}
  .popup-wrap .popup-con .close-btn {right: 40px; /* padding-right만 고려 */}
  .main-tit {background-size:contain; background-position: top center; }
  .main-tit svg {width: 70%;}
  .work-con li {padding: 0 5px;}
  .work-con li p {font-size: 16px;}
  .about .full {height: 500px;}
  .about .main-txt {font-size: 3.25rem; margin-bottom: 200px;}
  .about .con_box {gap: 10em; padding-top: 5%;}
  .archive .txt-box p  {font-size: 20px; line-height: 3;}
  .popup-wrap .popup-con {width: 100%;}
  .popup-wrap .popup-con img {width: 100%;}
  
}

/* 태블릿 세로 (769px ~ 1024px) */
@media (max-width: 1024px) {
  .about .con_box {flex-direction: column; gap:100px}
  .about .con_box .list {padding-left: 0;}
  .about .con_box .right_box {padding: 0;}
  .popup-wrap .popup-con {width: 90%;} 
  .popup-wrap .popup-con .close-btn {right: 7%;}
  .popup-wrap .popup-con .text-box {flex-direction: column; align-items: start; padding: 50px 30px; gap: 2rem;}
  .popup-wrap .popup-con .text-box .tit {display: flex; gap: 10px; align-items: center; align-self: center;}
  .popup-wrap .popup-con .img-box {height: 450px;}
  .popup-wrap .popup-con .overview {width: 80%;}

}

/* 모바일 일반 (481px ~ 768px) */
@media (max-width: 768px) {
  html {font-size: clamp(14px, 1vw + 10px, 16px);}
  .full {padding: 0;}
  .inner {padding: 0 10px;}
  .work-con li{width: 50%; padding: 0 10px; flex: 0 0 50%;}
  .work-con li:nth-of-type(n+3) {margin-top: 10vh;}
  .work-con li .num {padding : 0 0 12px;}
  .popup-wrap .popup-con {width: 100%;} 
  .archive .img-box {column-gap: 10px;}
  .about .main-txt {font-size: 2.5rem; margin-bottom: 200px; padding-top: 3.5rem;}
  .about .con_box .list {font-size: 2.25rem;}
  .about .con_box .right_box p {font-size: 1.125rem;}
  .about .full {height: 400px;} 
  .main-tit {display: none;}
  .m_main-tit {display: block; width: 100%; height: 50vh; display: flex; justify-content: center; align-items: center; }
  .m_main-tit .img {background: url(../img/m_main_con.png) no-repeat center; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
  .con-nav {flex-direction: column; align-items: start; gap: 20px; margin-top: auto; padding: 0 10px 10vh;} 
  .con-nav li {font-size: 24px;}
  .main .inner {display: flex; flex-direction: column; min-height: 70vh;}
  
  .archive .txt-box {display: none;}
  .archive .m_txt-box {padding-top: 30px; display: flex; flex-direction: column;}
  .archive .m_txt-box p {font-size: 16px; padding: 0 10px 20%;}
  .archive .img-box {column-count: 2;}
  .menu {right: 20px;}
  .main-nav {padding: 0 20px 20px;}
  .main-nav nav {padding-top: 20vh;}
  .tags {padding: 90px 0 60px;}
  .archive .tit {font-size: 2rem;}
  
  .popup-wrap .popup-con {width: 90%;}
  .popup-wrap .popup-con img {width: 100%;}
  .popup-wrap .popup-con .close-btn {right: 7%; top: 7rem; background-size: 60%; width: 40px; height: 40px;}
  .popup-wrap .popup-con .overview {width: 85%; flex-direction: column; gap: 12px;}
  .popup-wrap .popup-con .overview p {font-size: 1rem;}
  .popup-wrap .popup-con .text-box {padding: 30px 20px;}
  .popup-wrap .popup-con .text-box .tit {flex-direction: column; gap: 5px; align-items: start; align-self: start;}
  .popup-wrap .popup-con .text-box .tit h2 {font-size: 2rem;}
  .popup-wrap .popup-con .text-box .project .list span {width: 80px;}
  .popup-wrap .popup-con .img-box {height: 320px;}
  .logo {font-size: 20px;}
  .header {height: 60px;}
  .menu-wrap .line {height: 3px;}
  .menu-wrap {width: 30px; height: 22px;}
  
}