@charset "utf-8";
#slide3{
    border: none;
}
#slide4{
    height: auto;
    border: none;
}
.topPortfolio,.btmAbout{
    position: relative;
    width: 100%;
}
.topPortfolio{
    position: relative;
    z-index: 1;
    padding-top: 12.2%;
}
.btmAbout{
    position: relative;
    z-index: 1;
    padding-top: 45%;
    background: url(../imgs/bg_section03.jpg) no-repeat left top;
    background-size: 100vw 100vh;
    background-attachment: fixed;
    border-bottom: 1px solid #fff;
}
#slide4.under{
    position: relative;
    background: url(/static/imgs/bg_section03.jpg) no-repeat left top;
    background-size: 100vw 100vh;
    background-attachment: fixed;
}
.mainPBox{
    position: relative;
    z-index: 5;
    width: 100%;
    padding-top: 275px;
}

.boxContent{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1653px;
    width: 100%;
}
.pFlex{
    display: flex;
    width: 100%;
    margin-top: -16.6666%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.pFlex>div{
    cursor: pointer;
    position: relative;
    padding-top: 16.6666%;
    height: 0;
}

.pFlex>div:last-child{
    cursor : auto;
}

.plist2{
    position: relative;
    width: 33.3333%;
}

.plist2:last-child>div{
    display : flex;
}

.plist{
    position: relative;
    width: 16.6666%;
}

.pFlex>div img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}
.pFlex>div:hover .pHscreen{
    padding: 15px;
}
.pFlex>div:hover .pHscreen .pHbox{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.pFlex>div:hover img{
    padding: 15px;
}
.pHscreen{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: .3s;
}
.pHbox{
    transition: .3s;
}
.pHover{
    position: absolute;
    text-align: center;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: .5s;
}
.pFlex>div:hover .pHover{
    opacity: 1;
}
.pHover p{
    color: white;
}

.pTBox{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-align: center;
    align-content: center;
    transition: .3s;
    cursor : pointer;
}

.pTBox:last-child{
    position: absolute;
    width: 100%;
    height: 100px;
    left: 0;
    top: 5.5vw;
    text-align: center;
    align-content: center;
    transition: .3s;
    border : 3px solid #fff;
    border-radius : 5px;
    color : #fff;
    background-color: transparent;
    cursor : pointer;
}

.pTBox:last-child a{font-size : 20px;}

.pTBox:last-child:hover{
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    color: white;
}

.pEnter:hover .pTBox a, .pTBox a:hover{color : #fff;}


.swiper-container-videoSlide{
    height: 100%;
}
.sl01_con.main-content-section.fade-in{
    max-width: 90%;
}


#slide11 .wrap{}
.wrap.wrap_box {display : flex; flex-direction: column; justify-content: center; gap : 50px;}
.wrap_box .main-content-section{margin-left : 125px; margin-top : 135px;}

#slide12 .wrap.wrap_box .main-content-section{margin-top : 135px; margin-right : auto; margin-left : auto;}

.portfolio_list{padding : 0 3%;}

.portfolio_list > .pFlex{
    display : flex;
    width : 100%;
    flex-wrap : wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin-top : 10px;
}

.portfolio_list > .pFlex > div{
    width : 33.3333%;
    cursor : pointer;
    position : relative;
    height : 0;
    padding-top : 16.6666%;
}


.portfolio_list > .pFlex > div > .pTBox2{
    display : flex;
    width: 100%;
    height: 100px;
    text-align: center;
    align-content: center;
    align-items: center;
    transition: .3s;
    border-radius : 5px;
    color : #fff;
    background-color: transparent;
    cursor : pointer;
    position : absolute;
    top : 50%;
    transform : translateY(-50%);
    justify-content: center;

}

.portfolio_list > .pFlex > div > .pTBox2 > div{
    display : flex; align-items: center; justify-content: center; width: 100%; color : #fff; transition: .3s; border : 3px solid #fff;
    border-radius: 5px; background-color: transparent; height : 100%;}
.portfolio_list > .pFlex > div > .pTBox2 > div a{color : #fff; text-align: center;}

.portfolio_list > .pFlex > div > .pTBox2 > div:hover{
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    color: white;
}

.pTBox2 a{width : 100%; height : 100%; display : flex; align-items: center; justify-content: center;}



@media screen and (max-width : 1650px){
    .pTBox:last-child{
        top : 48px;
    }
}

@media screen and (max-width : 1450px){
    .pTBox:last-child{
        top : 52px;
    }
    .portfolio_list{padding : 0;}
}

@media screen and (max-width : 1250px){
    .pTBox:last-child{
        top : 56px;
    }
}

@media screen and (max-width : 1150px){
    .pTBox:last-child{
        top : 60px;
    }
}


@media screen and (max-width:1024px) {
    .btmAbout{
        padding-top: 50%;
    }
    .mainPBox{
        padding-top: 22%;
    }
    #slide5 .wrap {
        width: 100%;
        height: 100%;
        background: url(../imgs/main_aboutus_bg_1.jpg) no-repeat center top;
        background-size: cover;
        background-attachment: fixed;
    }

    #slide3 .wrap {
        width: 100%;
        height: 100%;
        background: url(../imgs/bg_section03.jpg) no-repeat center top;
        background-size: cover;
        background-attachment: fixed;
    }

    .pFlex>div:last-child{
        padding-top: 15%;
        cursor : auto;
    }

    .wrap_box .main-content-section{margin-left : 60px; margin-top : 100px;}
    .portfolio_list > .pFlex > div > .pTBox2{height : 70px;}

    #slide12 .wrap.wrap_box .main-content-section{margin-top : 100px; margin-left : auto; margin-right : auto;}

}


@media screen and (max-width : 992px){
    .pTBox:last-child{
        height : 50px;

    }
}


@media screen and (max-width:768px) {

    .topPortfolio{padding-top : 15%;}
    .btmAbout{
        padding-top: 580%;
    }
    .pTBox:last-child{color : #fff; border-radius: 3px; border : 3px solid #fff; width : 180px; height : 50px;
    left : 50%; transform : translate(-50%, -50%); font-size : unset;}

    .pTBox:last-child:hover{
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    }
    .pTBox:last-child a{font-size : 13px; font-weight : 500;}
    .pFlex>div:nth-of-type(7){
        width : 100%;
        padding-top : 50%;
    }

    .pFlex>div:nth-of-type(14){
        width : 100%;
        padding-top: 26%;
        background-color : transparent;
        color : #fff;
    }
    .pFlex>div{
        padding-top: 50%;
    }
    .pFlex>div:last-child{
        padding-top: 15%;
    }

    .plist2{
        width: 100%;
    }
    .plist{
        width: 50%;
    }
    .topPortfolio,.mainPBox,.btmAbout{
        background: black;
    }

    .wrap_box .main-content-section{margin-left : 26px;}
    .portfolio_list > .pFlex > div {width : 100%; padding-top : 50%;}
    .portfolio_list > .pFlex > div > .pTBox2 > div{width : 200px;}
    .portfolio_list > .pFlex > div:last-child{padding-top : 30%;}
    .wrap_box .main-content-section{margin-top : 40px;}

    #slide12 .wrap.wrap_box .main-content-section{margin-top : 40px; margin-left : auto; margin-right : auto;}

}

@media screen and (max-width : 650px){
    .pTBox:last-child{
        top : 45px;
    }
    .portfolio_list > .pFlex > div > .pTBox2{height : 50px;}
}

@media screen and (max-width : 500px){
    .pTBox:last-child{
        top : 25px;
    }
}

@media screen and (max-width : 380px){
    .pTBox:last-child{
        top : 35px;
    }
}


.sl11_con .portfolio_list > .pFlex > div:last-child {
    width: 33.3333%;
    position: relative;
    height: 0;
    padding-top: 16.6666%;
}