@charset "UTF-8"; /* ---- #visual */ #visual {position:relative; overflow:hidden;} #visual .slide {width:100%; height:100vh; min-height:600px; position:relative; display:flex; justify-content:center; align-items:center; text-align:center;} #visual .slide .text {display:flex; flex-direction:column; align-items:center; position:relative; z-index:2;} #visual .slide .text h2 {margin-bottom:2rem;} #visual .slide .video {width:100%; height:100vh; object-fit:cover; position:absolute; top:0; z-index:1;} #visual .dots {display:flex; position:absolute; top:calc(100vh - 2em); left:50%; transform:translateX(-50%); z-index:5;} #visual .dots li {line-height:0; margin:0 0.25rem;} #visual .dots li button {background:var(--txtColor); border-radius:0.25rem; color: transparent; font-size:0; line-height:0; opacity:0.4; padding:0.25rem; transition:all 0.2s;} #visual .dots li.slick-active button {opacity:1; padding:0.25rem 0.5rem;} /* ---- #container */ #container section {width:100%; margin:0 auto; padding:6rem 5% 5rem; cursor:default;} /* ---- #container section#about */ #container section#about {padding-left:0; padding-right:0; overflow-x:hidden;} #container section#about h3.title {font-size:1.25rem; font-weight:200; line-height:1.6; text-align:center; margin-bottom:1rem;} #container section#about h3.title span {display:flex; flex-flow:row nowrap; align-items:flex-end; justify-content:center; line-height:1; margin-bottom:0.4em;} #container section#about h3.title img {height:1em; margin-right:0.25em;} #container section#about .contents {width:1300px; margin:0 auto; display:flex; flex-direction:column;} #container section#about .contents .line {height:9rem; display:flex; flex-flow:row nowrap; align-items:flex-end; justify-content:space-around; position:relative;} #container section#about .contents .line::before {content:''; display:block; width:100vw; height:0; border-bottom:1rem solid var(--bgDefault); position:absolute; top:50%; transform:translateY(-50%); z-index:4;} #container section#about .contents .line::after {content:''; display:block; width:4rem; height:8rem; border-radius:0 5rem 5rem 0; border-bottom:1rem solid var(--bgDefault); border-top:1rem solid var(--bgDefault); border-right:1rem solid var(--bgDefault); position:absolute; top:calc(50% - 0.5rem); z-index:4;} #container section#about .contents .line:nth-child(1) {width:calc(100% / 3 * 2);} #container section#about .contents .line:nth-child(1)::before {right:0;} #container section#about .contents .line:nth-child(1)::after {left:100%;} #container section#about .contents .line:nth-child(2) {width:calc(100% / 3 * 2); align-self:center;} #container section#about .contents .line:nth-child(2)::before {width:calc(75% + 1px); left:-1px;} #container section#about .contents .line:nth-child(2)::after {transform:rotate(180deg); right:100%;} #container section#about .contents .line:nth-child(3) {width:100%;} #container section#about .contents .line:nth-child(3)::before {left:10rem;} #container section#about .contents .line:nth-child(3)::after {display:none;} #container section#about .contents .line .box {display:flex; flex-direction:column; align-items:center; justify-content:flex-end; position:relative; z-index:5;} #container section#about .contents .line .box img {height:5rem; margin-bottom:0.5rem;} /* ---- #container section#works */ #container section#works {max-width:1920px; display:flex; flex-flow:row nowrap; justify-content:space-between;} #container section#works ul.tab {display:flex; align-items:stretch; position:relative;} #container section#works ul.tab.active {width:1000px;} #container section#works ul.tab:not(.active) {width:calc((90% - 1000px) / 3);} #container section#works ul.tab > li {border-radius:2rem; display:block;} #container section#works ul.tab li.summary {width:100%; background:var(--bgDefault); display:flex; align-items:center; font-size:1.75rem; font-weight:700; writing-mode:vertical-rl; cursor:pointer; padding:3.5rem 7%; transition:all 0.3s ease-out;} #container section#works ul.tab li.summary:hover {color:var(--pointColor);} #container section#works ul.tab li.detail {width:0; visibility:hidden; position:relative; right:0; z-index:-1; overflow:hidden;} #container section#works ul.tab li.detail .inner {width:1000px; height:100%; padding:3.5rem 4rem 3rem;} #container section#works ul.tab.active li.summary {display:none;} #container section#works ul.tab.active li.detail {width:100%; background:var(--bgActive); z-index:1; visibility:visible; transition: all 0.75s;} #container section#works li.detail .inner {display:flex; flex-flow:column nowrap; justify-content:space-between; font-size:1rem;} #container section#works li.detail .inner .contents {padding-bottom:10%;} #container section#works li.detail .inner .contents img.icon {height:4em;} #container section#works li.detail .inner .contents h3.title {line-height:1; margin:0.5em 0 1em;} #container section#works li.detail .inner .contents h4 {font-size:1.25em; font-weight:600; line-height:1; margin-bottom:0.5em; margin-top:1.5em;} #container section#works li.detail .inner .contents p {font-weight:200;} #container section#works li.detail .inner .contents p.styleMb {margin-bottom:0.5em;} #container section#works li.detail .inner .contents p strong {font-weight:500;} #container section#works li.detail .inner ul.service {display:flex; flex-flow:row wrap; border-top:1px solid var(--txtColor);padding-top:3%;} #container section#works li.detail .inner ul.service li {margin:1em 1.5em 0 0;} #container section#works li.detail .inner ul.service li:nth-child(5) {padding-right:calc(100% - 25rem);} #container section#works li.detail .inner ul.service li img {height:2.5rem;} /* ---- #container section#customer */ #container section#customer {max-width:1920px;} #container section#customer .wrapper {padding-bottom:5%;} #container section#customer .wrapper.talk {display:flex; justify-content:space-between;} #container section#customer .wrapper h3.title {line-height:1.2; font-weight:500;} #container section#customer .wrapper.talk h3.title strong {font-weight:700;} #container section#customer .wrapper.talk h3.title img {height:2.5em; display:block; margin-top:15%;} #container section#customer .wrapper.talk .contents {max-width:900px; font-size:0.9em; font-weight:500;} #container section#customer .wrapper.talk .contents b {font-weight:700;} #container section#customer .wrapper.talk .contents ul {display:flex; flex-flow:column;} #container section#customer .wrapper.talk .contents li {width:100%; display:flex; align-items:flex-end; margin-bottom:1.5em;} #container section#customer .wrapper.talk .contents li::before {content:''; width:4em; height:4em; display:block;} #container section#customer .wrapper.talk .contents li .bubble {width:fit-content; border-radius:1.25em; padding:1em 1.5em; position:relative; align-items:flex-start; background:var(--txtColor); color:var(--bgColor); word-wrap:break-word; max-width:75%;} #container section#customer .wrapper.talk .contents li .bubble::before {content:''; width:0; height:0; border-bottom:1em solid transparent; position:absolute; top:100%;} #container section#customer .wrapper.talk .contents li.left {padding-right:15%;} #container section#customer .wrapper.talk .contents li.left::before {margin-right:1em;} #container section#customer .wrapper.talk .contents li.left .bubble::before {border-left:1em solid var(--txtColor); left:2em;} #container section#customer .wrapper.talk .contents li.right {align-self:flex-end; padding-left:15%;} #container section#customer .wrapper.talk .contents li.right::before {order:2; margin-left:1em;} #container section#customer .wrapper.talk .contents li.right .bubble {order:1; margin-left:auto;} #container section#customer .wrapper.talk .contents li.right .bubble::before {border-right:1em solid var(--txtColor); right:2em;} #container section#customer .wrapper.client .contents ul {padding-top:4rem; display:flex; flex-flow:row wrap; align-items:stretch; gap:2.5em;} #container section#customer .wrapper.client .contents li {width:calc((100% - 7.5em) / 3); border-radius:2em; background:var(--txtColor); display:flex; align-items:center; justify-content:center; padding:2.25em 5%;} #container section#customer .wrapper.client .contents li img {display:block; backface-visibility:hidden; transform:translateZ(0);} /* ---- #contact */ #contact {width:100vw; height:100vh; background:var(--modalColor); display:none; position:fixed; top:0; left:0; z-index:9; overflow:hidden;} #contact.modal {backdrop-filter:blur(0.25rem); -webkit-backdrop-filter:blur(0.25rem);} #contact.modal .modalBox {max-width:30rem; background:var(--txtColor); color:var(--bgColor); border-radius:2rem; padding:2.5rem 3.5rem; position:absolute; top:50%; left:50%; z-index:10; transform:translate(-50%, -50%);} #contact.modal .modalBox h3.title {font-size:2.25rem; font-weight:600; line-height:1; margin-bottom:1em;} #contact.modal .modalBox form {font-size:0.9em; font-weight:500;} #contact.modal .modalBox form label {width:100%; display:flex; align-items:center; justify-content:stretch; margin-bottom:1em;} #contact.modal .modalBox form label span {width:4em; font-weight:700;} #contact.modal .modalBox form label span.styleSpacing {letter-spacing:0.25em;} #contact.modal .modalBox form label input, #contact.modal .modalBox form label textarea {width:18rem; padding:0.25em 0.5em; font-size:0.8em; border:1px solid var(--bgColor); resize:none;} #contact.modal .modalBox form button {width:10em; background:var(--pointColor); color:var(--txtColor); display:block; margin:2em auto 0; padding: 0.5em;} #contact.modal .modalBox button#modalCloseBtn {position:absolute; top:2rem; right:2rem;} #contact.modal .modalBox button#modalCloseBtn img {height:1.5rem; display:block;} #contact.modal .modalClose {width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:9;} .verResp {display:none !important;} @media only screen and (max-width:1600px) { /* ---- #container section#works */ #container section#works ul.tab:not(.active) {width:calc((95% - 1000px) / 3);} /* ---- #container section#customer */ #container section#customer .wrapper.talk .contents {max-width:800px;} #container section#customer .wrapper.talk .contents li.left {padding-right:5%;} #container section#customer .wrapper.talk .contents li.right {padding-left:5%;} } @media only screen and (max-width:1400px) { /* ---- #container */ #container section {padding:6rem 2rem 4rem;} /* ---- #container section#about */ #container section#about h3.title {font-size:1.2rem; margin-bottom:2.5%;} #container section#about h3.title span {line-height:0.8;} #container section#about .contents {width:900px;} #container section#about .contents .line {height:8rem;} #container section#about .contents .line::after {width:3.5rem; height:7rem;} #container section#about .contents .line:nth-child(1) {width:calc(100% / 3 * 2);} #container section#about .contents .line:nth-child(3)::before {left:8rem;} #container section#about .contents .line .box img {height:4.5rem;} /* ---- #container section#works */ #container section#works ul.tab:not(.active) {width:calc((95% - 800px) / 3);} #container section#works ul.tab.active {width:800px;} #container section#works ul.tab li.summary {font-size:1.5rem; padding:3rem 7%;} #container section#works ul.tab li.detail .inner {width:800px; height:100%; padding:2.5rem 3rem 3rem;} #container section#works li.detail .inner .contents img.icon {height:3.5em;} #container section#works li.detail .inner .contents h4 {font-size:1.2em;} #container section#works li.detail .inner ul.service {padding-top:1.5rem;} #container section#works li.detail .inner ul.service li {margin:1em 1.2em 0 0;} #container section#works li.detail .inner ul.service li:nth-child(5) {padding-right:calc(100% - 20rem);} #container section#works li.detail .inner ul.service li img {height:2.25rem;} /* ---- #container section#customer */ #container section#customer .wrapper h3.title {display:flex; flex-direction:column; justify-content:center;} #container section#customer .wrapper.talk h3.title img {width:7em; height:auto; margin-top:1em;} #container section#customer .wrapper.talk .contents {max-width:700px;} #container section#customer .wrapper.talk .contents li.left {padding-right:5%;} #container section#customer .wrapper.talk .contents li.right {padding-left:5%;} #container section#customer .wrapper.talk .contents li::before {width:3em; height:3em;} } @media only screen and (max-width:1200px) { /* ---- #container section#works */ #container section#works ul.tab:not(.active) {width:calc((95% - 700px) / 3);} #container section#works ul.tab.active {width:700px;} #container section#works ul.tab li.detail .inner {width:700px;} } @media only screen and (max-width:1024px) { /* ---- #container */ #container section {display:flex; flex-direction:column; align-items:center; justify-content:center;} /* ---- #container section#about */ #container section#about .contents {width:80%;} #container section#about .contents .line:nth-child(3)::before {left:calc(100% / 6);} /* ---- #container section#works */ #container section#works {flex-flow:column-reverse; justify-content:flex-end;} #container section#works ul.tab {display:block; margin-bottom:0.5rem;} #container section#works ul.tab:not(.active) {width:100%;} #container section#works ul.tab.active {width:100%;} #container section#works ul.tab > li {border-radius:1.5rem;} #container section#works ul.tab li.summary {font-size:1.25rem; padding:1rem 2rem; writing-mode:inherit;} #container section#works ul.tab li.detail {width:100%; height:0;} #container section#works ul.tab li.detail .inner {width:100%; height:auto; padding:2rem 2rem 1.5rem;} #container section#works ul.tab.active li.detail {height:100%;} #container section#works li.detail .inner .contents {padding-bottom:2rem;} #container section#works li.detail .inner ul.service {padding-top:1rem;} #container section#works li.detail .inner ul.service li {margin:0.5rem 1rem 0 0;} #container section#works li.detail .inner ul.service li:nth-child(5) {padding-right:0;} #container section#works li.detail .inner ul.service li img {height:2rem;} /* ---- #container section#customer */ #container section#customer .wrapper h3.title {flex-flow:row wrap; justify-content:stretch; padding-bottom:4rem;} #container section#customer .wrapper h3.title br {display:none;} #container section#customer .wrapper.talk {flex-direction:column;} #container section#customer .wrapper.talk h3.title {width:calc(95% - 5em); justify-content:flex-start;} #container section#customer .wrapper.talk h3.title img {width:9em; height:auto; margin-top:1rem;} #container section#customer .wrapper.talk h3.title strong {padding-left:0.35em;} #container section#customer .wrapper.talk .contents {max-width:inherit;} #container section#customer .wrapper.talk .contents li.left {padding-right:0;} #container section#customer .wrapper.talk .contents li.right {padding-left:0;} #container section#customer .wrapper.talk .contents li::before {width:3em; height:3em;} #container section#customer .wrapper.talk .contents li .bubble {border-radius:0.8em; padding:0.8em 1em;} #container section#customer .wrapper.talk .contents li .bubble::before {border-bottom-width:0.5em;} #container section#customer .wrapper.talk .contents li.left .bubble::before {border-left-width:0.5em; left:1em;} #container section#customer .wrapper.talk .contents li.right .bubble::before {border-right-width:0.5em; right:1em;} #container section#customer .wrapper.client {padding-top:10vmax;} #container section#customer .wrapper.client h3.title {font-weight:600;} #container section#customer .wrapper.client .contents ul {padding-top:0; gap:2em;} #container section#customer .wrapper.client .contents li {width:calc((100% - 4em) / 3); border-radius:1.5em; padding:1.5em 5%;} #container section#customer .wrapper.client .contents li img {width:100%; height:3.5em; object-fit:contain;} .verAdap {display:none !important;} .verResp {display:block !important;} } @media only screen and (max-width:768px) { /* ---- #container section#customer */ #container section#customer .wrapper h3.title {padding-bottom:3rem;} #container section#customer .wrapper.talk h3.title {width:20em;} #container section#customer .wrapper.client .contents ul {gap:1.5em;} #container section#customer .wrapper.client .contents li {width:calc((100% - 3em) / 3);} } @media only screen and (max-width: 680px) { /* ---- #container */ #container section {padding:6rem 1rem 2rem;} /* ---- #container section#about */ #container section#about .contents .line {height:7rem;} #container section#about .contents .line::after {width:3rem; height:6rem;} #container section#about .contents .line .box img {height:3.25rem;} /* ---- #container section#works */ #container section#works ul.tab > li {border-radius:1.25rem;} #container section#works ul.tab li.summary {padding:1rem 1.5rem;} #container section#works ul.tab li.detail .inner {padding:1.5rem 1.5rem 1rem;} #container section#works li.detail .inner .contents img.icon {height:3em;} #container section#works li.detail .inner ul.service li {margin:0.25em 1em 0 0;} #container section#works li.detail .inner ul.service li img {height:1.5rem;} /* ---- #container section#customer */ #container section#customer .wrapper.talk h3.title {width:100%; flex-direction:column;} #container section#customer .wrapper.talk h3.title strong {padding-left:0;} #container section#customer .wrapper.client .contents ul {gap:1em;} #container section#customer .wrapper.client .contents li {width:calc((100% - 2em) / 3); border-radius:1.25rem; padding:1.5vw 5%;} } @media only screen and (max-width: 425px) { /* ---- 성택추가 - 모바일에서 메인영상의 마지막 멘트부분이 잘리는 현상이 있어서 height값 조절함 */ #visual .slide {height:60vh;min-height:60vh;} #visual .slide .video {height:60vh;} }