/* Common */
.app--main #contents{
    padding:0;
}

.app--main .sub-quick-button {
    display: none;
}

@media (min-width:576px){
}
@media (min-width:768px){

}
@media (min-width:1024px){

}
@media (min-width:1200px){
}

/* Ttranslate */
.translate-up{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.translate-up__txt{
    -webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) .4s;
    -ms-transition: all cubic-bezier(0.4, 0, 0.2, 1) .4s;
    transition: all cubic-bezier(0.4, 0, 0.2, 1) .4s;
}
.translate-up__show{
    transform: translateY(0);
}
.translate-up__hidden{
    position: absolute;
    transform: translateY(100%);
}
.translate-up:hover .translate-up__show,
.translate-up-btn:hover .translate-up__show{
    transform: translateY(-100%);
}
.translate-up:hover .translate-up__hidden,
.translate-up-btn:hover .translate-up__hidden{
    transform: translateY(0);
}


/* Section */
.section {
    background-color: #141414;
    position: relative;
}

.section img {
    display: block;
}

.section-inner__top {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top:80px;
}

.section-inner__bottom {
    padding-bottom:100px;
}

.section-text__tit {
    font-size:4.8rem;
    font-weight:700;
    line-height:1;
    position: relative;
    color:#fff;
}

.section-text__tit .tit-stroke {
    -webkit-text-stroke: 1px #fff;
    text-stroke:1px #fff;
    color:#131313;
}

.section-text__subtit {
    font-weight:700;
    font-size:3.8rem;
    line-height:1;
    color:#fff;
}

.section-text__sub {
    font-size:2rem;
    color:#fff;
    font-weight:300;
}

.section-text__info {
    margin: -6px -8px;
}

.section-text__info li {
    padding:6px 8px;
}

.section-text__info li:first-child {
    width:100%;
}

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

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

    .section-inner__top {
        padding-top:120px;
    }

    .section-inner__bottom {
        padding-bottom:140px;
    }

    .section-text__tit {
        font-size:8rem;
    }

    .section-text__subtit {
        font-size:5rem;
    }

    .section-text__sub {
        font-size:2.4rem;
    }

    .section-text__info {
        margin: -10px -18px;
    }

    .section-text__info li {
        padding:10px 18px;
    }

}

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

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

    .section-inner__top {
        padding-top:220px;
    }

    .section-inner__bottom {
        padding-bottom:240px;
    }

    .section-text__tit {
        font-size:11rem;
    }

    .section-text__subtit {
        font-size:7.2rem;
    }
    
    .section-text__sub {
        font-size:3rem;
    }

    .section-text__info {
        margin: -14px -24px;
    }

    .section-text__info li {
        padding:14px 24px;
    }

}

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


/* Visual */
.section--visual {
    height:100vh;
}

.section--visual .section--inner {
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}


.section--visual__logo {
    max-width:221px;
    width:100%;
}


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

/* 중형 기기 (태블릿, 768px 이상) */
@media (min-width: 768px) {
    .section--visual__logo {
        max-width:241px;
        width:100%;
    }
}

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

    .section--visual {
        height:980px;
    }

}

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
@media (min-width: 1200px) {
    .section--visual__logo {
        max-width:291px;
        width:100%;
    }
}

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

}


/* Board */
.section--portfolio {
    width:100%;
    height:100%;
}

.portfolio__bg {
    max-width:221px;
    width:100%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index:1;
}

.section--portfolio .d-block {
    background-color:#131313;
}

.section--portfolio .container{
    max-width:100%;
    padding:0px;
}
.section--portfolio .scene {
    height:100%;
}

.section--portfolio .d-container {
    padding-top:0;
    padding-bottom:0;
    min-height:936px;
    position: relative;
    width:100% !important;
    background-color: #131313;
}

.section--portfolio .d-inner__item {
    position: absolute;
    display: flex;
    top:0;
    left:0;
    flex-wrap: wrap;
    width:100%;
    height:100%;
}

.section--portfolio .d-inner__item .board-list-gallery__item {
    opacity:0;
    visibility:hidden;
}

.section--portfolio .d-inner__item1 .board-list-gallery__item:nth-child(1),
.section--portfolio .d-inner__item1 .board-list-gallery__item:nth-child(6),
.section--portfolio .d-inner__item1 .board-list-gallery__item:nth-child(8) {
    background-color: #131313;
    visibility:visible;
    cursor: pointer;
    z-index:4;
}

.section--portfolio .d-inner__item2 .board-list-gallery__item:nth-child(2),
.section--portfolio .d-inner__item2 .board-list-gallery__item:nth-child(3),
.section--portfolio .d-inner__item2 .board-list-gallery__item:nth-child(4) {
    background-color: #131313;
    visibility:visible;
    cursor: pointer;
    z-index:3;
}

.section--portfolio .d-inner__item3 .board-list-gallery__item:nth-child(5),
.section--portfolio .d-inner__item3 .board-list-gallery__item:nth-child(7),
.section--portfolio .d-inner__item3 .board-list-gallery__item:nth-child(9) {
    background-color: #131313;
    visibility:visible;
    cursor: pointer;
    z-index:2;
}

.mobile-portfolio--layout {
    display: block;
}

.pc-portfolio--layout {
    display: none;
}

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

}

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

    .portfolio__bg {
        max-width:241px;
        width:100%;
    }

}

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

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
@media (min-width: 1200px) {
    .section--portfolio .d-container {
        min-height:614px;
    }

    .portfolio__bg {
        max-width:291px;
        width:100%;
    }

    .mobile-portfolio--layout {
        display: none;
    }

    .pc-portfolio--layout {
        display: block;
    }

}

@media (min-width: 1280px) {
    .section--portfolio .d-container {
        min-height:654px;
    }
}

/* XX- 대형 장치 (더 큰 데스크톱, 1400px 이상) */
@media (min-width: 1360px) {
    .section--portfolio .d-container {
        min-height:696px;
    }
}

@media (min-width: 1600px) {
    .section--portfolio .d-container {
        min-height:818px;
    }
}

@media (min-width: 1680px) {
    .section--portfolio .d-container {
        min-height:860px;
    }
}


/* Partner */
.section-con--partner ul {
    margin:-5px -10px;
}
.section-con--partner li {
    flex:1 1 33.33%;
    max-width:33.33%;
    padding:5px 10px;
}

.section-con--partner li div {
    display:flex;
    justify-content: center;
    align-items:center;
    height:100%;
}

.section-con--partner img {
    max-width:82px;
}

/* 소형 기기 (가로 전화, 576px 이상) */
@media (min-width: 576px) {
    .section-con--partner img {
        max-width:142px;
    }
}

/* 중형 기기 (태블릿, 768px 이상) */
@media (min-width: 768px) {
    .section-con--partner img {
        max-width:100%;
    }
}

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

/* 초대형 기기 (대형 데스크톱, 1200px 이상) */
@media (min-width: 1200px) {
    .section-con--partner ul {
        margin:-20px -10px;
    }
    .section-con--partner li {
        flex:1 1 16.6667%;
        max-width:16.6667%;
        padding:20px 10px;
    }

}

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

}


/* Location */
.section--con--location {
    position: relative;
    width:100vw;
    height: 260px;
    padding-top:0;
    left:50%;
    -webkit-ransform: translateX(-50%);
    transform: translateX(-50%);
    overflow: hidden;
}

.section--con--location .d-location {
    display: block;
    position: absolute;
    width:100%;
    height:100%;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

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

    .section--con--location {
        height: 320px;
        padding-top:0;
    }

}

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

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

    .section--con--location {
        height: 0;
        padding-top: calc(480/1920*100%);
    }

}

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

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

}