@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;800;900&display=swap');
@import './reset.css';
@import './common.css';
@import './layout.css';

/* main-page */
.main{
    overflow-x: hidden;
}
.main .sc-main{}
.main .sc-main .visual{position: relative;
    /* overflow: hidden; */
}
.main .sc-main .visual .inner{
    position: relative;
    /* height: 100vh; */
    z-index: 1;
    padding-bottom: 150px;
}
.main .sc-main .visual .flex{
    display: flex;
}
.main .sc-main .visual .text-area{
    padding-top: 208px;
    flex: 1;
    position: relative;
    z-index: 1;
}

.main .sc-main .visual .text-area .title1{}
.main .sc-main .visual .text-area .title2{
    margin-top: 66px;
    margin-bottom: 57px;
}


.main .sc-main .visual .text-area .link{
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border: 2px solid #fff;
    font-size: 20px;
    color: #fff;
    padding: 2px 20px;
    border-radius: 20px;
}
.main .sc-main .visual .text-area .desc{
    color: #97ceff;
    font-size: 20px;
    margin-top: 157px;
}
.main .sc-main .visual .img-area{
    position: relative;
    flex: 1;
}
.main .sc-main .visual .img-area .img{
    width: 1289px;
    position: absolute;
    top: -200px;left: 50%;
    transform: translateX(-50%);
    max-width: none;
}


.main .sc-main .visual .sns-area{
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0px;right: 0;
    gap: 20px;
    z-index: 5;
}
.main .sc-main .visual .sns-area a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border: 1px solid #fff;
    border-radius: 50%;
}
.main .sc-main .visual .bg{
    position: absolute;
    width: 120%;
    bottom: 0;left: 50%;
    transform: translateX(-50%);
}



.main .sc-main .logo{
    padding-top: 333px;
    padding-bottom: 621px;

    background: rgb(19,20,66);
background: linear-gradient(180deg, rgba(19,20,66,1) 26%, rgba(255,255,255,1) 100%);
}
.main .sc-main .logo .inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 74px;
}



.main .sc-intro{
    background: #fff;
    padding-top: 203px;
    padding-bottom: 512px;
}
.main .sc-intro .flex{
    display: flex;
    
}
.main .sc-intro .text-area{
    flex: 1;
    max-width: 627px;
}
.main .sc-intro .text-area .title{margin-bottom: 30px;}
.main .sc-intro .text-area .sub-title{margin-bottom: 43px;}
.main .sc-intro .text-area .desc{
    font-weight: 500;
    font-size: 15px;
    line-height: 164%;
    margin-bottom: 23px;
}
.main .sc-intro .text-area .desc2{
    color: #717171;
    font-size: 15px;
    font-weight: 500;
    line-height: 139.023%;
}
.main .sc-intro .img-area{
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.main .sc-intro .img-area img{}



.main .sc-video{
    position: relative;
    background: #fff;
}

.main .sc-video .frame{
    position: relative;
    padding-bottom: 56.25%;
}
.main .sc-video iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
}

.main .sc-video .play{
    position: absolute;
    top: 50%;left: 50%;
    transform: translate(-50%, -50%);
}

.main .sc-video .play.hide{
    display: none;
}
/*  */
main .group-title{}
main .group-title p{}
main .group-title h2{ font-size: 74px; letter-spacing: 3.744px; font-weight: 900; color: #8fffef; line-height: 1; }



.projectList {}
.projectList .content{ margin-top: 200px; }
.projectList .tab-nav{ display: flex; justify-content: center; }
.projectList .tab-nav a{ position: relative; color: #959ed6; font-size: 40px; line-height: 1.2; letter-spacing: 4px; padding: 0 35px; }
.projectList .tab-nav a+a::before{ position: absolute; right: 0;left: 0; background: #959ED6; width: 2px; height: 47px; content: ''; }
.projectList .tab-nav a.active{ font-weight: 700; color: #fff; }
.projectList .tab-cont{ margin-top: 85px; }
.projectList .tab-cont .cont{ display: none; }
.projectList .tab-cont .cont.active{ display: block; }
.projectList .tab-cont ul{ display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.projectList .tab-cont li{}
.projectList .tab-cont li a{ display: block; position: relative; }
.projectList .tab-cont li img{ width: 100%; }
.projectList .tab-cont .desc{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0;left: 0; right: 0;bottom: 0; background: rgba(0, 0, 0, 0.70); color: #fff; opacity: 0; visibility: hidden; transition: 0.3s; }
.projectList .tab-cont li:hover .desc{ opacity: 1; visibility: visible; }
.projectList .tab-cont .desc strong{ color: #FFF; text-shadow: 0px 4px 29px rgba(0, 0, 0, 0.25); font-family: Noto Sans KR; font-size: 30px; font-weight: 500; line-height: 147.531%; }
.projectList .tab-cont .desc span{ color: #FFF; font-size: 15px; line-height: 147.531%; }



.projectView .sc-view{}
.projectView .sc-view img{width: 100%;}
.projectView .sc-view .iframe{ position: relative; padding-bottom: 56.25%; margin-bottom: 215px; }
.projectView .sc-view .iframe iframe{ position: absolute; top: 0;left: 0; width: 100%; height: 100%; }

.projectView .navigation{
    color: #fff;
    margin-top: 51px;
}
.projectView .navigation .inner{
    display: flex;
    justify-content: space-between;
}
.projectView .navigation a img{height: 30px;}
.projectView .navigation .link-back{
    display: flex;
    align-items: center;
    gap: 24px;
}
.projectView .navigation .link-next{
    display: flex;
    gap: 24px;
    align-items: center;
}
.projectView .navigation .link-next p{
    display: flex;
    align-items: center;
    color: #D9D9D9;
    font-size: 24px;
    font-weight: 300;
    line-height: 101.023%;
    letter-spacing: 2.16px;
    text-transform: uppercase;
    white-space: nowrap;
}
.projectView .navigation .link-next p span{
    color: #D9D9D9;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2.88px;
    margin-left: 14px;
}

.designerList{position: relative;}
.designerList .group-title{
    margin-bottom: 220px;
}
.designerList .content{
    position: relative;
    z-index: 1;
}
.designerList .content.media{margin-top: 123px;}
.designerList h3{
    color: #959ED6;
    font-size: 40px;
    font-weight: 100;
    line-height: 129.023%; 
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 47px;
}
.designerList main ul{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 47px 22px;
}
.designerList main ul li{}
.designerList main ul .link{}
.designerList main ul img{ width: 100%; }
.designerList main ul .desc{ color: #fff; display: flex; flex-direction: column; gap: 7px; padding-top: 23px; }
.designerList main ul .desc strong{ font-size: 24px; font-weight: 400; line-height: 129.023%; }
.designerList main ul .desc span{ font-size: 16px; font-weight: 300; line-height: 129.023%; }
.designerList .bg{ position: absolute; bottom: 0;left: 50%; transform: translateX(-50%); width: 169.79%; }
.designerList::after{ position: absolute; bottom: 0; left: 0; width: 100%; content: ''; height: 232px; background: linear-gradient(180deg,rgba(255, 255, 255, 0.00) 0%,rgba(255, 255, 255, 0.20) 100%); }



.designerView{position: relative;}
.designerView .view{position: relative;z-index: 1;}

.designerView .group-nav{margin-bottom: 72px;}
.designerView .group-nav img{height: 30px;}

.designerView .profile{
    display: flex;
    gap: 40px;
}
.designerView .thumb{}
.designerView .thumb img{}
.designerView .info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}
.designerView .info .desc1{
    display: flex;
    flex-direction: column;
}
.designerView .info .desc1 strong{
    color: #D9D9D9;
    font-size: 40px;
    font-weight: 700;
    line-height: 101.023%;
    letter-spacing: 3.6px;
}
.designerView .info .desc1 span{
    color:#959ED6;
    font-size: 24px;
    font-weight: 400;
    line-height: 101.023%;
    letter-spacing: 2.16px;
    margin-top: 16px;
    }
.designerView .info .desc2{
    color: #FFF;
    font-size: 24px;
    line-height: 163.023%; 
    letter-spacing: 2.52px;
    }
.designerView .info .desc2 dl{
    display: flex;
}
.designerView .info .desc2 dt{
    font-weight: 100;
    min-width: 165px;
}
.designerView .info .desc2 dd{
    font-weight: 300;
}



.designerView .signature{}
.designerView .signature img{}



.designerView .works{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
    margin-top: 103px;
}
.designerView .works li{}
.designerView .works a{
    display: block;
    overflow: hidden;
}
.designerView .works img{
    transition: 0.3s;
}
.designerView .works li:hover img{
    transform: scale(1.33);
}

.designerView .bg{ position: absolute;
     bottom: 0;left: 50%; 
     width: 100%;
     height: 676px;
     transform: translateX(-50%); }



.epilouge {}
.epilouge .header .gnb a{color: #2e2e8e;}
.epilouge .btn-menu{color: #2e2e8e;}
.epilouge .side-nav{background: #fff; color: #2e2e8e;}
.epilouge .group-title {}
.epilouge .group-title h2{
    color: #2e2e8e;
}
.epilouge .info-area{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 36px;
    margin-top: 126px;
    margin-bottom: 363px;
}
.epilouge .info-area .list{
    display: flex;
    line-height: 1;
}
.epilouge .info-area .list strong{
    color: #2E2E8E;
font-size: 24px;
font-weight: 500;
width: 243px;
}
.epilouge .info-area .list ul{
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 135px;
}
.epilouge .info-area .list li{
    color: #666;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.48px;
}


.epilouge .content{
    display: flex;
    gap: 66px;
}
.epilouge .content+.content{
    margin-top: 200px;
}

.epilouge .content .thumb{
    flex: 1;
}
.epilouge .content .desc{
    width: 214px;
    line-height: 1;
}
.epilouge .content .desc strong{
    color: #2E2E8E;
    font-size: 28px;
    font-weight: 500;
 }
.epilouge .content .desc ul{margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}
.epilouge .content .desc li{
    color: #666;
    font-size: 24px;
}
.epilouge .team{
    margin-top: 260px;
}



.epilouge .msg-area{
    color: #000;
text-align: center;
font-size: 20px;
line-height: 200%; /* 40px */
padding: 300px 0;
}
.epilouge .msg-area p{
    word-break: keep-all;
    padding: 0 50px;
}
.epilouge .msg-area .date{display: block;}
.epilouge .msg-area .writer{display: block;}


.epilouge .people-area{}
.epilouge .people-area .area1{
    margin-bottom: 166px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    gap: 10px;
    
}
.epilouge .people-area .area1 strong{
    font-size: 84px;
    line-height: 129.023%; 
    font-weight: 700;
}
.epilouge .people-area .area1 span{
    font-size: 32px;
    line-height: 129.023%; 
font-weight: 400;
}



.epilouge .people-area .list1{
    grid-template-columns: repeat(3,1fr);
    display: grid;
}
.epilouge .people-area .list1 li{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.epilouge .people-area .list1 strong{
color:#2E2E8E;
font-size: 28px;
font-weight: 700;
line-height: 129.023%;
}
.epilouge .people-area .list1 span{
    color: #000;
font-size: 32px;
line-height: 129.023%; /* 41.287px */
}



.epilouge .people-area .list1{}
.epilouge .people-area .list2{
    margin-top: 209px;
    display: grid;
    grid-template-columns: repeat(11,1fr);
    gap: 31px 0px;

    color: #000;

text-align: right;
font-size: 24.304px;
line-height: 156.523%; /* 38.042px */
padding-bottom: 225px;
border-bottom: 1px solid #000;


}


@media (max-width:1320px) {
    .epilouge .content{
        gap: 33px;
    }
    .epilouge .content .desc ul{
        gap: 30px;
        margin-top: 30px;
    }
    .epilouge .content .desc li{
        font-size: 20px;
    }
    .epilouge .content .desc strong{
        font-size: 24px;
    }
    .epilouge .people-area .list1 strong{
        font-size: 24px;
     }
     .epilouge .people-area .list1 span{
        font-size: 26px;
     }
     
     .epilouge .people-area .list2{
        grid-template-columns: repeat(8,1fr);
        font-size: 20px;
     }
}

@media (max-width:1024px) {

    main .group-title h2{
        font-size: 50px;
    }
   
    
    .epilouge .info-area{
        gap: 20px;
    }
    .epilouge .info-area .list strong{
        font-size: 20px;
        width: 183px;
    }
    .epilouge .info-area .list li{
        font-size: 20px;
    }
    .epilouge .content .desc{
        width: 150px;
    }
    .epilouge .content .desc strong{
        font-size: 20px;
    }
    .epilouge .content .desc ul{
        gap: 20px;
    }
    .epilouge .content .desc li{
        font-size: 18px;
        
    }
    .epilouge .msg-area{
        font-size: 18px;
    }

    .epilouge .people-area .area1 strong{
        font-size: 60px;
    }
    .epilouge .people-area .area1 span{
        font-size: 22px;
    }
    .epilouge .people-area .list1 strong,
    .epilouge .people-area .list1 span{
        font-size: 18px;
    }
    .epilouge .people-area .list2{
        font-size: 18px;
    }

    .projectList .tab-nav a{
        font-size: 30px;
    }
    .projectList .tab-nav a+a::before{
        height: 36px;
    }
    .projectList .tab-cont ul{
        gap: 25px;
    }

    .projectView .navigation .link-next p{
        font-size: 16px;
    }
    .projectView .navigation a img{
        height: 20px;
    }
    .projectView .navigation .link-next p span{
        font-size: 20px;
    }


    .designerList h3{
        font-size: 30px;
    }
    .designerList main ul{
        grid-template-columns: repeat(4,1fr);
    }


    .designerView .profile{
        position: relative;
    }
    .designerView .signature {
        position: absolute;
        top: 0;right: 0;
        width: 150px;
    }

    .designerView .info .desc1 strong{
        font-size: 30px;
    }
    .designerView .info .desc1 span{
        font-size: 20px;
    }
    .designerView .info .desc2{
        font-size: 18px;
    }
    .designerView .info .desc2 dt{
        min-width: 125px;
    }
    .designerView .works{
        gap: 25px;
    }
    .designerView .bg{height: auto;}


    .main .sc-main .visual .text-area{
        padding-top: 100px;
    }
    .main .sc-main .visual .img-area{
        position: initial;
        flex: 0;
    }

    .main .sc-main .visual .img-area .img{
        width: 80%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .main .sc-main .visual .sns-area{
        right: 20px;
        bottom: 150px;
    }
    .main .sc-main .logo{
        padding-top: 150px;
        padding-bottom: 321px;
    }
    .main .sc-main .logo .inner{
        gap: 35px;
    }
    .main .sc-main .logo .img1{width:80%;}
    .main .sc-main .logo .img2{width: 50%;}
    .main .sc-intro{
        padding-top: 100px;
        padding-bottom: 252px;
    }
    .main .sc-intro .flex{
        gap: 50px;
    }
    .main .sc-video .play{
        width: 80px;
    }
   
}

@media (max-width:767px) {
    main .group-title p{width: 120px;}
    main .group-title h2{
        font-size:32px;
    }
    


    .main .sc-main .visual .text-area{
        padding-top: 0;
    }
    .main .sc-main .visual .text-area .title1{
        width: 220px;
    }
    .main .sc-main .visual .text-area .title2{
        width: 120px;
        margin-top: 30px;
        margin-bottom: 25px;
    }
    .main .sc-main .visual .text-area .desc{
        font-size: 14px;
    }

    .main .sc-main .visual .text-area .link{
        font-size: 16px;
    }
    .main .sc-main .visual .inner{
        padding-bottom: 80px;
    }
    .main .sc-main .visual .sns-area{
        left: 15px;
        right: auto;
        flex-direction: row;
        bottom: 0;
    }
    .main .sc-main .visual .sns-area a{
        width: 50px;
        height: 50px;
    }
    .main .sc-main .visual .sns-area a img{
        transform: scale(0.8);
    }


    .main .sc-main .logo {
        padding-top:200px;
        padding-bottom: 150px;
    }


    .main .sc-intro .flex{
        flex-direction: column;
    }
    .main .sc-intro .text-area .title{
    }


    .main .sc-intro{
        padding-bottom: 150px;
    }
    .main .sc-video .play{
        width: 50px;
    }
    .main .sc-intro .img-area img{width: 100%;}



    .designerView .group-nav{
        margin-bottom: 50px;
    }
    .designerView .profile{
        flex-direction: column;
    }
    .designerView .signature{
        width: 60px;
        top: 10px;
        right: 10px;
    }
    .designerView .thumb img{width: 100%;}
    .designerView .info .desc1{
        margin-bottom: 20px;
    }
    .designerView .info .desc2 dl{
        flex-direction: column;
        line-height: 1.5;
    }
    .designerView .info .desc2 dl+dl{
        margin-top: 20px;
    }
    .designerView .info .desc2 dt{font-size: 14px;font-weight: 500;}
    .designerView .info .desc2 dd{font-size: 12px;}
    .designerView .works{
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }

    .projectList .content{
        margin-top: 100px;
    }
    .projectList .tab-nav a{
        font-size: 16px;
        padding: 0 15px;
    }
    .projectList .tab-cont{margin-top: 40px;}
    .projectList .tab-nav a+a::before{
        height: 21px;
    }

    .projectList .tab-cont ul{
        grid-template-columns: repeat(2,1fr);
        gap: 10px;
    }

    .projectList .tab-cont li .desc{
        position: relative;
        opacity: 1;
        background: none;
        visibility: visible;
    }
    .projectList .tab-cont .desc strong{
        font-size: 18px;
    }
    .projectList .tab-cont .desc span{
        font-size: 12px;
    }
    




    .projectView .sc-view .iframe{
        margin-bottom: 100px;
    }
    .projectView .navigation .link-back{gap: 12px;font-size: 14px;}
    .projectView .navigation .link-next{gap: 12px;}
    .projectView .navigation .link-next p{font-size: 12px;}
    .projectView .navigation .link-next p span{
        font-size: 16px;
        margin-left: 8px;
    }




    .epilouge .info-area{margin-bottom: 150px;}
    .epilouge .info-area .list strong{
        font-size: 16px;
    }
    .epilouge .info-area .list li{
        font-size: 16px;
    }
    .epilouge .info-area .list strong{
        width: 140px;
    }
    .epilouge .info-area .list ul{
        width: 100px;
    }
    .epilouge .content{
        flex-direction: column;
    }
    .epilouge .content+.content{
        margin-top: 100px;
    }
    .epilouge .content .desc ul{
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 15px;
    }
    .epilouge .content .desc strong{
        font-size: 16px;
    }
    .epilouge .content .desc li{
        font-size: 14px;
    }
    .epilouge .content .desc{
        width: 100%;
    }
    .epilouge .team{
        margin-top: 130px;
    }
    .epilouge .msg-area{
        font-size: 14px;
        padding: 150px 0;
    }
    .epilouge .msg-area p{
        padding: 0;
    }
    .epilouge .people-area .area1{
        margin-bottom: 80px;
    }
    .epilouge .people-area .area1 strong{
        font-size: 32px;
    }
    .epilouge .people-area .area1 span{
        font-size: 18px;
    }
    .epilouge .people-area .list1{
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .epilouge .people-area .list1 li{
        gap: 10px;
    }
    .epilouge .people-area .list1 strong, .epilouge .people-area .list1 span{
        font-size: 14px;
    }
    .epilouge .people-area .list2{
        margin-top: 100px;
        grid-template-columns: repeat(4,1fr);
        font-size: 14px;
        text-align: center;
    }





    .designerList .group-title{
        margin-bottom: 100px;
    }
    .designerList h3{
        font-size: 16px;
    }
    .designerList main ul {
        grid-template-columns: repeat(2,1fr);
        gap: 30px 10px;
    }
    .designerList main ul .desc{gap: 3px;padding-top: 12px;}
    .designerList main ul .desc strong{font-size: 16px;}
    .designerList main ul .desc span{font-size: 12px;}




}