@charset "UTF-8";
@import url("../font/scotchdisplaycond/stylesheet.css");
@import url("../font/Cafe24Classic/stylesheet.css");
@import url("../font/gamtan/stylesheet.css");
@import url("../font/s-core-dream/stylesheet.css");
@import url("reset.css");
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Suit";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Ria";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/RiaSans-ExtraBold.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GangwonEducationTteontteon";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff") format("woff");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "SchoolSafeAutumnTrip";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/HakgyoansimGaeulsopungL.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "OngleIpSeaBreeze";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2510-1@1.0/Ownglyph_the_sea_breeze-Rg.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
:root {
  --color-point-: #ff5500;
  --color-text-xs: #000000;
  --color-text-free: #333333;
  --color-white: #ffffff;
  --colorDark-1: #121212;
  --colorDark-3: #333333;
  --colorDark-5: #555555;
  --colorLight-1: #fafafa;
  --colorblack-40: rgba(0, 0, 0, 0.4);
  --font-family-en-lg: "Scotch-Display-Cond-Rm";
  --font-family-basic: "Suit";
  --font-family-heading-en: "Scotch-Display-Cond-Rm";
  --font-family-heading-ko: "Suit";
  --font-size-h1: 8rem;
  --font-size-t1: 13rem;
  --font-size-t2: 4rem;
  --font-size-t3: 3.2rem;
  --font-size-t4: 24rem;
  --font-size-xl: 2.4rem;
  --font-size-lg: 2rem;
  --font-size-md: 1.8rem;
  --font-size-sm: 1.6rem;
  --font-size-xs: 1.4rem;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-800: 800;
  --margin-20: 2rem;
  --margin-24: 2.4rem;
  --margin-28: 2.8rem;
  --margin-32: 3.2rem;
  --margin-40: 4rem;
  --margin-60: 6rem;
  --margin-100: 10rem;
  --margin-160: 16rem;
}

@media screen and (max-width: 480px) {
  :root {
    --font-size-xl: 3.33rem;
    --font-size-lg: 2.66rem;
    --font-size-md: 2.66rem;
    --font-size-sm: 2.33rem;
    --font-size-xs: 2rem;
  }
}
html,
body {
  font-size: 62.5%; /* 10px */
}
@media screen and (max-width: 1280px) {
  html,
  body {
    font-size: 50%; /* 8px */
  }
}
@media screen and (max-width: 480px) {
  html,
  body {
    font-size: 37.5%; /* 6px */
  }
}

body {
  font-family: var(--font-family-basic);
  font-weight: 400;
  line-height: 1.4;
  font-size: var(--font-size-md);
  overflow-x: hidden;
  margin: 0 auto;
  color: var(--color-text-free);
}

.section {
  padding: 16rem 0;
}
@media screen and (max-width: 1024px) {
  .section {
    padding: 8rem 0;
  }
}

.inner {
  max-width: 1600px;
  width: calc(100% - 40px);
  margin: 0 auto;
}
@media screen and (max-width: 480px) {
  .inner {
    width: calc(100% - 32px);
  }
}

.inner-big {
  max-width: 1800px;
  width: calc(100% - 40px);
  margin: 0 auto;
}

.heading {
  text-align: center;
  margin-bottom: var(--margin-40);
}
.heading h3 {
  font-size: var(--font-size-h1);
  font-family: var(--font-family-heading-en);
  line-height: 1.2;
}
.heading p {
  font-size: var(--font-size-lg);
  margin-top: var(--margin-20);
}

.btn-link {
  display: inline-block;
  border-radius: 40px;
  margin: 20px 60px auto;
}
.btn-link a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 40px;
  position: relative;
}
.btn-link a::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../img/icon-arrow-next.svg") center center/100% no-repeat;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.5s linear;
}
.btn-link a:hover::after {
  right: 0;
}
.btn-link img {
  width: 40px;
}

.btn-download {
  height: 50px;
  margin-top: 20px !important;
}
.btn-download a {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--colorDark-1);
  padding: 0 var(--margin-40);
  border-radius: 40px;
  font-size: 17px;
  position: relative;
  overflow: hidden;
}
.btn-download a::before {
  content: "";
  width: 0;
  height: 100%;
  background-color: var(--color-point-);
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.5s linear;
}
.btn-download a:hover::before {
  width: 100%;
}
.btn-download a:hover span {
  color: #fff;
  position: relative;
  z-index: 9;
}
.btn-download a:hover svg {
  position: relative;
  z-index: 9;
}
.btn-download a:hover svg path {
  fill: #ffffff;
}
.btn-download img {
  width: 20px;
}

.tag {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  flex-wrap: wrap;
}
.tag li {
  font-size: var(--font-size-sm);
  color: var(--colorDark-5);
}
.tag li::before {
  content: "#";
}
.tag li.position {
  font-weight: var(--font-weight-800);
}

.btn-more {
  height: 4.4rem;
  padding: 0 2rem;
  display: inline-block;
  margin-top: 6rem;
  border-radius: 4rem;
  background-color: #fff;
  color: var(--color-text-free);
  line-height: 4.4rem;
}
.btn-more::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: var(--color-point-);
  border-radius: 50%;
  margin-left: 2rem;
  display: inline-block;
}

.btn-view_site {
  width: 20rem;
  height: 5.2rem;
  display: block;
  text-align: center;
  margin: 0 auto;
  margin-top: 6rem;
  border-radius: 4rem;
  background-color: #fff;
  color: var(--color-text-free);
  line-height: 5.2rem;
  font-size: 2rem;
  border: 1px solid var(--color-point-);
}
.btn-view_site span {
  display: inline-block;
  vertical-align: baseline;
  margin-left: 8px;
}

.header {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99;
}
@media screen and (max-width: 1024px) {
  .header {
    top: auto;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
  }
}
.header .logo a {
  display: block;
}
.header .logo a img {
  height: 60px;
}
.header .inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .nav {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(7px);
  padding: 14px 20px;
  border-radius: 8px;
}
.header .nav .gnb {
  display: flex;
  gap: 20px;
}
.header .nav .gnb > li {
  position: relative;
  border-radius: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  white-space: nowrap;
}
@media screen and (max-width: 375px) {
  .header .nav .gnb > li {
    font-size: 14px;
  }
}
.header .nav .gnb > li.on {
  position: relative;
  display: flex;
  gap: 4px;
  align-items: center;
}
.header .nav .gnb > li.on::before {
  content: "";
  width: 20px;
  height: 24px;
  background: url("../img/logo.png") 0 0/100% no-repeat;
  /* position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%); */
  display: block;
}
.header .nav .gnb > li.on {
  color: #fff;
  font-weight: var(--font-weight-600);
}
.header .nav .gnb > li .depth-01 {
  display: block;
  line-height: 100px;
  padding: 0 4rem;
}
.header .nav .gnb > li .depth-02 {
  white-space: nowrap;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background-color: #fff;
  border: 1px solid var(--colorblack-40);
  border-radius: 2rem;
  display: none;
}
.header .nav .gnb > li .depth-02 li a {
  padding: 10px 20px;
  display: block;
}
.header .nav .gnb > li:hover .depth-02 {
  display: block;
}

/* .header*/
.main_visual {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  background: #00000e;
  background: linear-gradient(90deg, rgb(0, 0, 14) 28%, rgb(19, 14, 17) 55%, rgb(0, 0, 14) 90%);
}
.main_visual .text_wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.main_visual .text_wrap .text {
  text-align: left;
  margin-bottom: 40px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #f2f2f2;
  z-index: 1;
}
.main_visual .text_wrap h2 {
  font-family: var(--font-family-en-lg);
  font-size: var(--font-size-t1);
  margin-bottom: 2rem;
}
.main_visual .text_wrap p {
  font-size: 2.8rem;
  line-height: 1.6;
}
.main_visual .text_wrap p span {
  display: block;
  margin-top: var(--margin-28);
  font-size: var(--font-size-md);
  font-style: italic;
}
.main_visual .text_wrap img,
.main_visual .text_wrap video {
  width: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.content_wrap {
  margin-top: 100vh;
  background-color: #fff;
  position: relative;
  z-index: 9;
}

.profile .inner {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .profile .inner {
    flex-direction: column;
  }
}
.profile .my {
  width: 600px;
}
@media screen and (max-width: 1280px) {
  .profile .my {
    width: 400px;
  }
}
@media screen and (max-width: 767px) {
  .profile .my {
    width: 100%;
  }
}
.profile .my .personal .name {
  font-size: 8rem;
  line-height: 1.3;
}
.profile .my .personal .name strong {
  font-family: var(--font-family-heading);
}
.profile .my .personal .name b {
  color: var(--color-point-);
}
.profile .my .personal-list {
  margin: 3.2rem 0;
}
.profile .my .personal-list li {
  display: flex;
  margin-top: 8px;
  font-size: 20px;
}
@media screen and (max-width: 480px) {
  .profile .my .personal-list li {
    font-size: 16px;
  }
}
.profile .my .personal-list li .tit {
  width: 80px;
  font-weight: 700;
  display: block;
}
.profile .my-photo {
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .profile .my-photo {
    width: 80%;
  }
}
@media screen and (max-width: 480px) {
  .profile .my-photo {
    width: 100%;
    margin-bottom: 20px;
  }
}
.profile .my-photo img {
  width: 100%;
  display: block;
}
.profile .infomation {
  width: calc(100% - 600px - 100px);
}
@media screen and (max-width: 1280px) {
  .profile .infomation {
    width: calc(100% - 400px - 5%);
  }
}
@media screen and (max-width: 767px) {
  .profile .infomation {
    width: 100%;
  }
}
.profile .infomation > div {
  margin-bottom: var(--margin-60);
}
.profile .infomation > div strong {
  display: block;
  font-size: var(--font-size-t3);
  font-weight: 700;
  margin-bottom: 16px;
}
.profile .infomation > div ul > li {
  margin-top: 8px;
  display: flex;
}
@media screen and (max-width: 1024px) {
  .profile .infomation > div ul > li {
    flex-direction: column;
    margin-top: 16px;
  }
}
.profile .infomation > div ul > li span {
  font-weight: 500;
  font-size: 20px;
}
.profile .infomation > div ul > li span i {
  display: block;
  font-size: 16px;
  color: var(--colorDark-5);
}
.profile .infomation > div ul > li b.tit {
  width: 200px;
  display: block;
  color: #888;
  font-weight: 400;
}
.profile .infomation .skill ul {
  margin-bottom: 20px;
}
.profile .infomation .skill ul li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-direction: row;
}
.profile .infomation .skill ul li a,
.profile .infomation .skill ul li span {
  margin-top: 6px;
  padding: 0 8px;
  border-radius: 4px;
  background-color: #ededeb;
  font-size: 16px;
  color: #5a1f01;
}

/* .profile end */
/* portfolio start */
.portfolio {
  padding: 0;
}
.portfolio .heading_wrap {
  position: relative;
}
.portfolio .heading_wrap .angle {
  width: 100%;
  height: 100vh;
  background-color: var(--colorDark-1);
}
.portfolio .heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 16rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 480px) {
  .portfolio .heading {
    padding-bottom: 0;
  }
}
.portfolio .heading > div {
  color: var(--colorLight-1);
  padding: 0 var(--margin-20);
  word-break: keep-all;
}
.portfolio .heading .angle {
  /*  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border-radius: 50%; */
}
.portfolio .heading h3 {
  margin-bottom: var(--margin-60);
  font-size: var(--font-size-t1);
  line-height: 1;
  color: #ff5500;
}
.portfolio .heading strong {
  display: block;
  margin-bottom: var(--margin-20);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-t2);
}
.portfolio .heading .text-slide {
  display: flex;
}
.portfolio .challenge .item_wrap {
  background-color: var(--colorDark-1);
  padding: 0 0 var(--margin-160);
  display: flex;
}
.portfolio .challenge .item_wrap .list {
  position: relative;
}
.portfolio .challenge .item_wrap .list .item_inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 40px;
}
.portfolio .challenge .item_wrap .list .item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #fff;
  padding: var(--margin-60);
  border-radius: 24px;
}
@media screen and (max-width: 767px) {
  .portfolio .challenge .item_wrap .list .item {
    flex-direction: column;
  }
}
@media screen and (max-width: 480px) {
  .portfolio .challenge .item_wrap .list .item {
    padding: var(--margin-24);
  }
}
.portfolio .challenge .item_wrap .list .item .image {
  width: 50%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .portfolio .challenge .item_wrap .list .item .image {
    width: 100%;
  }
}
.portfolio .challenge .item_wrap .list .item .image .desktop {
  width: 88%;
  height: 500px;
  overflow: hidden;
  overflow-y: scroll;
  border-radius: 24px;
}
@media screen and (max-width: 767px) {
  .portfolio .challenge .item_wrap .list .item .image .desktop {
    width: 80%;
    height: 40vh;
  }
}
@media screen and (max-width: 480px) {
  .portfolio .challenge .item_wrap .list .item .image .desktop {
    width: 90%;
  }
}
.portfolio .challenge .item_wrap .list .item .image .desktop-web {
  width: 100%;
}
.portfolio .challenge .item_wrap .list .item .image .desktop-etc {
  width: 100%;
  overflow-y: auto;
}
.portfolio .challenge .item_wrap .list .item .image .desktop img {
  width: 100%;
}
.portfolio .challenge .item_wrap .list .item .image .desktop::-webkit-scrollbar {
  width: 7px;
}
.portfolio .challenge .item_wrap .list .item .image .desktop::-webkit-scrollbar-thumb {
  height: auto;
  background-color: #000000;
  border-radius: 5px;
}
.portfolio .challenge .item_wrap .list .item .image .desktop::-webkit-scrollbar-track {
  background: var(--colorblack-40);
  border-radius: 5px;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-app {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}
@media screen and (max-width: 480px) {
  .portfolio .challenge .item_wrap .list .item .image .mobile-app {
    gap: 8px;
    margin-top: var(--margin-24);
  }
}
.portfolio .challenge .item_wrap .list .item .image .mobile-app .mobile-frame {
  width: 33.33%;
  border-radius: 20px;
  overflow-x: auto;
  position: relative;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-app .mobile-frame::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url("../img/portfolio/mobile-frame.png") top center/100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-app .mobile-frame div {
  padding-bottom: 201.66%;
  position: relative;
  overflow-x: auto;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-app .mobile-frame div::-webkit-scrollbar {
  display: none;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-app .mobile-frame img {
  width: 87%;
  margin: 0 auto;
  display: block;
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
@media screen and (max-width: 480px) {
  .portfolio .challenge .item_wrap .list .item .image .mobile-app .mobile-frame img {
    /*  width: calc(100% - 13%);
     top: 8%; */
  }
}
.portfolio .challenge .item_wrap .list .item .image .mobile-app .mobile-frame::-webkit-scrollbar {
  display: none;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info {
  width: 200px;
  height: 450px;
  position: absolute;
  right: 0;
  bottom: 0;
  border: 2px solid var(--colorDark-1);
  padding: 8px;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 12px;
}
@media screen and (max-width: 767px) {
  .portfolio .challenge .item_wrap .list .item .image .mobile-image_info {
    width: 200px;
    height: 40vh;
    bottom: -28px;
  }
}
@media screen and (max-width: 480px) {
  .portfolio .challenge .item_wrap .list .item .image .mobile-image_info {
    width: 130px;
    border-radius: 8px;
    height: 300px;
    padding: 6px;
  }
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info .mobile {
  overflow: hidden;
  overflow-y: scroll;
  border-radius: 12px;
  margin-bottom: 8px;
}
@media screen and (max-width: 480px) {
  .portfolio .challenge .item_wrap .list .item .image .mobile-image_info .mobile {
    height: 100%;
    border-radius: 6px;
  }
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info .mobile img {
  width: 100%;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info .mobile::-webkit-scrollbar {
  width: 7px;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info .mobile::-webkit-scrollbar-thumb {
  height: auto;
  background-color: #000000;
  border-radius: 5px;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info .mobile::-webkit-scrollbar-track {
  background: var(--colorblack-40);
  border-radius: 5px;
}
@media screen and (max-width: 480px) {
  .portfolio .challenge .item_wrap .list .item .image .mobile-image_info .qr-image {
    display: none;
  }
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info .qr-image img {
  height: 100px;
}
.portfolio .challenge .item_wrap .list .item .image .mobile-image_info {
  /* qr */
}
.portfolio .challenge .item_wrap .list .item .item_info {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--margin-40) 0;
}
@media screen and (max-width: 767px) {
  .portfolio .challenge .item_wrap .list .item .item_info {
    width: 100%;
  }
}
.portfolio .challenge .item_wrap .list .item .item_info .text_wrap h4 {
  font-family: var(--font-family-heading-ko);
  font-size: var(--font-size-t2);
  font-weight: var(--font-weight-800);
}
.portfolio .challenge .item_wrap .list .item .item_info .text_wrap h4 span {
  font-family: var(--font-family-basic);
  font-size: var(--font-size-md);
  color: var(--colorDark-5);
}
.portfolio .challenge .item_wrap .list .item .item_info .text_wrap h4 p {
  font-family: var(--font-family-basic);
  font-size: var(--font-size-md);
}
.portfolio .challenge .item_wrap .list .item .item_info .text_wrap > p {
  margin: var(--margin-28) 0 var(--margin-40);
  line-height: 1.6;
  word-break: keep-all;
}
.portfolio .challenge .item_wrap .list .item {
  /* .item_info */
}
.portfolio .challenge .item_wrap .list {
  /* .item */
}
.portfolio .challenge .item_wrap {
  /* list */
}
.portfolio {
  /* challenge */
}
.portfolio .work .heading_wrap .angle {
  background-color: #f6f7f2;
}
.portfolio .work .heading_wrap .heading > div {
  color: var(--colorDark-1);
}
.portfolio .work h3 {
  color: #ff5500;
}
.portfolio .work #work {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.portfolio .work .item_wrap {
  position: relative;
  background-color: #ffffff;
}
.portfolio .work .item_wrap .project_wrap {
  background-color: #eb570d;
  border-radius: 24px;
  padding: var(--margin-160) 0;
}
.portfolio .work .item_wrap .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 36px;
}
@media screen and (max-width: 480px) {
  .portfolio .work .item_wrap .inner {
    width: 100%;
  }
}
.portfolio .work .item_wrap .inner-big {
  border-radius: 24px;
}
.portfolio .work .item_wrap .list {
  width: 100%;
}
.portfolio .work .item_wrap .item {
  width: 32%;
  background-color: #f8f8f8;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
  padding: var(--margin-40);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 480px) {
  .portfolio .work .item_wrap .item {
    width: 100%;
    padding: var(--margin-24);
  }
}
.portfolio .work .item_wrap .item.sample {
  background-color: #eaeaea;
}
.portfolio .work .item_wrap .item .image {
  padding-bottom: 80%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.portfolio .work .item_wrap .item .image div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.portfolio .work .item_wrap .item .image div img {
  width: 100%;
}
.portfolio .work .item_wrap .item .img {
  position: relative;
  width: 100%;
}
.portfolio .work .item_wrap .item .img-container {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
@media screen and (max-width: 640px) {
  .portfolio .work .item_wrap .item .img-container {
    height: 320px;
  }
}
.portfolio .work .item_wrap .item .img-container img {
  width: 100%;
  /*  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(1.4);
  transform-origin: 50% 50%; */
}
.portfolio .work .item_wrap .item .text {
  padding: var(--margin-20) 0;
}
.portfolio .work .item_wrap .item .text h4 {
  font-size: var(--font-size-t3);
  font-weight: var(--font-weight-800);
}
.portfolio .work .item_wrap .item .text h4 span {
  font-family: var(--font-family-basic);
  font-size: var(--font-size-md);
  color: var(--colorDark-5);
  font-weight: var(--font-weight-400);
}
.portfolio .work .item_wrap .item .text ul {
  margin: 12px 0 var(--margin-28);
}
.portfolio .work .item_wrap .item .text ul li {
  margin: 4px 0;
  color: var(--colorDark-5);
}
.portfolio .work .item_wrap .item:hover i {
  gap: 16px;
}
.portfolio .work .item_wrap .graphic .heading_wrap {
  width: 100%;
}
.portfolio .work .item_wrap .graphic .heading_wrap .project-heading {
  width: 100%;
  text-align: center;
}
.portfolio .work .item_wrap .graphic .heading_wrap .project-heading h3 {
  color: var(--colorDark-1);
  font-family: var(--font-family-heading-en);
  font-size: var(--font-size-h1);
}
.portfolio .work .item_wrap .graphic .heading_wrap .project-heading p {
  font-weight: var(--font-weight-500);
}
.portfolio .work .item_wrap .graphic .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 36px;
}
.portfolio .work .item_wrap .graphic .item {
  width: 24%;
  padding: var(--margin-32);
}
@media screen and (max-width: 640px) {
  .portfolio .work .item_wrap .graphic .item {
    width: 48%;
  }
}
@media screen and (max-width: 480px) {
  .portfolio .work .item_wrap .graphic .item {
    width: 100%;
    padding: var(--margin-20);
  }
}
.portfolio .work .item_wrap .graphic .item div {
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.portfolio .work .item_wrap .graphic .item div img,
.portfolio .work .item_wrap .graphic .item div video {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.portfolio .work .item_wrap .graphic .item p {
  margin-top: 8px;
  font-size: 16px;
}
.portfolio .work .item_wrap .graphic {
  /* .item */
}
.portfolio .work .item_wrap {
  /* .graphic */
}
.portfolio {
  /* .work */
  /* 메인 프로젝트의 포트폴리오 버튼 */
}
.portfolio .button_wrap {
  margin-top: var(--margin-24);
}
.portfolio .button_wrap .button_inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.portfolio .button_wrap .button_inner li {
  width: 100%;
  background-color: #f8f8f8;
  color: #ff5500;
  height: 50px;
  border-radius: 8px;
  border: 1px solid #ff5500;
  font-size: 17;
}
.portfolio .button_wrap .button_inner li div {
  margin-left: 8px;
}
.portfolio .button_wrap .button_inner li path {
  stroke: #ff5500;
}
.portfolio .button_wrap .button_inner li a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portfolio .button_wrap .button_inner li :hover div {
  animation: btnIcon infinite alternate 0.5s linear;
}
.portfolio .button_wrap .button_inner .point {
  background-color: #ff5500;
  color: #fff;
}
.portfolio .button_wrap .button_inner .point path {
  stroke: #ffffff;
}
.portfolio .button_wrap .dark li {
  border: 1px solid var(--colorDark-1);
}
.portfolio .button_wrap .dark .point {
  background-color: var(--colorDark-1);
}
.portfolio {
  /* button_wrap */
}

@keyframes btnIcon {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(5px);
  }
}
/* .note */
.note {
  background-color: #f6f7f2;
}
.note .list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}
@media screen and (max-width: 767px) {
  .note .list {
    gap: 24px;
  }
}
.note .list .item {
  width: calc(33.3333333333% - 21.33px);
  background-color: #fff;
  position: relative;
}
@media screen and (max-width: 767px) {
  .note .list .item {
    width: calc(50% - 12px);
  }
}
@media screen and (max-width: 480px) {
  .note .list .item {
    width: 100%;
  }
}
.note .list .item:hover {
  box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
}
.note .list .item a {
  height: 100%;
  display: block;
  padding: 3.2rem;
  cursor: default;
}
.note .list .item img.site_logo {
  height: 28px;
}
.note .list .item strong {
  font-size: var(--font-size-t3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid #ccc;
  word-break: keep-all;
}
.note .list .item p {
  word-break: keep-all;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4rem;
}
.note .list .item span {
  font-size: 14px;
  position: absolute;
  right: 3.2rem;
  bottom: 3.2rem;
}

/* .note */
.footer {
  background-color: #ffffff;
  position: relative;
  z-index: 1;
  color: #3b3b3b;
  text-align: center;
  padding: 8rem 0;
}
.footer strong {
  display: block;
  font-family: var(--font-family-en-lg);
  font-weight: normal;
  font-size: var(--font-size-h1);
  text-align: center;
}/*# sourceMappingURL=main.css.map */