FTP 
웹FTP
 
스킨명 :NO101-브랜디보관스킨 페이지 주소 간단메모    
디자인 편집
-디자인 환경 설정-공통 css-js

쇼핑몰 주소 입력
 페이지 이동
상단/측면/하단 디자인 
+상단
+측면
+하단
+부가 기능
중앙 디자인
+메인
+상품관련
+회원관련
+주문관련
+마이페이지
+개별 페이지
+이벤트 팝업
게시판 디자인
+상품후기 게시판 (상품 리뷰)
+NOTICE
+Q&A (상품 문의)
+교환반품문의
+포토후기
메뉴이동 
선택하세요
 
현재 디자인 편집 화면 :
CSS : common.css / JS : common.js

CSSJS임시 저장 소스 코드 하이라이트 사용
/*
========================================================================
RESET
========================================================================
*/




* { outline: none; }  /* 크롬파란색없애기 */

/* global rest */
* { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; }

html, body, pre,
h1, h2, h3, h4, h5, h6,
dl, dt, dd, ul, li, ol,
th, td, p, blockquote,
form, fieldset, legend,
menu, nav, section, hgroup, article, header, aside, footer,
input, select, textarea, button {
    margin: 0 auto;
    padding: 0;
    
}



body,
h1, h2, h3, h4, h5, h6, table,
pre, xmp, plaintext, listing,
input, textarea, select, button, a {
    font-size: 12px;
    color: #1c1c1c;
    line-height: 1.25;
    font-family: Montserrat, 'Lato', '나눔고딕',"Nanum Gothic","Malgun Gothic","맑은 고딕", Dotum, "돋움", DotumChe, "돋움체", Verdana, monospace, Corbel, AppleGothic, Helvetica, Noto Sans KR, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
img, fieldset,button {
    border:0 none;
}
img {
    vertical-align:middle;
}
li {
    list-style: none;
}
    caption, legend {
    display: none;
}
a { 
    color: #1c1c1c;
    text-decoration: none;
    background:none;
}
a:hover {
}
button {
    overflow: hidden;
    cursor: pointer;
}
button span {
    visibility: hidden;
}
address, em {
    font-style: normal;
}
button, input, select, textarea, a {
    vertical-align: middle;
}
select {
    line-height:18px;
    font-size: 12px;
    color: #1c1c1c;
   /* font-family:Arial !important; */
}
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {

    select {
        font-family:dotum !important;
    }
}

@-moz-document url-prefix() {

    select {
        font-family:dotum !important;
    }

}*/

input:focus {
    outline: none;
}
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: keep-all;
}

input[type=text]::-ms-clear {
    display:none;
}

#preview_wrap { display:none !important } /* 미리보기 숨김 */

/*
========================================================================
포인트 색상 class
========================================================================
*/

.pointColor { color:#c08dff !important }
.fc-blue { color:#0e67ec; font-weight:bold }

/*
========================================================================
공통 class
========================================================================
*/
/* image replace, hidden text */
.ir *,
.blind { z-index:-1; position: absolute; display: block; left: 0; top: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; text-indent: -9999px; }
/* block, inline */
.d-block { display: block;}
.d-inline { display: inline;}
/* form */
.txt-right { text-align: right; }
.txt-input1 { padding: 2px 0 0 2px; height:31px; line-height:31px; border: 1px solid #e2e9ef; border-top: 1px solid #aaadb2; }
.txt-input2 { padding: 2px 0 0 2px; height:31px; line-height:31px; border: 1px solid #dcdcdc; }
.MS_input_txt { margin-right:5px; padding: 2px 0 0 2px; line-height:31px; height:31px }
.txt-disabled { background-color: #f6f6f6; }
.chk-rdo { width: 13px; height: 13px; vertical-align: middle; }
.txt-area1 { overflow-y: scroll; padding: 2px 0 0 2px; line-height: 17px; border: 1px solid #e2e9ef; border-top: 1px solid #aaadb2; }
/* file add trick */
.file-wrap { display: inline-block; overflow: hidden; position: relative; height: 23px; width: 280px; vertical-align: middle; background: url(/images/btn/h20_trick_fileadd.gif) no-repeat right 0; }
.file-wrap .file-txt { float: left; border: 0 none; height: 18px; font-size: 12px; line-height: 18px; width: 198px; border: 1px solid #ccc; }
.file-wrap .file-trick { cursor: pointer; position: absolute; right: 0px; top: 0; right: 0; width: 100px; height: 20px; background: none; border: 0 none; opacity: 0; filter: alpha(opacity=0); }
/* en-font */

/* font-color */
.fc-red { color: #bd101b; }
.MS_option_price { color: #fe3333 }
/* bold */


/* margin */
.nomg { margin:0 !important }
.mr-5 { margin-right: 5px;}
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
/* padding */
.nopd { padding:0 !important }
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }

/* table */
table img { vertical-align: middle; }
.tb-bold { font-weight: bold; }
.tb-left,
.tb-center,
.tb-right { padding: 0 10px; }
.tb-btn { padding: 0; }
.tb-left { text-align: left; }
.tb-center { text-align: center; }
.tb-right { text-align: right; }
.tb-label-r5 label { margin-right: 5px; }
.tb-label-r10 label { margin-right: 10px; }
.tb-label-r10 label.last,
.tb-label-r5 label.last{ margin-right: 0; }
/* table-type-1 */
.table-type-1 { border-top: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; }
.table-type-1 th,
.table-type-1 td { padding: 8px 0 8px; background: url(/images/d3/modern_simple/common/dot_h1_w10.gif) repeat-x 0 bottom; }
.table-type-1 tr.nbg th,
.table-type-1 tr.nbg td { background-image: none; }
.table-type-1 tr.bg th,
.table-type-1 tr.bg td { background-color: #f8f8f8; }
.table-type-1 th { font-weight: normal; }
/* table-type-2 */
.table-type-2 { border-top:1px solid #000 }
.table-type-2 th,
.table-type-2 td { border-bottom:1px solid #e9e9e9 }
.table-type-2 th { padding:16px 0; font-size:12px; color:#101010; font-weight:normal }
.table-type-2 td { padding:10px 0; color:#343434 }
.table-type-2 td li { padding:5px 0 }
.table-type-2 td a { vertical-align:top }
.table-type-2 td.review-tx { padding:15px 130px; color:#999 }
.table-type-2 td.nodata { padding:15px 0; text-align:center }
.table-type-2 tr.nbg th,
.table-type-2 tr.nbg td { background-image: none; }
/* 상품리스트 (메인/검색/상품리스트) */
.prd-list { margin-top: 10px; }
.prd-list table td { border: 0; }
.prd-list table .tb-center { padding: 0 10px; }
.prd-list table .info { padding: 5px 0; }
.prd-list .thumb { width: 196px; height: 196px; margin-left: auto; margin-right: auto; font-size:0; line-height: 0; border: 2px solid #f2f4f3; }
.prd-list .thumb a,
.prd-list .thumb img { display: block; width: 100%; height: 100%; }
.prd-list .dsc { margin-top: 15px; font-weight: bold; }
.prd-list .price { margin-top: 5px; font-weight: bold; color: #333; }
/* 장바구니 리스트, 주문상품 리스트 */
.table-cart { border-bottom:1px solid #e9e9e9 }
.table-cart thead th { padding:15px 0; font-size:12px; color:#101010; font-weight:bold; border-bottom:1px solid #e9e9e9 }
.table-cart tbody td { padding:10px 0; border-top:1px solid #e9e9e9 }
.table-cart tbody td .thumb { width:70px; height:70px; margin-left: auto; margin-right: auto }
.table-cart tbody td .thumb a,
.table-cart tbody td .thumb img { display:block; width:70px; height:70px }
.table-cart tbody td .tb-opt { padding-top:5px }
.table-cart tbody td .tb-opt .tb-dl .opt_dt { display:inline-block; width:34px; line-height:21px; vertical-align:top }
.table-cart tbody td .tb-opt .tb-dl .opt_dd { display:inline-block; line-height:21px; word-break:break-all }
.table-cart tbody td .txt-spin { width:31px; height:21px; border: 1px solid #acacac; font-size: 11px; text-align:center }
.table-cart tbody td .btn_option { padding:5px 11px 3px; font-size:11px }
.table-cart tbody td .btn_select { width:70px; padding:5px 0 3px; font-size:11px }
.table-cart tbody td .d-block { padding-bottom: 3px; }
.table-cart tfoot td { padding:15px 0; font-weight:bold; line-height:20px; border-top:1px solid #e9e9e9 }
.table-cart tfoot strong { color: #fe3333 }

/* 일반형 주문서 작성 */
.table-order-prd { border-top:1px solid #000 }

/* 수량 컨트롤 */
.table-cart .opt-spin { position: relative; width:50px; height:21px; margin-left: auto; margin-right: auto; padding-bottom:6px }
.table-cart .opt-spin .txt-spin,
.table-cart .opt-spin .btns { float: left; }
.table-cart .opt-spin .txt-spin { margin-right:3px; width:31px; height:21px; border: 1px solid #acacac; font-size: 11px; text-align:center }
.table-cart .opt-spin .btns { width: 12px; height: 20px; margin-top:4px; }
.table-cart .opt-spin .btns img { overflow: hidden; float: left; text-indent: -999px; background: none; }
/* 주문 - 주문정보 테이블 */
.table-order-info { margin-top: 10px; border-top:1px solid #000 }
.table-order-info tbody th,
.table-order-info tbody td { padding:12px 0 11px 0; border-bottom: 1px solid #e9e9e9 }
.table-order-info tbody th { background-color:#f8f8f8 }
.table-order-info tbody th div.tb-left { padding-left:25px }
.table-order-info tbody td { padding-left:10px }
.table-order-info tbody th .d-block { font-weight: normal; letter-spacing: 0; }
.table-order-info tbody tr.nbg th,
.table-order-info tbody tr.nbg td { background-image: none; }
/* 마이페이지 디자인 타입2 테이블 리스트, 타이틀 */
.tit-tb-list { margin-top:40px; font-size:18px; color:#2e2e2e; font-weight:bold }
.table-d2-list { border-top:1px solid #000 }
.table-d2-list thead th { padding:15px 0; font-size:12px; color:#000; font-weight:bold; border-bottom:1px solid #e9e9e9 }
.table-d2-list tbody td { padding:15px 0; color:#343434; border-bottom:1px solid #e9e9e9 }
.table-d2-list tbody td a { color:#343434 }
.table-d2-list tbody td .replyYes { display:inline-block; padding:4px 3px 3px; font-size:11px; color:#fff; text-align:center; border:1px solid #231f20; background: #231f20 }
.table-d2-list tbody td .replyNo { display:inline-block; padding:4px 3px 3px; font-size:11px; color:#231f20; text-align:center; border:1px solid #231f20; background: #fff }

/* 마이페이지 디자인 타입2 테이블 뷰 */
.table-d2-view { margin-top:10px; border-top:1px solid #000 }
.table-d2-view th, 
.table-d2-view td { padding:15px 0; border-bottom:1px solid #e9e9e9 }
.table-d2-view th { padding-left:20px; font-size:12px; color:#000; font-weight:normal; background:#f8f8f8  }
.table-d2-view td { padding:15px 0 }
.table-d2-view td .replyYes { display:inline-block; padding:4px 3px 3px; font-size:11px; color:#fff; text-align:center; border:1px solid #231f20; background: #231f20 }
.table-d2-view td .replyNo { display:inline-block; padding:4px 3px 3px; font-size:11px; color:#231f20; text-align:center; border:1px solid #231f20; background: #fff }
/* paging */
.paging { padding:20px 0; text-align:center }
.paging a { display:inline-block; padding:0 10px; height:16px; font-size:16px; color:#a6a6a6; font-family:'Verdana'; line-height:16px }
.paging a:hover,
.paging a.now,
.paging .now { color:#2a2a2a }
.paging a.first,
.paging a.prev,
.paging a.next,
.paging a.last { font-size:12px; font-family:dotum; line-height:18px }
.paging a.first,
.paging a.last { letter-spacing:-4px }

/* 현재위치 */
.loc-navi { height:46px; text-align:right; overflow:hidden }
.loc-navi, .loc-navi a { color: #878787; text-transform: capitalize; vertical-align:top; line-height:46px }
/* 페이지 타이틀 */
/* 타입 1*/
#content .tit-page { padding-bottom:10px; position: relative; font-size:18px; color:#202020; line-height:18px; font-weight:bold; border-bottom: 1px solid #000 }
#content .tit-page .dsc { position: absolute; right: 0px; top: 15px; font-size: 11px; color: #a5a5a5; letter-spacing: -1px; }
#content .tit-page .dsc em { color:#333; }
/* 타입 2 */
#content .tit-page-2 { margin-top:40px; position: relative }
#content .tit-page-2 h2 { font-size:18px; color:#2e2e2e; font-weight:bold }
#content .tit-page-2 .dsc { position:absolute; top:8px; right:0 }
/* 타입 3 */
#content .page-hd { padding-bottom:5px; border-bottom:1px solid #e3e3e3 }
#content .page-hd h2 { color: #202020; font-size:18px; font-weight:bold; text-transform: uppercase }

/* 상품 total/정렬 */
.total-sort { zoom: 1; overflow: hidden; padding-bottom: 5px; border-bottom: 1px solid #e5e5e5; }
/* total */
.total-sort .total { float: left; width: auto; }
.total-sort .total dt,
.total-sort .total dd { display: inline; }
.total-sort .total dd { font-weight: bold; }
.total-sort .total dt { text-transform: capitalize; }
/* sort */
.total-sort .sort { float: right; width: auto; display: inline; margin-right: 20px; }
.total-sort .sort li,
.total-sort .sort li a { float: left; width: auto; }
.total-sort .sort li { display: inline; margin-left: 10px; }
/* 게시판 총게시글,PAGE */
.total-page { zoom: 1; overflow: hidden; }
.total-page .total { float: left; width: auto; }
.total-page .page { float: right; width: auto;}
/* 회원 등급 표시 */
/* 타입 1 */
.mem-lvl { *zoom:1; overflow: hidden; padding:25px 0 25px 350px; width:753px; margin:0 auto; border-bottom:1px dashed #e9e9e9 }
.mem-lvl:after { display:block; clear:both; content:'' }
.mem-lvl .lvl-img,
.mem-lvl p { position: relative; float: left; }
.mem-lvl .lvl-img { left:-120px; margin-right: -120px; width: 120px; }
.mem-lvl p { width: 100%; padding-top: 10px; font-size:12px; color:#2e2e2e; line-height:25px }
.mem-lvl p em { color: #be101a; font-weight: bold; }
.mem-lvl span.MS_group_reserve_msg,
.mem-lvl span.MS_group_dc_msg {
    color:#F26622;
}

/* 타입 2 */
.mem-lvl-2 { zoom: 1; overflow: hidden; padding: 15px 50px 15px 150px; border: 5px solid #ededed; }
.mem-lvl-2 .lvl-img,
.mem-lvl-2 p { position: relative; float: left; }
.mem-lvl-2 .lvl-img { left: -130px; margin-right: -130px; width: 120px; border-right: 1px solid #ededed; }
.mem-lvl-2 p { width: 100%; padding-top: 10px; line-height: 16px; }
.mem-lvl-2 p em { color: #be101a; font-weight: bold; }
.mem-lvl-2 span.MS_group_reserve_msg,
.mem-lvl-2 span.MS_group_dc_msg {
    color:#F26622;
}

/* 마이페이지 상단 메시지 박스 */
.t-box-msg { padding: 10px 20px; border: 5px solid #ededed; }
.t-box-msg strong { color: #0178d3; }

/*
========================================================================
공통 - 레이어
========================================================================
*/

#comment_password input { width:185px !important }

/*
========================================================================
공통 - 버튼타입
========================================================================
*/

.CSSbuttonBlack { display:inline-block; color:#fff; text-align:center; border:1px solid #231f20; background: #231f20; -webkit-transition:all 0.3s ease; transition:all 0.3s ease }
.CSSbuttonBlack:hover { color:#231f20; background:#fff }
.CSSbuttonBlack:active { position:relative; top:1px }

.CSSbuttonWhite { display:inline-block;  color:#231f20; text-align:center;  border:1px solid #231f20; background:#fff; -webkit-transition:all 0.3s ease; transition:all 0.3s ease }
.CSSbuttonWhite:hover { color:#fff; background:#231f20 }
.CSSbuttonWhite:active { position: relative; top: 1px }

.CSSbuttonGray { display:inline-block;  color:#231f20; text-align:center;  border:1px solid #e4e4e5; background:#fff; -webkit-transition:all 0.3s ease; transition:all 0.3s ease }
.CSSbuttonGray:hover { color:#fff; border:1px solid #231f20; background:#231f20 }
.CSSbuttonGray:active { position: relative; top: 1px }

.CSSbuttonMin { padding:3px 10px; font-size:10px }

/*
========================================================================
공통 - 레이아웃
========================================================================
*/
/* z-index */
#layerWrap { z-index: 1; }
/* layout */



#header,
#layerWrap,
#contentWrap,
#ftLink .link,
#footer { position: relative;  }
#contentWrapper { position: relative;  /* margin-top:200px;*/ min-widht:641px; }
#contentWrap { *zoom:1 }
#contentWrap:after { content: ""; display: block; clear: both; }
#aside,
#content { position: relative; margin:0 5%;  }
#content {  min-height:600px ; border:0px solid #000 ;   }


@media all and (min-width :1025px){ #contentWrapper { margin-top:200px; }}


/* =========================================================================================================================================================== 
 ※ 상품진열 
=========================================================================================================================================================== */



/* 2열상품이미지 */
.grid2 > li { vertical-align:top; display:inline-block; border-box;box-sizing:border-box; margin-bottom:80px;  padding:0 0.5%;   box-sizing:border-box; }
.grid2 > li .item-box { position:relative;  }
.grid2 > li:nth-child(2n){margin-right:0;}


/* 3열상품이미지 */
.grid3 > li { vertical-align:top; display:inline-block; border-box;box-sizing:border-box; margin-bottom:80px; width:33.33%; padding:0 0.5%;   box-sizing:border-box;  }
.grid3 > li .item-box { position:relative;  }
.grid3 > li:nth-child(3n){margin-right:0;}

/* 4열상품이미지 */
.grid4 > li { vertical-align:top; float:left; border-box;box-sizing:border-box; margin-bottom:80px; width:25%; padding:0 0.5%;   box-sizing:border-box;  }
.grid4 > li .item-box { position:relative;  }
.grid4 > li:nth-child(4n){margin-right:0;} 

/* 5열상품이미지 */
.grid5 > li { vertical-align:top; display:inline-block; border-box;box-sizing:border-box; margin-bottom:50px; width:20%; padding:0 0.5%; box-sizing:border-box; }
.grid5 > li .item-box { position:relative;  }
.grid5 > li:nth-child(4n){margin-right:0;} 


.item-wrap { width:100%;  display:block;  font-size:0;line-height:0; }
.item-wrap:after { content: ""; clear: both; display: block; }
.item-wrap .item-list > li { vertical-align:top; display:inline-block; box-sizing:border-box;  }
.item-wrap .item-list > li .item-box { position:relative;  }
.item-wrap .item-list > li:nth-child(4n){margin-right:0;}
.item-wrap .item-list .item-thumb {  margin:0 auto 10px; text-align:center; position: relative;}
.item-wrap .item-list .item-thumb a{ }
.item-wrap .item-list .item-thumb a img { max-width:100%; transition:opacity 0.25s ease-in-out;  }
.item-wrap .item-list .item-thumb a img.over:hover { opacity: 0.7; filter: alpha(opacity=70); }


@media all and (max-width :640px){ .item-wrap .item-list > li { margin-bottom:80px; width:100%; padding:0 1%; }}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : landscape){ .item-wrap .item-list > li { margin-bottom:80px; width:50%; padding:0 1%; }}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : portrait){ .item-wrap .item-list > li { margin-bottom:80px; width:50%; padding:0 1%; }}
@media all and (min-width :1025px) and (max-width :1600px){ .item-wrap .item-list > li { margin-bottom:80px; width:33.33%; padding:0 1%; }}
@media all and (min-width :1601px) { .item-wrap .item-list > li { margin-bottom:80px; width:25%; padding:0 1%; }}

@media all and (max-width :640px){ .tt_copy_sns { position:absolute; top:-50px; right:10px;}}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : landscape){.tt_copy_sns { position:absolute; top:-50px; right:10px;}}
@media all and (min-width :641px) and (max-width :1024px) and (orientation : portrait){ .tt_copy_sns { position:absolute; top:-50px; right:10px;}}
@media all and (min-width :1025px){ .tt_copy_sns {position:absolute; top:10px; right:10px; }}





/* 상품슬라이드 */
.item-silde {  width:100%; margin:0 auto 80px; position:relative; }
.item-silde .s-item { display:block; padding:5px; position:relative;  }
.item-silde .s-item > img {  max-width: 100%; /* height:px; */  }

.slick-slider { display:block;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-ms-touch-action: pan-y;touch-action: pan-y;-webkit-tap-highlight-color: transparent;}
.slick-slider:hover .slick-next, .item-silde .slick-slider:hover .slick-prev{display:block !important;}
.invisible{visibility: hidden;}
.slick-list{ overflow: hidden; display:block; margin:0;padding:30px 0 50px;}
.slick-list:focus{outline: none;}
.slick-list.dragging{ cursor: pointer;cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list{-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.slick-track{  left:0;top:0;display:block;}
.slick-track:before,.slick-track:after{content: "";display: table;}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide { float:left; height:100%; min-height:1px;display: none;}
[dir="rtl"] .slick-slide { position:relative; }
.slick-slide img {  max-width:100%;  }
.slick-slide.slick-loading img{ display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide {display:block;}
.slick-loading .slick-slide{visibility: hidden;}

.item-silde .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;}
.item-silde .slick-prev, .item-silde .slick-next{ position:absolute;display:block !important;cursor: pointer;width:32px;height:60px;font-size:0;top:33%; outline: none;padding:0;border:0; opacity:0.3; filter:alpha(opacity=30);background:transparent; z-index:2;}   /* 화살표 처음위치 */
.item-silde .slick-prev { left:30px;background:url(/design/retrohouse/wizdesign/slide_prev6.png) 50% 50% no-repeat; }   /* 이전화살표 이미지경로 */
.item-silde .slick-next{right:30px;background:url(/design/retrohouse/wizdesign/slide_next6.png) 50% 50% no-repeat; }  /* 다음화살표 이미지경로 */
.item-silde:hover .slick-prev{ left:10px; opacity:1;filter:alpha(opacity=100);} /* 이전마우스오버시 위치 */
.item-silde:hover .slick-next{ right:10px;opacity:1;filter:alpha(opacity=100);}  /* 다음마우스오버시 위치 */
.item-silde .slick-prev:hover{ opacity:1; filter:alpha(opacity=100);}  /* 이전화살표 마우스오버시 효과 */
.item-silde .slick-next:hover{ opacity:1; filter:alpha(opacity=100);}  /* 다음화살표 마우스오버시 효과 */
.item-silde .slick-prev, .item-silde .slick-next{-o-transition:0.3s !important;-ms-transition:0.3s !important;-moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important;}
.item-silde .slick-slider{margin-bottom:0;}

.item-silde .slick-dots { position:absolute;bottom:0px;left:-0px;padding:0;display:block;list-style: none;display:block;text-align:center;width:100%; border:0px solid #000; }
.item-silde .slick-dots li{position: relative;display: inline-block;margin:0 4px;padding:0;cursor: pointer;}
.item-silde .slick-dots li button{border:0;background: transparent;display:block;outline: none;line-height:0;font-size:0;color: transparent;padding:0;cursor: pointer;}
.item-silde .slick-dots li button:hover,.slick-dots li button:focus{outline: none;}
.item-silde .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;}
.item-silde .slick-dots li button:before{display:block;width:10px;height:10px;content: "";;background:#d1d1d1; border-radius:100px;border:0px solid #888;font-size:0;text-align:center;color: white;opacity:1;-o-transition:0.3s !important;-ms-transition:0.3s !important;-moz-transition:0.3s !important;-webkit-transition:0.3s !important;transition:0.3s !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;}
.item-silde .slick-dots li.slick-active button:before {   background:#999; width:10px;  /* 도트사이즈 */ opacity: 1; }  /* 현재도트사이즈 */


/* 미리보기아이콘노출 */
.item-thumb .over_view { position:absolute;  top:20px; right:20px;line-height:0; font-size:0;  z-index:99; }
.item-thumb .over_view a { display: inline-block; cursor:pointer;  vertical-align:top; margin-left:10px;  color:#fff; opacity:0; transition:opacity 0.25s ease-in-out; }
.item-thumb .over_view a i { font-size:14px; color:#fff;}
.item-wrap .li-over:hover .over_view a { opacity:0.8; }
.item-wrap .li-over .over_view  a:hover{ opacity:1;}
.item-thumb .over_view a.item-option{height:22px; background:url('/design/retrohouse/wizdesign/icon_opt.png') no-repeat center;}
.item-thumb .over_view a.item-option img{ opacity:0; width:22px; height:22px;}


/* 옵션미리보기 */
#MK_opt_preview { background:transparent; transform:translate(-180px, 22px);}
#MK_opt_preview .mk_prd_option_list {  font-family: "Lato",'맑은 고딕',"Nanum Gothic" ; color: #999;font-size: 11px ; padding: 15px ;background-color: rgba(255, 255, 255, 0.9); border: 0;}
#MK_opt_preview .mk_prd_option_list .option-name { padding: 5px;padding-left: 7px;background-color:rgba(235, 235, 235, 1);  ;color: #666; border-left: 0;font-size: 11px;}
#MK_opt_preview .mk_prd_option_list .option-required {color: #666;}
#MK_opt_preview .mk_bt_opt_close a { background: rgba(173, 173, 173, 1);  padding: 5px; border-radius: 2px;color: #fff;}
#MK_opt_preview .mk_opt_top_close {display:none;}

#MK_opt_preview .mk_prd_option_list .mk_opt_oneclick {position: relative; padding-left: 22px; line-height: 19px;}
#MK_opt_preview .mk_prd_option_list .mk_oneclick_image,
#MK_opt_preview .mk_prd_option_list .mk_oneclick_color { position: absolute; top:0; left: 0; border: 1px solid #fff;}
#MK_opt_preview .mk_prd_option_list .mk_oneclick_image { line-height: 1px;}
#MK_opt_preview .mk_prd_option_list .mk_oneclick_image img {width: 15px; height: 15px;}
#MK_opt_preview .mk_prd_option_list .mk_oneclick_color {display:inline-block; width: 15px; height: 15px;}


/* 상품정보 */
.item-info { margin: 0 auto; padding:0; letter-spacing: 0.5px;  }
.item-info p { width: 100%; display: block !important; margin-top: 3px; font-weight: 400; font-size:11px; line-height:16px; }    


/* 상품명 + 추가상품명 */
.item-info .item-name{ display: block; border-bottom: 0px solid #f2f2f2;padding-bottom: 5px;margin-bottom: 10px;font-size:12px; color:#222 }
.item-info .item-name .ico_soldout{    vertical-align: middle;display: inline-block;margin-top: -3px;padding-left:4px;}
.item-info .item-subname { color:#222; }


/* 상품가격 */
.item-info .item-consumer { text-decoration:line-through; color:#b9b9b9}
.item-info .item-price { color:#222;  }

/* 할인율노출 */
.item-info .item-sale {  color:#c41b1b;  font-size:12px; letter-spacing:0px; }


/* 아이콘 */
.item-info .item-icon { margin-top:10px;  }
.item-info .item-icon img { margin-right:5px; }


/* 컬러칩 */
.item-info .item-color { height:20px; }
.item-info .item-color span {display:inline-block; width:20px; height:4px;  } /* 색상코드 */
.item-info .item-color span.white{border:1px solid #e1e1e1; box-sizing:border-box;}



/* 슬라이드할인율노출 */
.s-item .item-sale { position:absolute; top:10px; left:10px; opacity: 0; filter: alpha(opacity=0);    z-index:99; text-align:center; width:35px; height:35px; line-height:35px; background-color:#d7d7d7; color:#fff; font-size:12px; letter-spacing:0px; }
.s-item:hover .item-sale { background-color:#c2c2c2;  opacity: 1; filter: alpha(opacity=100);     }




/* 롤오버상품이미지 */
#item-hover .item-list .item-thumb {  margin:0 auto 0px; text-align:center; }
#item-hover .item-list .item-thumb a img.over:hover { opacity: 1; filter: alpha(opacity=100); }
#item-hover .item-list  li { position:relative; margin-bottom:20px; overflow:hidden;}
#item-hover .item-list > li .item-info { position:absolute; bottom:0; left:0; width:100%; min-height:30%; background:rgba(0,0,0,0.4);  line-height:16px; padding:20px ; box-sizing:border-box; cursor:pointer; transform: translateY(20%); opacity:0; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
#item-hover .item-list > li:hover .item-info{transform: translateY(0); opacity:1;}
#item-hover .item-list .item-name,
#item-hover .item-list .item-subname,
#item-hover .item-list .item-price,
#item-hover .item-list .item-consumer,
#item-hover .item-list .item-sale { color:#fff; }

/* 할인율노출안함 */
#item-hover .item-list > li .item-sale { display:none; }
/* 미리보기노출안함 */
#item-hover .over_view { display:none; }
/* 롤오버상품이미지끝 */


/* 장바구니버튼 */

.cart_btn01 { display:inline-block; *display:inline;   padding:2px 10px;  height:20px; line-height:20px; background-color: #636363; border: 1px solid #EFEFEF; color:#fff;   border-radius:4px; }
.cart_btn01:hover { background-color: #000; border: 1px solid #EFEFEF; color:#fff; }
.cart_btn02 { display:inline-block; *display:inline;   padding:2px 10px;  height:20px; line-height:20px; background-color: #fff; border: 1px solid #EFEFEF; color:#636363;  border-radius:4px; }
.cart_btn02:hover { background-color: #636363; border: 1px solid #EFEFEF; color:#fff; }
.cart_btn03 { display:inline-block; *display:inline;   padding:2px 10px;  height:15px; line-height:15px; background-color: #f1f1f1; border: 1px solid #f1f1f1; color:#999;   border-radius:4px; }
.cart_btn03:hover { background-color: #000; border: 1px solid #EFEFEF; color:#fff; }

.cartbtn01 { display:inline-block; *display:inline;   padding:5px 30px;  height:25px; line-height:25px; background-color: #636363; border: 0px solid #EFEFEF; color:#fff; margin-bottom:30px; letter-spacing:1px; border-radius:4px; transition:all .3s ease;-webkit-transition:all .3s ease; }
.cartbtn01:hover { background-color: #BFBFBF; border: 0px solid #EFEFEF; color:#fff; }
.cartbtn02 { display:inline-block; *display:inline;   padding:5px 30px;  height:25px; line-height:25px; background-color: #EAEAEA; border: 0px solid #EFEFEF; color:#999; margin-bottom:30px; letter-spacing:1px;  border-radius:4px; transition:all .3s ease;-webkit-transition:all .3s ease;}
.cartbtn02:hover { background-color: #BFBFBF; border: 0px solid #EFEFEF; color:#fff; }



/* 20191001 - 공통코드 */
.mos01 { -webkit-transition:all 0.1s ease; -khtml-transition:all 0.1s ease;-moz-transition:all 0.1s ease;-ms-transition:all 0.1s ease;-o-transition:all 0.1s ease;transition:all 0.1s ease;  }
.mos02 { -webkit-transition:all 0.2s ease; -khtml-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-ms-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease;  }
.mos03 { -webkit-transition:all 0.3s ease; -khtml-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;  }
.mos04 { -webkit-transition:all 0.4s ease; -khtml-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;  }
.mos05 { -webkit-transition:all 0.5s ease; -khtml-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;  }
.mos06 { -webkit-transition:all 0.6s ease; -khtml-transition:all 0.6s ease;-moz-transition:all 0.6s ease;-ms-transition:all 0.6s ease;-o-transition:all 0.6s ease;transition:all 0.6s ease;  }
.mos07 { -webkit-transition:all 0.7s ease; -khtml-transition:all 0.7s ease;-moz-transition:all 0.7s ease;-ms-transition:all 0.7s ease;-o-transition:all 0.8s ease;transition:all 0.7s ease;  }
.mos08 { -webkit-transition:all 0.8s ease; -khtml-transition:all 0.8s ease;-moz-transition:all 0.8s ease;-ms-transition:all 0.8s ease;-o-transition:all 0.8s ease;transition:all 0.8s ease;  }
.mos09 { -webkit-transition:all 0.9s ease; -khtml-transition:all 0.9s ease;-moz-transition:all 0.9s ease;-ms-transition:all 0.9s ease;-o-transition:all 0.8s ease;transition:all 0.9s ease;  }

.bold { font-weight: bold; }
.clear {zoom: 1;}
.clear:after {content: ""; display: block; clear: both;}
.zoom{-webkit-transition:-webkit-transform 0.5s ease-in-out;transition:transform 0.5s ease-in-out;-webkit-transform:scale(1);transform:scale(1);backface-visibility:hidden;}
.zoom:hover{-webkit-transform: scale(1.05);transform: scale(1.05);backface-visibility: hidden;}
.box { -webkit-box-sizing:border-box;-khtml-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box; }
.upper { text-transform:uppercase !important; } 
.display { display:none !important; }
.fleft { float:left !important; }
.fright { float:right !important; }
.marC { margin:0 auto; text-align:center;}
.block { display:block !important; }



.btnB {  display:inline-block; color:#fff; text-align:center; border:1px solid #231f20; background: #000; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; margin:0 auto; }
.btnB:hover { color:#231f20; background:#fff }
.btnW { color:#231f20; text-align:center;  border:1px solid #231f20; background:#fff; -webkit-transition:all 0.3s ease; transition:all 0.3s ease }
.btnW:hover { color:#fff; background:#231f20 }
.btnG {  color:#231f20; text-align:center;  border:1px solid #e4e4e5; background:#fff; -webkit-transition:all 0.3s ease; transition:all 0.3s ease }
.btnG:hover { color:#fff; border:1px solid #231f20; background:#231f20 }






/* 게시판 공통 - 일반, 겔러리, 컨텐츠링크, 자료실, 미니홈피, 방명록, 동영상 */
/* 상단 */
.bbs-hd { padding:65px 0 20px; border-bottom:1px dashed #e9e9e9 }
.bbs-hd .link { text-align: center }
.bbs-hd .link li { display: inline; }
.bbs-hd .link li a { padding: 0 10px; color: #b7b7b7; background: url(/images/d3/modern_simple/common/bull_bbs_hd_link.gif) no-repeat left 2px; }
.bbs-hd .link li.last a { background-image: none; }

/* 타이틀 */
.bbs-tit { margin-top: 0px; text-align:center;}
.bbs-tit:after { display:block; clear:both; content:'' }
.bbs-tit h3 { display:block;  font-size: 16px; font-weight: 700; color:#222; letter-spacing:1px; }
.bbs-tit h3:after{ content:"";display:block;clear:both; height:1px; width:20px; margin:10px auto 0 ; text-align:center; background:#000 }
.bbs-hd {display:none !important; }

/* 글쓰기 */
#bbsData .bbs-link-btm { margin-top:40px; text-align: center }
#bbsData .bbs-link-btm a { width:200px !important; height:40px !important; font-size:12px !important; line-height:40px !important;}

.bbs-table-write textarea { width:100% !important; }



/* 검색 */
.bbs-sch { float:right }
.bbs-sch label { margin-right:10px; font-size:11px }
.bbs-sch label input { margin-top:-3px; vertical-align:middle }
.bbs-sch .key-wrap { font-size: 0; line-height: 0; }
.bbs-sch .key-wrap,
.bbs-sch .keyword,
.bbs-sch img { vertical-align: middle; }
.bbs-sch .key-wrap a { margin-left:-1px; vertical-align:top }
.bbs-sch img { *margin-top:1px; *margin-left:-1px; vertical-align:top }
.bbs-sch .MS_input_txt { margin:0; padding:0 0 0 5px; width:178px; height:28px; border:1px solid #c3c3c3 }
.bbs-sch .keyword { width: 125px; height: 14px; padding: 2px 0 0 2px; margin-right: 3px; line-height: 14px; border: 1px solid #ededed; }

/* 게시판 글쓰기, 목록 이동 링크 */
.bbs-btm { padding:15px 0; position:relative; *zoom:1 }
.bbs-btm:after { display:block; clear:both; content:'' }
.bbs-btm .bbs-link { display:block; text-align:right;  }
.bbs-btm .bbs-link a { margin-left:3px; width:100px; height:30px; font-size:12px; line-height:30px;  }
.bbs-btm .bbs-paging .paging { margin:0 130px; padding:10px 0 ; text-align:center;  display:block; }


/* 게시판 한줄공지 */
.bbs-online-notice { margin-top: 10px; margin-bottom: -10px; padding: 7px 10px; color: #9d9d9d; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
/* 게시판 타입 - 리스트 */
.bbs-table-list { margin-top:10px }
.bbs-table-list thead th,
.bbs-table-list tbody td  { padding:15px 0 } 
.bbs-table-list thead th { font-size:12px; color: #000; font-weight:normal; border-top:1px solid #ddd; border-bottom: 1px solid #e9e9e9 }
.bbs-table-list tbody td { color:#343434; border-bottom: 1px solid #e9e9e9 }
.bbs-table-list tbody td a {  }
/* 게시판 타입 - 보기 */
.bbs-table-view { margin-top:10px }
.bbs-table-view thead th,
.bbs-table-view tbody td  { padding:15px 0 } 
.bbs-table-view thead th { color: #000; font-size:12px; font-weight:normal;  border-top: 1px solid #eee; border-bottom: 1px solid #e9e9e9 }
.bbs-table-view .btn-dwn { margin-top:15px;}
.bbs-table-view .privercy-agree label { vertical-align:-2px \0/IE8+9; *vertical-align:bottom }
.bbs-table-view .privercy-agree label input { vertical-align:top; *vertical-align:top }
/* 팝업 타이틀 (1:1고객게시판) */
.tit-pop { position:relative }
.tit-pop h1 { font-size:18px; color:#000; font-weight:bold; line-height:18px }
.tit-pop .txt { position:absolute; top:5px; right:0; font-size:12px; color:#343434 }

/* 미니홈피, 방명록 게시글 뷰 */
/* 상단 */
.visit-vhd { margin-top: 10px; border-top: 1px solid #eee }
.visit-vhd th,
.visit-vhd td { padding:15px 0; border-bottom: 1px solid #e9e9e9; font-size:12px; color:#000 } 
.visit-vhd .tb-left{ padding:0 10px }
/* 내용*/
.visit-vcont th,
.visit-vcont td { padding:15px 0; color: #000 } 
.visit-vcont .info em { font-weight:bold }
.visit-vcont .info .video-writer { display:inline-block; *display:inline }
.visit-vcont tr.no-line th,
.visit-vcont tr.no-line td { padding-bottom: 0; border-bottom: 0; }
.visit-vcont tr.dot-line th,
.visit-vcont tr.dot-line td { padding-top: 2px; border-bottom: 1px dotted #e5e5e5; }
.visit-vcont tr.info td .tb-left { padding-left: 0; color: #000;}
.visit-vcont .tb-left{ padding: 0 3px; }
.visit-vcont td .tb-cont { padding:15px 0; min-height:250px; color:#8d8d8d }
.visit-vcont td .tb-cont img { max-width: 100%; }
/* 코멘트 */
.visit-vcmt { border-top:1px solid #000 }
.visit-vcmt td { padding:20px 0 15px; border-bottom:1px dashed #e9e9e9; vertical-align:top }
.visit-vcmt .com-name { margin-right:20px; font-weight:bold; color:#000 }
.visit-vcmt .com-date { font-size:11px; color:#aeaeae }
.visit-vcmt .com-cont { padding:10px 20px 0 0; color:#828282; line-height:20px }
/* 작성 */
.vist-vcmt-reg { margin-top: 10px; border-bottom: 1px solid #e5e5e5; }
.vist-vcmt-reg th,
.vist-vcmt-reg td ,#comment_reply_input th { padding: 6px 0;}
.vist-vcmt-reg th ,#comment_reply_input th { font-weight: normal; color: #9d9d9d; }
.vist-vcmt-reg .tb-left ,#comment_reply_input .tb-left{ padding: 0 3px; }
.vist-vcmt-reg th .tb-left { padding-left: 10px; background: url('/images/d3/modern_simple/common/bull_join_required.gif') no-repeat 0 45%; }
/* 게시판 타입 - 쓰기 */
.bbs-table-write { margin-top:10px; border-top:1px solid #eee }
.bbs-table-write tbody th,
.bbs-table-write tbody td { padding:13px 0; text-align:left; border-bottom:1px solid #e9e9e9 } 
.bbs-table-write tbody th { padding-left:30px; font-size:11px; font-weight:normal; background:#fff}
.bbs-table-write tbody td { padding:13px 10px }
.bbs-table-write .privercy-agree label { vertical-align:-2px \0/IE8+9; *vertical-align:bottom }
.bbs-table-write .privercy-agree label input { vertical-align:top; *vertical-align:top }

/* 게시판 타입 - 비밀번호찾기 */
.bbs-table-pwd { margin-top:10px; padding:60px 0; border-top:1px solid #fff; border-bottom:1px solid #fff; }
.bbs-table-pwd table { width:475px; margin:0 auto }
.bbs-table-pwd tbody th,
.bbs-table-pwd tbody td  { font-size:12px; color:#8d8d8d; font-weight:normal } 
.bbs-table-pwd tbody td input { padding:0 0 0 5px; width:355px; height:42px; line-height:42px; border:1px solid #ddd }

.pwd-link { padding:40px 0 100px; text-align:center }
.pwd-link a { margin:0 3px; width:100px; height:40px; font-size:12px; line-height:40px}

/* 공통으로 쓰는거 */
textarea { width:600px; height:47px; padding:2px; border:1px solid #EDEDED;}        
.input-style { padding:2px; height:14px; line-height:14px; border:1px solid #EDEDED;}

.cont-sub-des { position:relative;}
.cont-sub-des div { padding-top:5px }
.cont-sub-des span { margin-right:15px; color:#343434 }
.cont-sub-des span em { font-size:12px; color:#343434; font-weight:bold }
.cont-sub-des span a {  }

.comment-list { border-top:1px solid #000 }
.comment-write { border-bottom:1px solid #e9e9e9 }
.bbs-table-view .comment-box td { padding-top:20px; border-bottom:1px dashed #e9e9e9;  vertical-align:top }
.comment-box .com-name { margin-right:20px; font-weight:bold; color:#000 }
.comment-box .com-date { font-size:11px; color:#aeaeae }
.comment-box .com-cont { padding:10px 20px 0 0; color:#828282; line-height:20px }
.bbs-table-view td.com-wrt-box { border:0;}
.com-wrt-box label { padding-left:12px; font-size:14px; color:#000; background: url('//image.makeshop.co.kr/makeshop/d3/basic_simple/common/bu_4x4.gif') no-repeat 0 50%;}
.com-wrt-box .input-style { margin:0 10px 0 7px; padding:0 0 0 5px; width:212px; height:27px; line-height:27px; border:1px solid #ddd }
.com-wrt-box .wrt { margin-top:7px }
.com-wrt-box .wrt span { margin:0 10px; font-size:14px; color:#828282 }
.com-wrt-box .wrt textarea { padding:1px 0; width:978px; height:118px; border:1px solid #ddd }
.com-wrt-box .wrt_write { padding-bottom:15px; font-size:0 }
.com-wrt-box .wrt_write .CSSbuttonBlack { width:118px; height:40px ; font-size:12px; line-height:40px }
.view-link { padding:20px 0; text-align:right }
.view-link a { width:80px; height:25px; font-size:11px; line-height:25px}

/* 게시판 회원 게시글 검색 */
.search_id { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #DADADA; display: block; padding: 3px; position: absolute; width: 90px; }

/* 개인정보보호정책 동의 */
.new-privercy-contract { text-align: left }
.new-privercy-contract p { font-weight: bold; margin: 0; margin-bottom: 10px; margin-top: 20px; text-align: left; }
.new-privercy-contract .privercy-agree label { vertical-align:-2px \0/IE8+9; *vertical-align:bottom }
.new-privercy-contract .privercy-agree label input { vertical-align:top; *vertical-align:top }
.privercy-contract-tap { position: relative; height:40px; }
.privercy-contract-tap ul { list-style: none; margin: 0; padding: 0; position: absolute; bottom: -1px; *bottom: -2px; }
.privercy-contract-tap li { border: 1px solid #ccc; border-right: none; background: #F4F4F4; float:left; display: inline-block; }
.privercy-contract-tap li a { display: block; padding: 10px 10px; text-decoration: none; }
.privercy-contract-tap li.end { border-right: 1px solid #ccc; }
.privercy-contract-tap li.sel { background: #FFFFFF; border-bottom: 1px solid #FFFFFF; }
.privercy-contract { clear: both; }
.privercy-contract textarea { clear: both; border: 1px solid #CCC; height: 60px; background: #FFFFFF; padding: 10px; width: 660px; }
.privercy-agree { margin: 10px 0; }
.privercy-agree label{ margin-right: 10px }

/* 게시판보기 */
.bbs-link { font-size:0 }
.bbs-link a { margin:0 2px }
.bbs-link a.delete { padding: 0 3px 0 5px; }
.bbs-link a.reply { padding: 0; }

.bbs-table-view .data-bd-cont { padding: 20px 0 40px 0; color:#8d8d8d }
.bbs-table-view hr { display: block; }

.input-style2 { width: 120px; margin: 0px 5px; }

.list-link { padding:10px 15px; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; }
.list-link li { padding:10px 0px }
.list-link li a { color:#828282 }
.list-link span.arrow { padding: 0px 5px 0px 15px; color: #828282; font-weight:bold }
.list-link span.arrow.prev { background: url(/images/d3/modern_simple/common/icon_prev_arrow.gif) no-repeat left 1px }
.list-link span.arrow.next { background: url(/images/d3/modern_simple/common/icon_next_arrow.gif) no-repeat left 1px }

.data-bd-cont .add_info { float: left; border: 1px solid #e5e5e5; width: 97%; padding: 5px 10px; line-height: 150%; margin-bottom: 10px; }
.data-bd-cont .add_title { float: left; width: 30%; font-weight: bold; }
.data-bd-cont .add_content { float: left; width: 70%; }
.data-bd-cont .attach { text-align: center; margin-bottom: 10px; }
/* 관련 상품 목록 */
.fixed-img-collist { margin-top:10px; padding-top:10px; border-top:1px solid #e5e5e5;}
.list-tit { padding-left:7px; color:#9d9d9d; background: url('/images/d3/modern_simple/common/bull_join_required.gif') no-repeat 0 50%;}
.fixed-img-collist ul { padding:15px 11px 0;}
.fixed-img-collist ul li { float:left; padding:0 10px 15px; text-align:center;}
.fixed-img-collist ul li a { display:block; width:150px; font-size:11px; color:#9d9d9d;}
.fixed-img-collist ul li a span.prd img { width:142px; height:142px; margin-bottom:8px; padding:3px; border:1px solid #d8d8d8;}
.fixed-img-collist ul li p { padding:1px; font-size:11px; color:#666; font-weight:bold;}
/* 상품 상단 정보 */
.prd-tinfo { margin-top:10px; zoom: 1; overflow: hidden; padding:20px 0 20px 107px; border:1px solid #e4e4e5 }
.prd-tinfo dt,
.prd-tinfo dd { position: relative; float: left; }
.prd-tinfo dt { left: -87px; margin-right: -87px; width:70px; height:70px }
.prd-tinfo dt img {  width: 100%; height: 100%; }
.prd-tinfo dd { width: 100%;  }
.prd-tinfo dd ul {  }
.prd-tinfo dd ul li { padding-top:14px }
.prd-tinfo dd ul li .tit { font-weight:bold }
/* 개인정보보호정책 동의 */
.privercy-contract textarea {  height: 60px; width: 660px; }
.privercy-contract-tap { height:30px; }
.privercy-contract-tap li a { padding: 7px 10px; }
/* 개인정보 수집 이용 */
.privercy-contract .tbl { width:100% !important; padding:0; margin:0; border-spacing:0; border-collapse:collapse; border-top: 1px solid #dadada; border-left: 1px solid #dadada; }
.privercy-contract .tbl caption { display:none; }
.privercy-contract .tbl th { line-height:32px; color: #3b3b3b; font-size:12px; font-weight:bold; background: #f0f0f0; text-align:center; }
.privercy-contract .tbl th,
.privercy-contract .tbl td { height:32px; padding:0; margin:0; border-right: 1px solid #dadada; border-bottom: 1px solid #dadada; letter-spacing:-1px }
.privercy-contract .tbl td .txt-l { padding:5px 3px; margin:0; text-align:left; }





/* 게시판쓰기 */

#bbsData .bbs-link-btm { margin-top:40px; text-align: center }
#bbsData .bbs-link-btm a { width:228px; height:58px; font-size:16px; line-height:58px }
.bbs-table-write p { text-align: center; margin: 10px 0px; }
.bbs-table-write .title { line-height: 25px; }
.bbs-table-write .title .title_select { padding-top:5px }
.bbs-table-write .title .MS_select { margin-bottom:5px }
.bbs-table-write .MS_input_txt { padding:0 0 0 5px; height:31px; line-height:31px; border:1px solid #ddd; background:#fff }
.bbs-table-write .MS_select { height:33px; }
.bbs-table-write textarea { width:900px; height: 300px !important; }
.bbs-table-write .input_style1 { width:362px; }
.bbs-table-write .input_style2 { width:700px; }
.bbs-table-write .input_style3 { margin-right:0; width:362px; background:#f5f5f5 }

.text_content { *padding:13px 0 13px 2px }

.bbs-table-write .btn_file { display:inline-block; margin-left:-1px; padding:0 5px; height:31px; font-size:11px; line-height:31px; border:1px solid #e4e4e5; background:#f5f5f5; }
/* 상품 상단 정보 */
.prd-tinfo { margin-top:10px; zoom: 1; overflow: hidden; padding:20px 0 20px 107px; border:1px solid #e4e4e5 }
.prd-tinfo dt,
.prd-tinfo dd { position: relative; float: left; }
.prd-tinfo dt { left: -87px; margin-right: -87px; width:70px; height:70px }
.prd-tinfo dt img {  width: 100%; height: 100%; }
.prd-tinfo dd { width: 100%;  }
.prd-tinfo dd ul {  }
.prd-tinfo dd ul li { padding-top:14px }
.prd-tinfo dd ul li .tit { font-weight:bold }
.prd-tinfo dd ul li a { vertical-align:top }
.prd-tinfo dd ul li img { vertical-align:top }
/* 개인정보보호정책 동의 */
.privercy-contract textarea { height: 100px; width: 660px; }
.new-privercy-contract p { text-align: left; }

/* 개인정보 수집 이용 */
.privercy-contract .tbl {  width:100% !important; padding:0; margin:0; border-spacing:0; border-collapse:collapse; border-top: 1px solid #dadada; border-left: 1px solid #dadada; }
.privercy-contract .tbl caption { display:none; }
.privercy-contract .tbl th { line-height:32px; color: #3b3b3b; font-size:12px; font-weight:bold; background: #f0f0f0; text-align:center; }
.privercy-contract .tbl th,
.privercy-contract .tbl td { height:32px; padding:0; margin:0; border-right: 1px solid #dadada; border-bottom: 1px solid #dadada; letter-spacing:-1px; }
.privercy-contract .tbl td .txt-l { padding:5px 3px; margin:0; text-align:left; }








/* =========================================================================================================================================================== 
 ※ 페이징코드
=========================================================================================================================================================== */

.pagingWrap {  clear:both; text-align:center; width:100%; padding:20px 0 0 0; }
.paging { text-align: center; vertical-align: top; display:inline-block; }
.paging li { display: inline-block; float:left; font-size: 12px; color: #757575; vertical-align: top;}
.paging li a { display: block; width: 33px; border-top: 1px solid #ccc; padding: 9px 0; font-family: open sans; font-size: 11px; font-weight: normal; color: #777; line-height: 14px; background: #fff;}
.paging li.now a { padding-bottom: 6px; border-top: 1px solid #333;font-weight: bold;  color: #333;  }
.paging li.first a,
.paging li.prev a,
.paging li.next a,
.paging li.last a { padding:0; font-size:0; text-indent:-99999px; height:33px; line-height:33px; }
.paging li.prev { }
.paging li.next { }
.paging li.first a { background:url('/design/retrohouse/wizdesign/btn_comment_first.png') no-repeat; }
.paging li.prev a { background:url('/design/retrohouse/wizdesign/btn_comment_prev.png') no-repeat; }
.paging li.next a { background:url('/design/retrohouse/wizdesign/btn_comment_next.png') no-repeat; }
.paging li.last a { background:url('/design/retrohouse/wizdesign/btn_comment_last.png') no-repeat; }


/* 분류타이틀 */
.cate-wrap .bcate { margin-top: 0px; text-align:center;}
.cate-wrap .bcate a {  font-size: 16px; font-weight: 700; color:#222; letter-spacing:1px; }
.cate-wrap .bcate a:after{ content:"";display:block;clear:both; height:1px; width:20px; margin:10px auto 0 ; text-align:center; background:#000 }


/* 타이틀 */
.cateTit { padding-top:60px; position:relative; text-align:center }
.cateTit h3 { font-size:20px; color:#1c1c1c; font-weight:bold; font-family:Verdana; line-height:20px }
.cateTit .line { margin:20px auto; width:10px; height:2px; background:#1c1c1c }


/* 타이틀 - 회원가입 등의 페이지 */
.cateTit_v2 { *zoom:1 ; text-align:center; position:relative;  }
.cateTit_v2:after{content:"";display:block;clear:both;}
.cateTit_v2 .right{float:right;}
.cateTit_v2 .title { font-size:18px;line-height:1;font-weight:bold;display:inline-block;*float:left;*line-height:20px;  }
.cateTit_v2 .subTxt{font-size:12px;line-height:1.5;}
.cateTit_v2.join {margin:0px 0 20px;padding:14px 0;border-bottom:0px solid #000;color:#000;}
.cateTit_v2.join:after{ content:"";display:block;clear:both; height:1px; width:20px; margin:10px auto 0 ; text-align:center; background:#000 }


/* 로그인페이지 */
#loginWrap { padding-top:100px ; text-align:center;}
#loginWrap .mlog-sign {  width:100%; overflow:hidden; margin:0 auto; border:0px solid #e9e9e9; border-top:none }
#loginWrap .mlog-sign .mlog,
#loginWrap .mlog-sign .sign { display:inline-block;  vertical-align:top;  }
#loginWrap .mlog-sign h3 { padding-top:35px; font-size:18px; color:#363636; font-weight:bold; line-height:18px }

/* member login */
#loginWrap .mlog-sign .mlog { margin-top:44px; padding:0 81px; position:relative; width:386px; height:370px; border-right:1px solid #e9e9e9 ; text-align:left;}
#loginWrap .mlog-sign .mlog p { padding-top:20px; font-size:12px; color:#adadad }
#loginWrap .mlog-sign .frm-list { padding-top:18px; position:relative; width:386px }
#loginWrap .mlog-sign .frm-list li { position:relative; width: 100%; margin-bottom:6px }
#loginWrap .mlog-sign .frm-list li label { padding-left:11px; position:absolute; top:0; left:0; width:375px; height:50px; color:#adadad; line-height:50px; cursor:text }
#loginWrap .mlog-sign .frm-list li input { padding-left:10px; width:374px; height:48px; line-height:48px; border:1px solid #ddd }
#loginWrap .mlog-sign .btn-mlog { padding-top:10px; position:relative }
#loginWrap .mlog-sign .btn-mlog a { width:384px; height:58px; font-size:16px; line-height:58px }
#loginWrap .mlog-sign .se-log { position:relative; color:#666 !important }
#loginWrap .mlog-sign .se-log label { font-size:11px }
#loginWrap .mlog-sign .se-log label input { margin-top:-3px; *margin-top:-4px; vertical-align:middle }



/* sign */
#loginWrap .mlog-sign .sign { margin-top:44px; padding-left:76px; width:386px; text-align:left; }
#loginWrap .mlog-sign .sign dl { padding-top:22px }
#loginWrap .mlog-sign .sign dl dt { font-size:11px; color:#adadad }
#loginWrap .mlog-sign .sign dl dd { padding-top:15px }
#loginWrap .mlog-sign .sign dl dd a { width:384px; height:58px; font-size:15px; line-height:58px }


@media all and (max-width :1143px) { #loginWrap .mlog-sign .mlog{ border-right:0px solid #e9e9e9 ; } #loginWrap .mlog-sign .sign { padding-left:0px; } }



/* simpleLogin */
#simpleLogin { text-align:center; margin-top:10px }
#simpleLogin .sns-login { font-size:0 }
#simpleLogin .sns-login a { display:inline-block; *display:inline; vertical-align:top;position:relative;width:360px;margin-left:10px; *margin-left:9px }
#simpleLogin .sns-login a:first-child { margin-left:0 }




/* order shopping */
#loginWrap .order-sp { margin-top:10px; height:206px; border:0px solid #e9e9e9 ; margin:0 auto;  }
#loginWrap .order-sp .left-tit { margin:50px 0 0 0px; padding-left:0px;  display:inline-block;  width:313px; height:91px; }
#loginWrap .order-sp .left-tit h3 { padding-top:29px; font-size:20px; color:#363636; line-height:20px }
#loginWrap .order-sp .left-tit p { padding-top:10px; font-size:11px; color:#adadad }
#loginWrap .order-sp .frm-wrap { margin-top:50px; position:relative; display:inline-block; width:500px }
#loginWrap .order-sp .frm-list { position:relative; width:386px }
#loginWrap .order-sp .frm-list li { position:relative; width:100%; margin-bottom:6px; text-align:left; }
#loginWrap .order-sp li label { padding-left:11px; position:absolute; top:0; left:0; max-width:375px; height:50px; color:#adadad; line-height:50px; cursor:text }
#loginWrap .order-sp li.order-num label { display:none !important }
#loginWrap .order-sp li .txt-frm { padding:0 0 0 10px; width:374px; height:48px; line-height:48px; border:1px solid #ddd }
#loginWrap .order-sp li.order-num .txt-frm { color:#adadad }
#loginWrap .order-sp li.order-num .txt-frm:focus { color:#1c1c1c }
#loginWrap .order-sp .btn-sch { padding:30px 0; position: absolute; left:450px; top:0px; width:105px; font-size:15px }


/* simpleLogin */
#simpleLogin { text-align:center; margin-top:10px }
#simpleLogin .sns-login { font-size:0 }
#simpleLogin .sns-login a { display:inline-block; *display:inline; vertical-align:top;position:relative;width:360px;margin-left:10px; *margin-left:9px }
#simpleLogin .sns-login a:first-child { margin-left:0 }

/*
#orderhname {
  -webkit-appearance: textfield;
}
#orderhname::-webkit-text-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  background:red;
  position:relative;
    right:20px;  

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
}*/





/* =========================================================================================================================================================== 
 ※ 페이징코드
=========================================================================================================================================================== */

.pagingWrap {  clear:both; text-align:center; width:100%; padding:20px 0 0 0; }
.paging { text-align: center; vertical-align: top; display:inline-block; }
.paging li { display: inline-block; float:left; font-size: 12px; color: #757575; vertical-align: top;}
.paging li a { display: block; width: 33px; border-top: 1px solid #ccc; padding: 9px 0; font-family: open sans; font-size: 11px; font-weight: normal; color: #777; line-height: 14px; background: #fff;}
.paging li.now a { padding-bottom: 6px; border-top: 1px solid #333;font-weight: bold;  color: #333;  }
.paging li.first a,
.paging li.prev a,
.paging li.next a,
.paging li.last a { padding:0; font-size:0; text-indent:-99999px; height:33px; line-height:33px; }
.paging li.prev { }
.paging li.next { }
.paging li.first a { background:url('/design/retrohouse/wizdesign/btn_comment_first.png') no-repeat; }
.paging li.prev a { background:url('/design/retrohouse/wizdesign/btn_comment_prev.png') no-repeat; }
.paging li.next a { background:url('/design/retrohouse/wizdesign/btn_comment_next.png') no-repeat; }
.paging li.last a { background:url('/design/retrohouse/wizdesign/btn_comment_last.png') no-repeat; }



/* ===========================================================================================================================================================
 ※ 애니메이션효과 ScrollTrigger
 =========================================================================================================================================================== */



.fromTopIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	transform: translate(0,0);
	opacity: 1.0;
}

.fromTopOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	transform: translate(0,-10px);
	opacity: 0.0;
}

.fromBottomIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromBottomOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,10px);
	opacity: 0.0;
}

.fromLeftIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromLeftOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(-10px,0);
	opacity: 0.0;
}

.fromRightIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(0,0);
	opacity: 1.0;
}

.fromRightOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: translate(10px, 0);
	opacity: 0.0;
}

.scaleUpIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleUpOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.3,1.3);
	opacity: 0.0;
}

.scaleDownIn
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(1.0,1.0);
	opacity: 1.0;
}

.scaleDownOut
{
	transition: transform 1.0s ease, opacity 1.0s ease;
	
	transform: scale(0.7,0.7);
	opacity: 0.0;
}



기본 소스 보기기본 소스 적용 최근 저장 소스로 되돌리기
왼쪽메뉴 컨트롤개별디자인 팁


/* 버튼 */
.btn_none{border:1px solid #999; font-size:13px; line-height:1; font-weight:600; color:#555; letter-spacing:2.5px; font-family: 'Raleway', 'Open Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; background:none;}
.btn_white{border:1px solid #edebe8; font-size:13px; line-height:1; font-weight:600; color:#555; letter-spacing:2.5px; font-family: 'Raleway', 'Open Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; background:#fff; transition:0.3s ease-in-out;}
.btn_black{border:1px solid #525150; font-size:13px; line-height:1; font-weight:600; color:#fff; letter-spacing:2.5px; font-family: 'Raleway', 'Open Sans', 'Noto Sans KR', 'Nanum Gothic', sans-serif; background:#525150;}

.btn_01{display:inline-block; padding:20px 30px;  font-size:12px; letter-spacing:0.5px; font-weight:normal; vertical-align:top; box-sizing:border-box;} /*메인버튼*/
.btn_02{display:inline-block; padding:16px 150px; box-sizing:border-box;} /*회원가입_서브큰버튼*/
.btn_02_2{display:inline-block; padding:16px 100px; box-sizing:border-box; letter-spacing:1px; font-weight:normal;} /*한글 서브큰버튼*/
.btn_03{display:inline-block; padding:16px 0; width:100%; box-sizing:border-box;}/*로그인, 검색버튼_가로100*/
.btn_04{display:inline-block; padding:0 10px; height:30px; line-height:30px; font-size:12px; font-weight:normal; letter-spacing:0.5px; vertical-align:top; box-sizing:border-box;} /*우편번호버튼*/
.btn_05{display:inline-block; padding:10px 0; width:160px; text-align:center; font-size:12px; font-weight:normal; letter-spacing:1px; vertical-align:top; box-sizing:border-box;}/*서브작은버튼*/
.btn_05_2{display:inline-block; padding:10px 0; width:160px; text-align:center; font-size:12px; letter-spacing:0.5px; font-weight:normal; vertical-align:top; box-sizing:border-box;}/*한글 서브작은버튼 */
.btn_06{display:inline-block; padding:0 20px; height:28px; line-height:28px; font-size:12px; font-weight:normal; letter-spacing:0.5px; vertical-align:middle; box-sizing:border-box;}/*마이페이지 조회*/
.btn_07{display:inline-block; width:90px; text-align:center; height:28px; line-height:28px; font-size:12px; font-weight:normal; letter-spacing:0.5px; vertical-align:middle; box-sizing:border-box; margin-bottom:3px;}/*관심상품 선택영역*/
.btn_08{display:inline-block; width:80px; text-align:center; height:56px; line-height:56px; font-size:12px; letter-spacing:1px; vertical-align:middle; box-sizing:border-box;}/*댓글 확인*/

/* 버튼호버 */
.btn_none:hover{border-color:#666; background:#dddddd;}
.btn_white:hover{border-color:#999;}