@import url('sub.css');

.header{display: none !important;}
.footer{display: none !important;}
#visual{display: none !important;}
.prdCateNav{display: none !important;}


.guide_cont{min-height: 100vh; display: flex; flex-direction: column; justify-content: center;}
.guide_cont h4{color:var(--black); padding-bottom: 60px;}
.guide_list{display: flex; gap:50px; justify-content: center; max-width:1050px; margin: 0 auto;}
.guide_list .list{width: calc((100% - 100px)/3); box-sizing:border-box;}
.guide_list .list a{display: block; box-sizing:border-box; transition:transform 0.25s ease;}
.guide_list .list a:hover{transform:translateY(-4px);}
.guide_list .list a .thumb{overflow:hidden; transition:box-shadow 0.25s ease;}
.guide_list .list a:hover .thumb{box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.guide_list .list a .thumb img{display: block; width: 100%; height: 100%; object-fit:contain;}
.guide_list .list a .desc{padding: 30px 0 0;}
.guide_list .list a .desc h5{font-weight: 700; color:var(--black); transition:color 0.25s ease;}
.guide_list .list a:hover .desc h5{color:var(--main);}




/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){





}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){



}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


    .guide_cont h4{padding-bottom: 40px;}
    .guide_list{gap:30px;}
    .guide_list .list{width: calc((100% - 60px)/3);}
    .guide_list .list a .desc{padding: 25px 0 0;}
    
    

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

    .guide_cont h4{padding-bottom: 30px;}
    .guide_list{gap:20px; flex-wrap:wrap; }
    .guide_list .list{width: calc((100% - 40px)/2);}
    .guide_list .list a .desc{padding: 15px 0 0;}
    
    


}
/*******************************************************************************
    @media 480px
*******************************************************************************/
@media all and (max-width:480px){


	
}