/* 상품리스트 */


/* font-weight:bold; */

.pl_cardCode {
    color: #666666;
    font-family: arial;
    font-size: 14px;
    padding: 8px 0px;
    text-align: center;
}
.pl_cnt_price, .pl_cnt_price > span {
    color: #999999;
    font-size: 13px;
}
.pl_cnt_price {
    text-align: center;
}

.pl_sp_btn {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    margin-top: 12px;
    margin-bottom: 15px;
    text-align: center;
}
.pl-no-data {
    width: 100%;
    height: 70px;
    line-height: 70px;
    color: #333;
    text-align: center;
    font-size: 13px;
}
.product_list_price_sale {
    text-align: center;
}


/* 상품 */
.banner_mcard { line-height:0; }
#title_img, .title_img { line-height: 0; }
.product_detail_info > tbody > tr > th { width:94px;}
.product_detail_notice > tbody > tr > td { color:#888888;line-height:18px; }
.product_row { height:45px; clear:both;  width:100%; font-size:0; line-height:0; position:relative; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; }
.product_card  { width:50%; float:left; background-color:#fff; border-bottom:1px solid #e7e7e7; border-right:<?=$border_r?>px solid #e7e7e7; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-align:center; }


/*
        misc
                  */

/* 세로형 폼 테이블 */
.tbl1 > tbody > tr > th, .tbl1 > tbody > tr > td { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-bottom: 1px solid #dddddd; line-height: 100%; }
.tbl1 > tbody > tr > th { padding-top: 22px; color:#666666; font-weight: normal;  text-align: left; vertical-align: top; width: 57px; }
.tbl1 > tbody > tr > td { padding-top: 7px; padding-bottom: 7px; padding-left: 8px;    }
.tbl1_wrapper { width: 90%; margin: auto; } /*.tbl1_wrapper { width: 335px; margin: auto; }*/
input[name=unm] { width: 100%; }


/* CSS Document */

/* reset */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

html, body{
    font-family: 'Nanum Gothic', sans-serif;
    /*
        
        height: 100%;
        
        i-phone scroll bug fix 2018.08.13
        
    */
    width: 100%;
}
/* html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline} */
body { margin: 0; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
h1, h2, h3, h4, h5, h6{font-weight:normal}
a:focus,button:focus{outline:none}
button{outline:0;border:none;border-radius:0;background:none}
input,textarea{-webkit-appearance:none;color:inherit} /* font-size:inherit; */
input[type="radio"]{-webkit-appearance:radio}
input[type="checkbox"]{-webkit-appearance:checkbox}
table{border-collapse:collapse;border-spacing:0}
legend, caption span{position:absolute;left:-9999em;top:0;width:0.1%;height:0.1%;text-indent:-999em;overflow:hidden;visibility:hidden}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none}
blockquote, q{quotes:none}
span,span:focus{outline:none;border:0;background:none;padding:0;margin:0}
a,a:link,a:active,a:visited,a:hover{text-decoration:none;}
ul,ol,li{list-style:none}

.disN{ display:none !important}
.opa_1{ opacity:1 !important; z-index:100}
.wd30{ width:30px !important}
.betweenLine{ width:1000px; height:1px; margin:0 auto; background-color:#d9d9d9;}
.mobile{ display:none}
#coverBG{position:fixed; width:100%; height:100%; left:0; top:0; background-color:rgba(0,0,0,0.7); z-index:101}

/* Header */
#topNav{ width:100%; background-color:#21242d;}
#topNav:after{ content:""; display:block; clear:both}
#topNav .center{ width:1000px; margin:0 auto;}
#topNav .topTxt{ float:left; font-size:13px; font-weight:bold; color:#fff; padding:10px 0;}
#topNav ul{ float:right;}
#topNav ul .tNav{ position:relative; display:inline-block;}
#topNav ul .tNav a{ display:block; padding:10px 0; font-size:11px; color:#fff; margin-left:20px;}
#topNav ul .tNav img{margin-left:10px; margin-bottom:-3px}
#topNav ul .tNav:hover .dropMenu{ display:block !important}
#topNav ul .tNav .dropMenu{ position:absolute; width:130px; display:none; left:7px; top:33px; background-color:#21242d; padding:15px 0 15px; z-index:1000000}
#topNav ul .tNav .dropMenu li{ width:100%}
#topNav ul .tNav .dropMenu li a{ padding:7px 15px; margin:0}

#mainNav{ width:1000px; margin:0 auto;}
#mainNav:after{ content:""; display:block; clear:both}
#mainNav .logo{ float:left; padding:12px 0}
#mainNav .logo img{}
#mainNav ul{ float:right;}
#mainNav ul > li{ position:relative; display:inline-block;}
#mainNav ul > li > a{ display:block; padding:32px 10px; font-size:16px; font-weight:bold; color:#333;}
#mainNav ul > li img{ vertical-align:bottom}
#mainNav ul > li:hover .dropMenu{ display:block !important}
#mainNav ul > li .dropMenu{position:absolute; width:170px; display:none; left:-5px; top:75px; background-color:#fff; padding:15px 0 15px; z-index:1000000}
#mainNav ul > li .dropMenu li{width:100%}
#mainNav ul > li .dropMenu li a{padding:10px 15px; margin:0; font-size:14px; font-weight:500}

#m_Header{ display:none}

/* 메인 배너 */
#mainBanner{ padding:0; position:relative; overflow:hidden; background-color:#08090b;}
#mainBanner ul{position:relative; height:500px; margin:0; padding:0 }
#mainBanner ul .banner_blank{ display:none}
#mainBanner ul li{ position:absolute; top:0; left:0; width:100%; height:500px; background-repeat:no-repeat; background-position:center; opacity:0; transition:1.2s}
#mainBanner ul li.banner_01{background-image:url(../img/main_banner01.jpg)}
#mainBanner ul li.banner_02{background-image:url(../img/main_banner01.jpg)}
#mainBanner ul li.banner_03{background-image:url(../img/main_banner01.jpg)}
#mainBanner ul li.banner_04{background-image:url(../img/main_banner01.jpg)}
#mainBanner ul li.banner_05{background-image:url(../img/main_banner01.jpg)}
#mainBanner ul li a{display:block;}
#mainBanner ul li a .m_banner{ display:none}
#mainBanner .btn_box{ position:absolute; width:300px; bottom:80px; left:50%; margin-left:-495px; z-index:100}
#mainBanner .btn_box p{ display:inline-block; cursor:pointer; margin-right:7px}
#mainBanner .btn_box p img{ height:12px}
#mainBanner .btn_box p .line{ display:inline-block; width:0; height:1px; background-color:#bbb; margin-bottom:5px; margin-left:10px}

/* 메인 배너 하단 바 */
#barArea{ width:100%; border-bottom:1px solid #d9d9d9;}
#barArea .center{ width:1001px; margin:0 auto; overflow:hidden}
#barArea .center:after{ content:""; display:block; clear:both}
#barArea .center a{ display:block; float:left; width:499px; height:49px; border-right:1px solid #d9d9d9; padding:16px 20px; box-sizing:border-box}
#barArea .center a:after{ content:""; display:block; clear:both}
#barArea .center a .img01{ display:block; float:left}
#barArea .center a .txt{ display:block; float:left; font-size:13px; font-weight:bold; color:#666; margin-left:10px; padding-top:1px}
#barArea .center a .img02{ display:block; float:right; padding-top:5px;}

/* 섹션 공통 */
section{ padding:70px 0}
section .center{ width:1000px; margin:0 auto}
section h1{ width:100%; margin-bottom:20px; overflow:hidden}
section h1:after{ content:""; display:block; clear:both}
section h1 .title{ float:left; font-size:20px; color:#555}
section h1 .moreBtn{ float:right; font-size:13px; font-weight:bold; color:#555 }

/* 베스트 디자인 */
#bestDesign ul{ overflow:hidden}
#bestDesign ul:after{ content:""; display:block; clear:both}
#bestDesign ul li{ position:relative; width:484px; height:270px; float:left;}
#bestDesign ul li:first-child{ margin-right:32px;}
#bestDesign ul li .txt{ position:absolute; top:40%; left:25px; font-size:16px; color:#fff; letter-spacing:-1px}
#bestDesign ul li .detailBtn{ position:absolute; top:60%; left:25px; width:112px; height:27px; line-height:27px; text-align:center; font-size:13px; color:#fff; border:1px solid #fff; z-index:100}

/* 프리미엄 서비스 */
#premium{ background-color:#fdfbfd}
#premium .service{ display:block; overflow:hidden}
#premium .service .cont{ width:25%; height:155px; float:left;}
#premium .service .cont .preImg{ height: 20px; padding:20px 0 25px; text-align:center}
#premium .service .cont .txt01{ font-size:16px; font-weight:bold; color:#666; margin-bottom:10px; text-align:center}
#premium .service .cont .txt02{ font-size:13px; color:#aaa; text-align:center}
#premium .service .cont .txt03{ font-size:13px; color:#aaa; padding:5px 0 20px; text-align:center}

/* ONLY 보자기카드 */
#only ul{ overflow:hidden}
#only ul:after{ content:""; display:block; clear:both}
#only ul li{ position:relative; width:484px; height:485px; float:left;}
#only ul li:first-child{ margin-right:32px;}
#only ul li .only02{ display:block; width:100%; height:230px; background-color:#dde8e4; text-align:center;}
#only ul li .only02 .txt01{ font-size:24px; color:#333; padding-top:30px; margin-bottom:30px; text-align:center;}
#only ul li .only02 .txt02{ display:inline-block; width:90px; font-size:13px; color:#333; border:1px solid #666; text-align:center; padding:8px 0; margin:0 3px;}
#only ul li .only02 .txt03{ display:inline-block; width:110px; font-size:13px; color:#333; border:1px solid #666; text-align:center; padding:8px 0; margin:6px 3px;}
#only ul li .only03{ position:relative; display:block; margin-top:25px}
#only ul li .only03 .txt01{ position:absolute; width:100%; top:46px; font-size:23px; color:#fff; text-align:center}
#only .bxslider li{ position:relative; height:485px}
#only .bxslider li .txtArea{ position:absolute; width:100%; top:30px; left:0;}
#only .bxslider li .txtArea .number{font-size:38px; font-weight:normal; color:#fff; text-align:center}
#only .bxslider li .txtArea .txt01{font-size:24px; font-weight:bold; color:#fff; text-align:center; margin-top:20px;}
#only .bxslider li .txtArea .txt02{font-size:14px; font-weight:bold; color:#fff; text-align:center; margin-top:10px;}
#only .bxslider li .bnrBtn{ position:absolute; width:132px; height:33px; line-height:33px; bottom:50px; left:50%; margin-left:-66px; border:1px solid #fff; color:#fff; font-size:11px; text-align:center}


/* 2018 연하장, 크리스마스 카드 */
#product ul{ overflow:hidden}
#product ul:after{ content:""; display:block; clear:both}
#product ul li{ float:left; margin-right:29px; margin-bottom:30px;}
#product ul li:nth-child(4), #product ul li:nth-child(8), #product ul li:nth-child(12), #product ul li:nth-child(16){ margin-right:0 !important}
#product ul li .imgBox{ display:block; width:228px; height:270px;}
#product ul li .nameArea{ margin-top:20px;}
#product ul li .nameArea:after{ content:""; display:block; clear:both}
#product ul li .nameArea .pName{ float:left; font-size:14px; font-weight:bold; color:#333}
#product ul li .nameArea .iconBox{ float:right}
#product ul li .nameArea .iconBox span{ display:inline-block; padding:0 3px; font-size:13px; margin:0 1px}
#product ul li .nameArea .iconBox .icon01{ color:#62629d; border:1px solid #62629d}
#product ul li .nameArea .iconBox .icon02{ color:#d95d67; border:1px solid #d95d67}
#product ul li .nameArea .iconBox .icon03{ color:#739e8c; border:1px solid #739e8c}

/* 중간 문구 영역 */
#middleArea{ text-align:center; padding:50px 0; background-color:#f3f2f5}
#middleArea .txt01{ font-size:26px; color:#333; margin-top:20px; margin-bottom:20px; text-align:center}
#middleArea .txt02{ font-size:14px; color:#333; margin-bottom:20px; text-align:center}

/* 아티스트 콜라보 */
#collabo ul{ text-align:center; margin-top:20px;}
#collabo ul li{ display:inline-block; margin:0 28px;}
#collabo ul li a{ position:relative; display:block; width:193px; height:298px; }
#collabo ul li a .name{ position:absolute; width:100px; font-size:16px; font-weight:bold; color:#333; left:50%; margin-left:-50px; bottom:80px;}
#collabo ul li a .txt01{ font-size:11px; color:#aaa; margin-top:20px; text-align:center}
#collabo ul li a .txt02{ font-size:11px; color:#aaa; padding:5px 0 0; text-align:center}

/* 하단 배너 */
#bottomArea{ margin-bottom:30px}
#bottomArea ul{ overflow:hidden}
#bottomArea ul:after{ content:""; display:block; clear:both}
#bottomArea ul li{ position:relative; float:left; margin-right:32px;}
#bottomArea ul li:last-child{ margin-right:0 !important}
#bottomArea ul li .bannerBox{ position:relative; display:block; width:312px; height:224px; }
#bottomArea ul li .bannerBox .txtBox{ position:absolute; width:100%; left:0; top:50%; margin-top:-32px;}
#bottomArea ul li:last-child .bannerBox .txtBox{margin-top:-52px;}
#bottomArea ul li .bannerBox .txtBox .txt01{ font-size:22px; color:#fff; text-align:center}
#bottomArea ul li .bannerBox .txtBox .txt02{ font-size:13px; color:#fff; text-align:center}
#bottomArea ul li .btn01{ position:absolute; display:block; width:50%; left:0; bottom:0; z-index:10; font-size:13px; color:#fff; text-align:center; padding:6% 0;}
#bottomArea ul li .btn02{ position:absolute; display:block; width:50%; right:0; bottom:0; z-index:10; font-size:13px; color:#fff; text-align:center; padding:6% 0;}

/* footer */
footer{ background-color:#21242d; padding:50px 0}
footer .center{ width:1000px; margin:0 auto}
footer ul{ overflow:hidden}
footer ul li{ float:left; width:33%; padding-left:30px; box-sizing:border-box}
footer ul li:first-child{padding-left:0}
footer .title{ font-size:16px; font-weight:bold; color:#fff}
footer .call{ display:block; width:188px; font-size:35px; font-weight:bold; color:#fff; border-bottom:1px solid #fff; padding-bottom:3px; margin:20px 0 30px}
footer ul li .txtImg{ display:block; margin:30px 0}
footer .txt01{ font-size:11px; color:#d6d6d6; margin-top:5px}
footer .txtArea02{ margin: 30px 0 50px}
footer .txt02, footer ul li .txt03{ font-size:13px; color:#d6d6d6; margin-top:5px;}
footer .txt02 a{ display:inline-block; color:#d6d6d6; padding-bottom:5px}
footer .txtArea03{ margin:30px 0}
footer .txtArea03 .sns{ margin-top:10px}
footer .txtArea03 .sns a{ display:inline-block; margin-right:10px}
footer .insta_img{ text-align:left}
footer .insta_img a{ display:inline-block; margin-right:20px}
footer .compInfo{ overflow:hidden}
footer .compInfo:after{ content:""; display:block; clear:both}
footer .compInfo .infoTxt{ float:left; font-size:11px; color:#d6d6d6; padding-top:10px}
footer .compInfo .infoTxt span{ display:block; margin-bottom:10px}
footer .compInfo .certiMark{ float:right}
footer .compInfo .certiMark a{ display:inline-block; vertical-align:top; margin-left:5px}


/* 모바일 */
@media (min-width:450px) and (max-width:999px){
#bestDesign ul li .txt{ font-size:20px; left:5%;}
#bestDesign ul li .detailBtn{ width:85px; height:24px; line-height:24px; font-size:10px; left:5%; display:block}
#only .bxslider li .txtArea{ top:10%}
#only .bxslider li .bnrBtn{ bottom:50px}
#product ul li .nameArea .pName{ font-size:16px}
#product ul li .nameArea .iconBox span{padding:0 1px; font-size:11px; margin:2px 1px 0}
#middleArea .txt01{ font-size:22px;}
#middleArea .txt02{ font-size:13px;}
#bottomArea ul li .bannerBox .txtBox .txt01{ font-size:30px;}
#bottomArea ul li .bannerBox .txtBox .txt02{ font-size:16px;}
#bottomArea ul li .btn01, #bottomArea ul li .btn02{ font-size:16px;}
}
@media (max-width:449px){
#bestDesign ul li .txt{ font-size:13px; left:5%;}
#bestDesign ul li .detailBtn{ width:80px; height:20px; line-height:20px; font-size:9px; left:5%; display:block; margin-top:5px;}
#only .bxslider li .txtArea{ top:25px}
#only .bxslider li .txtArea .number{ font-size:34px;}
#only .bxslider li .txtArea .txt01{ font-size:20px; margin-top:15px;}
#only .bxslider li .txtArea .txt02{ font-size:13px;}
#only .bxslider li .bnrBtn{ bottom:30px}
#only ul li .only03 .txt01{ top:35px; font-size:18px}
#product ul li .nameArea .pName{ font-size:14px}
#product ul li .nameArea .iconBox span{padding:1px; font-size:9px; margin:0 1px; font-family:initial !important;}
#middleArea .txt01{ font-size:20px;}
#middleArea .txt02{ font-size:10px;}

}
@media (max-width:999px){
.pc{ display:none !important}
.mobile{ display:block !important}
.betweenLine{ width:85% !important}
#topNav, #mainNav{ display:none}
#m_Header{ position:relative; width:100%; background:#fff; z-index:10000;  display: none !important; }
#m_Header:after{ content:""; display:block; clear:both}
#m_Header .logo{ display:block; float:left; width:144px; padding:14px 25px;}
#m_Header .logo img{ width:144px}
#m_Header .toggle{ display:none}
#m_Header .toggle + label{ display:block; float:right; margin:22px 25px; width:20px; height:20px; background-position:center; background-repeat:no-repeat; background-size:contain; background-image:url(../img/toggle_btn.png); cursor:pointer}
#m_Header .toggle:checked + label{background-image:url(../img/xBtn.png); background-size:cover;}
#m_Header .m_dropMenu{ display:none; position:absolute; width:100%; top:65px; left:0; font-size:16px; background-color:#fff; padding:0 25px 30px; box-sizing:border-box; z-index:100000}
#m_Header .m_dropMenu > li{border-bottom: 1px solid #d9d9d9; color:#666}
#m_Header .m_dropMenu > li > a{ display:block; padding: 20px 0; color:#666}
#m_Header .m_dropMenu > li.borderN{border-bottom:none}
#m_Header .m_dropMenu li .login{ font-weight:bold; color:#e64d5b;}
#m_Header .m_dropMenu li .menu{ display:none}
#m_Header .m_dropMenu li .menu + label{width: 99%; display: block; background: url(../img/downBtn.png) no-repeat right center; background-size: 15px; padding: 20px 0;}
#m_Header .m_dropMenu li .menu:checked + label{background: url(../img/upBtn.png) no-repeat right center; background-size: 15px;}
#m_Header .m_dropMenu .searchArea{position: relative; background: #f1f1f1;}
#m_Header .m_dropMenu .searchArea #search{width: 85%; display:inline-block; border:none; padding:15px 25px; background-color:transparent; font-size:15px;}
#m_Header .m_dropMenu .searchArea .serachBtn{width:25px; height:25px; display:inline-block; background: url(../img/icon_search_m.png) no-repeat; background-size:contain; vertical-align:middle; margin:0 5px 10px;}
#m_Header .m_dropMenu li .subMenu{ display:none}
#m_Header .m_dropMenu li .subMenu li{}
#m_Header .m_dropMenu li .subMenu li a{ display:block; font-size:15px; color:#666; padding:0 25px 20px;}

#mainBanner ul{ height:auto}
#mainBanner ul .banner_blank{ display:block !important}
#mainBanner ul .banner_blank img{width:100%}
#mainBanner ul li{background-image:none !important; height:auto}
#mainBanner ul li a .m_banner{ display:block !important; width:100%}
#mainBanner .btn_box{ bottom:60px; left:25px; margin-left:0;}
#mainBanner .btn_box p{ margin-right:5px;}
#mainBanner .btn_box p img{ height:10px;}
#mainBanner .btn_box p .line{ margin-bottom:5px; margin-left:5px;}
#mainBanner .btn_box p .wd30{ width:20px !important}

#barArea{ border-bottom:none}
#barArea .center{ width:100% !important;}
#barArea .center a{ width:100% !important; float:none; border-right:none; border-left:none !important; border-bottom:1px solid #d9d9d9}
#barArea .center a .txt{ font-size:11px; letter-spacing:-1px}

section{ padding:50px 0; box-sizing:border-box}
section .center{ width:100% !important}
section h1 .moreBtn{ padding-top:5px}
#bestDesign, #premium, #only .title, #product, #collabo, #bottomArea{ padding-left:25px; padding-right:25px}
#bestDesign ul li{ width:100% !important; height:auto !important; float:none}
#bestDesign ul li:last-child{ margin-top:20px}
#bestDesign ul li > img{ width:100%}

#premium .service .cont .txt01{ font-size:14px}
#premium .service .cont{ width:50%;}
#premium .service .cont .txt02, #premium .service .cont .txt03{ font-size:10px; letter-spacing:-1px}

#only ul li{ height:auto !important; width:100%}
#only ul li:first-child{ margin-right:0}
#only .bx-wrapper{ margin-bottom:25px !important}
#only .bx-wrapper img{ width:100%}
#only .bx-wrapper .bx-viewport{ height:auto !important}
#only .bxslider li{background-image:none !important; height:auto !important}
#only ul li a img{ width:100%}


#product ul li{ margin-right:8%; width:46%;}
#product ul li .imgBox{ width:100% !important; height:auto !important}
#product ul li .imgBox img{ width:100%}
#product ul li:nth-child(2), #product ul li:nth-child(6), #product ul li:nth-child(10), #product ul li:nth-child(14),
#product ul li:nth-child(18), #product ul li:nth-child(20){ margin-right:0 !important}
#product ul li:nth-child(5), #product ul li:nth-child(6), #product ul li:nth-child(7), #product ul li:nth-child(8),
#product ul li:nth-child(9), #product ul li:nth-child(10), #product ul li:nth-child(11), #product ul li:nth-child(12){ display:none !important}


#middleArea img{ width:80%}
#collabo ul li{ margin:28px !important}
#bottomArea ul li{ width:100% !important; float:none; margin-top:25px}
#bottomArea ul li .bannerBox{ width:100% !important; height:auto !important}
#bottomArea ul li .bannerBox img{ width:100%}

footer{ padding:30px 25px}
footer .center{ width:100% !important}
footer .call{ margin-bottom:20px}
footer .txtArea02{ margin:20px 0 30px}
footer .txtArea02 img{ height:1px}
footer .sns{ width:100%; text-align:center}
footer .sns a{ display:inline-block; width:22%; margin:0 6px}
footer .sns a:first-child{ margin-left:0;}
footer .sns a:last-child{ margin-right:0;}
footer .sns a img{ width:100%}
footer .txt02, footer ul li .txt03{ padding:10px 0}
}