/* reset CSS */
* { margin: 0; padding: 0; }
ul { list-style: none; }
a { text-decoration: none; }

#gnb {
    width: 25%;
    line-height: 36px;
    border: 1px solid #669;
    border-radius: 3px;
}

#gnb a {
    display: block;
    background: #99f;
    text-align: center;
    color: #333;
}

#gnb>.main-menu>.main-list>a {
    color: #eee;
}

/* .sub-list 가리기 */
#gnb>.main-menu>.main-list>.sub-menu a {
    background-color: #fffab1;
    height: 0;
    opacity: 0;
    transition: all 0.3s ease-out;
}

#gnb>.main-menu>.main-list>.sub-menu a:hover {
    background-color: #99f;
}

/* .main-list에 마우스를 올리면 .sub-list 보여주기 */
#gnb>.main-menu>.main-list:hover>a+.sub-menu a {
    height: 36px;
    opacity: 1;
}