@charset "utf-8";
/* main_common */
.main_section_title h2{font-size: 20px; line-height: 1; color: #BE9C58;}
.main_section_title p{margin-top:16px; font-size: 32px; font-weight: bold; line-height: 1.35; }

.btn_wrap{display: flex; justify-content: flex-start; margin-top:48px;}
.btn_wrap a{padding:12px 22px 12px 30px; display: flex; justify-content: space-between; align-items: center; width: 210px; border-radius: 100px; background-color: #ffffff; color: #444444; font-weight: bold; box-shadow: 0 0 16px 4px rgba(0,0,0,.08); transition: color .3s, background-color .3s;}
.btn_wrap a:hover{color: #ffffff; background-color: #343434; }


/* 비주얼 */
.main_visual{position: relative;}
.main_visual .visual_wrap .slide_item{position: relative; width: 100%; height: 600px; background-position: center; background-repeat: no-repeat; background-size: cover;}
.main_visual .visual_wrap .slide_item_01{background-image: url("../../images/main/main_slider_01.jpg");}
.main_visual .visual_wrap .slide_item_02{background-image: url("../../images/main/main_slider_02.jpg");}
.main_visual .visual_wrap .slide_item .text_wrap{position: absolute; top:108px; left:calc((100% - 1200px)/2);}
.main_visual .visual_wrap .slide_item .text_wrap .visual_title{font-family: 'IropkeBatang',serif; font-size:48px; line-height: 1.35; opacity: 0; transform: translateY(20px); transition:opacity 3s, transform 5s; }
.main_visual .visual_wrap .slide_item .text_wrap .visual_sub_desc{font-size: 20px; line-height: 1.5; opacity: 0; transform: translateY(10px); transition: opacity 3s, transform 6s;}
.main_visual .visual_wrap .slide_item .text_wrap .btn_wrap{margin-top:48px; display: flex; opacity: 0; transform: translateY(30px); transition: opacity 3s, transform 3s;}
.main_visual .visual_wrap .slide_item .text_wrap .btn_wrap a{padding:12px 28px; width: 180px;}

.main_visual .visual_wrap .slide_item.slick-active .text_wrap .visual_title{opacity: 1; transform: translateY(0); }
.main_visual .visual_wrap .slide_item.slick-active .text_wrap .visual_sub_desc{opacity: 1; transform: translateY(0); }
.main_visual .visual_wrap .slide_item.slick-active .text_wrap .btn_wrap{opacity: 1; transform: translateY(0); }
/* .main_visual .visual_wrap .slide_item_01  .text_wrap .visual_title{color: #ffffff;} */
.main_visual .visual_wrap .slide_item_01  .text_wrap .visual_sub_desc{margin-top: 20px; /*color: #ffffff;*/}
.main_visual .visual_wrap .slide_item_02  .text_wrap .visual_title{font-family: 'InkLipquid',serif; font-size: 60px; line-height: 1;}
.main_visual .visual_wrap .slide_item_02  .text_wrap .visual_sub_title{ display: block; font-size: 44px; opacity: 0; transform: translateY(20px); transition: opacity 3s, transform 6s;}
.main_visual .visual_wrap .slide_item_02.slick-active .text_wrap .visual_sub_title{opacity: 1; transform: translateY(0); }

/* 슬라이더 버튼 */
.main_visual .visual_slider_btn{position: absolute; top:50%; transform: translateY(-50%); width: 48px; height: 64px; background-color: #BE9C58;}
.main_visual .visual_slider_btn.vs_prev{left:0;}
.main_visual .visual_slider_btn.vs_next{right:0;}
.main_visual .visual_slider_btn::before{content: ""; position: absolute; top:50%; left:50%; display: block; width: 18px; height: 18px; border-top:2px solid #ffffff;  }
.main_visual .visual_slider_btn.vs_prev::before{border-left: 2px solid #ffffff; transform: translate(-35%, -50%) rotate(-45deg);}
.main_visual .visual_slider_btn.vs_next::before{border-right: 2px solid #ffffff; transform: translate(-65%, -50%) rotate(45deg);}
/* 슬라이더 dot */
.main_visual .vs_dot_wrap{position: absolute; bottom:80px; left:50%; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; }
.main_visual .vs_dot_wrap .slick-dots{margin:0 -5px; display: flex; align-items: center;}
.main_visual .vs_dot_wrap .slick-dots li{padding: 0 5px; display: block;}
.main_visual .vs_dot_wrap .slick-dots li button{display: block; width: 12px; height: 12px; background-color: #ffffff; border-radius: 50%; box-shadow: 0 0 8px rgba(0,0,0,.25);  }
.main_visual .vs_dot_wrap .slick-dots li button:focus { outline-offset: 2px;}
.main_visual .vs_dot_wrap .slick-dots li.slick-active button{background-color: #BE9C58;}
.main_visual .vs_dot_wrap .btn_play{position: relative; margin-left:20px; display:block; width:12px; height:16px; cursor: pointer; font-size: 0; line-height: 0;}
/* 슬라이더 정지, 시작 버튼 */
.main_visual .vs_dot_wrap .btn_play:before,
.main_visual .vs_dot_wrap .btn_play:after {content: ""; position: absolute; top:0; display:block; width:3px; height:100%; background: #ffffff; box-shadow: 0 0 8px rgba(0,0,0,.25); }
.main_visual .vs_dot_wrap .btn_play:before{left:0;}
.main_visual .vs_dot_wrap .btn_play:after{right:0;}
.main_visual .vs_dot_wrap .btn_play.on::before{width:0; height:0; border-top:8px solid transparent; background: none;  border-bottom:8px solid transparent; border-right: 0px solid transparent; border-left: 12px solid  #ffffff;  }
.main_visual .vs_dot_wrap .btn_play.on::after{display: none;}
.main_visual .vs_dot_wrap .btn_play:focus { outline-offset: 2px;}

/* 메인 서비스 */
.main_service{padding: 118px 0 30px; }
.main_service .main_section_con{margin-top:36px;}
.main_service .main_section_con .main_service_item{display: flex; align-items: center;}
.main_service .main_section_con .main_service_item>div{width: 50%;}
.main_service .main_section_con .main_service_item .img_wrap{height: 435px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.main_service .main_section_con .main_service_item.item_1 .img_wrap{background-image: url("../../images/main/service_01.jpg");}
.main_service .main_section_con .main_service_item.item_2 .img_wrap{background-image: url("../../images/main/service_02.jpg");}
.main_service .main_section_con .main_service_item .text_wrap{padding:40px;}
.main_service .main_section_con .main_service_item .text_wrap h3{font-size: 26px; line-height: 1.5; color: #444444;}
.main_service .main_section_con .main_service_item .text_wrap p{margin-top: 16px; color: #666666;}
/* item2 */
.main_service .main_section_con .main_service_item.item_2{flex-direction: row-reverse;} 
.main_service .main_section_con .main_service_item.item_2 .text_wrap{text-align: right;}
.main_service .main_section_con .main_service_item.item_2 .text_wrap .btn_wrap{justify-content: flex-end;}

.main_intro {position: relative; padding:200px 0 72px;}
.main_intro::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; background-color: #F3E6CB; clip-path: polygon(0 50%, 100% 15%, 100% 100%, 0 100%);}
.main_intro::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: #D9CEB8; clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);}
.main_intro .main_section_title{text-align: center;}
.main_intro .main_section_title h2 {color: #000000;}
.main_intro .main_intro_con{margin-top: 28px;}
.main_intro .main_intro_con .text_wrap h3{font-size:26px; text-align: center; line-height: 1.5; color: #444444;}
.main_intro .main_intro_con .text_wrap .btn_wrap{margin-top:68px; justify-content: center;}

/* 온라인 추모관 */
.main_remembrance{padding:137px 0 197px; background: url("../../images/main/main_remembrance_bg.jpg") no-repeat center right / cover;}
.main_remembrance .main_section_title{display: flex; justify-content: space-between; align-items: baseline;}
.main_remembrance .main_section_title .title_inner{display: flex; align-items: baseline;}
.main_remembrance .main_section_title .title_inner h2{font-size: 32px; color: #000000;}
.main_remembrance .main_section_title .title_inner p{margin-left:15px; font-size:1em; font-weight: 400; color:#8F8F8F;}
.main_remembrance .main_section_title .more_btn{margin-left: 20px;}
.main_remembrance .main_section_title .more_btn a{display: flex; align-items: center;}
.main_remembrance .main_section_title .more_btn a i{margin-left:14px;}
.main_remembrance .main_remembrance_con{margin-top:24px}
.main_remembrance .main_remembrance_con .remembrance_list{margin: 0 -14px; display: flex;}
.main_remembrance .main_remembrance_con .remembrance_list .remembrance_item{padding: 0 14px; width: 25%;}
.main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a{position: relative; padding:48px 40px; background-color: #ffffff; overflow: hidden;}
.main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a::before{content: ""; position: absolute; top: 0; left: 0; display: block; box-sizing: border-box; width: 100%; height: 100%; border:0 solid transparent; transition: border .3s;}
.main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a:hover::before{border:16px solid #BE9C58;}
.main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a h3{font-size:20px; line-height:1.5; color: #444444;}
.main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a p{margin-top:24px; color:#6E6E6E; }
.main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a span{margin-top: 72px; display: block; color:#6E6E6E;}

/* 오시는길 */
.main_directions{padding:109px 0 0;}
.main_directions .inner_wrap{margin:0 -20px; display: flex;}
.main_directions .inner_wrap>article{padding:0 20px; width: 50%;}
.main_directions .inner_wrap .main_section_title{margin-top:24px;}
.main_directions .main_section_title .directions_info{margin-top: 20px;}
.main_directions .main_section_title .directions_info p{margin-top: 0; font-size: 1em; line-height: 1.75; font-weight: 400; color: #444444;}
.main_directions .main_section_title .directions_info p span{font-weight: 500;}
.main_directions .main_section_title .btn_wrap{margin-top: 64px;}


@media(max-width:1600px) {
 

}

@media(max-width:1440px) {
  /* 비주얼 */
  .main_visual .visual_wrap .slide_item .text_wrap {top: 108px; left: 100px; }
  .main_visual .vs_dot_wrap {bottom: 60px;}
  .main_service .main_section_con .main_service_list {margin: 0 -10px;}
  .main_service .main_section_con .main_service_list li {padding: 0 10px;}
 


} 

@media(max-width:1280px){
  /* main_common */
  .main_section_title h2 {font-size: 18px; }
  .main_section_title p {margin-top: 12px; font-size: 30px;}
  .btn_wrap {margin-top: 32px;}
  .btn_wrap a {width: 190px; font-size: 1em;}

  /* 비주얼 */
  .main_visual .visual_wrap .slide_item { height: 560px;}
  .main_visual .visual_wrap .slide_item .text_wrap {top: 80px; }
  .main_visual .visual_wrap .slide_item .text_wrap .visual_title {font-size: 40px;}
  .main_visual .visual_wrap .slide_item .text_wrap .visual_sub_desc {font-size: 18px;}
  .main_visual .visual_wrap .slide_item .text_wrap .btn_wrap {margin-top: 36px;}
  .main_visual .visual_wrap .slide_item .text_wrap .btn_wrap a {width: 160px; font-size: 16px;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_title { font-size: 52px;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_sub_title {font-size: 40px;}
  .main_visual .vs_dot_wrap .slick-dots {margin: 0px -8px;}
  .main_visual .vs_dot_wrap .slick-dots li {padding: 0 8px;}
  .main_visual .vs_dot_wrap .slick-dots li button {width: 10px; height: 10px;}
  .main_visual .vs_dot_wrap .btn_play {margin-left: 16px;}

  /* 장례절차 및 서비스 */
  .main_service .main_section_con .main_service_item .text_wrap h3 {font-size: 24px;}
  .main_service .main_section_con .main_service_item .text_wrap p {margin-top: 8px;}

  /* 온라인 추모관 */
  .main_remembrance .main_section_title .title_inner h2 {font-size: 26px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a {padding: 32px 28px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a:hover::before{border-width:12px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a p {margin-top: 10px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a span {margin-top: 56px;}
  
}


@media(max-width:1024px) {   
  /* main_common */
  .main_section_title h2 {font-size: 18px; }
  .main_section_title p {font-size: 28px;}
  .btn_wrap {margin-top: 28px;}
  .btn_wrap a {width: 190px; font-size: 1em;}


  /* 비주얼 */
  .main_visual .visual_wrap .slide_item { height: 440px;}
  .main_visual .visual_wrap .slide_item .text_wrap .visual_title { font-size: 36px;}   
  .main_visual .visual_wrap .slide_item_01 .text_wrap .visual_sub_desc {margin-top: 12px;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_title {font-size: 48px;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_sub_title {font-size: 32px;}
  .main_visual .visual_wrap .slide_item .text_wrap .btn_wrap {margin-top: 28px;}
  .main_visual .visual_slider_btn {width: 40px; height: 56px;}
  .main_visual .visual_slider_btn::before {width: 15px; height: 15px;}
  .main_visual .vs_dot_wrap {bottom: 40px;}
  .main_visual .vs_dot_wrap .slick-dots {margin: 0px -4px;}
  .main_visual .vs_dot_wrap .slick-dots li {padding: 0 4px;}



  /* 장례절차 및 상품 안내*/
  .main_service .main_section_con .main_service_item .img_wrap {height: 320px;}
  .main_service .main_section_con .main_service_item .text_wrap h3 {font-size: 20px;}
  
  /* 나눔애 소개 */
  .main_intro .main_intro_con .text_wrap h3 {font-size: 24px;}
  .main_intro .main_intro_con .text_wrap .btn_wrap {margin-top: 56px;}

  /* 온라인 추모관 */
  .main_remembrance {padding: 120px 0 160px;}
  .main_remembrance .main_remembrance_con .remembrance_list { margin: -10px; flex-wrap: wrap;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item {padding:10px; width: 50%;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a {padding: 24px 20px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a span {margin-top: 36px;}
}


@media(max-width:768px) {   
  /* main_common */
  .btn_wrap a { width: 172px; font-size: 1em;}

  /* 비주얼 */
  .main_visual .visual_wrap .slide_item { height: 400px;}
  .main_visual .visual_wrap .slide_item .text_wrap .visual_title { font-size: 32px;}
  .main_visual .visual_wrap .slide_item .text_wrap .visual_sub_desc {font-size: 16px;}
  .main_visual .visual_wrap .slide_item .text_wrap .btn_wrap a {padding: 9px 28px; width: 148px;  font-size: 1em;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_title {font-size: 40px;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_sub_title {font-size: 28px;}
  .main_visual .visual_slider_btn {width: 36px; height: 48px;}
  .main_visual .visual_slider_btn::before {width: 12px; height: 12px;}
  .main_visual .vs_dot_wrap .btn_play {height: 14px;}
 
/* 장례절차 및 상품안내 */
  .main_service {padding: 80px 0 30px;}
  .main_service .main_section_con .main_service_item .text_wrap {padding: 28px;}
  .main_service .main_section_con .main_service_item .text_wrap h3 br{display: none;}

/* 나눔애 소개 */
  .main_intro {padding: 180px 0 72px;}
  .main_intro::before {clip-path: polygon(0 50%, 100% 21%, 100% 100%, 0 100%);}
  .main_intro::after {clip-path: polygon(0 15%, 100% 37%, 100% 100%, 0 100%);}
  .main_intro .main_intro_con .text_wrap h3 {font-size: 20px;}
  .main_intro .main_intro_con .text_wrap .btn_wrap {margin-top: 48px;}

  .main_remembrance .main_section_title {align-items: flex-end;}
  .main_remembrance .main_section_title .title_inner {display: block;}
  .main_remembrance .main_section_title .title_inner h2 {font-size: 24px;}
  .main_remembrance .main_section_title .title_inner p {margin-left: 0;}
  

  /*  */
  
  .main_directions .inner_wrap {margin: 0; display: block;}
  .main_directions .inner_wrap>article {padding: 0; width: 100%;}
  .main_directions .main_section_title p br{display:none;}
  .main_directions .main_section_title .directions_info {margin-top: 10px;}
  .main_directions .main_section_title .btn_wrap {margin-top: 18px;}
  .main_directions .main_directions_con{margin-top: 40px;}
  .main_directions .main_directions_con .map_wrap iframe{height: 420px;}


}


@media(max-width:540px) {
  /* main common */
  .main_section_title{text-align: center;}
  .main_section_title h2 {font-size: 16px;}
  .main_section_title p {font-size: 24px;}
  .btn_wrap {margin-top: 16px;}
  .btn_wrap a {width: 156px; padding: 12px 18px 12px 24px;  box-shadow: 0 0 12px 0  rgb(0 0 0 / 0.08);}
  .btn_wrap a .icon_24 {width: 20px; height: 20px;}

  .main_visual .visual_wrap .slide_item { height: 360px;}
  .main_visual .visual_wrap .slide_item .text_wrap {top:60px; left: 5%;}  
  .main_visual .visual_wrap .slide_item .text_wrap .visual_title {font-size: 28px;}
  .main_visual .visual_wrap .slide_item .text_wrap .visual_sub_desc {font-size: 1em;}
  .main_visual .visual_wrap .slide_item .text_wrap .btn_wrap {margin-top: 24px;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_title {font-size: 36px;}
  .main_visual .visual_wrap .slide_item_02 .text_wrap .visual_sub_title {font-size: 24px;}
  .main_visual .visual_wrap .slide_item .text_wrap .btn_wrap a {padding: 12px 20px; width: 120px;}
  .main_visual .vs_dot_wrap {bottom:14px; left: calc(100% - 140px);}
  .main_visual .visual_slider_btn {top: 100%; transform: translateY(-100%); width: 40px; height: 40px; }
  .main_visual .visual_slider_btn.vs_prev {left: inherit; right: 45px;}
  

/* 장례절차 및 상품안내 */
  .main_service .main_section_con {margin-top: 20px;}
  .main_service .main_section_con .main_service_item {display: block;}
  .main_service .main_section_con .main_service_item>div {width: 100%;}
  .main_service .main_section_con .main_service_item .img_wrap {margin: 0 auto; width: 90%; height: 230px; }  
  .main_service .main_section_con .main_service_item .text_wrap {padding: 10px 5% 0; text-align: center;}
  .main_service .main_section_con .main_service_item .text_wrap h3 {font-size: 18px;}
  .main_service .main_section_con .main_service_item .text_wrap p {margin-top: 0;}
  .main_service .main_section_con .main_service_item .text_wrap .btn_wrap {justify-content: center;}
  .main_service .main_section_con .main_service_item.item_2 {margin-top:40px; }
  .main_service .main_section_con .main_service_item.item_2 .text_wrap {text-align: center;}
  .main_service .main_section_con .main_service_item.item_2 .text_wrap .btn_wrap {justify-content: center;}

  /* 나눔애소개 */
  .main_intro {padding: 130px 0 64px;}
  .main_intro::after {clip-path: polygon(0 10%, 100% 28%, 100% 100%, 0 100%);}
  .main_intro::before {clip-path: polygon(0 30%, 100% 15%, 100% 100%, 0 100%);}
  .main_intro .main_intro_con {margin-top: 24px;}
  .main_intro .main_intro_con .text_wrap h3 {font-size: 18px;}
  .main_intro .main_intro_con .text_wrap h3 br{display: none;}
  .main_intro .main_intro_con .text_wrap .btn_wrap {margin-top: 28px;}

  /* 온라인 추모관 */
  .main_remembrance {padding: 80px 0 120px;}
  .main_remembrance .main_section_title {display: block;}
  .main_remembrance .main_section_title .more_btn {margin-top: 20px; display: flex; justify-content: flex-end;}
  .main_remembrance .main_remembrance_con {margin-top: 4px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a h3 {font-size: 18px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a span {margin-top: 24px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a:hover::before {border-width: 8px;}

  .main_directions {padding: 80px 0 0;}
  .main_directions .main_section_title .directions_info {margin-top: 4px;}
  .main_directions .main_section_title .btn_wrap {margin-top: 16px; justify-content: center;}
  .main_directions .main_directions_con {margin-top: 32px;}
  .main_directions .main_directions_con .map_wrap iframe{height: 360px;}
}

@media(max-width:480px) { 
  .btn_wrap a {width: 148px;}

  .main_remembrance .main_remembrance_con .remembrance_list { margin: -5px; flex-wrap: wrap;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item {padding: 5px; width: 100%;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a {padding: 20px 16px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a span {margin-top: 16px;}
  .main_remembrance .main_remembrance_con .remembrance_list .remembrance_item a p {margin-top: 4px;}
}

@media(max-width:360px) {  
  .main_visual .visual_wrap .slide_item .text_wrap {top: 40px;}
  .main_visual .visual_wrap .slide_item {height: 280px;}
  .main_visual .visual_wrap .slide_item .text_wrap .visual_title {font-size: 28px;}
  .main_intro_list .main_section_con .main_intro_links li a { height: 180px; }

}