@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap');

#comingsoon{width:100%;padding-top:100px;text-align:center}

html{scroll-behavior:smooth}

/* 페이지 리뉴얼 201020 [s] */
.pagecommon{margin:120px auto;font-size:16px;color:#666;line-height:1.6;font-family:var(--k-font)}
.pagecommon *{word-break:keep-all}
.pagecommon .pl{white-space:pre-line}
.pagecommon .top_box{text-align:center}
.pagecommon .top_box p{font-size:70px;font-weight:700;line-height:1;color:rgba(000,000,000,.05);font-family:var(--e-font)}
.pagecommon .top_box b{display:block;margin-top:-25px;font-size:35px;line-height:1.3;font-weight:700;color:#111}
.pagecommon .top_box b span{color:var(--primary)}

/* 인사말 */
#p54{display:flex}
#p54 .l_gr p{width:470px;height:537px;margin-top:61px;border-radius:100px 0 100px 0;background:url('/sh_page/img/p33_img.jpg') no-repeat center / cover}
#p54 .r_gr{position:relative;width:100%;padding:150px 40px 215px 80px;background:url('/sh_page/img/p33_bg.png') no-repeat right bottom}
#p54 .r_gr p{position:absolute;left:-30px;top:0;z-index:-1;font-size:100px;line-height:1;font-weight:700;color:rgba(000,000,000,.05);font-family:var(--e-font)}
#p54 .r_gr b{display:block;font-size:35px;line-height:1.3;font-weight:700;color:#111}
#p54 .r_gr span{display:block;width:100%;margin:44px 0 0 30px;padding:45px 50px;background-color:#f5f5f5}

/* 예약안내 */
#p55 .cont_box{margin-top:54px}
#p55 .cont_box .img{width:100%;height:360px;border-radius:30px;background:url('/sh_page/img/p55_img.jpg') no-repeat center / cover}
#p55 .cont_box ul{display:flex;gap:30px;margin-top:-60px;padding:0 50px}
#p55 .cont_box ul li{width:100%}
#p55 .cont_box ul li p{display:flex;align-items:center;gap:15px;height:60px;padding:0 30px;font-weight:600;color:#fff;background-color:var(--primary)}
#p55 .cont_box ul li b{display:flex;align-items:center;justify-content:center;width:100%;height:100px;font-size:20px;font-weight:600;color:#111;background-color:#f5f5f5}

/* 장례절차 */
#p58 .step_list{display:grid;grid-template-columns:repeat(4,1fr);gap:55px 20px;margin-top:63px}
#p58 .step_list li{text-align:center}
#p58 .step_list li span{display:flex;align-items:center;justify-content:center;position:relative;width:40px;height:40px;margin:0 auto;border-radius:100%;font-size:14px;font-weight:600;color:#fff;background-color:var(--primary)}
#p58 .step_list li img{width:100%;margin-top:-20px;border-radius:20px}
#p58 .step_list li p{padding:25px 15px 0;font-size:15px}
#p58 .step_list li p b{display:block;margin-bottom:9px;font-size:18px;font-weight:700;color:#111}
#p58 .step_list li p em{display:block;margin-top:5px;font-style:normal;font-size:14px;font-weight:500;color:#888}

/* 장례비용 */
#p59 .price_cont{position:relative;margin-top:53px;padding:40px;border-radius:20px;text-align:center;background:url('/sh_page/img/p59_bg.png') no-repeat center var(--primary);background-size:cover}
#p59 .price_cont .tit{border-radius:10px;font-size:20px;font-weight:700;line-height:70px;color:#fff;background-color:#111}
#p59 .price_cont ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
#p59 .price_cont ul li{padding:25px 30px 31px;border-radius:10px;font-weight:600;color:#888;background-color:#fff;box-shadow:3px 5px 20px -2px rgb(0 0 0 / 15%)}
#p59 .price_cont ul li p{margin-top:17px;padding-top:24px;border-top:1px solid #e1e1e1;font-size:25px;font-weight:700;color:#111;font-family:var(--e-font)}
#p59 .price_cont .bt_txt{position:absolute;right:40px;bottom:40px;font-size:20px;font-weight:600;color:rgba(255,255,255,.6)}

/* 장례용품 */
#p60 .top_box{margin-bottom:53px}
#p60 .coll_cont{display:flex;justify-content:space-between;padding:40px;border-radius:20px;background-color:#f5f5f5}
#p60 .coll_cont+.coll_cont{margin-top:30px}
#p60 .coll_cont .l_cont{display:flex;flex-direction:column;padding:30px 0}
#p60 .coll_cont .l_cont .tab{display:flex}
#p60 .coll_cont .l_cont .tab li+li{margin-left:20px;padding-left:20px;border-left:1px solid rgba(000,000,000,.1)}
#p60 .coll_cont .l_cont .tab li a{font-size:15px;font-weight:600;line-height:1;color:#888;transition:all .3s}
#p60 .coll_cont .l_cont .tab li.on a{color:#111}
#p60 .coll_cont .l_cont .tab li:hover a{color:var(--primary)}
#p60 .coll_cont .l_cont div{margin-top:auto}
#p60 .coll_cont .l_cont div p{display:flex;gap:15px;align-items:center;margin-bottom:20px;font-size:25px;font-weight:700;color:#111}
#p60 .coll_cont .l_cont div p span{display:flex;align-items:center;justify-content:center;width:115px;height:30px;border-radius:50px;font-size:13px;font-weight:600;color:#fff;background-color:var(--primary)}
#p60 .coll_cont .r_cont ul{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
#p60 .coll_cont .r_cont ul li{overflow:hidden;border-radius:10px}
#p60 .coll_cont .r_cont ul li img{width:280px}

/* 반응형 [s] */
@media (max-width:1230px){
#p54 .l_gr p{width:435px}
#p54 .r_gr{padding-left:60px}
#p54 .r_gr span{margin-left:20px;white-space:normal}
#p60 .coll_cont{gap:40px}
#p60 .coll_cont .l_cont .tab li+li{margin-left:15px;padding-left:15px}
#p60 .coll_cont .r_cont ul li img{width:100%}
#p60 .coll_cont .l_cont div{white-space:normal}
}
@media (max-width:1024px){
.pagecommon{font-size:15px}
.pagecommon .top_box p{font-size:60px}
.pagecommon .top_box b{font-size:30px}
#p54 .l_gr p{width:375px}
#p54 .r_gr{padding:135px 0 215px 50px;background-size:contain}
#p54 .r_gr p{font-size:85px}
#p54 .r_gr b{font-size:30px;white-space:normal}
#p54 .r_gr span{padding:40px}
#p55 .cont_box{margin-top:45px}
#p55 .cont_box .img{height:330px}
#p55 .cont_box ul{padding:0 30px}
#p58 .step_list{grid-template-columns:repeat(3,1fr)}
#p60 .coll_cont{padding:30px}
#p60 .coll_cont .r_cont ul{gap:15px}
#p60 .coll_cont .l_cont{padding:20px 0}
#p60 .coll_cont .l_cont .tab li{line-height:1}
#p60 .coll_cont .l_cont .tab li a{font-size:14px}
#p60 .coll_cont .l_cont div p{font-size:23px}
#p60 .coll_cont .l_cont div p span{width:105px}
}
@media (max-width:768px){
.pagecommon .top_box p{font-size:55px}
.pagecommon .top_box b{margin-top:-20px;font-size:28px}
#p54{display:block}
#p54 .l_gr p{width:calc(100% - 80px);height:300px;margin-top:0;border-radius:60px 0 60px 0}
#p54 .r_gr{padding:0;background-size:60%;background-position:top right}
#p54 .r_gr p{position:initial;margin-top:40px;font-size:70px;text-align:right}
#p54 .r_gr b{padding:30px 0 0 20px;font-size:28px;white-space:pre-line}
#p55 .cont_box{margin-top:40px}
#p55 .cont_box .img{height:280px}
#p55 .cont_box ul{gap:15px;margin-top:-50px}
#p55 .cont_box ul li p{height:50px;padding:0 20px}
#p55 .cont_box ul li p img{height:20px}
#p55 .cont_box ul li b{height:85px;font-size:18px}
#p58 .step_list{grid-template-columns:repeat(2,1fr);gap:40px 20px}
#p58 .step_list li p{padding:25px 0 0}
#p59 .price_cont{margin-top:45px;padding:30px}
#p59 .price_cont .tit{font-size:18px;line-height:60px}
#p59 .price_cont ul{gap:15px;grid-template-columns:repeat(2,1fr);margin-top:30px}
#p59 .price_cont ul li{padding:20px 30px 25px}
#p59 .price_cont ul li p{margin-top:15px;padding-top:20px;font-size:22px}
#p59 .price_cont .bt_txt{right:30px;bottom:30px;font-size:18px}
#p60 .coll_cont{display:block}
#p60 .coll_cont .l_cont{padding:10px 0 40px}
#p60 .coll_cont .l_cont .tab{margin-bottom:40px}
#p60 .coll_cont .l_cont div p{font-size:20px}
}
@media (max-width:480px){
.pagecommon{font-size:14px}
.pagecommon .top_box p{font-size:40px}
.pagecommon .top_box b{margin-top:-15px;font-size:25px}
#p54 .l_gr p{width:100%;height:210px}
#p54 .r_gr p{font-size:50px;text-align:left}
#p54 .r_gr b{padding-left:0;font-size:25px}f#p59 .price_cont
#p54 .r_gr span{margin:40px 0 0;padding:30px}
#p55 .cont_box{margin-top:30px}
#p55 .cont_box .img{height:220px;border-radius:20px}
#p55 .cont_box ul{gap:10px;padding:0 20px}
#p55 .cont_box ul li p{gap:10px}
#p55 .cont_box ul li p img{height:18px}
#p55 .cont_box ul li b{height:80px;font-size:16px}
#p58 .step_list{grid-template-columns:repeat(1,1fr);gap:40px;margin-top:40px}
#p58 .step_list li img{width:80%}
#p58 .step_list li p b{font-size:16px}
#p59 .price_cont{margin-top:35px;padding:20px;border-radius:15px}
#p59 .price_cont .tit{font-size:16px;line-height:50px}
#p59 .price_cont ul{margin-top:20px}
#p59 .price_cont ul li{padding:20px 15px}
#p59 .price_cont ul li p{padding-top:15px;font-size:20px}
#p59 .price_cont .bt_txt{right:20px;bottom:20px;font-size:16px}
#p60 .top_box{margin-bottom:40px}
#p60 .coll_cont{padding:20px;border-radius:15px}
#p60 .coll_cont .r_cont ul{gap:10px}
#p60 .coll_cont .l_cont{padding-bottom:30px}
#p60 .coll_cont .l_cont .tab{margin-bottom:35px}
#p60 .coll_cont .l_cont div p{margin-bottom:15px;font-size:18px}
}
@media (max-width:380px){
.pagecommon .top_box p{font-size:35px}
.pagecommon .top_box b{font-size:21px}
#p54 .l_gr p{height:160px}
#p54 .r_gr p{margin-top:30px;font-size:40px}
#p54 .r_gr b{padding-top:20px;font-size:21px}
#p54 .r_gr span{margin-top:35px}
#p55 .cont_box ul{display:block}
#p55 .cont_box ul li+li{margin-top:10px}
#p55 .cont_box .img{height:160px;border-radius:10px}
#p59 .price_cont .tit{font-size:15px}
#p59 .price_cont ul{gap:10px}
#p59 .price_cont ul li{padding:20px 15px 15px}
#p59 .price_cont ul li p{padding-top:10px}
#p60 .coll_cont .l_cont .tab li+li{margin-left:10px;padding-left:10px}
#p60 .coll_cont .l_cont .tab li a{font-size:13px}
#p60 .coll_cont .l_cont div p span{width:95px;font-size:12px}
}
/* 반응형 [e] */