/* RESET */
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset, input {
	margin: 0;
	padding: 0;
}

img, fieldset, iframe {
	border: 0;
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

/* 
BODY START
*/
html {
	font-size: 0.75em;
	color: #666;
	font-family: sans-serif, dotum, gulim, Arial, Helvetica, 돋움, 굴림, 맑은고딕;
}

body {
	background: url(img/body_bg.png) repeat-x center top;
}

header {
	width: 100%;
	height: 70px;
	background: #666 url(img/top_bg.jpg) repeat-x;
}

section#cont {	
	width: 1000px;
	height: 575px;
	margin: 70px auto 0;
	position:relative;
}

section#cont .article {
	width: 1000px;
	height: 505px;
}

nav {
	width: 100%;
	height: 40px;
	background: url(img/nav_bg.jpg) repeat-x;
}

footer#copy {
	width: 690px;
	height: 40px;
	margin: 52px auto;
	background:url(img/copy_bg.jpg) no-repeat;
}

/* Header 로고와 홈, 사운드 버튼, sns버튼 */
#top {
	width: 1000px;
	margin: 0 auto;
	position: relative;
	height: 70px;
}
/*
h1.logo {
	width: 257px;
	height: 39px;
	float: left;
	margin-left: -3px;
	margin-top: 21px;
	background: url(img/logo.png) no-repeat;
	text-indent:-999em;
}
h1.logo a {
	display: block;
	height: 39px;
}*/

h1.logo2 {
	width: 78px;
	height: 70px;
	float: left;
}

span.sublogo {
	width: 240px;
	height: 70px;
	display: block;
	float: left;
}

.head_btn {
	width: 49px;
	height: 18px;
	float: right;
	margin-top: 36px;
}

.head_btn span {
	display: block;
	float: left;
}

.head_btn span:first-child {
	margin-right: 3px;
}

/* twitter, facebook 아이콘 */
.snsIcon {
	position:absolute;
	right:0;
	top:90px;
	z-index:100;
}

span.twt, span.fb {
	width: 26px;
	height: 26px;
	display: block;
	float: left;
	margin-left: 2px;
	z-index:150;
}



/* Navigation 중앙의 네비게이션 영역 */
.gnb {
	width: 607px;
	height: 40px;
	margin: 0 auto;
	overflow: hidden;
}

.gnb li {
	float: left;
	display: inline;
	height: 40px;
}

.gnb li a {
	height: 40px;
	display: block;
	text-indent:-999em;
	background: url(img/nav.jpg) no-repeat;
}

.gnb li a.design { width: 114px; background-position: left -40px; }
.gnb li a.tech { width: 160px; background-position: -115px -40px; }
.gnb li a.spec { width: 96px; background-position: -274px -40px; }
.gnb li a.store { width: 106px; background-position: -370px -40px; }
.gnb li a.whyfix { width: 131px; background-position: -476px -40px; }

.gnb li a.design.on { background-position: left top; }
.gnb li a.tech.on { background-position: -115px top; }
.gnb li a.spec.on { background-position: -274px top; }
.gnb li a.store.on { background-position: -370px top; }
.gnb li a.whyfix.on { background-position: -476px top; }

.gnb li a.design:hover { background-position: left top; }
.gnb li a.tech:hover { background-position: -115px top; }
.gnb li a.spec:hover { background-position: -274px top; }
.gnb li a.store:hover { background-position: -370px top; }
.gnb li a.whyfix:hover { background-position: -476px top; }


/* 버튼 누를 때 Inner shadow 효과, boxbtn 클래스만 추가하면 섬네일 및 메인 메뉴에서 동일한 효과 적용 */
.boxbtn:active { 
	-webkit-box-shadow: inset 0 1px 15px  rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0 1px 15px  rgba(0,0,0,0.5);
	-ms-box-shadow: inset 0 1px 15px  rgba(0,0,0,0.5);
	box-shadow: inset 0 1px 15px  rgba(0,0,0,0.5);
	behavior: url(dist/PIE.htc);
}


/* Copyright 하단 카피라이트 */
h2.foot_logo {
	width: 74px;
	height: 40px;
	float: left;
	text-indent:-999em;
}

h2.foot_logo a {
	display: block;
	height: 40px;
}

.copyright {
	width: 584px;
	height: 40px;
	float: left;
	text-indent:-999em;
}

/* design 페이지 스타일 시트 */
article.designWrap li {
	list-style: none;
}

.designWrap {
	height: auto;
	overflow: hidden;
}

.designImg {
	float: left;
	width: 650px;
	height: 505px;
	margin-left: 90px;
	overflow: hidden;
}
.textLi {
	float: left;
	margin-top: 41px;
	text-indent: -999em;
	margin-right: 40px;
}

.textLi li {
	width: 112px;
	height: 32px;
	display: block;
	margin-bottom: 6px;
	background: url(img/design_li.jpg) no-repeat;
	
	-webkit-box-shadow: 3px 3px 3px #ddd;
	-moz-box-shadow: 3px 3px 3px #ddd;
	-ms-box-shadow: 3px 3px 3px #ddd;
	box-shadow: 3px 3px 3px #ddd;
	behavior: url(dist/PIE.htc); 
	
	cursor: pointer;
}

.textLi li a {
	display: block;
	height: 32px;
}

.textLi li.detail { background-position: left top; }
.textLi li.acce { background-position: left -40px; }
.textLi li.package { background-position: left -80px; }
.textLi li.vr360 { background-position: left -120px; }
/*.textLi li.vr360 { background-position: left -160px; }*/

.textLi li.detail:hover { background-position: -116px top; }
.textLi li.acce:hover { background-position: -116px -40px; }
.textLi li.package:hover { background-position: -116px -80px; }
.textLi li.vr360:hover { background-position: -116px -120px; }
/*.textLi li.vr360:hover { background-position: -116px -160px; }*/

.textLi li.detail.active { background-position: -116px top; }
.textLi li.acce.active { background-position: -116px -40px; }
.textLi li.package.active { background-position: -116px -80px; }
.textLi li.vr360.active { background-position: -116px -120px; }
/*.textLi li.vr360.active { background-position: -116px -160px; }*/

.thumbLi {
	width: 97px;
	height: 100%;
	overflow: hidden;
	float: left;
	margin-top: 41px;
}

.thumbLi li {
	width: 87px;
	height: 57px;
	margin-bottom: 8px;
	border: 5px solid #e5e5e5;
}

.thumbLi li a {
	height: 57px;
	display: block;
}

.thumbLi li.active { border: 5px solid #00c3da; }
.thumbLi li:hover {	border: 5px solid #00c3da; }


.vr360if {
	width: 670px;
	height: 505px;
	float: left;
	margin-left: 40px;
	position: relative;
	
}

.designList {
	display:none;
}


/* spec 페이지 스타일 시트 */
article.specWrap {
	color: #000;
	height: 505px;
	position: relative;
	background: url(img/spec_bg.jpg) no-repeat;
}

article.specWrap ul {
	margin-left: 15px;
	margin-bottom: 25px;
	display: none;
}

article.specWrap h3 { margin-left: -15px; }
article.specWrap ul li { list-style: none; }
article.specWrap ul ul { margin-bottom: 0; }

/*span.listen {
	display: inline;
	position:absolute;
	bottom: 1px;
	left: 154px;
}*/

/* why fix 페이지 스타일 시트 */
.whyfixWrap {
	background: url(img/whyfix_bg.jpg);
	color:#000;
	overflow: hidden;
	height: 505px;
}
.whyfixWrap h2, .whyfixWrap p, .whyfixWrap ul, .whyfixWrap li {
	display:  none;
}
/*
.fixPhil {
	width: 261px;
	height: 219px;
	margin: 43px 0 0 29px;
	display: block;
	background: url(img/fixPhil.png) no-repeat;
	float: left;
	text-indent: -999em;
}

.fixImg {
	width: 563px;
	height: 214px;
	margin: 51px 0 0 117px;
	background: url(img/fix.png) no-repeat;
	float: left;
}

.whyfixWrap ul {
	float: left;
	clear: both;
	overflow: hidden;
	margin: 95px 0 0 29px;
	width: 870px;
}

.whyfixWrap ul li {
	float: left;
	height: 52px;
	display: inline;
	text-indent: -999em;
}

li.whyfix1, li.whyfix2, li.whyfix3 {
	background:url(img/whyfix.png) no-repeat;
}
li.whyfix1 {
	width: 248px;
	margin-right: 64px;
	background-position: left top;
}
li.whyfix2 {
	width: 245px;
	margin-right: 54px;
	background-position: -248px top;
}
li.whyfix3 {
	width: 257px;
	background-position: -494px top;
	display: block;	
}*/


/* tech 페이지 스타일 시트 */
.content {
	float: left;
	width: 890px;
	height: 575px;
	display: none;
}

.tech_nav {
	float: right;
	width: 104px;
	margin-top: 79px;
}

.tech_nav li {
	list-style:none;
	width: 100px;
	height: 67px;
	margin-bottom: 10px;
	
	-webkit-box-shadow: 3px 3px 3px  #ddd;
	-moz-box-shadow: 3px 3px 3px  #ddd;
	-ms-box-shadow: 3px 3px 3px  #ddd;
	box-shadow: 3px 3px 3px  #ddd;
	behavior: url(dist/PIE.htc);
	
	background: url(img/tech_nav.jpg) no-repeat -104px top;
	text-indent:-999em;
}

.tech_nav li a {
	height: 67px;
	display: block;
}

.tech_nav li.nav1 { background-position: -104px top; }
.tech_nav li.nav2 { background-position: -104px -70px; }
.tech_nav li.nav3 { background-position: -104px -140px; }
.tech_nav li.nav4 { background-position: -104px -210px; }
.tech_nav li.nav5 { background-position: -104px -280px; }

.tech_nav li.nav1:hover { background-position: left top; }
.tech_nav li.nav2:hover { background-position: left -70px; }
.tech_nav li.nav3:hover { background-position: left -140px; }
.tech_nav li.nav4:hover { background-position: left -210px; }
.tech_nav li.nav5:hover { background-position: left -280px; }

.tech_nav li.nav1.active { background-position: left top; }
.tech_nav li.nav2.active { background-position: left -70px; }
.tech_nav li.nav3.active { background-position: left -140px; }
.tech_nav li.nav4.active { background-position: left -210px; }
.tech_nav li.nav5.active { background-position: left -280px; }


/* Gold Plate 슬라이더 영역 */
.goldSlider {
	width: 796px;
	height: 505px;
	float: left;
	position: relative;
}

.goldtxt {
	position: absolute;
	width: 470px;
	height: 62px;
	bottom: -5px;
	left:170px;
	z-index: 100;
}

/* 슬라이더 화살표와 이미지 위치 */
.aa_slider {
	position: absolute;
	width: 600px;
	height: 420px;
	top: 50%;
	margin-top: -210px;
	left:50%;
	margin-left: -300px;
	overflow: scroll;
}

.aa_slider ul {
	width: 3980px;
	list-style: none;
}

.aa_slider li {
	float: left;
}

#slider-nav button {
	cursor: pointer;
	z-index: 100;
	border: none;
}

.arrowL, .arrowR {
	width: 45px;
	height: 68px;
	background: url(img/slide_arrow.png) no-repeat;
	direction: block;
	cursor: pointer;
	position: absolute;
	z-index: 100;
	top: 150px;
	text-indent: -999em;
}

.arrowL {
	background-position: left top;
	left: 39px;
}
.arrowR {
	background-position: right top;
	right: 39px;
}

.arrowL:hover { background-position: left bottom; }
.arrowR:hover { background-position: right bottom; }
.arrowL:active { background-position: left bottom; top:155px; }
.arrowR:active { background-position: right bottom; top:155px; }

/* Gold Plate 섬네일 리스트 */

.thumbLi2 {
	width: 90px;
	height: 100%;
	overflow: hidden;
	float: left;
	margin-top: 84px;
	margin-left: 4px;
}

.thumbLi2 li {
	width: 90px;
	height: 65px;
	margin-bottom: 8px;
}

.thumbLi2 li a {
	border: 5px solid #e5e5e5;
	height: 55px;
	display: block;
}

.thumbLi2 li a.on { border: 5px solid #00c3da; }
.thumbLi2 li a:hover { border: 5px solid #00c3da; }


/* index 이미지 페이드인 페이드아웃 */
#indexslide {
    position:relative;
    height: 536px;
    width: 1000px;
    margin:39px auto 0;
}

#indexslide img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    *padding-top: 39px;/* IE7 and below */
}

#indexslide img.active {
    z-index:10;
    opacity:1.0;
}

#indexslide img.last-active {
    z-index:9;
}

section#indexcont {
	background: url(img/index_bg.jpg) repeat-x;
	width: 100%;
	padding-top: 30px;
	height: 615px;
}

h2.indextitle {
	width: 334px;
	height: 39px;
	float: left;
	z-index: 100;
	position: absolute;
	top: 115px;
	left: 50%;
	margin-left: -167px;
	text-indent: -999em;
	background: url(img/index_title.png) no-repeat left top;
}

h2.indextitle2 {
	width: 334px;
	height: 48px;
	float: left;
	z-index: 100;
	position: absolute;
	top: 640px;
	left: 50%;
	margin-left: -167px;
	text-indent: -999em;
	background: url(img/index_title.png) no-repeat left -44px;
}

/* 20120829 */

section#indexcont_v2 {
	background: url(img/index_bg.jpg) repeat-x;
	width: 100%;
	padding-top: 30px;
	*padding-top: 30px;
	height: 615px;
	position:relative;
}

#indexslide_v2 {
    position:relative;
    height: 536px;
    width: 1000px;
    margin:39px auto 0;
    overflow: hidden;
    left: 0;
    background: transparent;
    /*opacity: 0;*/
    /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    /*filter: alpha(opacity=0);*/
}

/**/

#indexslide_v2 .indeximg {
	*margin-top: 30px; /* IE 7 */
	position: absolute;
	top: 0;
	left: 0;
	width: 1000px;
	height: 536px;
    z-index:8;
    opacity:0;
    -ms-filter: alpha(opacity=0);
    filter: alpha(opacity=0);

}

#indexslide_v2 .indeximg.active {
    z-index:10;
    opacity:1.0;
    -ms-filter: alpha(opacity=100);
    filter: alpha(opacity=100);
}

#indexslide_v2 .indeximg.last-active {
    z-index:9;
}

#indexslide_v2 .indeximg.no1 {
	background: url(img/indeximg1.jpg) no-repeat;
	left:-200px;
}
#indexslide_v2 .indeximg.no2 {
	background: url(img/indeximg2.jpg) no-repeat;
}

/**/

h2.indextitle_v2 {
	width: 334px;
	height: 39px;
	float: left;
	z-index: 100;
	position: absolute;
	top: -25px;
	left: 50%;
	margin-left: -167px;
	text-indent: -999em;
	background: url(img/index_title.png) no-repeat left top;
}

h2.indextitle2_v2 {
	width: 334px;
	height: 48px;
	float: left;
	z-index: 100;
	position: absolute;
	bottom: -20px;
	left: 50%;
	margin-left: -167px;
	text-indent: -999em;
	background: url(img/index_title.png) no-repeat left -44px;
}