﻿/* Default CSS */
div { position: relative; overflow: hidden; margin: 0; padding: 0; }
.right { text-align: right; }
.left { text-align: left; }
img, input { vertical-align: middle; }
.hr { border-top: 1px solid #eeeeee; height: 1px; width: 100%; }
.vt { vertical-align: top; }
body
{
    margin: 0;
    padding: 0;
    /*background: transparent url("/img/topmenu_bg.gif") repeat-x scroll 0 13px;*/
}
/*----------------------------------
	전체 영역 
----------------------------------*/
#wrapperArea
{
    width: 985px;
	margin-left: auto; 
	margin-right: auto;
}
/*----------------------------------
	상단 공통 메뉴 영역 
----------------------------------*/
#topArea
{
    height: 76px;
	float: center;
	background: transparent url(/img/bg_top.gif) repeat-x bottom;
}
#topArea ul li, #topArea div { float: left; }
#topArea .part1 { width:180px; height: 76px; padding: 0 0 0 0;}
#topArea .part2 { width: 305px;}
#topArea .part3 div { clear: both; width: 490px; }
#topArea .part3_1 { width: 484px; padding-top: 14px; }
#topArea .part3 ul.login { padding-left: 78px; }
#topArea .part3_1 ul li.except1  { padding: 3px 10px 0 0;}
#topArea .part3_1 ul li.except2  { padding: 3px 0 0 0;}
#topArea .part3_2 { padding-top: 7px; }
#topArea .part3_2 ul li.except1  { padding: 0 0 0 10px;}

/*----------------------------------
	메인 네비게이션 영역 
----------------------------------*/
#mainNaviArea
{
    height: 50px;
	clear: both;
	background: transparent url(/img/menu_bar.jpg) repeat-x bottom; 
}
/* #mainNaviArea ul li  { float: left; padding: 13px 10px 0 17px; } 
   #mainNaviArea ul li.except1  { padding: 13px 10px 0 60px; } 소프트웨어 없을때 */
#mainNaviArea ul li  { float: left; padding: 13px 10px 0 10px; }
#mainNaviArea ul li.except1  { padding: 13px 10px 0 43px; }
#mainNaviArea ul li.except2  { float:right; padding: 13px 65px 0 0; }
/*----------------------------------
	검색 영역 
----------------------------------*/
#searchArea
{
	width: 100%;
    padding: 4px 0 37px 0;
	background: transparent url(/img/search_bg.jpg) repeat-x bottom;
}
#searchArea .hr { margin-top: 20px; }
#searchArea ul li, #searchArea div { float: left; }
#searchArea .part1 { width: 95px; padding-top:4px;}
#searchArea .part2 { width: 105px; height: 40px; background: transparent url(/img/bg_dot.gif) repeat-y right; }
#searchArea .part2 ul li { padding: 0 10px 0 0; }
#searchArea .part3 { width: 305px; padding-left: 10px; }
#searchArea .part3 ul li { width: 83px; }
#searchArea .part3 ul li.except1 { width: 63px; }
#searchArea .part4 {padding-top:4px;}
#searchArea .part4 ul li { padding-left: 4px; }
#searchArea .part4 .box02 { height: 25px; }
#searchArea .part4 .box02 .search { width: 331px; padding-top: 4px; }
/*----------------------------------
	중앙 영역 
----------------------------------*/
#mainArea
{
	width: 100%;
}
#mainArea div.paging { text-align: center; width: 100%; }
#mainBannerArea { padding-bottom: 15px; width: 100%; }
/*  #mainBannerArea div { border:1px solid #EAEAEA; }  */
#mainBannerArea .Banner1 { float: left; }
#mainBannerArea .Banner2 { float: right; }
#mainBannerAreaLeft { width: 400px; float: left; }
#mainBannerAreaRight { width: 565px; float: right; }
#mainArea div.recommend { margin: 11px 0 0 0; }
#mainArea .recommend ul li { float: left; margin: 0 0 15px 15px; border:1px solid #EAEAEA; }
#mainArea .recommend ul li.first { margin: 0 0 15px 0; }
/*----------------------------------
	중앙 좌측 영역 
----------------------------------*/
#mainLeftArea
{
	float: left;
	width: 200px;
}
#leftMenuWrapper { border-top: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; width: 200px; height: 100%; }
.mleft, .mcenter, .mright { float: left; height: 100%; }
.mleft, .mright { width: 1px; }
.mcenter { width: 158px; padding: 20px; }
#leftMenuWrapper .top { background: url(/img/menu_bg_01.gif) no-repeat;  height: 110px; }
#leftMenuWrapper .bottom { background: transparent url(/img/menu_bg_02.gif) no-repeat left bottom; height: 110px; }

#leftBanner01 { padding: 10px 0 10px 0; }

#leftMenuArea { }
#leftMenuArea div.L1, div.L2 { border-bottom: solid 1px #EBEBEB; padding: 5px 0 2px 20px; font-size:12px; color:#666666; text-decoration:none; font-family: "gulim","dotum"; cursor: pointer; }
#leftMenuArea div.first { border-top: solid 1px #EBEBEB; }
#leftMenuArea div.L2 { padding: 5px 0 2px 35px; background: transparent url(/img/ic_2depth.gif) no-repeat scroll 22px 9px; }
#leftMenuArea div.icon1 { background: transparent url(/img/ic_1depth_01.gif) no-repeat scroll 8px 7px; }
#leftMenuArea div.icon2 { background: transparent url(/img/ic_1depth_02.gif) no-repeat scroll 8px 7px; }
#leftMenuArea div.icon { background: transparent url(/img/ic_2depth.gif) no-repeat scroll 8px 9px; }

#detailLeftMenu div.d1, #detailLeftMenu div.d2, #detailLeftMenu div.d3 { border-top: solid 1px #EBEBEB; }
#detailLeftMenu .d1 { padding-left: 20px; background: transparent url(/img/ic_1depth_02.gif) no-repeat scroll 8px 3px; }
#detailLeftMenu .d2 { padding-left: 32px; background: transparent url(/img/ic_2depth.gif) no-repeat scroll 23px 6px; }
#detailLeftMenu .d3 { padding-left: 42px; }
/*----------------------------------
	중앙 우측 영역 
----------------------------------*/
#mainRightArea
{
	float: left;
	width: 765px;
    padding: 0 0 0 20px;
}
#mainRightArea div.paging { text-align: center; padding: 7px 0 7px 0; width: 100%; }
#mainRightArea div.table07 { width: 100%; }

#titleArea { margin-top: 20px; width: 100%; }
#titleArea .title { float: left; }
#titleArea .order { float: right; }
#titleArea .order span { padding-left: 3px; }

#productsArea, .productsArea, .productsArea2, .productsArea3, .productsArea4
{
	width: 100%;
}
.productsArea ul li { float: left; padding: 0 0 20px 21px; width: 110px; overflow: hidden; }
.index.productsArea ul li { float: left; padding: 0 0 20px 15px; width: 110px; overflow: hidden; }
.productsArea ul li.first { padding: 0 0 20px 0; }
ul li div.img { width: 110px; height: 110px; text-align: center; }
ul li div.img img { border: 1px solid #EAEAEA; vertical-align: top; }
ul li div.subject { padding: 5px 0 2px 0; overflow: hidden; height: 13px; letter-spacing: 0; }
ul li div.price { font-weight: bold; }
ul li div.cttlistimg { width: 141px; height: 141px; text-align: center; }
/* CD 용도 */
.productsArea2 ul li { float: left; padding: 0 0 20px 15px; width: 141px; overflow: hidden; }
.productsArea2 ul li.first { padding: 0 0 20px 0; }
/* 검색 용도 */
.productsArea3 ul li, .productsArea4 ul li { float: left; padding: 0 10px 20px 10px; width: 141px; overflow: hidden; }
.productsArea3 ul li.first, .productsArea4 ul li.first { padding: 0 10px 20px 20px; }
/* 기획전 용도 */
.planshop { border:1px solid #d9d9d9; padding:20px 0 10px 0; }
.planshop_line { width:945px; height:1px; background-color:#eeeeee; margin-left:20px; }


.subTitleArea { padding: 20px 0 11px 0; width: 100%; }
.subTitleArea .title { float: left; padding-top:10px; }
.subTitleArea .more { float: right; height:31px; padding-top:10px; background: transparent url(/web/img/title_bg.gif) repeat-x bottom; }

.CDTitleImgArea .title { width: 366px; height: 31px; text-align: right; padding-right: 6px; }
.bestArea .CDTitleImgArea .title { background: transparent url(/web/img/title_01.gif) no-repeat 0 10px; }
.recommandArea .CDTitleImgArea .title { background: transparent url(/web/img/title_02.gif) no-repeat bottom; }

.bestArea { float: left; width: 372px; }
.recommandArea { float: right; width: 372px; }

.productsArea.bestCDArea, .productsArea.recomCDArea { height: 164px; }
.index.productsArea.recomCDArea { height: 125px; }

#ViewArea
{
}
/*----------------------------------
	중앙 우측 타이블 부분 영역 
----------------------------------*/
.contents1
{
    padding: 20px 0 0 0px;
}
/*----------------------------------
	중앙 우측 상단 페이징 부분 영역 
----------------------------------*/
.contents2
{
    padding: 12px 0 12px 0;
} 
/*----------------------------------
	중앙 우측 컨텐츠 부분 영역 
----------------------------------*/
.contents3
{
}
/*----------------------------------
	중앙 우측 하단 페이징 부분 영역 
----------------------------------*/
.contents4
{
    border-top: 1px solid #dddddd;
    clear: both;
    padding: 15px 0 50px 0;
}
/*----------------------------------
	하단 영역 
----------------------------------*/
#bottomArea
{
	margin-top: 50px;
	padding-top: 1px;
	background: transparent url(/img/bottom_bg_03.gif) repeat-x;
	height: 131px;
}
#bottomArea div { padding-top: 23px; }
#bottomArea div.part1 { float: left; width: 298px; background: transparent url(/img/bottom_bg_01.gif) repeat-y left; padding-left: 23px; }
#bottomArea div.part2 { float: left; padding-top: 50px; }
#bottomArea div.part3 { float: right; width: 562px; background: transparent url(/img/bottom_bg_02.gif) repeat-y right; padding: 28px 23px 0 0; }
#bottomArea div.part3 ul li { float: left; }
/*----------------------------------
	컨텐츠 아이템 관련 
.items_sep
{
    float: left;
    width: 21px;
    height: 150px;
}
----------------------------------*/
.items
{
    float: left;
    width: 131px;
    height: 150px;
    padding-bottom: 21px;
}
/*----------------------------------
	좌측 메뉴 관련
----------------------------------*/
#leftMenuArea01 ul
{
    margin: 0;
    padding: 0;
}
#leftMenuArea01 li
{
    list-style: none;
    border-bottom: 1px solid #eeeeee;
    padding: 5px 0 2px 0px;
	height: 24px;
}

ul { list-style-type: none; margin: 0; padding: 0; }

#mainBestContetns2 { margin-top: 10px; padding-top: 10px; background: url('/img/bg_dot_red.gif') repeat-x top; }
#mainNewCDArea { width: 100%; }
#mainNewCDArea li { padding: 0px 0px 15px 15px; float: left; }
#mainNewCDArea li.first { padding: 0px 0px 15px 0px; }
#mainNewPPTArea { width: 100%; margin-top: 15px; padding-top: 15px; background: url('/img/bg_dot.gif') repeat-x top; }
#mainNewPPTArea li { padding: 0px 0px 17px 15px; float: left; }
#mainNewPPTArea li.first { padding: 0px 0px 17px 0px; }
#mainNewCDArea li img, #mainNewPPTArea li img { border:1px solid #EAEAEA; }
#mainNewPPTArea div.img { height: 82px; }

#mainMonthThemeArea { width: 360px; margin-left: 15px; text-align: right; }
#mainMonthThemeArea .title { height: 32px; background: url('/img/title_06.gif') no-repeat; text-align: right; }
#mainMonthThemeArea .target{ height: 97px; overflow: hidden; margin-top: 11px; }

.loadingArea { width: 100%; height: 100%; text-align: center; }


/*----------------------------------
	컨텐츠 미리보기 부분 영역 
----------------------------------*//* width: 190px; */
.productPreViewArea { position: absolute; top: 300px; left: 300px; display: none; z-index: 10000; 
	border: 1px solid #CE0008; padding: 9px; border-top: 3px solid #CE0008; border-bottom: 3px solid #CE0008;
	background-color: #ffffff; 
}
.productPreViewArea .imgArea { padding: 9px; border: 1px solid #E2E7EC; text-align: center; }
.productPreViewArea .topline { border-top: 1px solid #E2E7EC; }
.productPreViewArea .title { padding: 2px 2px 2px 11px; width: 70px; float: left;
	background: url('/img/ic_view.gif') no-repeat scroll 0px 9px;  }
.productPreViewArea .val { padding: 2px 5px 2px 2px; text-align: right; 
	background: url('/img/bar_top.gif') no-repeat scroll 0px 5px; 
}

.pt15 { padding: 12px 0 15px 0; }

#siteRightBanner { position: absolute; top: 233px; }
#siteMainRightBanner { position: absolute; top: 236px; display: none; }
#MyzoneEventBanner { width: 158px; position: absolute; top: 507px; }
#MyzoneEventBanner ul.part1 { padding-bottom:5px; }
#MyzoneEventBanner li.part2 { padding-bottom:5px; }
#MyzoneEventBanner ul.part3 { float:right; }

/*-------------배너영역 ---------------------------------*/

#mainTopBannerArea img, #mainBannerAreaLeft img, #mainBannerAreaRight img, #mainBestContetns1 img, #mainBestContetns2 img, #mainMonthThemeArea img, .bestArea img, .recommandArea img, #SoftwareBannerArea img, #eventBannerArea img, #LogInBannerArea img, #siteRightBanner img, #siteMainRightBanner img {vertical-align:top; border:0px}

