@charset "utf-8";
/* CSS Document */

#body{margin:0 auto;}

#header{width:100%; height:120px; position:relative; background: repeat-x; position:relative; margin:0 auto;}
#header .logo{padding-top:38px; text-align: center;}

#menu{width:100%; height:45px; border-top:2px solid #be1e2d; border-bottom:1px solid #be1e2d; position:relative; margin:0 auto;}
#menu .gnb{width:500px; margin:0 auto; position:relative;}
#menu ul{margin-top:18px;}
#menu li a{color:#be1e2d; font-size:13px; margin-left:67px;  float:left; text-align:center;}
#menu li a:hover{color:#be1e2d; font-weight:bold;}

#main{width:438px; margin:35px auto;}
#main .title1{float:left; margin-right:10px;}
#main .title3{float:left; margin-right:10px; margin-top:10px;}
#main .title4{margin-top:10px;}



/*
#headerIn{width:980px; height:165px; position:relative; margin:0 auto;}
#headerIn h1{position:relative; top:37px;}
#headerIn .interest{position:absolute; top:7px; left:0;}
#headerIn .util{position:absolute; right:0; top:7px;}
#headerIn .util h2{display:none;}
#headerIn .util li{float:left; margin-left:5px;}
#headerIn .util a.btn1{width:58px; height:12px; display:block; padding:5px 0; text-align:center; background:url(../img/top_login_btnbg.gif) no-repeat; color:#777; font-weight:bold;}
#headerIn .util a{heigth:12px; display:block; padding:5px 0 5px 5px; background:url(../img/top_login_line.gif) no-repeat; color:#777;}
#headerIn .util a:hover{color:#961dda;}
#headerIn .MemberMenu{position:absolute; right:0; top:71px;}
#headerIn .MemberMenu h2{display:none;}
#headerIn .MemberMenu li{float:left; margin-left:30px;}
#headerIn .search{position:absolute; left:341px; top:61px;}
#headerIn .search label{display:none;}
#headerIn .search input{width:215px; height:12px; padding:13px 20px; background:url(../img/top_search_bg.gif) no-repeat; border:none; float:left}
#headerIn .search a{width:48px; height:38px; display:block; background:url(../img/top_search_btn.gif) no-repeat; text-indent:-9999px; float:left;}

#gnb{position:relative; margin-top:37px; z-index:900;}

a태그에 글자대신 이미지를 백그라운드로 처리할때..
1. width/height값 설정.
2. display:block
3. text-indent:-9999px
4. 해당이미지를 bg처리한후 상황에 따라 bg-position설정.

#gnb .mainM{height:42px; display:block; text-indent:-9999px}
#gnb .gnb1 .mainM{background:url(../img/menu_01.jpg) no-repeat; width:178px;}
#gnb .gnb2 .mainM{background:url(../img/menu_02.jpg) no-repeat; width:150px;}
#gnb .gnb3 .mainM{background:url(../img/menu_03.jpg) no-repeat; width:150px;}
#gnb .gnb4 .mainM{background:url(../img/menu_04.jpg) no-repeat; width:161px;}
#gnb .gnb5 .mainM{background:url(../img/menu_05.jpg) no-repeat; width:163px;}
#gnb .gnb6 .mainM{background:url(../img/menu_06.jpg) no-repeat; width:178px;}
#gnb .mainM:hover{background-position:0 -42px;}

#gnb li{float:left;}

#gnb .subMenu{position:absolute; top:42px; left:0; width:980px; height:165px; background:url(../img/submenu_skincare_bg.jpg) no-repeat; display:none}
#gnb li:hover .subMenu{display:block;}
#gnb .subMenu h4{position:absolute;}
#gnb .subMenu .subDepth{position:relative; 
margin:21px 0 21px 242px;}
#gnb .subMenu .subDepth p{ background:url(../img/submenu_bullet.gif) no-repeat; padding-left:18px; float:left; color:#fff; width:60px;}
#gnb .subMenu .subDepth ul{float:left; width:660px; margin:7px 0 0 0px;}
#gnb .subMenu .subDepth a{color:#debcff;}
#gnb .subMenu .subDepth a:hover{color:#f0e86c;}
#gnb .subMenu .subDepth li{width:110px; margin-right:20px; border-left:1px solid #debcff; padding:5px 0 5px 5px;}
#gnb .subMenu .subDepth li.short{width:100px; margin-right:0;}




#visual{width:100%; height:490px; position:relative; background:url(../img/visual_01_bg.jpg) repeat-x;}
#visualin{width:980px; height:490px; margin:0 auto; position:relative;}
.visualNavi{position:absolute; left:0; bottom:20px;}
.visualNavi ul{float:left;}
.visualNavi ul li{float:left; margin-right:1px;}
.visualNavi ul li a{width:172px; height:26px; padding:0 5px; line-height:26px; display:block; font-size:0.95em; background:#c3b4cd; color:#572779; text-align:center;}
.visualNavi a.btnPlay, .visualNavi a.btnStop{float:left;}
.visualNavi a.btnPlay{margin-right:1px;}

#bestItem{width:980px; margin:45px auto; position:relative;}
.bestItemNavi{position:absolute; top:0; right:0;}
.bestItemNavi li{float:left; margin:0 5px;}
.bestItemNavi li a{height:21px; display:block; text-indent:-9999px; background:url(../img/best_menu.jpg) no-repeat;}
.bestItemNavi li.BestNavi1 a{width:36px;}
.bestItemNavi li.BestNavi2 a{width:60px; background-position:-37px 0;}
.bestItemNavi li.BestNavi3 a{width:48px; background-position:-98px 0;}
.bestItemNavi li.BestNavi4 a{width:58px; background-position:-147px 0;}
.bestItemNavi li.BestNavi5 a{width:68px; background-position:-206px 0;}
.bestItemNavi li.BestNavi6 a{width:35px; background-position:-275px 0;}
.bestItemNavi li.BestNavi1 a.on{background-position:0 -21px}
.bestItemNavi li.BestNavi2 a.on{
  background-position:-37px -21px;}
.bestItemNavi li.BestNavi3 a.on{
  background-position:-98px -21px;}
.bestItemNavi li.BestNavi4 a.on{
  background-position:-147px -21px;}
.bestItemNavi li.BestNavi5 a.on{
  background-position:-206px -21px;}
.bestItemNavi li.BestNavi6 a.on{
  background-position:-275px -21px;}

.bestItemPd{margin-top:25px; position:relative;}
.bestItemPd ul{}
.bestItemPd li{float:left; width:178px; margin:0 9px;}
.bestItemPd li .mark{position:absolute;}
.bestItemPd li .tit{color:#484848; margin-top:25px; text-align:center; width:178px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.bestItemPd li .tit:hover{color:#961dda;}
.bestItemPd li .price{color:#47166a; font-size:1.3em; text-align:center; margin-top:10px;}
.bestItemPd .btnPrev, .bestItemPd .btnNext{position:absolute; top:74px;}
.bestItemPd .btnPrev{left:-50px;}
.bestItemPd .btnNext{right:-50px;}

#BN{width:100%; height:120px; position:relative; background:url(../img/gift_bg.jpg) repeat-x;}
#BNinner{width:980px; height:120px; position:relative; margin:0 auto;}
#BNinner p{float:left;}

#issue{width:980px; margin:30px auto; position:relative;}
.hotissue{position:relative;}
.hotissuelist{width:229px; border-top:2px solid #e61481; border-bottom:2px solid #e61481; margin-top:30px; padding:10px 0;}
.hotissuelist li{width:179px; height:32px; line-height:16px; padding:11.5px 40px 11.5px 10px; background:url(../img/issue_menu_bg_off.jpg) no-repeat 220px 23px; border-bottom:1px solid #eaeaea; margin:10.5px 0;}
.hotissuelist li a{color:#484848}
.hotissuelist li a:hover{color:#47166a;}
.hotissuelist li.on{background:url(../img/issue_menu_bg_on.jpg) no-repeat;}
.hotissuelist li.on a{color:#fff;}
.hotissue div{position:absolute; top:0; left:250px;}

.newitem{width:230px; position:absolute; top:0; right:0;}
.newitem .newitempd{border-top:2px solid #8953b1; border-bottom:2px solid #8953b1; margin-top:15px; padding:10px 0; position:relative; width:230px;}
.newitem .newitempd li{width:120px; margin:0 auto;}
.newitem .newitempd .pdimg img{width:120px; height:120px;}
.newitem .newitempd .pdtit{color:#888; margin-top:10px; text-align:center;}
.newitem .newitempd .pdprice{color:#47166a; font-size:14px; font-weight:bold; text-align:center; margin-top:6px;}
.newitem .newitempd .btnprev, .newitem .newitempd .btnnext{position:absolute; top:55px;}
.newitem .newitempd .btnprev{left:0;}
.newitem .newitempd .btnnext{right:0;}
.newitem .more{position:absolute; top:5px; right:0;}

.comment{width:230px; top:232px; right:0; position:absolute;}
.comment .box{width:218px; padding:5px; border:1px solid #e2e2e2; margin-top:10px; text-align:center; position:relative;}
.comment .box .boximg{}
.comment .box .boxtit{margin:20px 0 10px 0;}
.comment .box .boxtit a{color:#8144af;}
.comment .box .boxtit a:hover{color:#961dda;}
.comment .box .boxtext{color:#737373;}
.comment .box .boxtext span{margin:0 6px;}
.comment .more{position:absolute; top:6px; right:0;}

#cs{width:980px; margin:0 auto 90px auto; position:relative;}
.inside{width:206px; float:left;}
.inside ul{margin-top:20px;}
.inside li{float:left; width:103px; margin:5px 0;}

.notice{width:240px; float:left; margin-left:42px;}
.notice ul{margin-top:20px;}
.notice li{background:url(../img/notice_bullet.jpg) no-repeat 0 5px; padding-left:10px; margin-bottom:10px;}
.notice li a{width:230px; display:block; height:14px; line-height:14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#777;}
.notice li a:hover{color:#444;}

.svs{float:left; width:190px; margin-left:55px;}
.svs ul{margin-top:20px;}
.svs li{width:95px; float:left; margin:5px 0;}

.sns{float:right; width:210px;}
.sns ul{margin-top:20px;}
.sns li{float:left; margin:5px 10px 5px 0;}

.family{position:absolute; right:0; bottom:-80px;}
.family div{float:left; margin-left:15px;}

#footer{width:100%; height:190px; background:#f0ecfa;}
.footerin{width:980px; height:190px; margin:0 auto; position:relative; background:url(../img/footer_logo.gif) no-repeat 0 30px; padding-left:120px;}

.fmenu{padding-top:25px;}
.fmenu li{float:left; background:url(../img/footer_smenu_line.gif) no-repeat; padding:0 8px;}
.copy{margin:20px 0 0 8px;}

.mark{position:absolute; right:380px; top:80px;}
.mark p{float:left; margin-left:15px;}
.csinfo{position:absolute; right:130px; top:0; padding:25px 0 20px 20px; border-left:1px solid #e2deec;}
*/