@charset "utf-8";


.pf-slider{ width: 100%; overflow: hidden; }
.pf-slider ul li{ position: relative; width: 310px; margin-right: 15px; transition: all .3s ease-out; }
.pf-slider ul li a{ display: block; }
.pf-slider ul li a .imgBox{ position: relative; width: 100%; border-radius: 6px; overflow: hidden; }
.pf-slider ul li a .imgBox img{ width: 100%; }
.pf-slider ul li a .imgBox > .sh-date{ position: absolute; display: block; right: 12px; bottom: 12px; font-size: 14px; color: #fff; text-align: right; z-index: 9; }

/** info box */
.pf-slider ul li a .info-box { position: relative; width: 100%; padding: 30px 25px; background-color: #fff; z-index: 11; }
.pf-slider ul li a .info-box > h5{ font-size: 26px; line-height: 33px; }
.pf-slider ul li a .info-box > ul{ margin-top: 15px; }
.pf-slider ul li a .info-box > ul > li{ width: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 14px; line-height: 25px; }
.pf-slider ul li a .info-box > ul > li > span{ display: inline-block; width: 90px; font-weight: 600; text-transform: uppercase; }
.pf-slider ul li a .info-box > ul > li > p{ margin-left: 5px; font-weight: 300; }

/** hover box */
.pf-slider ul li a .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 .hovBox > span{ display: inline-flex; justify-content: space-between; align-items: center; width: 130px; height: 40px; border-radius: 6px; background-color: #FFC917; padding: 12px; opacity: 0; transform: translateY(20px); transition: all .3s ease-out .2s; }
.pf-slider ul li a .hovBox > span > p{ font-size: 12px; font-weight: 500; color: #181818; }

/*? 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); }


/** pager */
.pf-slider .pf-pager{ width: 100%; text-align: center; margin: 40px auto 0; }
.pf-slider .pf-pager > span{ width: 10px; height: 10px; background: #aaa; border-radius: 5px; cursor: pointer; opacity: 1; margin: 0 10px; transition: all .2s ease-in-out; }
.pf-slider .pf-pager > span.swiper-pagination-bullet-active{ width: 60px; border-radius: 5px; background: #0f268a; }





/*! TABLET  */
@media screen and (max-width: 1279px){ 
    
/*? hover */
.pf-slider ul li:hover{ border-color: rgba(256, 256, 256, .1); }
.pf-slider ul li:hover a .hovBox{ opacity: 0; }

}


/*! 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; } */
}