/* BASIC css start */
.headerHeight{height:104px;}
.header {position:fixed; top:0; left:0; width:100%; height:100px; background-color:#fff; border-top:rgba(249,63,68,1) 4px solid; overflow:hidden; transition:height .2s ease-in-out; z-index:500; box-shadow:0 2px 3px rgba(0,0,0,0); opacity:0.9;}
.header h1 {text-align:center; line-height:33px; }
.header h1 img {height:25px; vertical-align:middle; margin-top:5px; }
.header button {border:0; background:0; margin:0; padding:0; font-size:16px;}
.header .btn-menu {position:absolute; top:0; left:0; width:40px; height:40px; text-indent:-9999px; background:url(/design/bigjoy/renewal2017/m_bg_all_menu.png) no-repeat 50% 50%; background-size: 40%;}
.header .btn-search,
.header .btn-cart,
.header .btn-mypage {position:absolute; top:0; width:30px; height:40px; line-height:40px; transition:right .3s, opacity .05s;text-align:center; color:inherit; font-size:16px;}
.header .btn-search {/*left:40px;*/ line-height: 0; font-size: 14px;}
.header .btn-cart {right:30px; margin-top:2px;}
.header .btn-cart span{position:absolute; right: 1px; top:3px; font-size:10px; padding: 2px 4px; background:#f00; border-radius:7px; line-height:1; color:#fff;}
.header .btn-mypage {right:0;}

.top-menu {margin-bottom: 5px;}
.top-menu:after {content:''; display: block; clear:both;}
.top-menu li {position: relative; float:left; width: 25%;}
.top-menu li a {padding:10px 0; text-align: center; display:block; font-size: 14px;}

.left-menu { position: fixed; top: 0; left: 0; width: 85%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; z-index: 200; -webkit-transform: translate3D(-100%, 0px, 0px); transform: translate3D(-100%, 0px, 0px); transition: all .3s; z-index:2000; }
.left-menu.on { -webkit-transform: translate3D(0, 0px, 0px); transform: translate3D(0, 0px, 0px); }

.left-menu .left-top {background-color:#ebecee; padding:10px 5px; overflow:hidden;}
.left-menu .left-top p {font-size:14px; font-weight: 100; color: #333; float:left; letter-spacing: -0.025em;}
.left-menu .left-top p span {font-weight: 400;}
.left-menu .left-top a {float:right; margin-left: 5px; padding: 5px; border-radius: 3px; font-size:10px; height:20px; line-height: 1;}

.left-menu .hr {margin: 30px 30px 20px; border-top:1px solid #dbdbdb; text-align: center; height:0;}
.left-menu .hr.bottom {margin: 20px 20px 30px;}
.left-menu .hr i {position:relative; display:inline-block; background-color:#fff; padding:0 7px; top: -9px; font-size:14px; color:#bcbcbc;}

.left-menu .account {display:none; padding:20px 35px; font-weight:300; background:#fff;}
.left-menu .account li {position: relative;}
.left-menu .account li + li {border-top:1px solid #999;}
.left-menu .account li a {display:block; height:48px; line-height:48px; font-size:14px;}
.left-menu .account li .fa {margin-right:20px; vertical-align:middle;}

.left-menu .menu {position:relative; padding:0 20px; font-weight:100; overflow:hidden;}
.left-menu .menu li {position:relative;}
.left-menu .menu li + li {border-top:1px solid #efefef;}
.left-menu .menu > li {transition:margin .15s, opacity .2s;}
.left-menu .menu li > a {display:block; height:40px; line-height:40px; font-size:16px; color:#000; transition:margin .5s ease-in-out; padding-left:5px;}
.left-menu .menu li > a span {margin-right:5px;font-size:0.9em;}
.left-menu .menu li .btn-sub {position:absolute; top:0; right:5px; width:100%; height:40px; text-align:right; border:0; background:none; color:#bbb; font-size:12px; z-index:1;}
.left-menu .menu li .btn-sub .fa-minus-square-o {display:none;}
.left-menu .menu .sub-menu {width:100%; max-height:0; box-sizing:border-box; transition:max-height .3s ease-in-out; overflow:hidden;}
.left-menu .menu .sub-menu > div {margin-top:10px; position:relative; overflow: hidden; padding-left:5px;}
.left-menu .menu .sub-menu > div + div {padding-top:10px; border-top:1px solid #efefef;}
.left-menu .menu .sub-menu-title {color:#888; font:italic 12px/1 'Playfair Display'; margin-bottom:5px;}
.left-menu .menu .sub-menu li {float:left; width: 50%; margin:0; border:0; opacity:0; transition:opacity .3s ease-in-out;}
.left-menu .menu .sub-menu li a {height:28px; line-height:26px; font-size:11px;}

.left-menu .aside-menu {position:relative;transition:opacity .2s; overflow:hidden; border-top:1px solid #ddd;}
.left-menu .aside-menu li {float: left; width:33.3%;}
.left-menu .aside-menu li a {display: block; padding: 10px 0; font-size: 11px; border-bottom: 1px solid #ddd;border-left: 1px solid #ddd; text-align: center; color:#86001d;}
.left-menu .aside-menu li:nth-child(3n+1) a {border-left:0;}
.left-menu .aside-menu li a i {margin-right:3px;}
.left-menu .aside-menu li.btn-full {margin: 0 0 10px -48px; width:calc(100% + 96px); margin-left:-48px;}
.left-menu .aside-menu li.btn-full a {padding:0; border:0;}
.left-menu .aside-menu li.btn-full a img {width:100%;}

.left-menu .menu li.btn-yfl img {width:50px; margin-top:10px;}

.left-menu .left-banner {margin-top:10px; padding:0 20px;}
.left-menu .left-banner li {margin-top:10px;}
.left-menu .left-banner li img {display:block; width:100%;}

.btn-close-side {position:fixed; top:0; right:0; display:block; width:40px; height:40px; border:0; z-index:-1; opacity: 0; transition: opacity .5s, transform .5s; transform: rotate(180deg); line-height: 40px; text-align:center; border:0; background: transparent; color: #fff; font-size: 18px;}
.btn-close-side.on {z-index:2001; opacity: 1; transform: rotate(0deg);}
.btn-close-side.right.on {z-index:2001; left:0; right:auto; opacity: 1; transform: rotate(0deg);}
/*
.left-menu.menu-open {height:100%; overflow-y:auto;}
.left-menu.menu-open .btn-menu {background-image:url(/design/bigjoy/renewal2017/bg_all_menu_close.png); background-size:auto;}
.left-menu.menu-open .menu > li {opacity:1;}
.left-menu.menu-open .menu > li + li {margin-top:0;}
.left-menu.menu-open .menu > li.menu-item1 {transition-delay:.1s;}
.left-menu.menu-open .menu > li.menu-item2 {transition-delay:.15s;}
.left-menu.menu-open .menu > li.menu-item3 {transition-delay:.2s;}
.left-menu.menu-open .menu > li.menu-item4 {transition-delay:.25s;}
.left-menu.menu-open .menu > li.menu-item5 {transition-delay:.3s;}
.left-menu.menu-open .menu > li.menu-item6 {transition-delay:.35s;}
.left-menu.menu-open .menu > li.menu-item7 {transition-delay:.4s;}
.left-menu.menu-open .menu > li.menu-item8 {transition-delay:.45s;}
.left-menu.menu-open .menu > li.menu-item9 {transition-delay:.5s;}
.left-menu.menu-open .aside-menu {opacity:1; transition-delay:.6s;}
*/

.left-menu .menu .open-sub > a {background-color: #ececec;}
.left-menu .menu .open-sub .btn-sub .fa-minus-square-o {display:inline;}
.left-menu .menu .open-sub .btn-sub .fa-plus-square-o {display:none;}
.left-menu .menu .open-sub .sub-menu {max-height:1500px;}
.left-menu .menu .open-sub .sub-menu li {opacity:1;}
.left-menu .menu .open-sub .sub-menu li:nth-child(1) {transition-delay:.1s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(2) {transition-delay:.15s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(3) {transition-delay:.2s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(4) {transition-delay:.25s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(5) {transition-delay:.3s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(6) {transition-delay:.35s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(7) {transition-delay:.4s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(8) {transition-delay:.45s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(9) {transition-delay:.5s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(10) {transition-delay:.55s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(11) {transition-delay:.6s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(12) {transition-delay:.65s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(13) {transition-delay:.7s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(14) {transition-delay:.75s;}
.left-menu .menu .open-sub .sub-menu li:nth-child(15) {transition-delay:.8s;}


.left-menu .info {margin-top:30px; text-align:center; font-size:0; background:#000; padding:15px 0;}
.left-menu .info > div + div {margin-top:15px;}
.left-menu .info > div h2 {margin-bottom:10px; font-size:12px; font-weight:700; color:#c4c4c4;}
.left-menu .info > div h2.em {margin-bottom:15px; padding-bottom:10px; position:relative;}
.left-menu .info > div h2.em:after {content:''; position:absolute; bottom:0; left:50%; width:20px; margin-left:-10px; border-bottom:2px solid #ed1c24;}
.left-menu .info > div p {font-size:11px; line-height:1.4; color:#c9c9c9;}
.left-menu .info > div .telnum {margin-bottom:10px; font-size:18px; font-weight:700;}

.right-menu { position: fixed; top: 0; right: 0; width: 85%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; z-index: 200; -webkit-transform: translate3D(100%, 0px, 0px); transform: translate3D(100%, 0px, 0px); transition: all .3s; z-index:2000; }
.right-menu .container-box {padding-bottom:50px;}
.right-menu.on { -webkit-transform: translate3D(0, 0px, 0px); transform: translate3D(0, 0px, 0px); }
.right-menu .links { overflow:hidden;}
.right-menu .links li {float:left; width:50%;}
.right-menu .links li a {display: block; margin:2px; padding:10px 0; font-size: 12px; border: 1px solid #ddd; text-align: center;}
.rihgt-menu .links li a span {margin-right:5px;}

/*
.header.account-open {height:100%; overflow-y:auto; background:transparent;}
.header.account-open:after {content:''; display:block; position:absolute; top:55px; left:0; right:0; bottom:0; background:rgba(0,0,0,.5);}
.header.account-open .menu,
.header.account-open .aside-menu,
.header.account-open .info {display:none;}
.header.account-open .account {position:relative; display:block; z-index:1;}
*/

.search {position:relative; width:100%; /*display:none;*/ padding:5px 15px 15px 15px; z-index:100; box-sizing:border-box; box-shadow:0 2px 3px rgba(0,0,0,0.2);}
.search .MS_search_word {width:100%; border-color: #fff; /*background-color: #86001d; color: #fff;*/ border: 2px solid #ed1c24; border-radius: 7px; }
.search .btn-search {position:absolute; top:12px; right:15px; width:50px; height:40px; line-height:37px; font-size:16px; text-align:center; }

/* tooltip */
.tooltip { position: absolute; top:35px; left: 50%; margin-left:-35px; transition: all .2s; cursor: default; z-index:1;}

.tooltip span { position: relative; display: block; padding: 0 15px; padding-top: 9px; height: 36px; line-height: 14px; color: #fff; font-size: 12px; border-radius: 25px; background: #f1454e; white-space:nowrap; text-align:center;}
.tooltip span:after { content: ""; position: absolute; top: -5px; left: 50%; display: block; margin-left: -5px; border-bottom: 5px solid #f1454e; border-right: 5px solid transparent; border-left: 5px solid transparent; }

.tooltip.join span {background:#000;}
.tooltip.join span:after {border-bottom-color:#000;}

/* join animation */
@-webkit-keyframes joinAnimation{
 0% {
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 5%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg);
 }
 10%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 15%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg);
 }
 20%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 100%{
   -webkit-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
}

@-moz-keyframes joinAnimation{
 0% {
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 5%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg);
 }
 10%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 15%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg);
 }
 20%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 100%{
   -moz-transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
}

@keyframes joinAnimation{
 0% {
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 5%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(3deg) skewY(0deg);
 }
 10%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 15%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(-5px) skewX(-3deg) skewY(0deg);
 }
 20%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
 100%{
   transform: scale(1) rotate(0deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
 }
}

.top-menu .tooltip {
  -webkit-animation:joinAnimation 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation:joinAnimation 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;

  animation:joinAnimation 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.other-link{
  position:fixed;
  left:15px;
  bottom:15px;
  z-index:900;
}
.other-link button,
.other-link ul li {
  position:absolute;
  height:66px;
  height:45px;
  left:0;
  bottom:0
}
.other-link button{
  margin:0;
  padding:0;
  width:45px;
  height:45px;
  background-color: rgba(0, 0,0,0.55);
  color: #fff;
  z-index:1;
  transition: transform .5s;
  border:0;
  border-radius: 100%;
  box-shadow: 0 0 2px rgba(255,255,255,0.5);
}
.other-link button .fa {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height:45px;
    text-align: center;
    font-size: 20px;
    transition: opacity .3s;
}
.other-link button .fa-times{
    opacity:0
}
.other-link ul li{
  text-align:right;
  white-space:nowrap;
  opacity:0;
  -webkit-transition:opacity .1s,bottom .25s cubic-bezier(0,.58,.74,1.14);
  transition:opacity .1s,bottom .25s cubic-bezier(0,.58,.74,1.14);
  
  padding:5px 15px 5px 5px;
  background: rgba(0,0,0,0.8);
  border-radius:27px;
}
.other-link ul li a{
  color:#fff;
  font-size:12px
}
.other-link ul li .fa{
  display:inline-block;
  margin-right:12px;
  width:45px;
  max-width:45px;
  height: 45px;
  line-height: 45px;
  font-size: 20px;
  text-align: center;
  vertical-align:middle;
  color: #000;
  border-radius: 100%;
  background-color: #fff;
}
.other-link.on button {
    /*transform: rotate(180deg);*/
}
.other-link.on button .fa-commenting {
    opacity:0;
}
.other-link.on button .fa-times{
  opacity:1
}
.other-link.on ul li{
  opacity:1
}
.other-link.on ul .link1{
  bottom:425px;
}
.other-link.on ul .link2{
  bottom:365px;
  -webkit-transition-delay:.015s;
  transition-delay:.015s
}
.other-link.on ul .link3{
  bottom:305px;
  -webkit-transition-delay:.03s;
  transition-delay:.03s
}
.other-link.on ul .link4{
  bottom:245px;
  -webkit-transition-delay:.045s;
  transition-delay:.045s
}
.other-link.on ul .link5{
  bottom:185px;
  -webkit-transition-delay:.06s;
  transition-delay:.06s
}
.other-link.on ul .link6{
  bottom:125px;
  -webkit-transition-delay:.075s;
  transition-delay:.075s
}
.other-link.on ul .link7{
  bottom:65px;
  -webkit-transition-delay:.09s;
  transition-delay:.09s
}

.hidden { display: none; }
/* BASIC css end */