.displaynone{display:none!important;}
.fixed_back{position: fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;background:rgba(0,0,0,0.6);opacity:0;z-index:-1}
.fixed_back.shows{opacity:1;z-index:1001}
.swiper_fixed{width:100%;max-width:1000px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1002;}
.swiper_fixed .swiper-slide img{width:auto;height:auto;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next,
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{background:transparent;}
.swiper-button-next{right:26px;}
.swiper-container p{color:#fff;margin-top:24px;text-align:center;}
.main.style3{overflow:initial;}
.main.style3 h2,.main.style3 p{color:#fff;}
* {margin: 0;padding: 0;}


.masonry {width:1130px;max-width:100%;margin:0 auto;position:relative;}
.masonry a{position:relative;
display:block;overflow:hidden;}

.swiper_fixed .swiper-slide a{display:block;text-align:center;color:#fff;font-size:24px;}



.rel_content{opacity:0;}
.item {width:50%;display:inline-block;position:absolute;top:0;left:0;opacity:1;transition:0.75s ease;cursor:pointer;}
.item img{width:100%;height:auto;transition:0.3s ease;}
.item .item_text{position:absolute;top:0;left:0;padding:3.6rem 0 0 3rem;margin-right:6rem;z-index:3;opacity:0;transition:0.3s ease;color:#fff;}
.item .overlay:before{content: "";display: block;background: rgba(0, 0, 0, 0.8);opacity: 0;visibility: hidden;position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: all 0.3s ease;z-index: 1;}
.item .overlay:after{content: "...";font-family: "nanumgothic";font-size: 3rem;z-index: 1;display: block;height: 30px;width: 30px;line-height: 30px;margin-left: -15px;margin-top: -15px;position: absolute;left: 50%;top: 50%;text-align: center;color: #FFFFFF;opacity: 0;visibility: hidden;transition: all 0.3s ease-in-out;transform: scale(0.5);}
.item.fade{top:150px;opacity:0;}
.item:hover .item_text{opacity:1;color: #FFFFFF;
    font-size: 2.2rem;
    line-height: 1.364;
}
.item:hover .overlay:after,.item:hover .overlay:before{opacity:1;visibility:visible;}
.item:hover img{transform:scale(1.1);}
@media (max-width:790px) {
.item{width:100%;max-width:unset;}
}
@media (max-width:640px) {
.item{width:100%;max-width:unset;}
.swiper_fixed .swiper-slide img{max-width:420px;}
}
@media (max-width:520px) {
.item{width:100%;max-width:unset;}
}