@charset "UTF-8";

@media all and (max-width:1520px){
    #contents .cs_navi li {width: 120px;}
    #contents .cs_navi > ul > li:nth-child(2) {width: 300px;}
    #contents .cs_navi > ul > li:nth-child(3) {width: 300px;}
}

@media all and (max-width:1024px){
    #contents .contents .cs_head {width: 100%;}
    #contents .cs_navi {top: -80px; width: 100%; display: inline-block;}
    #contents .cs_navi ul {border-radius: 15px; height: 60px; width: 100%;}
    #contents .cs_navi li.home {width: 80px; clip-path: none; border-top-left-radius: 15px; border-bottom-left-radius: 15px;}
    #contents .cs_navi li.home i {left: 50%;}
    #contents .cs_navi > ul > li {opacity: 0.7;}
    #contents .cs_navi > ul > li:nth-child(2) {width: calc((100% - 80px) / 2);}
    #contents .cs_navi > ul > li:nth-child(3) {width: calc((100% - 80px) / 2); border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
    #contents .cs_navi .csn_sub {top: 60px; z-index: 9;}
    #contents .cs_navi .csn_sub li {opacity: 1;}
    #contents .cs_navi button {height: 60px; line-height: 60px;}
    #contents .cs_lnb  {display: none;}
}

@media all and (max-width:768px){
    #contents .cs_navi {top: -65px;}
    #contents .cs_navi ul {height: 50px;}
    #contents .cs_navi .csn_sub {top: 50px;}
    #contents .cs_navi button {height: 50px; line-height: 50px; font-size: 14px; text-indent: 20px;}
    #contents .cs_navi .csn_sub a {height: 40px; line-height: 40px; font-size: 13px;}
    #contents .cs_navi .csn_sub li:hover span:before, #contents .cs_navi .csn_sub a:focus span:before, #contents .cs_navi .csn_sub li.on span:before {display: none;}
    #contents .cs_navi i {top: 37%;}
}

@media all and (max-width:480px){
    #contents .cs_navi {display: none;}
}