@charset "utf-8";
/* CSS Document */
#popup-compare{
	 width: 100%;
	position: fixed;
	bottom: 50px; left: 0px; z-index: 1000
  
}
#content-popup-compare{ 
  width: 1350px;
    height: auto;
    margin: 0px auto; background: #fff;box-shadow: 0 -2px 10px rgb(0 0 0 / 12%);
 }
#content-popup-compare ul{
	
	width: 80%; height: auto; float: left; margin: 0px
}
#content-popup-compare ul li{width: 33%; height: auto; float: left; padding: 5px; position: relative;border-right: 1px solid #e0e0e0;}
#content-popup-compare ul li .del{position: absolute;
    top: 20px;
    right: 10px; color:#FF4D4F; font-size: 12px; font-weight:bold;
     height: 20px;
    cursor: pointer;}
#content-popup-compare ul li .product_compare{width: 80%; height: auto;  margin: 9px auto}
#content-popup-compare ul li .product_compare img{max-width: 100px; height: auto; margin: 5px auto; display: block; max-height: 100px}
#content-popup-compare ul li .product_compare .name{color: #333; font-size: 13px; margin: 5px; display: block; text-align: center}
#func-popup-compare{width: 20%; float: right; height: 100%; margin: 0px; position: relative; text-align: }
#func-popup-compare .closes{
	position: absolute;
    right: 0;
    top: -36px;
    padding: 10px 30px 10px 10px;
    border-radius: 8px 8px 0 0;
    color: #000;
    background: #fff;
    box-shadow: 0 -2px 10px #0000001f;
}
.view-compare{background: #44ba46;
    color: #fff;
    font-size: 14px;
	margin: 40px auto 5px auto;
	padding: 10px 20px;  text-align: center; display: block; width: 170px;   
	
}
.delete-compare{    display: block;
    text-align: center;
    margin: 10px auto;
    width: 50%;
    padding: 12px 0;
    border-radius: 10px;
    font-size: 14px;
    color: #44ba46;}
#compare{width: 100%; height: auto; float: left; margin: 0px; padding: 20px 0px}
#compare #title-compare{width: 100%; height: auto; margin-top:15px; text-align:center; float:left}
#title-compare h1{margin:10px 0px; font-weight:normal; padding:0px 25px}
#title-compare span {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-transform: uppercase;
    font-family: OpenSans-bold;
    color: #fff;
    position: relative;
    background: linear-gradient(267.14deg, #44ba46 27.9%, #24b8f0 67.21%, #059fd9 98.84%);
    display: inline-block;
    padding: 11px 20px 7px;
    margin-bottom: 23px;
}

    #title-compare span:after {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        border: 23px solid #059fd9;
        z-index: 0;
    }

    #title-compare span:before {
        content: "";
        position: absolute;
        display: block;
        top: 0;
        border: 23px solid #059fd9;
        z-index: 0;
    }

    #title-compare span:before {
        left: -25px;
        border-right-width: 2px;
        border-left-color: transparent;
    }

    #title-compare span:after {
        border-color: #44ba46;
        right: -25px;
        border-left-width: 2px;
        border-right-color: transparent;
    }
#compare #content-compare{width: 100%; height: auto; float: left;}
.product-compare{width: 100%; height: auto; float: left; padding:  0px; border-bottom:   1px solid #e6e6e6}
.product-compare .item-compare{width: 26%; height: auto; float: left ; padding: 5px 10px;   border-right: 1px solid #e6e6e6; position: relative}
.product-compare .item-compare:last-child{border: none}
.product-compare .item-compare .close{position: absolute; top: 5px; right: 5px; color: #FF4548; font-size: 12px; font-weight: bold}

    .product-compare .item-compare img {
        height: 250px;
        width: auto;
         margin: 5px auto;
        display: block
    }
.product-compare .item-compare h2{margin: 0px; font-weight: normal}
.product-compare .item-compare h2 a{color: #44ba46; margin: 5px auto; text-align: center;display: block; font-size: 14px; text-transform: uppercase}
.name-criteria{width: 20%; height: auto; float: left;border-right: 1px solid #e6e6e6;}
.name-criteria span{color: #44ba46;  display: block; text-align: right;  margin-right: 15px; line-height:35px}
.criteria{width: 100%; height: auto; float: left}

.item-criteria{float: left; width: 100%; margin: 0px; padding: 0px 0px; line-height: 35px;border-bottom:   1px solid #e6e6e6}
.detail-crireria{width: 26%; height: auto; float: left; 
	text-align: center;border-right: 1px solid #e6e6e6;   
}
.detail-crireria .price{color: #AE0306; font-weight: bold; font-size: 16px}
.detail-crireria:last-child{border: none}
.item-criteria:nth-child(2n){
	background:#f4f4f4
}
.function-compare{float: left; width: 100%; margin: 0px; padding: 0px 0px; line-height: 35px;border-bottom:   1px solid #e6e6e6}
.order-compare{width: 26%; height: auto; float: left; 
	text-align: center;border-right: 1px solid #e6e6e6;    padding:  0px
}
.order-compare:last-child{border: none}
.order-compare a{
	background: #44ba46;
    color: #fff;
    font-size: 14px; margin: 5px auto;
 	  text-align: center; display: block; width: 170px; 
}
@media screen and (max-width: 740px) 
{
    #content-popup-compare{width:100%}
        #content-popup-compare ul li .product_compare img {
            max-width: 40px;
            height: auto;
            margin: 5px auto;
            display: block;
            max-height: 40px;
        }
        #content-popup-compare ul{width:100%}
    #func-popup-compare{width:100%; text-align:center}
    .view-compare{ margin:5px auto; padding:5px 7px; width:auto; display:inline-block}
    .delete-compare{ margin:5px; padding:0px; width:auto; display:inline-block}
    #func-popup-compare .closes{top:-130px}
    .product-compare .item-compare img{max-height:80px}
    .order-compare a{width:auto}
    .name-criteria {
        width: 100%;
        border-bottom: 1px solid #e6e6e6; text-align:center
    }
        .name-criteria span{text-align:center}
        .product-compare .item-compare {
            width: 33.3%
        }
    .order-compare {
        width: 33.3%
    }
    .detail-crireria {
        width: 33.3%
    }
    .name-criteria span {
        line-height: 25px
    }
    .item-criteria {
        line-height: 25px; font-size:13px
    }
}