@charset "utf-8";

/* 메인헤드 */
#head{position: relative;top: 0;}
.top_wrap{position: relative;background: #edebe6;}
.top_wrap .wsize ul li a{font-weight: 600;color: #857154;}
.top_wrap .wsize ul li{border-color: rgb(133 113 84 / 30%);}
#head h1.logo a{background-image: url(/data/builder/logo_funeral.png);}
#menu_navi ul > li > a{color:#000;}

.viewAllMenu > button.btnViewAll span{background: #000;}

#mcontainer{position: relative; overflow: hidden;}

/* 비주얼 */
.mvisual_box{position:relative; display:flex; flex-direction:row-reverse; gap:50px; width:1280px; margin:30px auto 0 auto;}
.mvisual_box .mvisual{width: 100%; max-width:770px; height:530px;}
/*.mvisual:before{content:'';position:absolute;width:100%;height:100%;background: linear-gradient(180deg, rgb(0 0 0 / 10%), transparent, transparent, transparent);z-index: 2;}*/
.mvisual_box .mvisual .swiper-wrapper{border-radius:30px; overflow: hidden;}
.mvisual_box .mvisual .swiper-slide{position: relative;}
.mvisual_box .mvisual .swiper-slide img{width: 100%;height: 100%;object-fit: cover;}

.mvisual_box .mvisual .control{position:absolute;right:0; top: 0; width:460px; z-index:3;}
.mvisual_box .mvisual .control .pop_swiper-button-prev,
.mvisual_box .mvisual .control .pop_swiper-button-next{position: absolute; right: 70px; top:360px; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:#000; cursor:pointer; z-index:1;opacity: .5; transition:.3s;}
.mvisual_box .mvisual .control .pop_swiper-button-next{left:auto; right:0;}
.mvisual_box .mvisual .control .pop_swiper-button-prev::before,
.mvisual_box .mvisual .control .pop_swiper-button-next::before{content:"";display:block;width:20px;height:20px;background-image:url("/nanum/site/builder/main/funeral/img/slide_arrow.png"); background-size:100% auto; background-repeat: no-repeat;}
.mvisual_box .mvisual .control .pop_swiper-button-next::before{transform:rotate(180deg);}

.mvisual_box .mvisual .control .swiper-pagination{top: 90px; left:0; text-align: left;}
.mvisual_box .mvisual .control .swiper-pagination-bullet{margin-left:5px;width:10px;height:10px;background-color:#312951;opacity:.5;}
.mvisual_box .mvisual .control .swiper-pagination-bullet-active{background-color:#312951;opacity:1;padding: 0 10px;border-radius: 33px;}

.mvisual_box .visual_txt{width:calc(100% - 820px); margin-top:120px;}
.mvisual_box .visual_txt .btxt{font-size:5rem; font-weight:800; color:#312951;}
.mvisual_box .visual_txt .btxt2,
.mvisual_box .visual_txt .msub_tit{color:#666; font-size:2.3rem;}
.mvisual_box .visual_txt .btxt2{margin-top:30px;}



/**/
.mvisual_box .visual_txt .btxt{-webkit-animation:text-active-animation 0.5s ease-in-out both;animation:text-active-animation 0.5s ease-in-out both;-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.mvisual_box .visual_txt .btxt2{-webkit-animation:text-active-animation 0.5s ease-in-out both;animation:text-active-animation 0.5s ease-in-out both;-webkit-animation-delay:1s;animation-delay:1s;}
.mvisual_box .visual_txt .msub_tit{-webkit-animation:text-active-animation 0.5s ease-in-out both;animation:text-active-animation 0.5s ease-in-out both;-webkit-animation-delay:1.5s;animation-delay:1.5s;}
@keyframes text-active-animation{
	from{
		opacity:0;
		transform: translateY(50px); 
		filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
	}
	to{
		opacity:1;
		transform: translateY(0); 
		filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
	}
}

/* 빈소이용현황 */
.funeral_wrap{position:relative; margin:60px auto 80px auto;}
.funeral_wrap::after{content:""; position: absolute; right:-420px; top:-180px; width:738px; height:712px; background: url("/nanum/site/builder/main/funeral/img/funeral_bg.png") no-repeat right center / 100% auto; z-index:-1;}
.funeral_wrap h3{display: flex;justify-content: space-between;align-items: center;font-size: 3.6rem;font-weight:700;}
.funeral_wrap h3 a{position: relative;display:block;width:45px;height:45px;border:1px solid #dedede;border-radius:5px;font-size:0;text-indent:-99999px; background:#fff; transition:.3s;}
.funeral_wrap h3 a::before,
.funeral_wrap h3 a::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;transform:translate(-50%, -50%);background:#000;}
.funeral_wrap h3 a::after{width:2px;height:14px;}
.funeral_wrap h3 a img{width: 14px;height: 14px;font-size: 0; padding: 7px;padding-bottom: 12px;}
.funeral_wrap .funeral_home{width: 100%;}
.funeral_wrap .funeral_home .funeral_cont{overflow:hidden;padding-top: 20px;}
.funeral_wrap .funeral_home .funeral_cont .swiper-wrapper{justify-content: center;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide{max-width: 305px;border:1px solid #ccc;border-radius: 20px;background:#fff;box-sizing: border-box;transition:.3s;overflow: hidden;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_hu_info {padding: 20px 0 15px 0;text-align:center;background: #f3f3f3;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_hu_info .room{display: none;position:absolute;top:-18px;left:50%;min-width:120px;padding:10px;line-height:1;font-size:1.6rem;color:#fff;border-radius:50px;transform:translateX(-50%);background:#b78e4b;box-sizing:border-box;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_hu_info .name{font-size:2.3rem;font-weight: 700;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family{padding:20px;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl{display:flex;align-items: baseline;gap: 10px;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl:nth-child(n+2){margin-top:10px; padding-top:10px; border-top:1px dashed #ddd;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl:last-child{margin-bottom:0;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl dt{flex-shrink: 0;padding: 2px;width: 70px;background: #b78e4b;border-radius: 5px;color: #fff;font-size: 1.5rem;font-weight: 600;text-align: center;box-sizing: border-box;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl dd{overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;font-size: 1.55rem;}

.funeral_wrap .swiper-button-next, 
.funeral_wrap .swiper-button-prev{top: auto;bottom: 150px;width:45px;height:45px;border-radius:50%;background: #b2b2b2 url(/nanum/site/builder/main/main/img/link_arrow.png)no-repeat 50%/11px;background-repeat:no-repeat;background-position:center;}
.funeral_wrap .swiper-button-next{right: -70px;background-image:url(/nanum/site/builder/main/main/img/link_arrow.png);}
.funeral_wrap .swiper-button-prev{left: -70px;right:auto;transform: rotate(180deg);}
.funeral_wrap .swiper-button-next:after, 
.funeral_wrap .swiper-button-prev:after{display:none;}


.funeral_wrap .funeral_home .funeral_cont .loading {width: 100%;text-align: center;padding: 50px 0;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.funeral_wrap .funeral_home .funeral_cont .loading span {display: inline-block;width: 40px;height: 40px;border: 4px solid #f3f3f3;border-top: 4px solid #000;border-radius: 50%;animation: spin 1s linear infinite;margin-bottom: 15px;}
.funeral_wrap .funeral_home .funeral_cont .loading p {color: #333;font-size: 16px;margin: 0;}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


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

/* 팝업*/
.mmimg_w{top:0 !important;left:0 !important;}
.mmimg_in{width:auto !important;height:auto !important;}
.mmimg_in img{width: 100%;}

/* 비주얼 */
.mvisual_box{flex-direction:column; width:100%; margin:0 auto; padding:0 2vw; box-sizing:border-box;}
.mvisual_box .visual_txt{width:100%; margin-top:30px;}

.mvisual_box .mvisual{position:relative; margin:0 auto;}

.mvisual_box .mvisual .control{bottom:0; right:auto; left:50%; width:100%; transform:translateX(-50%);}
.mvisual_box .mvisual .control .swiper-pagination{top:auto; bottom:30px; left:0; text-align:center;}
.mvisual_box .mvisual .control .pop_swiper-button-prev,
.mvisual_box .mvisual .control .pop_swiper-button-next{right:auto; left:30px; top:50%; transform:translateY(-50%);}
.mvisual_box .mvisual .control .pop_swiper-button-next{left:auto; right:30px;}

/* 빈소이용현황 */
.funeral_wrap{padding: 0 2vw;box-sizing: border-box;margin: 40px auto;}
.funeral_wrap::after{right:-50px; top:auto; bottom:100px; width:538px; height: 512px;}
.funeral_wrap .funeral_home{width:100%;padding: 25px 0;min-height: auto;}
.funeral_wrap .swiper-button-next, 
.funeral_wrap .swiper-button-prev{bottom: 110px;display:none;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl dd{-webkit-line-clamp: 1;}
.funeral_wrap .funeral_home .funeral_cont{padding-top:0;}

}


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


/* 비주얼 */
.mvisual_box{gap:3vh;}
.mvisual_box .visual_txt{margin-top:3vh;}
.mvisual_box .visual_txt .btxt{font-size:4rem;}
.mvisual_box .visual_txt .btxt2{margin-top:1.5vh;}
.mvisual_box .visual_txt .btxt2, .mvisual_box .visual_txt .msub_tit{font-size:2rem;}

.mvisual_box .mvisual{height: 60vw; max-height: 430px;}
.mvisual .swiper-slide .mcont_txt{top: auto;bottom: 50px;padding: 0 3vw;height: auto;box-sizing: border-box;}
.mvisual .swiper-slide .mcont_txt .btxt{font-size:2.9rem;}
.control{display:none;}


/* 빈소이용현황 */
.funeral_wrap{margin: 30px auto;}
.funeral_wrap::after{bottom:150px; width:338px; height: 312px;}
.funeral_wrap h3{font-size:2.8rem;}
.funeral_wrap h3 a{width: 35px;height: 35px;}
.funeral_wrap .funeral_home{padding:0;padding-top: 10px;}
.funeral_wrap .funeral_home .funeral_cont .swiper-wrapper{justify-content: normal;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide{max-width: none;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_hu_info{padding:1.5vh 0;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_hu_info .room{min-width:100px; font-size: 1.7rem;margin-bottom: 10px;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family{padding:2vh;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl dt{font-size: 1.8rem;}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide .fu_family dl dd{font-size: 1.7rem;}
.funeral_wrap .swiper-button-next, 
.funeral_wrap .swiper-button-prev{display:block;width:30px;height:30px;background-size: 7px;}
.funeral_wrap .swiper-button-next{right:20px;} 
.funeral_wrap .swiper-button-prev{left:20px;}

}



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

.mvisual .swiper-slide-active img{animation:mvisual 3.5s 0.3s;animation-fill-mode:both;}
@keyframes mvisual{
	0%{transform:scale(1.25);}
	100%{transform:scale(1.00);}
}

.quick_menu ul li a:hover{gap:50px;}
.funeral_wrap h3 a:hover{border-color:#000; transform:rotate(90deg);}
.funeral_wrap .funeral_home .funeral_cont .swiper-slide:hover{transform:translateY(-10px);}
.mvisual .control .pop_swiper-button-prev:hover,
.mvisual .control .pop_swiper-button-next:hover{opacity:1;}

}