@charset "utf-8";

.snb { max-width:300px; }
.basic-category { padding:0px; max-width:300px; letter-spacing:-0.015em;}
.basic-category a { display:block; }
.basic-category .ca-head { border:0; padding:8px 15px; font-size:17px; font-weight:400; letter-spacing:-1px; padding-right:1px; }
.basic-category .ca-sub1 { padding: 0px 30px; border-bottom:0px solid #ddd; background:#fff; color:#666 !important; height:62px; line-height: 62px; color:#fff; border-left:0px solid #ddd; border-right:0px solid #ddd; }
.basic-category .ca-sub1 > a { /*font-weight:400 !important; color: crimson !important;*/ font-size:17px; font-weight:400; color:#666; text-align: right; }
.basic-category .ca-sub1.on > a { color:#71ae22; font-weight:500; }
/*
.basic-category .ca-sub1 > a.no-sub::after { top: 0px; font-family: "FontAwesome"; float: right; position: relative; content: "\f105"; }
.basic-category .ca-sub1 > a.is-sub::after { top: 0px; font-family: "FontAwesome"; float: right; position: relative; content: "+"; }
*/
.basic-category .ca-sub2 { display:none; padding:0; margin:0; list-style:none; /*background: #fafafa; border-bottom:1px solid #ddd;*/  }
.basic-category .ca-sub2 li { padding:0px 25px; padding-right:20px; height:62px; line-height: 62px; border-bottom:0px solid #ddd; border-left:0px solid #ddd; border-right:0px solid #ddd; }
.basic-category .ca-sub2 li.on { background: transparent; }
.basic-category .ca-sub2 li:hover { background: transparent; height:36px; line-height: 36px; border-bottom:0px solid #ddd; font-weight:400 !important; color:#fff; }
.basic-category .ca-sub2 li a:hover { font-weight:400 !important; color: #666 !important; }
.basic-category .ca-sub2 li.on a { font-weight:400 !important; color: #666 !important; }
.basic-category .ca-sub2 li a{ text-align: right; padding-right: 48px; }
.basic-category .ca-line { padding:8px 15px; /*background:#fafafa;*/ border-bottom:0px solid #ddd; }

.basic-category .ca-sub3 { padding:0; margin:0; list-style:none; background: #fff; border-bottom:0px solid #ddd; border-left:0px solid #ddd; border-right:0px solid #ddd; }
.basic-category .ca-sub3 { padding:0px 25px; height:62px; line-height: 62px; border-bottom:1px solid #ddd; }

.basic-category .ca-sub3 a { font-weight:400; text-align: left; }
.basic-category .ca-sub3.on a { color:#71ae22; font-weight:500; }
.basic-category .ca-sub3 a { font-size:17px; font-weight:400; color:#666; }
.basic-category .ca-sub3:hover { /*background:#f5f5f5 !important;*/ color:#fff !important; }
.basic-category .ca-sub3 a:hover { color:#71ae22; }
.basic-category .ca-sub3.on { background: transparent; }
.basic-category .ca-sub3:first-child { /*margin-top:10px;*/ }
.basic-category .ca-sub3:last-child { /*margin-bottom:10px;*/ }
.basic-category > div:last-of-type { border-bottom:1px solid #ddd; }

.basic-category .new { color:crimson; }

.snb_customer { border:0px solid #ddd; margin-top:20px; padding:20px; box-sizing:border-box; }
.snb_customer h2 { font-size:18px; color:#282828; font-weight:400; margin:0; }
.snb_customer b { font-size:25px; color:#1561c3; font-weight:500; margin:15px 0 10px 0; display:block; }
.snb_customer p { font-size:14px; color:#777; font-weight:300; line-height:19px; margin:0; }

.basic-category .sub-plus { /*padding:0 5px 0 5px; font-size:25px; color:#666;*/ }

@media (max-width: 991px) {
.snb { max-width:100%; width:100%; }
.basic-category { max-width:100%; width:100%; }

}


#side-menu-bg { border-bottom: 2px solid #71ae22; height: 65px; }
#side-menu-bg span { font-weight:500; font-size:25px; color:#333; line-height:19px; padding-left:25px; }


.arrow {
  position: relative;
  display: inline-block;
  margin: 0px;
  padding: 4px;
  box-shadow: 2px -2px 0 0 #ddd inset;
}
.arrow--left {
  transform: rotate(45deg);
  left: 0px;
}
.arrow--right {
  transform: rotate(225deg);
  right: 0px;
}
.arrow--up {
  transform: rotate(135deg);
  top: 0px;
}
.arrow--down {
  transform: rotate(-45deg);
  bottom: 0px;
}

.basic-category .ca-sub3.on .arrow, .basic-category .ca-sub3 a:hover .arrow { box-shadow: 2px -2px 0 0 #71ae22 inset; }
