/* Sub Common */
.client-sub-page-app .main-quick-button {
    display: none;
}

.client-sub-page-app .v-main__wrap {
    background-color: #131313;
}

.sub-wrap {
    background-color: #131313;
}

.sub-wrap .container {
    max-width: calc(var(--sub-container) + 12px*2);
}

/* .sub-wrap.about-wrap .about__members  .container {
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
} */

.sub-wrap.portfolio-wrap .container {
    max-width:100% !important;
    width:100% !important;
    padding:0 !important;
}
.sub-wrap.portfolio-wrap .tab.tab--opacity {
    max-width: calc(var(--sub-container) + 12px*2);
    margin:auto;
}

.sub-title {
    font-weight:700;
    color:#fff;
    line-height:1.3;
    font-size:3.4rem;
}

.font-stroke {
    -webkit-text-stroke: 1px #fff;
    text-stroke:1px #fff;
    color:#131313;
}

.font-stroke--point {
    -webkit-text-stroke: 1px #e63118;
    text-stroke:1px #e63118;
    color:transparent;
}

/* Font Family */
.notoserlf {
    font-family: 'Noto Serif KR', serif !important;
}

/* .pc {
    display:none;
} */

/* 소형 기기 (가로 전화, 576px 이상) */
@media (min-width: 576px) {
}

/* 중형 기기 (태블릿, 768px 이상) */
@media (min-width: 768px) {
    .sub-title {
        font-size:4.8rem;
    }

}

/* 대형 기기 (데스크톱, 992px 이상) */
@media (min-width: 992px) {
    /* .pc {
        display:block;
    } */
}

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
@media (min-width: 1200px) {
    .sub-title {
        font-size:7.2rem;
    }
}

/* XX- 대형 장치 (더 큰 데스크톱, 1400px 이상) */
@media (min-width: 1400px) {
}




/* Position */
.relative {
    position:relative;
}
.absolute {
    position: absolute;
}


/* About */
.about__head {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/res/images/about/about-head.png');
}
.about-head__innner {
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width:1224px;
    padding:0px 12px;
    width:100%;
    margin:auto;
}

.about-inner__wrap  {
    padding:122px 100px;
}

.about-inner__wrap::before {
    width:100%;
    height:100%;
    content:"";
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/res/images/about/circular-img.png');
    animation:circle 14s linear infinite;
}
@-webkit-keyframes circle {
  0% {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes circle {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.about__intro {
    padding-top:80px;
    padding-bottom:80px;
}

.about-why__bg {
    position: absolute;
    transform: translateY(-20%);
    right:0;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}

.about-why--container {
    max-width:860px;
    width:100%;
}

.about-why__bg img {
    position: relative;
    right:-30%;
    width: auto;
    display:block;
    height:88px;
}

.swiper-why--container {
    cursor: pointer;
}

.swiper-why--container .swiper-slide {
    position: relative;
    border-radius:10px;
    overflow:hidden;
    width:100%;
    height:0;
    padding-top:calc(1080 / 1920 * 100%);
    background-color:#fff;
}

.swiper-why--container .why-slide__thumb {
    width:100%;
    height:100%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-ransform: translate(-50%,-50%) scale(1.02);
    transform: translate(-50%,-50%) scale(1.02);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* .swiper-why--container .why-slide__thumb1 {
    filter: blur(0.8px);
}
.swiper-why--container .why-slide__thumb2 {
    filter: blur(0.4px);
}
.swiper-why--container .why-slide__thumb3 {
    filter: blur(0);
} */

.swiper-why--scrollbar {
    position: relative;
    left:0;
    bottom:0;
    width:100%;
    height:5px;
    margin-bottom:40px;
}

.swiper-why--scrollbar::before {
    content:"";
    display: block;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-ransform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width:100%;
    height:5px;
    background-color: #262626;
}

.swiper-why--scrollbar .swiper-scrollbar-drag {
    background-color:transparent;
}

.swiper-why--scrollbar .swiper-scrollbar-drag::before {
    content:"";
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/res/images/about/scroll-controll-bar.png');
    width:30px;
    height:30px;
    position: absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.swiper-why--scrollbar .scrollbar-rounding {
    width:15px;
    height:15px;
    border-radius:50%;
    background-color: #262626;
    display:block;
    position: absolute;
}

.swiper-why--scrollbar .rounding-left {
    top:50%;
    left:0;
    -webkit-ransform: translateY(-50%);
    transform: translateY(-50%);
}

.swiper-why--scrollbar .rounding-center {
    top:50%;
    left:50%;
    -webkit-ransform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.swiper-why--scrollbar .rounding-right {
    top:50%;
    right:0;
    -webkit-ransform: translateY(-50%);
    transform: translateY(-50%);
}

.swiper-why--text {
    position:relative;
    height:30px;
    display:none;
}

.swiper-why--text span {
    color:#cacaca;
    position: absolute;
    top:0;
}

.swiper-why--text span.on {
    color:#fff;
}

.swiper-why--text span.swiper-text__left {
    left:0;
}

.swiper-why--text span.swiper-text__center {
    left:50%;
    -webkit-ransform: translateX(-50%);
    transform: translateX(-50%);
}

.swiper-why--text span.swiper-text__right {
    right:0;
}

.addition--text {
    display: none;
}

.addition--text p {
    color:#bababa;
}

.about-order__img {
    max-width:960px;
    width:100%;
    margin:0 auto;
}

.about-color__bg {
    position: absolute;
    transform: translateY(-150px);
    left:20%;
    -webkit-transition: all ease-out .3s; transition: all ease-out .3s;
}

.about-color__bg img {
    position: relative;
    left:0;
    width: auto;
    display:block;
    height:81px;
}

.color-con__box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.color-con__box .left-reveal--text {
    position: absolute;
    bottom:10px;
    font-size:1.6rem;
    font-weight:600;
    color:#fff;
    z-index:99;
}

.color-con__box .left-reveal--before {
    left:15px;
}

.color-con__box .left-reveal--after {
    right:15px;
}

.color-con__box .color__event {
    flex:1 1 100%;
    max-width:100%;
}

.color-con__box .color__title {
    flex:1 1 100%;
    max-width: 100%;
    padding:40px 12px 0px;
}

.about-intro__color .color__right .right-img1 {
    max-width:55px;
}

.about-intro__color .color__right .right-img2 {
    max-width:38px;
}


.about-win__con {
    max-width:1080px;
    width:100%;
    margin:0 auto;
}

.about__win .flip-container {
    display: flex;
    flex-wrap: wrap;
    margin:-2%;
}

.about__win .flip-container li {
    flex:1 1 100%;
    max-width: 100%;
    padding:2%;
}

.about__win .flip-container .card {
    background-color:transparent;
    width:100%;
    height:300px;
    perspective: 1000px;
    transition:all .6s ease;
}

.about__win .flip-container .card img{
    max-width:140px;
}

.about__win .flip-container .card:hover .card__inner {
    transform: rotateY(-180deg);
}

.about__win .flip-container .card__inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.about__win .flip-container .card__front, .about__win .flip-container .card__back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.about__win .flip-container .card__front {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.about__win .flip-container .front__con {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.about__win .flip-container .card__back {
  background-color:#d12618;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}

.about__members {
    background-color: #fff;
}

.about__bottom {
    background-color: #fff;
}


/* 소형 기기 (가로 전화, 576px 이상) */
@media (min-width:480px) {

}
@media (min-width: 576px) {
    .swiper-why--text {
        display: block;
    }

    .addition--text {
        display: flex;
        justify-content: flex-end;
    }

    .about__win .flip-container li {
        flex:1 1 50%;
        max-width: 50%;
    }

    .about__win .flip-container .card {
        height:360px;
    }

    .about__win .flip-container .card img{
        max-width:180px;
    }

    .about__members .about-members__inner {
        flex:1 1 50%;
        padding:30px;
    }

    .members-info__top {
        top:24px;
        left:24px;
    }

    .members-info__bottom {
        right:24px;
        bottom:24px;
    }

}
/* 중형 기기 (태블릿, 768px 이상) */
@media (min-width: 768px) {

    .about-inner__wrap  {
        padding:202px 180px;
    }

    .about__intro {
        padding-top:120px;
        padding-bottom:120px;
    }

    .about-why__bg img {
        height:128px;
    }

    .about-color__bg img {
        height:151px;
    }

    .about-intro__color .color__right .right-img1 {
        max-width:100%;
    }

    .about-intro__color .color__right .right-img2 {
        max-width:100%;
    }

}
/* 대형 기기 (데스크톱, 992px 이상) */
@media (min-width: 992px) {

    .color-con__box {
        display: flex;
        align-items: center;
    }

    .color-con__box .left-reveal--text {
        font-size:1.8rem;
        font-weight:600;
    }

    .color-con__box .color__event {
        flex:1 1 55%;
        max-width:55%;
    }

    .color-con__box .color__title {
        flex:1 1 45%;
        max-width: 45%;
        padding:0px 0px 0px 60px;
    }

    .swiper-why--scrollbar .swiper-scrollbar-drag::before {
        width:50px;
        height:50px;
    }

    .about__win .flip-container .card img{
        max-width:calc(100% - 10%);
    }




}

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
@media (min-width: 1200px) {

    .about-head__innner {
        height:980px;
    }

    .about-why__bg img {
        height:178px;
    }

    .about-color__bg img {
        height:171px;
    }

    .about__win .flip-container li {
        flex:1 1 25%;
        max-width: 25%;
    }

    .about__win .flip-container .card {
        height:380px;
    }

    .about__members .about-members__inner {
        flex:1 1 33%;
    }

    .members-info__top {
        top:48px;
        left:48px;
    }

    .members-info__bottom {
        right:48px;
        bottom:48px;
    }

}
/* XX- 대형 장치 (더 큰 데스크톱, 1400px 이상) */
@media (min-width: 1400px) {
    .about-inner__wrap  {
        padding:262px 240px;
    }

    .about__intro {
        padding-top:200px;
        padding-bottom:200px;
    }

    .color-con__box .color__title {
        padding:0px 0px 0px 90px;
    }


    .about__members .about-members__inner {
        padding:60px;
    }

}


/* Portfolio */
.portfolio-wrap {
    background-color: #131313;
}


/* Studio */
/* Common */
.studio-section .studio-photo__inner {
    position: relative;
}
.studio-section .studio-thumb {
    position:relative;
    width:100%;
    height:0;
    padding-top: calc(600/1200*100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.studio-section .swiper-photo-control {
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.studio-section .next, .studio-section .prev {
    border-radius:50%;
    width:40px;
    height:40px;
    background-color: transparent;
    border:1px solid rgba(255,255,255,.3);
    background-size: auto 12px;
    background-position: center;
    background-repeat: no-repeat;
    transition:all .3s ease-out;
}

.studio-section .next-b, .studio-section .prev-b {
    border-color:#cfcfcf;
    background-color: #fff;
}

.studio-section .next {
    background-image: url('/res/images/sub/studio/next.png');
}
.studio-section .prev {
    background-image: url('/res/images/sub/studio/prev.png');
}

.studio-section .next-b {
    background-image: url('/res/images/sub/studio/next-b.png');
}
.studio-section .prev-b {
    background-image: url('/res/images/sub/studio/prev-b.png');
}

.studio-section .next:active, .studio-section .prev:active {
    background-color: var(--v-pointer-base);
    border-color:var(--v-pointer-base);
}

.studio-section .next:active, .studio-section .prev:active {
    background-color: var(--v-grey-20-base);
    border-color:var(--v-grey-20-base);
}

.studio-section .next-b:active {
    background-image: url('/res/images/sub/studio/next.png');
}
.studio-section .prev-b:active {
    background-image: url('/res/images/sub/studio/prev.png');
}

.studio-section p {
    color:#525252;
    font-family: 'Poppins', sans-serif;
}

.stuido-section--insert {
    background-color:#fff;
    position: relative;
    overflow: hidden;
}

.stuido-section--insert .insert-bg {
    position: absolute;
    width:100%;
    height:100%;
    z-index:0;
    top:50%;
    left:50%;
    -webkit-ransform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stuido-section--insert .insert-bg::before {
    content:"";
    display: block;
    background-size:100% auto;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/res/images/sub/studio/insert-bg.png');
    width:100%;
    height:0;
    padding-top:100%;
    animation: circletwo 6s linear infinite;
}

@-webkit-keyframes circletwo {
  0% {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes circletwo {
  0% {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* 소형 기기 (가로 전화, 576px 이상) */
@media (min-width: 576px) {

}
/* 중형 기기 (태블릿, 768px 이상) */
@media (min-width: 768px) {

    /* Common */
    .studio-section .next, .studio-section .prev {
        width:50px;
        height:50px;
        background-size: auto 15px;
    }

}

/* 대형 기기 (데스크톱, 992px 이상) */
@media (min-width: 992px) {

    /* Common */

    .studio-section .next:hover, .studio-section .prev:hover {
        background-color: var(--v-pointer-base);
        border-color:var(--v-pointer-base);
    }

    .studio-section .next-b:hover, .studio-section .prev-b:hover {
        background-color: var(--v-grey-20-base);
        border-color:var(--v-grey-20-base);
    }

    .studio-section .next-b:hover {
        background-image: url('/res/images/sub/studio/next.png');
    }
    .studio-section .prev-b:hover {
        background-image: url('/res/images/sub/studio/prev.png');
    }

}

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
@media (min-width: 1200px) {

    /* Common */
    .studio-section .next, .studio-section .prev {
        width:70px;
        height:70px;
        background-size: auto 16px;
    }

}

/* XX- 대형 장치 (더 큰 데스크톱, 1400px 이상) */
@media (min-width: 1400px) {

}


/* Contact */
.contact-wrap {
    background-color:#131313;
}

.contact-wrap .location-map {
    position: relative;
    width:100%;
    height:0;
    padding-top: calc(400/540*100%);
    overflow: hidden;
}

.contact-wrap .location-map__thumb {
    width:100%;
    height:100%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-ransform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.contact-wrap .location-text ul {
    margin: -6px -8px;
}

.contact-wrap .location-text li {
    padding:6px 8px;
}

.contact-wrap .location-text li:first-child {
    width:100%;
}

/* 소형 기기 (가로 전화, 576px 이상) */
@media (min-width: 576px) {
}
/* 중형 기기 (태블릿, 768px 이상) */
@media (min-width: 768px) {
    .contact-wrap .location-text ul {
        margin: -12px -16px;
    }

    .contact-wrap .location-text li {
        padding:12px 16px;
    }
}

/* 대형 기기 (데스크톱, 992px 이상) */
@media (min-width: 992px) {
}

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
@media (min-width: 1200px) {
    .contact-wrap .location-text ul {
        margin: -16px -24px;
    }

    .contact-wrap .location-text li {
        padding:16px 24px;
    }
}

/* XX- 대형 장치 (더 큰 데스크톱, 1400px 이상) */
@media (min-width: 1400px) {
}






/* 소형 기기 (가로 전화, 576px 이상) */
/* @media (min-width: 576px) {
} */
/* 중형 기기 (태블릿, 768px 이상) */
/* @media (min-width: 768px) {
} */

/* 대형 기기 (데스크톱, 992px 이상) */
/* @media (min-width: 992px) {
} */

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
/* @media (min-width: 1200px) {
} */

/* XX- 대형 장치 (더 큰 데스크톱, 1400px 이상) */
/* @media (min-width: 1400px) {
} */