@charset "utf-8";
/* CSS Document */

#header{ margin-bottom:30px; }
#header #nav-top .nav-main{ width:auto; }
#header .mobile-download{ display:none; }
#header #logo{ padding:20px 0; }
#header #nav-top .nav-main a{ margin:0 5px; }
#header #nav-top .nav-sign{ position:static; margin:10px 0; }

#footer .wrap .mobile-download{ display:block; width:157px; margin:0 auto 40px; }
#footer .wrap .mobile-download img{ width:100%; }

#homepage .wrap{
  width:100%;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

#favorite .introduce{ width:80%; padding-left:5%; padding-right:5%; }
#favorite-list ul li .name{ font-size:16px; }
#favorite .topic a{ font-size:16px; }

#slider .flexslider .slides > li .desc .inner h3{ font-size:30px; }
#slider .flexslider .slides > li .desc .inner p{ font-size:14px; }

.explore{ width:85%; margin:30px auto; }
.explore h2, #posts .explore h2{ font-size:20px; }
.explore ul li{ width:25%; margin-left:12.5%; }
.explore ul li .photo{ width:100%; margin-bottom:10px; }
.explore ul li .right{ width:100%; }

.banner{ width:85%; }
#homepage .banner{ margin:40px auto; }

.box-preview{ display:block; padding-top:50px; }
.box-preview .left, .box-preview .right{ display:block; width:100%; }
.box-preview .left:after{ content:'.'; clear:both; display:block; height:0; visibility:hidden; }
/*.box-preview .left .nav{ top:-50px; background:none; }
.box-preview .left .nav:after{ content:'.'; clear:both; display:block; height:0; visibility:hidden; }
.box-preview .left .nav h1{ display:inline-block; }
.box-preview .left .nav h2{ display:inline-block; margin-left:10px; }
.box-preview .left .nav ul{ float:right; width:50%; text-align:right; }
.box-preview .left .nav ul li{ float:none; display:inline-block; }*/
.box-preview .left img{ float:left; width:50%; }
.box-preview .left a.desc{ left:50%; width:50%; height:100%; opacity:1; background:#000; text-align:center; }
.box-preview .left a.desc div{ color:#FFF; }
.box-preview .left a.desc p{ color:#FFF; }
.box-preview .right ul li{ width:50%; }
.box-preview .right ul li .inner{ padding:0; }
.box-preview .right a.desc{ top:70%; height:30%; opacity:1; }
.box-preview .right a.desc i{ display:none; }

#footer .wrap{ width:90%; }
#footer .col{ width:32%; }

#popular{ margin:40px 0 0; }
#popular .wrap{ width:100%; }
#popular ul{ margin:0; }
#popular ul li{ width:33.33%; }
#popular .go-top{ right:10%; width:80%; padding:10px 0; text-align:center; }
#hilight h1{ font-size:20px; }

.posts-list ul li{ width:50%; }

#product-detail .back{ top:-24px; }
#product-detail .back a img{ width:55px; }
#product-detail .left{ width:60%; }
#product-detail .left #gallery img{ width:80px; }
#product-detail .right .button a{ width:100%; margin:0 0 7px; }

#posts-detail .back{ top:-24px; }
#posts-detail .back a img{ width:55px; }
#posts-detail .content .heading{ padding:40px 0; }
#posts-detail .content .detail h2, #posts-detail .content .detail h2 span{ font-size:26px; }
#posts-detail .content .detail{ font-size:20px; padding:40px 0 0; }

#posts-detail .content .detail table.twocolumn,
#posts-detail .content .detail table.twocolumn tbody,
#posts-detail .content .detail table.twocolumn tbody tr,
#posts-detail .content .detail table.twocolumn tbody tr td{ display:block; width:100%; }
#posts-detail .content .detail table.twocolumn tbody tr td{ margin-bottom:15px; }
#posts-detail .content .detail table.twocolumn tbody tr td:nth-child(2){ margin:0; }
#posts-detail .content .detail p{ padding:0; }
#posts-detail .content .detail table.twocolumn tbody tr td p{ }

#posts-detail .content .detail table.threecolumn,
#posts-detail .content .detail table.threecolumn tbody,
#posts-detail .content .detail table.threecolumn tbody tr,
#posts-detail .content .detail table.threecolumn tbody tr td{ display:block; width:100%; }
#posts-detail .content .detail table.threecolumn tbody tr td{ margin-bottom:15px; }
#posts-detail .content .detail table.threecolumn tbody tr td:nth-child(3){ margin:0; }

#posts-detail .content .credit{ margin:20px 0 0; }

#posts-detail .shop ul li{ width:48%; }
#posts-detail .shop ul li:nth-child(even){ margin-left:2%; }
#posts-detail .shop ul li .photo{ float: left; width: 50%; margin-bottom:0; }
#posts-detail .shop ul li .name{ padding-top:10px; }
#posts-detail .shop ul li .name, #posts-detail .shop ul li .desc, #posts-detail .shop ul li .price{ float:right; width:45%; }

#hilight h1{ font-size:18px; }
#hilight ul{ margin:20px 0 0; }
#hilight ul li{ width:50%; }
#hilight ul li .name, #hilight ul li p{ padding:0 5px 0 10px; }

#product .explore{ margin:10px auto 30px; padding:40px 6%; width:88%; }
#product .explore ul li{ width:30%; margin-left:5%; }
#product .explore ul li:first-child{ margin:0; }

#product .category{ margin:30px 0 0; }
#product .category .nav{ display:none; }
#product .category .list{ width:100%; }

#product .recent .content{ padding:20px 0; }
#product .recent .content ul li{ width:33.33%; margin:0 0 20px; }
#product .recent .content ul li .name{ display:block; height:20px; overflow:hidden; }
#product .recent .content ul li .desc{ height:16px; overflow:hidden; }

#newin{ margin:0; }
#newin .wrap{ width:100%; }
#newin .nav{ float:none; width:100%; background:#FFF; }
#newin .nav .menu-mobile{ display:block; }
#newin .nav .menu-mobile h5{ font:500 14px 'sweet_sansbold'; cursor:pointer; }
#newin .nav .inner{ width:90%; margin:0 auto 10px; }
#newin .nav h2{ font:500 14px 'sweet_sansbold'; margin:15px 0 10px; }
#newin .nav ul li, #newin .nav ul li:first-child{ border:none; }
#newin .nav ul{ margin-left:30px; }
#newin .nav .contain{ display:none; border-top:1px #CCC solid; margin:10px 0 20px; }
#newin .list{ float:none; width:90%; margin:5px auto 0; }
#newin .nav .menu-expand{ margin-bottom:20px; }
#newin .filter{
    position: static;
    width: 100%;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    padding: 0 15px;
    margin-bottom: 20px;
}
/*#newin .nav .menu-expand .menu-mobile{ padding:10px 0 10px; margin-bottom:15px; border-bottom:1px #CCC solid; }*/

#download .box,
#download .box .left,
#download .box .right{ display:block; width:100%; }
#download .box .right{ margin-top:40px; }
#download .box .left{ position:relative; }
#download .box .left .logo{ position:absolute; left:0; top:0; width:80px; }
#download .box .left h1{ display:block; height:65px; padding:15px 0 0 100px; font-size:20px; margin:0; }
#download .box .left p{ margin:20px 0 0; }
#download .box .left .link{ margin:20px 0 0; text-align:center; }
#download .box .left .link a{ width:100px; margin:0 5px; }

#floor .box .info .row{ width:45%; margin:0 2.5% 20px; }
#floor .box .info .inner { padding: 20px 30px; }
#floor .location .info{ float:left; width:100%; margin-bottom:20px; }
#floor .location .info h1, #floor .location .info h2{ font-size:18px; margin-bottom:20px; }
#floor .location .info h2 br{ display:none; }
#floor .location .info p{ margin-bottom:20px; }
#floor .location .absolute{ width:40%; }
#floor .location .map{ float:right; width:50%; margin:0; }

#playtheme{ margin:0 auto 40px; }
#playtheme .keyvisual{ margin-bottom: 30px;}
#playtheme h2.name{ margin:0 0 15px;}
#playtheme h1.name{ margin:30px 0 0; padding: 15px 0; }
#playtheme #promotion{ margin:30px auto; width:100%; }
#playtheme .box-preview{ padding-top: 0; }
#playtheme-landing .banner{ margin:40px auto; width:100%;}

.box-playtheme{ display: block; }
.box-playtheme .large{ width:100%; display:block; }
.box-playtheme .large .name{ font-size: 14px }
.box-playtheme .thumb{ display: table; margin:1px 0 0; width:100%; }
.box-playtheme .thumb .row{ display:table-cell; vertical-align: top; width:50%; padding: 0; }
.box-playtheme .thumb .above{ padding-right:0.5%; }
.box-playtheme .thumb .below{ padding-left:0.5%; }
#homepage .banner{ margin:40px auto; }


main .back-to-happening{ top:-24px; }
main .back-to-happening a img{ width:55px; }

#privacy #policy{ width:100%; }
#privacy #experiment{ width: 100%; margin:40px 0; text-align: left; }

#happening-gallery #slider ul li img{ width: 100%; }

#signin{
  width: 100%;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
#signin #login{
  float: none;
  width: 100%;
  padding-right: 0;
  padding: 0 10px;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
#signin #register{
  float: none;
  width: 100%;
  margin-top: 30px;
  border-top: 1px #CCC solid;
  border-left: 0;
  padding: 20px 10px 0;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}
#signin .wrap{
  /*width: 100%;
  min-width: auto;*/
}

#signin p input[type=text], #signin p input[type=password]{
  width: auto;
}

#header #search-field .close{
  top: auto;
  bottom: 10px;
  right: 10px;
}
#header #search-field .searchform .result{
  display: none;
}

#body-happening > .wrapper{
  position: static;
}


/*menu-mobile*/
body{
  padding-top: 90px !important;
}
body.disable-scroll{
  position: fixed;
}
#nav-top,#nav-bottom,#logo{
  display: none;
}
#header{
  position: fixed; top: 0;
  width: 100%;
  z-index: 999;
  background-color: transparent;
  text-align: center;
}
#header .mobile-header{
  display: block !important;
  position: absolute; left: 0; top: 0;
  width: 100%; height: height: 54px;
  background-color: #484c55;
}
#header .mobile-header .logo-wrapper{
  display: inline-block;
  padding: 10px 0;
}
#header .mobile-header .logo-wrapper a{
  display: inline-block;
  width: 90px;
}
#header .mobile-header .logo-wrapper a img{
  max-width: 100%;
}
#header .mobile-header .hamberger,
#header .mobile-panel .header .close{
  position: absolute; left: 15px; top: 50%;
  padding: 0;border: none;
  width: 32px;height: 32px;
  margin-top: -16px;
  outline: none;
  background-color: transparent;
  opacity: 1;
}
#header .mobile-header .hamberger span,
#header .mobile-header .hamberger span:before,
#header .mobile-header .hamberger span:after{
  position: absolute;
  width: 100%; height: 2px;
  background-color: #fff;
  left: 0;
  margin-top: -1px;
}
#header .mobile-header .hamberger span{
  top: 50%;
}
#header .mobile-header .hamberger span:before{
  content: '';
  margin-top: -8px;
}
#header .mobile-header .hamberger span:after{
  content: '';
  margin-top: 8px;
}
#header .mobile-header .action-wrapper{
  display: inline-block;
  font-size: 24px;
  position: absolute; right: 15px; top: 15px;
}
#header .mobile-header .action-wrapper a{
  color: #fff;
  margin: 0 5px;
}
#header .mobile-panel{
  width: 100%;
  min-height: 100%;
  background-color: #f2f2f2;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 1001;

  top: 150%;

  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

  display: block !important;
}
#header .mobile-panel.is-open{
  -webkit-transform: translate3d(0,-150%,0);
  -moz-transform: translate3d(0,-150%,0);
  -ms-transform: translate3d(0,-150%,0);
  transform: translate3d(0,-150%,0);
}
#header .mobile-panel,
#header .mobile-panel.is-open,
#header .mobile-panel .tab-content .sub-menu,
#header .mobile-panel .tab-content .sub-menu.is-open
{
  -webkit-transition: -webkit-transform .6s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: -moz-transform .6s cubic-bezier(0.23, 1, 0.32, 1);
  -ms-transition: -ms-transform .6s cubic-bezier(0.23, 1, 0.32, 1);
  transition: transform .6s cubic-bezier(0.23, 1, 0.32, 1);
}
#header .mobile-panel .header{
  background-color: #484c55;
  width: 100%; height: 54px;
  position: relative;
}
#header .mobile-panel .header .close span{
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
}
#header .mobile-panel .header .close span:before,
#header .mobile-panel .header .close span:after{
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 100%; height: 2px; margin-top: -1px;
  background-color: #fff;

  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}
#header .mobile-panel .header .close span:before{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
#header .mobile-panel .header .close span:after{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#header .mobile-panel .tab-trigger{
  background-color: transparent;
  font: 500 14px 'sweet_sansregular';
  color: #9E9E9E;
  line-height: 54px;
  padding: 0 20px;
  margin: 0;
  border: 0;
  position: relative;
}
#header .mobile-panel .tab-trigger.is-active{
  color: #fff;
  font-family: 'sweet_sansbold';
}
#header .mobile-panel .tab-trigger.is-active:after{
  content: '';
  position: absolute; left: 50%; bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
  margin-left: -10px;
}
#header .mobile-panel .content{
  max-width: 400px;
  padding: 50px 0px;
  margin: 0 auto;
}
#header .mobile-panel .tab-content{
  display: none;
}
#header .mobile-panel .tab-content .mobile-menu{

}
#header .mobile-panel .tab-content li{
  background: #fff;
  margin-bottom: 2px;
}
#header .mobile-panel .tab-content li img{
  max-width: 100%;
}
#header .mobile-panel .tab-content li.has-sub > a{
  position: relative;
}
#header .mobile-panel .tab-content li.has-sub > a:before,
#header .mobile-panel .tab-content li.has-sub > a:after{
  content: '';
  background-color: #9E9E9E;
  width: 10px; height: 2px;
  position: absolute; top: 50%;
  right: 10px;
  margin-top: -1px;

  -webkit-transform-origin: 9px center;
  -moz-transform-origin: 9px center;
  -ms-transform-origin: 9px center;
  transform-origin: 9px center;
}
#header .mobile-panel .tab-content li.has-sub > a:before{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#header .mobile-panel .tab-content li.has-sub > a:after{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#header .mobile-panel .tab-content .sub-menu{
  background-color: #f2f2f2;
  position: absolute; left: 0; top: 0;
  width: 100%;
  z-index: 999;
  display: none;

  padding-bottom: 40px;

  -webkit-transform: translate(100%,0);
  -moz-transform: translate(100%,0);
  -ms-transform: translate(100%,0);
  transform: translate(100%,0);
}
#header .mobile-panel .tab-content .sub-menu.is-open{
  -webkit-transform: translate(0%,0);
  -moz-transform: translate(0%,0);
  -ms-transform: translate(0%,0);
  transform: translate(0%,0);
}
#header .mobile-panel .tab-content .sub-menu li{
  max-width: 400px;
  margin: 0 auto 2px;
  list-style: disc inside;
}
#header .mobile-panel .tab-content .sub-menu li:first-child{
  max-width: none;
  list-style: none;
}
#header .mobile-panel .tab-content a{
  font: 500 14px 'sweet_sansregular';
  color: #9E9E9E;
  padding: 15px 20px;
  display: block;
  text-align: left;
}
#header .mobile-panel .tab-content .back-trigger a{
  padding: 12px 5px 11px;
  background-color: #484c55;
  color: #fff;
  padding-left: 5px;
}
#header .mobile-panel .tab-content li.sub-cat,
#header .mobile-panel .tab-content li.is-img{
  list-style: none;
}
#header .mobile-panel .tab-content li.sub-cat a{
  font-family: 'sweet_sansbold';
  background-color: #f2f2f2;
}
#header .mobile-panel .footer a{
  font: 500 14px 'sweet_sansbold';
  color: #484c55;
  margin: 15px 20px;
  display: inline-block;
}