@import url(header.css);
@import url(footer.css);

/* 폰트 선언 */
@font-face {
    font-family : 'NanumSquareNeo';
    font-weight: 300;
    src : url(../fonts/NanumSquareNeoTTF-aLt.woff);
}
@font-face {
    font-family : 'NanumSquareNeo';
    font-weight: 400;
    src : url(../fonts/NanumSquareNeoTTF-bRg.woff);
}
@font-face {
    font-family : 'NanumSquareNeo';
    font-weight: 700;
    src : url(../fonts/NanumSquareNeoTTF-cBd.woff);
}
@font-face {
    font-family : 'NanumSquareNeo';
    font-weight: 800;
    src : url(../fonts/NanumSquareNeoTTF-dEb.woff);
}
@font-face {
    font-family : 'NanumSquareNeo';
    font-weight: 900;
    src : url(../fonts/NanumSquareNeoTTF-eHv.woff);
}



/* 폰트 안티 앨리어싱을 위한 회전 */
p,h1,h2,h3,span {
    transform : rotate(0.03deg);
  }
h1{font-size: 4.8rem;font-weight: 900;}
h2{font-size: 4rem;font-weight: 400;}
.purple{font-weight: 800;color: #360658;font-size: inherit;}
b,select,span{font-size: inherit;}
b,select,option,button{font-size: inherit;}
/* 비디오 백그라운드 */
video,.bg{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: relative;
}
video[poster]{
    width: 100%;
}
.banner{
    position: relative;
}
.video-wrap{
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    top: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scroll-down{
    position: absolute;
    bottom: 30px;
    z-index: 6;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-sub-txt{
    text-align: center;
    color: #fff;
    font-size: 3rem;
    padding-top: 20px;
}

/* 공통 */
*{
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: 'NanumSquareNeo';
    font-size:62.5%;
}
.contents {
    margin-top: 100px;
}

.container{max-width:1400px;margin: auto;}
.container-2{max-width:1400px;margin: auto;}
.flex-box{
    display: flex;
    flex-wrap: wrap;
    margin:auto;
}
.full{
    width: 100%;
    height: 100vh;
}
input[type='checkbox']{
    width: 20px !important;
    height:20px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance:none;
    outline: none;
    box-shadow: none;
    background: url("../image/recruit/no-checked.png")no-repeat;
    padding-right: 20px;
}
input[type='checkbox']:checked{
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance:none;
    box-shadow: none;
    background: url("../image/recruit/checked.png") no-repeat;
    padding-right: 20px;
}

/* 각 메뉴 상단 */
    .top-banner{
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
    .top-banner img{
        width: 100%;
        object-fit: cover;
        position: relative;
    }
    .banner-txt{
        position: absolute;
        top: 260px;
        color: #fff;

    }
    .banner-title{
        font-size: 4.8rem;
        font-weight: 800;
    }
    .sitemap{
        padding: 20px 0 0 0;
        font-size: 1.6rem;
    }


/* 메인화면 */
    .section-2,.section-3,.section-4{margin-top: -5px;}
    .section-2{width: 100%;height: 100vh;background-color: #000;}
    .section-2 div{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    .section-2 img{width: 100%;}


.main-txt{
    text-align: center;
    font-size: 8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    z-index: 2;
}
.main-txt-2{
    text-align: center;
    font-size: 6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.3;
    z-index: 2;
}



/* ONE */
.section-2 {
    position: relative;
}




.section-2 .one-image-group {
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 1400px;margin: auto;
    height: 100vh; /* 전체 화면 높이에 맞춰 중앙 정렬 */

}
.section-2 .one-image-group>div{width: calc((100%-90px)/3);margin: 0 30px;}
/* .section-2 .one-image-group>div img{height: 300px;}
 */



    /* one and only */
    .section-3{
        width: 100%;
        height: 100vh;
        align-content: center;
        background-color: #000;
        color: #fff;
        text-align: center;
    }
    .only img{
        width: 500px;
    }
    .one div{
        width: 30%;
        height:550px;
        text-align: center;
        align-content: center;
        border-radius:30px ;
        margin: calc(10%/6);
    }
    .one{position: relative;}
    .one div:nth-child(1),.one div:nth-child(2),.one div:nth-child(3){ position: relative;}
    .one div:nth-child(1){
        background-image: url("../image/common/one-place-2.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .one div:nth-child(2){
        background-image: url("../image/common/one-click-2.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .one div:nth-child(3){
        background-image: url("../image/common/one-day-2.png");
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .one img{position: relative;}
    .one h1{
        font-size: 5rem;
        font-weight: 900;
        padding-bottom:40px;
    }
    .one h3{
        font-size: 2.6rem;
        font-weight: 800;
    }

    /* 플랜닥스가 새로운, 혁신적인 이유 */
    .bg-wrap{
        width: 100%;
        height: 100vh;
        background-image: url("../image/common/dark-background.png");
        object-fit: cover;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bg-wrap>div{

        text-align: center;
        width: 100%;
        justify-content: center;
        height: 200px;
    }

    .bg-wrap>div>div{
        display: inline-flex;
        justify-content: center;
    }
    .bg-wrap h2{
        font-size: 7.2rem;
        font-weight: 800;
        color: #fff;
        z-index: 2;
        display: inline-block;

    }
    .color-box{
        display: inline-block;
        width: 330px;
    }




    /* 불편함이 당연했던 일상 */
    .section-6{
        background-color: #f2f9fc;
        width: 100%;
        height: 100vh;
        position: relative;
    }
    .section-6 ul{
        width: 100%;
        margin: auto;
    }
    .card-1{background-image: url("../image/common/6-1.png");}
    .card-2{background-image: url("../image/common/6-2.png");}
    .card-3{background-image: url("../image/common/6-3.png");}
    .card-4{background-image: url("../image/common/6-4.png");}


    .section-6 ul li{
       width: 80%;
        height: 75%;
        padding: 20px;
        margin: auto;
        color: #fff;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 25px;
        top: calc(50vh - 35%);
        left: calc(50vw - 40%);
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .card-txt{
        width: 36%;
    }
    .card-txt h2{
        font-size: 4.2rem;
        font-weight: 800;
        padding-bottom: 20px;
        line-height: 1.5;
    }
    .card-txt h6{

        font-size: 2rem;
        font-weight: 700;
        line-height: 1.5;
    }



    /* section 7 */
    .scroll-line{
        margin: auto;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        position: relative;

    }
    .scroll-line>div{
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20px 0 ;

        font-weight: 800;
        position: absolute;
        top: calc(50% - 36px + 300px);
        width: 100%;
        color: #232323;
    }
    .scroll-line>div p{font-size: 3.8rem;}
    .scroll-line img{
        width: 72px;
        margin: 0 10px;
    }
    .scroll-line>div div{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 0 0 10px;
    }





    .section-n{
        width: 100%;
        height: 100vh;
        align-content: center;
        text-align: center;
        padding: 100px 0 0 0;
    }
    .section-n .flex-box{
        justify-content: center;
    }
    .section-n .flex-box div{
        position: relative;
        margin: 50px 20px;
        border-radius: 30px;
        overflow: hidden;
    }
    .section-n .flex-box p{
        position: absolute;
        width: 100%;
        font-size: 3.4rem;
        font-weight: 800;
        line-height: 1.5;
        top: 20%;
        text-align: center;
        color: #fff;
    }
    .section-n .c-bt{
        margin: 120px 0 0 0;
    }

    .section-n .c-bt a{
        width: 300px;
        padding: 15px 70px;
        font-size: 2.4rem;
        color: #000;
        background-color: #fff;
        border-radius: 100px;
    }


    .section-9{
        width: 100%;
        height: 100vh;
        align-content: center;
        text-align: center;
        padding-top: 100px;
    }
    .map-wrap{
        height: 500px;
        align-content: center;

    }
    .logo-3d{
        height: 300px;
        align-content: center;

    }
    .map-wrap{
        width: 280px;
        margin: auto;
        position: relative;
    }
    .section-9 .logo-3d img{
        height:300px;
    }
    .section-9 .map-wrap>img{
        height: 500px;

    }
    .section-9 p{
        font-size: 28px;
        font-weight: 800;
        line-height: 1.3;
        padding-top: 20px;
    }
    .section-9 .pin{position: absolute;}

    .section-9 .pin:nth-child(2){
        top: 55px;
        left: 18px;
    }
    .section-9 .pin:nth-child(3){
        top: 48px;
        left: 45px;
    }
    .section-9 .pin:nth-child(4){
        top: 30px;
        left: 63px;
    }
    .section-9 .pin:nth-child(5){
        top: 69px;
        left: 60px;
    }
    .section-9 .pin:nth-child(6){
        top: 50px;
        left: 80px;
    }
    .section-9 .pin:nth-child(7){
        top: 90px;
        left: 80px;
    }
    .section-9 .pin:nth-child(8){
        top: 110px;
        left: 100px;
    }
    .section-9 .pin:nth-child(9){
        top: 120px;
        left: 70px;
    }
    .section-9 .pin:nth-child(10){
        top: 110px;
        left: 50px;
    }
    .section-9 .pin:nth-child(11){
        top: 50px;
        right: 60px;
    }
    .section-9 .pin:nth-child(12){
        top: 90px;
        right: 80px;
    }
    .section-9 .pin:nth-child(13){
        top: 60px;
        right: 105px;
    }
    .section-9 .pin:nth-child(14){
        top: 20px;
        right: 131px;
    }
    .section-9 .pin:nth-child(15){
        top: 200px;
        left: 120px;
    }
    .section-9 .pin:nth-child(16){
        top: 140px;
        right: 120px;
    }
    .section-9 .pin:nth-child(17){
        top: 180px;
        left: 50px;
    }
    .section-9 .pin:nth-child(18){
        top: 190px;
        right: 90px;
    }
    .section-9 .pin:nth-child(19){
        top: 160px;
        right: 40px;
    }
    .section-9 .pin:nth-child(20){
        top: 240px;
        right: 70px;
    }
    .section-9 .pin:nth-child(21){
        top: 270px;
        right: 20px;
    }
    .section-9 .pin:nth-child(22){
        top: 260px;
        left: 70px;
    }
    .section-9 .pin:nth-child(23){
        top: 320px;
        left: 80px;
    }
    .section-9 .pin:nth-child(24){
        top: 370px;
        left: 30px;
    }
    .section-9 .pin:nth-child(25){
        top: 300px;
        right:100px;
    }
    .section-9 .pin:nth-child(26){
        bottom: 15px;
        left: 27px;
    }



    /* 반응형 */
    /* 노트북 & PC (해상도 1279px ~ 1600px)*/
    @media (max-width:1600px){
        .container{max-width:100%;margin: auto;}
        .container-2{max-width:100%;margin: auto;padding: 0 50px;}
        .card-txt h2{
            font-size: 3.8rem;

        }
        .card-txt h6{
            font-size: 1.6rem;
        }
        .card-txt {
            width: 40%;
        }
        .section-2 .one-image-group {
            width: 100%;
            padding: 10%;
        }
        .section-2 .one-image-group>div{width: calc((100%-90px)/3);margin: 0 30px;}

    }

    /* 노트북 & PC (해상도 1024px ~ 1279px)*/
    @media (max-width:1279px){



        .one div{
            height: 430px;
        }


        .right-txt{
            left: 50%;
        }

        .card-txt {
            width: 50%;
        }
        .card-txt h2{
            font-size: 3.4rem;

        }
        .section-2 .one-image-group>div{margin: 0 20px;
        }
    }

    /* 태블릿 가로, 태블릿 세로 (해상도 768px ~ 1023px)*/
    @media (max-width:1023px){
        .container-2{max-width:100%;margin: auto;padding: 0 20px;}
        .one div{
            height: 70vh;
        }
        .main-txt{
            font-size: 6rem;

        }
        .main-txt-2{

            font-size: 4rem;

        }
        h1{font-size: 2.8rem;font-weight: 900;}

        .bg-txt{
            font-size: 6rem;
            line-height: 80px;
        }
        .bg-wrap h2{

            display: block;

        }
        /* section-3 */
        .one div{
            width: 70%;
            margin: 30px auto;
            align-content: center;
            border-radius: 30px;
        }


        .section-3{

            align-content: baseline;

        }
        .only img{

            padding: 100px 0 0 0;
        }
        .one h1{
            font-size: 3.2rem;
            font-weight: 900;
            padding-bottom:40px ;
        }
        .one h3{
            font-size: 1.8rem;
            font-weight: 700;
        }
        .one div:nth-child(1),.one div:nth-child(2),.one div:nth-child(3){
            background-size: 100%;
            position: absolute;
            transform: translate(-50%, 0);
            left: 50%;
        }




        .right-txt{
            left: 0;
            padding: 0 10px 0 20px;
            font-size: 1.4rem;
        }
        .right-txt span{
            font-size: 2.8rem;
        }
        .scroll-line>div{
            font-size: 2.2rem;
        }
        .scroll-line img{width: 50px;margin: 0 7px;}

        .scroll-line>div p {
            font-size: 2.8rem;
        }

        .section-n{
            width: 100%;
            height: 100%;

        }
        .section-n .flex-box p{font-size: 2.6rem;}
        .section-n .flex-box div{height: 450px;}
        .section-n .c-bt a{
            font-size: 2rem;
        }
        .main-sub-txt{
            font-size: 2.4rem;

        }
        .section-2 .one-image-group>div{margin: 0 15px;
        }
    }


    /* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
    @media (max-width:767px) {
        h1{font-size: 3.2rem;font-weight: 900;}
        h2{font-size: 2.8rem;font-weight: 400;}

        .main-txt{
            font-size: 3.2rem;
        }
        .main-txt-2{

            font-size: 2.4rem;

        }
        .top-banner img{
            height: 100%;
            object-fit: cover;
        }
        .bg-wrap h2{

            font-size: 4.4rem;
        }
        .bg-wrap>div>div{
            display: flex;
        }
        .color-box{
            display: inline-block;
            width:inherit;
            padding-right: 20px;
        }
        .bg-txt{
            font-size: 3rem;
            line-height: 50px;
        }
        .scroll-line>div{
            font-size: 1.8rem;
        }
        .scroll-line>div{
            display: block;
            text-align: center;

        }
        .scroll-line>div div{

            padding: 0;
        }
        .scroll-line>div p {
            font-size: 2.2rem;
        }


        .only img{
            width: 70%;
        }
        .one div{
            width: 80%;
            margin: 20px auto;
            display: flex;
            align-items: center;
            height: 400px;
            flex-direction: column;
            justify-content: center;
        }

        .card-txt {
            width: 100%;
        }
        .card-txt h2{
            font-size: 2.6rem;

        }
        .card-txt h6{
            font-size: 1.4rem;
        }
        .main-sub-txt{
            font-size: 1.8rem;

        }
        .section-2 .one-image-group>div{margin: 0 10px;
        }


        .section-9 div{

            align-content: center;

        }
        .section-9 .logo-3d img{
            height:200px;
        }
        .logo-3d{
            height: 300px;
        }
        .section-9 p{
            font-size: 17px;

        }
    }

/* 김민지 과장님 반영 부분 */
/* footer select*/
.select-form2 {
    position: relative;
    display: inline-block;

}
.select-form2 select {
    width: 250px;
    height: 50%;
    padding: 0 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ebebeb;
    padding: 16px;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
}
.select-form2 i {
    position: absolute;
    top: 50%;
    right: 16px;
    border-top: 6px solid #d8d8d8;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    transform: translateY(-50%);
}

.select-form2 select:hover {
    border-color: #888;
}