/* BASIC css start */ #header { position:relative; width:100%; min-width:1200px; background:#fff } #header.fix { margin-top:-160px; position:fixed; top:0; left:0; right:0; z-index:100 } #headerTopArea { height:114px; border-bottom:1px solid #ddd } #headerTopArea .hd-top { margin:0 auto; width:1200px } #headerTopArea .hd-top .gnb-box { height:35px } #headerTopArea .hd-top .gnb-box .lt-menu { float:left } #headerTopArea .hd-top .gnb-box .lt-menu li { float:left } #headerTopArea .hd-top .gnb-box .lt-menu li.lt-ic { padding:10px 0 0 10px } #headerTopArea .hd-top .gnb-box .lt-menu li a { display:block; line-height:35px } #headerTopArea .hd-top .gnb-box .lt-menu li a.ic { width:16px; height:16px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_hd_sns.png) 0 0 no-repeat } #headerTopArea .hd-top .gnb-box .lt-menu li a.ic.ic-ks { background-position:0 0 } #headerTopArea .hd-top .gnb-box .lt-menu li a.ic.ic-in { background-position:0 -16px } #headerTopArea .hd-top .gnb-box .lt-menu li a.ic.ic-fc { background-position:0 -32px } #headerTopArea .hd-top .gnb-box .lt-menu li a.ic.ic-as { background-position:0 -48px } #headerTopArea .hd-top .gnb-box .lt-menu li a.ic.ic-gp { background-position:0 -63px } #headerTopArea .hd-top .gnb-box .rt-menu { float:right } #headerTopArea .hd-top .gnb-box .rt-menu .rt { float:left } #headerTopArea .hd-top .gnb-box .rt-menu .rt li { padding-left:15px; float:left } #headerTopArea .hd-top .gnb-box .rt-menu .rt li a { display:block; line-height:35px } #headerTopArea .hd-top .gnb-box .rt-menu .cs-menu { padding-left:5px; position:relative; float:left; width:80px } #headerTopArea .hd-top .gnb-box .rt-menu .cs-menu p { height:35px; text-align:center; line-height:35px; background:url(/design/zoom/phps/common/ico_hd_arr.gif) 12% 14px no-repeat; cursor:pointer } #headerTopArea .hd-top .gnb-box .rt-menu .cs-menu ul { display:none; padding-bottom:7px; position:absolute; top:35px; left:5px; width:78px; border:1px solid #dfdfdf; background:#fff; z-index:20 } #headerTopArea .hd-top .gnb-box .rt-menu .cs-menu li { padding:7px 0 0 15px } #headerTopArea .hd-top .gnb-box .rt-menu .cs-menu li a:hover { text-decoration:underline } #dggHide { left:550px !important } #headerTopArea .hd-top .gnb-logo { position:relative; width:1200px; height:79px; overflow:hidden } #headerTopArea .hd-top .gnb-logo .okdgg-box { padding-top:43px; float:left } #headerTopArea .hd-top .gnb-logo .okdgg-box dt { float:left; font-size:11px; color:#959595; line-height:17px } #headerTopArea .hd-top .gnb-logo .okdgg-box dd { float:left; font-size:0 } #headerTopArea .hd-top .gnb-logo .okdgg-box dd a { display:inline-block; margin-left:10px; width:21px; height:17px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_okdgg.gif) 0 0 no-repeat } #headerTopArea .hd-top .gnb-logo .okdgg-box dd a.usa { background-position:0 0 } #headerTopArea .hd-top .gnb-logo .okdgg-box dd a.jp { background-position:0 -17px } #headerTopArea .hd-top .gnb-logo .okdgg-box dd a.cn { background-position:0 -34px } #headerTopArea .hd-top .gnb-logo .tlogo { margin-left:-83px; position:absolute; top:1px; left:50% } #headerTopArea .hd-top .gnb-logo .rt-menu { padding-top:16px; position:relative; float:right } #headerTopArea .hd-top .gnb-logo .rt-menu li { padding:0 18px; position:relative; float:left; height:35px; border-left:1px solid #ddd } #headerTopArea .hd-top .gnb-logo .rt-menu li.first { border-left:none } #headerTopArea .hd-top .gnb-logo .rt-menu li span.ic { display:inline-block; margin-top:6px; width:19px; height:19px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_hd_rt.png) 0 0 no-repeat } #headerTopArea .hd-top .gnb-logo .rt-menu li span.ic-login { background-position:0 0 } #headerTopArea .hd-top .gnb-logo .rt-menu li span.ic-cart { background-position:0 -19px } #headerTopArea .hd-top .gnb-logo .rt-menu li span.ic-sch { background-position:0 -38px } #headerTopArea .hd-top .gnb-logo .rt-menu li span.ic-logout { background-position:0 -57px } #headerTopArea .hd-top .gnb-logo .rt-menu li span.num { display:inline-block; padding:6px 2px; vertical-align:top; line-height:20px } #headerTopArea .hd-top .gnb-logo .rt-menu li span.txt { display:none; position:absolute; top:35px; left:0; width:100%; text-align:center } #headerTopArea .hd-top .gnb-logo .rt-menu li a:hover + span.txt { display:block } #headerTopArea .hd-top .gnb-logo .rt-menu .box-search { position:absolute; top:16px; right:-263px; width:261px; height:38px; border:1px solid #707070; border-radius:38px; background:#fff; z-index:10 } #headerTopArea .hd-top .gnb-logo .rt-menu .box-search input.MS_search_word { margin:7px 16px 0; width:150px; height:24px; color:#707070; border:0 } #headerTopArea .hd-top .gnb-logo .rt-menu .box-search input::-ms-clear{ display: none } #headerTopArea .hd-top .gnb-logo .rt-menu .box-search .btn-sch-close { position:absolute; top:6px; right:42px; width:24px; height:24px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_search.png) 0 0 no-repeat } #headerTopArea .hd-top .gnb-logo .rt-menu .box-search .btn-sch { position:absolute; top:6px; right:13px; width:24px; height:24px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_search.png) 0 -24px no-repeat } #headerCateArea { height:44px; border-bottom:1px solid #ddd } #headerCateArea .hd-cate { margin:0 auto; width:1200px } #headerCateArea .hd-cate > ul > li { position:relative; float:left } #headerCateArea .hd-cate > ul > li > a { display:block; padding:0 20.5px; height:44px; font-size:13px; line-height:44px } #headerCateArea .hd-cate > ul > li > .depth { display:none; margin-left:-51px; padding:15px 0 5px 15px; position:absolute; top:42px; left:50%; width:90px; border:1px solid #ddd; border-top:3px solid #000; background:#fff; z-index:200 } #headerCateArea .hd-cate > ul > li > .depth li { padding-bottom:10px } #headerCateArea .hd-cate > ul > li > .depth li a { display:block; color:#898989 } #headerCateArea .hd-cate > ul > li > .depth li a:hover { text-decoration:underline } #headerNavArea { height:44px; border-bottom:1px solid #ddd } #headerNavArea .hd-nav { margin:0 auto; position:relative; width:1200px; *zoom:1 } #allCateArea { position:absolute; top:0; left:0 } #allCateArea .btn-all-cate { padding:15px 0 0 12px; position:relative; width:31px; height:29px; border-left:1px solid #ddd; border-right:1px solid #ddd; background:#fff; cursor:pointer } #allCateArea .btn-all-cate .trans-line { position:relative; width:18px; height:14px } #allCateArea .btn-all-cate .line-top, #allCateArea .btn-all-cate .line-middle, #allCateArea .btn-all-cate .line-bottom {position: absolute; display:block; height:2px;width:18px; border-radius:0px; background:#000;} #allCateArea .btn-all-cate .line-top {top:0; -webkit-transform-origin:18px -2px; transform-origin:18px -2px;} #allCateArea .btn-all-cate .line-middle {top:6px; -webkit-transition: opacity 200ms linear;transition: opacity 200ms linear;} #allCateArea .btn-all-cate .line-bottom {bottom:0; -webkit-transform-origin:18px 4px;transform-origin:18px 4px;} #allCateArea .btn-all-cate.is-open { background:#ddd } #allCateArea .btn-all-cate.is-open .line-top {-webkit-animation: line-top-out 600ms linear normal;animation: line-top-out 600ms linear normal;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;} #allCateArea .btn-all-cate.is-open .line-middle {opacity: 0;} #allCateArea .btn-all-cate.is-open .line-bottom {-webkit-animation: line-bot-out 600ms linear normal;animation: line-bot-out 600ms linear normal;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;} #allCateArea .btn-all-cate.is-closed .line-top {-webkit-animation: line-top-in 600ms linear normal;animation: line-top-in 600ms linear normal;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;} #allCateArea .btn-all-cate.is-closed .line-middle {-webkit-transition-delay: 200ms;transition-delay: 200ms;} #allCateArea .btn-all-cate.is-closed .line-bottom {-webkit-animation: line-bot-in 600ms linear normal;animation: line-bot-in 600ms linear normal;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;} @-webkit-keyframes line-top-in { 0% {left: -5px;bot: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} 20% {left: -5px;bot: 0;-webkit-transform: rotate(-60deg);transform: rotate(-60deg);} 80% {left: 0;bot: 0;-webkit-transform: rotate(15deg);transform: rotate(15deg);} 100% {left: 0;bot: 1px;-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @keyframes line-top-in { 0% {left: -5px;bot: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} 20% {left: -5px;bot: 0;-webkit-transform: rotate(-60deg);transform: rotate(-60deg);} 80% {left: 0;bot: 0;-webkit-transform: rotate(15deg);transform: rotate(15deg);} 100% {left: 0;bot: 1px;-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @-webkit-keyframes line-top-out { 0% {left: 0;top: 0;-webkit-transform: rotate(0deg);transform: rotate(0deg);} 20% {left: 0;top: 0;-webkit-transform: rotate(15deg);transform: rotate(15deg);} 80% {left: -5px;top: 0;-webkit-transform: rotate(-60deg);transform: rotate(-60deg);} 100% {left: -5px;top: 1px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} } @keyframes line-top-out { 0% {left: 0;top: 0;-webkit-transform: rotate(0deg);transform: rotate(0deg);} 20% {left: 0;top: 0;-webkit-transform: rotate(15deg);transform: rotate(15deg);} 80% {left: -5px;top: 0;-webkit-transform: rotate(-60deg);transform: rotate(-60deg);} 100% {left: -5px;top: 1px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);} } @-webkit-keyframes line-bot-in { 0% {left: -5px;-webkit-transform: rotate(45deg);transform: rotate(45deg);} 20% {left: -5px;bot: 0;-webkit-transform: rotate(60deg);transform: rotate(60deg);} 80% {left: 0;bot: 0;-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 100% {left: 0;-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @keyframes line-bot-in { 0% {left: -5px;-webkit-transform: rotate(45deg);transform: rotate(45deg);} 20% {left: -5px;bot: 0;-webkit-transform: rotate(60deg);transform: rotate(60deg);} 80% {left: 0;bot: 0;-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 100% {left: 0;-webkit-transform: rotate(0deg);transform: rotate(0deg);} } @-webkit-keyframes line-bot-out { 0% {left: 0;-webkit-transform: rotate(0deg);transform: rotate(0deg);} 20% {left: 0;-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 80% {left: -5px;-webkit-transform: rotate(60deg);transform: rotate(60deg);} 100% {left: -5px;-webkit-transform: rotate(45deg);transform: rotate(45deg);} } @keyframes line-bot-out { 0% {left: 0;-webkit-transform: rotate(0deg);transform: rotate(0deg);} 20% {left: 0;-webkit-transform: rotate(-15deg);transform: rotate(-15deg);} 80% {left: -5px;-webkit-transform: rotate(60deg);transform: rotate(60deg);} 100% {left: -5px;-webkit-transform: rotate(45deg);transform: rotate(45deg);} } #headerNavArea .hd-nav .navArea { margin-left:45px; position:relative; width:1155px; height:44px; overflow:hidden } #headerNavArea .hd-nav .navArea li { float:left } #headerNavArea .hd-nav .navArea li a { display:block; padding:0 31px; height:44px; font-size:13px; line-height:44px } #headerNavArea .hd-nav .navArea li a.t1 { color:#898989 } #headerNavArea .hd-nav .navArea li a.t1r { color:#FF2C2C } #headerNavArea .hd-nav .navArea li a.t2 { padding:0 20px 0 25px; color:#0068b7 } #headerNavArea .hd-nav .navArea li a.t3 { padding:0 20px 0 25px; color:#006600} #headerNavArea .hd-nav .box-all-cate { display:none; position:absolute; top:44px; left:0; right:0; width:1198px; border:1px solid #ddd; background:#fff; z-index:100 } #headerNavArea .hd-nav .box-all-cate a:hover { text-decoration:underline } #headerNavArea .hd-nav .box-all-cate .inner { padding:15px 26px 28px 17px; *zoom:1 } #headerNavArea .hd-nav .box-all-cate .inner .cate, #headerNavArea .hd-nav .box-all-cate .inner .cate2 { padding-left:23px; position:relative; border-bottom:1px solid #ddd; *zoom:1 } #headerNavArea .hd-nav .box-all-cate .inner .cate:after, #headerNavArea .hd-nav .box-all-cate .inner .cate2:after { display:block; clear:both; content:'' } #headerNavArea .hd-nav .box-all-cate .inner .cate dl { padding:20px 0; float:left; width:148px } #headerNavArea .hd-nav .box-all-cate .inner .cate .last { width:90px } #headerNavArea .hd-nav .box-all-cate .inner dt a { display:block; font-size:13px } #headerNavArea .hd-nav .box-all-cate .inner .cate dd { padding-top:7px } #headerNavArea .hd-nav .box-all-cate .inner dd a { display:block; font-size:13px; color:#898989 } #headerNavArea .hd-nav .box-all-cate .inner .cate2.last { border-bottom:0 } #headerNavArea .hd-nav .box-all-cate .inner .cate2 dt, #headerNavArea .hd-nav .box-all-cate .inner .cate2 dd { float:left } #headerNavArea .hd-nav .box-all-cate .inner .cate2 dd { padding-left:19px } #headerNavArea .hd-nav .box-all-cate .inner .cate2 dt, #headerNavArea .hd-nav .box-all-cate .inner .cate2 dd a { display:block; line-height:49px } /* 우측 고정메뉴 */ #fixRightMenu { position:fixed; top:0; right:0; width:229px; height:100%; border-left:1px solid #ddd; background:#fff; z-index:200 } #fixRightMenu .inner { padding:37px 26px } #fixRightMenu .quickM { border-top:1px solid #ddd; border-left:1px solid #ddd } #fixRightMenu .quickM ul { *zoom:1 } #fixRightMenu .quickM ul:after { display:block; clear:both; content:"" } #fixRightMenu .quickM li { float:left; width:87px; height:29px; border-right:1px solid #ddd; border-bottom:1px solid #ddd } #fixRightMenu .quickM li a { display:block; padding-left:14px; color:#898989; line-height:29px } #fixRightMenu .quickM li.last { width:175px; text-align:center; background:url(/design/zoom/phps/common/ico_right_shop.gif) 32px 5px no-repeat } #fixRightMenu h3 { padding:25px 0 10px; font-size:13px; font-weight:700 } #fixRightMenu .box-reivew { width:177px; height:247px; overflow:hidden } #fixRightMenu .box-reivew .bx-viewport { height:247px !important } #fixRightMenu .box-reivew .bx-viewport li { width:177px !important } #fixRightMenu .box-reivew .list { position:relative; width:177px; height:247px } #fixRightMenu .box-reivew .list .mask { display:none; position:absolute; top:0; left:0; width:177px; height:247px; background:rgba(0,0,0,0.5); z-index:10 } #fixRightMenu .box-reivew .list .info { display:none; position:absolute; bottom:10px; left:15px; right:15px; color:#fff; z-index:20 } #fixRightMenu .box-reivew .list .info .score { display:block } #fixRightMenu .box-reivew .list .info .name { display:block; padding-top:10px; line-height:18px } #fixRightMenu .box-reivew .list .info .subname { display:block; padding-top:10px; line-height:18px } #fixRightMenu .box-reivew .list a:hover .mask, #fixRightMenu .box-reivew .list a:hover .info { display:block } #fixRightMenu .box-reivew .bx-pager { padding-top:15px; text-align:center } #fixRightMenu .box-reivew .bx-pager .bx-pager-item { display:inline-block; margin:0 2px } #fixRightMenu .box-reivew .bx-pager .bx-pager-item a { display:block; width:15px; height:3px; text-indent:-9999em; background:#ddd } #fixRightMenu .box-reivew .bx-pager .bx-pager-item a.active { width:30px; background:#000 } #fixRightMenu .today-view { margin-left:-14px; width:205px } #fixRightMenu .today-view h3 { padding-left:14px } #fixRightMenu .box-today { padding:0 15px; position:relative; height:100px; overflow:hidden } #fixRightMenu .box-today .bx-viewport { height:100px !important } #fixRightMenu .box-today .bx-viewport li { width:71px !important } #fixRightMenu .box-today img { width:71px; height:100px } #fixRightMenu .box-today .bx-controls-direction { position:absolute; top:0; left:0; right:0 } #fixRightMenu .box-today .bx-controls-direction a { position:absolute; top:40px; width:20px; height:20px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_today_arr.gif) 0 0 no-repeat } #fixRightMenu .box-today .bx-controls-direction a.bx-prev { left:0; background-position:0 0 } #fixRightMenu .box-today .bx-controls-direction a.bx-next { right:0; background-position:0 -20px } #fixRightMenu .cs-center .tel { font-size:14px; font-weight:700 } #fixRightMenu .cs-center ul { padding-top:5px } #fixRightMenu .cs-center li { line-height:18px } #fixRightMenu #btRightFix { position:absolute; bottom:194px; left:-45px; width:45px; height:45px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_right_btn.gif) 0 0 no-repeat; cursor:pointer } #fixRightMenu #btRightFix.right-open { background-position:0 0 } #fixRightMenu #btRightFix.right-close { background-position:0 -45px } #fixRightMenu .fix-scr { position:absolute; bottom:100px; left:-45px; } #fixRightMenu .fix-scr a { display:block; margin-top:2px; width:45px; height:45px; text-indent:-9999em; background:url(/design/zoom/phps/common/sp_right_scr.gif) 0 0 no-repeat } #fixRightMenu .fix-scr a.bt-top { background-position:0 0 } #fixRightMenu .fix-scr a.bt-bottom { background-position:0 -45px } #fixRightMenu .right-buy { display:none; position:absolute; bottom:299px; left:-45px; width:45px; height:90px; text-indent:-9999em; background:url(/design/zoom/phps/common/btn_detail_buy.gif) 0 0 no-repeat; cursor:pointer } /* BASIC css end */