/** Menu_Position - 통합 스타일시트 **/
/** 기존 mp_black / mp_black1 / mp_gray / mp_white / mp_white1 5개 파일을 통합
 *  테마는 .Menu_Position 요소에 mp-black / mp-black1 / mp-gray / mp-white / mp-white1
 *  클래스를 붙여서 선택합니다. (position.html 참고)
 */

/* =========================================================
   공통 (모든 테마 공통 기본값)
   ========================================================= */
.Menu_Position { width:100%; overflow:hidden; padding:0; }
.Menu_Position .bclear { clear:both; }


/* =========================================================
   1. mp-black  (리본형 - 어두운 색)
   ========================================================= */
.Menu_Position.mp-black {
  display:inline-block; box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.35);
  border-radius:5px; counter-reset:flag; margin-bottom:5px;
  background:#666; background:linear-gradient(#666, #333);
}
.Menu_Position.mp-black a {
  text-decoration:none; outline:none; display:block; float:left;
  font-size:12px; line-height:30px; color:white; padding:0 10px 0 30px;
  background:#666; background:linear-gradient(#666, #333); position:relative;
}
.Menu_Position.mp-black a:first-child { padding-left:20px; border-radius:5px 0 0 5px; }
.Menu_Position.mp-black a:first-child:before { left:14px; }
.Menu_Position.mp-black a:last-child { border-radius:0 5px 5px 0; padding-right:20px; }
.Menu_Position.mp-black a.active,
.Menu_Position.mp-black a:hover { background:#333; background:linear-gradient(#333, #000); }
.Menu_Position.mp-black a.active:after,
.Menu_Position.mp-black a:hover:after { background:#333; background:linear-gradient(135deg, #333, #000); }
.Menu_Position.mp-black a:after {
  content:''; position:absolute; top:0; right:-10px; width:30px; height:30px;
  transform:scale(0.707) rotate(45deg); z-index:1;
  background:#666; background:linear-gradient(135deg, #666, #333);
  box-shadow:2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1);
  border-radius:0 5px 0 50px;
}
.Menu_Position.mp-black a:last-child:after { content:none; }


/* =========================================================
   2. mp-white  (리본형 - 흰색 / 기존 white.css + flat 클래스 통합)
   ========================================================= */
.Menu_Position.mp-white {
  display:inline-block; box-shadow:0 0 1px 1px rgba(0, 0, 0, 0.35);
  border-radius:5px; counter-reset:flag; margin:5px 0;
}
.Menu_Position.mp-white a {
  text-decoration:none; outline:none; display:block; float:left;
  font-size:12px; line-height:30px; padding:0 10px 0 30px; position:relative;
  transition:all 0.5s; background:white; color:black;
}
.Menu_Position.mp-white a:before { background:white; box-shadow:0 0 0 1px #ccc; left:14px; }
.Menu_Position.mp-white a:first-child { padding-left:20px; border-radius:5px 0 0 5px; }
.Menu_Position.mp-white a:last-child { border-radius:0 5px 5px 0; padding-right:20px; }
.Menu_Position.mp-white a:hover,
.Menu_Position.mp-white a.active,
.Menu_Position.mp-white a:hover:after,
.Menu_Position.mp-white a.active:after { background:#e7e7e7; }
.Menu_Position.mp-white a:after {
  content:''; position:absolute; top:0; right:-10px; width:30px; height:30px;
  transform:scale(0.707) rotate(45deg); z-index:1; background:white;
}
.Menu_Position.mp-white a:last-child:after { content:none; }


/* =========================================================
   3. mp-gray  (배경 이미지 + 구분선 이미지형)
   ========================================================= */
.Menu_Position.mp-gray {
  background-image:url(../img/bc_bg.png); background-repeat:repeat-x;
  height:30px; line-height:30px; color:#9b9b9b;
  border:solid 1px #cacaca; border-radius:5px; margin:5px 0;
}
.Menu_Position.mp-gray a {
  float:left; background:url(../img/bc_separator.png) no-repeat right top;
  font-size:12px; color:#454545; line-height:30px; height:30px;
  text-decoration:none; padding:0 20px 0 10px;
}
.Menu_Position.mp-gray a:hover { color:#35acc5; }
.Menu_Position.mp-gray i { color:#ff6600; }


/* =========================================================
   4. mp-black1  (리스트형 - 어두운 색)
   ========================================================= */
.Menu_Position.mp-black1 {
  background:#000000; height:30px; margin-bottom:5px; border:1px solid #8C8C8C;
}
.Menu_Position.mp-black1 ul { margin:0; padding:0; list-style:none; }
.Menu_Position.mp-black1 ul li {
  background:url(../img/menuPositionArrow.png) no-repeat right top;
  float:left; height:30px; padding:1px 20px 0 10px; text-decoration:none;
}
.Menu_Position.mp-black1 ul li a { font-size:12px; color:#c4c4c4; text-decoration:none; line-height:30px; }
.Menu_Position.mp-black1 ul li a:hover { color:#fff; }
.Menu_Position.mp-black1 ul li.home a {
  background:url() no-repeat left top; display:block; width:17px; height:32px;
}
.Menu_Position.mp-black1 ul li.home a:hover { background-position:left bottom; }
.Menu_Position.mp-black1 ul li.home a span { display:none; }


/* =========================================================
   5. mp-white1  (리스트형 - 흰색)
   ========================================================= */
.Menu_Position.mp-white1 {
  background:#ffffff; height:30px; margin-bottom:5px; border:1px solid #e5e5e5;
}
.Menu_Position.mp-white1 ul { margin:0; padding:0; list-style:none; }
.Menu_Position.mp-white1 ul li {
  background:url(../img/menuPositionArrow.png) no-repeat right top;
  float:left; height:30px; padding:1px 20px 0 10px; text-decoration:none;
}
.Menu_Position.mp-white1 ul li a { font-size:12px; color:#808080; text-decoration:none; line-height:30px; }
.Menu_Position.mp-white1 ul li a:hover { color:#000000; }
.Menu_Position.mp-white1 ul li.home a {
  background:url() no-repeat left 7px; display:block; width:17px; height:32px;
}
.Menu_Position.mp-white1 ul li.home a:hover { background-position:left 7px; }
.Menu_Position.mp-white1 ul li.home a span { display:none; }