영카트 카테고리 관련 질문입니다. 채택완료
영카트 테마를 활용해서 만들고 있는데
메뉴바를 클릭하면 해당 메뉴가 드롭다운하게 좀 하고 싶습니다.
참고사이트 : http://sample06.tloghost.kr/">http://sample06.tloghost.kr/
해당 사이트 메뉴처럼 적용을 하고 싶습니다.
category.php 및 main-shop.css 어디를 건더야 될지 고수님들의 조언 좀 부탁 드립니다.
category.php
</p>
<p><?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가</p>
<p>function get_mshop_category($ca_id, $len)
{
global $g5;</p>
<p> $sql = " select ca_id, ca_name from {$g5['g5_shop_category_table']}
where ca_use = '1' ";
if($ca_id)
$sql .= " and ca_id like '$ca_id%' ";
$sql .= " and length(ca_id) = '$len' order by ca_order, ca_id ";</p>
<p> return $sql;
}
?></p>
<p><div id="category" class="menu">
<button type="button" class="menu_close"><i class="fa fa-times" aria-hidden="true"></i><span class="sound_only">카테고리닫기</span></button>
<div class="btn_login">
<?php if ($is_member) { ?>
<button type="button" id="btn_user" class="btn_ol"><?php echo get_member_profile_img($member['mb_id']); ?><span class="txt"><?php echo $member['mb_id'] ?> 님 </span><span class="sound_only">사용자메뉴 열기</span></button>
<?php } else { ?>
<button type="button" class="btn_ol">로그인</button>
<a href="<?php echo G5_BBS_URL; ?>/register.php" class="btn_ol">회원가입</a>
<?php } ?></p>
<p> </div>
<?php echo outlogin('theme/shop_basic'); // 외부 로그인 ?>
<div class="menu_wr">
<h2>카테고리</h2>
<?php
$mshop_ca_href = G5_SHOP_URL.'/list.php?ca_id=';
$mshop_ca_res1 = sql_query(get_mshop_category('', 2));
for($i=0; $mshop_ca_row1=sql_fetch_array($mshop_ca_res1); $i++) {
if($i == 0)
echo '<ul class="cate">'.PHP_EOL;
?>
<li class="ft_box ft_info">
<a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=c0"><b>회사소개</b></a>
<button type="button" class="sub_ct_toggle ct_op">하위분류 열기</button>
<ul class="sub_cate sub_cate1">
<li><a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=c0"><b>인사말 </b></a></li>
<li><a href="../bbs/board.php?bo_table=history"><b>사업연혁</b></a></li>
<li><a href="../bbs/board.php?bo_table=gallery"><b>납품현황</b></a></li>
<li><a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=map"><b>오시는길</b></a></li>
</ul>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row1['ca_id']; ?>"><b><?php echo get_text($mshop_ca_row1['ca_name']); ?></b></a>
<?php
$mshop_ca_res2 = sql_query(get_mshop_category($mshop_ca_row1['ca_id'], 4));
if(sql_num_rows($mshop_ca_res2))
echo '<button class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row1['ca_name']).' 하위분류 열기</button>'.PHP_EOL;</p>
<p> for($j=0; $mshop_ca_row2=sql_fetch_array($mshop_ca_res2); $j++) {
if($j == 0)
echo '<ul class="sub_cate sub_cate1">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row2['ca_id']; ?>"><b><?php echo get_text($mshop_ca_row2['ca_name']); ?></b></a>
<?php
$mshop_ca_res3 = sql_query(get_mshop_category($mshop_ca_row2['ca_id'], 6));
if(sql_num_rows($mshop_ca_res3))
echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row2['ca_name']).' 하위분류 열기</button>'.PHP_EOL;</p>
<p> for($k=0; $mshop_ca_row3=sql_fetch_array($mshop_ca_res3); $k++) {
if($k == 0)
echo '<ul class="sub_cate sub_cate2">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row3['ca_id']; ?>"><?php echo get_text($mshop_ca_row3['ca_name']); ?></a>
<?php
$mshop_ca_res4 = sql_query(get_mshop_category($mshop_ca_row3['ca_id'], 8));
if(sql_num_rows($mshop_ca_res4))
echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row3['ca_name']).' 하위분류 열기</button>'.PHP_EOL;</p>
<p> for($m=0; $mshop_ca_row4=sql_fetch_array($mshop_ca_res4); $m++) {
if($m == 0)
echo '<ul class="sub_cate sub_cate3">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row4['ca_id']; ?>"><?php echo get_text($mshop_ca_row4['ca_name']); ?></a>
<?php
$mshop_ca_res5 = sql_query(get_mshop_category($mshop_ca_row4['ca_id'], 10));
if(sql_num_rows($mshop_ca_res5))
echo '<button type="button" class="sub_ct_toggle ct_op">'.get_text($mshop_ca_row4['ca_name']).' 하위분류 열기</button>'.PHP_EOL;</p>
<p> for($n=0; $mshop_ca_row5=sql_fetch_array($mshop_ca_res5); $n++) {
if($n == 0)
echo '<ul class="sub_cate sub_cate4">'.PHP_EOL;
?>
<li>
<a href="<?php echo $mshop_ca_href.$mshop_ca_row5['ca_id']; ?>"><?php echo get_text($mshop_ca_row5['ca_name']); ?></a>
</li>
<?php
}</p>
<p> if($n > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}</p>
<p> if($m > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}</p>
<p> if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}</p>
<p> if($j > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
}
?></p>
<p>
</li>
<li><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=free&page="><b>기술자료(인증서)</b></a></li>
<li class="ft_box ft_info">
<a href="<?php echo G5_BBS_URL; ?>/faq.php?fm_id=1"><b>고객지원 </b></a>
<button type="button" class="sub_ct_toggle ct_op">하위분류 열기</button>
<ul class="sub_cate sub_cate1">
<li><a href="<?php echo G5_BBS_URL; ?>/faq.php?fm_id=1"><b>자주하시는질문 </b></a></li>
<li><a href="<?php echo G5_BBS_URL; ?>/content.php?co_id=down"><b>카달로그 </b></a></li>
<li><a href="<?php echo G5_BBS_URL; ?>/qalist.php"><b>1:1문의 </b></a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/orderinquiry.php"><b>주문조회 </b></a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/mypage.php"><b>마이페이지 </b></a></li>
<li><a href="<?php echo G5_SHOP_URL; ?>/personalpay.php"><b>개인결제 </b></a></li>
</ul>
<li><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=notice"><b>공지사항</b></a></li>
</ul>
</div>
</p>
<p></div></p>
<p>
<script>
$(function (){</p>
<p> $("button.sub_ct_toggle").on("click", function() {
var $this = $(this);
$sub_ul = $(this).closest("li").children("ul.sub_cate");</p>
<p> if($sub_ul.size() > 0) {
var txt = $this.text();</p>
<p> if($sub_ul.is(":visible")) {
txt = txt.replace(/닫기$/, "열기");
$this
.removeClass("ct_cl")
.text(txt);
} else {
txt = txt.replace(/열기$/, "닫기");
$this
.addClass("ct_cl")
.text(txt);
}</p>
<p> $sub_ul.toggle();
}
});</p>
<p>
$(".content li.con").hide();
$(".content li.con:first").show();
$(".cate_tab li a").click(function(){
$(".cate_tab li a").removeClass("selected");
$(this).addClass("selected");
$(".content li.con").hide();
//$($(this).attr("href")).show();
$($(this).attr("href")).fadeIn();
});
});
</script> </p>
<p>
moblie-shop.css
[code]
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css'); @charset "utf-8";
/* 초기화 */ html {overflow-y:scroll;height:100%;min-width:320px} body {margin:0;padding:0;font-size:0.813em;height:100%;font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;color:#64646c} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;color:#64646c} h7 {font-size:1.3em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} input, button {margin:0;padding:0;font-size:1em;font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;} button, input[type=submit] {cursor:pointer} input[type=text], input[type=password], input[type=image], button {font-size:1em;-webkit-appearance:none} textarea, select,button {font-size:1em;font-family:'Noto Sans KR', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;} textarea {border-radius:0;-webkit-appearance:none} select {margin:0;background:none} p {margin:0;padding:0;word-break:break-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a {color:#000;text-decoration:none} ul,li,dl,dt,dd{padding:0;margin:0} ul{list-style:none;} img{vertical-align:top;max-width:100%;height:auto}
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0px} #hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops_con {} .hd_pops img{max-width:100%;height:auto} .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right} .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
/* 상단 레이아웃 */ #hd {position:fixed;top:0;left:0;width:100%;background:#fff;border-bottom:1px solid #e6eaed; z-index:99 ; -webkit-box-shadow: 0 2px 9px rgba(0,0,0,0.1); -moz-box-shadow: 0 2px 9px rgba(0,0,0,0.1); box-shadow: 0 2px 9px rgba(0,0,0,0.1)} #hd h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden;}
#hd_menu{border-bottom:1px solid #e6eaed} #hd_menu ul{margin:0 auto;max-width:1200px} #hd_menu ul:after {display:block;visibility:hidden;clear:both;content:""} #hd_menu li{float:left;line-height:45px;font-size:0.923em;margin:0 8px} #hd_menu li a{color:#aeb4bf} #hd_menu li a:hover{color:#000} #hd_menu .hd_menu_right{float:right}
/* 메인 메뉴 높이 padding:5px 조절하면 됨 */ #hd_wr {margin:0 auto;max-width:1400px;padding:5px 100px 10px 10px;position:relative; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out;}
#hd_wr:after {display:block;visibility:hidden;clear:both;content:""} #logo{float:left;margin-top:5px;margin-right:20px} #logo img{vertical-align:middle;height:auto;width:auto}
#logo1{float:left;margin-top:5px;margin-right:20px} #logo1 img{vertical-align:middle;height:80px;width:auto}
#hd_sch {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;background:rgba(0,0,0,0.85);z-index:999;text-align:center;} .hd_sch_wr{position:absolute;top:50%;left:50%;width:80%;margin-top:-50px;margin-left:-40%} #hd_sch h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden} #hd_sch .sch_inner {position:relative;} #hd_sch .sch_inner:after {display:block;visibility:hidden;clear:both;content:""} #hd_sch #sch_str {background:transparent;border:0;border-bottom:2px solid #fff;color:#fff;width:100%;height:50px;padding-left:50px;font-size:16px;outline:none} #hd_sch .sch_submit {position:absolute;top:0;left:0;height:50px;;border:0;cursor:pointer;background:transparent;font-weight:600;color:#fff;width:50px;font-size:16px;} #hd_sch .btn_close{position:absolute;top:0;right:0;width:70px;height:70px;background:none;color:#fff;border:0;font-size:16px;opacity:0.5} #hd_sch .btn_close:hover{opacity:1}
#ppl_word{color:#fff;margin-top:15px;line-height:25px} #ppl_word:after {display:block;visibility:hidden;clear:both;content:""} #ppl_word h3 {padding:0 8px;margin-right:5px;background:#fff;color:#000;display:inline-block;float:left;font-weight:500;border-radius:5px} #ppl_word ol{float:left;padding:0;margin:0} #ppl_word li{display:inline-block;list-style:none} #ppl_word li a{display:block;padding: 0 10px;color:#fff;border-radius:5px;font-weight:300;opacity:0.8} #ppl_word li a:hover{opacity:1}
#hd_btn {position:absolute;top:15px;right:0} #hd_btn button{height:45px;line-height:45px;width:45px;background:none;border:0;vertical-align:top} #hd_btn i{font-size:18px} #hd_btn a{display:inline-block;line-height:45px;width:45px;text-align:center;vertical-align:top} #btn_cartop{position:relative} #btn_cartop .cart-count{position:absolute;top:5px;right:0;background:#64646c;border-radius:15px;font-size:10px;color:#fff;padding:0 5px;border:2px solid #fff;line-height:16px}
.hd_admin{position:fixed;bottom:10px;left:10px;} .hd_admin a{padding:0 20px;display:inline-block;;line-height:40px;background:#d12323;z-index:999;color:#fff} .hd_admin a:hover{background:#ff0000}
@media (max-width: 969px){ #hd_wr {padding:15px; } #logo{margin-top:-10px;margin-right:0px} #logo img{vertical-align:middle;height:50px;width:auto} #hd_btn{top:0;right:10px} #hd_btn button{width:40px;height:55px} #hd_btn a{line-height:55px} #btn_cartop .cart-count{top:7px} #hd_btn .btn_ol{width:40px} #hd_btn .btn_ol .txt{display:none}
#hd_menu{display:none}
}
/*카테고리*/
.menu_wr h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
@media (max-width: 969px){ .menu {display:none;overflow-y:auto;position:fixed;top:0;left:0;height:100%;width:300px;background:#f3f3f3;z-index:99999;text-align:left; -webkit-box-shadow:0 2px 15px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.2); box-shadow: 0 2px 15px rgba(0,0,0,0.2)}
#btn_user{display:none} .btn_login{background:#fff;padding:0 10px} .btn_login .btn_ol{line-height:55px;height:55px;border:0;background:none;color:#717989;padding:0 10px;position:relative} .btn_login a:before{position:absolute;top:50%;left:0;content:'';background:#e3e3e3;width:1px;height:15px;margin-top:-7px}
.menu .menu_close {position:absolute;top:0;right:0;width:55px;height:55px;background:none;color:#aaa;font-size:16px;border:0;z-index:199999} .menu .menu_close:hover{color:#000} .menu_wr{padding:10px 0;background:#fff;margin:10px 0;border-top:1px solid #eee} .menu_wr a {display:block;padding: 0 20px;color:#727280} .menu_wr li{position:relative;z-index:99999;line-height:45px;} .menu_wr li:hover {background:#f3f3f3; } .menu_wr li button{position:absolute;top:0;right:0;background:url;border:0;width:45px;height:45px;overflow:hidden;border:0;background:url(../img/mobile/gnb_bg.png) no-repeat 50% 50%;text-indent:-9999px} .menu_wr li button.ct_cl{background:url(../img/mobile/gnb_bg2.png) no-repeat 50% 50%}
.sub_cate{display:none;background:#fff;font-size:0.923em;} .sub_cate a{padding-left:30px} .sub_cate1{} .sub_cate li:hover{position:relative;} .sub_cate2 a{padding-left:40px;background-position:31px 17px} .sub_cate3 a{padding-left:50px;background-position:41px 17px} .sub_cate4 a{padding-left:60px;background-position:51px 17px} } @media (min-width: 970px){
#btn_cate{display:none} .menu{display:block !important} .menu:after {display:block;visibility:hidden;clear:both;content:""} .menu_wr{float:left;}
.btn_login .btn_ol{width:auto;vertical-align:top} .btn_login .btn_ol .txt{color:#717989;display:inline-block;margin-left:5px} .btn_login{float:right;line-height:45px} .btn_login a{padding:0 10px;display:inline-block;position:relative;color:#717583;} .btn_login a:before{position:absolute;top:50%;left:0;content:'';background:#e3e3e3;width:1px;height:15px;margin-top:-7px} .btn_login button{background:0;padding:0 10px;border:0;color:#717583;outline:none;height:45px;line-height: 45px;} .btn_login img{ width:30px;height:30px;border-radius:50px;margin-right:5px;margin-top:7px;vertical-align:top} .menu .menu_close{display:none} .menu_wr li{float:left;padding:0 15px;line-height:90px;font-size:1.654em;font-weight:500} .menu_wr li button{border:0;width:25px;height:45px;overflow:hidden;border:0;background:url(../img/mobile/btn_menu.png) no-repeat 50% 50%;text-indent:-9999px;opacity:0.5} .sub_cate{display:none} .sub_cate a{display:block } .menu_wr li:hover .sub_cate1{display: block;position:absolute; padding:10px 0 ; ; background:#fff;min-width:100px; -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.2); box-shadow: 0 2px 15px rgba(0,0,0,0.2)}
.sub_cate1 li{display:block;font-size:18px;font-weight:300;line-height:40px;padding:0 20px} .sub_cate1 li:hover{color:#000;background:#f3f3f3} .sub_cate button{display:none} }
/* 중간 레이아웃 */ #container {margin-top:75px} #container_title {margin:0 auto;max-width:1200px;padding:40px 20px 20px;text-align:center;font-size:1.846em} .idx_c{margin:0 auto;max-width:1200px;} .idx_c:after {display:block;visibility:hidden;clear:both;content:""}
.box{background:#fff; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.07); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.07); box-shadow: 0 2px 5px rgba(0,0,0,0.07)}
.container{margin:75px auto 20px;max-width:1200px} #container.idx-container{padding: 0 } .view-container #container_title{display:none}
#container1 {margin-top:75px} #container1_title {margin:0 auto;max-width:1920px;padding:40px 20px 20px;text-align:center;font-size:1.846em} .idx_c1{margin:0 auto;max-width:1920px;} .idx_c1:after {display:block;visibility:hidden;clear:both;content:""}
.box{background:#fff; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.07); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.07); box-shadow: 0 2px 5px rgba(0,0,0,0.07)}
.container1{margin:75px auto 20px;max-width:1920px} #container1.idx-container1{padding: 0 } .view-container1 #container1_title{display:none}
@media (max-width: 969px){ #container {margin-top:55px} .container{margin:55px auto 20px} #container_title{font-size:1.5em;padding:20px} }
/*메인*/ #idx_tab{padding-left:220px; position:relative;} #idx_tab h2{display:none} #idx_tab .tabs{position:absolute;top:0;left:0} #idx_tab .tabs li{display: block; font-size:1.154em;margin: 0 0 15px;font-weight:500; line-height: 24px;color: #717989; text-align: left;cursor:pointer} #idx_tab .tabs .current{color: #64646c;position: relative;text-decoration: underline;} #idx_tab .sct_wrap{display:none} #idx_tab .sct_wrap.current{display: block; }
#idx_review{background:#f8f9fa;text-align:center;padding:100px 0} #idx_review h2{ text-align: center; font-size: 1.846em;margin: 0 0 20px;} .review{max-width:1200px;margin:0 auto;} .review .rv_li{margin:20px;background:#fff;opacity:0.5; position:relative;padding:40px;text-align:left; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .1);} .review .rv_li:hover { -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .15); -moz-box-shadow:0 5px 10px rgba(0, 0, 0, .15); box-shadow:0 5px 10px rgba(0, 0, 0, .15);} .review .slick-active{opacity:1} .review .rv_hd{position:relative;padding-left:70px;line-height:25px;margin-bottom:20px} .review .prd_img{position:absolute;top:0;left:0;} .review .prd_img img{border-radius:50px} .review .rv_tit{display:block;font-size:1.077em;font-weight:600} .review .rv_prd{color:#717989} .review p{line-height:1.7em;min-height:80px}
@media (max-width:969px){ #idx_tab{padding:10px} #idx_tab .tabs{position:relative} #idx_tab .tabs{position:relative;width:100%;margin-bottom:20px;text-align:center} #idx_tab .tabs li{display:inline-block;margin:0 10px 10px} #idx_tab .sct_wrap {margin:10px 0}
} @media (max-width:639px){ #idx_review{padding:80px 0} .review .rv_li{margin:8px}
} /* 내용관리 */ #ctt {margin:10px 0;padding:10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9} .ctt_admin {margin:0 5px;text-align:right} #ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #ctt_con {padding:10px 0} .ctt_img {text-align:center}
/* 하단 레이아웃 */ #ft {background:#333;position:relative;z-index:10} .ft_notice{border-bottom:1px solid #282828} .ft_wr{max-width:1200px;margin:0 auto;padding:60px 0} .ft_wr ul:after {display:block;visibility:hidden;clear:both;content:""} .ft_wr .ft_box{float:left;width:33.3333%;text-align:left;padding:0 20px} .ft_wr .ft_box h2{color:#9f9f9f;font-size:1.154em;margin-bottom:25px} .ft_wr .ft_box strong{display:block;color:#dddddd;margin-bottom:20px;font-size:1.8em} .ft_wr .ft_box p{color:#9f9f9f;font-weight:300;line-height:1.7em;font-size:0.923em} .ft_wr .ft_box p span{display:inline-block;margin-right:8px;} .ft_wr .ft_info{width:66.6666%}
.ft_wr1{background:#282828} #ft_company{margin:0 auto;max-width:1200px;padding:40px 20px;color:#5e5e5e;text-align:right} #ft_company:after {display:block;visibility:hidden;clear:both;content:""} #ft_company a{display:inline-block;margin:0 10px;color:#5e5e5e;} .ft_copy{float:left}
#ft_to_top{position:fixed;bottom:10px;right:10px;width:40px;line-height:40px;background:#fff;opacity:0.6;text-align:center;border-radius:30px; -webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); box-shadow: 1px 1px 1px rgba(0,0,0,0.2); -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out;} #ft_to_top:hover{opacity:1; -webkit-box-shadow:1px 1px 15px rgba(0,0,0,0.09); -moz-box-shadow: 1px 1px 15px rgba(0,0,0,0.09); box-shadow: 1px 1px 15px rgba(0,0,0,0.09)}
@media (max-width: 969px){ .ft_wr {padding: 20px} .ft_wr .ft_box{width:100%;padding:40px 0} #ft_company{text-align:center} .ft_copy{float:none;margin-top:10px} }
@media (max-width:639px){ .ft_wr .ft_box{padding:20px 0} .ft_wr .ft_box h2{margin-bottom:10px} .ft_wr .ft_box strong{margin-bottom:10px}
} /* 목록 바로가기 */ .sanchor {margin:0 0 5px;padding:0} .sanchor:after {display:block;visibility:hidden;clear:both;content:""} .sanchor li {float:left;list-style:none;width:25%;border-top:2px solid #000;text-align:center; overflow: hidden; white-space: nowrap;letter-spacing:0.2em;font-size:0.93em} .sanchor a {display:block;padding:10px;border-left:1px solid #ededed;border-bottom:1px solid #ededed;background:#fcfcfc;text-decoration:none;color:#484848} .sanchor a:focus, .sanchor a:hover {background:#eee;text-decoration:none} .sanchor a.sanchor_on {background:#fff;text-decoration:none;border-bottom:1px solid #fff;}
/* ####### 쇼핑몰 컨텐츠 ####### */
.st_bg{display: inline-block;width: 1px;height: 10px;margin: 0 10px;background: #e2e1e0;vertical-align: -1px;} #listtype{margin:10px;}
#sod_chk {padding:15px 15px 0;} .sod_list {padding:10px 0;} .sod_list .sod_li {background:#fff;border: 1px solid #e7e8ef;margin:10px 0;} .sod_list .li_name{;line-height:1.3em;padding: 10px 10px;font-size:1.083em} .sod_list .li_op_wr{position:relative;margin:10px;padding-left:90px;min-height:80px} .sod_list .total_img{position:absolute;top:0;left:0} .sod_list .mod_options{padding: 0 7px;border: 1px solid #38b2b9;color: #38b2b9;background: #fff;height: 23px;line-height: 21px;margin: 5px 0 0;} .sod_list .li_prqty{margin:10px 10px ;border-top:1px solid #dcdcdc;padding:10px 0 0} .sod_list .li_prqty:after {display:block;visibility:hidden;clear:both;content:''} .sod_list .li_prqty_sp{float:left;width:50%;display:block;line-height:20px;padding:0 7px;text-align :right;} .sod_list .li_prqty_sp span{float:left} .sod_list .prqty_sc,.sod_list .prqty_price{border-right:1px solid #dcdcdc} .sod_list .total_price{background:#f5f5f5;border:1px solid #e2e2e2;display:block;clear:both;margin:10px;text-align:right;padding:5px 10px;line-height:20px} .sod_list .total_price span{float:left} .sod_list .total_price strong{font-size:1.25em;color:#7d8dff} .sod_opt li {padding-left: 10px;background: url('../img/bullet.gif') no-repeat 3px 50%;color: #777;margin: 3px 0;line-height: 1.3em;}
#sit_opt_added {margin:0;padding:0;border-bottom:0;list-style:none} #sit_opt_added li {padding:15px 0;border-bottom:1px solid #eee;margin:0 0 2px;position:relative} #sit_opt_added li .opt_name{line-height:18px;padding:0 0 10px} #sit_opt_added li .opt_count{} #sit_opt_added li .opt_count:after {display:block;visibility:hidden;clear:both;content:""} #sit_opt_added button {float:left;width:30px;height:30px;border:1px solid #64646c;background:#fff;color:#64646c;font-size:0.92em} #sit_opt_added button:hover{background:#e5e4e4;border-color:#64646c;color:#64646c} #sit_opt_added .num_input {float:left;border:0;height:30px;width:40px;border-top:1px solid #64646c;border-bottom:1px solid #64646c;text-align:center;color:#333;} #sit_opt_added .num_input:focus{background:#64646c;color:#64646c}
#sit_opt_added .sit_opt_del{background:#64646c;color:#aaa;border:0;margin-left:3px}
#sit_opt_added .sit_opt_prc{float:right;display:block;padding:0 3px;text-align:right;line-height:30px;font-weight:bold;}
#sit_opt_added .sit_opt_prc{float:right;display:none;padding:0 3px;text-align:right;line-height:30px;font-weight:bold;}
/* 장바구니 */ #mod_option_frm{position:fixed;top:50%;left:50%;background:#fff;width:300px;max-height:300px;margin-left:-150px;margin-top:-150px;overflow-y:auto;z-index:99;border-radius:0 0 3px 3px; -webkit-box-shadow:1px 5px 15px rgba(0,0,0,0.4); -moz-box-shadow:1px 5px 15px rgba(0,0,0,0.4); box-shadow: 1px 5px 15px rgba(0,0,0,0.4);} #mod_option_frm h2{height:45px;line-height:45px;font-size:1.167em;border-bottom: 1px solid #eee;padding:0 15px} #mod_option_frm #sit_sel_option{margin:15px } #mod_option_frm #sit_tot_price{margin:15px;line-height:30px } #mod_option_frm #sit_sel_option ul{;background:#f3f3f3;border:0 } #mod_option_frm h3{margin: 0 0 10px;color:#5772d5;} #mod_option_frm .option_wr {margin:15px ; } #mod_option_frm .option_wr label{margin: 0 0 5px;display:block} #mod_option_frm .option_wr select{width:100%; height: 40px;border: 1px solid #d9d9d9;margin: 0 0 5px;} #mod_option_frm .btn_confirm{margin:10px ; } #mod_option_frm .btn_confirm .btn_submit{height:40px;font-weight:bold;width:100%;} #mod_option_frm .btn_confirm .btn_close{position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#999;font-size:1.25em}
#sod_bsk{padding:20px 0 0;background: #f3f3f3;} #sod_bsk:after {display:block;visibility:hidden;clear:both;content:''} #sod_bsk .btn_del_wr{margin:10px } #sod_bsk .btn_del_wr .btn01{height:30px} #sod_bsk .sod_ta_wr{background:#e9e9e9;padding:20px;} #sod_bsk .go_shopping{margin: 10px;} #sod_bsk .go_shopping .btn_b01{line-height:43px;font-size:1.167em;font-weight:bold;width:100%;text-align:center;display:block} #sod_bsk .go_shopping1{margin: 10px;} #sod_bsk .go_shopping1 .btn_b01{font-size:2.167em;font-weight:bold}
#m_sod_bsk_tot{padding:15px;background:#f3f3f3} #sod_bsk #m_sod_bsk_tot {background:none;padding:0} #m_sod_bsk_tot:after{display:block;visibility:hidden;clear:both;content:""} #m_sod_bsk_tot dt{float:left;width:40%;padding:5px 0 ;line-height:20px;clear:both} #m_sod_bsk_tot dd{float:left;width:60%;padding:5px 0;text-align:right;line-height:20px} #m_sod_bsk_tot .sod_bsk_cnt{border-top:1px solid #ccc;font-weight:bold;margin-top:15px;line-height:25px} #m_sod_bsk_tot .sod_bsk_cnt strong{font-size:1.25em} #sod_bsk_act .btn_submit{height:45px;font-size:1.167em;font-weight:bold;width:100%;margin:10px 0;border-radius:50px}
.cart_list:after {display:block;visibility:hidden;clear:both;content:''} .cart_list .sod_li{background:#fff;border:1px solid #e7e8ef;border-bottom:1px solid #cbd0d5;margin:10px 0;position:relative; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08); -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.08); box-shadow: 0 3px 6px rgba(0,0,0,0.08);} .cart_list .sod_li:hover{border:1px solid #406fff; -webkit-box-shadow: 0 3px 15px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 15px rgba(0,0,0,0.2); box-shadow: 0 3px 15px rgba(0,0,0,0.2);} .cart_list .sod_li:after {display:block;visibility:hidden;clear:both;content:''} .cart_list .li_op_wr{padding:20px;padding-left:140px;min-height:140px;position:relative} .cart_list .li_name{padding:15px;border-bottom:1px solid #f3f3f3} .cart_list .total_img {position:absolute;top:20px;left:20px}
.cart_list .li_prqty{background:#f8f9fa;padding:20px;float:left;width:75%} .cart_list .li_prqty:after {display:block;visibility:hidden;clear:both;content:''} .cart_list .li_prqty_sp {display:block;width:25%;float:left;border-left:1px solid #eee;padding:0 10px;text-align:center;line-height:20px;} .cart_list .li_prqty_sp:first-child{border-left:0} .cart_list .li_prqty_sp span{display:block;color:#999;font-size:0.92em;margin-bottom:10px} .cart_list .total_price{line-height:20px;background:#eef2f6;;color:#0074e9;padding:20px;float:left;width:25%;text-align:center} .cart_list .total_price:after{display:block;visibility:hidden;clear:both;content:""} .cart_list .total_price span{display:block;color:#999;font-size:0.92em;margin-bottom:10px} .cart_list .mod_btn{padding:0 10px;height:30px;margin:20px 0;font-size:12px}
@media (min-width: 970px){ .sod_bsk_left{float:left;width:70%;padding:20px 5%;height:100%;background:#ededed} #sod_bsk{;position:relative;padding:0} #sod_bsk .sod_ta_wr{float:right;width:30%;height:100%;background:#f3f3f3;padding:40px;position:relative;z-index:9} #sod_bsk .sod_ta_wr.fixed{position:fixed;top:0;right:0;z-index:10} .go_shopping {} .cart_list .sod_li{margin:20px 0} }
@media (max-width: 969px){ .cart_list .li_prqty{width:100%;padding:10px 0} .cart_list .total_price{width:100%;padding:15px} .cart_list .total_price span{display:inline-block;margin:0;color:#000;margin-right:10px;} #sod_bsk{padding:0} } /* 주문서 작성 */ #sod_frm {} #sod_frm .od_prd_list{margin:20px 10px;background:#fff;} .od_prd_list .td_chk{border-left:0;} .od_prd_list .td_prd{border-left:0;position:relative;padding-left:100px;min-height:100px} .od_prd_list .td_prd .sod_img{position:absolute;top:15px;left:10px} .od_prd_list .td_prd .sod_name{min-height:80px} .od_prd_list .td_prd .prd_name{font-size:1.167em} .od_prd_list .total_prc{color:#ff006c;font-weight:bold;font-size:1.167em}
#sod_frm_orderer{padding:20px} #sod_frm_taker{padding:20px} #sod_frm_taker h2,#sod_frm_orderer h2{margin:10px 0;font-size:1.25em} .odf_list li{} .odf_list label,.odf_list strong{display:block;margin:7px 0 5px;color:#444;font-weight:normal} .odf_list .frm_input{width:100%;margin:0 0 5px} .odf_list .dlv_slt div {background:#fff;border:1px solid #ccc;margin:5px 0;padding:10px} .odf_list .dlv_slt div label{display:inline-block;margin:3px 0;color:#000} #order_address{display:block;width:80px;text-align:center;border: 1px solid #3476be;color: #3476be;;height:30px;line-height:28px;margin:5px 0 0;background:none} .odf_list .ad_default{display:inline-block;margin:0} .odf_list .btn_addsch{position:absolute;top:5px;right:5px;border-radius:3px;height:30px;} .odf_list .add_num{position:relative;display:block;} .odf_list textarea{border: 1px solid #ccc;background: #fff;color: #000;vertical-align: middle;border-radius: 3px;padding: 5px;width:100%;height:70px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } #m_sod_frm_paysel {margin:10px 0 ;} #m_sod_frm_paysel ul {margin:0 0 ;background:#fff;padding:0 0 10px;} #m_sod_frm_paysel ul:after {display:block;visibility:hidden;clear:both;content:""} #m_sod_frm_paysel li {float:left;padding:5px ;width:46%;height:25px} #m_sod_frm_paysel .KPAY{background:url('../../../img/kpay.png') no-repeat;width:37px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%} #m_sod_frm_paysel .PAYNOW{background:url('../../../img/paynow.png') no-repeat;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%;} #m_sod_frm_paysel .PAYCO{background:url('../../../img/payco.png') no-repeat 1px;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%;} .kakaopay_icon{background:url('../../../img/kakao.png') no-repeat ;height:21px;width:74px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:100%} .samsung_pay{background:url('../../../img/samsungpay.png') no-repeat ;height:12px;width:83px;display:inline-block;overflow:hidden;text-indent:-999px}
#sod_frm .sod_ta_wr{background: #f3f3f3;} #sod_frm .btn_confirm{padding:0 20px 20px;background:#f3f3f3;margin:0 0 10px} #sod_frm .btn_submit{width:100%;height:45px;font-size: 1.167em;font-weight: bold;margin:5px 0;border-radius:30px} #sod_frm .btn_cancel,#sod_frm .btn01{width:100%;height:45px;line-height:43px;font-size:1.167em;font-weight: bold;padding:0;border-radius:30px}
#sod_frm_pay{padding:20px ;background:#f3f3f3} #sod_frm_pay h2{margin:10px 0;font-size:1.25em} #sod_frm_pay .cp_btn1,#sod_frm_pay .cp_cancel1{margin-top:0} .odf_tbl{position:relative} .odf_tbl table{background:#fff;width:100%;border-collapse:collapse;border-bottom:1px solid #eee;background:#fff} .odf_tbl table th{border:1px solid #eee;border-right:0;padding: 10px;text-align:left;width:120px;font-weight:normal} .odf_tbl table td{border:1px solid #eee;border-left:0;padding:7px 10px;text-align:right}
#sod_frm_pt_alert{margin:10px 0;color:#328abd;}
.sod_frm_point {margin-top:10px;clear:both;background:#fff} .sod_frm_point div{background:#fff;border-bottom:1px solid #eee;padding:10px;text-align:right} .sod_frm_point div:after {display:block;visibility:hidden;clear:both;content:''} .sod_frm_point div label{float:left;line-height:30px} .sod_frm_point div span{display:block;font-size:0.92em} .sod_frm_point div span:after {display:block;visibility:hidden;clear:both;content:''} .sod_frm_point div strong{float:left;color:#666;font-weight:normal} .sod_frm_point #od_temp_point{height:30px;border:1px solid #ccc;text-align:right}
#settle_bank{background:#fff;border-bottom:1px solid #ccc;padding:10px;text-align:right; clear:both} #settle_bank select{height:30px;margin:0 0 5px;width:100%;} #settle_bank #od_deposit_name{height:30px;border:1px solid #ccc;text-align:center;} #settle_bank label{float:left;line-height:30px} #sod_frm_pt_info{border-bottom:1px solid #ccc} .od_coupon{position:absolute;top:0;left:0;background:#fff;width:100%;z-index:99;border-radius:0 0 3px 3px;border:1px solid #eee; -webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.4); -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.4); box-shadow: 1px 1px 5px rgba(0,0,0,0.4);} .od_coupon h3{height:45px;line-height:45px;font-size:1.167em;padding:0 15px;text-align:left} .od_coupon .tbl_head02{margin:0 15px 15px} .od_coupon .tbl_head02 .btn_frmline {background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px } .od_coupon .tbl_head02 td{text-align:left;background:#fff !important;border-right:0} .od_coupon .tbl_head02 th{width:auto !important;border-left:0} .od_coupon .tbl_head02 .td_mngsmall{width:60px;text-align:center} .od_coupon .tbl_head02 .td_numbig{width:80px;text-align:right} .od_coupon .btn_confirm{margin:20px ; } .od_coupon .btn_confirm .btn_submit{height:40px;font-size:1.167em;font-weight:bold;width:100%;} .od_coupon .btn_confirm .btn_close{position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#333;font-size:1.25em}
.cp_btn ,.cp_btn1{padding:0 7px;border:1px solid #38b2b9;color:#38b2b9;background:#fff;height:23px;line-height:21px;margin:5px 0 0 } .cp_apply{background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px } .cp_cancel,.cp_cancel1 {padding:0 7px;border:1px solid #aaa;color:#666;background:#fff;height:23px;line-height:21px;margin:10px 0 0 2px;}
#sod_frm_escrow{margin:10px;} #sod_frm_escrow h2{font-size:1.25em} #od_pay_sl h3{font-size:1.25em}
.sod_left{display: table-cell;width:65%;padding:0 10px;vertical-align:top;} .sod_right{display: table-cell;width:35%;background:#eceff4;padding:20px;vertical-align:top;height:100%} .sod_right #sod_frm_pay{padding:0 ;background:transparent} #sod_frm .sod_right .btn_confirm{padding:0 ;background:transparent;margin:20px 0}
/* 쿠폰 */ #scp_list li{position:relative;padding: 0} #scp_list .li_pd{position:relative;padding:10px} #scp_list .li_title{font-weight:bold;font-size:1.167em;} #scp_list .pd_price{position:absolute;top:10px;right:10px} #scp_list .pd_price strong{color:#ff006c;font-size:1.5em;} #scp_list .li_target{color:#666;margin:5px 0 0;background:#f3f3f3;border-top:1px dotted #ccc;padding:5px 10px;} #scp_list .pd_date{float:right;color:#777}
/* 배송지 목록 */ #sod_addr {} #sod_addr ul {margin:0;padding:0;list-style:none} #sod_addr li {position:relative;padding:0;border-bottom:1px solid #e9e9e9} #sod_addr .addr_title{border-bottom:1px solid #ddd;padding:10px 10px 10px 30px;} #sod_addr .ad_subject{height:30px ;border:1px solid #bbb;width:100%;padding:0 10px} #sod_addr .ad_chk{position:absolute;top:17px;left:10px} #sod_addr .addr_info{padding:15px} #sod_addr .addr_name{margin:0 0 10px;font-weight:bold;font-size:1.083em} #sod_addr .addr_addr{line-height:1.5em;margin:5px 0;} #sod_addr .addr_tel{margin:5px 0;color:#666} #sod_addr .fa-mobile{font-size:14px} #sod_addr .addr_btn{border-radius:0 0 3px 3px;padding:10px} #sod_addr .addr_btn:after {display:block;visibility:hidden;clear:both;content:""} #sod_addr .sel_address{width:32%;float:left;margin-right:1%;height:30px;background:none;border:1px solid #333;color:#333;;padding:0 5px;} #sod_addr .del_address{display:block;width:32%;text-align:center;float:left;margin-right:1%;border:1px solid #aaa;background:none;color:#888;padding:0 5px;height:30px;line-height:28px;vertical-align:middle} #sod_addr input[type="radio"]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;text-indent:-999px;left: 0;z-index: -1px;} #sod_addr .add_lb {display: inline-block;float:left;width:32%;text-align:center;border:1px solid #4162ff;color:#4162ff;height:30px;line-height:28px} #sod_addr input[type="radio"]:checked+.add_lb {;z-index:3;background:#4162ff;color:#fff}
/* 주문내역 */ #sod_v {margin:0 20px} #sod_v .td_stat {width:100px} #sod_v_info {margin:0 0 10px;padding:10px;background:#e6d5d2;color:#883d1a;text-align:center;border-bottom:1px solid #c3bcb1}
/* 주문상세내역 */ #sod_list_inq{} .sod_fin_list .sod_ta_wr{padding:15px;background:#f3f3f3} .sod_fin_list h2 {position:absolute;border:0;font-size:0;line-height:0;content:""} .sod_fin_list .prqty_stat{position:absolute;top:0;right:0;padding:3px 5px;background:#6583c5;color:
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인