@charset "utf-8";

#sub_line_menu {opacity:0; width: 100%; border-bottom: 1px solid #dddddd;}

#scomm {}
#scomm ul, #scomm ul li, #scomm ul li a {
  margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; 
  display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

#scomm {
  margin:0 auto; padding:0;border:0px solid #ddd;position:relative; width: 100%; 
  /* 사이즈 수정 */
  max-width:600px; 
}

.menu_size_2 > ul > li { width:50%; }
.menu_size_3 > ul > li { width:33.333333%;}
.menu_size_4 > ul > li { width:25%;}
.menu_size_5 > ul > li { width:20%;}
.menu_size_6 > ul > li { width:16.666666%;}

#scomm > ul{ margin:0 auto;}
#scomm ul ul {display: none;}
.align-right {float: right;}
#scomm > ul:after{display:block; visibility:hidden; clear:both; content:""}
#scomm > ul > li { float:left; /* border-left:1px solid #dddddd */}
#scomm > ul > li:last-child{/* border-right:1px solid #dddddd */}
#scomm > ul > li > a { display:block; line-height:75px; text-align:center; cursor: pointer; z-index: 2; font-size: 16px; font-weight: 100; font-family: 'S-CoreDream-5Medium'; text-decoration: none; color: #7d7d7d; border:0px solid #ddd; margin-left:-0px; margin-top:-1px; letter-spacing:-1px;}
#scomm > ul > li > a:hover {color:#222;}
#scomm > ul > li.active > a,
#scomm > ul > li.open > a {display:block; color:#222; font-weight: 500;}
#scomm > ul > li.open > a::after{position:Absolute; bottom:0; left:0; content:""; display:block; width:100%; height:3px; background:#041a72; }
#scomm > ul > li.open > a {}
#scomm > ul > li:last-child > a,
#scomm > ul > li.last > a {}

.holder {width: 0; height: 0; position: absolute; top: 0; right: 0;}
.holder::after,
.holder::before {display: block; position: absolute; content: ""; width: 6px; height: 6px; right: 20px; z-index: 10; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}
.holder::after {top: 17px; border-top: 2px solid #888; border-left: 2px solid #888;}

#scomm > ul > li > a:hover > span::after,
#scomm > ul > li.active > a > span::after,
#scomm > ul > li.open > a > span::after {border-color: #888;}
.holder::before {top: 18px; border-top: 2px solid; border-left: 2px solid; border-top-color: inherit; border-left-color: inherit;}


@media(max-width:980px){

  #scomm > ul > li > a { line-height:60px;font-size: 16px;}

  }

@media(max-width:680px){
  #scomm > ul > li > a { line-height:40px;font-size: 12px;}
  .menu_size_2 > ul > li { width:50%;}

}