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

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

body{}
.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:-42px; }
.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;} /* 20140619 jong */
.indicator-btn.inverse.on {background:URL('../img/indicator_on.png') 0 0 no-repeat;}

/* 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
------------------------------------------------
*/
.page01 { background:url(../img/bg_sc01.jpg) no-repeat 0px 0px; }
.page01 .webfont{ position: absolute; position: absolute; left: 50%; top: 587px; 
width: 814px; margin-left: -407px; font-size: 17px}
.page02 { background:url(../img/bg_sc02.jpg) no-repeat 0px 0px; }
.page02 .webfont{ position: absolute; width: 696px; left: 294px; top: 416px;}
.page03 { background: #000}
.page03 .cover{ background:url(../img/bg_sc03.jpg) no-repeat 0px 0px; }
.page03 ol{width: 532px; position: absolute; left: 386px; top: 71px;}
.page03 ol li{ width: 246px; height: 246px; margin: 5px 0 0 5px; float: left;}
.page03 ol li a { display:block; width: 246px; height: 246px; 
background-image:url(../img/bg_nav.jpg); background-position: 0px 0px; background-repeat: no-repeat}
.page03 ol li span{ display: block; text-indent: -9999px; overflow: hidden}

.page03 ol li span.over{width: 246px; height: 246px; background:url(../img/bg_nav.jpg) no-repeat; opacity:0; filter:alpha(opacity=0); transition:0.3s opacity ease;} /*jong*/
.page03 ol .menu01 a{ background-position: 0px 0px}
.page03 ol .menu02 a{ background-position: -251px 0px}
.page03 ol .menu03 a{ background-position: 0px -251px}
.page03 ol .menu04 a{ background-position: -251px -251px}
.page03 ol .menu05 a{ background-position: 0px -502px}
.page03 ol .menu06 a{ background-position: -251px -502px}
/*jong*/
.page03 ol a:focus span.over, .page03 ol a:hover span.over, .page03 ol a.on span.over{ opacity:1; filter:alpha(opacity=100)}
.page03 ol .menu01 a span.over{ background-position: -497px 0px}
.page03 ol .menu02 a span.over{ background-position: -748px 0px}
.page03 ol .menu03 a span.over{ background-position: -497px -251px}
.page03 ol .menu04 a span.over{ background-position: -748px -251px}
.page03 ol .menu05 a span.over{ background-position: -497px -502px}
.page03 ol .menu06 a span.over{ background-position: -748px -502px}


.page04 { background:url(../img/bg_sc04.jpg) no-repeat 0px 0px; }
.page04 .webfont{ position: absolute; left: 675px; top: 496px; width: 445px; }

/* roll */
.rollcase { position: absolute; left: 701px; top: 140px; width: 528px}
.rollcase li{ height: 199px; position: relative; overflow: hidden}
.rollcase li a { width: 149px; height: 180px; display: block; position: absolute; left: 1px; top: 1px; z-index: 20;}
.rollcase li a:focus { outline: 1px dotted #021aff}
.rollcase .animate{ position: absolute; right: 21px; top:0px; width: 358px; height:100%; overflow: hidden}
.rollcase .imgTxt{ position: absolute; right: 377px; top:0px; z-index: 10;}
.rollcase .mask{ opacity:0.5; filter:alpha(opacity=50); z-index: 5; width: 377px; height:100%;
position: absolute; right: 377px; top:0px; background: #fff}
.rollcase .case01{ height: 193px}
.rollcase .case02{ height: 227px}
.rollcase .case02 .imgTxt{ margin: 0 0 0 0}
.rollcase .case03{ height: 198px; margin-top: 0px;}
.rollcase .case01 a{ height: 191px}
.rollcase .case02 a{ height: 225px}
.rollcase .case03 a{ height: 196px;}

.pages, .cover{position:absolute; width:1280px; height: 900px}

/* popup */
.popup { position:absolute; left:0px; top:0px; width:1280px; height:900px; z-index:10000; background:#fff;}
.popup .close-btn {position: absolute; z-index: 9999; right: 34px; top: 17px; color:#000;}
.popup .close-btn a { display:block; background:url('../img/close_btn.png') 0 0 no-repeat; width:83px; height:83px; text-indent:-10000px; margin:14px 0 0 1160px; overflow:hidden;}
.popup .close-btn a:focus{ outline:1px dotted #fff}

.popup .product-nav {padding-top: 32px}
.popup .product-nav li{ float: left; margin-right: 10px;}
.popup .product-nav a{ display: block; position: relative; width:76px; height: 50px; overflow: hidden;}
.popup .product-nav a img{ width: 76px; height: 50px;}
.popup .product-nav li.on a{ width: 72px; height: 46px; border: 2px solid #5e513e;}
.popup .product-nav li.hover a{ width:72px; height: 46px; border: 2px solid #444; opacity:0.6; filter:alpha(opacity=60)}
.popup .product-nav li.on a img, .popup .product-nav li.hover a img{margin:-2px 0 0 -2px}
.popup .webfont { position: absolute; z-index: 2;}
.popup .product-bg{}
.popup .product-bg li{display:none; position:absolute; left:0; top:0; z-index: -1}
.popup .product-bg li:first-child{display:block}

.preview01 { background:url('../img/bg_pop11.jpg') 0 0 no-repeat;}
.preview01 .webfont { width: 403px; top: 206px; left: 80px; }
.preview01 .img_box { white-space: nowrap; margin: -22px 0 0 -6px;}
.preview01 .img02 { margin: 8px 0 0 18px;}

.preview02 { background:url('../img/bg_pop21.jpg') 0 0 no-repeat;}
.preview02 .webfont {width: 378px; top: 395px; left: 85px;}
.preview02 .close-btn a{ background:url('../img/close_btn_black.png') 0 0 no-repeat;}
.preview02 .close-btn a:focus{ outline: 1px dotted #000}

.preview03 { background:url('../img/bg_pop31.jpg') 0 0 no-repeat;}
.preview03 .webfont { top: 755px; left: 80px;}

.preview04 { background:url('../img/bg_pop41.jpg') 0 0 no-repeat;}
.preview04 .webfont { top: 755px; left: 80px;}

.preview05 { background:url('../img/bg_pop51.jpg') 0 0 no-repeat;}
.preview05 .webfont { width: 381px; top: 443px; left: 81px;}

.preview06 { background:url('../img/bg_pop61.jpg') 0 0 no-repeat;}
.preview06 .webfont { top: 758px; left: 80px;}



/* 2014.05.19 webFont ADD */
/*.webfont_head{ margin-bottom:18px; font-size: 18px; line-height: 28px; font-family:secgcb}*/
.webfont{ font-size: 16px; color:#222; font-family: samsungif_medium; line-height: 25px; text-align:justify; word-break: normal;}
.webfont span { letter-spacing: 0; }
.webfont em { font-style: normal; text-align: center; display: block }
/* 2014.05.19 webFont ADD */