/*************************************************************************************************

        기본제공된 CSS를 추가 / 수정 

    *************************************************************************************************/

    @charset "utf-8";

    /* 멀티배너 위치 조절 */
    .ec-multi-banner { margin:40px 0 -40px; }

    /* 타이틀 */
    #titleArea {
        position: relative;
        border-bottom: 1px solid rgba(0,0,0,0.09) !important;
        background-color: #fff !important;
    }
    #titleArea h2 {
        padding: 0 61px !important;
        line-height: 50px !important;
        font-size: 18px !important;
        color: #000 !important;
        font-weight: 200 !important;
        letter-spacing: 0.03em !important;
        text-align: center !important;
        border:0 !important;
    }
    #titleArea span {
        top:0 !important;
        left:0 !important;
    }
    #titleArea span a {
        display:block !important;
        width:50px !important;
        height:37px !important;
        padding:13px 0 0 !important;
        text-align:center !important;
    }
    #titleArea span a img {
        content:url("/design/joylife/m/_wg/img/btn_arrow_left_27_b.gif") !important; width:16px !important; height:24px !important;
    }


    /* 게시판 타이틀 이미지 */
    .xans-board-listpackage  .imgArea img { width:100% !important; }

    /* 회사소개 설명 이미지 가득차게 */
    .xans-mall-company .info .desc img { width:100% !important; }

    /* 마이쇼핑 컬러 */
    .xans-myshop-asyncbenefit .info .memberInfo .name { color:#333 !important; }
    .xans-myshop-asyncbankbook li a { color:#333 !important; }

    .xans-myshop-orderstate { border:1px solid #d5d5d5; }
    .xans-myshop-orderstate .desc em { color:#333 !important; }
    .xans-myshop-orderstate .order .count { font-weight:200; color:#333 !important; }
    .xans-myshop-orderstate .cs .count { color:#333 !important; }

    .xans-myshop-main li a:after { top:14px !important; right:5px; background:url("/design/joylife/m/_wg/img/btn_arrow_right_20_b.gif") no-repeat; background-size:12px 16px !important; }
    .xans-myshop-main li .count { color:#888 !important; }



    /* detail.css */
    #start { display:block; position:relative; top:-55px; width:0; height:0; }
    .xans-product-detail { margin: 20px 0 0; }

    /* detail.css > SNS 아이콘 */
    .snsLink { margin:0 2% 15px !important; text-align:center !important; }
    .snsLink li { display:inline-block; vertical-align:top; }
    .snsLink img { width:40px !important; height:40px !important; margin:0 5px 0 0; }

    /* detail.css > SNS 아이콘 > 카카오추가 */
    .xans-kakaolink-mobile { text-align:right; }
    .xans-kakaolink-mobile .kakaolink_button:first-child { margin:0 5px 0 0;}
    .xans-kakaolink-mobile .kakaolink_button {display:inline-block; position:relative; width:40px; height:40px; vertical-align:top; }
    .xans-kakaolink-mobile .kakaolink_button a { display:block; position:absolute; left:0; bottom:0; width:40px; height:40px; background-image:url("/design/joylife/m/_wg/img/sfix_btn.jpg"); background-repeat:no-repeat; font-size:0; line-height:0; background-size :80px 40px;}
    .xans-kakaolink-mobile .kakaolink_button a.talk { background-position:0 0; }
    .xans-kakaolink-mobile .kakaolink_button a.story { background-position:-40px 0; }
    .xans-kakaolink-mobile .kakaolink_button strong { position:absolute; right:0; top:0; min-width:16px; height:16px; padding:2px; background:#4c89df; box-shadow:0 1px 3px #000; border:2px solid #fff; border-radius:15px; font-size:12px; font-family:Verdana, sans-serif; color:#fff; text-shadow:0 -1px 1px #333; line-height:16px; text-align:center; letter-spacing:-1px; }

    /* 갤러리게시판 읽기 이미지 100% */
    .xans-board-read .boardView .content img { width:100%!important; height:100%!important; }




/** /layout/basic/css/button.css **/

    /* 영역&공통 */
    .btnArea {
        max-width:320px; margin:10px auto; text-align:center; font-size:0; line-height:0; letter-spacing:-4px;
        -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; vertical-align:top;
    }
    .btnArea:after { content:""; display:block; clear:both; }
    .btnArea > a:first-child,
    .btnArea > button:first-child { margin-left:0; }
    .btnArea > a,
    .btnArea > span,
    .btnArea > button {
        position:relative; display:inline-block; letter-spacing:0; text-align:center; cursor:pointer; font-family:"맑은 고딕",Malgun Gothic,"돋움",Dotum; font-weight:normal;
        border-radius:2px;
        -moz-box-sizing:border-box; box-sizing:border-box;
    }
    .btnIcon { max-width:12px; max-height:12px; background-size:100% 100%; }
    
        /* 주요 버튼 디자인 */
        .btnArea .btnSubmit { height:36px; line-height:39px; color:#fff; border:1px solid #333; background:#333; }
        .btnArea .btnEm { height:36px; line-height:39px; border:1px solid #ddd; background:#fff; }
        .btnArea .soldout { cursor:default; }
    
        /* 기본 버튼 디자인 */
        .btnNormal, .btnStrong, .btnBasic {
            display:inline-block; height:28px; line-height:28px; margin:0; padding:0 10px;
            cursor:pointer; vertical-align:middle; font-family:Verdana,"맑은 고딕",Malgun Gothic,"돋움",Dotum; font-size:12px; font-weight:400; border:0;
            border-radius:2px;
            -moz-box-sizing:border-box; box-sizing:border-box;
        }
        .btnNormal { color:#1b1b1b; border:1px solid #bcbcbc; background:#fff; }
        .btnStrong { color:#fff; border:1px solid #333; background:#333; }
        .btnBasic { color:#1b1b1b; border:1px solid #bcbcbc; background:#f0f0f0; }
        a.mini, button.mini { height:26px; line-height:24px; font-size:11px; }
    
        /* type1 */
        .btnArea.type1 > a,
        .btnArea.type1 > button { width:100%; margin:0; height:38px; margin:0; font-size:13px; line-height:38px; }
    
        /* type2 */
        .btnArea.type2 { padding:0 3px; }
        .btnArea.type2 > a,
        .btnArea.type2 > button { width:50%; height:36px; margin:0; font-size:13px; line-height:36px; }
        .btnArea.type2 > a:nth-child(1),
        .btnArea.type2 > button:nth-child(1) { left:-3px; }
        .btnArea.type2 > a:nth-child(2),
        .btnArea.type2 > button:nth-child(2) { right:-3px; }
    
        /* type3 */
        .btnArea.type3 { padding:0 6px; }
        .btnArea.type3 > a,
        .btnArea.type3 > button { width:33.333%; margin:0; height:32px; margin:0; font-size:13px; line-height:32px; }
        .btnArea.type3 > a:nth-child(1),
        .btnArea.type3 > button:nth-child(1) { left:-6px; }
        .btnArea.type3 > a:nth-child(3),
        .btnArea.type3 > button:nth-child(3) { right:-6px; }
    
        /* type4 */
        .btnArea.type4 { padding:0 6px; }
        .btnArea.type4 > a,
        .btnArea.type4 > button { width:25%; height:28px; margin:0; font-size:11px; line-height:25px; font-weight:normal; }
        .btnArea.type4 > a:nth-child(1),
        .btnArea.type4 > button:nth-child(1) { left:-5px; }
        .btnArea.type4 > a:nth-child(2),
        .btnArea.type4 > button:nth-child(2) { left:5px; }
        .btnArea.type4 > a:nth-child(3),
        .btnArea.type4 > button:nth-child(3) { right:-15px; }
        .btnArea.type4 > a:nth-child(4),
        .btnArea.type4 > button:nth-child(4) { right:-25px; }
    
        /* typeFull */
        .btnArea.typeFull { max-width:100%; padding:0 6px; }
    
        /* 좌우 영역으로 나눠지는 디자인 */
        .btnArea .gLeft { float:left; }
        .btnArea .gLeft a, .btnArea .gLeft button { margin:0 0 0 5px; }
        .btnArea .gLeft a:first-child, .btnArea .gLeft button:first-child { margin-left:0; }
        .btnArea .gRight { float:right; }
        .btnArea .gRight a, .btnArea .gRight button { margin:0 5px 0 0; }
        .btnArea .gRight a:last-child, .btnArea .gRight button:last-child { margin-right:0; }
    
    /* 가운데 영역 */
    .gCenter { text-align:center; }
    .gCenter a, .gCenter button { margin:0 0 0 2px; }
    .gCenter a:first-child { margin-left:0; }
    
    /* 팝업에서 grid를 사용하지 않는 경우 */
    #popup .btnArea > a:nth-child(2),
    #popup .btnArea > button:nth-child(2) { margin-left:3px; }






/** 상품리스트 **/
    .ec-base-product { position:relative; margin:0 0 50px; }
    .ec-base-product h3 { position:relative; margin:0 auto 30px; text-align:center; font-size:17px; color:#111; }
    .ec-base-product h3 span { display:block; margin:0 0 3px; text-align:center; font-size:13px; font-weight:400; color:#888; }
    .ec-base-product h4 { display:blcok; padding:0 0 10px; margin:0 10px 20px; border-bottom:1px solid #555; font-size:15px; text-align:center; }

    .ec-base-product img { max-width:100%; }
    .ec-base-product > ul { padding:15px 0 0; }
    .ec-base-product li { vertical-align:top; }


    /** 일반 진열 **/
    .ec-base-product [class*="grid"] { display:table; table-layout:fixed; width:100%; box-sizing:border-box; padding:0 5px; font-size:0; line-height:0; }
    .ec-base-product [class*="grid"] > li { display:inline-block; margin:0 0 30px; vertical-align:top; text-align:center; font-size:12px; line-height:1.4; }

    .ec-base-product .thumbnail { position:relative; margin:0 7px 10px; }
    .ec-base-product .thumbnail a { display:block; }
    .ec-base-product .thumbnail a img { display:block; width:100%; vertical-align:top; }
    .ec-base-product .description { width:88%; min-height:10px; margin:0 auto; line-height:1em; text-align:left; }
    .ec-base-product .description > ul > li { margin:0 0 5px; }
    .ec-base-product .description .name { line-height:1.2em; word-wrap:break-word; margin:0 0 5px; }
    .ec-base-product .description .line { display:block; height:0px; line-height:0; margin:0 0 10px; border-top:1px solid #eee; }
    .ec-base-product .description .icon { margin:5px 0; }
    .ec-base-product .description .icon img { width:auto; max-height:11px; margin:0 4px 0 0; }

    /* 컬러칩 */
    .ec-base-product .description .color { overflow:hidden; width:100%; margin:0 0 10px !important; font-size:0; }
    .ec-base-product .description .chips { display:inline-block; width:10px; height:5px; margin:0 2px 0 2px; padding:0; vertical-align:top; }
    .ec-base-product .description .chips:first-child { margin:0; }

    /* 버튼 */
    .ec-base-product .list_button { display:block; position:relative; margin:0; padding:0; font-size:0; line-height:0; }
    .ec-base-product .list_button span { float:left; }
    .ec-base-product .list_button img { width:25px; margin:0 3px 0 0; font-size:11px; }
    .ec-base-product .list_button .zoom img { content:url('/design/joylife/m/_wg/img/_btn/list_blank.png'); }
    .ec-base-product .list_button .basket img { content:url('/design/joylife/m/_wg/img/_btn/list_basket.png'); }
    .ec-base-product .list_button .option img { content:url('/design/joylife/m/_wg/img/_btn/list_option.png'); }
    .ec-base-product .list_button .wish img { content:url('/design/joylife/m/_wg/img/_btn/list_wish_off.png'); }
    .ec-base-product .list_button.selected .wish img { content:url('/design/joylife/m/_wg/img/_btn/list_wish_on.png'); }

    /* 꾸미기 아이콘 */
    .ec-base-product .thumbnail .prdIcon { position:absolute; z-index:10; top:2%; left:-4%; width:50px; height:50px; background-repeat:no-repeat; background-size:100% auto; }



    /** 갤러리 진열 **/
    .ec-base-product.gallery [class*="grid"] { width:92%; margin:0 auto; padding:0; }
    .ec-base-product.gallery [class*="grid"] > li { margin:0 0 20px; padding:0 0 10px; border:1px solid #eee; }

    .ec-base-product.gallery .thumbnail { margin:0 0 10px; }
    .ec-base-product.gallery .description { display:block; padding:10px; text-align:left; }
    .ec-base-product.gallery .description .line { margin:0 0 10px; }

    /* 꾸미기 아이콘 */
    .ec-base-product.gallery .grid1 .thumbnail .prdIcon { top:2%; left:-2.6%; background-size:20% auto; }

    /* 할인율 아이콘 */
    .ec-base-product.gallery .discount_rate.ico01 { top:-4px; right:-4px; width:50px; height:50px; line-height:50px; font-size:18px; }
    .ec-base-product.gallery .discount_rate.ico01 span { margin-left:1px; font-size:13px; }



    /* 할인기간 레이어 */
    .ec-base-product .layerDiscountPeriod { display:none; position:absolute; z-index:100; left:0; width:100%; padding:11px 7px; box-sizing:border-box; }
    .ec-base-product .layerDiscountPeriod .inner { border:1px solid #353535; background:#f1f1f1; border-radius:4px; }
    .ec-base-product .layerDiscountPeriod .inner h3 { padding:10px 14px; font-size:14px; background-color:#353535; color:#fff; }
    .ec-base-product .layerDiscountPeriod .inner .timeleft { padding:14px; color:#508bed; font-size:13px; font-weight:bold; text-align:center; }
    .ec-base-product .layerDiscountPeriod ul { margin:0 7px 14px; padding:0; border:1px solid #d5d5d5; background:#fff; }
    .ec-base-product .layerDiscountPeriod ul li { position:relative; padding:14px 13px 14px 100px; border-top:1px solid #ececec; color:#353535; }
    .ec-base-product .layerDiscountPeriod ul li:first-child { border-top:0; }
    .ec-base-product .layerDiscountPeriod ul li span { position:absolute; top:14px; left:13px; color:#757575; }
    .ec-base-product .layerDiscountPeriod .btnClose { position:absolute; top:8px; right:4px; display:block; width:40px; height:40px; text-indent:-9999px; font-size:0; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_close_white.png") center center no-repeat; background-size:50% 50%; }
    
    /* 썸네일 아이콘 위치 */
    .ec-product-bgLT { background-position:left top; }
    .ec-product-bgLC { background-position:left center; }
    .ec-product-bgLB { background-position:left bottom; }
    .ec-product-bgRT { background-position:right top; }
    .ec-product-bgRC { background-position:right center; }
    .ec-product-bgRB { background-position:right bottom; }
    .ec-product-bgCT { background-position:center top; }
    .ec-product-bgCC { background-position:center center; }
    .ec-product-bgCB { background-position:center bottom; }
     
    /* grid */
    .ec-base-product .grid1 > li { width:100%; }
    .ec-base-product .grid2 > li { width:50%; }
    .ec-base-product .grid3 > li { width:33.333%; }
    .ec-base-product .grid4 > li { width:25%; }
    .ec-base-product .grid5 > li { width:20%; }
     
    @media all and (max-width:480px) {
      .ec-base-product .prdList.grid1 > li { width:100%; }
      .ec-base-product .prdList.grid2 > li { width:50%; }
      .ec-base-product .prdList.grid3 > li { width:33.333%; }
      .ec-base-product .prdList.grid4 > li { width:25%; }
      .ec-base-product .prdList.grid5 > li { width:20%; }
     
      .ec-base-product .grid1 li .name { font-size:15px; }
      .ec-base-product .grid2 li .name,
      .ec-base-product .grid3 li .name { font-size:13px; }
      .ec-base-product .grid4 li .name { font-size:11px; }
    }
     
    @media all and (min-width:481px) and (max-width:767px) {
      .ec-base-product .prdList.grid1 > li { width:45%; margin:0 1.5% 30px 2.5%; }
      .ec-base-product .prdList.grid2 > li { width:33.333%; }
      .ec-base-product .prdList.grid3 > li,
      .ec-base-product .prdList.grid4 > li,
      .ec-base-product .prdList.grid5 > li { width:25%; }
     
      .ec-base-product [class*="grid"] li .name { font-size:13px; }
    }
     
    @media all and (min-width:768px) {
      .ec-base-product .prdList.grid1 > li { width:45%; margin:0 1.5% 30px 2.5%; }
      .ec-base-product .prdList.grid2 > li { width:25%; }
      .ec-base-product .prdList.grid3 > li,
      .ec-base-product .prdList.grid4 > li,
      .ec-base-product .prdList.grid5 > li { width:20%; }
     
      .ec-base-product [class*="grid"] li .name { font-size:15px; }
    }
   

    /* 상품분류 - 추천상품 */
    .xans-product-listrecommend { margin:0 0 20px; }
    .xans-product-listrecommend h2 { position:relative; text-align:center; }
    .xans-product-listrecommend h2 strong { color:#dd2537; }
    .xans-product-listrecommend h2 span { display:inline-block; margin:15px 0; text-align:center; font-size:15px; font-weight:400; color:#333; letter-spacing:0.08em; }
    .ec-base-product.-best ul > li > span { color:#555 !important; }








/***     /layout/basic/css/paginate.css ( 페이지네이트 )     ***/

    .paginate { text-align:center; }

    /* 더보기 */
    .paginate.typeMoreview { margin:0 auto; width:100%; }
    .paginate.typeMoreview a { display:block; padding:12px 0; border-top:1px solid #f1f1f1; border-bottom:1px solid #d5d5d5; color:#757575; font-weight:bold; background:#f5f5f5; }
    .paginate.typeMoreview span.icoMore { display:inline-block; margin:0 0 0 8px; width:13px; height:8px; font-size:0; line-height:0; vertical-align:baseline; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_more.png") no-repeat 0 50%; background-size:13px auto; }

    /* Swipe */
    .paginate.typeSwipe { color:#555; }
    .paginate.typeSwipe button.circle { margin:0 2px; width:15px; height:1px; background:#ccc; border:0; cursor:pointer; transition:all .3s ease; -webkit-transition:all .3s ease; }
    .paginate.typeSwipe button.circle.selected { width:28px; background:#000; }
    .paginate.typeSwipe span { color:#fff; font-size:0; line-height:0; }
    .paginate.typeSwipe button.prev,
    .paginate.typeSwipe button.next { width:31px; font-size:15px; line-height:1.2em; border:0; cursor:pointer; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_prev.png") no-repeat 50% 50%; background-size:7px auto; }
    .paginate.typeSwipe button.next { background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_next.png") no-repeat 50% 50%; background-size:7px auto; }

    /* 이전, 다음페이지보기(총페이지노출형) */
    .paginate.typeTotal { color:#696969; }
    .paginate.typeTotal > span { margin:0 8px;font-weight:bold; }
    .paginate.typeTotal p { display:inline-block;vertical-align:middle; }
    .paginate.typeTotal .prev,
    .paginate.typeTotal .next { width:7px; height:13px; font-size:15px; line-height:1.2em; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_prev.png") no-repeat 50% 50%; background-size:7px auto; }
    .paginate.typeTotal .next { background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/btn_next.png") no-repeat 50% 50%; background-size:7px auto; }
    .paginate.typeTotal p span { overflow:hidden; display:block; width:29px; text-indent:-999px; }
    .paginate.typeTotal strong { color:#508bed; }

    /* 이전, 다음페이지보기(리스트형) */
    .paginate.typeList { margin:0 0 20px; padding:7px 0; color:#1b1b1b; }
    .paginate.typeList ol { margin:0 8px; }
    .paginate.typeList ol, .paginate.typeList ol li, .paginate.typeList p, .paginate.typeList p a, .paginate.typeList ol li a { display:inline-block; vertical-align:middle; }
    .paginate.typeList ol li { margin:0 1px 0; list-style:none; }
    .paginate.typeList ol li a { width:35px; height:35px; line-height:38px; border-radius:3px; font-size:1.2em; color:#666; }
    .paginate.typeList ol li .other, .paginate.typeList p, .paginate.typeList ol li a  { border:1px solid #ddd; }
    .paginate.typeList ol li .this { border:1px solid #111; }
    .paginate.typeList .this { color:#111; font-weight:bold; }

    .paginate.typeList p { overflow:hidden; width:35px; height:35px; line-height:35px; border:1px solid #ddd; border-radius:3px; background:url("/design/joylife/m/_wg/img/bg_paging.png") 50% 0 no-repeat; background-size:22px; }
    .paginate.typeList .first { background-position:50% 9px; }
    .paginate.typeList .prev { background-position:50% -20px; }
    .paginate.typeList .next { background-position:50% -49px; }
    .paginate.typeList .last { background-position:50% -78px; }

    .paginate.typeList p span { overflow:hidden; display:block; width:29px; text-indent:-999px; }
    .paginate.typeList p a { padding:7px 0 2px; width:31px; height:19px; color:#fff; }






/***     optionPreview.css ( 옵션미리보기창 )     ***/

    .xans-product-optionpreview { display:inline; }
    .xans-product-optionpreview .prdOption { position:absolute; z-index:10; left:-12px !important; top:30px; z-index:10; width:160px !important; margin:0 !important; }
    .xans-product-optionpreview .prdOption::before { content: "옵션 미리보기"; position:absolute; z-index:30; top:20px; left:12px; font-size:13px; font-weight:bold; }
    .xans-product-optionpreview .prdOption .inner { padding:35px 10px 10px !important; border:1px solid #565960; color:#2e2e2e; background:#fff; }
    .xans-product-optionpreview .prdOption li { padding:10px 0 3px 3px !important; border-top:1px solid #eee !important; text-align:left !important; line-height:17px !important; font-size:11px !important; letter-spacing:-0.05em; }
    .xans-product-optionpreview .prdOption li:first-child { border:0; }
    .xans-product-optionpreview .prdOption .close { position:absolute; right:10px !important; top:5px !important; width:25px; height:25px; background:url('/design/joylife/m/_wg/img/btn_x.png') no-repeat; background-size:25px 25px; }
    .xans-product-optionpreview .prdOption .close img { width:25px; height:25px; opacity:0; }
    .xans-product-optionpreview .prdOption .ico { display:none; position:absolute; left:50%; top:-8px; width:9px; height:6px; margin:0 0 0 -5px; }




/***     /css/module/product/review.css ( 상세페이지 > 상품후기 일반첨부이미지 )    ***/

    .xans-product-review .contentView .attach img { margin:0 0 10px !important; border:none !important; }
    .xans-product-review .contentView .view p img { max-width:100%; margin:0 0 10px; font-size:0; line-height:0; }


/***     /css/module/product/qna.css ( 상세페이지 > 상품문의 일반첨부이미지 )    ***/

    .xans-product-qna .contentView .attach img { margin:0 0 10px !important; border:none !important; }
    .xans-product-qna .contentView .view p img { max-width:100%; margin:0 0 10px; font-size:0; line-height:0; }