@charset "utf-8";

.port_wrap { position: relative; padding: 0 50px; }

.port_wrap .port_slick { margin: -10px; }
.port_wrap .port_slick .port_li { padding: 10px; }
.port_wrap .port_slick .port_li .port_a { position: relative; display: block; }
.port_wrap .port_slick .port_li .port_a .imgbox { position: relative; padding-bottom: 78%; overflow: hidden; }
.port_wrap .port_slick .port_li .port_a .imgbox img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: auto; min-width: 100%; min-height: 100%; max-width: 130%; }
.port_wrap .port_slick .port_li .port_a .frame { z-index: 1; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); transition: top 0.3s; }
.port_wrap .port_slick .port_li .port_a:hover .frame { top: 0; }
.port_wrap .port_slick .port_li .port_a .frame p { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; padding: 0 20px; font-weight: 700; font-size: 20px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.port_wrap .port_arrow { z-index: 2; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; }
.port_wrap .port_arrow.arrow1 { left: 0; }
.port_wrap .port_arrow.arrow2 { right: 0; }
.port_wrap .port_arrow img { display: inline-block; width: 17px; }

@media (max-width: 1535px) {
    .port_wrap { padding: 0 40px; }

    .port_wrap .port_arrow img { width: 15px; }
}
@media (max-width: 1279px) {
    .port_wrap { padding: 0 30px; }

    .port_wrap .port_arrow img { width: 14px; }
}