@charset "utf-8";

/* default style */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, hgroup, header, footer, figure, figcaption, nav, section { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { font:normal .75em/1.45 "돋움", Dotum, Arial, Tahoma , Geneva, Verdana; color:#888; background-color:#3b3b3b; }
ol, ul { list-style:none; overflow:hidden; zoom:1; }
button { margin:0; padding:0; border:0; font:inherit; color:inherit; background:transparent; overflow:visible; cursor:pointer; line-height:1; }
a:link, a:visited, a:hover, a,active, a:focus { text-decoration:none; color:inherit; cursor:pointer; }
*::-moz-focus-inner { padding:0; border:0; }

body { min-width:950px; }

/* IR */
span.ir { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }

div.contentWrap,
#content h1 span,
a.outLink span,
#body span.position a span,
#foot span.happy  span,
ul.snsLink span { background-image:url('../image/bgCommon.png'); }

#body p.title span,
#body ul.navigator li span,
#body ul.subLink span { background-image:url('../image/bgR2-3.png'); }

/* layout */
div.contentWrap { background-position:0 -61px; background-repeat:repeat-x; background-color:#fff; }
#content {  position:relative; width:950px; margin:0 auto; padding-bottom:100px; background:url('../image/bgR3.png') no-repeat 95% 100%; overflow:hidden; }

/* head */
#head { height:124px; overflow:hidden; }
#head h1 { position:relative; width:199px; height:24px; margin:41px 0 0 1px; }


a.outLink { position:relative; float:right; width:128px; height:27px; margin-top:-48px; padding-left:15px; border:1px solid #d6d6d6; color:#858585; font-size:.95em; line-height:27px; }
a.outLink span { position:absolute; top:12px; right:10px; width:7px; height:4px; background-position:-94px -25px; }
#outLink { display:none; position:absolute; top:104px; right:0;  width:113px; padding:7px 15px; border:1px solid #d6d6d6; font-size:.95em; background-color:#fff; z-index:9000;  }
#outLink.on { display:block; }
#outLink  a { color:#858585; line-height:22px; }


/* content */
#body { overflow:hidden; }

#body p.title { float:left; position:relative; width:354px; height:165px; margin-bottom:78px; }

#body ul.navigator {  float:right; width:480px; height:488px; overflow:hidden; }
#body ul.navigator li { float:left; width:230px; height:234px; margin:0 0 10px 10px; }
#body ul.navigator li a { position:relative; display:block; height:100%; }
#body ul.navigator li span.item01 {  background-position:0 -166px; }
#body ul.navigator li span.item02 {  background-position:-231px -166px; }
#body ul.navigator li span.item03 {  background-position:0 -401px; }
#body ul.navigator li span.item04 {  background-position: -231px -401px; }

#body div.view { float:left; width:470px; height:478px; }
#body div.view ul { overflow:hidden; }
#body div.view li { float:left; position:relative; width:470px; height:478px;  overflow:hidden; }
#body div.view span { background-image:url('../image/bgR2-3.jpg'); }
#body div.view span.item01 { background-position:0 0; }
#body div.view span.item02 { background-position:-471px 0; }
#body div.view span.item03 { background-position:-942px 0; }
#body div.view span.item04 { background-position:-1413px 0; }
#body div.view span.item05 { background-position:-1884px 0; }

#body div.text { float:right; width:450px; height:300px; padding:20px 0 0 20px; }
#body div.text h2 { margin-bottom:17px; }
#body div.text h2 span { display:none; }
#body div.text p { margin-bottom:20px; line-height:1.75; letter-spacing:-.0925em; }
#body div.text p.sub { font-size:.95em; }
#body div.off { display:none; }

#body span.position {  float:right; margin:-585px 486px 0 0; }
#body span.position a { float:left; position:relative; width:11px; height:11px; margin-left:4px; overflow:hidden; }
#body span.position a span { background-position:0 -44px; }
#body span.position a.on span { background-position:-12px -44px; }

#body ul.subLink { float:left; clear:both; width:480px; margin:-65px 0 0 -10px; }
#body ul.subLink li { float:left; width:230px; margin-left:10px; padding:10px 0 19px; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; }
#body ul.subLink li.mobile { display:none; }
#body ul.subLink a { position:relative; display:block;  height:47px; overflow:hidden; }
#body ul.subLink span.item01 { background-position: 0 -636px; }
#body ul.subLink span.item02 { background-position: -231px -636px; }

ul.snsLink { position:absolute; top:43px; right:0; overflow:hidden; }
ul.snsLink li { float:left; margin-left:14px; }
ul.snsLink a { display:block; position:relative; height:18px; overflow:hidden; }
ul.snsLink a.item01 { width:16px; }
ul.snsLink a.item01 span { background-position: 0 -25px;  }
ul.snsLink a.item02 { width:18px; }
ul.snsLink a.item02 span { background-position: -17px -25px;  }
ul.snsLink a.item03 { width:9px; }
ul.snsLink a.item03 span { background-position: -36px -25px;  }
ul.snsLink a.item04 { width:12px; }
ul.snsLink a.item04 span { background-position: -46px -25px;  }
ul.snsLink a.item05 { width:34px; }
ul.snsLink a.item05 span { background-position: -59px -25px;  }

/* foot */
#foot { width:950px; height:84px; margin:0 auto; font-size:.95em; overflow:hidden; }
#foot span.happy { float:right; position:relative; width:88px; height:35px; margin:21px 1px 0 0; }
#foot span.happy span {  background-position:-102px -25px; }
#foot address { margin-top:29px; font-style:normal; }


/* resolution 710px ~ 959px */
@media screen and (min-width:710px) and (max-width:959px){
	body { min-width:710px; overflow-x:hidden; }
	#content { width:710px;  background:none; overflow:visible !important; }
	#body ul.navigator {  float:right; position:relative; width:230px; height:976px; z-index:1000; }
	#body ul.navigator li { margin-left:0; }
	#body div.text { float:left; width:450px; height:auto; padding:20px 0 20px 10px; }
	#body ul.subLink { clear:both; width:480px; margin:-10px 0 0 -10px; }
	#body span.position { position:absolute; top:345px; right:250px; margin:0; }
	#foot { width:710px; } 
	div.null { position:absolute; top:525px; right:-29px; width:150px; height:150px; background:url('../image/bgR2.png');  z-index:500; }
}


/* resolution under 710px */
@media screen and (max-width:709px){
	#body p.title span,
	#body ul.navigator li span,
	#body ul.subLink span { background-image:url('../image/bgR1.png'); }
	
	body { min-width:300px; max-width:719px; }

	#content {  width:300px; padding-bottom:40px; background:none; }

	#head { height:102px; margin-bottom:20px; border-bottom:2px solid #4f4e57; }
	#head h1 { width:199px; height:24px; margin:41px auto 0; }

	a.outLink { margin-top:0; }
	#outLink { top:152px; }

	#body { clear:both; padding-top:30px; }
	#body p.title { float:none; position:relative; width:235px; height:71px; margin-bottom:39px; }

	#body ul.navigator {  float:none; width:300px; height:auto; margin-bottom:10px; }
	#body ul.navigator li { float:left; width:150px; height:63px; margin:0 1px 1px 0; }
	#body ul.navigator li.even { width:149px; margin-right:0; }
	#body ul.navigator li span.item01 {  background-position:0 -72px; }
	#body ul.navigator li span.item02 {  background-position:-151px -72px; }
	#body ul.navigator li span.item03 {  background-position:-301px -72px; }
	#body ul.navigator li span.item04 {  background-position: -452px -72px; }
	#body ul.navigator li a.on span.item01 {  background-position:0 -136px; }
	#body ul.navigator li a.on span.item02 {  background-position:-151px -136px; }
	#body ul.navigator li a.on span.item03 {  background-position:-301px -136px; }
	#body ul.navigator li a.on span.item04 {  background-position: -452px -136px; }

	#body div.view { float:none; width:300px; height:306px; }
	#body div.view li { width:300px; height:306px; }
	#body div.view span { background-image:url('../image/bgR1.jpg'); }
	#body div.view span.item01 { background-position:0 0; }
	#body div.view span.item02 { background-position:-301px 0; }
	#body div.view span.item03 { background-position:-602px 0; }
	#body div.view span.item04 { background-position:-903px 0; }
	#body div.view span.item05 { background-position:-1204px 0; }

	#body div.text { float:right; width:300px; height:auto; padding:20px 0 0 0; }
	#body div.text h2 { margin-bottom:17px; }
	#body div.text h2 img.change { display:none; }
	#body div.text h2 span { display:block; position:relative; width:163px; height:36px; overflow:hidden; }
	#body div.text h2 span span { background:url('../image/txt41A.png') no-repeat 0 0; }

	#body div.text p { margin-bottom:20px; line-height:1.5; letter-spacing:-.0925em; }
	#body div.text p.sub { font-size:.95em; }
	#body div.off { display:none; }

	#body span.position {  float:none; clear:both; display:block; width:100%; margin:0 0 30px; text-align:center; }
	#body span.position a { float:none; display:inline-block; width:11px; height:11px; margin:0 2px; }

	#body ul.subLink { float:none; width:300px; margin:0 0 25px; padding-top:1px;  }
	#body ul.subLink li { float:none; width:300px; margin:-1px 0 0 0; padding:10px 0 19px; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; }
	#body ul.subLink li.mobile { display:block; }
	#body ul.subLink li.normal { display:none; }
	#body ul.subLink a {  height:48px; }
	#body ul.subLink span.item01 { background-position: 0 -200px; }
	#body ul.subLink span.item02 { background-position: -301px -200px; }

	ul.snsLink { position:static; text-align:center;}
	ul.snsLink li { float:none; display:inline-block; margin:0 7px; }

	#foot { width:300px; height:127px; } 
	#foot span.happy { float:none; display:block; width:88px; height:35px; margin:21px auto 15px; }
	#foot address { clear:both; margin:0; }
	#foot address span { display:block; text-align:center; }
	#foot p { display:none; }
}