@import url(lib/reset.css);
@import url(lib/layout.css);

/* =baseline */
html
{
	/* Emulate position: fixed in IE 6  (force re-calculation of dynamic expression before scroll event)*/
	_background-image: url(about:blank);
	_background-attachment:fixed;
}

body 
{
	width: 100%;
	background-color:transparent;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tablealign{
	vertical-align:middle;
	text-align:center;
}

#content
{
	text-align:center;
	padding-bottom: 0;
	background: transparent url(../images/bg/bg_side.gif) repeat-y center top;
}

#product-flash
{
	position: relative;
}

#footer
{
	width:100%;
	height: 242px;
	background: transparent url(../images/bg/bg_5.jpg) repeat-y center top;
}

/**
 * H1 is the logo for the site
 */
h1
{
	background: transparent url(../images/logo.gif) 50% 50% no-repeat;
	height: 3em;
	width: 120px;
	float: left;
	padding: 1em 20px;
}

h1 a
{
	display: block;
	height: 45px;
	text-indent: -9999em;
}

/**
 * H2s are used only to provide structural information to screen readers and are hidden from visual display
 */
h2 {
	position: absolute;
	left: -9999em;
}

h3 
{
	background-color: #000;
	padding: 4px 0 3px 5px;
	color: #fff;
	font-weight: bold;
	font-size: 1.4em;
}

/* about */
.aboutcontent
{
	height: 100%;
}

#aboutmenu
{
	position:relative;
	top:150px;
	text-align:center;
}

#aboutmenu table
{
	text-align:center;
}

/* =page grid component (see module component as well) */
#navigation
{
	margin: 0;
	width: 100%;
	position: relative;
	*position: static; /* For IE 6 & 7, which reset z-index relative to a positioned parent */
}

.mod.navigation
{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 200;
	/* Emulate position: fixed in IE 6 */
	*zoom: 1;
	_position: absolute; 
	_top: expression(eval(document.documentElement.scrollTop));
	_bottom: auto;
	background: transparent url(../images/bg/header.png) no-repeat center top; 
}

#footer
{
	width: 994px;
	margin: 0 auto;
	background-color: #000;
	color: #fff;
	position: static; /* Reset the positioning in layout.css */
	_margin-top: -62px; /* For IE */
}

/* =module component */
.mod-wrapper
{
  background: transparent none 50% top no-repeat;
	zoom: 1; /* For IE */
}

/**
 * Apply specific images and padding on #ids
 */

#product
{
	height: 1129px;
	background: transparent url(../images/bg/bg_1.jpg) repeat-y center top;
}

#main
{
	height: 1114px;
	background: transparent url(../images/bg/bg_2.jpg) repeat-y center top;
}

#about
{
	height: 242px;
	background: transparent url(../images/bg/bg_3.jpg) repeat-y center top;
}

#contmain
{	

	height: 1100px; 
	background: transparent url(../images/bg/bg_4.jpg) no-repeat center top;
	min-height: 700px;
}
#contfoot
{
	position:relative;
	height: 242px;
	background: transparent url(../images/bg/bg_5.jpg) repeat-y center top;
}


#art
{
	background: transparent url(../images/bg/art.jpg) repeat-y center top;
	height: 1185px;
	margin-bottom: -62px; /* The height of #footer */
	_margin-bottom: 0;
}

#main-flash
{
	margin: -25px 0 0 0; 
}

.mod 
{
	width: 984px;
	margin: 0 auto;
}
.mod1 
{
	width: 1010px;
	margin: 0 auto;
}

.mod .header
{
	background: transparent url(../images/bg/module.png) -984px top no-repeat;
	height: 24px;
}

.mod .footer
{
	background: transparent url(../images/bg/module.png) 0 100% no-repeat;
	height: 24px;
}

.mod .footer span
{
	display: block;
	background-color: #fff;
	height: 12px;
	margin: 0 12px;
}

.mod .content-wrapper
{
	background: transparent url(../images/bg/module.png) -1968px top repeat-y;
	_zoom: 1;
}

.mod .content
{
	text-align:center;
	padding: 0px 0px 0px; /* 40px minus the height of .mod .footer span */
	margin: 0 12px;
	zoom: 1; /* For IE */
}

.mod .content_navi
{
	text-align:center;
	zoom: 1; /* For IE */
}

.mod .content:after
{
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.mod1.navigation
{
	_width: 100%;
}

.mod1.navigation .content-wrapper
{
	background: transparent url(../images/bg/main-nav.png) -327px 0 repeat-y;
}

.mod1.navigation .content
{
	margin: 0 0 0 5px;
	padding: 0 5px 0 0;
	background: transparent url(../images/bg/main-nav.png) center 0 repeat-y;
}

.mod1.navigation .footer
{
	margin: 0;
	padding: 0 5px;
	height: 5px;
	background: transparent url(../images/bg/main-nav.png) 0 -5px no-repeat;
}

.mod1.navigation .footer span
{
	background-color: #ff0000;
	height: 5px;
	margin: 0 5px;
}

/* =navigation component */
.navigation.main
{
	float: auto;
	_position: static; /* For IE */
/*	_width: 225px; */
}

.navigation.main:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.navigation.main li {
	display: block;
	float: left;
	height: 4em; /* 50px */
	border-left: 0px solid #ff5959;
	text-align: center;
}

.navigation.main a
{
	font-size: 1.1em; /* 10px */
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	padding: 0;
	text-decoration: none;
	line-height: 5em; /* Set to height of .navigation.main li to vertically center */
}

.navigation.main a:link,
.navigation.main a:visited
{
	color: #666666;
}

.navigation.main a:focus
{
	outline: 1px dotted #000;
	background-image: none;
}

.navigation.main a:hover
{
	color: #4b82ba;
}

.navigation.main a:active,
.navigation.main a.selected
{
	color: #666666;
}


/* =navigation gnb */
.navigation.gnb
{
	float: right;
	_position: static; /* For IE */
/*	_width: 225px; */	
}

.navigation.gnb:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.navigation.gnb li {
	display: block;
	float: left;
	/*width:80px;*/
	height: 4em; /* 50px */
	text-align: center;
}

.navigation.gnb a
{
	font-size: 1em; /* 10px */
	font-weight: bold;
	display: block;
	padding: 0px 10px 0px 10px;
	text-decoration: none;
	line-height: 1em; /* Set to height of .navigation.main li to vertically center */
}

.navigation.gnb a:link,
.navigation.gnb a:visited
{
	color: #999999;
}

.navigation.gnb a:focus
{
	outline: 1px dotted #000;
	background-image: none;
}

.navigation.gnb a:hover
{
	color: #4b82ba;
}

.navigation.gnb a:active,
.navigation.gnb a.selected
{
	color: #999999;
}


/* =navigation about */
.navigation.about
{
	width: 450px;
	position:relative;
	top:140px;
	left:270px;
}

.navigation.about:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
.navigation.about li {
	font-size:1.1em;
	display: block;
	float: left;
	height: 4em; /* 50px */
	border-left: 0px solid #ff5959;
	text-align: center;
}

/* =thumbnail navigation component */
.navigation.thumbnails 
{
	zoom: 1;
	margin-left: 28px;
	_position: static; /* For IE */
	_z-index: 0; /* For IE */
	width: auto;
	_top: 0; /* For IE */
}

.navigation.thumbnails:after
{
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}

.navigation.thumbnails li 
{
	float: left;
	margin-left: 10px;
}

/* =carousel component */
.carousel
{
	position: relative; 
	overflow: hidden; 
	/*width: 860px;*/
	width: 900px;
	height: 560px;
}

.carousel .items
{
	width: 20000em; 
	position: absolute;
	clear: both;
}

.slide
{
	float: left;
	width: 900px;
	_display: inline; /* For IE 6 */
	position: relative;
}

.slide a
{
	display: block;
	position: absolute;
	width: 900px; /* The width of the slide images */
	height: 480px; /* The height of the slide images */
	top: 0;
	left: 0;
	*background-color: cyan; /* For IE 6 & 7 */
	filter:alpha(opacity=0); /* For IE 6 & 7 */
}

/* =carousel pager component */
.pager
{
	_width: 100%; /* For IE 6 (overwrite of .navigation.main) */
	_position: static; /* For IE 6 (overwrite of .navigation.main) */
}

.pager .next,
.pager .prev,
.pager .nextPage,
.pager .prevPage
{
	position: absolute;
	width: 18px; /* The width of the bg image */
	top: 50%;
	color: #8b8b8b;
	height: 25px; /* The height of the bg image */
	cursor: pointer;
	text-indent: -9999em;
	background: transparent url(../images/bg/arrow-right.gif) no-repeat;
}

.pager .next,
.pager .nextPage
{
	right: 0;
	background-position: right top;
}

.pager .prev,
.pager .prevPage
{
	left: 0;
	background-image: url(../images/bg/arrow-left.gif);
}

.pager .disabled
{
	display: none;
}

/* =artwork component */
.artwork
{
	/*display: none;*/
	float: left;
	width: 940px;
	margin: 0 34px;
}

h3#art-title 
{
	margin-left: 33px;
	margin-bottom: 1.25em;
	width: 200px;
	background-color: #6b6b6b;
	padding: 4px 0 3px 5px;
	color: #fff;
	font-weight: bold;
	font-size: 1.5em;     
}

div#art-introduction {
	margin: 0px 33px;
	font-size: 1.4em; 
	color: #6b6b6b;
}

.artwork .desc
{
	float: left;
	width: 253px;
	margin-left: 22px;
}

.artwork .desc h3
{
    margin: 0;
    padding: 0;
    background: 0;
    padding-top: 5px;   
	margin-bottom: 12px;    
}             

.artwork .desc h3 span {
    padding: 5px;
}
 
.artwork .desc p
{
	font-size: 1.2em;
	color: #6b6b6b;
	line-height: 1.5em;
}

.artwork p.image-num
{
	font-size: 1em;
	font-weight: normal;
    font-style:italic; 
}

.artwork img
{
	float: left;
}

/* =post excerpt component */
.post-excerpt h4
{
	font-size: 1.8em;
	line-height: 1.39; /* 25px */
	background-color: #00ccff;
	color: #000;
	font-weight: bold;
	/*margin-top: 5px;
		margin-bottom: 16px;*/ /* Margins won't work for inline elements */
	display: inline;
}

.post-excerpt h4 a
{
	line-height: 1.39; /* 25px */
	background-color: #00ccff;
	color: #000;
	font-weight: bold;
}

.post-excerpt span a
{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 28px;
	display: block;
}

/* =tweet component */
.mod.tweet 
{
	width: auto; /* Need to reset the width set by .mod */
	background-color: #0cf;
	position: relative;
	margin-top: 30px;
}

.mod.tweet .header
{
	background-image: none;
	display: block;
	font-size: 0;
	height: 1px;
	width: 1px;
	position: absolute;
	top: -18px;
	left: 21px;
	border-top: 0;
	border-left: 18px solid #0cf; /* pixel size = tail size */
	border-top: 18px solid transparent; /* set angle of arrow */
	border-bottom: 10px solid transparent;
	_border-top-color: cyan; /* No 'transparent' borders in IE6 */
	_border-bottom-color: cyan;
	_filter: chroma(color="cyan"); /* filter out the cyan color */ 	
}

.mod.tweet .footer
{
	background: transparent url(../images/bg/tweet.gif) no-repeat;
	height: 6px;
}

.mod.tweet .content
{
	background: transparent url(../images/bg/tweet.gif) -198px top no-repeat;
	margin: 0;
	padding: 17px 11px;
}

.mod.tweet p
{
	color: #000;
	font-size: 1.1em;
	line-height: 1.36; /* 15px */
	margin-bottom: 1.36em;
	font-weight: bold;
}

.mod.tweet .meta
{
	font-size: 1em;
	line-height: 1.2; /* 12px */
	color: #27525e;
	margin-bottom: 0;
}

.mod.tweet a
{
	color: #fff;
}

/* =overwrites */
/* Put location-specific styling here */
#phones .content
{
	_padding: 28px; /* For IE 6 */
}

#more .content
{
	/* background-color: #000; */
}

#more .content h3
{
	color: #000;
	margin-bottom: 21px;
}

#cred-deck .content
{
	padding: 28px 0 28px;
}

#art .content
{
	padding: 28px 16px 28px;
}

#more .mod .header,
#more .mod .footer
{
	background-image: url(../images/bg/more-module.png);
}

#more .mod.tweet .header
{
	background-image: none;
}

#more .mod.tweet .footer
{
	background: transparent url(../images/bg/tweet.gif) no-repeat;
}

#more .mod.tweet .content
{
	background-color: transparent;
}

#cred-deck .carousel
{
	height: 510px;
	width: 900px;
	margin: 0 30px;
}

#cred-deck .pager .next,
#cred-deck .pager .prev
{
	background-image: url(../images/bg/arrow-lrg-right.gif);
	width: 36px;
	height: 101px;
	top: 190px;
}

#cred-deck .pager .prev
{
	background-image: url(../images/bg/arrow-lrg-left.gif);
}

#artwork-thumbnail-pager
{
	height: 73px;
	margin-top: -61px;
}

#artwork-thumbnail-pager .nextPage,
#artwork-thumbnail-pager .prevPage
{
	top: 20%;
}

/**
 * HACK
 * slide 10 shouldn't be there (it is meant to be the second-part of slide 9), so we're hiding it with css
 */
#slide-thumb-10
{
	display: none;
}


/* =map window popup */
#mapcontainer
{
  position: relative;
  padding: 27px 5px 0;
	background: transparent url(../images/bg/map.gif) repeat-y;
	width: 880px;
	overflow: hidden;
}

#mapcontainer .footer
{
	background: transparent url(../images/bg/map-footer.gif) left bottom no-repeat;
	position: relative;
	left: -5px;
	width: 890px;
	height: 6px;
}

#mapwindow
{
  position: absolute;
  display: none;
	z-index: 100;
  width: 880px;
  height: 702px;
  background: #000;
  opacity: 0.65;
  -moz-opacity: 0.65; /* older Gecko-based browsers */
  filter:alpha(opacity=65); /* For IE6&7 */  
}

#mapwindow-content
{
  position: absolute;
  display: none;
  color: #fff;
	z-index: 101;
  margin-top: 35px;
  margin-left: 84px;
  width: 709px;
  height: 570px;
}    

#mapwindow-content #content-left {
  width: 105px;
  float: left;    
	background: transparent url(../images/bg/popup_left_bg.png) repeat;   
  height: 100%;	
}             

#mapwindow-content #content-right {
  width: 604px;
  float: left; 
  background: #000;
  height: 100%;
}             

#mapwindow-content #leftarrow
{
  cursor: pointer;
  width: 50px;
  height: 516px;
  background: url(../images/leftarrow.gif) center no-repeat;
  float: left; 
  margin-top: 30px;
}

#mapwindow-content #dummyleftarrow
{
  width: 50px;     
  height: 516px;  
  float: left;
}

#mapwindow-content #rightarrow
{
  cursor: pointer;
  width: 49px;
  height: 100%;
  background: url(../images/rightarrow.gif) center no-repeat;  
  float: left;  
}

#mapwindow-content #wrap
{
  width: 505px;
  float: left;  
  overflow: hidden;
}

#mapwindow-content #closewindow
{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: url(../images/rounded_close.gif) center no-repeat;    
  cursor: pointer;
}

#mapwindow-content h4
{
  margin: 0;
  padding: 0;
  margin-top: 25px;
}              

#mapwindow-content h4 span {
  padding: 5px;
}
      
#mapwindow-content #desc
{       
  margin-top: 12px;
  height: 185px;
  overflow: hidden;
}

#mapwindow-content #info-placeholder
{
  min-height: 100px;
}

#mapwindow-content #video-placeholder
{                      
  margin-top: 15px;
  width: 100%;
} 

#mapwindow-content #thumbnails-placeholder
{     
  width: 100%;      
  margin-top: 28px;                                 
}       

#mapwindow-content #thumbnails-placeholder a
{     
  color: #fff;
  text-decoration: none;
}

#mapwindow-content #thumbnails-placeholder ul
{
  margin: 0;
  padding: 0;       
  font-size: 1.1em;
}

#mapwindow-content #thumbnails-placeholder li span {
  display: block;
  margin-left: 20px;
}

#mapwindow-content #thumbnails-placeholder li
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  float: left;
  width: 100%; 
  color: #fff;  
  padding-top: 6px;
  padding-bottom: 6px; 
  line-height: 1.5em;
}             

#mapwindow-content #thumbnails-placeholder li.current {     
  background: #666666 url(../images/bg/arrow-left-small.gif) no-repeat 8px 10px;     
}

#mapwindow-content #thumbnails-placeholder .lasti
{
  margin-right: 0px;
}

#mapwindow-content #thumbnails-placeholder li img
{
  width: 55px; 
  height: 55px; 
}     

/* =artwindow */
#artwindow
{
  position: absolute;
  display: none;
  z-index: 150;
  width: 900px;
  height: 850px;
  background: transparent url(../images/bg/white-bg.png) repeat;
}

#artwindow-content
{
  position: absolute;
  display: none;
  color: #fff;
  z-index: 151;
  width: 880px;
  height: 493px;    
}

#artwindow-content #closewindow
{
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 20px;
  background: url(../images/bg/close-art.gif) center no-repeat;    
  cursor: pointer;
}  

#artwindow-content #artwork-carousel
{
    margin-top: 120px;
}        

#artwindow-content .artwork
{
    padding-left: 111px;
}     

#artwindow-content .description {
    margin-top: 40px;
}      

#artwindow-content .desc a {
    color: #00ccff;
}     

.clearbox
{
  clear: both;
}

/* 아이프레임관련 */
div.layer_s, div.layer_f, div.layer_d{
	position: absolute;
	top: 2435px;
	width: 100%;
	z-index: 97;
	text-align: center;	
}

/* for ie 6 under */
*html img.png24{tmp:expression(setPng24(this));}
*html input.png24{tmp:expression(setPng24(this));}