/* BASIC css start */
/******************************************************* 오른쪽 슬라이드이미지 CSS *******************************************************/
.slideshow-wrapper  { margin:0 auto;position:relative;width:180px;height:200px; } /* overflow:hidden; */
.slideshow-wrapper .vi {  float:left;position:absolute;width:180px;height:200px; z-index:1;opacity:0;filter:alpha(opacity=0);}
.slideshow-wrapper .vi:first {  float:left;position:absolute;width:180px;height:420px; z-index:1;opacity:1;filter:alpha(opacity=100);}

.slideshow-wrapper .bak {  float:left;position:absolute;width:180px;height:200px;display:none; }

.slideshow-wrapper .btn {float:left; position:absolute; width:auto; width:75px;z-index:30; left:70px; bottom:10px;}
.slideshow-wrapper .btn .btnbox { float:left; position:relative; width:100px; height:10px; }
.slideshow-wrapper .btn .btnbox .bull { float:left; position:relative; width:7px;height:7px; background:url(/design/judri/dj_skin/mainbtn_off.png) 0 0 repeat-x; 
margin-left:0px;cursor:pointer; margin-right:9px; }
.slideshow-wrapper .btn .btnbox .bull.active {float:left;position: relative; width:7px; height:7px; 
background:url(/design/judri/dj_skin/mainbtn_on.png) 0 0 no-repeat;}


/******************************************************* 오른쪽 고정메뉴 CSS *******************************************************/
#scroll-right {position: fixed; z-index: 8;  top: 45px; right:-220px; background: #fff; height: 100%; max-height: 100%;  width: 220px; 
padding: 20px 20px 20px 20px;  border-left: solid 1px #e6e6e6; font-family: 'Noto Sans JP', sans-serif; }
#scroll-right a {font-family: 'Noto Sans JP', sans-serif; }
#side-menu-wrap {  }


.side-menu .div-wrap {display: block; margin-bottom: 35px; clear:both; }
.side-menu .div-wrap01 {display: block; margin-bottom: 20px; clear:both; }
.side-menu .board-btn a {display: block;color: #333; font-size: 12px;font-family:'AppleGothic', 'Rubik', sans-serif ; letter-spacing:1px; font-weight: 300;}


.side-menu .div-wrap .div-board1 { transition: opacity .25s ease; margin-bottom:7px; height:28px; width: 100%;  text-align:center;  display:block; }

.side-menu .div-wrap .div-board1 li { width:48%; height:28px; line-height:28px;background: rgba(0,0,0, 0.9);}
.side-menu .div-wrap .div-board1 li:first-child { float:left;}
.side-menu .div-wrap .div-board1 li:last-child {float:right;}
.side-menu .div-wrap .div-board1 li:hover { background: rgba(0,0,0, 0.6);}
.side-menu .div-wrap .div-board1 li a {padding:0px 0 0 0;text-decoration:none; color:#fff; font-weight:400; font-size: 11px; font-family:'AppleGothic', 'Rubik', sans-serif ; letter-spacing:0px; }

.side-menu .div-wrap .div-board2 { background: #fff; margin-bottom:7px;  border:1px solid #ddd; height:30px; width: 100%;  text-align:center; }
.side-menu .div-wrap .div-board2 a { text-decoration:none; color:#333; font-weight:400; font-size: 11px; font-family:'AppleGothic', 'Rubik', sans-serif ; letter-spacing:0px; display: block; padding:5px 0 0 0;}
.side-menu .div-wrap .div-board2:hover { background: #f7f7f7; }

.side-menu .div-wrap .div-sns { display:table; margin:auto; }
.side-menu .div-wrap .div-sns a { text-decoration:none; }
.side-menu .div-wrap .div-sns  .sns { padding:3px; border:1px solid #333; background:#333; border-radius:50px; display:block; }
.side-menu .div-wrap .div-sns  .div-sns01,
.side-menu .div-wrap .div-sns  .div-sns02,
.side-menu .div-wrap .div-sns  .div-sns03,
.side-menu .div-wrap .div-sns  .div-sns04, 
.side-menu .div-wrap .div-sns  .div-sns05 { float:left; text-align:center; margin:0 4px;}
.side-menu .div-wrap .div-sns  .div-sns01:hover {border:1px solid #597ece; background:#597ece;}
.side-menu .div-wrap .div-sns  .div-sns02:hover {border:1px solid #efcf9e; background:#efcf9e;}
.side-menu .div-wrap .div-sns  .div-sns03:hover {border:1px solid #80c269; background:#80c269;}
.side-menu .div-wrap .div-sns  .div-sns04:hover {border:1px solid #b7aa00; background:#b7aa00;}
.side-menu .div-wrap .div-sns  .div-sns05:hover {border:1px solid #fcbcd8; background:#fcbcd8;}


.side-menu .tit{color: #333; font-size: 11px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: solid 1px #e9e9e9; font-family:'AppleGothic', 'Rubik', sans-serif ; letter-spacing:0px;font-weight: 500;  }
.side-menu .side-cs-center .tel{font-weight: 500; font-size: 16px; color: #000; padding-bottom: 7px; letter-spacing:2px;}
.side-menu .side-cs-center .cont{line-height:16px; font-size: 11px; color: #999; font-weight: 300;letter-spacing:1px;}
.side-menu .side-bank-info .cont{line-height: 20px; font-size: 11px; color: #999;font-weight: 400;letter-spacing:1px;}

#side-menu-wrap .right-btn { position: absolute; top:250px; right: 220px;margin-top: 0px; }


#side-menu-wrap .right-btn .right-btn01 { width: 40px; height: 40px; margin-top: 0px; cursor: pointer; border: solid 1px #e6e6e6; border-right:1px solid #fff; background: #fff; display: inline-block; padding:10px; } 
#side-menu-wrap .right-btn .right-btn01 .fa{ transform: rotate(0deg); }
#side-menu-wrap .right-btn .right-btn01 .fa.rotate{ transform: rotate(180deg); }

#side-menu-wrap .right-btn img {width:18px; }
#side-menu-wrap .right-btn img:hover { background:#fff;}


/* 사이드 메뉴(마우스오버) */
.right-btn02 { position:absolute; right:0px;  top:40px;}
.right-btn02 .ricon { border:1px solid #e6e6e6; border-right:0px;list-style:none;height:40px;padding:0px;width:40px;margin-top:-1px; background:#fff; display: block; }
.right-btn02 span { width:0;right:45px; top:8px;padding:0;position:absolute;overflow:hidden;font-size:0px;white-space:nowrap;
	-webkit-transition: 0.15s;
	-moz-transition: 0.15s;
	transition: 0.15s;}
.right-btn02 a {height:40px;width:40px;display:block;position:relative;}

/* General hover styles */
.right-btn02 a.hover{ opacity: 0.2;}
.right-btn02 a:hover span{ padding:0px 5px 0 5px;background:#444; color:#fff; overflow:visible; width:70px ; height:25px; line-height:23px; border:1px soolid #fff; 
    border-radius:5px; text-align:center; font-size:11px; font-family: 'AppleGothic', sans-serif; font-weight:400; margin:0px 0px 0px 0; letter-spacing:-1px; }

.ricon > a .count,
.ricon > a .count b { position:relative; display:inline-block; background:#222; border:1px soolid #222; border-radius:50%; width:12px; height:12px; }
.ricon > a .count { left:25px; top:8px; text-align:center; vertical-align:middle; }
.ricon > a .count b {  font-weight:normal; color:#fff; font-family: 'tahoma', sans-serif; font-size:8px; height:12px;line-height:12px; text-align:center; }

/* 페이스북 */
.right-btn02 .face {background:url('/design/judri/dj_skin/icon/facebook.svg') no-repeat center center;  background-size:18px 18px; opacity:0.7;   }
.right-btn02 .face:hover {background:url('/design/judri/dj_skin/icon/facebook.svg?size=18&color=222222') no-repeat center center;  background-size:18px 18px;  opacity:0.9;   display:inline-block; }
/* 인스타그램*/
.right-btn02 .insta{background:url('/design/judri/dj_skin/icon/instagram.svg') no-repeat center center;  background-size:18px 18px; opacity:0.7;  }
.right-btn02 .insta:hover {background:url('/design/judri/dj_skin/icon/instagram.svg?size=18&color=222222') no-repeat center center;  background-size:18px 18px;  opacity:0.9;  display:inline-block;}
/* 즐겨찾기*/
.right-btn02 .add{background:url('/design/judri/dj_skin/icon/heartbeat.svg') no-repeat center center;background-size:18px 18px; opacity:0.7;  }
.right-btn02 .add:hover {background:url('/design/judri/dj_skin/icon/heartbeat.svg?size=18&color=222222') no-repeat center center;  background-size:18px 18px;  opacity:0.9; display:inline-block;}
/* 장바구니*/
.right-btn02 .cart{background:url('/design/judri/dj_skin/icon/cart-plus.svg') no-repeat center center; background-size:18px 18px; opacity:0.7; }
.right-btn02 .cart:hover {background:url('/design/judri/dj_skin/icon/cart-plus.svg?size=18&color=222222') no-repeat center center;  background-size:18px 18px;  opacity:0.9; display:inline-block;}
/* 배송조회 */
.right-btn02 .truck{background:url('/design/judri/dj_skin/icon/truck.svg') no-repeat center center; background-size:18px 18px; opacity:0.7; }
.right-btn02 .truck:hover {background:url('/design/judri/dj_skin/icon/truck.svg') no-repeat center center; background-size:18px 18px;  opacity:0.9;  display:inline-block;}
/* 카카오톡 */
.right-btn02 .talk {background:url('/design/judri/dj_skin/ka_bn.png') no-repeat center center; }

/* 네이버톡톡 */
.right-btn02 .ntalk {background:url('/design/judri/dj_skin/ntalk_bn.png') no-repeat center center; }

/* 위로 */
.right-btn02 .up {background:url('/design/judri/dj_skin/icon/angle-up.svg') no-repeat center center;background-size:18px 18px; opacity:0.7;  }
.right-btn02 .up:hover  {background:url('/design/judri/dj_skin/icon/angle-up.svg') no-repeat center center; background-size:18px 18px;  opacity:0.9; display:inline-block;}
/* 아래로 */
.right-btn02 .down {background:url('/design/judri/dj_skin/icon/angle-down.svg') no-repeat center center; background-size:18px 18px; opacity:0.7; }
.right-btn02 .down:hover  {background:url('/design/judri/dj_skin/icon/angle-down.svg') no-repeat center center; background-size:18px 18px;  opacity:0.9; display:inline-block;}




/* BASIC css end */