@import url("//cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');

body{
    font-family: "Pretendard", sans-serif; 
    letter-spacing: -0.5px;
}

/* font-size */
.fs_12{font-size: 16px;}
.fs_14{font-size: 22px;}
.fs_35{font-size: 50px;}

/* font-weight */
.fw_md{font-weight: 500;}
.fw_b{font-weight: 600;}
.fw_bl{font-weight: 900;}


#wrap{
    margin:0 auto; 
    /*min-height: 100vh;*/ 
    position: relative; 
}
#wrap:after{
    content:''; 
    width:100%; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
    background: linear-gradient(to bottom, rgb(50,67,110) 0%,rgb(28,26,59) 98%); 
    z-index: -5;
}
.inner{
    max-width: 1080px; 
    width: 100%;
    margin:0 auto; 
    padding-top:125px; 
    padding-bottom: 80px; 
    position: relative; 
    min-height: 100vh;
}
.cont{
    width: 94%; 
    margin:0 auto;
}
.bg_color{
    position: absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    z-index: -1;
}
.bg_img{
    position: absolute; 
    left:50%; 
    bottom:0; 
    transform:translateX(-50%); 
    width:100%; 
    height:auto; 
    display: block; 
    z-index: -1;
}

.title_box{
    text-align: center; 
    color:#fff;
}
.title_box h2{
    font-family: 'Montserrat', sans-serif; 
    color:#fff; 
    margin-top:20px;
}
.title_box p{
    color:#fff; 
    padding:15px 0; 
}
.title_box strong{
    font-family: 'Montserrat', sans-serif; 
    color:#cc9966; 
}

.btn_box{
    margin-top:40px;
}
.btn_list {
    display: flex; 
    flex-wrap: wrap; 
    border:1px solid rgba(255,255,255,.3); 
    border-bottom:0; 
    border-right:0; 
    max-width:600px; 
    width:100%; 
    margin:0 auto;
}
.btn_list li {
    aspect-ratio: 1/1; 
    width:33.333%; 
    border-right:1px solid rgba(255,255,255,.3); 
    border-bottom:1px solid rgba(255,255,255,.3); 
    background-color:rgba(20,22,45,.6); 
    transition:background-color .3s; 
}
.btn_list li.cont_blank {
    background-color:rgba(50,67,110,.3);
}
.btn_list li a{
    display: flex; 
    align-items: center; 
    flex-direction: column; 
    justify-content: center; 
    width: 100%; 
    height:100%; 
}
.btn_list li p{
    color:#fff; 
    margin-top:4px;
}


.btn_list li:hover{
    background-color:rgba(20,22,45,1); 
    transition:background-color .3s; 
}
.btn_list li.cont_blank:hover {
    background-color:rgba(50,67,110,1);
}


/* 팝업 style */
.pop_up{
    width: 100%; 
    height:100%; 
    background-color: #cc9966; 
    position:fixed; 
    left:0; 
    top:0; 
    transition:.5s;
}
.close_btn{
    width: 25px; 
    height:25px; 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    position:absolute; 
    right:30px; 
    top:30px;
}
.close_btn span{
    display: block; 
    background-color: #fff; 
    width: 100%; 
    height:2px;
    transition:.3s; 
}
.close_btn span.line_01{
    transform:rotate(-45deg);
}
.close_btn span.line_02{
    margin-top:-2px; 
    transform:rotate(45deg);
}
.close_btn:hover span.line_01{
    transform:rotate(0);
    transition:.3s; 
}
.close_btn:hover span.line_02{
    transform:rotate(0);
    transition:.3s; 
}

/* 왼쪽에서 오른쪽으로 팝업생성 */
.pop_up.to_right{left:-100%; }
.pop_up.to_right.open{left:0; transition:.8s; }

/* 오른쪽에서 왼쪽으로 팝업생성 */
.pop_up.to_left{left:unset; right:-100%; }
.pop_up.to_left.open{right:0; transition:.8; }

/* 아래에서 위로 팝업생성 */
.pop_up.to_top{top:100%; }
.pop_up.to_top.open{top:0; transition:.8s; }

/* 아래에서 위로 팝업생성 */
.pop_up.to_down{down:100%; }
.pop_up.to_down.open{down:0; transition:.8s; }




@media screen and (max-width: 720px){
    /* font-size */
    .fs_12{font-size: 12px;}
    .fs_14{font-size: 14px;}
    .fs_35{font-size: 35px;}

    #wrap{min-height: 100vh;}
    .inner{padding-top:65px;}
    .close_btn{right:20px; top:20px;}
}