@charset "UTF-8";
    
        /* header.css */
        
        .hd { width: 100%; height:122px; position:absolute; top: 0; left: 0; z-index:91; }
        .hd_wrap { width: 1200px; margin: 0 auto; }
        .logo { display:block; width: 144px; height: auto; float:left; margin:30px 0px; }
        .logo img { display:block; width: 100%; height: auto; }
        .tnb { float:right; margin: 30px 0px; }
        .tnb a { padding: 1.5em; font-size:12px; color: deepskyblue; }
        .tnb a:hover { color:red; font-weight:700; text-decoration: underline; text-decoration-style:dotted; }
        /* 방법1 : logo/tnb/gnb 한 줄로 배치 */
        /* .gnb { float:left;  width: 704px; margin-left: 50px; margin-top: 16px; } */
        /* 방법2 : gnb만 밑으로 내릴 경우 */
        .gnb { clear:both; width: 100%; }
        /* clear-fix 처리 */
        .gnb:after { content:""; display:block; clear:both; } 
        .gnb > ul:after { content:""; display:block; clear:both; }
        .gnb > ul > li { float:left; width: 20%; height:40px; line-height: 40px; position:relative; }
        .gnb .dp1 { display:block; color:#fff; text-align: center; background-color:#333; font-size:16px; }
        .gnb li:hover .dp1 { color:#fff; background-color:#333; color: red;}
        .gnb .sub { display:none; width: 100%; height:auto; position:absolute; top:40px; background-color:#333; left: 0; z-index:1000; height: 94px; }
        .gnb:hover li .sub { display:block;  }
        .gnb li .sub li { clear:both; height: 30px; line-height: 30px;}
        .gnb li .sub li a { background-color:#333; color:#fff; font-size:14px; display:block; text-indent:2em; overflow: hidden; white-space:nowrap; text-overflow: ellipsis; }
        .gnb li .sub li:hover a { color:red; }
        .content { clear: both; width: 100%; }
        .vs { clear:both; width: 100%; height:100vh; overflow:hidden; }
        .vdo { display:block; width:100%; height:auto; }