@charset "utf-8";

/*** PC웹 기본 설정 ***/
* {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
    font-family: '나눔고딕';
}

#wrap {
    width: 100%;
}

li {
    list-style: none;
    text-decoration: none;
    font-style: normal;
}

.behind {
    width: 1px;
    height: 1px;
    position: absolute;
    left: -1px;
    overflow: hidden;
    z-index: -1000;
}

.hidden {
    width: 0;
    height: 0;
    font: 0/0'';
    visibility: hidden;
    overflow: hidden;
}



/*************** header *****************/
header {
    width: 100%;
    height: 180px;
    position: fixed;
    background: #fff;
    z-index: 100;
}

.logo {
    width: 150px;
    height: 60px;
    text-indent: -9999px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/img/logo.png);
    background-size: cover;
}



/*************** contentwrap *****************/

main {
    width: 100%;
    overflow: hidden;
    position: relative;
    top: 180px;
}

main > .img {
    width: 100%;
    height: calc(100vh - 100px);
    /* background-size: cover 와 같은 효과 */
    background: url(../images/img/main.jpg) center;
    background-size: cover;
    position: fixed;
    bottom: 0;
    z-index: -1;
}

/*
    main > .img {
        width: 1024px;
        margin: 0 auto;
    }
*/

#grid {
    width: 100%;
    overflow: hidden;
}


.btn {
    max-width: 1024px;
    margin: 0 auto;
    height: 2000px;
}

.btn li {
    width: 150px;
    height: 150px;
    cursor: pointer;
    font: 1em/250px '';
    text-decoration: overline;
    margin: 70px auto;
    font-size: 15px;
    box-sizing: border-box;

}



.btn li:nth-child(1) {
    color: white;
    background: url(../images/img/btn_1.png) center;
    background-size: cover;
    margin-top: 600px;

}

.btn li:nth-child(2) {
    background: url(../images/img/btn_2.png) center;
    background-size: cover;

}

.btn li:nth-child(3) {
    background: url(../images/img/btn_3.png) center;
    background-size: cover;
}

.btn li:nth-child(4) {
    background: url(../images/img/btn_4.png) center;
    background-size: cover;

}

.btn li:nth-child(5) {
    background: url(../images/img/btn_5.png) center;
    background-size: cover;

}

.btn li:nth-child(6) {
    background: url(../images/img/btn_6.png) center;
    background-size: cover;

}







/*************** footer *****************/
footer {
    width: 100%;
    height: 180px;
    position: fixed;
    bottom: 0;
    background-color: #fff;

}

address {
    max-width: 1024px;
    margin: 0 auto;
    margin-top: 5px;
}

address li {
    width: 100%;
    font-size: 11px;
    font-style: normal;
    color: grey;
    line-height: 1.5;
}

small {
    color: dimgrey;
}




























/****************팝업***************/
/*팝업 전체 설정*/
.popup {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.6);
}

/*아웃 버튼*/
.out,
.out_btn {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -328px);
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(../images/img/out_btn.png);
}

.out_btn {
    transform: translateY(298px) rotate(90deg);
}

/*popup1*/
.popup .img {
    position: fixed;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*popup2*/
.grid2 {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grid2 li {
    width: 100px;
    height: 100px;
    color: #d9d5cc;
    cursor: pointer;
    box-sizing: border-box;
    font: 1em/95px '';
    border: 2px solid #b9b6af;
    border-radius: 20px;
    background-color: rgba(0.5, 0, 0, 0.5);
    position: absolute;
}

.grid2 li:nth-child(1) {
    left: 0;
}

.grid2 li:nth-child(2) {
    right: 0;
}

.dbpop > li > div {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 3000;
}

/*popup3*/
.grid3 {
    width: 400px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grid3 li {
    width: 100px;
    height: 100px;
    color: #d9d5cc;
    cursor: pointer;
    box-sizing: border-box;
    font: 1em/95px '';
    border: 2px solid #b9b6af;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
}

.grid3 li:nth-child(1) {
    left: 0;
    margin: -100px auto;
}

.grid3 li:nth-child(2) {
    right: 0;
    margin: -100px auto;
}

.grid3 li:nth-child(3) {
    left: 0;
    margin: 100px auto;
}

.grid3 li:nth-child(4) {
    right: 0;
    margin: 100px auto;
}



/*popup4*/
.grid4 {
    width: 400px;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grid4 li {
    width: 100px;
    height: 100px;
    color: #d9d5cc;
    cursor: pointer;
    box-sizing: border-box;
    font: 1em/95px '';
    border: 2px solid #b9b6af;
    border-radius: 20px;
    background-color: rgba(0.5, 0, 0, 0.5);
    position: absolute;
}

.grid4 li:nth-child(1) {
    left: 0;
}

.grid4 li:nth-child(2) {
    right: 0;
}


/*popup5*/
.grid5 {
    width: 400px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.grid5 li {
    width: 100px;
    height: 100px;
    color: #d9d5cc;
    cursor: pointer;
    box-sizing: border-box;
    font: 1em/95px '';
    border: 2px solid #b9b6af;
    border-radius: 20px;
    background-color: rgba(0.5, 0, 0, 0.5);
    position: absolute;
}

.grid5 li:nth-child(1) {
    left: 0;
    margin: -100px auto;
}

.grid5 li:nth-child(2) {
    right: 0;
    margin: -100px auto;
}

.grid5 li:nth-child(3) {
    left: 0;
    margin: 100px auto;
}

.grid5 li:nth-child(4) {
    right: 0;
    margin: 100px auto;
}

/*popup6*/















/**************** 반응형 768px ***************/
/*index*/
@media all and (min-width:768px) {
    .btn {
        grid-template-columns: auto;
    }

    .btn li:nth-child(9) {
        grid-column: 1 / span 2;
    }

    .img li {
        width: 50%;
    }

    .img li:last0-child {
        width: 100%;
    }

    .flex {
        height: calc(250px * 5 + 60px);
    }

    .flex li {
        width: calc((100% - 20px) / 2);
    }

    .flex li:last-child {
        width: calc(100% - 10px);
    }

    .grid3 {
        grid-template-columns: auto auto;
    }

    .grid3 li:nth-child(9) {
        grid-column: 1 / span 2;
    }

    .grid4 {
        grid-template-columns: auto auto;
    }

    .grid4 li:nth-child(9) {
        grid-column: 1 / span 2;
    }

    .grid5 {
        grid-template-columns: auto auto;
    }

    .grid5 li:nth-child(9) {
        grid-column: 1 / span 2;
    }

    address li {
        display: inline-block;
        padding: 0 10px;
        position: relative;
        width: auto;
    }

    address li::after {
        position: absolute;
        right: -3px;
        top: 3px;
        content: "";
        width: 1px;
        height: 8px;
        background-color: #b9b9b9;
    }

    address li:last-child::after {
        content: none;
    }

}



/**************** 반응형 1024p x**************/
@media all and (min-width:1024px) {
    .btn {
        grid-template-columns: auto;
    }

    .btn li:nth-child(9) {
        grid-row: 2 / span 2;
    }

    .img li {
        width: 33.333333%;
    }

    .img li:last-child {
        width: 33.333333%;
    }

    .flex {
        height: calc(250px * 3 + 40px);
    }

    .flex li {
        width: calc((100% - 30px) / 3);
    }

    .flex li:last-child {
        width: calc((100% - 30px) / 3);
        order: 0;
    }

    .grid3 {
        grid-template-columns: auto auto;
    }

    .grid3 li:nth-child(9) {
        grid-row: 2 / span 2;
    }

    .grid4 {
        grid-template-columns: auto auto;
    }

    .grid4 li:nth-child(9) {
        grid-row: 2 / span 2;
    }

    .grid5 {
        grid-template-columns: auto auto;
    }

    .grid5 li:nth-child(9) {
        grid-row: 2 / span 2;
    }

    .popup .img {
        position: fixed;
        width: 1024px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


}