@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

body {
    font-family: 'Poppins', 'Spoqa Han Sans Neo', 'sans-serif';
}

/* sytle */

.display-style {
    font-size: 88px;
}

.title-style {
    font-size     : 28px;
    font-weight   : 700;
    text-transform: capitalize;
}

.desc-style {
    font-size  : 20px;
    font-weight: 300;
    line-height: 160%;
    opacity    : 0.9;
}

.none {
    display: none;
}

p {
    word-break         : keep-all;
    transition-property: border-color, font-size, line-height, letter-spacing;
    transition-duration: 0.3s;
}

.main-section {
    padding   : 160px 0;
    background: #090909;
    color     : #fefefe;
}

.inner-container {
    margin-left  : auto;
    margin-right : auto;
    padding-left : 64px;
    padding-right: 64px;
    max-width    : 1200px;
    box-sizing   : border-box;
}

/* header */

#header {
    width      : 100%;
    padding-top: 40px;
    position   : fixed;
    z-index    : 9;
}

#header-container {
    margin-left  : auto;
    margin-right : auto;
    padding-left : 4%;
    padding-right: 4%;
    max-width    : 1760px;
}

.logo-btn {
	position: fixed;
	background: none;
	border: none;
	padding: 0;
	top: 40px;
	left: 4%;
	mix-blend-mode: difference;
    z-index: 10000000;
}

.menu-btn {
    position: fixed;
	background: none;
	border: none;
	padding: 0;
	top: 40px;
	right: 4%;
	mix-blend-mode: difference;
    z-index: 10000000;
    cursor: pointer;
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }
    30% {
        display: block;
        opacity: 0.5;
    }
    60% {
        display: block;
        opacity: 1;
    }
}

nav {
    position: fixed;
    top: 108px;
    right: 4%;
    mix-blend-mode: difference;
    z-index: 10000000;
    display: none;
    animation: fadeInFromNone 0.2s ease-in;
    transition: 0.3s ease-out;
}

nav.active {
    display: block;
}

nav li {
    text-align: right;
}

nav li a{
    padding: 4px 0;
    color: #FEFEFE;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 45px;
    height: 45px;
    opacity: 0.5;
}

nav li a:hover{
    color: #FFFFFF;
    opacity: 1;
    transition: 0.3s ease-out;
}

/* home */

#home-section {
    height    : 100vh;
    background: #090909;
    color     : #fefefe;
}

.display-wrapper {
    position : absolute;
    left     : 0;
    right    : 0;
    top      : 50%;
    transform: translateY(-50%);
}

.display-area {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.display-title-item {
    font-size  : 100px;
    line-height: 120%;
    transform:
        translateX(calc(var(--mouse-x) * 0.05px))
        translateY(calc(var(--mouse-y) * 0.05px));
}

.display-label-item {
    transform:
        translateX(calc(var(--mouse-x) * 0.03px))
        translateY(calc(var(--mouse-y) * 0.03px));
}

.display-title-item p {
    font-weight: 600;
    position   : relative;
}

.display-title-item p::before {
    content : "";
    position: absolute;
    display : block;
    left    : 60%;
    width   : 45%;
    height  : 1.06em;
    border  : solid 0.08em #36B7FF;
    z-index : -1;
}

.display-title-item span {
    font-weight: 700;
    text-shadow: -1px 0 #fefefe, 0 1px #fefefe, 1px 0 #fefefe, 0 -1px #fefefe;
    color      : #090909;
    margin-left: 0.2em;
}

.display-label-item {
    font-size     : 18px;
    padding-top   : 12px;
    font-weight   : 300;
    line-height   : normal;
    letter-spacing: 0.6em;
    color         : #999999;
}

.display-label-item::after {
    content      : "";
    display      : block;
    border-bottom: 1px solid #999999;
    margin-top   : 12px;
}

.background-items {
    display: block;
}

.ball-item {
    position: absolute;
    top: 60%;
    left: 20%;
    /* transform:
        translateX(calc(var(--mouse-x) * 0.01px))
        translateY(calc(var(--mouse-y) * 0.01px)); */
    -webkit-animation : moveRight 3s infinite;
    -moz-animation    : moveRight 3s infinite;
    -o-animation      : moveRight 3s infinite;
    animation         : moveRight 3s infinite;
}

@keyframes moveRight {
    from { transform: translateX(0) }
    50% { transform: translateX(30%) }
    to   { transform: translateX(0%) }
 }

.scroll-down-item {
    padding-top: 48px;
    ;
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.chevron-bottom-icon li:nth-child(1) {
    margin-top: 12px;
    animation: blink-1 2s infinite;
}
@keyframes blink-1 {
    0% {opacity: 100%;}
    50% {opacity: 0%;}
    100% {opacity: 80%;}
 }

.chevron-bottom-icon li:nth-child(2) {
    margin-top: -16px;
    animation: blink-2 2s infinite;
    animation-delay: 0.3s;
}

@keyframes blink-2 {
    0% {opacity: 100%;}
    50% {opacity: 0%;}
    100% {opacity: 80%;}
 }

.chevron-bottom-icon li:nth-child(3) {
    margin-top: -16px;
    animation: blink-3 2s infinite;
    animation-delay: 0.6s;
}
@keyframes blink-3 {
    0% {opacity: 100%;}
    50% {opacity: 0%;}
    100% {opacity: 80%;}
 }





.text-flow-area {
    overflow   : hidden;
    white-space: nowrap;
    display    : flex;
    position   : absolute;
    left       : 0px;
    right      : 0px;
    bottom     : 56px;
}
.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    margin:0;
}
.text-flow-area ul{
    overflow:hidden;
    width:1000%;
    margin:0;
}
.text-flow-area li{
    display:inline-block;
    padding:0 50px;
}
.text-flow-area .orange-dot {
    padding-right : 24px;
    padding-bottom: 3px;
}

.text-flow-area p {
    display     : flex;
    align-items : center;
    font-size   : 30px;
    font-weight : 500;
    color       : #999;
}

.text-flow-area span {
    color         : #090909;
    text-transform: capitalize;
    line-height   : normal;
    padding-left  : 24px;
    text-shadow   : -1px 0 rgba(254, 254, 254, 0.2), 0 1px rgba(254, 254, 254, 0.2), 1px 0 rgba(254, 254, 254, 0.2), 0 -1px rgba(254, 254, 254, 0.2);
}

/* about */

#about-section {
    background: #36b7ef;
    color     : #fefefe;
}

#about-container {
    display        : flex;
    justify-content: space-between;
    position       : relative;
}

.about-title-area {
    display       : flex;
    flex-direction: column;
    font-weight   : 700;
    padding-right : 64px;
}

.subtitle-box {
    display    : flex;
    align-items: flex-end;
    flex-wrap  : wrap;
}

.subtitle-box .subtitle-item {
    font-size    : 64px;
    opacity      : 0.45;
    padding-right: 24px;
}

.subtitle-box .desc-box {
    display       : flex;
    align-items   : center;
    padding-bottom: 8px;
}

.subtitle-box .desc-box .border-item {
    width     : 80px;
    height    : 1px;
    background: #fefefe;
}

.subtitle-box .desc-box p {
    padding-left: 24px;
    font-size   : 24px;
}

.about-title-area .main-title-item {
    line-height: 120%;
    padding    : 32px 0;
}

.about-title-area .desc-item {
    font-weight   : 300;
    letter-spacing: 24px;
    opacity       : 0.5;
}

.about-contents-area {
    width: 35%;
    position: static;
    bottom: 0px;
    left: 65%;
}

.about-contents-area .content-box:nth-child(2) {
    padding: 33% 0;
}

.img-snow {
    position    : absolute;
    padding-top : 350px;
    left        : 90%;
}

/* what we do */

#wwd-container {
    position: relative;
}

.wwd-title-area {
    font-weight: 700;
}

.wwd-title-area span {
    color: #fd7b33;
}

.wwd-contents-area {
    padding-top          : 120px;
    display              : grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows   : 1fr 1fr;
    row-gap              : 80px;
    column-gap           : 10%;
}

.wwd-contents-area .content-box .desc-item {
    padding-top: 24px;
}

.img-diamond {
    position    : absolute;
    bottom      : 0;
    right       : 0;
    margin-right: 4%;
}

/* works */

#works-section {
    background: #fefefe;
    color     : #090909;
}

#works-container {
    position: relative;
}

.works-title-area {
    font-weight: 700;
}

.works-title-area span {
    color: #36B7FF;
}

.works-title-label {
    display        : flex;
    justify-content: space-between;
    font-size      : 18px;
    border-bottom  : 1px solid #090909;
    padding        : 48px 0 8px 0;
}

.works-count-item {
    background: #090909;
    color     : #fefefe;
    padding   : 0 2px;
}

.work-list-section {
    padding-top: 24px;
}

.work-list-wrapper {
    display      : flex;
    margin-bottom: 40px;
}

.year-item {
    width: 10%;
}

.year-item p {
    font-size  : 38px;
    font-weight: 600;
    font-style : italic;
    padding-top: 14px;
}

.work-list-area {
    width         : 60%;
    display       : flex;
    flex-direction: column;
    margin-left   : 160px;
}

.work-list-box {
    padding: 16px 0;
}

.work-list-box .title-item {
    font-weight: 600;
}

.work-list-box .desc-item {
    padding-top: 4px;
    font-weight: 400;
    opacity    : 0.8;
}

.view-btn {
    width          : 100%;
    display        : flex;
    justify-content: flex-end;
}

.view-btn button {
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
}

button:focus {outline:0;}

.img-view_more {
    display: none;
}

/* clients */

#clients-section {
    background-color: #111111;
}

#clients-container {
    display       : flex;
    flex-direction: column;
}

.clients-title-item {
    font-size  : 36px;
    font-weight: 700;
}

.clients-logo-area {
    align-self           : flex-end;
    display              : grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows   : 1fr 1fr;
    column-gap           : 60px;
    row-gap              : 60px;
    padding-top          : 40px;
    justify-items        : center;
    align-items          : center;
}

.clients-logo-box {
    width : 230px;
    height: 72px;
}

.logo-item {
    width: inherit;
}

/* work process */

#work-process-section {
    background: #090909;
    color     : #fefefe;
}

.process-title-item {
    font-size  : 64px;
    font-weight: 700;
}

.process-title-item span {
    color: #fd7b33;
}

.process-desc-item {
    font-size  : 20px;
    margin-top : 40px;
    line-height: 160%;
}

.process-flow-area {
    display    : flex;
    padding-top: 120px;
    overflow: hidden;
}

.process-flow-box {
    display     : flex;
    margin-right: 64px;
}

.process-num {
    width      : 40px;
    font-size  : 28px;
    font-weight: 700;
    color      : #fefefe;
    opacity    : 0.3;
}

.process-flow-box .flow-box {
    margin-left: 16px;
}

.process-flow-box .flow-box .desc-item {
    margin-top: 24px;
    width     : 450px;
}

/* contact */

#contact-section {
    background: #fefefe;
    color     : #090909;
}

.contact-title-area {
    display: flex;
}

.contact-title-area img {
    width : 24px;
    height: 24px;
}

.contact-title-area .title-item {
    font-weight: 700;
}

.contact-img-area img {
    padding-top: 16px;
    width      : 100%;
}

.contact-info-area {
    display        : flex;
    justify-content: space-between;
}

.contact-info-area p {
    margin-top : 12px;
    font-size  : 18px;
    font-weight: 500;
}

.contact-info-area p {
    text-align: right;
}

/* footer */

#footer-section {
    background: #090909;
    color     : #fefefe;
    padding   : 64px 0;
}

#footer-container {
    display        : flex;
    justify-content: space-between;
    position       : relative;
}

.footer-left-area img {
    width       : 117px;
    height      : 28px;
    margin-right: 40px;
}

.innople-info-area {
    padding-top: 16px;
    font-weight: 400;
}

.innople-info-area .subtitle-item {
    font-size: 18px;
}

.innople-info-area .desc-item {
    font-size  : 14px;
    padding-top: 8px;
    opacity    : 0.5;
    font-weight: 300;
}

.footer-right-area {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    align-items    : flex-end;
    position       : relative;
}

.footer-menu-box a {
    text-align : right;
    font-size  : 26px;
    font-weight: 600;
    margin-left: 32px;
}

.footer-policy-box {
    position: absolute;
    right   : 64px;
    bottom  : 0;
}

.footer-policy-box p {
    opacity    : 0.8;
    font-weight: 500;
}

.sticky {
    position: fixed;
    top: 160px;
}

.about-contents-area.sticky {
    max-width: 1200px;
    width: 100%;
    left: auto;
}

.about-contents-area.sticky .content-box{
    padding-left: 65%;
    margin-left: -64px;
    margin-right: 64px;
}

.img-snow.sticky {
    padding-top : 350px;
    max-width: 1200px;
    width: 100%;
    left: auto;
}

.img-snow.sticky img{
    padding-left: 90%;
    margin-left: -64px;
    margin-right: 64px;
}

.sticky-bottom {
    position: absolute;
    bottom: 0px;
}

.sticky2 {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

/* 미디어쿼리 768 ~ 1024 */

@media screen and (max-width: 1023px) {
    .main-section {
        padding: 120px 0;
    }

    .background-items {
        display: none;
    }

    .display-style {
        font-size: 80px;
    }

    .title-style {
        font-size: 26px;
    }

    .desc-style {
        font-size: 19px;
    }


    .about-title-area {
        justify-content: flex-start;
    }

    .display-title-item {
        font-size: 80px;
    }

    .display-label-item {
        font-size: 14px;
    }

    .subtitle-box {
        flex-direction: column;
        align-items   : flex-start;
    }

    .subtitle-box .subtitle-item {
        font-size: 48px;
    }

    .subtitle-box .desc-box p {
        font-size: 22px;
    }

    .about-title-area .main-title-item {
        font-size: 72px;
    }

    .about-contents-area {
        width: 50%;
        position: static;
    }

    .works-title-label {
        padding: 24px 0 8px 0;
    }

    .work-list-area {
        margin-left: 80px;
    }

    .year-item p {
        font-size: 32px
    }

    .work-list-box {
        padding: 12px 0;
    }

    .view-btn {
        justify-content: center;
    }


    .clients-logo-area {
        width      : 100%;
        align-self : center;
        column-gap : 0;
        row-gap    : 40px;
        padding-top: 60px;
    }

    .clients-logo-box {
        display        : flex;
        justify-content: center;
        align-items    : center;
        width          : 192px;
        height         : 60px;
    }

    .process-flow-area {
        flex-direction: column;
    }

    .process-flow-box {
        display     : flex;
        margin-right: 0px;
        margin-bottom: 40px;
        flex-direction: column;
        text-align: center;
    }

    .process-num {
        width: 100%;
    }

    .process-flow-box .flow-box {
        margin: 0;
    }
    
    .process-flow-box .flow-box .desc-item {
        margin-top: 8px;
        width     : 100%;
    }

    .logo-item {
        width: 100%;
    }


    .footer-menu-box a {
        margin-left: 24px;
    }

}


/* 미디어쿼리 422 ~ 767 */

@media screen and (max-width: 767px) {
    .logo-btn, .menu-btn{
        top: 20px;
    }

    #about-container {
        flex-direction: column;
        align-items   : center;
    }

    .inner-container {
        padding-left : 4%;
        padding-right: 4%;
    }

    .main-section {
        padding: 80px 0;
    }

    .background-items {
        display: none;
    }

    .display-style {
        font-size: 64px;
    }

    .title-style {
        font-size: 24px;
    }

    .desc-style {
        font-size: 18px;
    }


    .display-title-item {
        font-size: 56px;
    }

    .display-label-item {
        font-size: 10px;
    }

    .chevron-bottom-icon img {
        width: 23px;
    }

    .chevron-bottom-icon li:nth-child(1) {
        margin-top: 4px;
    }

    .chevron-bottom-icon li:nth-child(2) {
        margin-top: -18px;
    }

    .chevron-bottom-icon li:nth-child(3) {
        margin-top: -18px;
    }

    .scroll-down-item p {
        font-size: 13px;
    }


    .about-title-area {
        align-self   : flex-start;
        padding-right: 0;
    }

    .about-title-area .main-title-item {
        line-height: 120%;
        padding    : 16px 0;
    }

    .subtitle-box .subtitle-item {
        font-size: 40px;
    }

    .subtitle-box .desc-box p {
        font-size: 20px;
    }

    .about-title-area .main-title-item {
        font-size: 64px;
    }

    .about-title-area .desc-item {
        font-size     : 14px;
        letter-spacing: 24px;
    }

    .about-contents-area {
        padding-top: 60px;
        width      : 100%;
        position: static;
    }

    .about-contents-area .content-box:nth-child(2) {
        padding: 80px 0;
    }

    .img-snow {
        display: none;
    }


    .wwd-contents-area {
        grid-template-columns: 1fr;
        grid-template-rows   : 1fr 1fr 1fr;
        padding-top          : 60px;
    }

    .wwd-contents-area .content-box:nth-child(odd) {
        padding-right: 30%;
    }

    .wwd-contents-area .content-box:nth-child(2) {
        padding-left: 30%;
    }

    .img-diamond {
        display: none;
    }


    .work-list-wrapper {
        margin-bottom: 24px;
    }

    .works-title-label {
        font-size: 16px;
        padding  : 8px 0 8px 0;
    }

    .work-list-area {
        margin-left: 40px;
    }

    .year-item {
        width: 16%;
    }

    .year-item p {
        font-size  : 24px;
        padding-top: 10px;
    }

    .work-list-box {
        padding: 10px 0;
    }


    .clients-title-item {
        font-size: 30px;
    }

    .clients-logo-area {
        row-gap    : 16px;
        padding-top: 32px;
    }

    .clients-logo-box {
        width : 129px;
        height: 40px;
    }

    /* .clients-logo-box:nth-child(9){
        grid-column-start: 2;
    } */

    .process-flow-area {
        flex-direction: column;
    }

    .process-flow-box {
        display     : flex;
        margin-right: 0px;
        margin-bottom: 40px;
        flex-direction: column;
        text-align: center;
    }

    .process-num {
        width: 100%;
    }

    .process-flow-box .flow-box {
        margin: 0;
    }
    
    .process-flow-box .flow-box .desc-item {
        margin-top: 8px;
        width     : 100%;
    }

    .contact-info-area {
        flex-direction: column;
        align-items   : flex-end;
    }

    .footer-left-area {
        margin-bottom: 24px;
    }

    .footer-menu-box {
        display       : flex;
        flex-direction: column;
    }

    .footer-menu-box a {
        font-size: 24px;
    }

    .footer-policy-box {
        font-size: 14px;
        right    : 4%;
    }

}


/* 미디어쿼리 0 ~ 421 */

@media screen and (max-width: 421px) {
    .logo-btn, .menu-btn{
        top: 20px;
    }

    .main-section {
        padding: 60px 0;
    }

    .background-items {
        display: none;
    }

    .inner-container {
        margin-left  : auto;
        margin-right : auto;
        padding-left : 16px;
        padding-right: 16px;
    }

    .display-style {
        font-size: 40px;
    }

    .title-style {
        font-weight: 600;
        font-size  : 20px;
    }

    .desc-style {
        font-size: 14px;
    }


    .display-title-item {
        font-size: 40px;
    }

    .display-label-item {
        font-size     : 10px;
        letter-spacing: 0.32em;
    }

    .subtitle-box .subtitle-item {
        font-size: 36px;
    }

    .subtitle-box .desc-box p {
        font-size: 16px;
    }

    .about-title-area .main-title-item {
        font-size: 40px;
    }

    .about-title-area .desc-item {
        font-size     : 12px;
        letter-spacing: 12px;
    }

    .about-contents-area {
        padding-top: 40px;
        position: static;
    }

    .about-contents-area .content-box:nth-child(2) {
        padding: 40px 0;
    }


    .wwd-contents-area {
        padding-top: 40px;
        row-gap    : 48px;
    }

    .wwd-contents-area .content-box:nth-child(odd) {
        padding-right: 20%;
    }

    .wwd-contents-area .content-box:nth-child(2) {
        padding-left: 20%;
    }

    .wwd-contents-area .content-box .desc-item {
        padding-top: 8px;
    }


    .works-title-label {
        font-size: 14px;
        padding  : 0 0 8px;
    }

    .work-list-area {
        margin-left: 32px;
    }

    .year-item p {
        font-size: 20px
    }

    .work-list-box {
        padding: 8px 0;
    }

    .view-btn img {
        height: 80px;
    }

    .clients-logo-area {
        grid-template-columns: 1fr 1fr;
    }

    .clients-title-item {
        font-size: 28px;
    }

    .clients-logo-area {
        column-gap: 16px;
        row-gap   : 8px;
    }

    .process-flow-area {
        flex-direction: column;
    }

    .process-flow-box {
        display     : flex;
        margin-right: 0px;
        margin-bottom: 40px;
        flex-direction: column;
        text-align: center;
    }

    .process-num {
        width: 100%;
    }

    .process-flow-box .flow-box {
        margin: 0;
    }
    
    .process-flow-box .flow-box .desc-item {
        margin-top: 8px;
        width     : 100%;
    }

    .contact-title-area img {
        width : 12px;
        height: 12px;
    }

    .contact-info-area p {
        margin-top: 12px;
        font-size : 16px;
    }


    #footer-section {
        padding: 40px 0;
    }

    .innople-info-area {
        padding-top: 8px;
    }

    .innople-info-area .subtitle-item {
        font-size: 14px;
    }

    .innople-info-area .desc-item {
        padding-top: 4px;
        font-size  : 12px;
    }

    .footer-menu-box a {
        font-size    : 20px;
        padding-right: 0;
    }

    .footer-policy-box {
        font-size: 12px;
    }

    .footer-policy-box {}

}

@media screen and (max-width: 521px) {
    .wwd-title-area p {
        font-size: 48px;
    }
}

@media screen and (max-width: 396px) {
    .wwd-title-area p {
        font-size: 38px;
    }
}