@import url('../../../css/normalize.css');
@import url('../../../css/common.css');
@import url('../../../css/webfont.css');

/*
------------------------------------------------
 common 
------------------------------------------------
*/

body, html{background: #fff}
.body_wrap{width:1280px; height:900px;}
.content_container { display:none; position:absolute; top:0; left:50%; width:1280px; height:900px; margin:0 0 0 -640px; overflow:hidden;}
.content_page_wrap { display:none;}
/*#content_page {position:absolute; width:1280px; height:900px; z-index:1;}*/
div.pages { display:none; position:absolute; top:0; left:0; width:1280px; height:900px; overflow:hidden;}
.acc_tag{position:absolute; left:-9999px; top:-9999px; visibility:hidden; height:0px; width:0; text-indent:-9999px; font-size:0 }

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

/* btns */
.bn-back, .bn-preview, .bn-next{display:none; position:absolute;}
.bn-back {top:0; right:0; z-index:10;}
.bn-preview {top:50%; left:0; margin-top:-33px;z-index:100; padding:23px 25px;}
.bn-next {top:50%; right:0; margin-top:-33px; z-index:100; padding:23px 25px;}
.bn-back span, .bn-preview span, .bn-next span{display:block; text-indent:-9999px; overflow: hidden;}
.bn-back span{width:60px; height:60px; background:url('../img/bn_back.png') no-repeat left top; overflow: hidden;}
.bn-preview span{width:14px; height:21px; background:url('../img/bn_preview_white.png') no-repeat left top}
.bn-next span{width:14px; height:21px; background:url('../img/bn_next_white.png') no-repeat left top}
.inverse.bn-back span{background:url('../img/bn_back.png') no-repeat left top;}
.inverse.bn-preview span{background:url('../img/bn_preview.png') no-repeat left top;}
.inverse.bn-next span{background:url('../img/bn_next.png') no-repeat left top;}

/* sns */
.sns-bns {position:absolute; bottom:40px; left:32px; display:none; z-index:10000;}
.sns-bns li {border-bottom:1px solid #fff}
.sns-bns li.inverse{border-bottom:1px solid #000;}
.sns-bns li a { display:block; overflow: hidden; width:21px; height:51px; background-position:left center; background-repeat:no-repeat; text-indent:-9999px}
.sns-bns li.sns_3 { border: none}
.sns-bns li.sns_0 a{background-image:url('../img/bn_facebook_white.png');}
.sns-bns li.sns_1 a{background-image:url('../img/bn_twitter_white.png');}
.sns-bns li.sns_2 a{background-image:url('../img/bn_qqq_white.png');}
.sns-bns li.sns_3 a{background-image:url('../img/bn_google_white.png');}
.sns-bns li.inverse.sns_0 a{background-image:url('../img/bn_facebook.png');}
.sns-bns li.inverse.sns_1 a{background-image:url('../img/bn_twitter.png');}
.sns-bns li.inverse.sns_2 a{background-image:url('../img/bn_qqq.png');}
.sns-bns li.inverse.sns_3 a{background-image:url('../img/bn_google.png');}

/* indicator */
.indicator {position:absolute; left:50%; top:95%; z-index:10; margin-left:-32px; }
.indicator li{position:relative; width:15px; height:15px; margin: 0px 6px 0px 0px; float: left; cursor : pointer;}
.indicator li a{display:block; width:15px; height:15px; text-indent:-10000px; overflow:hidden;}
.indicator-btn {background:URL('../img/indicator_white.png') 0 0 no-repeat;}
.indicator-btn.on {background:URL('../img/indicator_on_white.png') 0 0 no-repeat;}
.indicator-btn.inverse {background:URL('../img/indicator.png') 0 0 no-repeat;}
.indicator-btn.inverse.on {background:URL('../img/indicator_on.png') 0 0 no-repeat;}

/* focus */
.sns-bns li a:focus { outline: 1px dotted #fff}
.indicator-btn a:focus { outline: 1px dotted #fff}
a.bn-next:focus { outline: 1px dotted #fff}
a.bn-preview:focus { outline: 1px dotted #fff}
.sns-bns li.inverse a:focus { outline: 1px dotted #000}
.indicator-btn.inverse a:focus { outline: 1px dotted #000}
a.bn-next.inverse:focus { outline: 1px dotted #000}
a.bn-preview.inverse:focus { outline: 1px dotted #000}

/* loading */
.loading { position:absolute; top:50%; left:50%; margin:-8px 0 0 -38px; width:76px; height:16px; background:url('../img/loading.png') 0 0; }
.loading p { position:relative; left:0%; top:25px; text-align:center; font:12px/1 'samsungif_bd'; }

/* info_rotate */
.info_rotate { position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; z-index:9999; display:none; }
.info_rotate img { width:100%; }

/*
------------------------------------------------
 customized contents
------------------------------------------------
*/
.pages, .cover{position:absolute; width:1280px; height: 900px}
div.cover { z-index: 50 !important;}
.page01 { background-color: #181818;}
.page01 h1 {
	top: 50%;
	width: 1280px;
	display: block;
	text-align: center;
	margin-top: -76px;
	position: absolute
}

.page02 { background: #000}

.slideBox,
.thumb-imgs,
.slideBox ul.panel,
.slideBox .textBox,
.thumb-imgs li p,
.thumb-imgs ul,
.thumb-imgs li{
	position: absolute;
	left: 0;
	top: 0;
	width: 1280px;
	height: 900px;
	display: block;
}


.slideBox { z-index: 250}

.slideBox .menuList {
	position: absolute;
	z-index: 300;
	width: 1280px;
	height: 900px;
	left: 0;
	top: 0;
}
.slideBox .menuList li {
	position: absolute;
	width: 426px;
	top: 0;
	height: 900px;
}
.slideBox .menuList li a {
	width: 100%;
	height: 900px;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
}
.slideBox .menuList .menu0{ left: 0;}
.slideBox .menuList .menu1{ left: 426px;}
.slideBox .menuList .menu2{
	/*left:inherit !important;*/
	right:0 !important;
}

/* menu Text */
.slideBox .textBox{ z-index: 200}
.slideBox .textBox ul {
	width: 1155px;
	height: 157px;
	position: absolute;
	left: 56px;
	top: 401px;
	background: url("../img/bg_slide_menu.png") no-repeat bottom;
}
.slideBox .textBox li {
	width: 385px;
	height: 158px;
	position: relative;
	float: left;
}
.slideBox .textBox li span {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 385px;
	height: 158px;
	background: url("../img/txt_slide_menu.png") no-repeat 0px 0px;
}
.slideBox .textBox .menu0 span{ background-position: 0px 0px}
.slideBox .textBox .menu1 span{ background-position: -385px 0px}
.slideBox .textBox .menu2 span{ background-position: -770px 0px}
.slideBox .textBox span.text{ height:150px}
.slideBox .textBox span.line {
	height: 10px;
	margin-top: 148px;
}
.slideBox .textBox .menu0 span.line{ background-position: 0px -149px}
.slideBox .textBox .menu1 span.line{ background-position: -385px -149px}
.slideBox .textBox .menu2 span.line{ background-position: -770px -149px}


/* images panel */
.slideBox ul.panel { z-index: 150;}
.slideBox .panel li {
	position: absolute;
	top: 0;
	height: 900px;
}
.slideBox .panel .menu0 {
	width: 426px;
	background: url("../img/bg_slied_menu0.png") no-repeat left top;
}
.slideBox .panel .menu1 {
	width: 427px;
	background: url("../img/bg_slied_menu1.png") no-repeat center top;
}
.slideBox .panel .menu2 {
	width: 426px;
	background: url("../img/bg_slied_menu2.png") no-repeat right top;
}
.slideBox .panel li .mask {
	z-index: 1;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 900px;
	opacity: 0;
	filter: alpha(opacity=0);
}
.slideBox .panel .menu0 .mask {
	width: 100%;
	background: url("../img/bg_slied_menu0_on.png") no-repeat left top
}
.slideBox .panel .menu1 .mask {
	width: 100%;
	background: url("../img/bg_slied_menu1_on.png") no-repeat center top
}
.slideBox .panel .menu2 .mask {
	width: 100%;
	background: url("../img/bg_slied_menu2_on.png") no-repeat right top
}



.thumb-imgs { z-index: 1;}
.thumb-imgs ul{ z-index: 1}
.thumb-imgs li{
	/*opacity: 0;
	filter: alpha(opacity=0)*/
}
.thumb-imgs li img{}
.thumb-imgs li .text{
	z-index: 10;
}
.thumb-imgs li p { z-index: 4}

.thumb-imgs .bg0{}
.thumb-imgs .bg1{}
.thumb-imgs .bg2{}

.thumb-imgs li > img {
	position: absolute;
	left: 0;
	top: 0;
	width: 1280px;
	height: 900px;
	display: block;
}
.thumb-imgs .sequence1 { z-index: 3;}
.thumb-imgs .sequence2 { z-index: 2;}
.thumb-imgs .sequence3 { z-index: 1;}

.page03 { background: url("../img/bg_sc3.jpg") no-repeat;}
.page03 .webfont{
	position: absolute;
	left: 681px;
	top: 612px;
	width: 491px;
}




/* popup */
.pages, .popup-pages { display:none; position:absolute; top:0; left:0; width:1280px; height:900px; overflow:hidden;}/* 2014.07.22 jongjin */
.popup-pages:first-child{ display: block; }
.acc_tag{ position:absolute; left:-9999px; top:-9999px; visibility:hidden; height:0px; width:0; text-indent:-9999px; font-size:0 }
.show { display:block; }
.hide { display:none; }
.popup { position:absolute; left:0px; top:0px; width:1280px; height:900px;}
.popup {z-index:10000 !important;}
.popup .close-btn {position: absolute; z-index: 1000; right: 30px; top: 30px; width:83px; height:83px; opacity: 0; filter: alpha(opacity=0);}
.popup .close-btn a {
	display:block;
	width:83px; height:83px;
	background: url('../img/close_btn.png') 0 0 no-repeat;
	text-indent:-9999px; overflow:hidden; color:#fff;
}
.popup .close-btn.inverse a{background:url('../img/close_btn_black.png') 0 0 no-repeat; color:#000}

/* working */
.bn-pop-prev, .bn-pop-next {
	_display: none;
	position: absolute;
	left: 50%;
	z-index: 100;
	margin-left: -31px;
	width: 19px;
	padding: 12px 21px;
	_background-color: rgba(80, 134, 230, 0.5);
}
.bn-pop-prev {top:11px}
.bn-pop-next {bottom:11px}
.bn-pop-prev span, .bn-pop-next span{display:block; width:19px; height:11px; background:url('../img/arrow_pop.png') no-repeat; text-indent:-9999px; overflow: hidden;}
.bn-pop-prev span{background-position: 0 0; _background-color:rgba(190,255,140,0.5);}
.bn-pop-next span{background-position: 0 -42px; _background-color:rgba(190,255,140,0.5);}
.inverse.bn-pop-prev span{background-position: 0 -21px }
.inverse.bn-pop-next span{background-position: 0 -63px}
.pop-haed{
	position:absolute;
	left:-9999px; top:-9999px;
	visibility:hidden;
	height:0px; width:0;
	text-indent:-9999px; font-size:0
}

.popup .pop_hdcopy.inverse img{margin-top:-18px}
.popup .text_wrap{
	position: absolute;
	z-index: 10;
}
.popup .pgview1{ z-index: 1}
.popup .pgview2{ z-index: 2}
.popup .pgview3{ z-index: 3}
.popup .pgview4{ z-index: 4}
.popup h3,
.popup .webfont{
	position: absolute;
}


.popup .pics_wrap{ position:relative; width: 1280px; height: 900px;}
#popup-1 .pgview1 { background: url("../img/bg_dummy.png") repeat}
#popup-1 .pgview2 { background: url("../img/bg_popup1_2.jpg") no-repeat}
#popup-1 .pgview3 { background: url("../img/bg_popup1_3.jpg") no-repeat}

#popup-1 .pgview2 {}
#popup-1 .pgview2 h3{
	left: 121px;
	top: 286px;
}
#popup-1 .pgview2 .webfont{
	left: 121px;
	top: 445px;
	color: #fff;
	width: 500px;
}



#popup-2 .pgview1 { background: url("../img/bg_dummy.png") repeat}
#popup-2 .pgview2 { background: url("../img/bg_popup2_2.jpg") no-repeat}
#popup-2 .pgview3 { background: url("../img/bg_popup2_3.jpg") no-repeat}
#popup-2 .pgview4 { background: url("../img/bg_popup2_4.jpg") no-repeat}

#popup-2 .pgview2 {}
#popup-2 .pgview2 h3{
	left: 699px;
	top: 446px;
}
#popup-2 .pgview2 .webfont{
	left: 697px;
	top: 518px;
	color: #000;
	width: 416px;
}
#popup-2 .pgview4 {}
#popup-2 .pgview4 h3{
	left: 650px;
	top: 529px;
}
#popup-2 .pgview4 .webfont{
	left: 651px;
	top: 637px;
	color: #000;
	width: 500px;
}

#popup-3 .pgview1 { background: url("../img/bg_dummy.png") repeat}
#popup-3 .pgview2 { background: url("../img/bg_popup3_2_1.jpg") no-repeat}
#popup-3 .pgview3 { background: url("../img/bg_popup3_3.jpg") no-repeat}
#popup-3 .pgview4 { background: url("../img/bg_popup3_4.jpg") no-repeat}

#popup-3 .img-roll {
	position: absolute;
	width: 1280px;
	height: 900px;
	left: 0;
	top: 0
}
#popup-3 .img-roll img {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0
}

#popup-3 .pgview2 {}
#popup-3 .pgview2 h3{
	left: 120px;
	top: 211px;
}
#popup-3 .pgview2 .webfont{
	left: 121px;
	top: 321px;
	color: #000;
	width: 384px;
}
#popup-3 .pgview2 .ex-img{
	position: absolute;
	left: 100px;
	top: 553px;
}

#popup-3 .pgview3 {}
#popup-3 .pgview3 h3{
	left: 120px;
	top: 566px;
}
#popup-3 .pgview3 .webfont{
	left: 121px;
	top: 676px;
	color: #000;
	width: 486px;
}

#popup-3 .pgview4 {}
#popup-3 .pgview4 h3{
	left: 339px;
	top: 594px;
}
#popup-3 .pgview4 .webfont{
	left: 241px;
	top: 703px;
	color: #fff;
	width: 800px;
	text-align: center;
}


/* 2014.05.19 webFont ADD */
/*.webfont_head{ margin-bottom:18px; font-size: 18px; line-height: 28px; font-family:secgcb}*/
.webfont{ font-size: 14px;
	font-family: secgcm;
	line-height: 27px;
	letter-spacing: 0px;
	text-align: justify;
	word-break: normal;
}
.webfont span { letter-spacing: 0; }
/* 2014.05.19 webFont ADD */