@charset "UTF-8";

@media screen and (max-width: 767px) {
    #gnb {display: none;}
    .lang{display: none;}
    .blue:active {border: 2px solid #037eff; color: #037eff; background-color: #fff; font-weight: 700; transition: 0.3s;}
    .dark-blue:active {border:2px solid #2457a8; color: #2457a8; background-color: #fff; font-weight: 700;  transition: 0.3s;}
    .black:active {border: 2px solid #000; color: #000; background-color: #fff; font-weight: 700;  transition: 0.3s;}
    .wine:active {border: 2px solid #bc3031; color: #bc3031; background-color: #fff; font-weight: 700;  transition: 0.3s;}
    .red:active {border: 2px solid #e60012; color: #e60012; background-color: #fff; font-weight: 700;  transition: 0.3s;}
    .kok:active {border: 2px solid #FE6D00; color: #FE6D00; background-color: #fff; font-weight: 700; transition: 0.3s;}


}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    #gnb {display: none;}
    .lang{display: none;}
}
@media screen and (min-width: 1280px) {
    #m-gnb {display: none !important;}
    .m-gnb-label {display: none;}
    .logo {padding: 30px 0;}
    .logo img{width: 100%;}
    #gnb{position: absolute; top: -20px; left: 10%; display: block; z-index: 1;}
    .depth1 {float: left; font-size: 0.9em; padding-left: 180px;}
    .lang {position: absolute; top: 40px; right: 2%; z-index: 1;}
    .lang a:hover {color: #027eff; transition: 0.3s;}
    .lang a {color: #fff;}
    #footer {position: relative;}
    .footer-wrap {height: 380px;}
    .ft-logo {text-align: left; padding: 45px 0;}
    .ft-logo-txt {position: absolute; display: block; top: 55px; left: 445px; font-size: 0.9em;}
    .ft-sns {position: absolute; top: 15px; right: 195px;}
    .ft-info dt{padding: 0;}
    .ft-info dd{padding: 0;}
    .ft-info {line-height: 24px;}
}
@media screen and (min-width: 1650px) {
    #gnb{left: 20%;}
    .lang {right: 10%;}
}