body{min-height:900px}
.wrapper_main { margin: 0; background-size: cover !important; background: url("../images/main/bg_main_spring.jpg") no-repeat center center fixed; transition: 3s; } 

.main-cont-wrap { flex:1; display: flex; align-items: center; justify-content: center; } 
.main-logo { width:900px; height:80px; background:url(../images/main/index_logo.png) no-repeat; margin: 0 auto 100px;} 
.main-cont-box { display:flex; gap:20px; justify-content: center; } 
.main-cont-box .panel { /*height: 380px; width:285px;*/width: 285px; max-width: 285px; max-height: 380px;box-shadow: 0px 8px 16px 0px #3A2EC31F; transition: 0.5s ease; animation: none; } 
.main-cont-box .panel .navi-item {max-width: 285px; max-height: 380px; position: relative; padding-top:calc(380 / 285 * 100%); font-size:28px; font-weight:700; color:#fff;  border-radius: 10px; display:block; width:100%; height:100%; border: 1px solid rgba(219, 217, 215, 0.15); background-repeat: no-repeat; background-position: 0 0 ; background-size: cover;} 
.main-cont-box .panel .navi-item span{position: absolute; top: 2.6rem; left: 2rem;}
.main-cont-box .panel .navi-item-ko { background-image: url(../images/main/item_ko.png);  } 
.main-cont-box .panel .navi-item-gl { background-image: url(../images/main/item_gl.png);  } 
.main-cont-box .panel .navi-item-cl { background-image: url(../images/main/item_cl.png);  } 
.main-cont-box .panel .navi-item-re { background-image: url(../images/main/item_re.png);  } 
.wrapper_main #hd .hd-navi li .navi-item-link{color: #fff;}
.wrapper_main #hd .hd-navi li ul li .navi-item-link{    color: #666;}
.wrapper_main #hd .hd-navi li ul li .navi-item-link:hover{    color: #333;}
.top-logo{background: url(../images/main/logo.png) no-repeat; width: 100px; height: 41px;}
#hd .hd-navi li>a.navi-item-link:hover, #hd .hd-navi li a.navi-item-link.on, #hd .hd-navi li.hover>.navi-item-link{color:#15c0ff}
/*animation*/
@keyframes fadeInUp {0% { transform:translateY(80px); opacity:0; } 
100% { transform:translateY(0); opacity:1; } 
 }
.panel.ani-up { opacity: 0; transform: translateX(0); animation: 0.7s fadeInUp 0.3s forwards; } 
.panel.panel-1 { animation-delay: 0.5s; } 
.panel.panel-2 { animation-delay: 1s; } 
.panel.panel-3 { animation-delay: 1.5s; } 
.panel.panel-4 { animation-delay: 2s; } 
/*footer*/
.ft_left a{ color:#fff; }
.ft_left a::before{background:#fff; }
.ft_center p{color:#fff; }

#fm_site{background:none; border:none; font-size:34px; color:#fff; min-width:140px;}
#ft .ft_btm_site > a{ color: #fff; font-size: 14px;}
#ft .ft_btm_site > a .ico{height: 7px; background: url(../images/main/f_ico.png) no-repeat 0 0;}

.in-top-btn{position:absolute; right:30px; top:0}
.in-top-btn a{color:#fff; font-size: 16px; font-weight: 600; line-height:60px; border:1px solid rgb(255,255,255,0.5); padding:4px 10px; border-radius:4px}
.in-top-btn a:hover{color: #15c0ff;border:1px solid rgb(21,192,255,0.5);}

.main-cont{width: 100%; padding: 0 2rem;}


/* 반응형  */
/* 노트북 (해상도 1480px)*/
@media all and (max-width:1480px) { 
    html, body{
        min-width: auto;
    }
    body{
        min-height: 600px;
    }
    html {
        font-size: 14px;
    }
    #wrapper{
        min-height: 100%;
        height: auto;
    }
    .main-cont{
        margin-top: 3rem;
        margin-bottom: 3rem;
    }
}

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/
@media all and (max-width:1279px) { 
    
    html{font-size:62.5%;} 
    .main-cont-box .panel .navi-item span{
       font-size: 2.4rem;
       padding-right: 1rem;
    }
}
  
/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all  and (max-width:1023px) { 
    #ft{
        padding: 0 0 1rem;
        height: auto;
        flex-direction: column-reverse;
        align-items: center;
    }
    #ft .ft_btm_site > a{
        width: 12rem;
        font-size: 1.2rem;
    }
    .ft_left{
        display: none;
    }
    .ft_center{
        margin-left: 0;
        width: auto;
    }
}

@media all  and (max-width:991px) { 
    .main-cont-box {
        flex-wrap: wrap;
        margin: 0 auto;
    }
    .main-cont-box .panel{
        width: calc(50% - 1rem);
    }
    .main-logo{
        width: 80%;
        margin-bottom: 4rem;
        height: auto;
        background-size: contain;
        padding-top: 8%;
    }
    .main-cont-box{
        max-width: 600px;
    }
    .main-cont-box .panel{
        max-width: 220px;
    }
    .main-cont-box .panel .navi-item span{
         font-size: 2.2rem;
        top: 1.9rem;
        left: 1.6rem;
    }
}
/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:767px) {
    .main-cont-box {
        max-width: 400px;
        gap: 1.2rem;
    }
    .main-cont-box .panel .navi-item span{
       font-size: 2rem;
    }
}

/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width:479px) {
    .main-cont-box .panel .navi-item span{
       font-size: 1.6rem;
       padding-right: 1rem;
    }
    .main-logo{
        width: 90%;
        margin-bottom: 3rem;
    }
    .main-cont-box {
        max-width: 380px;
        gap: 10px;
    }
    .wrapper_main #hd .top-logo{
        width: 80px;
        height: 30px;
        background-image: url(../images/main/logo.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    
}

@media all and (max-width:375px) {
    .main-cont-box .panel .navi-item span{
        font-size: 1.5rem;
        left: 1rem;
        padding-right: 1rem;
    }
}