/* BASIC css start */
/* ===== 패널기본소스 ===== */

.side-r-box {width:215px; position:fixed; top:0px; right:-215px; z-index:999999; height:100%; background:#fff; border-left:1px solid #eee;  }
.side-r-box .r_quick_inner { width:215px; position:relative; z-index:2; height:100%; }
.side-r-box .r_quick_inner .r_box { margin:0 auto; width:180px; }
.side-r-box .r_quick_inner .r_box .line { width:100%; height:1px ;  background:rgba(0,0,0,0.7); }

.door_toggle { position: absolute;  top: 50%;  left: -31px;  border-radius: 0%; -webkit-border-radius: 0%;  margin-top: -50px;  cursor: pointer;}

.side-r-box .hamburger { text-align:center;  background:#333 ; padding:5px 5px 0px 5px; width: 20px; height: 28px;  border-bottom:1px solid #eee }
.side-r-box .hamburger .hamburger-box {  width: 40px; height: 24px;  display: inline-block; position: relative;   }
.side-r-box .hamburger .hamburger-inner { display: block;top: 50%;  margin-top: -2px; }
.side-r-box .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{ position: absolute; background:#fff !important; width:20px !important; height:2px!important;/* 두께 */  border-radius: 4px; position: absolute;  transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease; }

.side-r-box .hamburger:hover { opacity: 0.7; }
.side-r-box .hamburger-inner::before, .hamburger-inner::after {  content: "";  display: block; }
.side-r-box .hamburger-inner::before { top: -5px; }
.side-r-box .hamburger-inner::after { bottom: -5px; }

.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }


/* ===== 아이콘  ===== */
.side-r-box .r_quick_inner .scroll {width:215px; height:100%; } /* 스크롤박스 */
.side-r-box .r_icon { display:block; text-align:center;  width: 30px;  height: 30px; background:#D6D6D6;  border-radius: 0%; -webkit-border-radius: 0%; border-bottom:1px solid #fff }
.side-r-box .r_icon i { padding:0px !important; width:15px !important; color:#fff; line-height:30px;}
.side-r-box .r_icon:hover i{color:#333;}


#scroll_box {overflow-y: auto; overflow-x:hidden;}


/* ===== SNS  ===== */

.side-r-box .r_quick_inner .r_box .r_sns {margin-top:50px; text-align:center; }
.side-r-box .r_quick_inner .r_box .r_sns span { display:inline-block; _display:inline; *display:inline; text-align:center; padding:5px  }
.side-r-box .r_quick_inner .r_box .r_sns span i { color:#333 ; font-size:18px; }
.side-r-box .r_quick_inner .r_box .r_sns span:hover i { color:#999 ;  }


/* ===== 사각박스메뉴 ===== */

.side-r-box .r_quick_inner .r_box .r_board_box {width:180px;margin-top:40px;  } 
.side-r-box .r_quick_inner .r_box .r_board_box ul {}
.side-r-box .r_quick_inner .r_box .r_board_box li { display:inline-block; _display:inline; *display:inline;  }
.side-r-box .r_quick_inner .r_box .r_board_box li a {display:block;  color:#78787a; width:88px; padding:5px; margin-bottom:2px;box-sizing:border-box;border:1px solid #bbb;background: none repeat scroll 0% 0% #fff;text-align:center;font-size:11px; letter-spacing: 0px; -webkit-transition:all 0.35s ease;-khtml-transition:all 0.35s ease;-moz-transition:all 0.35s ease;-ms-transition:all 0.35s ease;-o-transition:all 0.35s ease;transition:all 0.35s ease;}
.side-r-box .r_quick_inner .r_box .r_board_box li a:hover {color:#fff; background: none repeat scroll 0% 0% #000;border:1px solid #000; }


/* ===== 슬라이드 ===== */


.pslide-box {width:180px; text-align:center; padding:20px 0 30px}


/* ===== 고객센터 ===== */


.new { width:100%; border:1px solid #bbb; text-align:center; padding:5px 0; margin-top:10px }
.new p { color:#78787a;   line-height:2em ;  }
.new p.bold { font-weight: bold; color:#000;   }


.side-r-box .r_quick_inner .r_box .r_call { }
.side-r-box .r_quick_inner .r_box .r_call .tit {  }  
.side-r-box .r_quick_inner .r_box .r_call .tel { font-size:12px;  font-weight: bold; }  
.side-r-box .r_quick_inner .r_box .r_call .line { width:10px;height:1px; margin:10px 0; }
.side-r-box .r_quick_inner .r_box .r_call p { font-size:10px;   }


/* ===== 뱅크센터 ===== */

.side-r-box .r_quick_inner .r_box .r_bank { }
.side-r-box .r_quick_inner .r_box .r_bank .tit {  }  
.side-r-box .r_quick_inner .r_box .r_bank .line { width:10px;height:1px; margin:10px 0; }
.side-r-box .r_quick_inner .r_box .r_bank p { font-size:11px;   }


/* ===== 업다운메뉴  ===== */

.quick-up{ position:fixed; bottom:55px; width:40px; height:30px; /* background:#fff; border:1px solid #fff; */ right:0px; cursor:pointer;  z-index:99999;  text-align:center;  }
.quick-up i { color:#999; font-size:20px;line-height:30px ; }
.quick-up:hover i {color:#000;  }
.quick-down {position:fixed; bottom:20px;  width:40px; height:30px;/* background:#fff; border:1px solid #fff;  */ right:0px; cursor:pointer;  z-index:99999;  text-align:center; }
.quick-down i { color:#999; font-size:20px;  line-height:30px ;  }
.quick-down:hover i {color:#000;  }


/* ===== 오늘본상품  ===== */

.vtit { width:180px; text-align:center; margin:0 auto;padding:5px 0px; border-top:0px solid #d5d5d5; border-bottom:0px solid #d5d5d5; margin-bottom:0px; font-size:11px;font-weight:700; color:#333;  }


#viewArea { position:relative;width:120px;height:120px;overflow:hidden;left:0px; margin:0 auto;}
#viewArea .btn_prev{ position:absolute;top:35px;left:0px;}
#viewArea .btn_next{position:absolute; top:35px;right:0px;}


#viewArea #aaaa { width:140px; margin:0 auto;  position:relative; }
#viewArea #imgList { position:absolute;width:1000px;left:0px;top:0px;border:0px solid #000}
#viewArea #imgList div{ float:left;width:120px;}
#viewArea #imgList div img{width:120px;height:auto;}


/* BASIC css end */