/* Common */ /* global */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; cursor: none; font-family: Jost, "Pretendard Variable", -apple-system, sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;} :root { --pointColor: #009900; /* 007a3f C60000 A21F24 00ff6a */ --sys-cursor: none; } ::selection { background: var(--pointColor); color: #Fff;} html {font-size: 16px;} body { /*background: linear-gradient(45deg, #fff 70%, rgba(0, 122, 63, 5.0)); background-size: 200% 200%;*/ /* 크게 잡아줘야 애니메이션 시 자연스럽습니다 */ /*animation: waveGradient 10s ease-in-out infinite;*/} @keyframes waveGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } html, body, *:not(input):not(textarea):not(select) { cursor: var(--sys-cursor); } a { cursor: auto; } input, textarea {transition: all 0.3s;} input:focus, textarea:focus {outline: none; border: 2px solid var(--pointColor); !important; box-shadow: 0 0 10px var(--pointColor);} /* (198, 0, 0, 0.6) */ span.break {display: block;} .kr {font-family: "Pretendard Variable";} /* header, nav */ #cursor { position: fixed; width: 1rem; aspect-ratio: 1/1; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, 0.1); backdrop-filter: invert(100%); -webkit-backdrop-filter: invert(100%); mix-blend-mode: revert; /* 색상 반전 효과 */ transform: translate(-50%, -50%); transition: transform 0.3s; z-index: 999999999999; } #cursor.hovered {transform: translate(-50%, -50%) scale(2.0);} nav { position: fixed; top: 0; left: 0; height: 80px; width: 100%; background: rgba(255, 255, 255, 1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 99999;} nav .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 20px 40px; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal;} nav .wrap h2 { display: none; font-size: 2rem; opacity: 0; transition: all 0.3s;} nav .wrap a .main_logo {height: 40px;} nav .wrap a {text-decoration: none; color: #000; transition: all 0.3s;} nav .wrap a:nth-child(3) {margin-left: -6rem;} nav .wrap a:nth-child(4) {margin-right: -6rem;} nav .wrap a:hover { color: var(--pointColor); scale: 1.1; } nav .wrap #burger { display:none; } nav .wrap #burger > div { position: relative; display: flex; justify-content: space-between; flex-flow: column; top: -1px; width: 26px; height: 18px;} nav .wrap #burger > div > span {width: 100%; border-top: 1px solid #000; transition: all 0.3s;} nav .wrap #burger.clicked span {} nav .wrap #burger.clicked span:nth-child(1) {transform: rotate(45deg);translate: 0px 8.5px;} nav .wrap #burger.clicked span:nth-child(2) {transform: rotate(-45deg);} nav .wrap #burger.clicked span:nth-child(3) {opacity: 0;} nav.clicked .wrap h2 {display:block; opacity: 1;} nav.clicked .wrap a .main_logo {display: none;} footer.clicked {z-index: 1;} /* 팝업메뉴 */ #aside_menu {position: fixed; top: 0; left:0; z-index: -1; width: 100%; height: 100%; background: #fff; opacity: 0; flex-flow: column; transition: all 0.3s; } #aside_menu .aside_menu-wrap {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative;} #aside_menu .link_list { width:100%; text-align: left; font-size: 12vw; line-height: 120%; display: flex; flex-flow: column; justify-content: center; align-items: flex-start;} #aside_menu .link_list a {position: relative; display: block; width: fit-content; text-decoration: none; transition: all 0.3s; color: #000;} #aside_menu .link_list a:last-child {margin: 1em 0 0;} #aside_menu .link_list a:hover { transform:scale(1.05); color: var(--pointColor);} #aside_menu .link_list a::after {content: ""; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: 0.05em; background-color: var(--pointColor); transform: scaleX(0); transform-origin: left; transition: all 0.3s ease;} #aside_menu .link_list a:hover::after {transform: scaleX(1); background-color: var(--pointColor);} #aside_menu .copyright {text-align: right; font-size: 1rem; line-height: 120%;} #title {position: relative; display: flex; flex-flow: column; justify-content: flex-end; z-index: 999; padding: 5rem 2rem 0; height: 100vh; pointer-events: none; transition: all 1s;} #title * {transition: all 1s;} #title *:not(h1) {opacity: 0;} #title h1 {position: relative; display: flex; padding: 5rem 0 0; left: 50%; width: fit-content; font-size: 10rem; font-weight: 500; line-height: 90%; transform: translateX(-50%) scale(1.5); transform-origin: bottom; will-change: transform, scale, font-size, left;} #title h1 span{margin: 0 -0.25rem 0 0; transform: translateY(100%); opacity: 1; animation: slideUp 0.6s ease-out forwards;} @keyframes slideUp { to {transform: translateY(0); opacity: 1;} } #title .kr_title_wrap { position: relative; width: 100%; } #title .kr_title_wrap span {display: block; position: absolute; top: 0; right: 0; font-size: 4rem; font-weight: 100; line-height: 100%; margin: 0 0 0 0.5rem;} #title.loaded {height: 22rem; pointer-events: initial;} #title.loaded *:not(h1) {opacity: 1;} #title.loaded h1 {font-size: 10rem; left: 0; transform: translateX(0%) scale(1.0); transform-origin: bottom; will-change: transform, scale, font-size, left;} #title.loaded h1 span {/*animation: font_resize 0.3s forwards;*/ transform: translateY(0%);} /* main */ section {display: flex; padding: 5rem 2rem; background-color: #fff; z-index: 10;} /* outro */ section#outro { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; text-align: center; font-size: 5rem; letter-spacing: -0.2rem; line-height: 100%; background-color: #f1f1f1;} /* footer */ footer {position: fixed; display: flex; padding: 3rem 2rem 2rem; bottom: -100vh; left: 0; width: 100vw; height:100dvh; background: #000; color: #fff; z-index: 99999;} footer > div:nth-of-type(1) { position: relative; flex: 61.91; } footer > div:nth-of-type(1) > div {padding-top: 3rem;} footer > div:nth-of-type(1) .title {padding: 0} footer > div:nth-of-type(1) .title h2 { font-size: 1rem; font-weight: 500; } footer > div:nth-of-type(1) .mailto a { font-size:3rem; text-decoration: none; color: #fff; border-bottom: 2px solid #fff;} footer > div:nth-of-type(1) .info { display:flex; gap: 1rem; flex-wrap: wrap;} footer > div:nth-of-type(1) .info > div:nth-of-type(1) {width: 100%;} footer > div:nth-of-type(1) .info > div:nth-of-type(2) {width: 15%;} footer > div:nth-of-type(1) .info > div:nth-of-type(3) {width: 40%;} footer > div:nth-of-type(1) .info a { color: #fff; word-break: keep-all;} footer > div:nth-of-type(1) .info h3 {padding: 0 0 0.5em; font-weight: bold;} footer > div:nth-of-type(1) .info p {padding: 0 0 1.5em;} footer > div:nth-of-type(2) {position: relative; flex: 38.09; display: flex;} footer > div:nth-of-type(2) > div:nth-of-type(1) {flex: 61.91;} footer > div:nth-of-type(2) > div:nth-of-type(2) {flex: 38.09; color: #fff;} footer > div:nth-of-type(2) .data {display: flex; flex-flow: column; gap: 1rem;} footer > div:nth-of-type(2) .data a {display: inline-block; padding: 0.5rem 1em; width: fit-content; background: #000; border: 1px solid #fff; border-radius: 1rem; text-decoration: none; color: #fff; transition: filter 0.3s;} footer > div:nth-of-type(2) .data a:hover {filter: invert(100%);} footer > div:nth-of-type(2) .misc a {text-decoration: none; color: #fff;} footer > div:nth-of-type(2) .copyright { position: absolute; right:0; bottom:0; text-align: right; font-size: 1rem;} footer > div:nth-of-type(3) .logo { position: absolute; bottom: 2rem; left: 2rem;} footer > div:nth-of-type(3) .main_logo-w { width: 40%; } /* 포트폴리오, 카테고리 */ ul#category-clone {padding: 0 0 5rem;} #title ul#category, ul#category-clone {list-style: none; display: flex; gap: 1rem; font-size: 1.5rem; z-index: 1;} #title ul#category a, ul#category-clone a {display: inline-block; text-decoration:none; color: #000; transition: all 0.3s; cursor: pointer;} #title ul#category a *, ul#category-clone a * {transition: all 0.3s;} #title ul#category a:hover, ul#category-clone a:hover { color: var(--pointColor); scale: 1.1; } #title ul#category a.selected *, ul#category-clone a.selected * { font-weight: bold; color: var(--pointColor);} #title ul#category a sup, ul#category-clone a sup { padding: 0 0 0 0.3em; } section#portfolio {padding: 3rem 2rem 0; flex-flow: column;} section#portfolio .work-wrap {display: flex; flex-wrap: wrap; gap: 8rem 1.5rem; width: 100%; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 1.25rem;} section#portfolio .work-wrap .work {height: fit-content;} section#portfolio .work-wrap .work a {display: block;} section#portfolio .work-wrap .work.hidden { display:none; } section#portfolio .work-wrap .work .work-thumb {overflow: hidden; width: 100%; background-size: cover !important;} section#portfolio .work-wrap .work .work-thumb::before { content: ""; display: block; width: 100%; height: 100%; background: inherit; background-size: cover !important; transition: all 1s; } section#portfolio .work-wrap .work:hover .work-thumb::before { transform: scale(1.2); } /**/ section#portfolio .work-wrap .work:nth-of-type(1) {width: calc(61.91% - 1.5rem * 1 / 2);} section#portfolio .work-wrap .work:nth-of-type(1) .work-thumb {width: 100%; aspect-ratio: 16/9; background: url('../img/p001.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(1) .work-sub {width: 100%; height: 80px;} section#portfolio .work-wrap .work:nth-of-type(2) {width: calc(38.09% - 1.5rem * 1 / 2);} section#portfolio .work-wrap .work:nth-of-type(2) .work-thumb {width: 100%; aspect-ratio: 16/9; background: url('../img/p002.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(2) .work-sub {width: 100%; height: 80px;} /**/ section#portfolio .work-wrap .work:nth-of-type(3) {width: calc(33.33% - 1.5rem * 2 / 3); visibility: hidden;} section#portfolio .work-wrap .work:nth-of-type(3) .work-thumb {width: 100%; aspect-ratio: 1/1; background: url('../img/p003.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(3) .work-sub {width: 100%; height: 80px;} section#portfolio .work-wrap .work:nth-of-type(4) {width: calc(33.33% - 1.5rem * 2 / 3);} section#portfolio .work-wrap .work:nth-of-type(4) .work-thumb {width: 100%; aspect-ratio: 1/1; background: url('../img/p003.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(4) .work-sub {width: 100%; height: 80px;} section#portfolio .work-wrap .work:nth-of-type(5) {width: calc(33.33% - 1.5rem * 2 / 3);} section#portfolio .work-wrap .work:nth-of-type(5) .work-thumb {width: 100%; aspect-ratio: 1/1; background: url('../img/p004.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(5) .work-sub {width: 100%; height: 80px;} /**/ section#portfolio .work-wrap .work:nth-of-type(6) {width: calc(50% - 1.5rem * 1 / 2);} section#portfolio .work-wrap .work:nth-of-type(6) .work-thumb {width: 75%; aspect-ratio: 1/1; background: url('../img/p005.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(6) .work-sub {width: 100%; height: 80px;} section#portfolio .work-wrap .work:nth-of-type(7) {width: calc(50% - 1.5rem * 1 / 2);} section#portfolio .work-wrap .work:nth-of-type(7) .work-thumb {width: 100%; aspect-ratio: 4/3; background: url('../img/p006.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(7) .work-sub {width: 100%; height: 80px;} /**/ section#portfolio .work-wrap .work:nth-of-type(8) {width: calc(100% - 1.5rem * 0 / 2);} section#portfolio .work-wrap .work:nth-of-type(8) .work-thumb {width: 70%; aspect-ratio: 16/9; margin: 0 auto; background: url('../img/p007.png') center center no-repeat;} section#portfolio .work-wrap .work:nth-of-type(8) .work-sub {width: 70%; height: 80px; margin: 0 auto;} section#portfolio .work-wrap .work .work-sub {width: fit-content; height: 80px;} section#portfolio .work-wrap .work .work-sub h5 {padding: 1rem 0 0;} section#portfolio .work-wrap .work .work-sub *{ transition: font-weight 0.3s; } section#portfolio .work-wrap .work:hover .work-sub * { font-weight: bold; color: var(--pointColor]);} /* 반응형 */ @media (max-width: 600px) { /* * */ * { cursor: initial !important; } html, body, footer {overflow-x: hidden !important; max-width: 100% !important; } nav, header, #outro, #aside_menu {max-width: 100% !important; overflow-x: hidden !important;} nav .wrap {padding: 20px 2rem !important;} nav .wrap a:nth-of-type(1) {display: flex;} nav .wrap a .main_logo {height: 30px !important;} section {display: block; max-width: 100% !important; overflow-x: hidden !important;} span.break {display: inline !important; padding: 0 !important;} #letter_effect {height: 100dvh !important;} .type1 .title h2 {font-size: 4vw; padding: 0 0 1.5rem; line-height: 120%;} .type1 .contents { font-size: 6vw !important; } section#capabilities .contents a, .type1 .contents a {font-size: 6.5vw !important;} .type1 .contents p {padding: 0 0 1em !important;} section#portfolio .work-wrap {display: block;} section#portfolio .work-wrap .work {width: 100% !important; padding: 0 0 2rem;} section#portfolio .work-wrap .work .work-sub *, section#portfolio .work-wrap .work .work-sub h5 { font-size: 3vw !important; } section#portfolio .work-wrap .work .work-thumb {width: 100% !important; height: 14rem; aspect-ratio: initial !important; margin: 0;} section#portfolio .work-wrap .work .work-sub {width: 100% !important; margin: 0 !important;} /*section#portfolio .work-wrap .work:nth-of-type(3) {display: none;}*/ section#ourcapabilities {padding-right: 2rem !important;} section#ourcapabilities .contents p {padding: 1em 0 !important; font-size: 6vw; line-height: 120%;} section#ourcapabilities .contents .capability_list a { font-size:6vw; } section#outro {letter-spacing: -0.01em !important;} section#outro p {font-size: 7vw; line-height: 120%;} footer {display: flex; flex-flow: column; } footer > div:nth-of-type(1) .mailto a {font-size: 8vw !important;} footer > div:nth-of-type(1) .info {display: block;} footer > div:nth-of-type(1) .title h2 {font-size: 5vw !important;} footer > div:nth-of-type(1) .info h3 {font-size: 5vw !important;} footer > div:nth-of-type(1) .info p { font-size: 4vw !important; } footer > div:nth-of-type(2) {display: block;} footer > div:nth-of-type(2) .data {display: block; padding: 0 0 1.5rem;} footer > div:nth-of-type(2) .data a {font-size: 4vw !important; margin: 0 0.2em 0 0;} footer > div:nth-of-type(2) .misc {display: block; padding: 0 0 1.5rem;} footer > div:nth-of-type(2) .misc a {font-size: 3vw !important;} footer > div:nth-of-type(2) .copyright {position: relative; padding: 0 0 1.5rem; text-align: left; font-size: 3vw !important;} footer > div:nth-of-type(3) .main_logo-w {width: 50% !important;} footer > div:nth-of-type(3) .logo {text-align: right; right: 2rem;} #title {height: 100dvh !important; } #title h1, #title h2 {font-size: 10vw !important;} #title h1 {transform: translateX(-50%) scale(1.5) translateY(-0.5em) !important;} #title h1 span {margin: 0 -0.01em 0 0 !important;} #title ul#category {padding: 0 0;} #title ul#category, ul#category-clone { line-height: 0%} #title.loaded ul#category {padding: 1em 0 0;} #title.loaded ul#category, ul#category-clone { display: block; line-height: 70%} #title ul#category li, ul#category-clone li { display: inline-block; word-break: keep-all; font-size: 3vw; margin: 0 0.5em 0 0;} #title.loaded {height: 14rem !important;} #title.loaded h1 {font-size: 10vw !important; transform: translateX(0%) scale(1.0) !important; } /* */ section#intro_about .step1-wrap > div:nth-of-type(1), section#intro_about .step1-wrap {gap: 1rem !important;} section#intro_about .step1-wrap > div:nth-of-type(1) {width: calc(50% - 1.5rem * 1 / 2) !important;} section#intro_about .step1-wrap > div:nth-of-type(1) .step1-thumb:nth-of-type(1) { width:100% !important; } section#intro_about .step1-wrap > div:nth-of-type(1) .step1-thumb:nth-of-type(2) { width:100% !important; } section#intro_about .step1-wrap > div:nth-of-type(2) {width: calc(50% - 1.5rem * 1 / 2) !important;} /* about.html */ section#intro_about .step1-wrap > div:nth-of-type(1) div:nth-of-type(1) {display: none;} section#intro_about .step1-wrap > div:nth-of-type(1) > .step1-thumb:nth-of-type(1) img { height: 8rem !important; } section#intro_about .desc p {font-size: 6vw !important;} .history > li .year {font-size: 4vw !important;} .history > li * { font-size: 3vw !important; } .history > li { display: block !important; font-size: 3vw !important;} .history > li:nth-of-type(2n) .event {padding: 0.5rem 0 0 18px;} .history > li:nth-of-type(2n + 1) .event {padding: 0.5rem 18px 0 0;} .history .event span.break { display: block !important; } section#clients {padding: 5rem 0 !important;} section#clients .title {font-size: 4vw !important;} .marquee, .marquee1, .marquee2, .marquee3 {padding: 0 !important;} .marquee2 {margin: -2rem 0 0;} .marquee3 {margin: -2rem 0 0;} .marquee .marquee_wrap { animation: marquee 35s linear infinite !important; } .marquee2 .marquee_wrap, .marquee3 .marquee_wrap {gap: 0 !important;} .client_logos {transform: scale(0.6) !important; margin-left: -7rem;} section#capabilities .title {font-size: 4vw !important;} section#capabilities .contents {padding: 3rem 2rem 0 !important; } section#capabilities .contents p {font-size: 6vw !important; padding: 1em 0 !important; line-height: 120%;} /* news */ .listOfArticles > li:hover {background: none !important;} .listOfArticles > li a {position: relative; padding: 2rem 0 !important;} .listOfArticles .article-wrap { flex-flow:column; gap: 1rem !important;} .listOfArticles .article-wrap > * {width: 100% !important;} .article-cate, .article-date {display: block !important;} .article-date { order: 1; font-size: 3vw !important;} .article-thumb { order: 2; } .article-cate { order: 3; font-size: 3vw !important; text-align: right; position: absolute; top: 1.5rem; right: 0;} .article-title { display: block !important; order: 4; padding: 0 !important; font-size: 6vw !important;} /* contact us */ section#email_form {padding: 3rem 2rem 0 !important;} section#email_form .form_container { display:block !important; } section#email_form .form_wrap { gap: 1rem !important; justify-content: flex-end;} section#email_form .form_wrap input {border-radius: none !important;} section#email_form .form_wrap > div:nth-of-type(1) {width: calc(50% - 0.5rem) !important;} section#email_form .form_wrap > div:nth-of-type(2) {width: calc(50% - 0.5rem) !important;} section#email_form .form_wrap > div:nth-of-type(3) {width: 100% !important;} section#email_form .form_wrap > div:nth-of-type(4) {width: 100% !important;} section#email_form .form_wrap button { font-size: 8vw !important; } section#email_form .form_container .title { font-size: 4vw !important; padding: 0 0 1.5rem; } section#email_form .project_type .checkbox_wrap label {font-size: 3vw !important;} section#email_form .project_type h5 {font-size: 4vw !important;} section#join .container {display: block !important;} section#join .container .title { font-size: 4vw !important; padding: 0 0 1.5rem; } section#join .container .contents a { font-size: 9vw !important; } section#info .container .contents a, section#info .container .contents span { font-size: 8vw !important;} section#info .container {display: block !important;} section#info .container .contents h5 {font-size: 4vw !important;} section#info .container .title { font-size: 4vw !important; padding: 0 0 1.5rem; } section#email_form .form_wrap input::placeholder, section#email_form .form_wrap textarea::placeholder { font-size: 3vw !important; } } @media (max-width: 1024px) { nav .wrap {justify-content: space-between;} nav .wrap #burger { display: block;} nav .wrap a:not(a:nth-of-type(1)) { display: none;} #aside_menu.clicked { z-index: 9999 !important; opacity: 1; } }