/* 상품리스트 */
.pl_cardCode {
    color: #666666;
    text-align: center;
    font-size: 14px;
    padding-top: 6px;
    padding-bottom: 10px;
}  /* font-weight:bold; */
.pl_cnt_price, .pl_cnt_price > span {
    font-size: 12px;
    color: #aaaaaa;
}
.pl_sp_btn {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    height: 32px;
    margin-top: 18px;
    margin-bottom: 35px;
}
.pl-no-data { 
    width: 100%;
    height: 70px;
    color: #333333;
    font-size: 13px;
    line-height: 70px;
    text-align: center;
}

/* 상품 */
.banner_mcard {
    line-height:0;
}
#title_img, .title_img {
    line-height: 0;
}
.product_detail_notice > tbody > tr > td {
    color: #888888;
    line-height: 18px;
}
.product_row {
    width: 100%;
    height: 45px;    
    border-bottom: 1px solid #e7e7e7; 
    border-top: 1px solid #e7e7e7; 
    clear: both;
    font-size: 0; 
    line-height: 0;
    position: relative;
}
.product_card  {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 50%;
    background-color:#ffffff;
    border-bottom:1px solid #e7e7e7;
    border-right:<?=$border_r?>px solid #e7e7e7;
    float: left;   
    text-align:center;
}
/* 상품 상세보기 */
.product_view_name {
    clear: both;
    color: #666666;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 25px;
    padding-top: 35px;
    text-align: left;
}
#product_view_price > tbody > tr > th {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    width: 74px;
    height: 47px;
    color: #333333;
    border-bottom: 1px solid #dddddd; 
    font-size: 13px;
    font-weight: normal;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: left;
}
#product_view_price > tbody > tr > td {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
    height:47px; 
    border-bottom: 1px solid #dddddd;
    color:#333333;
    font-size:14px;
    padding-top:5px;
    padding-bottom:5px;
    text-align:left;
}
.product_detail_info  > tbody > tr > td:last-child {
    color: #666666;
}
.product_view_notice_title {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	color: #333333;
	font-size: 15px;
	line-height: 14px;
	margin-bottom: 13px; 
	margin-top: 22px;
	padding-left: 27px;
	padding-top: 4px;
	position: relative;
}
.product_view_notice_memo {
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	border-bottom: 1px solid #dddddd;
	color: #666666;
	font-size: 12px;
	line-height: 18px;
	padding-bottom: 22px;
}
.product_view_notice_icon {
    position: absolute;
    left: 0px;
    top: 0px;
}


/*
        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: 335px; margin: auto; }
input[name=unm] { width: 100%; }


/* CSS Document */

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

html, body{
    font-family: 'Spoqa Han Sans', sans-serif;
    /*
    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 */

/* 메인 배너 하단 바 */
#barArea {
    width:100%;
    border: 1px solid #e8e8e8;
    border-left: 0;
    border-right: 0;
}
#barArea .center { width:1001px; margin:0 auto; overflow:hidden; }
/*#barArea .center:after{ content:""; display: block; clear:both}*/
#barArea .center a { 
   display: block;
   width: 100%;
   height: 41px;
   line-height: 39px;
   box-sizing:border-box;
}
#barArea .center a:after { content:""; display: block; clear:both}
#barArea .center a .txt { display: block; float: left; font-size: 12px; font-weight: 300; color: #333333; margin-left:10px; }
#barArea .center a .img01 { display: block; float: left; height: 13px; padding-top: 13px; }
#barArea .center a .img02 { display: block; float: right; height: 5px; padding-top: 17px; }

/* 섹션 공통 */
section { padding:35px 0; }
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:12px; font-weight:bold; color:#555 }
section img {
    max-width: 100%;
}

/* 베스트 디자인 */


/* 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:12px; 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:12px; 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}

/* 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:12px; 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:12px; color:#fff; text-align:center}
#bottomArea ul li .btn01{ position:absolute; display: block; width:50%; left:0; bottom:0; z-index:10; font-size:12px; 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:12px; color:#fff; text-align:center; padding:6% 0;}

/* footer */

.main_section_div {
    width: 100%;
    height: 10px;
    background-color: #f1f1f1;
}
/* 고객지원 */

.main_cs_block_top {
    border-bottom: 1px solid #dddddd;
    padding-top: 25px;
    padding-bottom: 25px;
}
.cs_row_area {
    padding: 30px 15px;
}

.main_section_title1 {
    position: relative;
}
.main_section_title1:before {
    content: '';
    width: 30px;
    height: 13px;
    background-image: url(/card/img/icon_long_right_arrow.png);
    background-size: 30px;
    position: absolute;
    right: 0;
    top: 7px;
}
.main_section_area div {
    font-family: 'Spoqa Han Sans';
}
.main_section_title {
    padding-bottom: 30px;
    border-bottom: 1px solid #dddddd;
}
.main_section_title > a > div, .main_section_title > div  {
    font-weight: 400;
    font-size: 18px;
}
.cs_row_area .cs_number {
    font-family: 'Spoqa Han Sans';
    font-size: 20px;
    font-weight: 300;
    position: relative;
}
.cs_row_area .cs_number:before {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #333333;
    position: absolute;
    bottom: 3px;
    left: 0;
}

.cs_hour_text {
    margin-top: 10px;
}
.cs_hour_text > div {
    font-size: 12px;
    color: #333333;
}
.main_cs_block_bottom > div {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dddddd;
}

.main_cs_block_link, .notice_title_txt, .footer_info_block_link {
    font-size: 12px;
    position: relative;
    padding-left: 10px;
}
.main_cs_block_link:before, .notice_title_txt:before, .footer_info_block_link:before {
    content: '';
    width: 3px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 1px;
    margin-top: 1px;
    transform: translateY(-50%) rotate(45deg);
}
.main_cs_block_link.color_cs {
    color: #666666;
}
.main_cs_block_link:before {
    background-color: #666666;
}
.main_cs_block_link.color_qna {
    color: #ff9392;
}

.main_cs_block_link.color_faq {
    color: #77bda7;
}

.main_cs_block_link.color_notice {
    color: #777777;
    font-weight: normal;
}
.footer_info_area {
    background-color: #21242d;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
}
.footer_info_block {
    padding-top: 38px;
    margin-bottom: 30px;
}
.footer_info_block > div {
    border-bottom: 1px solid #565961;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: normal;
}
.footer_info_block > div:first-child {
    border-top: 1px solid #565961;
}
.footer_info_block_link {
    color: #dddddd;
}
.footer_info_block_link:before {
    background-color: #dddddd;
}
.footer_info_block_sns {
    padding-left: 5px;
    padding-right: 5px;
}
.footer_info_block_sns > a {
    margin-right: 7px;
}
.footer_info_block_sns > a:last-of-type {
    margin-right: 0;
}
.footer_info_block_sns > a > img {
    height: 28px;
}
.footer_info_block_company {
    padding-top: 30px;
}
.footer_info_block_company ul > li {
    color: #dddddd;
    font-family: 'Spoqa Han Sans';
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
}

/* 모바일 */
@media (min-width:450px) and (max-width:999px){
    #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:12px;}
    #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){

    #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}
    
    #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}
    
    section { padding: 30px 15px; box-sizing: border-box; }
    
    
    #only ul li{ height:auto !important; width:100%}
    #only ul li:first-child{ margin-right:0}
    #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%}

}