@charset "UTF-8";

/* side設定
   =================================================================== */
#cre_btn {
	display:none;
}
#side_wrapper {
	width:212px;
	position:fixed;
	right:-212px;
	top:20px;
	background:url(../img/c_under.png) no-repeat left bottom;
	z-index:30;
}
.side_wrapper {
	padding:20px 20px 6px 20px;
	background:url(../img/c_top.png) no-repeat;
	line-height:1;
	text-align:left;
	margin-bottom:6px;
}
.side_wrapper h1 {
	margin-bottom:28px;
	line-height:0;
	display:none;
}
#p_wrapper {
	width:172px;
	overflow:hidden;
}
#p_wrapper_c {

}
.p_wrapper {
	float:left;
	width:172px;
}
.p_wrapper ul li.c_title {
	border-bottom:#CCC dotted 1px;
	margin-bottom:10px;
	padding-bottom:10px;
}
.p_wrapper ul {
	margin-bottom:30px;

}
.p_wrapper li {
	line-height:1;
	display:block;
	font-size:10px;
	margin-bottom:10px;
}
.p_wrapper li dt {
	float:left;
	width:100px;
}
.p_wrapper li dt.netshop {
	float:left;
	width:68px;
	background:url(../img/netshop.gif) no-repeat;
	padding-left:52px;
	line-height:13px;
}
.p_wrapper li dd {
	float:right;
	width:68px;
	text-align:right;
}

.p_wrapper img{
	float:left;

}
.p_wrapper .itemcre dl{
	float:right;
	width:112px;
}
.p_wrapper .itemcre dt {
	display:block;
	margin-bottom:8px;
	float:none;
	width:118px;
}
.p_wrapper .itemcre img {
	width:53px;
}
.p_wrapper .itemcre dt.netshop {
	background:url(../img/netshop.gif) no-repeat;
	padding-left:0;
	padding-top:17px;
	width:118px;
}
.p_wrapper .itemcre dd {
	display:block;
	width:118px;
	float:none;
	text-align:left;
}

/* thum設定
   =================================================================== */
#thum_container {
	background:url(../img/thum_bg.png) repeat-x;
	height:71px;
	width:100%;
	position:fixed;
	left:0;
	bottom:-71px;
	z-index:10;
}
.thum_container {
	position:relative;
}
#thum_prev {
	position:absolute;
	top:9px;
	left:0;cursor:pointer;
}
#thum_prev img {
	margin-left:-20px;
}
#thum_next {
	position:absolute;
	top:9px;
	right:0;cursor:pointer;
}

#thum_next img {
	margin-right:-20px;
}

#thum_list_container {
	position:absolute;
	top:9px;
	left:40px;
	height:51px;
	overflow:hidden;
	width:100%;
}
#thum_list_container li {
	float:left;
	margin-right:15px;
	line-height:0;
	cursor:pointer;
}
#thum_list_container li span {
	display:block;
}
#thum_list_container li span img {
	display:block;
	height:51px;
	width:auto;
}
#jquery-ui-draggable .preloader {
	background:url(../img/loading.gif) center center no-repeat ;
	display:block;

}
#thum_list_container .preloader {
	background:url(../img/loading2.gif) center center no-repeat ;
	display:block;
}
#thum_list_container ul {
	overflow:hidden;
	width:100%;
}

/* ctl設定
   =================================================================== */

#ctl {
	position:fixed;
	background:url(../img/ctl.png) no-repeat;
	width:164px;
	height:44px;
	bottom:-44px;
	left:300px;z-index:41;
}
#ctl ul {
	position:relative;
}
#ctl li {
	position:absolute;
	cursor:pointer;
	top:0;
	width:44px;
	height:44px;
}
#ctl li img {
	filter:alpha(opacity=0)  ;
-moz-opacity:0.00 ;
opacity:0.00  ;
}

.ctl_zoom {
	left:0;
	background:url(../img/z1.png) no-repeat;
}
.ctl_zoomout {
	left:60px;
	background:url(../img/z2.png) no-repeat;
}
.ctl_zoomback {
	right:0;
	background:url(../img/z3.png) no-repeat;
}
#p_prev {
	position:fixed;
	left:0;
	top:400px;
	z-index:41;cursor:pointer;
}
#p_prev img {
	margin-left:-20px;
}
#p_next {
	position:fixed;
	right:212px;
	top:400px;
	z-index:41;
	width:0;
	height:36px;
	overflow:hidden;
	cursor:pointer;
	display:none;
}
#p_next img {

}
#page_nation {
	background:url(../img/page.png) no-repeat;
	width:65px;
	height:23px;
	line-height:25px;
	text-align:center;
	top:-24px;
	left:300px;
	position:fixed;z-index:41;
	font-size:10px;
	color:#FFF;
}
/* ctl設定
   =================================================================== */
#jquery-ui-draggable {
	z-index:0;
}
#jquery-ui-draggable li {
	position:absolute !important;
}
#jquery-ui-draggable li img {
	cursor:move;
}

#db {
	position:fixed;
	z-index:100;
}
#db2 {
	position:fixed;
	z-index:100;
	left:230px;
}


#side_container {
	float:left;
	width:812px;
	background-color:#FFF;
	padding-top:20px;
	font-size:10px;
	z-index:1250;
	position:relative;
	margin-left:-812px;
}

#side_btn {
	position:absolute;
	top:20px;
	right:-45px;
	background:url(../img/list_b.png) no-repeat;
	width:45px;
	height:45px;
	cursor:pointer;
	overflow:hidden;
}
#side_btn img {
	filter:alpha(opacity=0)  ;
-moz-opacity:0.00 ;
opacity:0.00  ;
}
.side_close {
	background:url(../img/list_b.png) no-repeat 0 -45px !important;
}
.side_close img {
	margin-top:-45px;
}
#wall,#update,#feedList,#side_container h2,#side_container h3 {

}
#side_container h2,#side_container h3 {
	padding-bottom:15px;
	line-height:0;
}
#side_container h3 {
	padding-top:25px;

}
#side_container span {
	display:block;
	height:137px;
	line-height:1;
	padding-bottom:11px;
	width: 100%;
}

#side_menu .thumb {
	width:25px;
	height:25px;
	background-color:#000;
}

#thumlist {
	padding-left:20px;
}
#thumlist ul {
	margin-right:-50px;
}
#thumlist li {
	float:left;
	background-color:#d6d6d6;
	padding:5px;
	line-height:1;text-align:center;
	color:#FFF;
	margin:0 15px 15px 0;
	cursor:pointer;
	overflow:hidden;
	text-align:center;
}
#thumlist li.selected {
	background-color:#000;
}
#thumlist li img {
	display:block;
	font-family:"object-fit: contain;";
	object-fit:contain;
	height:100% !important;
	width:100% !important;
}

#thum_bg {
	width:0%;
	height:100%;
	background:url(../img/bg.png);
	position:fixed;
	right:0;
	top:0;
	z-index:200;
}
/* Tiny Scrollbar */
#side_container #scrollbar1 {  }
#side_container #scrollbar1 .viewport {  height: 1000px; overflow: hidden; position: relative; }
#side_container #scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#side_container #scrollbar1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.gif) repeat-y; position: relative; background-position: 0 0; float: right; width: 15px;margin-right:20px; }
#side_container #scrollbar1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.gif) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#side_container #scrollbar1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.gif) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#side_container #scrollbar1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.gif) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#side_container #scrollbar1 .disable { display: none; }

::selection {
background: #89cf00;
}
::-moz-selection {
background: #89cf00;
}
#side_wrapper #scrollbar2 {  }
#side_wrapper #scrollbar2 {  }
#side_wrapper #scrollbar2 .viewport {  height: 1000px; overflow: hidden; position: relative; }
#side_wrapper #scrollbar2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#side_wrapper #scrollbar2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.gif) repeat-y; position:absolute; right:5px; background-position: 0 0; float: left; width: 4px;
overflow:hidden;}
#side_wrapper #scrollbar2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.gif) no-repeat 0 100%; height: 100%; width:4px; position: relative; padding: 0 1px; }
#side_wrapper #scrollbar2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.gif) no-repeat 50% 100%; height: 20px; width: 4px; cursor: pointer; overflow: hidden; position: absolute; top: 0;  }
#side_wrapper #scrollbar2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.gif) no-repeat 50% 0; overflow: hidden; height: 5px; width: 4px; }
#side_wrapper #scrollbar2 .disable { display: none; }


@media only screen and (max-width:640px){
body,html {
	overflow:hidden;
	width:100%;
	height:100%;
}

#thum_container{
		display:none;
}

#p_next {
	position:fixed;
	right:0;
	top:400px;
	z-index:41;
	width:36px;
	height:36px;
	overflow:hidden;
	cursor:pointer;
	display:none;
}
#p_next img {
	margin-right:-20px;
}

#thumlist {
	zoom:.5;
}
#side_container {
	float:left;
	width:90%;
	background-color:#FFF;
	padding-top:20px;
	font-size:10px;
	z-index:1250;
	position:relative;
	margin-left:-90%;
}

#side_wrapper {
	width:212px;
	position:fixed;
	right:-212px;
	top:0px;
	background-color:#FFF;
	z-index:130;
	height:100%;
}

#cre_btn {
	position:absolute;
	top:20px;
	left:-45px;
	background:url(../img/list_b2.png) no-repeat;
	width:45px;
	height:45px;
	cursor:pointer;
	overflow:hidden;
	display:block;
}
#cre_btn img {
	filter:alpha(opacity=0)  ;
-moz-opacity:0.00 ;
opacity:0.00  ;
}

#sp {
	position:fixed;
	height:140%;

}

#ctl {

	bottom:4px;

}

}