/*-----------------------------------------------------------------------------
 [TABLE OF CONTENTS]
	=product-list
-----------------------------------------------------------------------------*/

/**
*
* =product-list
*
**/

#content-main .product-list {
    overflow: hidden;
    margin-bottom: 20px;
}

#content-main .product-list .title {
    float: left;
    width: 25%;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

#content-main .product-list .title h2,
#content-main .product-list .list h2 {
    height: 34px;
    color: #fff;
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
}

#content-main .product-list .title h2 {
    border-bottom: 5px solid #008ba5;
    background-color: #53b3c5;
}

#content-main .product-list .list h2 {
    border-bottom: 5px solid #008ba5;
    background-color: #a7d3d3;
}

#content-main .product-list .title img {
    display: block;
    width: 100%;
}

#content-main .product-list .list {
    float: right;
    width: 75%;
}

#content-main .product-list .list h2 {
    height: 39px;
    padding: 3px 0;
    box-sizing: border-box;
}

#content-main .product-list .list h2 .star img {
    height: 100%;
    margin: 0 10px;
}

#content-main .product-list .list h2 .title {
    display: none;
}

#content-main .product-list .list ul {
    overflow: hidden;
    list-style: none;
}

#content-main .product-list .list ul li {
    float: left;
    width: 24.25%;
    height: 100%;
    margin: 0 1% 15px 0;
    box-sizing: border-box;
}

#content-main .product-list .list ul li:nth-child(4n) {
    margin-right: 0;
}

#content-main .product-list .list ul li .product-content {
    position: relative;
    height: 100%;
    padding: 15px 0 0;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
}

#content-main .product-list .list ul li .product-content img {
    display: block;
    margin-bottom: 15px;
}

#content-main .product-list .list ul li .product-content h3 {
    padding: 0 15px;
    font-size: 20px;
    line-height: 24px;
}

#content-main .product-list .list ul li .product-content h3 a {
    color: #37a1b3;
}

#content-main .product-list .list ul li .product-content p {
    padding: 0 15px;
}

#content-main .product-list .list ul li .product-content p.photo a {
      display: block;
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 0;
      padding: 100% 0 0 0;
}

#content-main .product-list .list ul li .product-content p.photo a img {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
}

#content-main .product-list .list ul li .product-content p.price {
    position: absolute;
    bottom: 44px;
    left: 0;
    right: 0;
    overflow: hidden;
    margin: 10px auto;
    padding: 0 15px 8px;
    color: #bebebe;
    font-size: 16px;
}

#content-main .product-list .list ul li .product-content p.price span {
    float: left;
    padding-top: 10px;
    font-size: 12px;
    text-decoration: line-through;
}

#content-main .product-list .list ul li .product-content p.price em {
    float: right;
    color: #c92818;
    font-style: normal;
    font-size: 24px;
}

#content-main .product-list .list ul li .product-content .btn-buy {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    line-height: 44px;
    border-bottom: 3px solid #008ba5;
    background-color: #f3f8fa;
    color: #9e9fa1;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
}

#content-main #rank-product .list ul li .product-content .btn-buy,
#content-main #sale-product .list ul li .product-content .btn-buy {
    border-bottom: 3px solid #008ba5;
    background-color: #f3f8fa;
}

#content-main #newest-product .list ul li .product-content .btn-buy,
#content-main #hot-product .list ul li .product-content .btn-buy {
    border-bottom: 3px solid #f0b71d;
    background-color: #fdf3e0;
}

#content-main .product-list .list ul li .product-content .btn-buy span {
    display: inline-block;
    height: 44px;
    padding: 0 55px 0 0;
    vertical-align: bottom;
}

#content-main #rank-product .list ul li .product-content .btn-buy span,
#content-main #sale-product .list ul li .product-content .btn-buy span {
    background: url(../../i/icon-cart01.png) no-repeat right bottom;
}

#content-main #newest-product .list ul li .product-content .btn-buy span,
#content-main #hot-product .list ul li .product-content .btn-buy span {
    background: url(../../i/icon-cart02.png) no-repeat right bottom;
}

/**
*
* =newest-product
*
**/

#content-main #newest-product .title h2 {
    border-bottom: 5px solid #9f7723;
    background-color: #f0b71d;
}

#content-main #newest-product .list h2 {
    border-bottom: 5px solid #9f7723;
    background-color: #fae2af;
}

/**
*
* =sale-product
*
**/

#content-main #sale-product .title h2 {
    border-bottom: 5px solid #008ba5;
    background-color: #53b3c5;
}

#content-main #sale-product .list h2 {
    border-bottom: 5px solid #008ba5;
    background-color: #a7d3d3;
}

/**
*
* =hot-product
*
**/

#content-main #hot-product .title h2 {
    border-bottom: 5px solid #9f7723;
    background-color: #f0b71d;
}

#content-main #hot-product .list h2 {
    border-bottom: 5px solid #9f7723;
    background-color: #fae2af;
}

/* +width: 1250↓
*----------------------------------------------------------------------------*/

@media screen and (max-width: 1250px) {
	
#content-main .product-list .title,
#content-main .product-list .list h2 .star {
    display: none;
}

#content-main .product-list .list {
    float: none;
    width: 100%;
}

#content-main .product-list .list h2 .title {
    display: block;
    float: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

#content-main .product-list .list ul {
    height: auto !important;
}

#content-main .product-list .list ul li .product-content p.price,
#content-main .product-list .list ul li .product-content .btn-buy {
    position: static;
}
}

/* +width: 800↓
*----------------------------------------------------------------------------*/

@media screen and (max-width: 800px) {
	
#content-main .product-list .list ul {
    padding: 0 15px;
}

#content-main .product-list .list ul li {
    width: 49%;
    margin-right: 2% !important;
}

#content-main .product-list .list ul li:nth-child(2n) {
    margin-right: 0 !important;
}
}

/* +width: 420↓
*----------------------------------------------------------------------------*/

@media screen and (max-width: 420px) {
	
#content-main .product-list .list ul li {
    width: 100%;
    margin-right: 0 !important;
}
}