/* BASIC css start */
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

/* 푸터 마진 재조정 */
.footer {
    margin-top:0px !important;
}


.category {
    font-size:0px;
    line-height:0px;
    text-align:center;
/*    border-top:1px solid #ddd; */
}
#line-all{border-top:1px solid #f6e3e7;border-left:1px solid #f6e3e7;}
#line-top{border-top:1px solid #f6e3e7;}

.category a {
    display:inline-block;
    width:33.33%;
    height:35px;
    background:white;
    border-bottom:1px solid #f6e3e7;
    border-right:1px solid #f6e3e7;
    color:#333;
    font-size:13.5px;
    line-height:35px;
    text-align:center;    
    box-sizing:border-box;
    overflow:hidden;
}
.category a.active {
    background:#f6e3e7;
}
.category a:nth-child(3n) {
    border-right:none;	
}
.category a:nth-child(7n) {
    border-left:1px solid #f6e3e7;	
    margin-left:-2px;
    padding-right:2px;
}

/*전체 width값 고정*/
#container{
    overflow-x: hidden;
    overflow-y: visible;
}

/* 상품 리스트 공통 CSS 시작(일부는 각 페이지마다 수정하면 됨.) */
.section {
    padding-bottom:50px;
}
.section .view-mode {
    padding-top:50px;
    font-size:0px;
    line-height:0px;
    text-align:center;
}
.section .view-mode a {
    display:inline-block;
    width:20px;
    height:20px;
    margin:0px 7.5px;
    text-indent:-999em;
    overflow:hidden;
}
.section .view-mode a.one {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode1-off.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.one.active {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode1-on.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.two {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode2-off.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.two.active {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode2-on.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.three {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode3-off.jpg') no-repeat center center;
    background-size:20px 20px;
}
.section .view-mode a.three.active {
    background:url('/design/ocato/renewal/mobile/img/common/view-mode3-on.jpg') no-repeat center center;
    background-size:20px 20px;
}

.section .section-title {
    margin-top:20px;
    margin-bottom:25px;
    color:#444444;
    font-size:22px;
    font-weight:bold;
    line-height:22px;
    text-align:center;
}

.section .items {
}
.section .items:after {
    display:block;
    clear:both;
    content:"";
}

.section .more {
    text-align:center;
}
.section .more a {
    display:inline-block;
}
.section .more a button {
    display:inline-block;
    width:140px;
    height:40px;
    background:white;
    border:1px solid #333;
    color:#333;
    font-size:14px;
    line-height:38px;
    letter-spacing:-0.5px;
    box-sizing:border-box;
}

/* 1단 보기 */
.section .list-wrap.one li {
    display:block;
    margin-bottom:30px;
    box-sizing:border-box;
}
.section .list-wrap.one li a {
    display:inline-block;
    width:100%;
}
.section .list-wrap.one li a .img {
}
.section .list-wrap.one li a .img img {
    width:100%;
    height:auto;
    max-width:auto;
}
.section .list-wrap.one li a .text {
    display:none;
}
.section .list-wrap.one li a .text.text-one {
    display:block;
    padding:0px 0px 0px 10px;
}
.section .list-wrap.one li a .text .name {
    display: inline-block;
    width: 100%;
    margin-top:5px;
    color:#333333;
    font-size:17px;
    line-height:20px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.section .list-wrap.one li a .text .subname {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #e9e9e9;
    margin-top: 5px;
    padding-bottom: 15px;
    color: #aaa;
    font-size: 12px;
    line-height: 15px;
    text-align: left;
    letter-spacing: -0.5px;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    /* display: -webkit-box; */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.section .list-wrap.one li a .text .dis_price_box {
    margin-top: 10px;
    padding-bottom: 10px;
    /* border-bottom: 1px solid #dddddd; */
    font-size: 0px;
    line-height: 0px;
}
.section .list-wrap.one li a .text .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.section .list-wrap.one li a .text .dis_price_box .dis_percent {
    display:inline-block;
    margin-right:15px;
    vertical-align:middle;
    float:right;
}
.section .list-wrap.one li a .text .dis_price_box .dis_percent span {
    color:#333333;
    font-size:20px;
    font-weight:300;
    line-height:25px;
    letter-spacing:-0.5px;
}
.section .list-wrap.one li a .text .dis_price_box .price-box {
    display:inline-block;
    vertical-align:bottom;
    width:300px;
}
.section .list-wrap.one li a .text .dis_price_box .price-box .del-price {
    display:inline-block;
    color:#888888;
    font-size:15px;
    line-height:30px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
    vertical-align:middle;
    font-weight: 300;
}
.section .list-wrap.one li a .text .dis_price_box .price-box .normal-price {
    display:inline-block;
    margin-right:15px;
    color:#333333;
    font-size:18px !important;
    font-weight:400;
    line-height:30px;
    letter-spacing:-0.5px;
    vertical-align:middle;
}

.section .list-wrap.one li a .text .dis_price_box .time {
    float:right;
    margin-top:6px;
    padding:0px 6px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:12px;
    line-height:15px;
    text-align:center;
    box-sizing:border-box;
}

.section .list-wrap.one li a .text .option_preview {
    margin-top:10px;
    font-size:0px;
}
.section .list-wrap.one li a .text .option_preview span {
    display:inline-block;
    width:10px;
    height:10px;
    /*margin:3px 0px;*/
    margin-right:2px;
    border:1px solid #ddd;
    box-sizing:border-box;
}
.section .list-wrap.one li a .text .option_preview .size {
    float:right;
    color:#888;
    font-size:12px;
    line-height:12px;
    letter-spacing:-0.5px;
}
.section .list-wrap.one li a .text .size {
    float:left;
    color:#888;
    /*color:#fa71a9;*/
    font-size:13px;
    /*font-weight:bold;*/
    margin-top:10px;
    margin-bottom:5px;
    line-height:12px;
    letter-spacing:-0.5px;
}

/*스타일코드 영역 시작*/

.section .list-wrap.one li a .style-code{
    /*margin-top: 10px;*/
    /* float: left; */
    font-size: 12px;
    /* letter-spacing: -0.5px; */
    color: #999;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.list_shopping3x .list_shoppingInfo .style-code{
    margin-top: 8px;
    margin-bottom: 5px;
    /* float: left; */
    font-size: 11px;
    /* letter-spacing: -0.5px; */
    color: #999;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*스타일코드 영역 끝*/

/* 2단 보기 */
.section .list-wrap.two li {
    float:left;
    width:50%;
    margin-bottom:30px;
    box-sizing:border-box;
}
.section .list-wrap.two li:nth-child(2n+1) {
    padding-right:2.5px;
}
.section .list-wrap.two li:nth-child(2n) {
    padding-left:2.5px;
}
.section .list-wrap.two li a {
    display:inline-block;
    width:100%;
}
.section .list-wrap.two li a .img {
}
.section .list-wrap.two li a .img img {
    width:100%;
    height:auto;
    max-width:auto;
}
.section .list-wrap.two li a .text {
    display:none;
}
.section .list-wrap.two li a .text.text-two {
    display:block;
    padding:0px 0px 0px 10px;
}
.section .list-wrap.two li a .text .name {
    display: inline-block;
    width: 100%;
    margin-top:5px;
    color:#333333;
    font-size:14px;
    line-height:17px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.section .list-wrap.two li a .text .subname {
    display: inline-block;
    width: 100%;
    border-bottom : 1px solid #e9e9e9;
    margin-top:5px;
    padding-bottom:5px;
    color:#aaa;
    font-size:11px;
    line-height:17px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    /*overflow: hidden; */
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    /*display: -webkit-box; */
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}

/*스타일코드 영역 시작*/

.section .list-wrap.two li a .style-code{
    /*margin-top: 10px;*/
    /* float: left; */
    font-size: 11px;
    /* letter-spacing: -0.5px; */
    color: #999;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*스타일코드 영역 끝*/

.section .list-wrap.two li a .text .dis_price_box {
    /*margin-top:7px;*/
    font-size:0px;
    line-height:0px;
}
.section .list-wrap.two li a .text .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.section .list-wrap.two li a .text .dis_price_box .dis_percent {
    display:inline-block;
    vertical-align:bottom;
    float:right;
    margin-right:5px;
}
.section .list-wrap.two li a .text .dis_price_box .dis_percent span {
    color:#333333;
    font-size:15px;
    font-weight:300;
    line-height:26px;
    letter-spacing:-0.5px;
    
}

.section .list-wrap.two li a .text .dis_price_box .price-box {
    display:inline-block;
    vertical-align:bottom;
    width:120px;
}
.section .list-wrap.two li a .text .dis_price_box .price-box .del-price {
    display:inline-block;
    color:#888888;
    font-size:11px;
    font-weight: 300;
    line-height:26px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
    vertical-align:middle;
    margin-top: 2px;
}
.section .list-wrap.two li a .text .dis_price_box .price-box .normal-price {
    display:inline-block;
    color:#333333;
    font-size:14.5px;
    font-weight:400;
    line-height:26px;
    letter-spacing:-0.5px;
    vertical-align:middle;
    margin-right:8px;
}

.section .list-wrap.two li a .text .dis_price_box .time {
    display:block;
    width:100%;
    line-height:15px;
    margin-top:10px;
    margin-bottom:10px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:12px;
    line-height:15px;
    text-align:center;
    box-sizing:border-box;
}

.section .list-wrap.two li a .text .option_preview {
    font-size:0px;
    margin-top:5px;
}
.section .list-wrap.two li a .text .option_preview span {
    display:inline-block;
    width:10px;
    height:10px;
    /*margin:3px 0px;*/
    margin-right:2px;
    border:1px solid #ddd;
    box-sizing:border-box;
}
.section .list-wrap.two li a .text .option_preview .size {
    float:right;
    color:#888;
    font-size:12px;
    line-height:12px;
    letter-spacing:-0.5px;
}
.section .list-wrap.two li a .text .size {
    float:left;
    color:#888;
    /*color:#fa71a9;*/
    font-size:13px;
    /*font-weight:bold;*/
    margin-top:10px;
    margin-bottom:5px;
    line-height:12px;
    letter-spacing:-0.5px;
}

/* 3단 보기 */
.section .list-wrap.three {
    margin:0px -2.5px;
}
.section .list-wrap.three li {
    float:left;
    width:33.33%;
    padding:0px 2.5px;
    margin-bottom:30px;
    box-sizing:border-box;
}
.section .list-wrap.three li a {
    display:inline-block;
    width:100%;
}
.section .list-wrap.three li a .img {
}
.section .list-wrap.three li a .img img {
    width:100%;
    height:auto;
    max-width:auto;
}
.section .list-wrap.three li a .text {
    display:none;
}
.section .list-wrap.three li a .text.text-three {
    display:block;
    padding:0px 5px;
}
.section .list-wrap.three li a .text .name {
    display: inline-block;
    width: 100%;
    margin-top:5px;
    color:#333333;
    font-size:14px;
    line-height:18px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
.section .list-wrap.three li a .text .subname {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #e9e9e9;
    margin-top: 5px;
    padding-bottom: 5px;
    color: #aaa;
    font-size: 10px;
    line-height: 15px;
    text-align: left;
    letter-spacing: -0.5px;
    white-space: nowrap;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    /* display: -webkit-box; */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*스타일코드 영역 시작*/

.section .list-wrap.three li a .style-code{
    /*margin-top: 5px;*/
    /* float: left; */
    font-size: 11px;
    /* letter-spacing: -0.5px; */
    color: #999;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*스타일코드 영역 끝*/

.section .list-wrap.three li a .text .dis_price_box {
    /*margin-top:7px;*/
    font-size:0px;
    line-height:0px;
}
.section .list-wrap.three li a .text .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.section .list-wrap.three li a .text .dis_price_box .dis_percent {
    display:inline-block;
    vertical-align:bottom;
    float:right;
    margin-right:5px;
}
.section .list-wrap.three li a .text .dis_price_box .dis_percent span {
    color:#333333;
    font-size:12px;
    font-weight:300;
    line-height:18.5px;
    letter-spacing:-0.5px;
    
}

.section .list-wrap.three li a .text .dis_price_box .price-box {
    display:inline-block;
    vertical-align:bottom;
    /*width:100px;*/
}
.section .list-wrap.three li a .text .dis_price_box .price-box .del-price {
    display:inline-block;
    color:#888888;
    font-size:10px;
    font-weight: 300;
    line-height:18.5px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
    vertical-align:middle;
}
.section .list-wrap.three li a .text .dis_price_box .price-box .normal-price {
    display:inline-block;
    color:#333333;
    font-size:13px;
    font-weight:400;
    line-height:18.5px;
    letter-spacing:-0.5px;
    vertical-align:middle;
    margin-right:6px;
}



.section .list-wrap.three li a .text .dis_price_box .time {
    display:block;
    width:100%;
    height:15px;
    margin-top:5px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:11px;
    line-height:13px;
    text-align:center;
    overflow:hidden;
    box-sizing:border-box;
}

.section .list-wrap.three li a .text .option_preview {
    padding-top:5px;
    font-size:0px;
}
.section .list-wrap.three li a .text .option_preview span {
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:2px;
    border:1px solid #ddd;
    box-sizing:border-box;
}
.section .list-wrap.three li a .text .option_preview .size {
    margin-top:8px;
    color:#888;
    font-size:12px;
    line-height:37px;
    letter-spacing:-0.5px;
}
.section .list-wrap.three li a .text .size {
    float:left;
    color:#888;
    /*color:#fa71a9;*/
    font-size:12px;
    /*font-weight:bold;*/
    margin-top:5px;
    line-height:12px;
    letter-spacing:-0.5px;
}

/* 상품 리스트 공통 CSS 끝 */
.total-sort{display:relative;padding:0px 10px;height:37px;line-height:37px;margin:30px 0px 20px 0px;}
.total{font-size:14px;color:#333333;float:left;}
.total strong{color:#e99999;font-weight:bold;}
.total-sort select{float:right;border:1px solid #ccc;width:130px;padding:0px 15px;font-size:12px;height:37px;line-height:37px;}


.best-wrap{margin-top:40px;padding-bottom:40px;}
.best-wrap .list-wrap{overflow:hidden;}
.best-wrap .list-wrap .item li{position:relative;float:left;width:120px;margin-right:5px;display:block;}
.best-wrap .list-wrap .item li a {
    position:absolute;
    top:0px;
    bottom:0px;
    display:inline-block;
    width:100%;
}
.best-wrap .list-wrap .text{
    padding:0px 5px;
}
.best-wrap .list-wrap .name{
    display: inline-block;
    width: 100%;
    margin-top:5px;
    color:#333333;
    font-size:14px;
    line-height:18px;
    text-align:left;
    letter-spacing:-0.5px;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: normal; 
    text-align: left; 
    word-wrap: break-word; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}
    .best-wrap .list-wrap .dis_price_box {
    margin-top:5px;
    font-size:0px;
    line-height:0px;
}
    .best-wrap .list-wrap .dis_price_box:after {
    display:block;
    clear:both;
    content:"";
}
.best-wrap .list-wrap .dis_price_box .dis_percent {
    display:inline-block;
    vertical-align:bottom;
    float:right;
    margin-right:5px;
}
.best-wrap .list-wrap .dis_price_box .dis_percent span {
    color:#333333;
    font-size:12px;
    font-weight:300;
    line-height:18.5px;
    letter-spacing:-0.5px;
}

.best-wrap .list-wrap .dis_price_box .price-box {
    display:inline-block;
    vertical-align:bottom;
}
.best-wrap .list-wrap .dis_price_box .price-box .del-price {
    margin-top:7.5px;
    color:#888888;
    font-size:12px;
    line-height:12px;
    text-decoration:line-through;
    letter-spacing:-0.5px;
}
.best-wrap .list-wrap .dis_price_box .price-box .normal-price {
    margin-top:5px;
    color:#333333;
    font-size:14px;
    font-weight:bold;
    line-height:18.5px;
    letter-spacing:-0.5px;
}

.best-wrap .list-wrap .dis_price_box .time {
    display:inline-block;
    width:93px;
    height:15px;
    margin-top:7px;
    margin-bottom:10px;
    border:1px solid #e71a1a;
    color:#e71a1a;
    font-size:9px;
    line-height:15px;
    text-align:center;

    box-sizing:border-box;
}

.best-wrap .list-wrap .option_preview {
    font-size:0px;
}
.best-wrap .list-wrap .option_preview span {
    display:inline-block;
    width:10px;
    height:6px;
    margin:3px 0px;
    margin-right:2px;
    border:1px solid #ddd;
    box-sizing:border-box;
}

.best-wrap .list-wrap .option_preview .size {
    text-align:left;
    color:#888;
    margin-top:8px;
    font-size:12px;
    line-height:12px;
    letter-spacing:-0.5px;
}

/* 상품 리스트 공통 CSS 끝 */

.list_category {overflow:hidden;}
.list_category li {float:left; width:25%; height:32px; padding:8px 0; border-bottom:1px solid #ddd; box-sizing:border-box;}
.list_category li a {display:block; border-right:1px solid #ddd; text-align:center; text-overflow: clip; white-space: nowrap; overflow: hidden;}
.list_category li:nth-child(4) a {border-right:0px none;}
.list_category li:nth-child(8) a {border-right:0px none;}



/*BEST LOOP*/

.MK_product_list h2 {float:left; font-size: 1.25em; /*font-weight:bold;*/ padding-top:10px;}
/*.MK_product_list {background-color:#f9f9f9; border-bottom:1px solid #4a4a4a; border-top: 1px solid #4a4a4a;}*/
.MK_product_list .items {padding: 2px 0 10px 0;}
.MK_product_list .items #MK_best_product li {width:33.33%;}
.MK_product_list .items .paging-num {text-align: center; clear: both; margin:20px 0;}
.MK_product_list .items .paging-num a {background-color:#fff; border:1px solid #393939; padding:5px 10px; margin:0 10px;}



/*.shopbrand h2 {text-align:center; font-size: 1.25em; font-weight:bold; padding-top:10px;}
.shopbrand .MK_product_list {background-color:#f9f9f9; border-bottom:1px solid #4a4a4a; border-top: 1px solid #4a4a4a;}
.shopbrand .MK_product_list .items {padding: 10px 0;}
.shopbrand .MK_product_list .items #MK_best_product li {width:33.33%;}
.shopbrand .MK_product_list .items .paging-num {text-align: center; clear: both; margin:10px 0;}
.shopbrand .MK_product_list .items .paging-num a {background-color:#fff; border:1px solid #393939; padding:5px 10px; margin:0 10px;}*/
.shopbrand .list_group {padding:12px 1%; text-align:center;}
.shopbrand .list_group select {width:49%; height:28px;}
.shopbrand .more .more-title {color: #3b3b3b;}
.shopbrand .more .more-num {color: #aaaaaa;}
.shopbrand .shopbrandTitle img {max-width: 100%;}
.shopbrand .list_array .list_arrayRight img {width: 23px; height: auto;}
/*.shopbrandTitle {padding-bottom: 20px;}*/
.shopbrandTitle img {max-width: 100%;}


.normal-price{font-size:14.5px !important; /*padding-top:10px !important;*/}

.section .list-wrap.one li a .text .icon {
    margin-top: 8px;
    margin-left: -3px;
}
.section .list-wrap.two li a .text .icon {
    margin-top: 8px;
    margin-left: -3px;
}
.section .list-wrap.three li a .text .icon {
    margin-top: 5px;
    margin-left: -3px;
}


/*전상품세일 - 할인율, 할인가 컬러 변경*/
//.normal-price {color: #ee0000 !important;}
//.dis_percent span {color: #ee0000 !important;}
//.listPrice {color: #ee0000 !important;}
/* BASIC css end */