.pn-wrapper-item{background-color: #f2f2f2;padding-top: 100px;overflow: hidden}
.pn-wrapper-row .row{margin-bottom: 70px;display: flex;align-items: center;}
.pn-wrapper-row .row:nth-child(odd){flex-direction: row-reverse}
.pn-wrapper-row .row .pn-title{text-align: left;margin: 0 0 20px 0}
/* .pn-wrapper-row .row .pn-title:before{content: attr(data-shadow);width: auto;border: none;height: inherit;background-color: transparent;top: 0;transform: inherit;font-size: 180px;color: rgba(0,0,0,.05)} */
.pn-wrapper-row .row .pn-title:after{display: none}
.pn-wrapper-row .row .pn-title span{padding: 0}
.pn-wrapper-row .row .pn-image{position: relative}
/*.pn-wrapper-row .row .pn-image:before{content: "";position: absolute;background-color: rgba(0,0,0,.6);left: 0;top: 0;width: 100%;height: 100%;transition: all ease .3s}*/
.pn-wrapper-row .row .pn-image:hover:before{opacity: 0;visibility: hidden}
.pn-wrapper-row .row .pn-image span:before,.pn-wrapper-row .row .pn-image span:after{content: "";position: absolute;transition: all ease .3s}
.pn-wrapper-row .row .pn-image span:before{top: 5px;bottom: 5px;width: 0;border-top: 2px solid #fff;border-bottom: 2px solid #fff;left: 50%;transform: translateX(-50%)}
.pn-wrapper-row .row .pn-image:hover span:before{width: calc(100% - 10px);left: 5px;transform: inherit}
.pn-wrapper-row .row .pn-image span:after{left: 5px;right: 5px;height: 0;border-left: 2px solid #fff;border-right: 2px solid #fff;top: 50%;transform: translateY(-50%)}
.pn-wrapper-row .row .pn-image:hover span:after{height: calc(100% - 10px);top: 5px;transform: inherit}
.pn-wrapper-row .row .pn-image img{width: 100%}
.pn-wrapper-row .row .pn-wrapper{text-align: justify}
.pn-wrapper-popup{position: fixed;background-color: rgba(0,0,0,.7);z-index: -1;width: 100%;height: 100%;left: 0;top: 0;overflow: auto;opacity: 0;visibility: hidden;transition: all ease .3s}
.pn-wrapper-popup.active{opacity: 1;visibility: visible;z-index: 1000}
.pn-wrapper-popup .pn-popup{padding: 30px 60px;background-color: #000;margin: 100px auto;position: relative}
.pn-wrapper-popup .pn-popup #pn-close{position: absolute;right: -14px;top: -15px;width: 30px;height: 30px;transform: rotate(45deg);cursor: pointer}
.pn-wrapper-popup .pn-popup #pn-close:before,.pn-wrapper-popup .pn-popup #pn-close:after{content: "";height: 2px;width: 100%;background-color: #fff;border-radius: 2px;top: 50%;transform: translateY(-50%);position: absolute}
.pn-wrapper-popup .pn-popup #pn-close:after{transform: rotate(90deg);top: calc(50% - 1px)}
.pn-wrapper-popup .pn-popup .pn-wrapper{color: #fff;}
.pn-wrapper-popup .pn-popup .pn-wrapper::-webkit-scrollbar {width: 5px}
.pn-wrapper-popup .pn-popup .pn-wrapper::-webkit-scrollbar-track {background: #f1f1f1; border-radius: 5px}
.pn-wrapper-popup .pn-popup .pn-wrapper::-webkit-scrollbar-thumb {background: #888; border-radius: 5px}
.pn-wrapper-popup .pn-popup .pn-wrapper::-webkit-scrollbar-thumb:hover {background: #c60b1e; border-radius: 5px}
.pn-wrapper-popup .pn-popup .row{display: flex}
.pn-wrapper-popup .pn-popup .row [class*='col-']{margin-bottom: 30px}
/* .lager-thumb{max-height: 560px;}
.small-thumb-list{max-height: 560px;} */

@media only screen and (min-width: 1500px){
    .pn-wrapper-row .row{margin: 0 -60px 70px -60px}
    .pn-wrapper-row .row [class*='col-']{padding: 0 60px}
}
@media only screen and (max-width: 1199px){
    .pn-wrapper-popup .pn-popup{padding: 30px}.pn-wrapper-popup .pn-popup #pn-close{right: 0}
}
@media only screen and (max-width: 991px){
    .pn-wrapper-item{padding-top: 50px}
    .pn-wrapper-row .row{margin-bottom: 50px}
    .pn-wrapper-row .row .pn-image:before{display: none}
    .pn-wrapper-popup .pn-popup{margin: 30px 0}
    .lager-thumb{max-height: 415px;}
    .small-thumb-list{max-height: 415px;}
}
@media only screen and (min-width: 768px){
    .lager-thumb{width: calc(100% - 215px);float: left;padding-right: 20px;margin-bottom: 30px;text-align: center;overflow: hidden}
    .small-thumb-list{width: 215px;float: left;overflow: hidden;margin-bottom: 30px}
    .small-thumb-list .product-thumb-small{height: 125px !important;cursor: pointer;margin-bottom: 20px;border-radius: 5px;overflow: hidden;}
    .small-thumb-list .slick-slide img{height: 100%;}
    .small-thumb-list .slick-slide.slick-current{border: 1px solid #fff;}
    .slick-prev, .slick-next{display: none !important}
}
@media only screen and (max-width: 767px){
    .lager-thumb{margin-bottom: 15px}
    .small-thumb-list{padding: 0 30px}
    .slick-slide img{max-width: 100%;}
    .small-thumb-list .slick-slide{padding: 0 5px;}
    .small-thumb-list{margin-bottom: 15px}
}
@media only screen and (max-width: 570px){
    .pn-wrapper-row .row [class*='col-']{width: 50%}
    .pn-wrapper-row .row .pn-title{margin: 0 0 15px 0;font-size: 18px;line-height: 23px}
    .pn-wrapper-row .row .pn-wrapper{text-align: inherit}
    .pn-wrapper-popup .pn-popup .row{display: none}
}
@media only screen and (max-width: 480px){
    .pn-wrapper-row .row{display: block;margin-bottom: 30px}
    .pn-wrapper-row .row:nth-child(odd){flex-direction: inherit}
    .pn-wrapper-row .row [class*='col-'] .pn-image{margin-bottom: 15px}
    .pn-wrapper-row .row [class*='col-']{width: 100%}
    .pn-wrapper-item{padding-top: 30px}
    .pn-wrapper-popup .pn-popup{padding: 30px 15px 15px 15px;}
}