/* ----------------- deport setting ----------------- */
* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none; color: white;}

body {
    width: 100%;
    font-size: 14px;
    font-family: "Noto Sans KR", serif;
    font-weight: 300;
    font-style: normal;
    background-color: #101010; color: white;
    scroll-behavior: smooth;
    user-select: none;
}

.font_01 {
    font-family: "Nanum Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font_02 {
    font-family: "Alegreya Sans SC", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font_03 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.main_title {
    font-size: 2rem;
    font-weight: 600;
    margin-left: 10px;
}

.top_btn {display: none;}


.header_outer {
    width: 100%; height: 60px;
    transition: all 0.3s;
    position: fixed;
    top: 0; left: 0;
    z-index: 9;
}

.header_outer.fixed {
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    background-color: rgba(16, 16, 16, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header {
    width: 100%; height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
}
  
.header .menubar {
    font-size: 1.25rem;
    position: absolute;
    top: 15px; left: 10px;
}

/*----------------- header_logo -----------------*/
.header .logo {
    width: 180px; height: 40px;
}

.header .logo a {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.header .logo_img {
    width: 110px; height: 40px;
    background-image: url(../images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 5px;
}

.header .logo_circle {
    width: 4px; height: 4px;
    background-color: white;
    margin-top: 3px;
    border-radius: 50%;
}

.header .logo span {
    margin: 0 0 0 5px;
    font-weight: 500;
    font-size: 11px;
}


/*----------------- header_gnb -----------------*/ 
.header .gnb {
    display: none;
}

/*----------------- header_m_gnb -----------------*/ 
.gnb_m {
    width: 90%; height: 100vh;
    background-color: #101010;
    position: fixed;
    top: 0; left: -100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gnb_m .menubar_close {
    position: absolute;
    top: 15px; left: 10px;
    font-size: 1.25rem;
}

.gnb_m nav {
    width: 100%; height: 40vh;
    font-size: 15px;
    font-weight: 400;
}

.gnb_m .right {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.gnb_m .right li {
    width: 100%;
    text-align: center;
}

.gnb_m .right li:nth-child(1) a {
    color: rgb(220, 62, 64);
    font-weight: bold;
}

/******************* gnb_m_02 *******************/
.gnb_m_02 {
    width: 95%; height: 20vh;
    margin: 0 auto;
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.gnb_m_02 .gnb {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.gnb_m_02 .gnb > li {
    flex: 1;
    text-align: center;
}

.gnb_m_02 .gnb > li > a {
    display: block;
    padding: 10px 0;
}

.gnb_m_02 .gnb li:nth-child(2) {
    border-bottom: 3px solid rgba(159, 37, 39, 1); box-sizing:  border-box;
}


/******************* sub_main *******************/
.sub_main {
    width: 95%; height: 35vh;
    margin: 0 auto;
    position: relative;
}

.sub_main_img .overlay {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    background-color: rgba(0,0,0,0.4);
    border-radius: 30px;
}

.sub_main .sub_main_img {
    width: 100%; height: 100%;
    border-radius: 30px;
}

.sub_main .sub_main_img img {
    width: 100%; height: 100%;
    border-radius: 30px;
    object-fit: cover;
    display: block;
}

.sub_main .sub_main_txt {
    position: absolute;
    bottom: 20px; left: 20px;
}

.sub_main .sub_main_txt p:first-child {
    font-weight: 400;
    left: 16px; bottom: 40px;
}

.sub_main .sub_main_txt p:last-child {
    font-weight: bold;
    margin-top: 2px;
}


/******************* we_made *******************/
.we_made {
    width: 100%;
    overflow: hidden;
    margin-top: 10px;
}

.we_made .pin_height {height: 300vh;}
.we_made .wm_container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    column-gap: 15px;
    padding: 0 10px 0 10px; box-sizing: border-box;
}

.we_made .wm_container .name {
    position: absolute;
    top: 10vh; left: 10px;
}

.we_made .wm_container .left {
    width: 100vw;
    position: relative;
    margin-top: 55vh;
    font-weight: 400;
}

.we_made .wm_container .wm_img {
    width: 100vw; height: 38vh;
    position: absolute;
    top: 28%; left: 0;
}

.wm_img .slick-slide {
    height: 38vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wm_img .slick-slide picture {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.wm_img .slick-slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.wm_img .slick-slide .overlay {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.2);
}

.we_made .wm_indi {
    width: 100vw; height: auto;
    position: absolute;
    bottom: 4%; left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.we_made .wm_indi div {
    width: 48px; height: 48px;
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    background-color: rgb(28, 27, 27);
    border-radius: 50px;
}

.we_made .wm_indi div img {
    width: 16px; height: auto;
    position: absolute;
    top: 45%; left: 50%;
    transform: translateX(-50%);;
}

.left_arrow:hover img {animation: leftarrow 0.3s;}
@keyframes leftarrow {
    0% {transform: translateX(-50%);}
    30% {transform: translateX(-200%);}
    31% {transform: translateX(200%);}
    100% {transform: translateX(-50%);}
}

.right_arrow:hover img {animation: rightarrow 0.3s;}
@keyframes rightarrow {
    0% {transform: translateX(-50%);}
    30% {transform: translateX(200%);}
    31% {transform: translateX(-200%);}
    100% {transform: translateX(-50%);}
}

.we_made .paragraph:not(:first-child) {
    position: absolute;
    top: 0;
}

.we_made .word {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin: -0.14em 0;
}

.we_made .word span {
    display: block;
    padding: 0.14em 0;
}

.we_made .paragraph:not(:first-child) .word span {
    transform: translate(0, -100%);
}



/******************* project *******************/
.project {
    width: 100%; height: fit-content;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.project .main_title {
    margin: 30px 0 50px 10px;
}

.project .ps_img_section {
    width: 100%; height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

.project .ps_img_section .col {flex: 1;}
.project .ps_img_section .container {
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.project .media {width: 100%; height: 30vh; position: relative;}

.project .ps_img_section .container .media {width: 100%; height: 20vh;}

.project .media img, .project .ps_img_section .container .media img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}


/******************* footer *******************/
.footer {
    width: 100%;
    font-size: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    padding: 0 10px 20px;
    margin-top: 50px;
}

.footer .footer_top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
}

.footer .footer_top .footer_logo {
    width: 90px; height: 32px;
    background-image: url(../images/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.footer .footer_top > span {
    margin-top: 5px;
}

.footer .footer_center p:nth-child(1),
.footer .footer_center p:nth-child(2) {
    padding: 3px 0; box-sizing: border-box;
}

.footer .footer_center p span {
    display: block;
}

.footer .footer_center p .footer_center_p {
    display: none;
}

.footer .footer_center p:nth-child(2) {
    margin-top: 10px;
}

.footer .footer_bottom {
    overflow: hidden;
}

.footer .footer_bottom .fb_left {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.footer .footer_bottom > div {
    float: left;
}

.footer .footer_bottom .fb_right {
    float: right;
    margin-top: 18px;
}

/******************* media *******************/
/******************* tablet ~ *******************/
@media all and (min-width: 601px) {
body {
    font-size: 15px;
}

.main_title {
    font-size: 3rem;
    font-weight: 600;
}

/******************* header *******************/
.header_outer {width: 100%; height: 80px;}
.header_outer.fixed {
    width: 100%;
    position: fixed;
    top: 0; left: 0;
    background-color: rgba(16, 16, 16, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.header {width: 100%; height: 80px;}
.header .menubar {
    font-size: 1.5rem;
    top: 20px;
}

/*----------------- header_m_gnb -----------------*/
.gnb_m {width: 60%; height: 100vh;} 
.gnb_m .menubar_close {font-size: 1.5rem; top: 20px;}
.gnb_m nav {font-size: 18px;}

/*----------------- header_logo -----------------*/
.header .logo {width: 200px; height: 63px;}
.header .logo span {font-size: 13px;}

/******************* gnb_m_02 *******************/
.gnb_m_02 .gnb {font-size: 0.85rem;}

/******************* sub_main *******************/
.sub_main .sub_main_txt p:first-child {font-size: 1.2rem;}
.sub_main .sub_main_txt p:last-child {font-size: 1.6rem;}

/******************* we_made *******************/
.we_made .wm_container .left {font-size: 1.2rem;}
.we_made .wm_indi {bottom: 8%;}
.we_made .wm_indi div {width: 55px; height: 55px;}

/******************* footer *******************/
.footer {font-size: 0.8rem;}

.footer .footer_bottom .fb_left {
    justify-content: unset;
    gap: 80px;
}
}

/******************* pc 고해상도 ~ *******************/
@media all and (min-width: 1241px) {
body {
    font-size: 16px;
    font-weight: 400;
    overflow-x: hidden;
}

section {height: auto;}
.main_title {
    width: 1440px; height: auto;
    margin: 0 auto;
    font-size: 3.8rem;
    font-weight: 600;
}

.top_btn {
    display: unset;
    width: 80px; height: 80px;
    position: fixed;
    bottom: 6%; right: 3%;
    z-index: 999; 
    background-color: rgb(28, 27, 27);
    color: white;
    cursor: pointer;
    opacity: 0;
    border-radius: 50px;
    text-align: center; line-height: 80px;
    letter-spacing: 1.2;
}

/******************* header *******************/
.header_outer {
    width: 100%; height: 85px;
}

.header {
    width: 1440px; height: 85px;
    margin: 0 auto;
    justify-content: left;
    justify-content: space-between;
    padding-top: 10px; box-sizing:  border-box;
    line-height: 85px;
}
.header .menubar {display: none;}

/*----------------- header_logo -----------------*/
.header .logo {
    width: 239px; height: 86px;
    margin-bottom: 15px;
}
.header .logo_img {width: 150px; height: 45px; margin-bottom: 0;}
.header .logo_circle {
    width: 5px; height: 5px;
    margin-top: 18px;
}
.header .logo span {
    margin: 18px 0 0 5px;
    font-size: 14px;
}

/*----------------- header_gnb -----------------*/ 
.gnb_m {display: none;}
.header .gnb {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    font-size: 14px;
    font-weight: 400;
}

.header .gnb li {
    display: none;
}
.header .gnb li:first-child {
    display: block;
}

/*----------------- header_m_gnb -----------------*/ 
.gnb_m_02 {
    width: 1440px; height: fit-content;
    margin: 62vh auto 0;
    gap: 50px;
}

.gnb_m_02 .gnb {
    width: 800px; height: 85px;
    line-height: 80px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: 400;
    gap: 0;
}

.gnb_m_02 .gnb.fixed {
    width: 800px; height: 85px;
    line-height: 80px;
    position: fixed;
    top: 0px; left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.gnb_m_02 .gnb > li > a {
    display: block;
    padding: 10px 0 10px;
}

.gnb_m_02 .gnb li:nth-child(2) {
    border-bottom: 4px solid rgba(159, 37, 39, 1); box-sizing:  border-box;
}

.gnb_m_02 .gnb li {position: relative;}
.gnb_m_02 .gnb li:nth-child(1)::after,
.gnb_m_02 .gnb li:nth-child(3)::after,
.gnb_m_02 .gnb li:nth-child(4)::after,
.gnb_m_02 .gnb li:nth-child(5)::after {
    height: 4px; width: 0;
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    background-color: rgba(159, 37, 39, 1);
    transition: width 0.4s ease-out;
}

.gnb_m_02 .gnb li:nth-child(1):hover::after,
.gnb_m_02 .gnb li:nth-child(3):hover::after,
.gnb_m_02 .gnb li:nth-child(4):hover::after,
.gnb_m_02 .gnb li:nth-child(5):hover::after {
  width: 100%;
}

/******************* sub_main *******************/
.sub_main_outer {
    width: 100vw; height: 55vh;
    margin: 0 auto;
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
}

.sub_main {
    width: 100%; height: 100%;
}

.sub_main_img .overlay {
    border-radius: 0px;
}

.sub_main .sub_main_img {
    border-radius: unset;
    transform: translateY(-20%);
}
.sub_main .sub_main_img img {border-radius: unset;}

.sub_main .sub_main_txt {
    height: fit-content;
    position: absolute;
    top: 50%; bottom: 0; left: 50%; 
    transform: translate(-50%, -20%);
    text-align: center;
}

.sub_main .sub_main_txt .fade_up_wrap p:nth-child(1) {
    font-size: 1.8rem;
    font-weight: 400;
}

.sub_main .sub_main_txt .fade_up_wrap p:nth-child(2) {
    font-size: 2.8rem;
    font-weight: 500;
}

.fade_up_wrap {overflow: hidden;}
.fade_up {
  opacity: 0;
  transform: translateY(30px);
}

.sub_main_border_wrap {
    width: 0.5px; height: 100px;
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    background-color: rgba(245, 245, 245, 0.15);
}

.sub_main_border_wrap .sub_main_border {
    width: 100%; height: 100%;
    background-color: rgb(255, 255, 255);
    transform: scaleY(0);
    transform-origin: bottom;
    animation: borader 2s ease-out infinite;
}

@keyframes borader {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        transform: translateY(0%);
        opacity: 1;
    }

    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/******************* we_made *******************/
.we_made {
    width: 1440px;
    margin: 5vh auto 0;
}

.we_made .wm_container .name {
    top: 20vh; left: 10px;
    font-size: 2.8rem;
}

.we_made .wm_container .left {
    width: 30vw;
    font-size: 1.2rem;
    margin: 0;
}

.we_made .wm_container .wm_img {
    width: 55%; height: 75vh;
    position: relative;
    top: unset;
}

.wm_img .slick-slide {height: 75vh;}
.we_made .wm_indi {
    bottom: 12%; left: 40%;
    flex-direction: column;
}

.we_made .wm_indi div {
    width: 60px; height: 60px;
}

/******************* project *******************/
.project {
    width: 1440px;
    margin: 5% auto 0; 
    padding: 0 1.6vw;
    box-sizing: border-box;
}

.project .main_title {
    width: 1440px;
    margin: 5% auto;
}

.project .ps_img_section {
    height: fit-content;
    gap: 20px;
}
.project .ps_img_section .container {gap: 20px;}

.project .media {height: 90vh;}
.project .ps_img_section .container .media {height: 50vh;}



/******************* footer *******************/
.footer_outer {
    width: 100vw;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    padding: 0 10px 20px;
    margin-top: 50px;
}

.footer {
    width: 1440px; height: auto;
    margin: 0 auto;
    font-size: 0.9rem;
    padding: 0;
    border: none;
}

.footer .footer_bottom .fb_left {
    gap: 90px;
}

.footer .footer_bottom .fb_right {margin-top: 0;}

.footer .footer_center p:nth-child(2) {margin-top: 20px;}

.footer .footer_center p span {
    display: inline-block;
}

.footer .footer_center p .footer_center_p {
    display: unset;
}
}