@charset "utf-8";

.lt_pf ul{ display: flex; flex-wrap: wrap; }
.lt_pf ul > li{ width: 32%; overflow: hidden; margin-right: 2%; }
.lt_pf ul > li a{ position: relative; display: block; border: 1px solid #e3e7ee; overflow: hidden; }
.lt_pf ul > li a .ico_new{ position: absolute; right: 0; top: 0; font-size: 12px; font-weight: 500; color: #fff; line-height: 26px; padding: 0 10px; background: #2051a2; display: inline-block; z-index: 10; }
.lt_pf ul > li a .imgBox img{ width: 100%; height: auto; }
.lt_pf ul > li a .imgBox .no_image{ position: relative; }
.lt_pf ul > li a .imgBox .no_image > span{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; font-size: 30px; font-weight: 700; color: #fff; letter-spacing: 0.5px; text-align: center; font-family: 'Outfit'; display: block; }
.lt_pf ul > li a .imgBox .no_image > span::before{ width: 60px; height: 60px; background: url(/img/WonLogo1.png) no-repeat center center; background-size: contain; content: ''; display: block; margin: 0 auto 10px; }
.lt_pf ul > li a .hoverBox{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10% 8%; background: rgba(0, 0, 0, 0.9); z-index: 5; opacity: 0; transition: all 0.3s ease-out; }
.lt_pf ul > li a .hoverBox .titBox{ width: 100%; }
.lt_pf ul > li a .hoverBox .titBox span{ font-size: 12px; font-weight: 700; color: #6595e3; line-height: 20px; text-transform: uppercase; display: block; padding-left: 5px; margin-bottom: 7px; opacity: 0; transform: translateX(-30px); transition: all 0.4s ease-out 0.1s; }
.lt_pf ul > li a .hoverBox .titBox h3{ font-size: 26px; font-weight: 500; color: #fff; letter-spacing: -0.5px; line-height: 35px; word-break: keep-all; opacity: 0; transform: translateX(-30px); transition: all 0.4s ease-out 0.2s; }
.lt_pf ul > li a .hoverBox .tag{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 10% 8%; font-size: 16px; font-weight: 400; color: #fff; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; opacity: 0; transform: translateX(-30px); transition: all 0.4s ease-out 0.3s; }
.lt_pf ul > li a > span{ display: block; position: absolute; background: #2051a2; transition: all .5s ease; z-index: 10; }
.lt_pf ul > li a > span:nth-of-type(1){ top: 0; width: 0; height: 4px; }
.lt_pf ul > li a > span:nth-of-type(2){ top: 0; right: 0; width: 4px; height: 0; }
.lt_pf ul > li a > span:nth-of-type(3){ bottom: 0; right: 0; width: 0; height: 4px; }
.lt_pf ul > li a > span:nth-of-type(4){ bottom: 0; left: 0; width: 4px; height: 0; }
.lt_pf .btnBox{ width: 100%; text-align: center; margin-top: 60px; }
.lt_pf .btnBox .btn_more{ position: relative; display: inline-block; width: 200px; font-size: 16px; font-weight: 700; color: #22252c; line-height: 58px; border: 1px solid #e3e7ee; background: #fff; }
.lt_pf .btnBox .btn_more::before{ position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #2051a2; content: ''; display: block; transition: all 0.3s ease-out; }
.lt_pf .btnBox .btn_more span{ position: relative; display: block; width: 100%; z-index: 5; transition: all 0.3s ease-out; }
.lt_pf .btnBox .btn_more span::after{ content: '→'; display: inline-block; opacity: 0; margin-left: -20px; transition: all 0.3s ease-out; }
.lt_pf .btnBox .btn_more:hover:before{ width: 100%; }
.lt_pf .btnBox .btn_more:hover span{ color: #fff; }
.lt_pf .btnBox .btn_more:hover span::after{ opacity: 1; margin-left: 50px; }
/* ? hover */
.lt_pf ul > li a:hover .hoverBox,
.lt_pf ul > li a:hover .hoverBox .tag,
.lt_pf ul > li a:hover .hoverBox .titBox span,
.lt_pf ul > li a:hover .hoverBox .titBox h3{ opacity: 1; transform: translateX(0); }
.lt_pf ul > li a:hover > span:nth-of-type(1){ width: 100%; }
.lt_pf ul > li a:hover > span:nth-of-type(2){ height: 100%; }
.lt_pf ul > li a:hover > span:nth-of-type(3){ width: 100%; }
.lt_pf ul > li a:hover > span:nth-of-type(4){ height: 100%; }



@media screen and (min-width: 768px){ 

    .lt_pf ul > li:nth-of-type(3n){ margin-right: 0; }
    .lt_pf ul > li:nth-of-type(n+4){ margin-top: 35px; }
}

@media screen and (max-width: 1299px){

    .lt_pf ul > li:nth-of-type(n+4){ margin-top: 20px; }
    .lt_pf ul > li a .imgBox .no_image > span{ font-size: 18px; }
    .lt_pf ul > li a .imgBox .no_image > span::before{ width: 50px; height: 50px; }
    .lt_pf ul > li a .hoverBox .titBox span{ font-size: 11px; line-height: 15px; margin-bottom: 5px; }
    .lt_pf ul > li a .hoverBox .titBox h3{ font-size: 20px; line-height: 32px; }
    .lt_pf ul > li a .hoverBox .tag{ font-size: 13px; }
}

@media screen and (max-width: 1023px){

    .lt_pf ul > li:nth-of-type(n+4){ margin-top: 15px; }
    .lt_pf ul > li a .hoverBox{ padding: 7%; }
    .lt_pf ul > li a .hoverBox .titBox{ padding: 7%; }
    .lt_pf ul > li a .hoverBox .titBox span{ font-size: 10px; line-height: 12px; }
    .lt_pf ul > li a .hoverBox .titBox h3{ font-size: 16px; line-height: 26px; }
    .lt_pf ul > li a .hoverBox .tag{ font-size: 11px; }
    .lt_pf .btnBox{ margin-top: 40px; }
    .lt_pf .btnBox .btn_more{ width: 190px; font-size: 15px; line-height: 53px; transition: all 0.3s ease-in-out; }
    .lt_pf .btnBox .btn_more::before{ display: none; }
    .lt_pf .btnBox .btn_more span{ transition: none; }
    .lt_pf .btnBox .btn_more span::after{ opacity: 1; margin-left: 20px; }
    .lt_pf .btnBox .btn_more:hover span::after{ margin-left: 20px; transition: none; }
    .lt_pf .btnBox .btn_more:hover{ color: #fff; background: #2051a2; }
}

@media screen and (max-width: 767px){

    .lt_pf ul > li{ width: 48%; margin-right: 4%; }
    .lt_pf ul > li:nth-of-type(2n){ margin-right: 0; }
    .lt_pf ul > li:nth-of-type(n+3){ margin-top: 15px; }
}

@media screen and (max-width: 500px){

    .lt_pf ul > li{ width: 100%; margin-right: 0; }
    .lt_pf ul > li:nth-of-type(n+2){ margin-top: 40px; }
    .lt_pf ul > li a{ border: none; }
    .lt_pf ul > li a .hoverBox{ position: relative; padding: 15px 0 0; background: transparent; opacity: 1; }
    .lt_pf ul > li a .hoverBox .titBox{ padding: 0; }
    .lt_pf ul > li a .hoverBox .titBox span{ display: none; }
    .lt_pf ul > li a .hoverBox .titBox h3{ font-size: 18px; font-weight: 700; color: #111; line-height: 26px; opacity: 1; transform: translate(0); }
    .lt_pf ul > li a .hoverBox .tag{ display: none; }
    .lt_pf ul > li a > span{ display: none; }
}