html, body {height: 100%; scroll-behavior: smooth; margin: 0; -ms-overflow-style: none;}
/* body {overflow-y: hidden;} */
body::-webkit-scrollbar{width: 16px;}
body::-webkit-scrollbar-track {background-color: #f2f2f2;}
body::-webkit-scrollbar-thumb {background:linear-gradient(to bottom, #514ecf, #450093); border-radius: 10px;}
body::-webkit-scrollbar-thumb:hover {background:linear-gradient(to bottom, #504ecfb6, #450093b2);}
body::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
width:16px;height:16px;background:#f2f2f2;} 
::selection {background: thistle;}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;700;900&family=Montserrat:wght@400;500;700;900&family=Tangerine:wght@400;700&display=swap');

@font-face {
  font-family: 'S-CoreDream-1Thin';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'S-CoreDream-3Light';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'S-CoreDream-4Regular';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'S-CoreDream-7ExtraBold';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'DOSMyungjo';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSMyungjo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 메인 그라디언트 linear-gradient(135deg, #5151cf, #47089a); */

.mont {font-family: 'Montserrat', sans-serif;}
.core_thin {font-family: 'S-CoreDream-1Thin';}
.core_light {font-family: 'S-CoreDream-3Light'; line-height: 2rem;}
.core {font-family: 'S-CoreDream-4Regular'; line-height: 2rem;}
.core_bold {font-family: 'S-CoreDream-7ExtraBold';}
.serif {font-family: 'Tangerine', cursive;}
.bold {font-weight: 700;}
.game {font-family: 'DOSMyungjo';}
.fraun {font-family: 'Fraunces', serif;}

.txt_ani_wrap {overflow-y: hidden;}
.txt_ani_wrap > div {opacity: 0;}
.txt_ani_wrap > a {opacity: 0;}
.txt_ani_wrap::after {opacity: 0;}
.txt_ani_wrap > div.ani {opacity: 1; animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both; backface-visibility: hidden; -webkit-animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both;}
.txt_ani_wrap > a.ani {opacity: 1; animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both; backface-visibility: hidden; -webkit-animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both;}
.txt_ani_wrap.ani::after {opacity: 0; opacity: 1; animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both; backface-visibility: hidden; -webkit-animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both;}

.txt_ani_wrap > div.ani_popol {opacity: 1; animation: slide-up-popol 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both; backface-visibility: hidden; -webkit-animation: slide-up-popol 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both;}

.animate_line {width: 0%; height: 1px; background: #111; transition: all 2s; margin-top: 70px; transform: rotateY(180deg);}

@keyframes slide-up{
  0% {opacity: 0; transform: translate3d(0,100%,0);}
  80%{opacity: 1;}
  100% {transform: translate3d(0,0,0);}
}

@keyframes slide-up-popol{
  0% {opacity: 0; transform: translate3d(0,100%,0);}
  80%{opacity: 1;}
  100% {transform: translate3d(0,100px,0);}
}

.container_1420 {width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 40px;}

#header {width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 100; background: transparent; color: #fff; padding: 0 40px; 
  display: flex; display: -ms-flexbox; 
  justify-content: space-between; -webkit-box-pack: justify; -ms-flex-pack: justify;
  align-items: center; -ms-flex-align: center;
  mix-blend-mode: difference;
}
#header .logo {position: relative; width: 70px !important; height: 35px !important;}
#header .logo img {width: 100%; position: absolute; top: 0; left: 0;}
#header .logo2 {opacity: 0;}
#header .hamberger {cursor: pointer; width: 30px; height: 30px; position: relative; /* right: 40px; */}
#header .hamberger .line {height: 1px; background: #fff; position: absolute; right: 0;}
#header .hamberger .line1 {width: 30px; top: 0;}
#header .hamberger .line2 {width: 20px; top: 12px; right: 5px;}
#header .hamberger .line3 {width: 30px; top: 24px;}

.counsel_btn {width: 200px; height: 45px; position: fixed; right: -45PX; transform: translateY(-50%) rotate(-90deg); border-radius: 50px; 
  display: inline-flex; 
  align-items: center; -ms-flex-align: center;
  cursor: pointer; z-index: 100; transition: top 0.2s;}
.counsel_btn.make_btn {top: 75%; background: linear-gradient(to left, #ec1578, #fa5369);}
.counsel_btn.popol_btn {top: 50%; background: linear-gradient(to left, #5151cf, #47089a);}
.counsel_btn.kakao_btn {top: 25%; background: linear-gradient(to left, #febc00, #FEE500);}
.counsel_btn.kakao_btn p {color: #000;}
.counsel_btn.counsel_btn_mo {display: none;}
.counsel_btn p {color: #fff; width: 100%; text-align: center; font-size: 16px;}
.counsel_btn:hover {box-shadow: 3px 7px 7px rgba(0,0,0,0.1);}
.counsel_btn.make_btn:hover {background: linear-gradient(to left, #fa5369, #ec1578); top: calc(75% - 5px);}
.counsel_btn.popol_btn:hover {background: linear-gradient(to left, #47089a, #5151cf); top: calc(50% - 5px);}
.counsel_btn.kakao_btn:hover {background: linear-gradient(to left, #FEE500, #febc00); top: calc(25% - 5px);}
.counsel_btn.counsel_btn_mo:hover {background: linear-gradient(to left, #47089a, #5151cf); box-shadow: 3px 7px 7px rgba(0,0,0,0.1); top: calc(65% - 5px);}

#scroll_btn {position: fixed; bottom: 40px; right: 20px; color: #fff; z-index: 10; font-size: 14px;
  animation-name: scrollAni;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  cursor: default;
}
#scroll_btn i {margin-left: 25px; font-size: 24px; font-weight: bold;}
@keyframes scrollAni {
  from {right: 20px;}
  to {right: 40px;}
}

.inquiry {text-align: right; font-size: 50px !important; color: #fff; display: inline-block; float: right; cursor: pointer; position: relative; /* width: 192px; */ width: 237px; height: 45px; z-index: 2;}
.inquiry > p {position: absolute; right: 0; bottom: 0; z-index: 10; display: inline-table;}
.inquiry > p::after {content: ""; display: block; border-bottom: 2px solid #fff; margin-top: 20px; clear: both;}
.inquiry:hover {cursor: none;}
.inquiry:hover .cursor {display: block; transform: scale(2);}
.cursor {
  opacity: 0.8;
  z-index: 1;
  display: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: all 0.3s ease;
  transition-property: background, transform;
  transform-origin: 100% 100%;
  background-size: cover;
  background: linear-gradient(to right, #fa526a, #ee3c8f);
}
.cursor p {color: #fff; font-size: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.cursor-grow {transform: scale(2);}


.ham.x_btn {color: #fff; font-size: 50px; position: absolute; display: inline-block; top:
15px; right: 45px; cursor: pointer; z-index: 100;}
.ham_bg {width: 100%; height: 100vh; position: absolute; top: -200%; left: 0; z-index: 97;transition: all 0.3s;}
.ham_bg1 {background: #777;}
.ham_bg2 {background: #666;}
.ham_bg3 {background: #555;}
.ham_bg3 {background: #444;}
#hamberger {width: 100%; height: 100vh; background: #333; color: #fff; position: fixed; left: 0; top: -200vh; z-index: 98;}
#hamberger .inquiry {margin-top: 0 !important;}
#hamberger .ham_top {height: 200px;}
#hamberger .ham_top .lt {float: left; height: 100%; float: left; 
  display: flex; display: -ms-flexbox; 
  flex-direction: column; -webkit-box-orient: vertical; -ms-flex-direction: column;
  justify-content: flex-end; -webkit-box-pack: end; -ms-flex-pack: end;
  /* align-items: center; -webkit-box-align: center; -ms-flex-align: center; */
  -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
#hamberger .ham_top .lt .info:not(:nth-child(3)) {margin-bottom: 10px;}
#hamberger .ham_top .lt .info.tel::before {content: "T."; display: inline;}
#hamberger .ham_top .lt .info.email::before {content: "E."; display: inline;}
#hamberger .ham_top .lt .info.adress::before {content: "A."; display: inline;}
#hamberger .ham_top .rt {height: 100%; float: right; 
  display: flex; display: -ms-flexbox; 
  align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end;
}

#hamberger .ham_bottom {position: relative; 
  height: calc(100vh - 200px); height: -webkit-calc(100vh - 200px); height: -moz-calc(100vh - 200px);
  width: 100%; 
  display: flex; display: -ms-flexbox; 
  flex-direction: column;  -webkit-box-orient: vertical; -ms-flex-direction: column;
  justify-content: flex-end; -webkit-box-pack: end; -ms-flex-pack: end;
}
#hamberger .ham_bottom .folder {padding: 50px 65px; border: 1px solid #fff; border-bottom: 0; border-radius: 100px 0 0 0; background: #333; position: absolute; transition: all 0.7s; width: 61%;}
#hamberger .ham_bottom .folder:hover {background: linear-gradient(135deg, #5151cf, #47089a);}
#hamberger .ham_bottom .folder:hover .tag {display: block;}
#hamberger .ham_bottom .folder .title {font-style: italic; font-size: 50px; margin-bottom: 30px; font-weight: 700;}
#hamberger .ham_bottom .folder .title > * {display: inline;}
#hamberger .ham_bottom .folder .title i {float: right; font-size: larger; opacity: 0; transform: translateX(-30px); transition: all 0.5s;}
#hamberger .ham_bottom .folder:hover .title i {opacity: 1; transform: translateX(0);}
#hamberger .ham_bottom .folder .tag {font-size: 20px; display: none; line-height: 2rem; font-style: italic;}
#hamberger .ham_bottom .folder.work {z-index: 104; left: 80px; height: 30%;}
#hamberger .ham_bottom .folder.story {z-index: 103; right: 0; height: 50%;}
#hamberger .ham_bottom .folder.portfolio {z-index: 102; left: 0; height: 60%;}
#hamberger .ham_bottom .folder.about {z-index: 101; right: 80px; height: 80%;}
#hamberger .ham_bottom .folder.work:hover {height: 55%;}
#hamberger .ham_bottom .folder.story:hover {height: 70%;}
#hamberger .ham_bottom .folder.portfolio:hover {height: 85%;}
#hamberger .ham_bottom .folder.about:hover {height: 95%;}
#hamberger .inquiry > p {z-index: 1;}
#hamberger .inquiry > p > span {display: inline-block; transition: all 0.2s;}

.sub {background: #f2f2f2; width: 100%; padding-top: 160px; /* overflow-y: scroll; */}
.content {width: 100%;}
.sub .sub_lt {float: left; width: 20%; padding: 0 40px;}
.sub .sub_rt {float: right; width: 80%; padding-right: 90px;}
.sub .sub_lt::after, .sub .sub_rt::after {content: ""; display: block; clear: both;}

.request_btn {width: 350px; height: 65px; line-height: 65px; text-align: center; background: #111; color: #fff; position: relative; border-radius: 50px; font-size: 20px; margin: 0 auto 130px auto; display: block; cursor: pointer; overflow: hidden;}
.request_btn p {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.request_btn::before {position: absolute; top: 0; left: 0; z-index: 0; content: ""; display: block; width: 100%; height: 0%; background: #5f30b8; transition: all 0.2s;}
.request_btn::after {position: absolute; bottom: 0; left: 0; z-index: 0; content: ""; display: block; width: 100%; height: 0%; background: #5f30b8; transition: all 0.2s;}
.request_btn::before,
.request_btn::after {left: 0;	width: 100%;	height: 0;	background-color: #5f30b8;}
.request_btn:hover {color: #fff;}
.request_btn:hover::before {height: 50%;}
.request_btn:hover::after {height: 50%;}

.per.popup {display: none; width: 70vw; height: 80vh; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; background: #fff; box-shadow: 10px 10px 10px rgba(0,0,0,0.2); color: #111; padding: 50px; overflow-y: scroll; font-size: 14px; line-height: 1.5rem;}
.pop.x_btn {position: absolute; top: 100px; right: 120px; font-size: 70px; color: #fff; cursor: pointer;}
.popup_bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.75); z-index: 1000; display: none;}


#footer {padding: 50px 0 40px 0; font-size: 16px; color: #111; 
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  display: flex; display: -ms-flexbox;
  border-top: 1px solid #111;}

#footer .footer_rt {display: flex; display: -ms-flexbox;}
#footer .footer_rt a {width: 130px; height: 130px; border: 1px solid #111; border-radius: 50%; text-align: center; display: inline-flex; 
  justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center;
  align-items: center; -webkit-box-align: center; -ms-flex-align: center;
}
#footer .footer_rt a:nth-child(2) {margin-left: 30px;}


/* ---------------------------------------- 231107 더포크 모달 추가 시작 */

.fork__modal_container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1001;
  display: none;

  width: auto; height: auto; transform: translate(180px, 100px);
}

.fork__modal_wrap{
  max-width: 366px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  /* transform: translate(180px, 100px); */
  height: fit-content;
}

.fork__modal_wrap > a{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fork__modal_wrap > a > figure,
.fork__modal_wrap > a > picture{
  /* max-width: 366px;
  aspect-ratio: 122/181; */
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.fork__modal_wrap > a > figure img,
.fork__modal_wrap > a > picture img{
  width: 100%;
}

.fork__modal_back{
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.6); */
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.fork__today_container{
  padding-left: 10px;
  width: 100%;
  height: 40px;
  background-color: #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.fork__today_container > button{
  border: 0;
  background: none;
  outline: 0;
  color: inherit;
  box-sizing: border-box;
}

#today__cookie_btn{
  font-size: 12px;
  white-space: nowrap;
}

#today__close_btn{
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

/* ---------------------------------------- 231107 더포크 모달 추가 끝 */

@media screen and (max-width: 1420px) {
  .sub .sub_lt {padding: 0;}
  .sub .sub_lt h1 {font-size: 50px;}
  .request_btn {font-size: 18px;}
  .animate_line {margin-top: 50px;}
}

@media screen and (max-width: 1024px) {
  .request_btn {font-size: 16px; width: 250px;}
  #footer {display: block; padding: 30px 0; font-size: 14px;}
  #footer .footer_lt {margin-bottom: 20px;}
  #footer .footer_rt a {width: 100px; height: 100px; line-height: 22px;}
}

@media screen and (max-width: 768px) {
  body {overflow-y: visible;}
  .core_light {line-height: 1.75rem;}
  .core {line-height: 1.75rem;}
  .sub {padding-top: 110px;}
  .sub .sub_lt {display: none;}
  .sub .sub_rt {width: 100%; padding: 0 35px;}
  .animate_line {margin-top: 25px;}
  #header .logo {width: 66px; height: 33px;}
  #hamberger .ham_top {height: 140px;}
  #hamberger .ham_top .lt {font-size: 12px;}
  .inquiry {font-size: 35px !important; width: 135px;}
  #hamberger .ham_bottom {height: calc(100vh - 140px);}
  #hamberger .ham_bottom .folder {background: #222;} 
  #hamberger .ham_bottom .folder.work {height: 20vh; left: 0;}
  #hamberger .ham_bottom .folder.story {height: 37vh; right: 0;}
  #hamberger .ham_bottom .folder.portfolio {height: 54vh; left: 25px;}
  #hamberger .ham_bottom .folder.about {height: 71vh; right: 15px;}
  #hamberger .ham_bottom .folder.work:hover {height: 33vh;}
  #hamberger .ham_bottom .folder.story:hover {height: 48vh;}
  #hamberger .ham_bottom .folder.portfolio:hover {height: 63vh;}
  #hamberger .ham_bottom .folder.about:hover {height: 76vh;}
  #hamberger .ham_bottom .folder .tag br {display: none;}

  #hamberger .ham_bottom .folder {border-radius: 60px 0 0 0; padding: 20px 30px; width: 75%;/*  background: linear-gradient(135deg, #5151cf, #47089a); */}
  #hamberger .ham_bottom .folder .tag {display: block; font-size: 14px; line-height: 1.325rem;}
  #hamberger .ham_bottom .folder .title {font-size: 26px; font-style: italic; margin-bottom: 10px; font-weight: 700;}
  #hamberger .ham_bottom .folder .title > * {display: inline;}
  #hamberger .ham_bottom .folder .title i {opacity: 1; transform: translateX(0);}

  .counsel_btn {display: none;}
  .counsel_btn.counsel_btn_mo {display: block; width: 45px; height: 45px; top: auto; right: 15px; bottom: 15px; transform: initial;}
  .counsel_btn.counsel_btn_mo i {font-size: 24px; line-height: 45px;}
  #footer {padding: 20px 0; font-size: 12px;}
  #footer .footer_lt {margin-bottom: 15px; line-height: 1.5rem;}
  #footer .footer_rt a {width: 80px; height: 80px; line-height: 18px;}

  .txt_ani_wrap > div.ani_popol {opacity: 1; animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both; backface-visibility: hidden; -webkit-animation: slide-up 0.7s cubic-bezier(0.19, 0.9, 0.9, 1) both;}

  
}

@media screen and (max-width: 560px) {
  .sub {padding-top: 100px;}
  .animate_line {margin-top: 15px;}
  #hamberger .ham_bottom .folder .title {font-size: 22px; margin-bottom: 5px;}
  #hamberger .ham_bottom .folder .tag {font-size: 12px; line-height: 1.25rem;}
  #hamberger .ham_bottom .folder .tag br {display: none;}
  #hamberger .ham_bottom .folder.work {left: 0;}
  #hamberger .ham_bottom .folder.story {right: -25px;}
  #hamberger .ham_bottom .folder.portfolio {left: -20px;}
  #hamberger .ham_bottom .folder.about {right: 0;}
  .inquiry {font-size: 28px !important; width: 110px;}
  .inquiry > p::after {margin-top: 10px;}
  #hamberger .inquiry {font-size: 22px !important;}
  #hamberger .inquiry p::after {margin-top: 8px;}
  .ham.x_btn {top: 25px; right: 30px;}
  .inquiry:hover {cursor: auto;}
  .cursor {display: none;}
  .inquiry:hover .cursor {display: none;}
  #header .logo img.port_logo {top: 0.15em !important; left: 5.5em !important; width:7.5em !important;}
}

@media screen and (max-width: 400px) {
  .core_light {line-height: 1.625rem;}
  #hamberger .ham_top {height: 110px;}
  #hamberger .ham_bottom {height: calc(100vh - 110px);}
  .inquiry {font-size: 24px !important; width: 93px;}
  .inquiry > p::after {margin-top: 5px;}
  #hamberger .ham_top .lt {font-size: 10px;}
  #hamberger .ham_bottom .folder .tag {font-size: 10px; line-height: 1rem;}
  #hamberger .ham_top .lt .info:not(:nth-child(3)) {margin-bottom: 3px;}
  #hamberger .ham_top .lt .adress p {margin-top: 3px !important;}
  #hamberger .ham_bottom .folder.work {left: -26px;}
  #hamberger .ham_bottom .folder.story {right: -26px;}
  #hamberger .ham_bottom .folder.portfolio {left: -7px;}
  #hamberger .ham_bottom .folder.about {right: -13px;}
  #footer {font-size: 11px; line-height: 1.325rem;}
  #header .logo img.port_logo {top: 0.4em !important; left: 5.3em !important; width:5.8em !important;}
}




/* 포트폴리오 혁신바우처 로고 */
/* #header .logo img.port_logo {filter: invert(1); top: 1.8em; width: auto; left: 8.3em;} */
#header .logo img.port_logo {filter: invert(1); top: -5px; width: auto; left: 6em;}