 

.visual {position:relative;z-index: 1;}
.visual .v_bgwrap{position:absolute; top:0;  left:0; width:100%; height:100%;  z-index:1;}
.visual .v_bgwrap>div{position:relative; width:100%; height:100%; overflow:hidden}
.visual .v_bgwrap::after{position:absolute;  top:0; left:0; width:100%; height:100%;opacity: 0.2;background-color: black;   z-index:2; content:''}
 
.visual .v_bg>div{position:absolute; top:0; left:0; width:100%; height:100%;}

.visual {position:relative;z-index: 1;}
.visual .v_bgwrap2{position:absolute; top:0;  left:0; width:100%; height:100%;  z-index:1;}
.visual .v_bgwrap2>div{position:relative; width:100%; height:100%; overflow:hidden}
.visual .v_bgwrap2::after{position:absolute;  top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.3); z-index:2; content:''}
 

@media (min-aspect-ratio: 16/9) {
  .visual .v_bg>div {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .visual .v_bg>div {
    width: 300%;
    left: -100%;
  }
}


.visual .inbox{position:relative; z-index:2}
.v_txt{position:relative;}
.v_txt>div{position:absolute;left:0;width: 100%;}
  
.v_txt h3{background: linear-gradient(to right, #fff, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:900;}
.v_txt p{color:#fff; font-weight:600;line-height: 1.5em;}
.v_txt strong{position:relative;display:inline-block;color:#fff;font-weight:500;z-index:1;padding-left: 0.5%;}
.v_txt strong::after{position:absolute;top: -4%;left: 0;width: 102%;height: 108%;background: linear-gradient(to right, #16233A, #102E63);content:'';z-index:-1;transform-origin: 0 50%;transform:scaleX(0)}

.animate__animated.animate__text_bg{animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}
.animate__animated.animate__text_bg::after{-webkit-animation-name:underline;animation-name:underline;   animation-duration: 0.7s;animation-delay: 1.6s; -webkit-animation-fill-mode:both;animation-fill-mode:both}

.v_link{ width:100%;font-size: 0;}
.v_link a{position: relative;display:inline-block;border: 1px solid #88315b;background-origin: border-box;background-clip: content-box, border-box;margin-left: -1px;vertical-align: middle;}
.v_link a font{background: linear-gradient(to right, #16233A, #102E63);-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;word-break: keep-all;}
.v_link a.bg{background: linear-gradient(to right, #16233A, #102E63); }
.v_link a.bg font{background:#fff;-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;word-break: keep-all; font-weight:bold;}
.v_link a.bg font i{-webkit-text-fill-color: #fff;}

.v_link a font i{position:absolute; top:50%;z-index: 1;-webkit-text-fill-color: #102E63;}

.v_link a.ov:hover{background: linear-gradient(to right, #16233A, #102E63); }
.v_link a.ov:hover font,.v_link a.ov:hover i{-webkit-text-fill-color: #fff; color:#fff}
.v_link a:hover i{transition: all 0.5s 1s;-webkit-animation: right 2s ease-in-out infinite;-moz-animation: right 1s ease-in-out infinite ;-ms-animation: right 2s ease infinite;-o-animation: right 2s ease-in-out infinite;animation: right 2s ease-in-out infinite ;-webkit-transition: all 0.5s 1s;}





.tit{font-weight:900; line-height:1.15em}
.tit2{font-weight:900; line-height:1.15em}





.con1 .con_box h3{position:relative; background: linear-gradient(to right, #16233A, #16233A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:900;color:#16233A;}
.con1 .con_box span{display:block; color:#16233A; font-weight:600;}
.con1 .con_box p{color:#16233A; font-weight:400; line-height:1.5em}
 
.con1 a{position: relative;display:inline-block;border: 1px solid #16233A;background-origin: border-box;background-clip: content-box, border-box;margin-left: -1px; color:#16233A;text-align: left;}
.con1 a i{position:absolute; top:50%;z-index: 1; color:#16233A}
.con1 a:hover{background: linear-gradient(to right, #16233A, #102E63);color: #fff;}
.con1 a:hover i{transition: all 0.5s 1s;-webkit-animation: right 2s ease-in-out infinite;-moz-animation: right 1s ease-in-out infinite ;-ms-animation: right 2s ease infinite;-o-animation: right 2s ease-in-out infinite;animation: right 2s ease-in-out infinite ;-webkit-transition: all 0.5s 1s; -webkit-text-fill-color: #fff; color:#fff}




.con2{}
.con2 .inbox li{position:relative;float:left;}
.con2 p{text-align:center; font-weight:300; color:#fff}
.con2 h3{text-align:center; font-weight:bold; color:#fff;word-break: keep-all;line-height: 1.05em;}
.con2 a{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.con2_box2 p{color:#000000;}
.con2_box2 h3{background: linear-gradient(to right, #16233A, #102E63);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

.con2_box1 p{color:#ffffff;}
.con2_box1 h3{color:#ffffff;}


.icon_slide .swiper-container{padding:30px 0;}
.icon_slide li{text-align:center; border:1px solid #d2d2d2;}
 .icon_slide li.swiper-slide-active{background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #16233A, #102E63);background-origin: border-box;background-clip: content-box, border-box;box-shadow: 18px 12px 14px 0px rgb(0 0 0 / 20%);}
.icon_slide li img{display:block; }
.icon_slide li h3{font-weight:bold;background: linear-gradient(to right, #16233A, #102E63);-webkit-background-clip: text;-webkit-text-fill-color: transparent; line-height:1.1em;}
.icon_slide li p{color:#201716; font-weight:300;text-align:center; line-height:1.5em}
.icon_slide li p font{display:inline-block; width:50%; text-align:left;}
.icon_slide li span{display:block; font-weight:500;}


.con4 .inbox{display:table;}
.con4 .inbox div{display:table-cell;}
.con4 span{display:block; color:#fff; font-weight:bold;}

.con4 th{color:#201716; font-weight:500; text-align:center; background-color:#fff;}
.con4 td{color:#fff; font-weight:500;}


.banner_list{display:flex;}
 .banner_list img{width:50%;  -webkit-animation: loop 70s infinite linear 1s both; animation: loop 70s infinite linear 1s both;}
 

@media (min-width: 649px){
 

.con1 li{font-size:0;}
.con1 li>div{display:inline-block; vertical-align:middle;}
}

@media (min-width: 1358px){
/*pc*/
.visual video{position:absolute;top: 50%;left: 50%;width: 100%;height: 100%;transform: translate(-50%,-50%);}
.visual .v_bg>div img{width:100%; height:100%;}

/*.visual .v_bg2{height:100%;background:url(/rb/upload/main71.png) no-repeat 100%;}*/

.visual{}
.visual .v_bgwrap{}
.v_txt{height:870px;}
.v_txt div{top: 190px;}
 



.v_txt h3{font-size:80px;}
.v_txt p{font-size:23px;margin: 25px 0 60px;}
.v_txt strong{font-size:40px; margin-bottom:30px}

.v_txt_sub{height:500px;}
.v_txt_sub div{top: 190px;}
 
.v_txt_sub h3{font-size:80px;}
.v_txt_sub p{font-size:23px;margin: 25px 0 60px;}
.v_txt_sub strong{font-size:40px; margin-bottom:30px}


.v_link a{width:200px;padding-left:15px}
.v_link font{font-size:23px; height:80px; line-height:80px;}
.v_link a font i{right:15px;margin-top: -10px;}
  

.main_section{padding:40px 0 40px;}
.main_sectioncon2{padding:40px 0 40px;}
.banner_list{width:7372px;}



.con1{}
.con1 .con_box{padding-left:50px;width: 600px;}
.con1 .con_box h3{font-size:80px;margin: 15px 0 20px;color:#ffffff;}
.con1 .con_box h3::after{top: -10px;left: 19px;width:12px;height:12px;color:#ffffff;}
.con1 .con_box span{font-size: 44px;}
.con1 .con_box p{font-size:23px;margin-bottom: 35px;}

.con1 .sec {margin:20px 0;}
.con1 .sec .con_box{padding-left:0; padding-right:50px; text-align:right;}

.con1 a{width:200px;padding-left: 15px;font-size: 20px;height: 60px;line-height: 60px;}
.con1 a i{right: 15px;margin-top: -10px;}
  
  
.con2  ul{margin:0 -30px;}
.con2  li{width:650px; margin:0 30px; height:485px; padding-top:60px}
.con2 p{font-size:23px;margin-bottom: 10px;}
.con2 h3{font-size:50px;color:#ffffff;}
/*.con2_box1{border-radius:20px; border:4px solid #fff; background:url(/rb/upload/main20.png) no-repeat 100%;background-size:100% auto;}*/

.con2_box1{background:url(/rb/upload/main20.webp) no-repeat 100%;background-size:100% auto;color:#ffffff;}
.con2_box2{background:url(/rb/upload/main24.webp) no-repeat 100%;background-size:100% auto;color:#ffffff;}



.icon_slide li{width:635px; margin:0 25px; border-radius:30px;}
.icon_slide li.swiper-slide-active{   border: 5px solid transparent;
    border-radius: 20px;}
.icon_slide li h3{font-size:50px; color:#ffffff;}
.icon_slide li img{margin:28px auto 25px; width:auto;}
.icon_slide li p{font-size:23px; padding:0 0 28px;}
.icon_slide li.icon1 p{padding:0 120px 28px;}
.icon_slide li p span{font-size:25px;}
.con3 .swiper-pagination{margin-top: 80px;}
.con3 .swiper-pagination-bullet{width:35px; height:7px;}


.con4{background:url(/rb/upload/main65.webp) no-repeat 50%;height: 500px;}
.con4 .inbox p{}
 
.con4 table{border-spacing: 0 10px;border-collapse: separate;}
.con4 th,.con4 td{height:40px;  border-radius:20px;}
.con4 th{width:150px; font-size:20px;}
.con4 td{font-size:23px;padding-left: 15px;}
.con4 span{font-size:40px;margin: 40px 0 20px;}

.iframe_view {height: 65vh;}
.mo1{display:none;}
 
}

@media (min-width:650px) and (max-width:1357px){
/*tab*/ 
.visual video{position:absolute;top: 50%;left: 50%;width: 108%;height: 133%;transform: translate(-50%,-50%);}

.visual .v_bg img {
    height: 118%;
    position: relative;
    top: -11%;
    width: 37%;
    left: 32%;
}
/*.visual .v_bg2{height:100%;background:url(/rb/upload/main71.png) no-repeat 100%;}*/
.visual{}
.visual .v_bgwrap{}
.v_txt{height:50vw;}
.v_txt div{top: 8vw;} 
 
.v_txt h3{font-size:5.8vw;}
.v_txt p{font-size: 1.7vw;margin: 1.5vw 0 4.1vw;}
.v_txt strong{font-size:2.9vw; margin-bottom:2vw}

.v_link a{width: 16.6vw;padding-left: 1.5vw;}
.v_link font{font-size: 1.9vw;height: 6.6vw;line-height: 6.6vw;}
.v_link a font i{right: 1.5vw;margin-top: -0.8vw;}



.main_section{padding: 4vw 0;}
.main_sectioncon2{padding: 4vw 0;}

.banner_list{width: 614.3vw;}
.iframe_view {height: 65vh;}

.con1{}
.con1 .con_box{padding-left:2vw;width: 41.5vw;}
.con1 .con_box h3{font-size:5.8vw;margin: 2vw 0 3vw;}
.con1 .con_box h3::after{top: -1vw;left: 1vw;width:1vw;height:1vw;}
.con1 .con_box span{font-size: 3.1vw;}
.con1 .con_box p{font-size:1.6vw;}

.con1 .con1_1 img{width: 50vw;}
.con1 img{width: 50vw;}
.con1 .con1_3 img{}

.con1 .sec {margin:1.7vw 0;}
.con1 .sec .con_box{padding-left:0; padding-right:2vw;text-align: right;}

 .con1 a{width: 17vw;padding-left: 1.5vw;font-size: 1.6vw;height: 5vw;line-height: 5vw;margin-top: 3vw;}
.con1 a i{right: 15px;margin-top: -10px;}
  
 


.con2  ul{margin: 0 -0.6vw;}
.con2  li{width: 45.3vw;margin: 0 0.6vw;height: 40.5vw;padding-top: 5vw;}
.con2 p{font-size: 1.9vw;margin-bottom: 1vw;}
.con2 h3{font-size: 4.1vw;color:#ffffff;}
/*.con2_box1{border-radius: 1.5vw; border:4px solid #fff;background: url(/rb/upload/main20.png) no-repeat 100% 17vw;background-size: 42.6vw;}*/
.con2_box1{background: url(/rb/upload/main20.webp) no-repeat 50% 100%;background-size: 100% auto !important;color:#ffffff;}
.con2_box2{background: url(/rb/upload/main24.webp) no-repeat 50% 100%;background-size: 100% auto !important;}


.con3{}
.icon_slide li{}
.icon_slide li.swiper-slide-active{   border: 5px solid transparent;
    border-radius: 20px;}
.icon_slide li h3{}
.icon_slide li img{margin: 4vw auto 2.5vw;width: 18.4vw;}
.icon_slide li p{}
.icon_slide li.icon1 p{}
.icon_slide li p span{font-size: 2vw;}
.con3 .swiper-pagination{margin-top: 5vw;}
.con3 .swiper-pagination-bullet{width:3vw; height:0.5vw;}



.con4{background:url(/rb/upload/main65.webp) no-repeat 50%; background-size:cover}
.con4 .inbox p{}

.con4 table{border-spacing: 0 10px;border-collapse: separate;}
.con4 th,.con4 td{height: 3.5vw;border-radius: 1.7vw;}
.con4 th{width: 12.5vw;font-size: 1.6vw;}
.con4 td{font-size: 1.9vw;padding-left: 1vw;}
.con4 span{font-size: 3.3vw;margin: 3vw 0 2vw;}

.mo1{display:none;}
}

@media (max-width:649px){
/*mb*/
.visual video{position:absolute;top: 50%;left: 50%;width: 104%;height: 104%;transform: translate(-50%,-50%);}
.visual .v_bgwrap img {
    width: 63%;
    height: 100%;
    left: 23%;
    position: relative;
	
}

.swiper-slide img {width:100%;}

.visual .v_bgwrap::after{position:absolute;  top:0; left:0; width:100%; height:100%; }
/*.visual .v_bg2{height:100%;background:url(/rb/upload/main72.png) no-repeat 100%;}*/
.visual{}
.visual .v_bgwrap{}
.v_txt{height:100vw;}
.v_txt div{top: 24.5vw;} 
 
.v_txt h3{font-size:7.2vw;line-height: 1.3em;}
.v_txt p{font-size: 3.2vw;margin: 1.5vw 0 4.1vw;line-height: 1.15em;}
.v_txt strong{font-size:4.5vw; margin-bottom:2vw}


.v_link a{width: 19vw;padding-left: 2vw;}
.v_link font{font-size: 5vw;height: 19vw;padding-top: 2.5vw;padding-right: 3vw;line-height: 1.3em;}
.v_link a font i{position: relative;top: 0;display: block;margin-top: 1vw;}



.main_section{padding: 7vw 0 16vw;}

.main_section_sw{padding: 0vw 0 5vw;}

.banner_list{width: 1474.4vw;}


.con1{}
.con1 .con_box img{width:100%}
 
.con1 .con_box h3{font-size: 10vw;}
.con1 .con_box h3::after{top: -1vw;left: 2.6vw;width: 1vw;height: 1vw;}
.con1 .con_box span{margin: 0vw 0 2.5vw;font-size:6vw;}
.con1 .con_box p{font-size:4vw;margin: 3vw 0 5vw;}
.con1 .img_box {margin-bottom: 5vw;}
.con1 .sec {margin: 15vw 0;}

.con1 a{width: 40vw;padding-left: 2vw;font-size: 4vw;height: 12vw;line-height: 12vw;}
.con1 a i{right: 2vw;margin-top: -1.8vw;}
  
.con1 .con1_1 img{height:250px;width:100%;}
.con1 .con1_2 img{height:250px;width:100%;}
.con1 .con1_3 img{height:250px;width:100%;}

.main_sectioncon2{padding: 7vw 0 7vw;}

.con2  ul{margin: 0 -0.8vw;}
.con2  li{width: 46.2vw;margin: 0 0.8vw;height: 60vw;padding-top: 7vw;}
.con2 p{font-size: 3.5vw;margin-bottom: 2vw;}
.con2 h3{font-size: 7vw;padding: 0 2vw;}

/*.con2_box1{border-radius: 1.5vw; border:4px solid #fff;background: url(/rb/upload/main20.png) no-repeat 100% 35vw;background-size: 42.6vw;}*/
.con2_box1{background: url(/rb/upload/main63.webp) no-repeat 50% 100%;background-size: 100% auto !important;color:#ffffff;}
.con2_box2{background: url(/rb/upload/main64.webp) no-repeat 50% 100%;background-size: 100% auto !important;}


.con3{padding:4vw 0}
.icon_slide li{}
.icon_slide li.swiper-slide-active{
    border: 3px solid transparent;
    border-radius: 3vw;
    }
.icon_slide li h3{}
.icon_slide li img{margin: 4vw auto 2.5vw;width: 22.5vw;}
.icon_slide li p{}
 .icon_slide li p br{display:none}
.icon_slide li.icon1 p{}
.icon_slide li p span{}
.con3 .swiper-pagination{margin-top: 11vw;}
.con3 .swiper-pagination-bullet{width:7.5vw; height:1.5vw;}


  
.con4{background:url(/rb/upload/main66.png) no-repeat 50%; background-size:cover}
.con4 .inbox p{}


.con4 table{border-spacing: 0 10px;border-collapse: separate;}
.con4 th,.con4 td{height: 7vw;border-radius: 4vw;}
.con4 th{width: 20vw;font-size: 3.5vw;}
.con4 td{font-size: 4vw;padding-left: 1.5vw;}
.con4 span{font-size: 6vw;margin: 3vw 0 2vw;}



.iframe_view {height:40vh;}

.pc1{display:none;}

}












/* =========================================================
   장례 서비스 전체 영역
========================================================= */

.funeral_service_section {
    width: 100%;
    padding: 35px 0 0px 0;
    margin: 0;
    background: #fff;
    box-sizing: border-box;
}

.funeral_service_inner {
    width: 1400px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   상단 서비스 이미지 5개
========================================================= */

.funeral_service_list {
    display: flex;
    width: 100%;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.funeral_service_item {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
}

.funeral_service_item img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}


/* =========================================================
   하단 상담 전체 영역
========================================================= */

.funeral_contact {
    position: relative;
    width: 100%;
    margin: 14px 0 0 0;
    padding: 0;

    background: #102638;
    color: #fff;

    overflow: hidden;
    box-sizing: border-box;
}

.funeral_contact_inner {
    position: relative;

    display: flex;
    align-items: stretch;

    width: 100%;
    min-height: 160px;

    margin: 0;
    padding: 0;

    background: #102638;

    box-sizing: border-box;
}


/* =========================================================
   왼쪽 이미지 영역
========================================================= */

.funeral_contact_left {
    position: relative !important;

    flex: 1;
    min-width: 0;
    min-height: 160px;

    margin: 0 !important;
    padding: 0 !important;

    background: #102638;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   관리자 등록 배경 이미지 DIV
========================================================= */

.funeral_contact_left .funeral_contact_bg {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    z-index: 1 !important;
}


/* =========================================================
   실제 관리자 등록 이미지
========================================================= */

.funeral_contact_left .funeral_contact_bg img {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: 1 !important;
}


/* =========================================================
   이미지 위 그라데이션

   왼쪽 사진은 잘 보이고
   오른쪽으로 갈수록 남색으로 연결
========================================================= */

.funeral_contact_left .funeral_contact_bg:after {
    content: "";

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0;
    padding: 0;

    z-index: 2 !important;

    background: linear-gradient(
        to right,
        rgba(16,38,56,0.02) 0%,
        rgba(16,38,56,0.08) 25%,
        rgba(16,38,56,0.30) 50%,
        rgba(16,38,56,0.70) 75%,
        #102638 100%
    );

    pointer-events: none;
}


/* =========================================================
   이미지 위 글씨 영역
========================================================= */

.funeral_contact_left .funeral_contact_text {
    position: absolute !important;

    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    /*
       글씨 시작 위치
       280px = 왼쪽에서 280px 떨어진 위치
    */
    padding: 20px 25px 20px 280px !important;

    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    box-sizing: border-box;

    z-index: 10 !important;

    pointer-events: none;
}


/* =========================================================
   왼쪽 제목
========================================================= */

.funeral_contact_left .funeral_contact_title {
    position: relative !important;

    z-index: 11 !important;

    margin: 0 0 7px 0 !important;
    padding: 0 !important;

    font-size: 24px !important;
    line-height: 1.4 !important;

    font-weight: 400;

    letter-spacing: -1px;

    text-align: left !important;

    color: #fff !important;
}

.funeral_contact_left .funeral_contact_title strong {
    color: #fff !important;

    font-weight: 700 !important;
}


/* =========================================================
   왼쪽 설명
========================================================= */

.funeral_contact_left .funeral_contact_desc {
    position: relative !important;

    z-index: 11 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1.7 !important;

    font-weight: 400;

    letter-spacing: -0.3px;

    text-align: left !important;

    color: #d8e0e6 !important;
}


/* =========================================================
   가운데 구분선
========================================================= */

.funeral_contact_line {
    position: relative;

    width: 1px;

    margin: 30px 30px;

    padding: 0;

    background: rgba(255,255,255,0.30);

    flex-shrink: 0;

    z-index: 20;
}


/* =========================================================
   오른쪽 전화/상담 영역
========================================================= */

.funeral_contact_right {
    position: relative;

    width: 480px;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    margin: 0;

    padding: 20px 35px 20px 0;

    box-sizing: border-box;

    background: #102638;

    z-index: 20;
}


/* =========================================================
   전화번호 영역
========================================================= */

.funeral_phone_area {
    display: flex;
    align-items: center;

    margin: 0 0 12px 0;
    padding: 0;
}


/* =========================================================
   전화 아이콘
========================================================= */

.funeral_phone_icon {
    width: 48px;
    height: 48px;

    margin: 0 13px 0 0;
    padding: 0;

    border-radius: 50%;

    background: #fff;

    color: #102638 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;

    flex-shrink: 0;

    box-sizing: border-box;
}

.funeral_phone_icon i {
    color: #102638 !important;
}


/* =========================================================
   전화번호
========================================================= */

.funeral_phone_info {
    margin: 0;
    padding: 0;

    text-align: left;
}

.funeral_phone_small {
    margin: 0 0 3px 0;
    padding: 0;

    font-size: 12px;
    line-height: 1.3;

    font-weight: 400;

    color: #dce3e8 !important;
}

.funeral_phone_number {
    margin: 0;
    padding: 0;

    font-size: 32px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;

    color: #fff !important;
}


/* =========================================================
   버튼 전체
========================================================= */

.funeral_contact_buttons {
    display: flex;

    gap: 9px;

    margin: 0;
    padding: 0;
}


/* =========================================================
   버튼 공통
========================================================= */

.funeral_contact_btn {
    height: 48px;

    margin: 0;
    padding: 0 15px;

    box-sizing: border-box;

    border-radius: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none !important;

    transition: all 0.2s ease;
}


/* =========================================================
   카카오톡 버튼
========================================================= */

.funeral_kakao {
    width: 215px;

    background: #fee500;

    color: #191919 !important;
}

.funeral_kakao:hover {
    background: #f5dc00;

    color: #191919 !important;
}


/* 카카오 TALK 원 */

.funeral_kakao_icon {
    width: 31px;
    height: 31px;

    margin-right: 9px;

    border-radius: 50%;

    background: #191919;

    color: #fee500 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 9px;

    font-weight: 700;

    flex-shrink: 0;
}


/* =========================================================
   전화 상담 버튼
========================================================= */

.funeral_call {
    width: 215px;

    border: 1px solid rgba(255,255,255,0.75);

    background: transparent;

    color: #fff !important;
}

.funeral_call:hover {
    background: rgba(255,255,255,0.10);

    color: #fff !important;
}

.funeral_call_icon {
    margin-right: 10px;

    font-size: 20px;

    color: #fff !important;
}

.funeral_call_icon i {
    color: #fff !important;
}


/* =========================================================
   버튼 글씨
========================================================= */

.funeral_btn_text {
    margin: 0;
    padding: 0;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.2;

    text-align: left;
}

.funeral_btn_text small {
    display: block;

    margin: 3px 0 0 0;
    padding: 0;

    font-size: 9px;

    font-weight: 400;

    line-height: 1.2;
}


/* =========================================================
   태블릿
========================================================= */

@media screen and (max-width: 1000px) {

    .funeral_contact_left .funeral_contact_text {
        padding-left: 180px !important;
    }

    .funeral_contact_line {
        margin-left: 20px;
        margin-right: 20px;
    }

    .funeral_contact_right {
        width: 420px;

        padding-right: 20px;
    }

    .funeral_phone_number {
        font-size: 28px;
    }

    .funeral_kakao,
    .funeral_call {
        width: 190px;
    }

}


/* =========================================================
   모바일
========================================================= */

@media screen and (max-width: 768px) {

    /* -----------------------------------------------------
       전체
    ----------------------------------------------------- */

    .funeral_service_section {
        padding: 40px 0 0px 0;
    }

    .funeral_service_inner {
        width: 100%;

        max-width: calc(100% - 24px);
    }


    /* -----------------------------------------------------
       상단 서비스 이미지
    ----------------------------------------------------- */

    .funeral_service_list {
        flex-wrap: wrap;

        gap: 8px;
    }

    .funeral_service_item {
        flex: none;

        width: calc(50% - 4px);
    }

    .funeral_service_item:last-child {
        width: 100%;
    }


    /* -----------------------------------------------------
       상담 영역
    ----------------------------------------------------- */

    .funeral_contact {
        margin-top: 10px;
    }

    .funeral_contact_inner {
        display: block;

        min-height: 0;
    }


    /* -----------------------------------------------------
       이미지 영역
    ----------------------------------------------------- */

    .funeral_contact_left {
        width: 100%;

        min-height: 220px;
    }

    .funeral_contact_left .funeral_contact_bg {
        width: 100% !important;
        height: 100% !important;
    }

    .funeral_contact_left .funeral_contact_bg img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        object-position: center center !important;
    }


    /* -----------------------------------------------------
       모바일 이미지 그라데이션

       PC는 좌 → 우
       모바일은 위 → 아래
    ----------------------------------------------------- */

    .funeral_contact_left .funeral_contact_bg:after {
        background: linear-gradient(
            to bottom,
            rgba(16,38,56,0.02) 0%,
            rgba(16,38,56,0.10) 30%,
            rgba(16,38,56,0.55) 65%,
            #102638 100%
        );
    }


    /* -----------------------------------------------------
       모바일 이미지 위 글씨
    ----------------------------------------------------- */

    .funeral_contact_left .funeral_contact_text {
        position: absolute !important;

        left: 0 !important;
        top: 0 !important;

        width: 100% !important;
        height: 100% !important;

        min-height: 220px;

        justify-content: flex-end;
        align-items: center;

        padding: 25px 20px !important;

        text-align: center !important;
    }

    .funeral_contact_left .funeral_contact_title {
        font-size: 21px !important;

        text-align: center !important;
    }

    .funeral_contact_left .funeral_contact_desc {
        font-size: 12px !important;

        text-align: center !important;
    }


    /* -----------------------------------------------------
       가운데 선
    ----------------------------------------------------- */

    .funeral_contact_line {
        width: calc(100% - 40px);
        height: 1px;

        margin: 0 20px;

        background: rgba(255,255,255,0.25);
    }


    /* -----------------------------------------------------
       오른쪽 상담 영역
    ----------------------------------------------------- */

    .funeral_contact_right {
        width: 100%;

        padding: 22px 20px 25px 20px;
    }


    /* -----------------------------------------------------
       전화번호
    ----------------------------------------------------- */

    .funeral_phone_area {
        justify-content: center;
    }

    .funeral_phone_number {
        font-size: 27px;
    }

    .funeral_phone_small {
        font-size: 11px;
    }


    /* -----------------------------------------------------
       버튼
    ----------------------------------------------------- */

    .funeral_contact_buttons {
        justify-content: center;
    }

    .funeral_kakao,
    .funeral_call {
        flex: 1;

        width: auto;
    }

}


/* =========================================================
   작은 모바일
========================================================= */

@media screen and (max-width: 480px) {

    /* 서비스 이미지 한 줄에 하나 */

    .funeral_service_item {
        width: 100%;
    }


    /* 이미지 */

    .funeral_contact_left {
        min-height: 230px;
    }

    .funeral_contact_left .funeral_contact_text {
        min-height: 230px;

        padding: 25px 15px !important;
    }


    /* 제목 */

    .funeral_contact_left .funeral_contact_title {
        font-size: 20px !important;
    }


    /* 전화 아이콘 */

    .funeral_phone_icon {
        width: 42px;
        height: 42px;

        font-size: 20px;
    }


    /* 전화번호 */

    .funeral_phone_number {
        font-size: 24px;
    }


    /* 버튼 세로 */

    .funeral_contact_buttons {
        display: block;
    }

    .funeral_contact_btn {
        width: 100%;

        margin-bottom: 8px;
    }

}