html,body{height:100%;}
html,body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,table,thead,tbody,tfoot,tr,textarea,fieldset,dt,dd,dl,pre,address,img{margin:0; padding:0; font-family:'맑은 고딕','돋움', Arial, Helvetica, sans-serif; font-size:15px; line-height:20px; color:#666;}
em{font-style:normal;}
li{list-style:none;}
a{text-decoration:none; color:#666; font-size:13px;}
a img{border:none;}
table{border-collapse:collapse;}
table caption{position:absolute; left:-9999px; background:pink; visibility:hidden; *margin-bottom:-20px;}
button{border:none; margin:0; padding:0; background:none; cursor:pointer;}
input, button, img, span, label, select, a{vertical-align:middle; font-family:'맑은 고딕','돋움', Arial, Helvetica, sans-serif; font-size:14px;}
body{overflow-x:hidden; height:100%;}
#wrapper{width:100%; height:7560px; position:relative; overflow: hidden;}
#header{overflow:hidden; width:100%; height:240px; background:url('../img/bg_header_spec.jpg') no-repeat 0 0; position:absolute; top:0; left:0; }
#header .title{width:100%; height:57px; position:absolute; left:0; bottom:0; }
#header .title span{width:1000px; display:block; margin:0 auto; }
#header .title span ul li{float:left; padding-right:10px;}
#header .title span ul li.menuExterior{width:144px; height:43px; padding-top:14px;}
#contents_wrapper{width:100%; height:7320px; position:absolute; left:0; top:240px; background:url('../img/bg_productInfo.gif') repeat-y 0 0; }
.contents{width:1000px; margin:0 auto;z-index:0;}
.contents p {line-height:24px;}
/*-------------------------------------------- 스펙 타이틀--------------------------------------------------------*/
h2 img.title_spec, .effect h3{ margin:0 auto; display:block; }
.HighResolution h2 img.title_spec{width:474px; height:89px;padding:80px 0;}
.fastMotion h2 img.title_spec{width:751px; height:87px; padding:150px 0 100px 0;}
.effect h2 img.title_spec{width:640px; height:95px; padding:120px 0 100px 0;}
.effect .section01 h3{width:678px; height:67px;}
.effect .section02 h3{width:490px; height:67px;}
h3 img.subTitle, img.pb_30{padding-bottom:20px;}
.HighResolution div.imgArea{overflow:hidden;}
.HighResolution div.imgArea div.magnify01, div.magnify02 {float:left; padding-right:1px;}
div.imgArea, img.imgArea{padding:15px 0;}
/*-------------------------------------- 오른쪽 네비게이션 메뉴-------------------------------------*/
ul.rnb{position:fixed; width:199px; height:449px; right:30px; top: 255px; z-index:105; text-align:center; background:url('../img/bg_dot.png') no-repeat 0 0; }
ul.rnb li.pb_37{padding-bottom:37px;}
div.HighResolution .section02{padding-top:60px; padding-bottom:30px;}
div.HighResolution .section02 span.article1{display:block;position:relative; width:1000px; height:329px;} /*이미지 옆 텍스트영역의 수직 가운데 정렬*/
span.article1 div.textArea{width:445px; height:259px; float:left; position:absolute; top:50%; right:0; margin-top:-129.5px; } /*이미지 옆 텍스트영역의 수직 가운데 정렬*/
div.textArea p{line-height:28px;}
div.HighResolution .section02 span.article2{ position:relative;margin-top:30px; display:block;width:1000px; height:242px; background:url('../img/bg_article2.jpg') no-repeat 0 0;}
div.HighResolution .section02 span.article2 div.textArea p{font-size:14px; padding:35px 0 0 35px;}
.pt_30{padding-top:30px;}
.pt_20{padding-top:20px;}
.section02 span.article2 img{position:absolute; right:10px; bottom:10px;}
ul.topNavi, ul.bottomNavi{margin:0 auto; width:954px; height:57px; margin-top:20px; }
ul.topNavi li, ul.bottomNavi li{float:left;}
ul.topNavi li a, ul.bottomNavi li a{vertical-align:top; display:block; text-indent:-5000px; font-size:0; line-height:0;}
ul.topNavi li.menu1 a{background:url('../img/tnb_01.png') no-repeat 0 0; width:199px; height:57px;}
ul.topNavi li.menu2 a{background:url('../img/tnb_02.png') no-repeat 0 0; width:262px; height:57px;}
ul.topNavi li.menu3 a{background:url('../img/tnb_03.png') no-repeat 0 0; width:230px; height:57px;}
ul.topNavi li.menu4 a{background:url('../img/tnb_04.png') no-repeat 0 0; width:263px; height:57px;}
ul.topNavi li.menu1 a:hover{background-position:-199px 0;}
ul.topNavi li.menu2 a:hover{background-position:-262px 0;}
ul.topNavi li.menu3 a:hover{background-position:-230px 0;}
ul.topNavi li.menu4 a:hover{background-position:-263px 0;}
ul.bottomNavi li.menu1 a{background:url('../img/bnb_01.png') no-repeat 0 0; width:199px; height:57px;}
ul.bottomNavi li.menu2 a{background:url('../img/bnb_02.png') no-repeat 0 0; width:262px; height:57px;}
ul.bottomNavi li.menu3 a{background:url('../img/bnb_03.png') no-repeat 0 0; width:230px; height:57px;}
ul.bottomNavi li.menu4 a{background:url('../img/bnb_04.png') no-repeat 0 0; width:263px; height:57px;}
ul.bottomNavi li.menu1 a:hover{background-position:-199px 0;}
ul.bottomNavi li.menu2 a:hover{background-position:-262px 0;}
ul.bottomNavi li.menu3 a:hover{background-position:-230px 0;}
ul.bottomNavi li.menu4 a:hover{background-position:-263px 0;}
/* #width_1100{width:1100px; margin:0 auto; border:1px solid red;} */
a.rnb{vertical-align:top; display:block; text-indent:-5000px; font-size:0; line-height:0; position:absolute; top:0; left:0;}
a.rnb{background:url('../img/rnb_top.png') no-repeat 0 0; width:64px; height:64px;}
a.rnb:hover{background-position:-64px 0;}
/*--------------------------------------01 고화소 부분확대 이미지 스타일 소스-------------------------------------*/
/*Lmagnifying glass*/
.magnify01 {width: 499px; position: relative;}
.magnify02 {width: 499px; position: relative;}
/*Lets create the magnifying glass*/
.large01 {
width: 175px; height: 175px;
position: absolute;
/*Multiple box shadows to achieve the glass effect*/
-webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85),
0 0 0 0 rgba(0, 0, 0, 0.25),
inset 0 0 10px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85),
0 0 0 0 rgba(0, 0, 0, 0.25),
inset 0 0 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85),
0 0 0 0 rgba(0, 0, 0, 0.25),
inset 0 0 10px 2px rgba(0, 0, 0, 0.1);
/*Lets load up the large image first*/
background: url('../img/img_HighResolution01.jpg') no-repeat;
/*hide the glass by default*/
display: none;
}
.large02 {
width: 175px; height: 175px;
position: absolute;
/*Multiple box shadows to achieve the glass effect*/
-webkit-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85),
0 0 0 0 rgba(0, 0, 0, 0.25),
inset 0 0 10px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85),
0 0 0 0 rgba(0, 0, 0, 0.25),
inset 0 0 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85),
0 0 0 0 rgba(0, 0, 0, 0.25),
inset 0 0 10px 2px rgba(0, 0, 0, 0.1);
/*Lets load up the large image first*/
background: url('../img/img_HighResolution02.jpg') no-repeat;
/*hide the glass by default*/
display: none;
}
/*To solve overlap bug at the edges during magnification*/
.small01, .small02 { display: block; }
/*--------------------------------------크리에이티브 모드-------------------------------------*/
div.creativeMode{width:1000px; height:510px; margin:0 auto; padding-top:70px; z-index:0}
/* .camera_container{width:1500px;} */
#camera_frame{position:relative; height:510px;}
#camera_frame #creative_imgs ul li{position:absolute; top:111px; left:118px;}
div.creativeMode span.guide{display:block; padding:0 0 10px 80px; background:url('../img/bullet_creative.png') no-repeat 60px 6px;}
div.creativeMode span.coment{display:block; padding:7px 0 0 50px; font-size:13px;}
#camera_cover, #camera_handle, #creative_imgs{
position: absolute;
}
.creative_img{
width: 100%;
height: 100%
}
.creative_image{
width: 100%;
height: 100%
}
#creative_imgs{
width: 532px;
height: 364px;
}
/* #camera_handle{
top: 270px;
left: 770px;
z-index: 20;
} */
#camera_cover{
z-index: 10;
}
#creative_border{
position:absolute; top:285px; left:729px; width:114px; height:114px;
z-index: 100;
}
#camera_handle{
position:relative; height:39px; width:39px; left:42.5px; top:-19.5px;
background: url('../img/btn_creativePalette.png') no-repeat;
}
#img2, #img3, #img4{
opacity: 0;
filter: alpha(opacity=0);
}
/*----------------------------------------------빠른동작------------------------------------------------*/
.fastMotion .section02 .textArea{width:600px; float:left; padding-left:40px;}
.fastMotion .section02 .textArea h3{width:600px; overflow:hidden;}
.fastMotion .section02 .textArea h3 img.subTitle{float:left; padding-right:15px; padding-top:10px;}
.fastMotion .section02 .textArea p{clear:left; font-size:14px; line-height:25px;}
.fastMotion .section02{display:block; width:1000px; overflow:hidden; height:320px; padding:40px 0 0 0;border:1px solid #cdcdcd; margin-top:40px; background-color:white;}
.fastMotion .section02 .imgArea{ width:287px; float:left;text-align:center; padding-top:0;}
/*-----------------------------------------------------03 다양한 효과----------------------------------------------------*/
.effect .section01 p{text-align:center;}
.effect .imgList {width:1000px; overflow:hidden;}
.effect .imgList li{float:left; position:relative;}
.effect .imgList li.pr_3{padding-right:3px;}
.effect .imgList li.pt_3{padding-top:3px;}
.effect .imgList li a.layer_call{position:absolute; bottom:5px; right:8px;}
.effect p.coment{text-align:right; font-size:13px; padding-top:5px;}
.effect .movieList{overflow:hidden; width:1000px; padding-top:60px; }
.effect .movieList li{float:left; position:relative; width:332px; height:225px;}
.effect .movieList li a.layer_call{display:block;width:81px; height:81px; position:absolute; top:70px; left:126px;}
.effect .movieList li.pr_5{ padding-right:2px;}
/*--------------------------------------- 03 - 01효과 확대이미지 레이어팝업-----------------------------------------------*/
.mask {background:url('../img/mask_img.png') repeat 0 0;position:absolute;top:0;left:0;z-index:59;display:none;}
.layer_popup {position:absolute;z-index:60; left:-9999px; }
div.layer_popup a.layer_close{position:absolute; top:0; right:0; width:28px; height:28px; display:block;}
#big01{width:633px;}
#big02, #big04, #big06 {width:900px;}
#big03{width:836px;}
#big05{width:940px;}
#big01 p, #big02 p, #big03 p, #big04 p, #big05 p, #big06 p{text-align:left; font-family:'돋움'; font-size:12px; background-color:black; color:#999; line-height:18px; padding:10px 0 10px 10px;}
#big05 p span{font-size:11px;}
#big01 p em, #big02 p em, #big03 p em, #big04 p em, #big05 p em, #big06 p em {font-weight:bold; color:white;}
#big01 span.icon {float:left; padding:15px;}
#big02 span.icon, #big03 span.icon, #big04 span.icon, #big06 span.icon{float:left; padding:5px 15px 0 15px;}
#big05 span.icon{float:left;padding:15px 15px 0 15px;}
#movie01, #movie02, #movie03, #movie04{width:881px; height:480px;}
/*-----------------------------------------------------04 미니멀한 바디----------------------------------------------------*/
div.minimal h2 {width:594px; height:142px; margin:0 auto; padding:120px 0 80px 0;}
div.minimal .section02 .pt_50{padding-top:50px;}
div.minimal span.coment{padding-top:10px; display:block;}
div.minimal .section03{overflow:hidden;}
div.minimal .section03 h3{padding-top:5px; padding-right:50px; float:left;}
div.minimal .section03 h3 img.subTitle{padding-top:50px; padding-right:10px;}
div.minimal .section03 .article01{width:1000px; height:207px; overflow:hidden; margin-bottom:60px;}
div.minimal .section03 .article01 p{float:right; padding-top:40px; padding-right:50px; line-height:28px;}
/*-----------------------------------------------------푸터------------------------------------------------------*/
.textDivFocused {
background-position: 0 14px;
background-image: url(../img/bg_underBar.gif);
background-repeat: repeat-x;
}
.cp {cursor: pointer;}
#footer{position:absolute; left:0; bottom:0;}
#cameraDiv{
z-index:200;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.section02, .undraggable{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#creative_border_8{
position:absolute; top:285px; left:729px; width:114px; height:114px;
z-index: 100;
}
#camera_handle01, #camera_handle02, #camera_handle03, #camera_handle04{background: url('../img/btn_creativePalette.png') no-repeat;}
#camera_handle01{
position:absolute; height:39px; width:39px; left:0; top:0;
}
#camera_handle02{
position:absolute; height:39px; width:39px; right:-7px; top:0;
}
#camera_handle03{
position:absolute; height:39px; width:39px; right:-7px; bottom:-7px;
}
#camera_handle04{
position:absolute; height:39px; width:39px; left:0; bottom:-7px;
}
#btnTop{
z-index:1000;
}