@charset "utf-8";


.pf-slider{ width: 100%; overflow: hidden; }
.pf-slider ul li{ position: relative; width: 32%; margin-right: 2%; transition: all 0.3s ease-out; }
.pf-slider ul li a{ display: block; }
.pf-slider ul li a .imgBox{ position: relative; width: 100%; overflow: hidden; }
.pf-slider ul li a .imgBox img{ width: 100% !important; height: auto; object-fit: cover; }


/** hover box */
.pf-slider ul li a .imgBox .hovBox{ position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); overflow: hidden; z-index: 10; opacity: 0; transition: all .3s ease-out; }
.pf-slider ul li a .imgBox .hovBox > span{ display: inline-flex; justify-content: space-between; align-items: center; width: 130px; height: 40px; background-color: #ff6600; padding: 12px; opacity: 0; transform: translateY(20px); transition: all .3s ease-out .2s; }
.pf-slider ul li a .imgBox .hovBox > span > p{ font-size: 12px; font-weight: 500; color: #fff; }

/** info box */
.pf-slider ul li a .info-box { position: relative; width: 100%; z-index: 11; overflow: hidden; margin-top: 15px; }
.pf-slider ul li a .info-box > h5{ display: block; width: 100%; font-size: 20px; color: #fff; line-height: 30px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease-out; }
.pf-slider ul li a .info-box > ul{ margin-top: 8px; }
.pf-slider ul li a .info-box > ul > li{ width: 100%; font-size: 16px; line-height: 16px; }
.pf-slider ul li a .info-box > ul > li > p{ color: #d9d9d9; font-weight: 300; text-align: left; }

/*? hover */
.pf-slider ul li:hover{ border-color: rgba(256, 256, 256, .1); }
.pf-slider ul li:hover a .hovBox{ opacity: 1; }
.pf-slider ul li:hover a .hovBox > span{ opacity: 1; transform: translateY(0); }
.pf-slider ul li:hover .info-box > h5{ color: #ff6600; }


.pf-control{ width: 100px; height: 45px; display: flex; align-items: center; justify-content: space-between; }
.pf-control > div{ width: 36px; height: 35px; cursor: pointer; opacity: 0.5; transition: all 0.2s ease-in-out; }
.pf-control > div:hover{ opacity: 1; }
.pf-control .pf-prev{ background: url(/img/btn_pf_prev.png) no-repeat center center; background-size: contain; }
.pf-control .pf-next{ background: url(/img/btn_pf_next.png) no-repeat center center; background-size: contain; }




/*! PC  */
@media screen and (max-width: 1640px){ 

    .pf-control{ width: 100px; }
    .pf-control > div{ width: 36px; height: 35px; }
    
}


/*! TABLET  */
@media screen and (max-width: 1280px){ 
    
    .pf-slider ul li{ width: 33.3%; }
    .pf-slider ul li a .hovBox dl dd{ line-height: 30px; }
    .pf-control{ top: -70px; width: 100px; }

}


/*! MOBILE  */
@media screen and (max-width: 767px){ 

    .pf-slider ul li{ width: 100%; }
    .pf-slider ul li a .hovBox{ background: transparent; opacity: 1; }
    .pf-slider ul li a .hovBox dl{ bottom: 0; padding: 40px 20px 20px; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%); }
    .pf-slider ul li a .hovBox dl dt{ font-size: 16px; opacity: 1; transform: translate(0,0); }
    .pf-slider ul li a .hovBox dl dd{ font-size: 20px; line-height: 25px; opacity: 1; transform: translate(0,0); }
    .pf-control{ top: -60px; width: 50px; height: 30px; }
    .pf-control > div{ width: 18px; height: 17.5px; cursor: pointer; opacity: 0.5; transition: all 0.2s ease-in-out; }

    /* .pf-control{ position: relative; top: auto; right: auto; width: 100%; margin-top: 20px; }
    .pf-control > div{ width: 40px; height: 24px; } */

    /** info box */
.pf-slider ul li a .info-box { position: relative; width: 100%; z-index: 11; overflow: hidden; margin-top: 15px; }
.pf-slider ul li a .info-box > h5{ display: block; width: 100%; font-size: 18px; color: #fff; line-height: 26px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all .2s ease-out; }
.pf-slider ul li a .info-box > ul{ margin-top: 8px; }
.pf-slider ul li a .info-box > ul > li{ width: 100%; font-size: 14px; line-height: 14px; }
.pf-slider ul li a .info-box > ul > li > p{ color: #d9d9d9; font-weight: 300; text-align: left; }

/*? hover */
.pf-slider ul li:hover{ border-color: rgba(256, 256, 256, .1); }
.pf-slider ul li:hover a .hovBox{ opacity: 1; }
.pf-slider ul li:hover a .hovBox > span{ opacity: 1; transform: translateY(0); }
.pf-slider ul li:hover .info-box > h5{ color: #fff; }

}