@charset "UTF-8";
@import url("font.css");

:root {
  --main-color-G: #338a93;
  --mian-color-Y: #ffbc04;
  --text-color: #575757;
  --text-color-point: #ff6a6a;
  --bg-color: #f2efea;
  --KRfont: "온글잎 안될과학궤도체", serif;
  --text-stroke: 1px #575757;
}

/* 초기화 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
img {
  vertical-align: top;
}

/* 공통클래스 */
body,
html {
  background-color: var(--bg-color);
  background-image: url("../images/background.png");
  background-size: cover;
  color: var(--text-color);
  line-height: 1;
  overflow-x: hidden;
  user-select: none;
  cursor: url('../images/pencil.cur') 0 31,url('../images/pencil.png') 0 31, auto;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
body.modal-open {
  overflow: hidden;
  /* height: 100%; */
}
.container {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}
/* 모달 닫기 버튼 */
.modal-close:hover {
  cursor: pointer;
}
.modal-close i {
  font-size: 48px;
  color: var(--main-color-G);
}
.modal-close i::before {}

/* typo */
.content-title {
  font-size: 100px;
  font-family: "Oranienbaum";
  color: var(--mian-color-Y);
}
.point-title {
  color: var(--main-color-G);
  font-size: 120px;
  font-family: "Beau Rivage";
  font-weight: bold;
  -webkit-text-stroke: 2px var(--main-color-G);
  margin-right: 13px;
}
.acquisition-year {
  color: #484848;
  font-family: "Bangers";
  font-size: 25px;
}
.year-content {
  font-family: "온글잎 주리손편지";
  font-size: 22px;
}
.about-content-title {
  font-family: "Bangers";
  text-transform: uppercase;
  color: var(--mian-color-Y);
  font-size: 50px;
}
.about-point-title {
  color: var(--main-color-G);
  font-size: 58px;
}
.design-contents .design-content .design-content-title {
  font-family: var(--KRfont);
  color: var(--main-color-G);
  font-size: 52px;
  -webkit-text-stroke: 1px var(--main-color-G);
}
.design-contents .design-content-title span {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* go-top-btn */
.go-top-btn {
  position: fixed;
  bottom: 5%;
  right: 3%;
  z-index: 999;
}
.go-top-btn a {
  position: relative;
  background-color: rgba(255,255,255,0.7);
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
}
.go-top-btn a i {
  font-size: 32px;
  color: var(--main-color-G);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.go-top-btn a i::before {}
/* header */
header {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: 220px;
}
header .nav {
}
header ul.header-menu {
  display: flex;
  gap: 30px;
  align-items: center;
  padding-top: 50px;
  margin-left: -50px;
  transform: scale(0.85);
  position: relative;
  width: 1000px;
  z-index: 10;
}
header ul.header-menu::before {
  content: "";
  display: block;
  background: url("../images/rope.png") no-repeat;
  width: 1000px;
  height: 100px;
  position: absolute;
  left: 0px;
  top: 65px;
  transform: scale(1.1);
}
header ul li.menu {
  background-size: cover;
  position: relative;
  z-index: 11;
}
header ul li.menu a {
  display: block;
  color: #fff;
  font-size: 32px;
  font-family: "온글잎 위씨리스트";
}
header ul li.menu:first-child {
  width: 135px;
  height: 75px;
  background: url("../images/home-bg.png") no-repeat;
  transform: rotate(-12deg);
  top: 100px;
}
header ul li.menu:nth-child(2) {
  width: 140px;
  height: 67px;
  background: url("../images/about-bg.png") no-repeat;
  transform: rotate(4deg);
}
header ul li.menu:nth-child(3) {
  width: 103px;
  height: 53px;
  background: url("../images/web-bg.png") no-repeat;
  transform: rotate(-11deg);
  top: 30px;
  left: -10px;
}
header ul li.menu:nth-child(4) {
  width: 151px;
  height: 58px;
  background: url("../images/design-bg.png") no-repeat;
  transform: rotate(-3deg);
  z-index: 2;
}
header ul li.menu:nth-child(5) {
  width: 155px;
  height: 92px;
  background: url("../images/contact-bg.png") no-repeat;
  transform: rotate(-3.5deg);
  top: 15px;
}
header ul li.menu:first-child > a,
header ul li.menu:nth-child(2) > a,
header ul li.menu:nth-child(3) > a,
header ul li.menu:nth-child(4) > a {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}
header ul li.menu:nth-child(5) > a {
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}
header ul li.menu:first-child > a::before,
header ul li.menu:nth-child(2) > a::before,
header ul li.menu:nth-child(3) > a::before,
header ul li.menu:nth-child(4) > a::before,
header ul li.menu:nth-child(5) > a::before {
  display: block;
  content: "";
  position: absolute;
  z-index: 11;
  width: 27px;
  height: 42px;
}
header ul li.menu:first-child > a::before {
  background: url("../images/pin-W.png") no-repeat;
  top: -30px;
  left: 18px;
}
header ul li.menu:nth-child(2) > a::before {
  background: url("../images/pin-Y.png") no-repeat;
  top: -30px;
  left: 30px;
}
header ul li.menu:nth-child(3) > a::before {
  background: url("../images/pin-Y.png") no-repeat;
  top: -28px;
  left: 13px;
}
header ul li.menu:nth-child(4) > a::before {
  background: url("../images/R-pin-G.png") no-repeat;
  top: -30px;
  left: 35px;
}
header ul li.menu:nth-child(5) > a::before {
  background: url("../images/pin-W.png") no-repeat;
  top: -34px;
  left: 38px;
}
header ul li .submenu {
  position: relative;
  display: none;
}
header ul li .submenu.active {
  display: block;
}
header ul li .submenu > li {
  position: absolute;
}
header ul li .submenu > li:first-child {
  top: 85px;
  left: -20px;
  background: url('../images/about-bg.png') no-repeat;
  width: 141px;
  height: 68px;
  background-size: cover;
}
header ul li .submenu > li:first-child::before {
  content: '';
  display: block;
  background: url('../images/R-pin-R.png') no-repeat;
  width: 26px;
  height: 35px;
  position: absolute;
  top: -18px;
  left: 52%;
  transform: translateX(-50%);
}
header ul li .submenu > li:first-child::after {
  content: '';
  display: block;
  background: url('../images/one-rope.png') no-repeat;
  background-size: cover;
  width: 50px;
  height: 276px;
  position: absolute;
  z-index: -1;
  left: 41%;
  top: -67px;
}
header ul li .submenu > li:nth-child(2) {
  top: 170px;
  background: url('../images/home-bg.png') no-repeat;
  background-size: cover;
  width: 134px;
  height: 75px;
  right: 20px
}
header ul li .submenu > li:nth-child(2)::before {
  content: '';
  display: block;
  background: url('../images/pin-W.png') no-repeat;
  width: 24px;
  height: 36px;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}
header ul li .submenu > li:last-child {
  top: 254px;
  background: url('../images/contact-bg.png') no-repeat;
  background-size: cover;
  width: 155px;
  height: 93px;
  left: -25px;
}
header ul li .submenu > li:last-child::before {
  content: '';
  display: block;
  background: url('../images/pin-Y.png') no-repeat;
  width: 24px;
  height: 36px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}
header ul li .submenu > li a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
header ul li .submenu > li:nth-child(2) a {
  top: 55%;
}
header ul li .submenu > li:last-child a {
  top: 60%;
}

header ul li span {
  color: var(--mian-color-Y);
  font-family: "PalanquinDark";
  font-size: 64px;
  position: absolute;
}
header ul li span.chap {
  top: -75px;
  transform: rotate(-12deg);
}
header ul li span.ters {
  top: -15px;
  left: 70px;
  transform: rotate(15deg);
}
header ul li span.chap::before,
header ul li span.ters::before {
  content: "";
  display: block;
  z-index: 11;
  width: 27px;
  height: 42px;
  position: absolute;
}
header ul li span.chap::before {
  background: url("../images/R-pin-R.png") no-repeat;
  left: 50px;
  top: 10px;
}
header ul li span.ters::before {
  background: url("../images/R-pin-G.png") no-repeat;
  left: 35px;
  top: 12px;
}
header .year {
  width: 150px;
  line-height: 1;
  position: absolute;
  top: 30px;
  right: 0;
}
header .year span:first-child {
  font-family: "온글잎 위씨리스트";
  font-size: 52px;
}
header .year span:last-child {
  font-family: "NATS";
  font-size: 42px;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  z-index: 10;
}
header .year span:last-child::after {
  width: 230px;
  height: 40px;
  content: "";
  display: block;
  opacity: 0.8;
  background: var(--mian-color-Y);
  position: absolute;
  top: 25px;
  right: -80px;
  z-index: -1;
}

/* home */
.home {
  height: 600px;
}
/* home-title */
.home .title {
  width: 720px;
  margin: 30px auto 0;
  position: relative;
}
.home .title .name {
  font-family: var(--KRfont);
  font-size: 52px;
  -webkit-text-stroke: 1px #575757;
  position: absolute;
  top: -10px;
  right: -60px;
  transform: rotate(7deg);
}
.home .title .name::before {
  content: "";
  display: block;
  width: 180px;
  height: 85px;
  background: url("../images/arrow.png") no-repeat;
  position: absolute;
  top: 55px;
  right: 210px;
}
.home .title .name span {}
.home .title .design-text {}
.home .title .design-text img {
}
.home .title .portfolio {
  font-family: "PalanquinDark";
  font-weight: 400;
  color: var(--main-color-G);
  font-size: 200px;
  display: flex;
  margin-top: -30px;
  position: relative;
  mix-blend-mode: multiply;
}
.home .title .portfolio::before {
  width: 85px;
  height: 155px;
  content: "";
  display: block;
  background: url("../images/glitter.png") no-repeat;
  position: absolute;
  left: -100px;
  top: -65px;
}
.home .title .portfolio .port {
  display: flex;
}
.home .title .portfolio .port .flower-img {
  width: 195px;
  height: 220px;
  position: relative;
  padding-top: 30px;
}
.home .title .portfolio .port .flower-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .title .portfolio .folio {
  color: var(--mian-color-Y);
  font-family: "NovaScript";
  font-size: 120px;
  position: absolute;
  bottom: 20px;
  right: 0;
  mix-blend-mode: multiply;
}
.home .title .portfolio .folio::before {
  content: "";
  width: 330px;
  height: 130px;
  display: block;
  background: url("../images/emphasis.png") no-repeat;
  position: absolute;
  top: -100px;
  left: -20px;
  mix-blend-mode: multiply;
}

.home .home-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
/* home-who */
.home .who {
  height: 200px;
  width: 40%;
  margin-top: 7%;
}
.home .who .who-img {
  position: relative;
  transform: rotate(-8deg);
  margin-left: -10%;
}
.home .who .who-img .tape-img {
  width: 150px;
  height: 152px;
  position: absolute;
  z-index: 3;
  top: -25px;
  left: 0;
}
.home .who .who-img .tape-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .who .who-img .face-img {
  position: absolute;
  z-index: 2;
  width: 450px;
  top: 0;
  left: 35px;
}
.home .who .who-img .face-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .who .who-img .who-decoration-img {
  position: absolute;
  top: -57px;
  left: 55%;
  width: 200px;
  transform: rotate(5deg) translateX(-50%);
  z-index: 1;
}
.home .who .who-img .who-decoration-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home .who .who-img .who-text {
  position: absolute;
  top: 0;
  left: 80%;
}
.home .who .who-img .who-text .speech-bubble {}
.home .who .who-img .who-text .speech-bubble span {
  position: absolute;
  top: 38px;
  left: 40px;
  font-family: var(--KRfont);
  -webkit-text-stroke: 1px var(--text-color-point);
  font-size: 28px;
  color: var(--text-color-point);
  transform: rotate(10deg);
}
.home .who .who-text .speech-bubble .speech-bubble-img {}
.home .who .who-text .speech-bubble .speech-bubble-img img {}

/* home-decoration */
.home .home-decoration {
  position: relative;
  width: 55%;
  height: 300px;
}
.home .home-decoration .colored-pencil-img {
  position: absolute;
  top: -70%;
  right: -25px;
  width: 33%;
}
.home .home-decoration .colored-pencil-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home .home-decoration .home-graffiti {
  position: absolute;
  bottom: -27%;
  left: 25%;
}
.home .home-decoration .home-graffiti img {
}

/* about */
.about {
  position: relative;
  height: 3000px;
}
.about::before {
  position: absolute;
  content: '';
  display: block;
  background: url('../images/about-page-bg.png') no-repeat;
  background-size: cover;
  width: 105%;
  height: 100%;
  margin-left: -60px;
  top: -65px;
}
.about .container {
  position: relative;
}
.about .about-title {
  position: absolute;
  width: 890px;
  height: 109px;
  background: url('../images/about-title-bg.png') no-repeat;
  left: -300px;
  top: 300px;
  transform: rotate(-8deg);
  z-index: 2;
}
.about .about-title .content-title {
  position: absolute;
  right: 150px;
  bottom: 20px;
}
.about .about-content {
  position: absolute;
  width: 100%;
  top: 500px;
  left: 0;
}
/* about-content1 */
.about .about-content1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.about .profile {
  position: relative;
  width: 50%;
  height: 100%;
}
.about .profile .profile-name {
  position: absolute;
  bottom: 18%;
  right: 42%;
  transform: rotate(-8deg);
}
.about .profile .profile-name span {
  font-family: var(--KRfont);
  display: block;
  text-align: center;
  font-size: 33px;
  margin-bottom: 5px;
  -webkit-text-stroke: var(--text-color);
}
.about .profile .profile-name span.birth {
  font-size: 25px;
  margin: 0;
}
.about .profile .profile-img {
  width: 80%;
  height: 70%;
}
.about .profile .profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about .profile .profile-speech-bubble {
  position: absolute;
  right: 0;
  top: 0;
  width: 30%;
  height: 30%;
}
.about .profile .profile-speech-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* about-education */
.about .education {
  width: 40%;
  position: relative;
  margin-top: 10%;
}
.about .education .education-title {
  position: absolute;
  z-index: 2;
  top: 18%;
  left: 9%;
  transform: rotate(5deg);
}

.about .education .education-desc {
  position: absolute;
  z-index: 2;
  top: 35%;
  left: 12%;
  transform: rotate(5deg);
}
.about .education .education-desc ul {}
.about .education .education-desc ul li {
  display: flex;
  flex-direction: row;
}
.about .education .education-desc ul li span {
  font-size: 30px;
  white-space: nowrap;
}
.about .education .education-desc ul li span.acquisition-year {
  margin-right: 5%;
  margin-bottom: 5%;
}
.about .education .education-bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.about .education .education-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* about-experience */
.about .about-content2 {
  margin-top: 7%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.about .about-content2 .experience {
  position: relative;
  width: 55%;
  height: 800px
}
.about .about-content2 .experience::before {
  content: '';
  display: block;
  background: url('../images/LifeGuardians.png') no-repeat;
  width: 218px;
  height: 243px;
  background-size: cover;
  position: absolute;
  bottom: -56px;
  right: 41.6%;
  z-index: 3;
  transform: rotate(8deg);
}
.about .about-content2 .experience .experience-title {
  position: absolute;
  top: 22%;
  left: 5%;
  transform: rotate(8deg);
  z-index: 3;
}
.about .about-content2 .experience .experience-desc {
  position: absolute;
  top: 33%;
  z-index: 3;
  transform: rotate(8deg);
  left: 15px;
}
.about .about-content2 .experience .experience-desc ul {}
.about .about-content2 .experience .experience-desc ul li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.about .about-content2 .experience .experience-desc ul li span {
  display: block;
}
.about .about-content2 .experience .experience-desc ul li .acquisition-year {
  color: var(--main-color-G);
  font-size: 25px;
}
.about .about-content2 .experience .experience-desc ul li .year-content {
  font-size: 21px;
}
.about .about-content2 .experience .experience-desc > span {
  position: absolute;
  bottom: 38%;
  right: -23%;
  transform: rotate(9deg);
  font-size: 16px;
  text-align: center;
}
.about .about-content2 .experience .experience-img  {
  width: 100%;
  position: absolute;
  top: 70px;
  left: -20%;
}
.about .about-content2 .experience .experience-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* about-license */
.about .about-content2 .about-content2-right {
  width: 40%;
  height: auto;
}
.about .about-content2 .about-content2-right .license {
  position: relative;
  height: 680px;
}
.about .about-content2 .about-content2-right .license .license-title {
  position: absolute;
  top: 12%;
  z-index: 2;
  left: 30%;
  transform: rotate(-9deg);
}
.about .about-content2 .about-content2-right .license .license-desc {
  position: absolute;
  z-index: 2;
  transform: rotate(-9deg);
  top: 19.5%;
  left: 37%;
}
.about .about-content2 .about-content2-right .license .license-desc ul {}
.about .about-content2 .about-content2-right .license .license-desc ul li {
  display: flex;
  flex-direction: column;
  margin-bottom: 29px;
}
.about .about-content2 .about-content2-right .license .license-desc ul li span {
  display: block;
}
.about .about-content2 .about-content2-right .license .license-desc ul li .acquisition-year {
  color: var(--mian-color-Y);
  font-size: 25px;
  margin-top: 10px;
}
.about .about-content2 .about-content2-right .license .license-desc ul li .year-content {
  font-size: 21px;
  margin-top: 5px;
}
.about .about-content2 .about-content2-right .license .license-desc ul li .year-content b {
  font-weight: 400;
  font-size: 18px;
}
.about .about-content2 .about-content2-right .license > .year-content {
  display: block;
  text-align: center;
  position: absolute;
  top: 6%;
  right: 25px;
  z-index: 2;
  transform: rotate(-23deg);
}

.about .about-content2 .about-content2-right .license .license-img {
  width: 130%;
  position: absolute;
  top: -15%;
  left: 0;
}
.about .about-content2 .about-content2-right .license .license-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* about-software */
.about .software-skills {
  position: relative;
}
.about .software-skills .software-skills-title {
  position: absolute;
  top: 0;
  left: 180px;
  transform: rotate(6deg);
  letter-spacing: 3px;
  z-index: 3;
  -webkit-text-stroke: 8px #fff;
  text-shadow: 4px 4px 5px rgba(0,0,0,.6);
}
.about .software-skills .software-skills-title2 {
  position: absolute;
  top: 0;
  left: 180px;
  transform: rotate(6deg);
  letter-spacing: 3px;
  z-index: 3;
}
.about .software-skills .software-skills-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 600px;
  margin-top: 100px;
}
.about .software-skills .software-skills-content::before {
  content: '';
  display: block;
  background: url('../images/blue-pencil.png') no-repeat;
  position: absolute;
  width: 29px;
  height: 180px;
  right: -50px;
  top: 45%;
  transform: rotate(-124deg) scale(1.3);
}
.about .software-skills .software-skills-content img {
  width: 24%;
  margin-left: 20px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.about .software-skills .software-skills-content img:first-child {
  transform: rotate(-10deg);
  top: 100px;
  left: -7%;
}
.about .software-skills .software-skills-content img:nth-child(2) {
  transform: rotate(10deg);
  top: 150px;
  left: 30%;
}
.about .software-skills .software-skills-content img:nth-child(3) {
  transform: rotate(-4deg);
  top: 130px;
  left: 65%;
}
.about .software-skills .software-skills-content img:nth-child(4) {
  transform: rotate(2deg);
  top: 350px;
  left: -10%;
}
.about .software-skills .software-skills-content img:nth-child(5) {
  transform: rotate(-7deg);
  top: 380px;
  left: 28%;
}
.about .software-skills .software-skills-content img:nth-child(6) {
  transform: rotate(7deg);
  top: 400px;
  left: 62%;
}

/* web */
.web {
  margin-bottom: 80px;
}
.web .container {
  position: relative;
}
.web .web-title {
  width: 1089px;
  height: 210px;
  position: absolute;
  top: -16%;
  right: -35%;
  transform: rotate(4deg);
}
.web .web-title::before {
  content: '';
  background: url('../images/Web-title-bg.png') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: block;

}
.web .web-title .content-title {
  position: absolute;
  bottom: 32px;
  left: 10%
}
.web .web-title .content-title .point-title {}
/* web-content */
.web .web-content {
  position: relative;
  height: 1300px;
  margin-top: 100px;
}
.web .web-content .letter {
  position: absolute;
  top: 10%;
  width: 476px;
  height: 285px;
  left: 6%;
  transform: rotate(-10deg);
}
.web .web-content .letter .letter2 {
  position: absolute;
  top: -85px;
  left: 0;
  z-index: 1;
}
.web .web-content .letter .letter1 {
  position: absolute;
  width: 476px;
  top: 20px;
  left: 0;
  z-index: 6;
}
.web .web-content .letter .coding-logo {
  position: relative;
  z-index: 2;
}
.web .web-content .letter .coding-logo::before {
  content: '';
  display: block;
  background: url('../images/isaac-clones.png') no-repeat;
  height: 200px;
  width: 380px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-size: cover;
  background-position: top;
  position: absolute;
  transition: all .5s ease-in-out;
  z-index: 6;
}
.web .web-content .letter .coding-logo h2 {
  z-index: 5;
  left: 40px;
  top: -115px;
  width: 400px;
  height: 350px;
  padding-top: 15px;
  text-align: center;
  display: block;
  background-color: #fff;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
  border-radius: 5px;
  margin: 0 auto;
  transition: all .5s ease-in-out;
  position: absolute;
}

.web .web-content .letter:hover .coding-logo::before {
  top: -110px;
}
.web .web-content .letter:hover .coding-logo h2 {
  top: -230px;
}
.web .web-content .letter .coding-logo img {
  transform: scale(0.6);
}
.web .web-content .letter .letter-desc {
  position: absolute;
  text-align: center;
  top: 37%;
  left: 50%;
  transform: translateX(-50%);
  color: #3e3221;
  z-index: 10;
}
.web .web-content .letter .letter-desc span {
  font-family: "Oranienbaum";
  font-size: 40px;
}
.web .web-content .letter .letter-desc > span:first-child {
  -webkit-text-stroke: 1px #3e3221;
}
.web .web-content .letter .letter-desc .clones-original {
  display: flex;
  justify-content: space-between;
  margin: 15px auto 0;
  width: 200px;
}
.web .web-content .letter .letter-desc .redesign-coding {
  display: flex;
  justify-content: space-between;
  margin: 15px auto 0;
  width: 200px;
}
.web .web-content .letter .letter-desc .clones-original a {
  font-family: "Oranienbaum";
  font-size: 24px;
}
.web .web-content .letter .letter-desc .clones-original a:hover {
  color: #892121;
  text-shadow: 0 2px 4px #ea4141 inner;
}
.web .web-content .letter .letter-desc .clones-original a span {
  font-size: 24px;
}
.web .web-content .letter .letter-desc .redesign-coding a {
  font-family: "Oranienbaum";
  font-size: 24px;
}
.web .web-content .letter .letter-desc .redesign-coding a:hover {
  color: #892121;
  text-shadow: 0 2px 4px #ea4141 inner;
}
.web .web-content .letter .letter-desc .redesign-coding a span {
  font-size: 24px;
}
.web .web-content .letter .letter-desc > span:last-child {
  font-family: var(--KRfont);
  color: var(--text-color);
  -webkit-text-stroke: var(--text-stroke);
  font-size: 20px;
  margin-top: 15px;
  display: block;
}
.web .web-content .childrens-museum.letter {
  top: 34%;
  left: 63%;
  transform: rotate(8deg);
}
.web .web-content .childrens-museum.letter .coding-logo::before {
  background: url('../images/childrens-museum-clones.png') no-repeat;
  height: 200px;
  width: 380px;
  background-size: cover;
  background-position: top;
}
.web .web-content .childrens-museum.letter .coding-logo img {
  transform: scale(0.7);
}
.web .web-content .redesign-haagen-dazs.letter {
  top: 68%;
  left: 15%;
  transform: rotate(-3deg);
}
.web .web-content .redesign-haagen-dazs.letter .letter-desc .redesign-coding {
  width: 300px;
}
.web .web-content .haagen-dazs-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: none;
}
.web .web-content .haagen-dazs-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.web .web-content .haagen-dazs-modal .process-wrap {
  max-width: 90vw;
  max-height: 100vh;
  overflow: auto;
}
.web .web-content .haagen-dazs-modal .process-wrap .modal-close {
  position: fixed;
  right: 7%;
  top: 1%;
}
.web .web-content .haagen-dazs-modal .process-wrap .modal-close i {}
.web .web-content .haagen-dazs-modal .process-wrap img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
.web .web-content .redesign-haagen-dazs.letter .coding-logo::before {
  background: url('../images/haggen-dazs-redesign.png') no-repeat;
  height: 200px;
  width: 380px;
  background-size: cover;
  background-position: top;
}
.web .web-content .redesign-haagen-dazs.letter .coding-logo img {
  width: 400px;
}
/* app-content */
.web .app-content {
  position: relative;
  height: 850px;
}
.web .app-content .letter {
  position: absolute;
  top: 10%;
  width: 476px;
  height: 285px;
  left: 63%;
  transform: rotate(11deg);
}
.web .app-content .letter .letter2 {
  position: absolute;
  top: -85px;
  left: 0;
  z-index: 1;
}
.web .app-content .letter .letter1 {
  position: absolute;
  width: 476px;
  top: 20px;
  left: 0;
  z-index: 6;
}
.web .app-content .letter .coding-logo {
  position: relative;
  z-index: 2;
}
.web .app-content .letter .coding-logo h2 {
  z-index: 5;
  left: 40px;
  top: -70px;
  width: 400px;
  height: 350px;
  padding-top: 30px;
  text-align: center;
  display: block;
  background-color: #fff;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
  border-radius: 5px;
  margin: 0 auto;
  transition: all .5s linear;
  position: absolute;
}
.web .app-content .letter:hover .coding-logo::before {
  top: -100px;
}
.web .app-content .letter:hover .coding-logo h2 {
  top: -230px;
}
.web .app-content .letter .coding-logo img {
  width: 300px;
}
.web .app-content .letter .letter-desc {
  position: absolute;
  text-align: center;
  top: 37%;
  left: 50%;
  transform: translateX(-50%);
  color: #3e3221;
  z-index: 10;
}
.web .app-content .letter .letter-desc span {
  font-family: "Oranienbaum";
  font-size: 40px;
}
.web .app-content .letter .letter-desc >span:first-child {
  -webkit-text-stroke: 1px #3e3221;
}
.web .app-content .letter .letter-desc .clones-original {
  display: flex;
  justify-content: space-between;
  margin: 15px auto 0;
  width: 200px;
}
.web .app-content .letter .letter-desc .clones-original a {
  font-family: "Oranienbaum";
  font-size: 24px;
}
.web .app-content .letter .letter-desc .clones-original a:hover {
  color: #892121;
  text-shadow: 0 2px 4px #ea4141 inner;
}
.web .app-content .letter .letter-desc .clones-original a span {
  font-size: 24px;
}
.web .app-content .letter .letter-desc > span:last-child {
  font-family: var(--KRfont);
  color: var(--text-color);
  -webkit-text-stroke: var(--text-stroke);
  font-size: 20px;
  margin-top: 15px;
  display: block;
}
.web .app-content .oneul-todo.letter .letter-desc .clones-original {
  width: 76px;
}
.web .app-content .What-should-I-eat.letter {
  top: 50%;
  left: 20px;
  transform: rotate(-4deg);
}
.web .app-content .What-should-I-eat.letter .coding-logo img {
  height: 300px;
  object-fit: cover;
  object-position: top;
}
.web .app-content .What-should-I-eat.letter .letter-desc .clones-original {
  justify-content: center;
}
.web .app-content .What-should-I-eat.letter .letter-desc .clones-original a:hover span {
  color: #892121;
  -webkit-text-stroke-color: #892121;
}
.web .app-content .What-should-I-eat.letter .letter-desc .clones-original a span {
  font-family: var(--KRfont);
  -webkit-text-stroke: var(--text-stroke);
}


.web .app-content .oneul-todo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: none;
}
.web .app-content .oneul-todo-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.web .app-content .oneul-todo-modal .process-wrap {
  max-width: 90vw;
  max-height: 100vh;
  overflow: auto;
}
.web .app-content .oneul-todo-modal .process-wrap .modal-close {
  position: fixed;
  right: 21.5%;
  top: 1%;
}
.web .app-content .oneul-todo-modal .process-wrap .modal-close i {}
.web .app-content .oneul-todo-modal .process-wrap img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* design */
.design {
  margin-top: 100px;
  margin-bottom: 10%;
}
.design .design-title {
  position: relative;
  height: 150px;
}
.design .design-title::after {
  content: '';
  display: block;
  background: url('../images/animal-characters.png') no-repeat;
  width: 400px;
  height: 600px;
  position: absolute;
  top: -200%;
  right: 0;
  mix-blend-mode: multiply;
}
.design .design-title::before {
  position: absolute;
  transform: rotate(-3deg);
  display: block;
  content: '';
  background: url('../images/Design-title-bg.png') no-repeat;
  width: 590px;
  height: 248px;
  left: 0;
  top: -130px;
}
.design .design-title .work-desc {
  font-family: var(--KRfont);
  font-size: 42px;
  position: absolute;
  left: 38%;
  top: -83%;
  color: var(--main-color-G);
  transform: rotate(4deg);
  font-weight: bold;
}
.design .design-title .animal-characters {
  font-family: var(--KRfont);
  font-size: 26px;
  font-weight: 600;
  position: absolute;
  right: 10%;
  top: -230%;
}
.design .design-title .content-title {
  position: absolute;
  top: -75px;
  left: 12%;
  transform: rotate(4deg);
}
.design .design-content-menu {
  height: 100px;
  margin: 50px auto 0;
  width: 1300px;
}
.design .design-content-menu ul {
  display: flex;
  justify-content: space-between;
  font-family: var(--KRfont);
  font-size: 36px;
  font-weight: bold;
}
.design .design-content-menu ul li {
  position: relative;
  z-index: 2;
}
.design .design-content-menu ul li::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 17px;
  background-color: #ffd736;
  position: absolute;
  bottom: -3px;
  z-index: -1;
  left: 0;
  z-index: -1;
  transition: all .3s;
}
.design .design-content-menu ul li:hover::after {
  width: 100%;
}
.design .design-content-menu ul li.active::after {
  width: 100%;
}
.design .design-content-menu ul li a {
  display: block;
  white-space: nowrap;
}
.design .design-content-menu ul li a::after {}
/* ----디자인 콘텐츠들---- */
.design .design-contents {}
/* 포스터 */
.design .design-contents .poster {
  position: relative;
}
.design .design-contents .poster .poster-title {
  background: url('../images/poster-title-bg.png') no-repeat;
  background-size: cover;
  width: 433px;
  height: 181px;
  position: absolute;
  top: 0;
  left: 4%;
  transform: rotate(-5deg);
}
.design .design-contents .poster .poster-title span {
  top: 45%;
}
.design .design-contents .poster .poster-title span.details {
  position: absolute;
  transform: rotate(10deg);
  top: 2%;
  left: 60%;
  white-space: nowrap;
  font-size: 24px;
  color: var(--text-color);
  -webkit-text-stroke: var(--text-stroke);
}
.design .design-contents .poster .adobe-poster {
  height: 740px;
  margin-bottom: 50px;
}
.design .design-contents .poster .sw-poster {
  width: 491px;
  height: 653px;
  position: absolute;
  right: 8%;
  top: 10%;
}
.design .design-contents .poster .swiper-slide-visible {
  overflow: visible;
}
.design .design-contents .poster .swiper-slide img {}
.swiper-3d .swiper-slide-shadow {
  background: none;
}
.design .design-contents .poster .swiper-slide .poster-desc {
  position: absolute;
  top: 52%;
  left: -130%;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--KRfont);
  -webkit-text-stroke: 0.5px var(--text-color);
  cursor: url('../images/pencil.cur') 0 31,url('../images/pencil.png') 0 31, auto;
}
.design .design-contents .poster .swiper-slide:nth-child(3) .poster-desc,
.design .design-contents .poster .swiper-slide:nth-child(4) .poster-desc {
  left: -150%;
}
.design .design-contents .poster .swiper-slide .poster-desc h3 {
  margin-bottom: 30px;
  font-size: 32px;
}
.design .design-contents .poster .swiper-slide .poster-desc b {
  margin-bottom: 5px;
  font-size: 24px;
  display: block;
}
.design .design-contents .poster .swiper-slide .poster-desc > span {
  margin-bottom: 25px;
  display: block;
  font-size: 24px;
  line-height: 1.3;
}
.design .design-contents .poster .swiper-slide .poster-desc > span:nth-child(4) {
  position: relative;
}
.design .design-contents .poster .swiper-slide .poster-desc > span:nth-child(4)::before {
  content: '';
  display: block;
  background-color: #ffd736;
  width: 400px;
  height: 17px;
  position: absolute;
  z-index: -1;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
}
.design .design-contents .poster .swiper-slide:nth-child(2) .poster-desc > span:nth-child(4)::before {
  width: 280px;
}
.design .design-contents .poster .swiper-slide:nth-child(3) .poster-desc > span:nth-child(4)::before {
  width: 570px;
  top: 12px;
}
.design .design-contents .poster .swiper-slide:nth-child(4) .poster-desc > span:nth-child(4)::before {
  width: 575px;
  top: 85%;
}
.design .design-contents .poster .swiper-slide .poster-desc > span:nth-child(5) {
  margin-bottom: 5px;
}
.design .design-contents .poster .swiper-slide .poster-desc > span:last-child {
  margin: 0;
  font-size: 22px;
}
.design .design-contents .poster .pg-poster-next,
.design .design-contents .poster .pg-poster-prev {
  font-size: 36px;
  position: absolute;
  top: 42%;
  z-index: 10;
  opacity: .6;
  cursor: pointer;
  transition: all .3s;
}
.design .design-contents .poster .pg-poster-next {
  right: 83px;
}
.design .design-contents .poster .pg-poster-prev {
  right: 602px;
}
.design .design-contents .poster .pg-poster-next:hover,
.design .design-contents .poster .pg-poster-prev:hover {
  opacity: 1;
}
.design .design-contents .poster .miri-poster {}
.design .design-contents .poster .miri-poster span {
  font-family: var(--KRfont);
  font-size: 24px;
  margin-bottom: 10px;
  margin-left: 10px;
  display: block;
  -webkit-text-stroke: 0.5px var(--text-color);
}
.design .design-contents .poster .miri-poster .sw-poster2 {}
.design .design-contents .poster .miri-poster .sw-poster2 .swiper-slide {
  height: 225px;
  cursor: pointer;
}
.design .design-contents .poster .miri-poster .sw-poster2 .swiper-slide img {
  height: 100%;
  object-fit: cover;
}
/* 포스터 이미지 모달 */
.poster-img-modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.poster-img-modal.active {
  display: flex;
}
.poster-img-modal .modal-close {
  position: fixed;
  right: 20%;
  top: 2%;
}

.poster-img-modal-content img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* 카드뉴스 */
.design .design-contents .card-news {
  position: relative;
}
.design .design-contents .card-news .card-news-title {
  background: url('../images/card-news-title-bg.png') no-repeat;
  width: 415px;
  height: 175px;
  background-size: cover;
  position: absolute;
  right: 0;
  top: -9%;
  transform: rotate(6deg);
}
.design .design-contents .card-news .card-news-title span {
  top: 47%;
}
.design .design-contents .card-news .card-news-content {
  margin-top: 60px;
}
.design .design-contents .card-news .card-news-content .sw-card-news {}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide {}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide .card-news {
  position: relative;
  width: 430px;
  height: 840px;
  transform: scale(0.7);
  transition: all .3s ease-in-out;
}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide .card-news:hover {
  transform: scale(1);
}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide .card-news .phone-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  user-select: none;
}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide .card-news .phone-frame img {
  object-fit: cover;
}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide .card-news .sw-card {
  position: absolute;
  top: 49.3%;
  left: 50.2%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 360px;
}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide .card-news .sw-card img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.design .design-contents .card-news .card-news-content .sw-card-news .swiper-slide .card-news .sw-card-pg {
  text-align: center;
  top: 71.5%;
  position: absolute;
  z-index: 2;
}
.swiper-pagination-bullet {
  background-color: #fff;
}
/* 썸네일 */
.design .design-contents .thumbnail {
  position: relative;
}
.design .design-contents .thumbnail .thumbnail-title {
  background: url('../images/thumbnail-title-bg.png') no-repeat;
  width: 344px;
  height: 112px;
  background-size: cover;
  position: absolute;
  top: 10px;
  left: 3%;
  transform: rotate(-5deg);
}
.design .design-contents .thumbnail .thumbnail-title span {
  top: 50%;
  left: 57%;
}
.design .design-contents .thumbnail .thumbnail-content {
  position: relative;
  height: 800px;
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame {
  width: 600px;
  height: 780px;
  border-radius: 30px;
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  background-color: #dfdfdf;
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame::before {
  border: 20px solid #030303;
  border-radius: 30px;
  content: '';
  display: block;
  width: 95%;
  height: 95%;
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .sw-thumbnail {
  overflow: visible;
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .sw-thumbnail .swiper-slide {
  position: relative;
  height: 780px;
  transform: scale(0.6);
  transition: all .3s linear;
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .sw-thumbnail .swiper-slide-active {
  transform: scale(1);
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .sw-thumbnail .swiper-slide .thumb-img-frame {
  width: 571px;
  height: 571px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .sw-thumbnail .swiper-slide .thumb-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .thumbnail-pg {
  position: absolute;
  bottom: 80px;
  text-align: center;
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .thumbnail-pg .swiper-pagination-bullet {
  opacity: 0.7;
}
.design .design-contents .thumbnail .thumbnail-content .thumbnail-frame .thumbnail-pg .swiper-pagination-bullet-active {
  background-color: #3395FF;
  opacity: 1;
}
/* 블로그스킨 */
.design .design-contents .blog-skin {
  position: relative;
}
.design .design-contents .blog-skin .blog-skin-title {
  background: url('../images/blog-skin-title-bg.png') no-repeat;
  background-size: cover;
  width: 360px;
  height: 110px;
  position: absolute;
  right: 10px;
  top: 0;
  transform: rotate(2deg);
}
.design .design-contents .blog-skin .blog-skin-title span {
  top: 51%;
  left: 42%;
  transform: rotate(3deg) translate(-50%, -50%);
}
.design .design-contents .blog-skin .blog-skin-content {
  height: 654px;
  margin-bottom: 250px;
}
.design .design-contents .blog-skin .blog-skin-content .blog-skin-img-frame {
  position: absolute;
  transform: rotate(7deg);
}
.design .design-contents .blog-skin .blog-skin-content .blog-skin-img-frame:first-child {
  padding-top: 100px;
  top: 0;
  left: -50px;
}
.design .design-contents .blog-skin .blog-skin-content .blog-skin-img-frame:last-child {
  right: -50px;
  bottom: -100px;
}
/* 배너 */
.design .design-contents .banner {
  position: relative;
}
.design .design-contents .banner .banner-title {
  background: url('../images/poster-title-bg.png') no-repeat;
  background-size: cover;
  width: 433px;
  height: 181px;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-5deg);
}
.design .design-contents .banner .banner-title span {
  top: 47%;
}
.design .design-contents .banner .banner-content {
  padding-top: 300px;
}
.design .design-contents .banner .banner-content .banner-mockup {
  width: 650px;
  margin-top: -30px;
}
.design .design-contents .banner .banner-content .banner-mockup .sw-banner {
}
.design .design-contents .banner .banner-content .banner-mockup .sw-banner .swiper-slide {
}
.design .design-contents .banner .banner-content .banner-mockup .sw-banner .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design .design-contents .banner .banner-content .banner-design {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}
.design .design-contents .banner .banner-content .banner-design .banner-img-box {
  width: 48%;
}
.design .design-contents .banner .banner-content .banner-design .banner-img-box span {
  font-family: var(--KRfont);
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  top: 8%;
  right: -3%;
  transform: rotate(4deg);
}
.design .design-contents .banner .banner-content .banner-design .banner-img-box img {
  margin-bottom: 20px;
}
.design .design-contents .banner .banner-content .banner-design2 {
  display: flex;
  gap: 100px;
  justify-content: space-between;
  align-items: center;
}
.design .design-contents .banner .banner-content .banner-design2 .review-banner {
  width: 45%;
  position: relative;
}
.design .design-contents .banner .banner-content .banner-design2 .review-banner span {
  font-family: var(--KRfont);
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  bottom: -10%;
  left: -5%;
  transform: rotate(3deg);
}
.design .design-contents .banner .banner-content .banner-design2 .sosody {
  position: relative;
  transform: scale(0.95);
}
.design .design-contents .banner .banner-content .banner-design2 .sosody span {
  font-size: 32px;
  font-family: var(--KRfont);
  position: absolute;
  font-weight: bold;
}
.design .design-contents .banner .banner-content .banner-design2 .sosody span:first-child {
  top: -40px;
  right: 10%;
  transform: rotate(4deg);
}
.design .design-contents .banner .banner-content .banner-design2 .sosody span:nth-child(2) {
  top: 23%;
  left: 9%;
  transform: rotate(-5deg);
}
.design .design-contents .banner .banner-content .banner-design2 .sosody::after {
  content: '';
  display: block;
  width: 245px;
  height: 176px;
  background: url('../images/squid-sticker2.png') no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 45px;
  mix-blend-mode: multiply;
  transform: scale(-1, 1);
}
.design .design-contents .banner .banner-content .banner-design2 .sosody::before {
  content: '';
  display: block;
  width: 247px;
  height: 209px;
  background: url('../images/squid-sticker1.png') no-repeat;
  background-size: cover;
  position: absolute;
  left: -50px;
  top: 0;
  mix-blend-mode: multiply;
}
.design .design-contents .banner .banner-content .banner-design3 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 150px;
  mix-blend-mode: multiply;
}
.design .design-contents .banner .banner-content .banner-design3 .online-banner {
  display: flex;
  flex-wrap: wrap;
  width: 47%;
  justify-content: space-between;
}
.design .design-contents .banner .banner-content .banner-design3 .online-banner span {
  display: block;
  width: 100%;
  padding-bottom:  3%;
  font-size: 32px;
  text-align: center;
  font-family: var(--KRfont);
  -webkit-text-stroke: var(--text-stroke);
}
.design .design-contents .banner .banner-content .banner-design3 .online-banner img {
  width: 48%;
}
.design .design-contents .banner .banner-content .banner-design4 {
  display: flex;
  justify-content: space-between;
  mix-blend-mode: multiply;
}
.design .design-contents .banner .banner-content .banner-design4 .xbanner {
  width: 45%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50%;
}
.design .design-contents .banner .banner-content .banner-design4 .xbanner img {
  width: 45%;
}
.design .design-contents .banner .banner-content .banner-design4 .xbanner-mockup {
  width: 45%;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.design .design-contents .banner .banner-content .banner-design4 .xbanner-mockup span {
  position: absolute;
  top: -4%;
  right: -7%;
  font-family: var(--KRfont);
  font-size: 32px;
  -webkit-text-stroke: var(--text-stroke);
  transform: rotate(4deg);
}
.design .design-contents .banner .banner-content .banner-design4 .xbanner-mockup img {
  width: 48%;
  height: 100%;
  object-fit: cover;
}

/* 로고 */
.design .design-contents .logo-design {
  position: relative;
}
.design .design-contents .logo-design .logo-title {
  background: url('../images/logo-title-bg.png') no-repeat;
  width: 349px;
  height: 141px;
  background-size: cover;
  position: absolute;
  transform: rotate(166deg);
  right: 2%;
  top: -20px;
}
.design .design-contents .logo-design .logo-title span {
  top: 19%;
  left: 47%;
  transform: rotate(-171deg) translate(-50%, -50%);
}
.design .design-contents .logo-design .logo-content {
  display: flex;
  flex-wrap: wrap;
  gap: 100px 300px;
  justify-content: center;
  padding-top: 180px;
}
.design .design-contents .logo-design .logo-content .logo {
  width: 230px;
  height: 100%;
  position: relative;
}
.design .design-contents .logo-design .logo-content .logo span {
  font-family: var(--KRfont);
  font-size: 24px;
  white-space: nowrap;
  position: absolute;
  right: 0;
  -webkit-text-stroke: 0.5px var(--text-color);
}
.design .design-contents .logo-design .logo-content .logo:first-child span {
  top: -20px;
  transform: rotate(6deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(2) span{
  top: -20px;
  left: -10px;
  transform: rotate(-3deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(3) span {
  top: -18px;
  right: 15px;
  transform: rotate(3deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(4) span{
  top: -30px;
  transform: rotate(-3deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(5) span{
  top: -40px;
  right: -50px;
  transform: rotate(4deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(6) span{
  top: -40px;
  left: 0;
  transform: rotate(-3deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(7) span{
  top: -30px;
  right: -20px;
  transform: rotate(3deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(8) span{
  top: -30px;
  right: -20px;
  transform: rotate(-2deg);
}
.design .design-contents .logo-design .logo-content .logo a  {}
.design .design-contents .logo-design .logo-content .logo a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}
.design .design-contents .logo-design .logo-content .logo:first-child a img {
  transform: rotate(-6deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(2) a img {
  transform: rotate(3deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(3) a img {
  transform: rotate(5deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(4) a img {
  transform: rotate(-4deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(5) a img {
  transform: rotate(4deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(6) a img {
  transform: rotate(-3deg);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(7) a img {
  transform: rotate(3deg) scale(1.2);
}
.design .design-contents .logo-design .logo-content .logo:nth-child(8) a img {
  transform: rotate(-2deg);
}
.logo-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: none;
}
.logo-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-modal .logo-modal-content {
  max-width: 90vw;
  max-height: 100vh;
  overflow-y: auto;
}
.logo-modal .logo-modal-content .modal-close {
  position: fixed;
  right: 25%;
  top: 1%;
}
.logo-modal .logo-modal-content img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

/* 일러스트 */
.design .design-contents .illustration {
  position: relative;
}
.design .design-contents .illustration .illu-title {
  background: url('../images/illu-title-bg.png') no-repeat;
  background-size: cover;
  width: 356px;
  height: 149px;
  position: absolute;
  left: 0;
  top: -190px;
}
.design .design-contents .illustration .illu-title span {
  top: 30%;
  left: 45%;
  white-space: nowrap;
  transform: rotate(-6deg);
}
.design .design-contents .illustration .illu-content {
  margin-top: 200px;
  position: relative;
  height: 2000px;
}
.design .design-contents .illustration .illu-content  .illu-img-frame {
  width: 33%;
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
}
.design .design-contents .illustration .illu-content  .illu-img-frame:first-child {
  left: 0;
  transform: rotate(-3deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(2) {
  left: 37%;
  transform: rotate(4deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(3) {
  right: -5%;
  transform: rotate(2deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(4) {
  top: 33%;
  left: 15%;
  transform: rotate(4deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(5) {
  top: 34%;
  right: 10%;
  transform: rotate(-3deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(6) {
  top: 61%;
  left: 3%;
  transform: rotate(-2deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(7) {
  top: 61%;
  left: 38%;
  transform: rotate(1deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(8) {
  top: 60%;
  right: -3%;
}
.design .design-contents .illustration .illu-content  .illu-img-frame:nth-child(9) {
  top: 83%;
  left: 38%;
  transform: rotate(-3deg);
}
.design .design-contents .illustration .illu-content  .illu-img-frame img {
  width: 80%;
}
.design .design-contents .illustration .going-goods {
  display: flex;
  flex-direction: column;
  width: 250px;
  text-align: center;
  position: absolute;
  right: 4%;
  top: 92%;
  transform: rotate(-12deg);
}
.design .design-contents .illustration .going-goods span {
  font-family: var(--KRfont);
  -webkit-text-stroke: 0.5px var(--text-color);
  font-size: 24px;
  margin-bottom: 10px;
}
.design .design-contents .illustration .going-goods a {}
.design .design-contents .illustration .going-goods a img {}
.design .design-contents .illustration .goods-img-frame {
  position: relative;
  display: none;
}
.design .design-contents .illustration .goods-img-frame.active {
  display: block;
}
.design .design-contents .illustration .goods-img-frame .modal-close {
  position: fixed;
  top: 5%;
  right: 5%;
  z-index: 11;
}
.design .design-contents .illustration .goods-img-frame .goods-frame-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 85%;
  height: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  row-gap: 60px;
  transform: translate(-50%, -50%);
  z-index: 10;
  flex-basis: 1;
  overflow-y: scroll;
  cursor: ns-resize;
}
.design .design-contents .illustration .goods-img-frame .goods-frame-wrap::-webkit-scrollbar {
  background-color: transparent;
}

.design .design-contents .illustration .goods-img-frame .goods-frame-wrap img {
  width: 30%;
  height: 50%;
  object-fit: cover;
  border-radius: 20px;
}
.design .design-contents .illustration .goods-img-mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,.6);
  z-index: 9;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
}
.design .design-contents .illustration .goods-img-mask.active {
  display: block;
}


/* 캐릭터 */
.design .design-contents .character {
  position: relative;
}
.design .design-contents .character .character-title {
  background: url('../images/character-title-bg.png') no-repeat;
  background-size: cover;
  width: 433px;
  height: 181px;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(6deg);
}
.design .design-contents .character .character-title span {
  top: 45%;
}
.design .design-contents .character .character-content {
  padding-top: 220px;
  font-family: var(--KRfont);
  font-size: 28px;
  -webkit-text-stroke: var(--text-stroke);
  height: 2000px;
  mix-blend-mode: multiply;
}
.design .design-contents .character .character-content .character-box-frame {
  position: relative;
  margin-bottom: 100px;
}
.design .design-contents .character .character-content .takeO-character {}
.design .design-contents .character .character-content .takeO-character .character-box {}
.design .design-contents .character .character-content .takeO-character .character-box .character-img-box {}
.design .design-contents .character .character-content .takeO-character .character-box span {
  position: absolute;
  top: -15%;
  left: 12%;
  transform: rotate(-3deg);
}
.design .design-contents .character .character-content .takeO-character .character-box span::before {
  content: '';
  display: block;
  background: url('../images/arrow2.png') no-repeat;
  width: 75px;
  height: 54px;
  background-size: cover;
  position: absolute;
  top: 5px;
  left: -42%;
}
.design .design-contents .character .character-content .takeO-character .character-box .character-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design .design-contents .character .character-content .LifeGuardians-character {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto 150px;
  text-align: center;
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box {
  width: 45%;
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box span {
  display: inline-block;
  margin-bottom: 20px;
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box:nth-child(2) {
  position: relative;
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box:nth-child(2) > span {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box:nth-child(2) > span:first-child {
  top: -30px;
  left: -10px;
  transform: rotate(-5deg);
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box:nth-child(2) > span:nth-child(2) {
  top: -30px;
  right: -20px;
  left: auto;
  transform: rotate(4deg);
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box:nth-child(2) > span:nth-child(3) {
  top: 39%;
  left: -3%;
  transform: rotate(-6deg);
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box:nth-child(2) > span:nth-child(4) {
  top: 43%;
  right: -1px;
  left: auto;
  transform: rotate(7deg);
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box .character-img-box {}
.design .design-contents .character .character-content .LifeGuardians-character .character-box .character-img-box img {}
.design .design-contents .character .character-content .LifeGuardians-character .character-box .lifeCuardians-desc {
  font-size: 24px;
  margin-top: 30px;
}
.design .design-contents .character .character-content .LifeGuardians-character .character-box .lifeCuardians-desc span {
  white-space: nowrap;
  margin-bottom: 8px;
}
.design .design-contents .character .character-content .emoticon-characters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: 0 auto 100px;
}
.design .design-contents .character .character-content .emoticon-characters .emoticon-desc {
  display: block;
  width: 100%;
  text-align: center;
  margin: -65px 0 30px;
  font-size: 36px;
  position: relative;
  
}
.design .design-contents .character .character-content .emoticon-characters .emoticon-desc::before {
  position: absolute;
  content: '';
  display: block;
  width: 280px;
  height: 20px;
  background-color: #ffd736;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.design .design-contents .character .character-content .emoticon-characters .character-box {
  width: 47%;
  position: relative;
}
.design .design-contents .character .character-content .emoticon-characters .character-box span {
  position: absolute;
}
.design .design-contents .character .character-content .emoticon-characters .character-box:first-of-type span {
  top: -10px;
  left: 1%;
  transform: rotate(-4deg);
}
.design .design-contents .character .character-content .emoticon-characters .character-box:nth-of-type(2) span {
  top: 15px;
  right: 2%;
  transform: rotate(5deg);
}
.design .design-contents .character .character-content .emoticon-characters .character-box:first-of-type .character-img-box img {
  margin-left: 30px;
}
.design .design-contents .character .character-content > .character-img-box {
  transform: rotate(-3deg);
  padding-top: 30px;
}
.design .design-contents .character .character-content > .character-img-box img {
  width: 100%;
}
/* 스톡이미지 */
.design .design-contents .stock-image {
  position: relative;
  background: url('../images/stock-image-bg.png') no-repeat;
  background-size: cover;
  width: 1250px;
  height: 1526px;
  margin: 150px auto 0;
}
.design .design-contents .stock-image .stock-title {
  background: url('../images/stock-title-bg.png') no-repeat;
  background-size: cover;
  width: 368px;
  height: 187px;
  position: absolute;
  top: -170px;
  left: -40px;
}
.design .design-contents .stock-image .stock-title span {
  top: 50%;
  left: 51%;
  transform: rotate(-5deg) translate(-50%, -50%);
}
.design .design-contents .stock-image .stock-desc {
  font-family: var(--KRfont);
  background: url('../images/stock-desc-bg.png') no-repeat;
  background-size: cover;
  width: 450px;
  height: 510px;
  position: absolute;
  right: -10%;
  top: -13%;
  transform: rotate(4deg);
  z-index: 5;
  -webkit-text-stroke: var(--text-stroke);
}
.design .design-contents .stock-image .stock-desc .stock-desc-wrap {
  position: absolute;
  top: 60%;
  left: 5%;
  transform: translateY(-50%);
}
.design .design-contents .stock-image .stock-desc h2 {
  margin-bottom: 10px;
  -webkit-text-stroke: 0.5px var(--text-color);
  margin-bottom: 20px;
  text-align: center;
}
.design .design-contents .stock-image .stock-desc .shortcut {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.design .design-contents .stock-image .stock-desc .shortcut img {
  width: 40%;
}
.design .design-contents .stock-image .stock-desc .shortcut.tooldi img {
  width: 25%;
}
.design .design-contents .stock-image .stock-desc .shortcut a {
  transition: all .3s linear;
}
.design .design-contents .stock-image .stock-desc .stock-desc-wrap a:hover {
  -webkit-text-stroke: 1px var(--text-color-point);
  color: var(--text-color-point);
}
.design .design-contents .stock-image .stock-desc .shortcut a span {
  font-size: 15px;
}
.design .design-contents .stock-image .stock-content {
  padding: 150px 80px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.design .design-contents .stock-image .stock-content .stock-content-box1 {
  position: relative;
  width: 45%;
  height: 560px;
}
.design .design-contents .stock-image .stock-content .stock-content-box1::after {
  content: '';
  display: block;
  width: 58px;
  height: 439px;
  background: url('../images/stock-image18.png') no-repeat;
  background-size: cover;
  z-index: 2;
  position: absolute;
  top: 62%;
  left: -37%;
  transform: rotate(68deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box1::before {
  content: '';
  display: block;
  width: 47px;
  height: 557px;
  background: url('../images/stock-image19.png') no-repeat;
  background-size: cover;
  z-index: 2;
  top: 73%;
  left: -29%;
  transform: rotate(55deg);
  position: absolute;
}
.design .design-contents .stock-image .stock-content .stock-img-frame {
    mix-blend-mode: multiply;
}
.design .design-contents .stock-image .stock-content .stock-content-box1 .stock-img-frame {
  position: absolute;
  top: 0;
}
.design .design-contents .stock-image .stock-content .stock-content-box1 .stock-img-frame:first-child {
  left: 0;
  transform: rotate(-6deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box1 .stock-img-frame:nth-child(2) {
  right: 0;
  transform: rotate(10deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box1 .stock-img-frame:nth-child(3) {
  left: 90%;
  top: 200px;
  transform: translateX(-50%) rotate(4deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box1 .stock-img-frame img {}
.design .design-contents .stock-image .stock-content .stock-content-box2 {
  position: relative;
  width: 45%;
  margin-top: 15%;
}
.design .design-contents .stock-image .stock-content .stock-content-box2::before {
  content: '';
  display: block;
  width: 47px;
  height: 557px;
  background: url('../images/stock-image20.png') no-repeat;
  background-size: cover;
  z-index: 2;
  top: 54%;
  right: -22%;
  transform: rotate(-52deg);
  position: absolute;
}
.design .design-contents .stock-image .stock-content .stock-content-box2 .stock-img-frame {
  position: absolute;
  top: 0;
}
.design .design-contents .stock-image .stock-content .stock-content-box2 .stock-img-frame:first-child {
  left: 0;
  transform: rotate(-3deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box2 .stock-img-frame:nth-child(2) {
  right: 0;
  top: 50px;
  transform: rotate(4deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box2 .stock-img-frame:nth-child(3) {
  left: 15%;
  top: 200px;
  transform: rotate(-5deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box3 {
  width: 100%;
  display: flex;
  position: relative;
  margin-top: 150px;
}
.design .design-contents .stock-image .stock-content .stock-content-box3 .stock-img-frame {
  position: absolute;
  top: 0;
}
.design .design-contents .stock-image .stock-content .stock-content-box3 .stock-img-frame:first-child {
  left: 5%;
  top: -60px;
  transform: rotate(-4deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box3 .stock-img-frame:nth-child(2) {
  left: 35%;
  transform: scale(1.2) rotate(2deg);
  top: 5px;
}
.design .design-contents .stock-image .stock-content .stock-content-box3 .stock-img-frame:nth-child(3) {
  right: 41%;
  transform: scale(1.2) rotate(-2deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box3 .stock-img-frame:nth-child(4) {
  right: 26%;
  transform: scale(1.1) rotate(3deg);
  top: 20px;
}
.design .design-contents .stock-image .stock-content .stock-content-box3 .stock-img-frame:nth-child(5) {
  right: 13%;
  transform: scale(1.2) rotate(-4deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box3 .stock-img-frame:nth-child(6) {
  right: 0;
  transform: scale(1.2) rotate(2deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box4 {
  width: 100%;
  position: relative;
  margin-top: 230px;
}
.design .design-contents .stock-image .stock-content .stock-content-box4 .stock-img-frame {
  position: absolute;
  top: 0;
}
.design .design-contents .stock-image .stock-content .stock-content-box4 .stock-img-frame:first-child {
  left: 3%;
  top: -35px;
  transform: rotate(-6deg) scale(1.1);
}
.design .design-contents .stock-image .stock-content .stock-content-box4 .stock-img-frame:nth-child(2) {
  left: 24%;
  transform: rotate(4deg);
  top: -10px;
}
.design .design-contents .stock-image .stock-content .stock-content-box4 .stock-img-frame:nth-child(3) {
  right: 38%;
  top: -10px;
  transform: rotate(-3deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box4 .stock-img-frame:nth-child(4) {
  right: 16%;
  top: 65px;
  transform: rotate(6deg);
}
.design .design-contents .stock-image .stock-content .stock-content-box4 .stock-img-frame:nth-child(5) {
  right: 0%;
  top: -25px;
  transform: rotate(5deg);
}
/* 기타디자인 */
.design .design-contents .other-design {
  position: relative;
}
.design .design-contents .other-design .other-title {
  background: url('../images/other-title-bg.png') no-repeat;
  background-size: cover;
  width: 261px;
  height: 371px;
  position: absolute;
  top: -6%;
  right: -3%;
}
.design .design-contents .other-design .other-title span {
  text-align: center;
  top: 64%;
  left: 48%;
}
.design .design-contents .other-design .other-content {
  position: relative;
  height: 2500px;
  margin: 100px 0 250px;
}
.design .design-contents .other-design .other-content .other-img-frame {
  width: 45%;
  position: absolute;
  top: 0;
  left: 0;
}
.design .design-contents .other-design .other-content .other-img-frame:first-child {
  left: 35%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(2) {
  top: 15%;
  width: 40%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(2) .meun-design {}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(2) .meun-design img {
  position: absolute;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(2) .meun-design img:first-child {
  top: 0;
  left: 0;
  transform: rotate(-4deg);
  width: 50%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(2) .meun-design img:nth-child(2) {
  top: 50px;
  right: 30px;
  transform: rotate(3deg);
  width: 50%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(3) {
  top: 20%;
  left: 57%;
  width: 60%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(4) {
  top: 45%;
  left: -3%;
  width: 54%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(5) {
  top: 55%;
  left: 50%;
  width: 60%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(6) {
  top: 77%;
  width: 100%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(6) span {}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(6) .book-design {
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(6) .book-design img {
  position: absolute;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(6) .book-design img:first-child {
  top: 0;
  left: 0;
  transform: rotate(-4deg);
  width: 45%;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(6) .book-design img:nth-child(2) {
  top: 0;
  left: 45%;
  transform: rotate(5deg);
  width: 65%;
}
.design .design-contents .other-design .other-content .other-img-frame span {
  font-family: var(--KRfont);
  font-size: 28px;
  -webkit-text-stroke: var(--text-stroke);
  position: absolute;
  text-align: center;
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(1) span {
  left: 0;
  top: 70px;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(2) span {
  left: 120%;
  top: 150px;
  white-space: nowrap;
  transform: rotate(3deg);
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(4) span {
  top: -80px;
  left: 5%;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-5deg);
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(5) span {
  top: 40px;
  right: 20%;
  white-space: nowrap;
  transform: rotate(4deg);
}
.design .design-contents .other-design .other-content .other-img-frame:nth-child(6) span {
  top: 120px;
  left: 50%;
  white-space: nowrap;
  transform: rotate(4deg);
}
.design .design-contents .other-design .other-content .other-img-frame img {
  width: 85%;
}

/* photo */
.photo {}
.photo .photo-title {
  position: relative;
}
.photo .photo-title::before {
  background: url('../images/photo-title-bg.png') no-repeat;
  width: 490px;
  height: 166px;
  background-size: cover;
  content: '';
  display: block;
  top: 0;
  right: 0;
  position: absolute;
  transform: rotate(4deg);
}
.photo .photo-title span {
  position: absolute;
  transform: rotate(4deg);
  top: 20px;
  right: 8%;
}
.photo .photo-content {
  height: 1450px;
  padding-top: 120px;
}
.photo .photo-content .photo-box-frame1 {
  position: relative;
  height: 600px;
}
.photo .photo-content .photo-box-frame1::before {
  content: '';
  display: block;
  background: url('../images/string.png') no-repeat;
  background-size: cover;
  width: 1750px;
  height: 190px;
  position: absolute;
  top: 0;
  left: -11%;
  transform: scale(1.1);
}
.photo .photo-content .photo-box-frame1 .photo-box {
  background: url('../images/photo-paper.png') no-repeat;
  width: 320px;
  height: 460px;
  background-size: cover;
  position: absolute;
  top: 10%;
  left: -5%;
  transform: scale(0.9) rotate(2deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(2) {
  left: 17%;
  top: 16%;
  transform: scale(0.9) rotate(-2deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(3) {
  left: 39%;
  top: 24%;
  transform: scale(0.9) rotate(2deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(4) {
  left: 61%;
  top: 26%;
  transform: scale(0.9) rotate(-2deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(5) {
  top: 21%;
  transform: scale(0.9) rotate(1deg);
  left: 83%;
}
.photo .photo-content .photo-box-frame1 .photo-box::before {
  content: '';
  display: block;
  background: url('../images/wooden-tongs.png') no-repeat;
  width: 44px;
  height: 122px;
  position: absolute;
  top: -14%;
  left: 50%;
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(1):before {
  transform: translateX(-50%) rotate(-3deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(2):before {
  transform: translateX(-50%) rotate(4deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(3):before {
  transform: translateX(-50%) rotate(-2deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(4):before {
  transform: translateX(-50%) rotate(5deg);
}
.photo .photo-content .photo-box-frame1 .photo-box:nth-child(5):before {
  transform: translateX(-50%) rotate(-3deg);
}
.photo .photo-content .photo-box-frame1 .photo-box .photo-frame {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  transition: opacity .3s linear;
  opacity: 1;
}
.photo .photo-content .photo-box-frame1 .photo-box .photo-frame:hover {
  opacity: 0;
}
.photo .photo-content .photo-box-frame1 .photo-box .photo-frame span {
  display: inline-block;
  padding: 5px 20px;
  background-color: rgba(0,0,0,.7);
  color: #fff;
  font-family: var(--KRfont);
  font-size: 24px;
  position: absolute;
  bottom: 5%;
}
.photo .photo-content .photo-box-frame1 .photo-box .photo-frame .photo-img-frame {
  border-radius: 15px;
  overflow: hidden;
  width: 250px;
  height: 365px;
}
.photo .photo-content .photo-box-frame1 .photo-box .photo-frame .photo-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo .photo-content .photo-box-frame2 {
  position: relative;
  height: 600px;
}
.photo .photo-content .photo-box-frame2::before {
  content: '';
  display: block;
  background: url('../images/string.png') no-repeat;
  background-size: cover;
  width: 2200px;
  height: 247px;
  position: absolute;
  top: -60px;
  left: -22%;
  transform: scale(-1, 1);
}
.photo .photo-content .photo-box-frame2 .photo-box {
  background: url('../images/photo-paper.png') no-repeat;
  width: 320px;
  height: 460px;
  background-size: cover;
  position: absolute;
  top: 22%;
  left: -6%;
  transform: scale(0.9) rotate(-1deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(2) {
  left: 16%;
  top: 27%;
  transform: scale(0.9) rotate(1deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(3) {
  left: 39%;
  top: 23%;
  transform: scale(0.9) rotate(-3deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(4) {
  left: 61%;
  top: 17%;
  transform: scale(0.9) rotate(1deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(5) {
  top: 8%;
  transform: scale(0.9) rotate(-2deg);
  left: 83%;
}
.photo .photo-content .photo-box-frame2 .photo-box::before {
  content: '';
  display: block;
  background: url('../images/wooden-tongs.png') no-repeat;
  width: 44px;
  height: 122px;
  position: absolute;
  top: -14%;
  left: 50%;
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(1):before {
  transform: translateX(-50%) rotate(-3deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(2):before {
  transform: translateX(-50%) rotate(4deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(3):before {
  transform: translateX(-50%) rotate(-2deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(4):before {
  transform: translateX(-50%) rotate(5deg);
}
.photo .photo-content .photo-box-frame2 .photo-box:nth-child(5):before {
  transform: translateX(-50%) rotate(-3deg);
}
.photo .photo-content .photo-box-frame2 .photo-box .photo-frame {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  transition: opacity .3s linear;
  opacity: 1;
}
.photo .photo-content .photo-box-frame2 .photo-box .photo-frame:hover {
  opacity: 0;
}
.photo .photo-content .photo-box-frame2 .photo-box .photo-frame span {
  display: inline-block;
  padding: 5px 20px;
  background-color: rgba(0,0,0,.7);
  color: #fff;
  font-family: var(--KRfont);
  font-size: 24px;
  position: absolute;
  bottom: 5%;
}
.photo .photo-content .photo-box-frame2 .photo-box .photo-frame .photo-img-frame {
  border-radius: 15px;
  overflow: hidden;
  width: 250px;
  height: 365px;
}
.photo .photo-content .photo-box-frame2 .photo-box .photo-frame .photo-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo .photo-content .filming {
  position: absolute;
  top: 42.5%;
  left: 10px;
}
.photo .photo-content .filming span {
  font-family: var(--KRfont);
  font-size: 28px;
  letter-spacing: -0.8px;
  -webkit-text-stroke: var(--text-stroke);
  position: absolute;
  left: 85%;
  top: 120px;
  transform: rotate(3deg);
  white-space: nowrap;
}
.photo .photo-content .filming img {
  mix-blend-mode: multiply;
  display: block;
  width: 80%;
}

/* viedo */
.video {
  height: 1550px;
}
.video .video-title {
  position: relative;
  height: 215px;
  width: 450px;
}
.video .video-title::before {
  position: absolute;
  content: '';
  display: block;
  background: url('../images/viedo-title-bg.png') no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  left: 0;
  top: 0;
}
.video .video-title .content-title {
  position: absolute;
  transform: rotate(-5deg);
  top: 50px;
  left: 80px;
}
.video .video-content {
  position: relative;
  height: 1285px;
  margin-top: 50px;
}
.video .video-content > span {
  font-family: var(--KRfont);
  font-size: 24px;
  -webkit-text-stroke: var(--text-stroke);
  position: absolute;
  top: -40px;
  left: 5%;
  transform: rotate(-3deg);
}
.video .video-content .video-1 {
  background: url('../images/video-frame1.png') no-repeat;
  width: 675px;
  height: 455px;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.video .video-content .video-project {
  position: relative;
}
.video .video-content .video-project .video-modal {
  width: 100%;
  padding-bottom: 56.25%;
  display: none;
}
.video .video-content .video-project .video-modal.active {
  display: block;
}
.video .video-content .video-project .video-modal video {
  border-radius: 20px;
  position: fixed;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  height: 80%;
  z-index: 10;
}
.video .video-content .video-project .video-modal span {
  position: fixed;
  z-index: 11;
  top: 87%;
  left: 15%;
  z-index: 11;
  font-size: 24px;
  color: #fff;
  font-family: var(--KRfont);
  background: rgba(0,0,0,.6);
  padding: 5px 10px;
}
.video-modal-mask {
  background-color: rgba(0,0,0,.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9;
  left: 0;
  top: 0;
  display: none;
}
.video-modal-mask.active {
  display: block;
}

.video .video-content .video-frame img {
  width: 500px;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
}
.video .video-content .video-2 {
  background: url('../images/video-frame2.png') no-repeat;
  width: 600px;
  height: 490px;
  background-size: cover;
  position: absolute;
  right: -15px;
  top: 100px;
}
.video .video-content .video-3 {
  background: url('../images/video-frame3.png') no-repeat;
  width: 680px;
  height: 503px;
  background-size: cover;
  position: absolute;
  left: -20px;
  top: 500px;
}
.video .video-content .video-4 {
  background: url('../images/video-frame4.png') no-repeat;
  width: 620px;
  height: 513px;
  background-size: cover;
  position: absolute;
  right: -20px;
  top: 700px;
}
.video .video-content .video-project .video-frame {
  border-radius: 10px;
  width: 500px;
  height: 283px;
  overflow: hidden;
  position: absolute;
}
.video .video-content .video-1 .video-frame {
  top: 53%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-4deg);
}
.video .video-content .video-2 .video-frame {
  top: 48%;
  left: 49%;
  transform: translate(-50%,-50%) rotate(5deg);
}
.video .video-content .video-3 .video-frame {
  top: 49%;
  left: 44%;
  transform: translate(-50%,-50%) rotate(1.5deg);
}
.video .video-content .video-4 .video-frame {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(3deg);
}
.video .video-content .video-project .video-frame video {
  width: 100%;
  height: 100%;
}

/* contact */
.contact {
  height: 1300px;
  position: relative;
}
.contact .container {
  position: relative;
}
.contact .contact-title {
  background: url('../images/contact-title-bg.png') no-repeat;
  height: 204px;
  width: 533px;
  position: absolute;
  right: -15px;
  z-index: 3;
}
.contact .contact-title .content-title {
  position: absolute;
  transform: rotate(9deg);
  bottom: 55px;
  right: 60px;
}
.contact .contact-content {
  /* position: relative; */
  height: 1300px;
  width: 100vw;
  text-align: center;
}
.contact .contact-content::before {
  content: '';
  display: block;
  background: url('../images/contact-content-bg.png') no-repeat;
  width: 1266px;
  height: 1086px;
  position: absolute;
  left: 52%;
  top: 200px;
  transform: translateX(-50%);
}
.contact .contact-content .contact-desc {
  position: absolute;
  left: 50%;
  top: 515px;
  transform: translateX(-50%);
  font-family: var(--KRfont);
}
.contact .contact-content .contact-desc h3 {
  font-family: "Oranienbaum";
  font-size: 91px;
}
.contact .contact-content .contact-desc span {
  display: block;
  -webkit-text-stroke: var(--text-stroke);
  font-size: 34px;
  margin-top: 30px;
  line-height: 1.5em;
}
.contact .contact-content .contact-desc .e-mail {
  font-family: var(--KRfont);
  user-select: text;
  line-height: 1;
  -webkit-text-stroke: 0;
  margin-top: 50px;
  cursor: text;
}
.contact .contact-content .contact-desc .copyright {
  line-height: 1;
  font-family: var(--KRfont);
  -webkit-text-stroke: 0;
  margin: 15px;
}
.contact .contact-content .contact-desc .sns-icon {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}
.contact .contact-content .contact-desc .sns-icon a i {
  display: block;
  color: var(--text-color);
  font-size: 42px;
}
.contact .contact-content .contact-desc .sns-icon a span {
  font-size: 24px;
  line-height: 1.2em;
  margin-top: 0;
}
.contact .contact-content .contact-desc .sns-icon .contact-box {}
.contact .contact-content .contact-desc .sns-icon .contact-box i {
  font-size: 42px;
  cursor: pointer;
}
.contact .contact-content .contact-desc .sns-icon .contact-box .contact-mail h3 {
  font-family: var(--KRfont);
  font-size: 24px;
  line-height: 1.2em;
  margin-top: 15px;
}
/* contact email modal창 */
.contact-modal {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    background: rgba(0,0,0,.8);
    border-radius: 20px;
    padding: 30px 35px 0;
    display: none;
    z-index: 99;
}
.contact-modal h3 {
    color: #eee;
    font-size: 32px;
    text-align: center;
    margin-bottom: 20px;
    font-family: "Oranienbaum";
}

.contact-modal form input,
.contact-modal form textarea {
    display: block;
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    outline:none;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    border-radius: 5px;
}
.contact-modal form textarea {
    height:100px;
}
.contact-modal form input::placeholder,
.contact-modal form textarea::placeholder {
    color: #ddd;
}
.contact-modal form .button {
    width: 80px;
    margin: 20px auto 0;
    background-color: #fff;
    color: #121212;
    cursor: pointer;
}
.contact-modal form .reset {
    opacity: 0;
    visibility: hidden;
}
/* modal-mask */
.contact-modal-mask {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.2);
    display:none;
    z-index: 10;
}