.color-gray { color: gray;}
.color-white { color: #fff;}
.color-red { color: #e20000;}
.font-size-12 { font-size: 12px !important;}
.font-size-13 { font-size: 13px !important;}
.font-size-16 { font-size: 16px;}
.font-size-20 { font-size: 20px;}
.display-inline-block { display: inline-block;}
.display-block { display: block;}
.display-flex { display: flex;}

.vertical-align-middle-div {margin: auto;    position: absolute;    top: 50%;    left: 0;    -ms-transform: translate(0, -50%);    transform: translate(0, -50%);}

.cursor-pointer { cursor: pointer;}

.border-top-0 { border-top: 0 !important;}
.border-bottom-0 { border-bottom: 0 !important;}
.border-left-1px-gray { border-left: 1px solid gray;}
.border-1px-gray { border: 1px solid #ddd;}

.height-auto-important { height: auto !important;}
.height-48px { height: 48px;}
.height-48px-important { height: 48px !important;}
.width-38px { width: 38px;}
.width-135px { width: 135px;}
.width-100pc { width: 100%;}

.top-0 { top: 0;}
.bottom-0 { bottom: 0;}
.bottom-10px { bottom: 10px !important;}
.left-0 { left: 0;}
.right-0 { right: 0;}
.position-absolute { position: absolute;}
.position-relative { position: relative;}
.vertical-align-text-bottom {     vertical-align: text-bottom;}

.pdt-74pc { padding-top: 74%;}
.pdt-74pc img {  max-height: 100%;    max-width: 100%;    width: auto !important;    height: auto;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;}

.mgt5s {     margin-top: -5px;}
.mgt7 { margin-top: 7px;}
.mgr50 { margin-right: 50px;}

.bg-color-yellow { background: yellow;}
.bg-color-gray {     background: #f8f8f8}
.font-bold { font-weight: bold;}
.arrow-up { width: 100%;    height: 20px;    border-left: 20px solid transparent;    border-right: 20px solid transparent;    border-bottom: 20px solid #fff;}
.arrow-down {    width: 100%;    height: 10px;    border-left: 25px solid transparent;    border-right: 25px solid transparent;    border-top: 10px solid yellow;}

.content-ellipsis-4-line {    display: -webkit-box;    max-width: 100%;    margin: 0 auto;    -webkit-line-clamp: 4;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis; text-align: justify;}
.content-ellipsis-3-line {    display: -webkit-box;    max-width: 100%;    margin: 0 auto;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis; text-align: justify;}
.content-ellipsis-2-line {    display: -webkit-box;    max-width: 100%;    margin: 0 auto;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis; text-align: justify;}
.content-ellipsis-1-line {    display: -webkit-box;    max-width: 100%;    margin: 0 auto;    -webkit-line-clamp: 1;    -webkit-box-orient: vertical;    overflow: hidden;    text-overflow: ellipsis; text-align: justify;}

.white-space-unset { white-space:unset !important;}

.nav-freeship{  display:none;background:#fff;top:49px;z-index:9999;padding:5px 10px;border:1px solid #e20000; }

.a_img_ratio_100_full { position: relative; padding-top: 100%; overflow:hidden; display:block;}
.a_img_ratio_100_full  img {      max-height: 100%;    max-width: 100%;    width: auto !important;    height: auto;    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    margin: auto;}

@media (max-width: 768px) 
{
    .pdl0x { padding-left: 0 !important;}
    .pdl10x { padding-left: 10px !important;}
    .height-auto-xs {height: auto !important;}
}