@charset "utf-8";

/************modules styles************/

@import url("modules/sgEasyTab.css");

/*************Grid style**************/

@import url("simplegrid.css");


/****************** for dreamweaver codehint *********************/

.sg-margin, .sg-mg, .sg-marginL, .sg-mgL, .sg-marginR, .sg-mgR, .sg-marginT, .sg-mgT, .sg-marginB, .sg-mgB{}
.sg-padding, .sg-pd, .sg-paddingL, .sg-pdL, .sg-paddingR, .sg-pdR, .sg-paddingT, .sg-pdT, .sg-paddingB, .sg-pdB{}
.sg-x, .sg-y, .sg-w, .sg-h, .sg-width, .sg-height, .sg-r, .sg-radius, .sg-radiusLT, .sg-rLT, .sg-radiusRT, .sg-rRT, .sg-radiusLB, .sg-rLB, .sg-radiusRB, .sg-rRB{}
.sg-scale, .sg-scaleX, .sg-scaleY {}
.sg-alpha, .sg-opacity{}

/*****************************************************************/
body{
	visibility:hidden;
}

#stage {
	/*test*/
	border:solid 1px rgba(255,255,255,0);
	
	/*overflow:hidden;*/
	width:1366px;
	height:860px;
	position:relative;
	left:0px;
	top:0px;
}

/*Experimental optimization, caused by the use of the scalation some times the screen render the images with blur, with this code
the navigator (HTML5) optimize I little bit (not everything ) the render*/
/*#stage{

	image-rendering: optimizeSpeed;             
    image-rendering: -moz-crisp-edges;           Firefox             
    image-rendering: -o-crisp-edges;             Opera               
    image-rendering: -webkit-optimize-contrast;  Chrome (and Safari) 
    image-rendering: optimize-contrast;          CSS3 Proposed       
    -ms-interpolation-mode: nearest-neighbor;    IE8+                

}*/

#content {
	/*display:none;*/
	visibility:hidden;
}
sg-btn-hide {
	display: inline;
}
sg-btn-dhide, sg-btn-cover, sg-btn-popup, sg-btn-popup-close, sg-item-popup, sg-item-page {
	display:block;
}
sg-btn-dhide, sg-btn-hide, sg-btn-cover {
	border:#000 solid 1px;
	background-color:#fff;
	color:#FFF;
}


.sg-test{ border:solid 1px; }

.sg-testdiv {border:solid 1px;}
.sg-testdiv div{ border:solid 1px; }
.sg-testimg img{ border:solid 1px; }
.sg-testall *{ border:solid 1px; }


.sg-noselect{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.sg-abs, .sg-absolute{
	position:absolute;
}

.sg-rel, .sg-relative{
	position:relative;
}

ul{
	list-style:none;
}

.sg-hide { display:none; }
.sg-show { display:block; }


.sg-hidden{ visibility:hidden; }
.sg-visible{ visibility:visible; }

.sg-box-title{
	-webkit-box-shadow: 1px 1px 5px #ccc;
	-moz-box-shadow: 1px 1px 5px #ccc;
	box-shadow: 1px 1px 5px #ccc;
	font-size: 30pt;
	font-weight: bold;
	text-shadow: 1px 1px 3px #641133;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: solid 2px #b32561;
	background-color: #db317a;
	color:#fff; 
	margin:10px;
	padding:5px 12px 5px 12px;
}

.sg-left{
	float:left;
}

.sg-right{
	float:right;
}



.sg-center{
	display:table;
	margin-left:auto;
	margin-right:auto;
}

img.sg-center{
	/*not support*/
	display:block;
}

.sg-nextLine{
	clear:both;
}

.sg-text-center{
	text-align:center;
}

.sg-text-shadow{
	text-shadow: 2px 2px 10px #000;
}

.sg-text-shadow2{
	text-shadow: 1px 1px 5px #333;
}


.sg-box-shadow{
	-webkit-box-shadow: 1px 1px 10px;
	-moz-box-shadow: 1px 1px 10px;
	box-shadow: 1px 1px 10px;
}

.sg-underline{
	text-decoration:underline;
}

.sg-overline{
	text-decoration:overline;
}

.sg-bottomline{
	border-top-style:solid;
	border-top-color:#000;
	border-top-width:2px;
}

.sg-topline{
	border-top-style:solid;
	border-top-color:#000;
	border-top-width:2px;
}

.sg-topline2{
	border-top-style:solid;
	border-top-color:#133040;
	border-top-width:2px;
}

/****************코어와 직접적 관련있는 내용*****************/

[data-sg-id=overlap] {
	position:relative;
}

[data-sg-id=overlap] *{
	position:absolute;
}


[data-sg-id^="btn-"]{
	cursor:pointer;
	display:inline-block;
}

[data-sg-id="btn-hide"]{
	/*
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	*/
	border:1px solid #000;
}


[data-sg-id="btn-cover"] {
	display:inline-block;
	position: relative;
	/*
	background-color:#FFF;
	border:#000 solid 1px;
	*/
}
/*커버버튼의 첫번째 자식(감출내용)*/
/*
[data-sg-id="btn-cover"] #coverItem{
	visibility: hidden;
	width:100%;
	height:100%;
}
/*
/*커버버튼의 커버*/
[data-sg-id="btn-cover"] #cover{
	position: absolute;
	border:1px solid #000;
	background-color:#FFF;
	width:100%;
	height:100%;
}




/*이미지로 팝업버튼 만드는경우 : 글자와 같이 섞여있을 때.*/
img[data-sg-id="btn-popup"] {
	/*이미지가 위로 솟으니까, 세로정렬을 밑으로*/
	vertical-align:sub;
}

div[data-sg-id="btn-popup"] {
	display:inline-block;
}

div[data-sg-id="item-popup"] {
	position:relative;
	z-index:100;
}


/* popup background */
[data-sg-id="popupBg"] {
	position:fixed;
	z-index:99;
	left:0px;
	top:0px;
	background-color:#000;
	opacity: 0.5;
	filter: alpha(opacity = 50); /* IE6,7 */
	-ms-filter: "alpha (opacity=30)"; /* IE8 */
	-moz-opacity: 0.5; /* Firefox 1.5 */
	-khtml-opacity: 0.5; /* Safari 1.x */
	-webkit-opacity: 0.5;
}