@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 {position:absolute; top:0; right:0; display:none; z-index:100;}
.bn-preview {position:absolute; top:50%; left:0; margin-top:-33px; display:none;z-index:100; padding:23px 25px;}
.bn-next {position:absolute; top:50%; right:0; margin-top:-33px; display:none;z-index:100; padding:23px 25px;}

/* sns */
.sns-bns {position:absolute; bottom:40px; left:32px; display:none; z-index:10000;}
.sns-bns li {}
.sns-bns li a { display:block; width:21px; height:51px }
.sns-bns li a.underline{border-bottom:1px solid #000;}
.sns-bns li a > img{margin-top:12px;}
.sns-bns li a > img.mTop14{margin-top:14px;}

/* indicator */
.indicator {position:absolute; left:50%; top:95%; z-index:10; margin-left:-15px; }
.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.png') 0 0 no-repeat;}
.indicator-btn.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
------------------------------------------------
*/
.pages {background:url('../img/page_bg.jpg') no-repeat left top}
.cover{position: absolute} 

/* page1- intro */
#page1 { background:url('../img/page_bg_intro.jpg') no-repeat left top;}
#page1 .copy_wrap{position:absolute; left:135px; top: 364px;}
#page1 .copy_wrap h1.title{display:none; line-height: 0; }
#intro_img{position:absolute; width:1280px; height:900px; z-index:10; overflow:hidden}
#intro_img img{position: absolute;}

#intro_img img.model_100{left:450px; top:130px; z-index:1}
#intro_img img.model_200{left:900px; top:230px; z-index:2}
#intro_img img.model_300{left:300px; top:360px; z-index:3}

/* page2 - showroom */
#page2 .copy_wrap{position:absolute; left:0; top: 98px; width:1280px; z-index: 10}
#page2 .copy_wrap h2.title{text-align:center; margin-bottom: 12px; line-height: 0}
#page2 .copy_wrap .sub_copy{font-size: 14px; font-family: secgcm; line-height: 24px; letter-spacing: 0; text-align:center;  }
.showroom{position:absolute; left:0; top:0;}
.showroom .list_wrap{position:absolute; left:230px; top:180px; width:840px; height:660px;}
.showroom .list_wrap>li{display:none; position:absolute; left:0; top:0; z-index:10}
.showroom .list_wrap>li:first-child{display:block}
.showroom .list_wrap ul li{ position:absolute; }
.showroom .list_wrap ul li span:first-child{display:none}
.showroom .list_wrap ul li.pos1{z-index:1; left:-20px; top:-10px}
.showroom .list_wrap ul li.pos2{z-index:5; left:200px; top:-20px}
.showroom .list_wrap ul li.pos3{z-index:2; left:460px; top:-20px}
.showroom .list_wrap ul li.pos4{z-index:6; left:460px; top:270px}
.showroom .list_wrap ul li.pos5{z-index:4; left:160px; top:270px}
.showroom .list_wrap ul li.pos6{z-index:3; left:-20px; top:270px}
/*
.showroom .list_wrap ul li.pos1{z-index:1; left:0; top:0}
.showroom .list_wrap ul li.pos2{z-index:5; left:200px; top:0}
.showroom .list_wrap ul li.pos3{z-index:2; left:430px; top:0}
.showroom .list_wrap ul li.pos4{z-index:6; left:430px; top:250px}
.showroom .list_wrap ul li.pos5{z-index:4; left:160px; top:250px}
.showroom .list_wrap ul li.pos6{z-index:3; left:0; top:250px}
*/

.showroom .list_wrap .spot_def, .showroom .list_wrap .spot_over{display:none; position:absolute; left:0; top:0}
.showroom .list_wrap .spot_def{display:none}
.showroom .list_wrap .spot_over img.over{display:none; position:absolute; left:0; top:0 }

#map_spotarea {position:absolute; left:230px; top:180px;  z-index:100; width:840px; height:641px;}
#map_spotarea .image_map{position:absolute; left:0; top:0}
.keyfocus_chk{display:block; position:absolute; left:238px; top:200px; width:826px; height:641px; font-size:0; }
.keyfocus_chk:first-child{z-index:98}
.keyfocus_chk:last-child{z-index:99}
#model_indicator {display:none; position:absolute; left: 117px; top:425px; z-index:100; width:75px;}
#model_indicator li{margin-bottom:75px}
#model_indicator li span{display:block; width:75px; height:11px; background:url('../img/model_indi.png') no-repeat; text-indent:-9999px}
#model_indicator li.model0 span{background-position:0 0}
#model_indicator li.model0.on span{background-position:0 -18px}
#model_indicator li.model1 span{background-position:0 -36px}
#model_indicator li.model1.on span{background-position:0 -54px}
#model_indicator li.model2 span{background-position:0 -72px}
#model_indicator li.model2.on span{background-position:0 -90px}

.cover {position:absolute; width:1280px; height:900px;}
.popup { position:absolute; left:0px; top:0px; width:1280px; height:900px;  z-index:10000; background:#000; background: url('../img/bg_popup.jpg') 0 0 no-repeat; }
.popup .close-btn { position:absolute; top:0px; right:30px; margin-top:30px; z-index:1000}
.popup .close-btn a { display:block; width:82px; height:83px; overflow:hidden; background:URL('../img/btn_close.png') 0 0  no-repeat; text-indent:-10000px;}

/* 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: 24px; letter-spacing: -1px; text-align:justify; word-break: normal; color:#fff}
.webfont span {letter-spacing: 0;}
/* 2014.05.19 webFont ADD */

/* sub */
.onstart div.view{ display: none}
.onstart li.m2 div.view, .onstart li.m3 div.view, .onstart li.m4 div.view { display: none !important;}
.onstart .img1{ display: block !important; opacity: 1  !important;}

ul.roll a.btn { display: block; width: 70px; height: 20px;}
.button { background: url('../img/bg_popup_button.jpg') 0 0 no-repeat;}
.button .webfont {position: absolute; width: 660px; top: 365px; width: 602px; right: 0px;}
.button .close-btn a {color:#fff}
.button .webfont .txt01{padding-top: 23px;}
.button .webfont .txt02{padding-top: 17px;}

.track { background: url('../img/bg_popup_tr.jpg') 0 0 no-repeat;}
.track .close-btn a {color:#fff}
.track ul.roll {width: 1280px; height: 620px; position: absolute; left: 0px; top: 0px}
.track ul.roll .view { display: none}
.track ul.roll .view img { opacity: 0;}
.track ul.roll .m1 .img1{ position: absolute; top: 102px; right: 47px;}
.track ul.roll .m1 .img2{ position: absolute; top: 212px; right: 197px; z-index: 1;}
.track ul.roll .m2 .img1{ position: absolute; top: 96px; right: 47px;}
.track ul.roll .m2 .img2{ position: absolute; top: 213px; right: 188px; z-index: 1;}
.track ul.roll .m3 .img1{ position: absolute; top: 96px; right: 47px;}
.track ul.roll .m3 .img2{ position: absolute; top: 213px; right: 194px; z-index: 1;}
.track ul.roll .btn{ color: #fff; position: relative; z-index: 10;
	top: 294px;left: 116px; width: 70px; height: 30px; display: block;
	text-indent: -9999px; background: url("../img/txt_pop_trnav.png") no-repeat 0px 0px;}
.track ul.roll .m1 a.btn{ background-position: -70px 0px}
.track ul.roll .m2 a.btn{ background-position: -70px -30px}
.track ul.roll .m3 a.btn{ background-position: -70px -60px}
.track ul.roll li.view_on.m1 a.btn{ background-position: 0px 0}
.track ul.roll li.view_on.m2 a.btn{ background-position: 0px -30px}
.track ul.roll li.view_on.m3 a.btn{ background-position: 0px -60px}
.track ul.roll li{ width: 70px; height: 85px; }
.track .webfont {position: absolute; top: 638px; text-align: center; width: 800px; left: 50%; margin-left: -400px;}
.track .webfont p{padding-top: 26px;}

.gui { background: url('../img/bg_popup_gui.jpg') 0 0 no-repeat;}
.gui .close-btn a {background:url('../img/close_btn_black.png') 0 0 no-repeat; color:#000}
.gui ul.roll {width: 1280px; height: 620px; position: absolute; left: 0px; top: 0px}
.gui ul.roll .m1 .img1{ position: absolute; top: 194px; right: 316px;}
.gui ul.roll .m2 .img1{ position: absolute; top: 194px; right: 316px;}
.gui ul.roll .m3 .img1{ position: absolute; top: 194px; right: 316px;}
.gui ul.roll .btn{ color: #000; position: relative; z-index: 10;
	top: 294px;left: 116px; width: 70px; height: 30px; display: block;
	text-indent: -9999px; background: url("../img/txt_pop_guinav.png") no-repeat 0px 0px;}
.gui ul.roll .view { display: none}
.gui ul.roll .view img { opacity: 0;}
.gui ul.roll .m1 a.btn{ background-position: -70px 0px}
.gui ul.roll .m2 a.btn{ background-position: -70px -30px}
.gui ul.roll .m3 a.btn{ background-position: -70px -60px}
.gui ul.roll li.view_on.m1 a.btn{ background-position: 0px 0}
.gui ul.roll li.view_on.m2 a.btn{ background-position: 0px -30px}
.gui ul.roll li.view_on.m3 a.btn{ background-position: 0px -60px}
.gui ul.roll li{ width: 70px; height: 85px; }
.gui .webfont {position: absolute; top: 628px; text-align: center; width: 660px; left: 50%; margin-left: -330px; color: #000}
.gui .webfont p{padding-top: 26px;}

.lcd { background: url('../img/bg_popup_lcd.jpg') 0 0 no-repeat;}
.lcd .close-btn a {background:url('../img/close_btn_black.png') 0 0 no-repeat; color:#000}
.lcd .webfont {position: absolute; width: 660px; top: 187px; width: 602px; right: 57px; color: #000}
.lcd .webfont p{padding: 22px 0 0 5px;}

.cmf { background: url('../img/bg_popup_cmf.jpg') 0 0 no-repeat;}
.cmf .close-btn a {color:#fff}
.cmf ul.roll {width: 1280px; height: 620px; position: absolute; left: 0px; top: 0px}
.cmf ul.roll .m1 .img1{ position: absolute; top: 162px; left:0px;}
.cmf ul.roll .m2 .img1{ position: absolute; top: 162px; left:0px;}
.cmf ul.roll .m3 .img1{ position: absolute; top: 162px; left:0px;}
.cmf ul.roll .m4 .img1{ position: absolute; top: 162px; left:0px;}
.cmf ul.roll .view { display: none}
.cmf ul.roll .view img { opacity: 0;}
.cmf ul.roll li{ width: 70px; height: 85px; }
.cmf .webfont {position: absolute; top: 489px; width: 606px; right: 0px;}
.cmf .webfont .txt01{padding-top: 24px;}
.cmf .webfont .txt02{padding-top: 24px;}