@CHARSET "UTF-8";

/*하이라이트 광고*/
.masonry-layout {--columns: 1;--gap: 2rem;box-sizing: border-box;display: grid;grid-template-columns: repeat(var(--columns), 1fr);grid-gap: var(--gap);}
.masonry-layout.columns-1 {--columns: 1;}
.masonry-layout.columns-2 {--columns: 2;}
.masonry-layout.columns-3 {--columns: 3;}
.masonry-layout.columns-4 {--columns: 4;}
.masonry-layout > div > .image,
.masonry-layout > div > div {display: block;width: 100%;margin-bottom: 2rem;}
.masonry-layout > div > .image{position: relative;font-size: 0;overflow: hidden;cursor: pointer;}
.masonry-layout > div > .image img{width: 100%;height: 100%;}
.masonry-layout > div > .image .txt_box{position: absolute;left: 0;top: 0;display: flex;flex-direction: column;justify-content: center;width: 100%;height: 100%;padding: 30px 25px;color: #fff;background: #193650c7;box-sizing: border-box;backdrop-filter: blur(4px);transform: translate3d(0, 100%, 0);transition: .5s;opacity: 0;}
.masonry-layout > div > .image .txt_box .tit{font-size: 1.5rem;}
.masonry-layout > div > .image .txt_box .txt{font-size: 1.8rem;font-weight: 500;display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.masonry-layout > div > .image:hover .txt_box{transform: translate3d(0, 0, 0);opacity: 1;}

/*하이라이트 클릭시 레이어창*/
body.fix{overflow: hidden;}
#view_detail .inner .img_tit{font-size:2.5rem;font-weight:700}
#view_detail .inner .img_tit span{position:relative;z-index: 1;}
#view_detail .inner .img_tit span:before{content:'';position:absolute;bottom:3px;width:100%;height:7px;z-index:-1;background: #cce3ff;}
#view_detail .inner{position:relative;display: flex;align-items: center;justify-content: center;width: 100%;height: 100vh;box-sizing:border-box;}
#view_detail .inner .img_layer{width: 700px;height: auto;}
#view_detail .inner .img_layer img{width: 100%;height: 100%;object-fit: cover;}
#view_detail .inner .detail_adimg{width: 900px;}
#view_detail .inner .detail_adimg.one{width: 600px;}/*스와이퍼가 하나일때*/
#view_detail .inner .detail_adimg .swiper-slide{width: 700px;height: auto;}
#view_detail .inner .detail_adimg .swiper-slide img{width: 100%;height: 100%;object-fit: cover;}
#view_detail .inner .swiper-button-next,
#view_detail .inner .swiper-button-prev{width: 45px;height: 45px;background: #ffffff42 url(/nanum/site/builder/main/main/img/inbtn_arrow_wh.png)no-repeat center center / 20px auto;}
#view_detail .inner .swiper-button-prev{transform: rotate(180deg);}
#view_detail .inner .swiper-button-next:after,
#view_detail .inner .swiper-button-prev:after{display: none;}

#view_detail .inner .txt_box{z-index: 1;position: absolute;left: 40px;bottom: 60px;font-size: 1.6rem;color: #fff;}
#view_detail .inner .txt_box .tit{color: rgba(255, 255, 255, .7);}
#view_detail .inner .txt_box .txt{font-size: 2rem;fnot-weight: 500;}
#detail_bg{position: fixed;display: none;width: 100%;height: 100%;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: .8;z-index: 98;}
#view_detail{position: absolute;top: -5000px;left: -5000px;z-index: 1;}
#view_detail.absol{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 99;width: 100%;font-size: 0;}
#view_detail .close{z-index: 5;display: block;position: absolute;top: 20px;right: 20px;width: 45px;height: 45px;border-radius: 50%;font-weight: 600;color: #000;text-indent:-9999px;background: url(/nanum/site/builder/dir/main/img/menu5913/map_close.png)no-repeat center center / 20px auto;transition: .5s;box-sizing: border-box;}



/********************태블릿********************/
@media all and (max-width:1024px){

/*하이라이트_광고*/
#view_detail .inner .detail_adimg{width: calc(100% - 120px);}
#view_detail .inner .txt_box{left: 50%;transform: translateX(-50%);bottom: 20px;text-align: center;}
	
.video_wrap{height: 500px;}
.video_wrap dl{text-align: center;}
.video_wrap:before{display: none;}
.video_wrap video{height: 100%;object-fit: cover;}
.video_wrap dl dd{margin-top: 50px;text-align: center;}

}

/********************모바일********************/
@media all and (max-width:767px){

/*하이라이트 광고*/
.masonry-layout.columns-4{--columns: 1;}

#view_detail .inner .detail_adimg{width: calc(100% - 40px);}
#view_detail .inner .detail_adimg.one{width: calc(100% - 40px);}
#view_detail .inner .img_layer{width: calc(100% - 80px);}
#view_detail .inner .swiper-button-next,
#view_detail .inner .swiper-button-prev{width: 30px;height: 30px;background-size: 15px auto;}
#view_detail .inner .txt_box{bottom: 60px;width: calc(100% - 40px);}

}


/********************웹********************/
@media all and (min-width:1025px) {

}