@charset "utf-8";
/* * layout.css.css * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다. * * 1) root 설정 * 2) 폰트설정 * 3) 레이아웃설정 * */ /* 1) root 설정 */:root {
	--color-base:#000;
	--color-point:#7e00ff;
	--color-hover:#af60ff;
	--color-white:#fff;
	--color-black:#000;
	--font-base:1.6rem;
	--pagd-pad:80rem;
	--trans-ani:0.3s ease 0s;
	--border-radius-base:.6rem;
}
/* custom selection */::selection {
	background:#7e00ff;
	color:#fff;
	text-shadow:none;
}
::-moz-selection {
	background:#7e00ff;
	color:#fff;
	text-shadow:none;
}
::-webkit-selection {
	background:#7e00ff;
	color:#fff;
	text-shadow:none;
}
/* img 설정 */ 
#content img {
	max-width:100%;
}
/* 2) 폰트설정 */ 
body {
	font-size:var(--font-base,16rem);
}

/* header */ 
header {
	position:fixed;
	top:4.9rem;
	left:14rem;
	min-width:160rem;
	z-index:10;
}
header .logo a {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-transform:uppercase;
	font-size:1.8rem;
	font-weight:400;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
}
header .logo img {
	width:5rem;
	margin-right:1.5rem;
	-webkit-transition:all 1s ease;
	-moz-transition:all 1s ease;
	-ms-transition:all 1s ease;
	transition:all 1s ease;
}
header .logo:hover {
	font-weight:600;
	color:var(--color-point);
}
header .logo:hover img {
	transform:scale(1.2);
}
/* menu */ .gnb,.gnb_sub {
	position:absolute;
	top:0;
	right:0;
	z-index:100;
	font-size:1.7rem;
	background-color:var(--color-base);
	color:var(--color-white);
	border-radius:var(--border-radius-base);
}
.gnb ul,.gnb_sub ul {
	display:flex;
}
.gnb ul>li>a,.gnb_sub ul>li>a {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:13rem;
	height:1.5rem;
	margin:1.6rem 1.4rem;
	overflow:hidden;
	text-transform:uppercase;
}
.gnb ul>li>a>span,.gnb_sub ul>li>a>span {
	position:absolute;
	display:block;
	overflow:hidden;
	-webkit-transition:.25s;
	-moz-transition:.25s;
	-ms-transition:.25s;
	transition:.25s
}
.gnb ul>li>a>.hover,.gnb_sub ul>li>a>.hover {
	margin-top:3.4rem;
	color:var(--color-hover);
}
.gnb ul>li>a:hover>.txt,.gnb_sub ul>li>a:hover>.txt {
	margin-top:-3rem;
}
.gnb ul>li>a:hover>.hover,.gnb_sub ul>li>a:hover>.hover {
	margin-top:0;
}
.gnb ul>li.now>a,.gnb_sub ul>li.now>a {
	color:var(--color-hover);
}
header.active .logo {
	color:var(--color-white);
	-webkit-transition:.25s;
	-moz-transition:.25s;
	-ms-transition:.25s;
	transition:.25s;
}
header.active .gnb,header.active .gnb_sub {
	background:var(--color-white);
	color:var(--color-base);
	-webkit-transition:.25s;
	-moz-transition:.25s;
	-ms-transition:.25s;
	transition:.25s;
}
/* project */ .project_wrap {
	width:160rem;
	margin:10rem auto 0;
}
.project {
	display:flex;
	flex-wrap:wrap;
    justify-content: space-between;
	gap:2.5rem;
	padding:0;
}
.project li {
	/* cursor:pointer;*/ border-radius:1rem;
	width:32%;
}
.project li .img {
	position:relative;
	background:#f8f8f8;
	border-radius:1rem;
	-webkit-transition:.25s;
	-moz-transition:.25s;
	-ms-transition:.25s;
	transition:.25s
}
.project img {
	width:100%;
	height:auto;
	display:block;
	border-radius:1rem;
}
.project .info {
	position:relative;
	padding:3rem 1rem 3rem;
}
.project .info .tag {
	display:inline-flex;
	gap:.4rem;
}
.project .info .tag span {
	display:inline-block;
	padding:.1rem 1.2rem;
	letter-spacing:-.1rem;
	font-size:1.3rem;
	font-weight:100;
	border-radius:2.5rem;
	border:.1rem solid #111;
}
.project .info .tag span[data-tag="main"] {
	color:var(--color-point);
	border-color:var(--color-point);
}
.project .info .tag span[data-tag="publishing"] {
	color:#00c2a4;
	border-color:#00e6c3;
}
.project .info .tag span[data-tag="edit"] {
	color:#20bd01;
	border-color:#20bd01;
}
.project .info .tag span[data-tag="etc"] {
	color:#f26303;
	border-color:#f26303;
}
.project .info .title_wrap {
	position:relative;
	padding-bottom:1.2rem;
}
.project .info .title {
	padding-left:.4rem;
	padding-right:10rem;
	padding-top:1rem;
	overflow-wrap:break-word;
	font-size:2.0rem;
	font-weight:300;
	-webkit-transition:.25s;
	-moz-transition:.25s;
	-ms-transition:.25s;
	transition:.25s
}
.project .info .company {
	position:absolute;
	top:1.5rem;
	right:.4rem;
	font-size:1.6rem;
	font-weight:100;
	color:#8a8a8a;
}
.project .info .desc {
	padding-left:.4rem;
	font-size:1.6rem;
	font-weight:100;
	color:#777;
}
.project>li:hover .title {
	color:var(--color-point);
}
.project>li:hover .img {
	box-shadow:rgba(50,50,93,0.15) 0px 50px 100px -20px,rgba(0,0,0,0.2) 0px 30px 50px -30px;
}
.project>li.none:hover .title {
	color:var(--color-base);
}
.project>li.none:hover .img {
	box-shadow:none;
}
.project_wrap.sub {
	width:100%;
	margin-top:8rem;
	padding:0 3rem;
	box-sizing:border-box;
}
.project_wrap.sub .project li {
	width:23.5%;
}
.project_wrap.main .project>li>a[href] .img::before {
	content:"view more";
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	position:absolute;
	top:1rem;
	left:0;
	width:100%;
	height:34rem;
	;
	background-color:var(--color-point);
	border-radius:1rem;
	text-transform:uppercase;
	font-size:2.4rem;
	opacity:0;
	transition:all 0.3s;
}
.project_wrap.main .project>li:hover>a[href] .img::before {
	top:0;
	opacity:.8;
}
.project_wrap.sub .project>li>a[href] .img::before {
	content:"view more";
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	position:absolute;
	top:1rem;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--color-point);
	border-radius:1rem;
	text-transform:uppercase;
	font-size:2.4rem;
	opacity:0;
	transition:all 0.3s;
}
.project_wrap.sub .project>li:hover>a[href] .img::before {
	top:0;
	opacity:.8;
}
/* sub title */ .sub_title {
	text-align:center;
	padding-top:20rem;
}
.sub_title h2 {
	font-size:6.8rem;
}
/* footer */ footer {
	display:flex;
	margin:15rem auto 10rem;
	padding:13rem 10rem;
	width:160rem;
	color:var(--color-white);
	background:var(--color-black);
	border-radius:1rem;
	box-sizing:border-box;
}
footer .footer_logo {
	width:37rem;
	margin-top:9rem;
}
footer .footer_logo a {
	display:flex;
	align-items:center;
	font-size:1.8rem;
	font-weight:200;
	text-transform:uppercase;
	margin-bottom:3.5rem;
}
footer .footer_logo .logo img {
	width:5rem;
	margin-right:1.5rem;
}
footer .footer_logo .copyright {
	line-height:1.65;
	font-size:1.6rem;
	font-weight:100;
	color:#a4a4a4;
}
footer .footer_logo .copyright b {
	font-weight:100;
	text-decoration:underline;
	color:var(--color-white);
}
footer .footer_contact {
	width:calc(100% - 37rem);
}
footer .footer_contact .email {
	display:block;
	margin-bottom:3rem;
	font-family:'Pretendard';
	font-size:4.6rem;
	font-weight:500;
}
footer .footer_contact .txt {
	position:relative;
	display:inline-block;
	margin-bottom:3rem;
	line-height:1.45;
	font-family:'Pretendard';
	font-weight:100;
	font-size:4.8rem;
}
footer .footer_contact .txt .quotes {
	position:absolute;
	left:-3.2rem;
	font-family:'KOHIBaeumOTF';
}
footer .footer_contact .txt .quotes.close {
	left:initial;
	bottom:0;
	right:-3.2rem;
}
footer .footer_contact .desc {
	padding-left:.5rem;
	font-family:'Pretendard';
	font-weight:100;
	font-size:2.2rem;
	color:#a4a4a4;
}
.scroll_button {
	position:fixed;
	overflow:hidden;
	bottom:2rem;
	right:2rem;
	opacity:0;
	transform:translateY(20px);
	transition:opacity 0.5s,transform 0.5s;
	background-color:var(--color-point);
	border:none;
	font-size:1.8rem;
	padding:1rem 1.5rem;
	border-radius:.5rem;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	cursor:pointer;
	z-index:20;
	bottom:0;
}
.scroll_button::before {
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	border-radius:50% 50% 0 0;
	width:100%;
	height:0%;
	background:#be2ffa;
	z-index:-1;
	transition:0.8s;
}
.scroll_button:hover::before {
	height:180%;
	background-color:#7000e2;
}
/* header 반응형 */ @media screen and (max-width:1600px) {
	header {
		left:4rem;
		min-width:100%;
	}
	.gnb {
		right: 4rem;
	}
}
/* 📱 Tablet (1024px 이하) */
@media screen and (max-width: 1024px) {
    :root {
      --font-base: 1.4rem;
      --pagd-pad: 4rem;
    }
  
    header {
      top: 2rem;
      left: 2rem;
      min-width: 100%;
    }
  
    .gnb ul,
    .gnb_sub ul {
      flex-direction: column;
      gap: 1rem;
    }
  
    .gnb ul > li > a,
    .gnb_sub ul > li > a {
      margin: 1rem 0;
    }
  
    .project_wrap,
    footer {
      width: 100%;
      padding: 0 2rem;
      box-sizing: border-box;
    }
  
    .project li {
      width: 48%;
    }
  
    .project_wrap.sub .project li {
      width: 48%;
    }
  
    .sub_title h2 {
      font-size: 4.2rem;
    }
  
    footer {
      flex-direction: column;
      gap: 5rem;
      padding: 5rem 2rem 8rem;
      margin:2rem 0 0;
      border-radius: 0;
    }
  
    footer .footer_logo,
    footer .footer_contact {
      width: 100%;
    }
  
    footer .footer_contact .email {
      font-size: 3.2rem;
    }
  
    footer .footer_contact .txt {
      font-size: 3.6rem;
    }
  
    footer .footer_contact .desc {
      font-size: 1.8rem;
    }
  }
  
  /* 📲 Mobile (768px 이하) */
  @media screen and (max-width: 768px) {
    .project li,
    .project_wrap.sub .project li {
      width: 100%;
    }
  
    .sub_title h2 {
      font-size: 3.2rem;
    }
  
    header .logo img {
      width: 3.5rem;
      margin-right: 1rem;
    }
  
    .gnb,
    .gnb_sub {
      font-size: 1.4rem;
    }
  
    .project .info .title {
      font-size: 1.6rem;
    }
  
    .project .info .desc {
      font-size: 1.4rem;
    }
  
    .scroll_button {
      font-size: 1.4rem;
      padding: 0.8rem 1.2rem;
    }
  
    footer .footer_contact .email {
      font-size: 2.4rem;
    }
  
    footer .footer_contact .txt {
      font-size: 2.8rem;
    }
  
    footer .footer_contact .desc {
      font-size: 1.6rem;
    }
}