@charset "utf-8";

._fnctWrap{line-height: 1.4;}

  .down-banner2.row2 li {width: 50%;}



/* Menu 가로텍스트나열 Box */
.menu-box {border: 7px solid #eee;}
.menu-box ul {overflow: hidden; width: 100%; padding: 24px 20px; padding-right: 0; padding-bottom: 7px; background:#fff;}
.menu-box li {float: left;width: 25%;padding-bottom: 15px;padding-right: 30px;}
.menu-box a {position: relative; display: block; padding-left: 11px; font-size: 17px; color: #333;}
.menu-box a::before {content: ''; position: absolute; left: 0; top: 10px; width: 3px; height: 3px; background: #111; border-radius: 100%;}
.menu-box a::after {content: ''; position: absolute; right: 0; top: 0; width: 25px; height: 24px; background: url('/sites/templet_style_guide/images/common/arrow-menu-box.png') no-repeat center center;}
.menu-box .active a::after,
.menu-box a:hover::after {background: url('/sites/templet_style_guide/images/common/arrow-menu-box-ov.png') no-repeat center center;}
.menu-box .active a,
.menu-box a:hover {color: #4076b3;}
.menu-box a span {position: relative;}
.menu-box a span::after {content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: #4076b3; transition: width .75s;}
.menu-box a:hover span::after {width: 100%;}

@media all and (max-width: 1385px) {
  .menu-box li {width: 20%;}
}

@media all and (max-width: 1210px) {
  .menu-box li {width: 25%;}
}

@media all and (max-width: 1045px) {
  .menu-box li {width: 33.333%;}
}

@media all and (max-width: 810px) {
  .menu-box li {width: 50%;}
}

@media all and (max-width: 590px) {
  .menu-box li {width: 100%;}
}

@media all and (max-width: 500px) {
  .menu-box a {font-size: 15px;}
}