@charset "utf-8";


/* 헤드 */
#head{position:fixed; border-bottom:1px solid rgba(255,255,255,0.5);}
#head::after{display:none;}
#head .head_box h1.logo_box a.logo{background-image:url("/nanum/site/builder/main/funeral/img/logo.png");}
#head .head_box h1.logo_box a.new_home{color:#fff; border:1px solid #fff;}

#menu_navi > .menu_area > ul > li > a span{color:#fff;}


/* 메인비주얼 */
.mvisual{position:relative;overflow:hidden; height:700px; margin:0 auto;}
.mvisual .swiper-slide::before{content: ""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.25); z-index:1;}
.mvisual .swiper-slide > img{position:absolute; left:50%; width:100%; height:100%; transform:translateX(-50%); object-fit:cover;}

.mvisual .mvisual_txt{display:flex; flex-direction:column; position:absolute; top:35%; left:50%; width:100%; max-width:1400px; transform:translateX(-50%); z-index:1;}
.mvisual .mvisual_txt p{color:#fff;}
.mvisual .mvisual_txt .btxt{font-size:5rem; font-weight:700;}
.mvisual .mvisual_txt .btxt .brown{color:#f4cd88;}
.mvisual .mvisual_txt .stxt{font-size:3.2rem;line-height:1.5;font-weight:400;}
.mvisual .mvisual_txt a.btn_go{display:inline-flex;justify-content:center;align-items:center;max-width:180px;height:50px;margin-top:50px;border-radius:50px;background:#fff;font-size:1.7rem;font-weight:700;text-align:center;}

.mvisual .slide1_add{margin-bottom:30px;font-size:1.9rem;font-weight:700;color:#003d6f;}
.mvisual .slide1_add img{display:block;margin-bottom:5px;}
.mvisual .slide2_add{position:absolute;bottom:0;right:100px;}

.mvisual .swiper-pagination{display:flex; align-items:flex-end; bottom:35%; left:50%; width:100%; max-width:1400px; transform:translateX(-50%); z-index:5;}
.mvisual .swiper-pagination .swiper-pagination-bullet{width:18px; height:3px;margin:0 5px;border-radius:0;background:#fff;opacity:.5;}
.mvisual .swiper-pagination .swiper-pagination-bullet-active{width:32px; height:7px;background:#f4cd88; opacity: 1;}

.mvisual .number_box{position: absolute; left:50%; bottom:50px; display:flex; justify-content:space-between; align-items:flex-end; width:100%; max-width:1400px; line-height:1; transform:translateX(-50%); z-index:1;}
.mvisual .number_box .number{position:relative; padding-left:20px; font-size:5rem; font-weight:800; color:#fff;}
.mvisual .number_box .number::before{content:""; position: absolute; left:0; top:50%; width:10px; height:10px; border-radius:50%; background:#f4cd88; transform:translateY(-50%);}
.mvisual .number_box .num_txt{font-size:2rem; font-weight:500; color:#fff; opacity: .7;}

.mvisual .swiper-slide-active .btxt{-webkit-animation:text-move-ani 0.5s ease-in-out both;animation:text-move-ani 0.5s ease-in-out both;-webkit-animation-delay:0.5s;animation-delay:0.5s;}
.mvisual .swiper-slide-active .stxt{-webkit-animation:text-move-ani 0.5s ease-in-out both;animation:text-move-ani 0.5s ease-in-out both;-webkit-animation-delay:0.5s;animation-delay:1.5s;}

/* 애니메이션 키프레임 */
@keyframes text-move-ani {
	from {
		opacity:0;
		filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1;
		filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}


/* 빈소이용현황 */
.title{margin-bottom:50px; text-align:center; font-size:3.5rem; font-weight:700;}

.msection1{position:relative; min-height:500px; padding:100px 0; background: url("/nanum/site/builder/main/funeral2/img/mortuary_bg.jpg") center / cover;}
.msection1::before, .msection1::after{content: ""; position: absolute; bottom:0; background-size: 100%; background-repeat: no-repeat;}
.msection1::before{left:0; width:418px; height:383px; background-image: url("/nanum/site/builder/main/funeral2/img/mortuary_img_bg01.png"); background-position:bottom left;  opacity: .3;}
.msection1::after{right:0; width:577px; height:847px; background-image: url("/nanum/site/builder/main/funeral2/img/mortuary_img_bg02.png"); background-position:bottom right;}
.msection1 h1.title{position:relative; text-align:center; font-family: 'GowunBatang'; font-size:3rem; color:#888; font-weight:normal;}
.msection1 h1.title::before{content: ""; display: block; width:44px; height:64px; margin:0 auto 40px auto; background-image: url("/nanum/site/builder/main/funeral2/img/mortuary_tit.png"); background-size: cover; background-repeat: no-repeat; background-position: center;}

.msection1 .mortuary{position:relative; width:100%; max-width:1400px; margin:50px auto 0 auto; z-index:1;}
.msection1 .mortuary h2{font-size:2.5rem; font-weight:700;}
.msection1 .mortuary > ul{margin-top:30px;}
.msection1 .mortuary > ul > li{padding:40px 30px; border-radius:20px; box-shadow:10px 10px 15px rgba(0,0,0,0.15); background:#fff; box-sizing:border-box;}
.msection1 .mortuary > ul > li:nth-child(n+2){margin-top:30px;}

.msection1 .mortuary > ul > li .tit_box{display:flex; justify-content:space-between;}
.msection1 .mortuary > ul > li .tit_box .room_name{display:flex; gap:20px; align-items:center;}
.msection1 .mortuary > ul > li .tit_box .room_name .room{min-width:120px; padding:10px 0; text-align:center; font-size:2rem; color:#fff; font-weight:700; background:#af833e; border-radius:50px; box-sizing:border-box;}
.msection1 .mortuary > ul > li .tit_box .room_name .name{font-size:2.3rem; font-weight:700;}
.msection1 .mortuary > ul > li .tit_box .map{position: relative; display:flex; gap:10px; align-items:center;}
.msection1 .mortuary > ul > li .tit_box .map::before{content: ""; display: inline-block; width:21px; height:24px; background-image: url("/nanum/site/builder/main/funeral2/img/mortuary_map.png"); background-size: cover; background-repeat: no-repeat;}

.msection1 .mortuary > ul > li .family_box{display:flex; gap:20px; margin-top:30px; padding-top:30px; border-top:1px dashed #dbdbdb;}
.msection1 .mortuary > ul > li .family_box .family_name{width:55%;}
.msection1 .mortuary > ul > li .family_box .family_name .tit{display:flex; gap:10px; font-size:2rem; font-weight:700;}
.msection1 .mortuary > ul > li .family_box .family_name .tit::before{content:""; display:inline-block; width:10px; height:10px; margin-top:10px; border-radius:50px; background:#af833e;}
.msection1 .mortuary > ul > li .family_box .family_name .name{display:flex; gap:10px 0; flex-wrap:wrap; margin-top:20px;}
.msection1 .mortuary > ul > li .family_box .family_name .name dl{display:flex; gap:10px; width:50%; align-items:center;}
.msection1 .mortuary > ul > li .family_box .family_name .name dl dt{min-width:67px; padding:5px 0; align-self:flex-start; text-align:center; font-size:1.6rem; font-weight:700; border-radius:5px; background:#f3f3f3;}

.msection1 .mortuary > ul > li .family_box .family_name .name dl.wife{width:100%;}

.msection1 .mortuary > ul > li .family_box .map_info{display:flex; gap:20px; width:45%;}
.msection1 .mortuary > ul > li .family_box .map_info .map_name{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; min-width:159px; padding:30px 0; text-align:center; border-radius:15px; background:#f3f3f3; box-sizing:border-box;}
.msection1 .mortuary > ul > li .family_box .map_info .map_name .tit{width:100%; align-self:flex-start; font-size:2rem; font-weight:700;}



.msection1 .mortuary .plus{position: absolute; right: 0; top:0;}
.msection1 .mortuary .plus a{position:relative; display:flex; gap:10px; align-items:center; font-size:2rem;}
.msection1 .mortuary .plus a:after{content: ""; display:inline-block; width:21px; height:12px; background-image: url("/nanum/site/builder/main/funeral2/img/mortuary_plus.png"); background-size: cover; background-repeat: no-repeat; background-position: center;}



/* 찾아오시는 길 */
.msection2{padding:80px 0;}

.loction_map{width:100%; max-width:1400px; margin:0 auto;}
.loction_map .map{width:100%; border-radius:20px;}
.loction_map .map .wrap_controllers{display:none;}
.loction_map .map .map_border{display:none;}

.loction_map .location_box{display:flex; gap:40px; margin-top:30px;}

.loction_map .location_box .lo_info{width:65%;}
.loction_map .location_box .lo_info .lo_info_list > ul{display:flex; gap:10px;}
.loction_map .location_box .lo_info .lo_info_list > ul > li{flex:1;}
.loction_map .location_box .lo_info .lo_info_list > ul > li a{position:relative; display:block; padding:10px 0; width:100%; text-align:center; font-weight:700; border-radius:50px; box-sizing:border-box; transition:.3s; overflow:hidden;}
.loction_map .location_box .lo_info .lo_info_list > ul > li a::before{content:""; position: absolute; left:0; top:0; width:0; height:100%; transition:.3s; z-index:-1;}

.loction_map .location_box .lo_info .lo_info_list > ul > li.parking a{color:#3159a2; border:1px solid #3159a2;}
.loction_map .location_box .lo_info .lo_info_list > ul > li.parking a::before{background:#3159a2;}
.loction_map .location_box .lo_info .lo_info_list > ul > li.kakao_map a{color:#f7be27; border:1px solid #f7be27;}
.loction_map .location_box .lo_info .lo_info_list > ul > li.kakao_map a::before{background:#f7be27;}
.loction_map .location_box .lo_info .lo_info_list > ul > li.naver_map a{color:#58a231; border:1px solid #58a231;}
.loction_map .location_box .lo_info .lo_info_list > ul > li.naver_map a::before{background:#58a231;}
.loction_map .location_box .lo_info .lo_info_list > ul > li.google_map a{color:#838383; border:1px solid #838383;}
.loction_map .location_box .lo_info .lo_info_list > ul > li.google_map a::before{background:#838383;}

.loction_map .location_box .lo_info .table_info{margin-top:50px;}
.loction_map .location_box .lo_info .table_info dl{display: flex; gap:40px;}
.loction_map .location_box .lo_info .table_info dl:nth-child(n+2){padding-top:30px; margin-top:30px; border-top:1px dashed #d5d5d5;}
.loction_map .location_box .lo_info .table_info dl > dt{position:relative; align-self:center; text-align:center; font-size:2.3rem; font-weight:700;}
.loction_map .location_box .lo_info .table_info dl > dt::after{content: ""; display: block; width:73px; height:67px; background-size: cover; background-position: center; background-repeat: no-repeat;}

.loction_map .location_box .lo_info .table_info dl > dt.bus::after{background-image: url("/nanum/site/builder/main/funeral/img/bus_icon.png");}
.loction_map .location_box .lo_info .table_info dl > dt.car::after{background-image: url("/nanum/site/builder/main/funeral/img/car_icon.png");}

.loction_map .location_box .lo_info .table_info dl > dd .bus_number{display:flex; gap:20px;}
.loction_map .location_box .lo_info .table_info dl > dd .bus_number:nth-child(n+2){margin-top:15px;}
.loction_map .location_box .lo_info .table_info dl > dd .bus_number .tit{min-width:80px; font-weight:700;}
.loction_map .location_box .lo_info .table_info dl > dd .bus_number ul{display:flex; gap:10px;}
.loction_map .location_box .lo_info .table_info dl > dd .bus_number ul > li{padding:0 10px; color:#fff; border-radius:5px; background:#dc823c;}

.loction_map .location_box .lo_info .table_info dl > dd .bus_txt{margin-top:20px; color:#555;}

.loction_map .location_box .lo_info .table_info dl > dd .car_info:nth-child(n+2){margin-top:30px;}
.loction_map .location_box .lo_info .table_info dl > dd .car_info .tit{font-weight:700;}
.loction_map .location_box .lo_info .table_info dl > dd .car_info .txt{margin-top:10px; font-size:1.6rem; color:#555;}

.loction_map .location_box .lo_add{position:relative; width:440px; box-shadow:15px 15px 25px rgba(0,0,0,0.25); border-radius:35px; background:#343434; overflow: hidden;}
.loction_map .location_box .lo_add::before, .loction_map .location_box .lo_add::after{content: ""; position: absolute; background-size:cover; background-position: center; background-repeat: no-repeat;}
.loction_map .location_box .lo_add::before{left:-50px; bottom:-10px; width:206px; height:266px; background-image: url("/nanum/site/builder/main/funeral/img/lo_add_bg01.png");}
.loction_map .location_box .lo_add::after{right:-50px; top:-10px; width:250px; height:226px; background-image: url("/nanum/site/builder/main/funeral/img/lo_add_bg02.png");}

.loction_map .location_box .lo_add_box{position:relative; margin:20px; padding:40px 0; border:1px solid rgba(244,205,136,0.3); border-radius:25px; z-index:1;}
.loction_map .location_box .lo_add_box dl{padding-top:160px; text-align:center; background-image: url("/nanum/site/builder/main/funeral/img/lo_add_tit.png"); background-position: top 10px center; background-repeat: no-repeat;}
.loction_map .location_box .lo_add_box dl > dt{font-size:3rem; color:#fff;}
.loction_map .location_box .lo_add_box dl > dt .clr_brown{color:#f4cd88;}
.loction_map .location_box .lo_add_box dl > dd{margin-top:50px; font-size:4.5rem; color:#fff; font-weight:700;}

.loction_map .location_box .lo_add_box .addras{margin-top:25px; text-align:center; font-size:2.3rem; color:#fff;}


/* 장례식장 소개 링크 */
.msection3{position:relative; padding:80px 0; background:url("/nanum/site/builder/main/funeral/img/msection3_bg01.jpg") no-repeat center / cover;}
.msection3::before{content: ""; position: absolute; left:0; top:0; width: 100%; height: 100%; background: rgba(0,0,0,0.1);}
.msection3 .msection_box{position:relative; width:100%; max-width:1400px; margin:0 auto;}
.msection3 .msection_box ul{display: flex; gap:20px; flex-wrap:wrap;}
.msection3 .msection_box ul > li{position:relative; align-self:flex-start; width:calc(25% - 15px); border-radius:20px; overflow:hidden; box-shadow:5px 5px 15px rgba(0,0,0,.35); transition:.3s;}
.msection3 .msection_box ul > li.icon01{background: url("/nanum/site/builder/main/funeral/img/msection3_box_bg01.jpg") no-repeat center/ cover;}
.msection3 .msection_box ul > li.icon02{background: url("/nanum/site/builder/main/funeral/img/msection3_box_bg02.jpg") no-repeat center/ cover;}
.msection3 .msection_box ul > li.icon03{background: url("/nanum/site/builder/main/funeral/img/msection3_box_bg03.jpg") no-repeat center/ cover;}
.msection3 .msection_box ul > li.icon04{background: url("/nanum/site/builder/main/funeral/img/msection3_box_bg04.jpg") no-repeat center/ cover;}

.msection3 .msection_box ul > li a{position:relative; display: block; width:100%; height:100%; padding:40px 30px 90px 30px; color:#fff; box-sizing: border-box;}
.msection3 .msection_box ul > li a::before{content: ""; position: absolute; right:30px; bottom:30px; width:50px; height:48px; background-size: cover; background-repeat: no-repeat; background-position: center;}
.msection3 .msection_box ul > li a .tit{font-size:2.3rem; font-weight:600;}
.msection3 .msection_box ul > li a .txt{margin-top:10px;}

.msection3 .msection_box ul > li.icon01 a::before{background-image: url("/nanum/site/builder/main/funeral/img/msection3_icon01.png");}
.msection3 .msection_box ul > li.icon02 a::before{background-image: url("/nanum/site/builder/main/funeral/img/msection3_icon02.png");}
.msection3 .msection_box ul > li.icon03 a::before{background-image: url("/nanum/site/builder/main/funeral/img/msection3_icon03.png");}
.msection3 .msection_box ul > li.icon04 a::before{background-image: url("/nanum/site/builder/main/funeral/img/msection3_icon04.png");}


/******************** 메인 스크롤 ********************/
@media all and (max-width:1280px){

	.main{min-width:1280px; overflow-x:scroll;}

}

/********************태블릿********************/
@media all and (max-width:1024px){
	
	/* 헤드 */
	.viewAllMenu > button span{background:#fff;}
	.viewAllMenu > button::before, .viewAllMenu > button::after{background: #fff;}
	
	/* 메인비주얼 */
	.main{min-width:auto; overflow-x:auto;}
	
	.mvisual{height: 500px;}
	.mvisual .mvisual_txt{top:25%; width:95%;}
	.mvisual .mvisual_txt .btxt{font-size:4rem;}
	.mvisual .mvisual_txt .stxt{font-size:2.8rem;}
	
	.mvisual .swiper-pagination{width:95%;}
	
	.mvisual .number_box{flex-wrap:wrap; width:95%;}
	.mvisual .number_box .number{font-size:4rem;}
	.mvisual .mvisual_txt .stxt{font-size:2.8rem;}
	.mvisual .number_box .num_txt{margin-top:10px;}
	
	/* 빈소이용현황 */
	.msection1 h1.title{padding:0 2vh;}
	.msection1 .mortuary{width:auto; margin:50px 2vw 0 2vw;}
	.msection1 .mortuary > ul > li .family_box{flex-direction:column;}
	.msection1 .mortuary > ul > li .family_box .family_name{width:100%;}
	.msection1 .mortuary > ul > li .family_box .map_info{width:100%}
	.msection1 .mortuary > ul > li .family_box .map_info .map_name{width:calc(33.333% - 13px); min-width:auto;}

	/* 찾아오시는 길 */
	.loction_map{width:auto; padding:0 2vw;}
	.loction_map .map .wrap_map{height:400px !important;}
	.loction_map .location_box{flex-direction:column;}
	.loction_map .location_box .lo_info{width:100%;}
	.loction_map .location_box .lo_add{width:100%;}
	.loction_map .location_box .lo_add_box dl > dd{margin-top:0;}
	
	/* 장례식장 소개 링크 */
	.msection3 .msection_box{width:auto; padding:0 2vw;}
	.msection3 .msection_box ul > li{width:calc(50% - 10px); align-self:auto;}
	
	br.none{display:none;}
	
	
	
}
/********************모바일********************/
@media all and (max-width:767px){

	/* 메인비주얼 */
	.mvisual{height:400px;}
	.mvisual .mvisual_txt .btxt{font-size:3.5rem;}
	.mvisual .mvisual_txt .stxt{font-size:2.5rem;}
	
	.mvisual .swiper-pagination{bottom:40%; justify-content:center;}
	
	.mvisual .number_box{line-height:normal;}
	.mvisual .number_box .number{padding-left:15px; font-size:2.5rem;}
	.mvisual .number_box .number::before{width:8px; height:8px;}
	.mvisual .number_box .num_txt{font-size:2rem;}
	
	/* 빈소이용현황 */
	.msection1 h1.title::before{margin:0 auto 20px auto;}
	
	.msection1{padding:50px 0;}
	.msection1::before{width:218px; height:100%;}
	.msection1::after{width:277px; height:100%;}
	
	.msection1 .mortuary > ul{margin-top:15px;}
	.msection1 .mortuary > ul > li{padding:3vh 2vh;}
	.msection1 .mortuary > ul > li .tit_box{align-items:flex-end; gap:20px;}
	.msection1 .mortuary > ul > li .tit_box .room_name{flex-direction:column; gap:10px;}
	.msection1 .mortuary > ul > li .tit_box .room_name .room{min-width:100px; padding:5px 0;}
	.msection1 .mortuary > ul > li .family_box{margin-top:20px; padding-top:20px;}
	.msection1 .mortuary > ul > li .family_box .map_info{flex-wrap:wrap; gap:10px;}
	.msection1 .mortuary > ul > li .family_box .map_info .map_name{width:calc(50% - 5px); padding:1vh;}
	.msection1 .mortuary > ul > li .family_box .map_info .map_name:last-child{width:100%;}
	.msection1 .mortuary > ul > li .family_box .family_name .name{gap:5px 0;}
	.msection1 .mortuary > ul > li .family_box .family_name .name dl{width:100%;}
	
	/* 찾아오시는 길 */
	.msection2{padding:4vh 0;}
	.loction_map .map .wrap_map{height:300px !important;}
	.loction_map .location_box .lo_info .lo_info_list > ul{flex-wrap:wrap;}
	.loction_map .location_box .lo_info .lo_info_list > ul > li{flex:none; width:calc(50% - 10px);}
	
	.loction_map .location_box .lo_info .table_info dl{gap:20px;}
	.loction_map .location_box .lo_info .table_info dl > dd .bus_number{flex-direction:column; gap:10px;}
	.loction_map .location_box .lo_info .table_info dl > dd .bus_number ul{flex-wrap:wrap;}
	
	.loction_map .location_box .lo_add_box{padding:3vw;}
	.loction_map .location_box .lo_add_box dl{padding-top:100px; background-size: 120px auto;}
	.loction_map .location_box .lo_add_box dl > dt{font-size:2.5rem;}
	.loction_map .location_box .lo_add_box dl > dd{font-size:3.5rem;}
	
	/* 장례식장 소개 링크 */
	.msection3{padding:4vh 0;}
	.msection3 .msection_box ul > li{width:100%;}
	.msection3 .msection_box ul > li a{padding:4vh 3vw 7vh 3vw;}
	.msection3 .msection_box ul > li a::before{right:20px; bottom:20px; width:40px; height:38px;}
	
}

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

	.title .tit_txt{font-size:2.5rem;}
	.slide_mortuary .swiper-button{width:32px; height:32px; background-size: 14px auto;}
	
}
	
/********************웹********************/
@media all and (min-width:1025px) {
	
		
	.slide_mortuary .swiper-button:hover{background-color:#333; background-image:url("/nanum/site/builder/main/funeral/img/slide_btn_on.png");}
	.loction_map .location_box .lo_info .lo_info_list > ul > li a:hover{color:#fff;}
	.loction_map .location_box .lo_info .lo_info_list > ul > li a:hover::before{width:100%;}
	
	.msection3 .msection_box ul > li:hover{margin-top:-30px;}
	
}