/*
    앵커 이동(#postPayment 등)을 CSS 로 부드럽게 처리.
    예전에는 href="javascript:...scrollIntoView()" 를 썼으나
    검색로봇이 따라갈 수 없는 링크라 실제 앵커(#id)로 바꾸고 여기서 동작을 담당한다.
    sticky 헤더 높이만큼 scroll-margin-top 을 줘야 제목이 헤더에 가리지 않는다.
*/
html {scroll-behavior:smooth;}
main section[id], #content {scroll-margin-top:100px;}

@media (prefers-reduced-motion: reduce) {
    html {scroll-behavior:auto;}
}


body {font-family:PretendardR; color:#282828;}

.pageOutWrap {overflow:hidden;}

.contentWrap {width:100%; max-width:1400px; margin:0 auto;}

main {width:100%; max-width:1920px; margin:0 auto;}

button {
    appearance: none;
    -webkit-appearance: none;

    border: none;
    background: none;
    padding: 0;
    margin: 0;

    font: inherit;
    color: inherit;

    cursor: pointer;
}

/*
    CLS(레이아웃 밀림) 방지용 이미지 기본값.
    index.html 의 <img> 에 실제 원본 크기를 width/height 속성으로 넣어두면
    브라우저가 로드 전에 자리(가로세로비)를 미리 잡아준다.
    다만 그 속성은 CSS 사이즈 지정과 충돌할 수 있으므로 아래 두 규칙으로 중화한다.
      - height:auto  → CSS 가 width 만 지정한 이미지의 세로가 고정되지 않게
      - width:auto   → CSS 가 height 만 지정한 이미지(로고, 진행단계 아이콘)의 가로가 고정되지 않게
    ※ <img> 에 width/height 속성을 추가할 때는 이 규칙을 반드시 함께 유지할 것.
*/
img {max-width:100%; height:auto;}
header .logo a > img,
header nav .btnTel img,
#worryAbout .worryList .item > img,
#together .itemWrap .item .icon img {width:auto;}






/*
    ************************************** 헤더 ***************************************
*/
header {position:sticky; top:0; z-index:100; width:100%; height:100px; background-color:#11244b;}
header .contentWrap {display:flex; justify-content:space-between; align-items:center; height:100%;}

header .logo a {display:flex; align-items:center; gap:6px; font-size:45px; color:#E3E7ED; font-family:PretendardR;}


header nav {display:flex; align-items:center; font-size:22px; color:#ffffff;}
header nav a {color:#ffffff !important;}
header nav .divider {width:2px; height:13px; background-color:rgba(255,255,255,0.7); margin:0 40px;}

header nav .btnTel {display:flex; align-items:center; gap:14px; padding:15px 20px; border-radius:50px; border:solid 1px #ffffff; margin-left:45px;}



/*
    ************************************* 메인 비주얼 ***************************************
*/
#mainVisual {height:800px; background-image:url("../images/mainVisual.jpg"); background-size:cover; background-position:center;}
#mainVisual .contentWrap {display: flex; justify-content: space-between; align-items: center; height:100%;}

#mainVisual .visualContent {display: flex; justify-content:space-between; align-items:flex-end;}
#mainVisual .visualText h1 {font-size:60px; color:#11244b; font-family:NanumMjB; line-height:1.3; letter-spacing: -3px;}
#mainVisual .visualText h1 .strongText {display:block; font-size:50px; font-family:NanumMjB; color:#9b7735; margin-top:40px;}
#mainVisual .visualText h1 .strongText.brandName {font-size:36px; margin-top:0; margin-bottom:10px;}
#mainVisual .visualText .buttonWrap {display: flex; align-items: center; gap:10px; margin-top:50px;}
#mainVisual .visualText .buttonWrap .cl_baseButton {font-family:PretendardR;}





/*
    ************************************* 혹시 이런걱정 ***************************************
*/
#worryAbout {padding:150px 0; background-color:#fbf6ed;}

#worryAbout .worryList {display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap:55px 40px;}
#worryAbout .worryList .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:15px;
    width: 100%;
    height: 100%;
    font-size:26px;
    font-family:PretendardM;
    text-align:center;
    padding:20px;
    padding-top:35px;
    border: solid 1px #bba67c;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #ffffff;
}
#worryAbout .worryList .item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 48px;
    height: 16px;
    border:solid 1px #bba67c;
    border-bottom:none;
    border-radius: 48px 48px 0 0;
    padding:8px;
    box-shadow: 0 -5px 10px rgba(0,0,0,0.1);
    background-color:#ffffff;
}
#worryAbout .worryList .item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background-image: url("../images/icon_checkCircle.png");
    background-position: center;
    background-repeat: no-repeat;
}

#worryAbout .worryList .item > img {height:160px;}






/*
    ************************************* 상품추천 ***************************************
*/
#recommendPdt {padding:150px 0; background-image:url("../images/s3_bg.jpg"); background-size:cover; background-position:center;}
#recommendPdt .cl_sectionTitle {text-align:left; margin-bottom:0;}
#recommendPdt .cl_sectionTitle .mainText {color:#ffffff;}
#recommendPdt .cl_sectionTitle .descText {color:#ffffff;}





/*
    ************************************* 후불제 상조 ***************************************
*/
#postPayment {padding:150px 0; background-image:url("../images/postPay_bg.jpg"); background-size:cover; background-position:center;}

#postPayment .infoBox {
    position:relative;
    max-width: 860px;
    width: 80%;
    font-size: 33px;
    color: #282828;
    font-family: PretendardR;
    text-align: center;
    white-space: nowrap;
    margin: 0 auto;
    margin-bottom: 70px;
    border-radius: 20px;
    padding-top:45px;
    padding-bottom:35px;
    background-color: #ffffff;
}
#postPayment .infoBox .blueText {color:#4d679b; font-family:PretendardB;}
#postPayment .infoBox .boxTitle {position:absolute; top:0; left:50%; transform: translate(-50%, -50%); color:#ffffff; border-radius:30px; padding:8px 15px; background-color:#11244b;}


#postPayment .compareArea {position:relative; display:flex; justify-content:center; align-items:center; gap:35px;}
#postPayment .compareArea .serviceBox {width:537px; border-radius: 30px; box-shadow:0 4px 4px rgba(0,0,0,0.25); overflow: hidden; background-color:#ffffff;}
#postPayment .compareArea .serviceBox .title {font-size:35px; color:#ffffff; font-family:PretendardB; text-align:center; padding:25px;}
#postPayment .compareArea .serviceBox .itemWrap {padding:0 50px; box-sizing: border-box;}
#postPayment .compareArea .serviceBox .itemWrap .item {display:flex; align-items:center; gap:30px; color:#000000; padding:30px 0; border-bottom: dotted 2px #EFE7DD;}
#postPayment .compareArea .serviceBox .itemWrap .item:last-child {border-bottom:none;}
#postPayment .compareArea .serviceBox .itemWrap .item .desc {letter-spacing: -2px;}
#postPayment .compareArea .serviceBox .itemWrap .item .desc .mainText {font-size:33px; font-family:PretendardB; margin-bottom:10px;}
#postPayment .compareArea .serviceBox .itemWrap .item .desc .subText {font-size:28px; font-family:NotoSansR; line-height:1;}
#postPayment .compareArea .serviceBox .itemWrap .item .desc .subText .smallText {font-size:20px;}
#postPayment .compareArea .serviceBox .tailText {font-size:28px; color:#000000; font-family:PretendardL; text-align:center; padding:35px 0;}
#postPayment .compareArea .serviceBox .tailText .boldText {font-family:PretendardB;}

#postPayment .compareArea .serviceBox.other .title {background-color:#9d9c9c;}
#postPayment .compareArea .serviceBox.other .tailText {background-color:#e5e4e4;}
#postPayment .compareArea .serviceBox.other .tailText .highlightText {color:#a85a5a;}

#postPayment .compareArea .serviceBox.our .title {background-color:#11244b;}
#postPayment .compareArea .serviceBox.our .tailText {background-color:#e2e6ef;}
#postPayment .compareArea .serviceBox.our .tailText .highlightText {color:#4d679b;}

#postPayment .compareArea .vs {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 114px;
    height: 114px;
    font-size: 59px;
    color: #ffffff;
    font-family: NanumMjB;
    letter-spacing: -4px;
    border-radius: 50%;
    background-color: #11244b;
}

#postPayment .cl_sectionComment {color:#000000;}





/*
    ************************************* 특별한 이유 ***************************************
*/
#whySpecial {padding:150px 0; background-image:url("../images/whySpecial_bg.jpg"); background-size:cover; background-position:center;}

#whySpecial .itemWrap {display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap:40px;}
#whySpecial .itemWrap .item {border-radius:20px; box-shadow: 0 0 20px rgba(0,0,0,0.1); background-color:#ffffff;}
#whySpecial .itemWrap .item .imgCell {position:relative; margin-bottom:40px;}
#whySpecial .itemWrap .item .imgCell img {display:block; width:100%;}
#whySpecial .itemWrap .item .imgCell .num {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 50px;
    height: 50px;
    font-size: 26px;
    color: #ffffff;
    font-family: NanumMjB;
    line-height: 1;
    border-radius: 50%;
    background-color: #9b7735;
}
#whySpecial .itemWrap .item .imgCell .num:before {content:""; position:absolute; top:-5px; left:-5px; z-index:-1; width:60px; height:60px; border-radius:50%; background-color:rgba(155, 119, 53, 0.5);}
#whySpecial .itemWrap .item .title {font-size:26px; font-family:PretendardB; text-align:center; margin-bottom:15px;}
#whySpecial .itemWrap .item .desc {font-size:24px; font-family:PretendardR; text-align: center; padding-bottom:30px;}




/*
    ************************************* 존엄한 마지막 ***************************************
*/
#dignifiedLast {padding:150px 0; background-image:url("../images/s6_bg.jpg"); background-size:cover; background-position:center;}

#dignifiedLast .cl_sectionTitle .mainText {color:#ffffff;}
#dignifiedLast .cl_sectionTitle .descText {color:#ffffff;}

#dignifiedLast .itemWrap {display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows: auto; gap:40px;}
#dignifiedLast .itemWrap .item {text-align:center; border:solid 1px #bfa066; border-radius: 30px; overflow:hidden; background-color:#342c2b;}
#dignifiedLast .itemWrap .item .imgCell {margin-bottom:35px;}
#dignifiedLast .itemWrap .item .imgCell img {display:block; width:100%;}
#dignifiedLast .itemWrap .item .title {font-size:30px; color:#c8a76a; font-family:PretendardB;}
#dignifiedLast .itemWrap .item .decoBar {width:30px; height:2px; margin:20px auto; background-color:#796548;}
#dignifiedLast .itemWrap .item .desc {font-size:24px; color:#ffffff; font-family:PretendardR; margin-bottom:40px;}




/*
    ************************************* 처음부터 끝까지 함께 ***************************************
*/
#together {padding:150px 0; background-image:url("../images/together_bg.jpg"); background-size:cover; background-position:center;}

#together .itemWrap {display:grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: auto; gap:25px;}
#together .itemWrap .item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 65px;
    padding-bottom: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    box-shadow:0 0 20px rgba(0,0,0,0.1);
    background-color: #ffffff;
}
#together .itemWrap .item .num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-size: 26px;
    color: #ffffff;
    font-family: NanumMjB;
    line-height: 1;
    border-radius: 50%;
    background-color: #0e1f42;
}
#together .itemWrap .item .icon {position:relative; width:100%; text-align:center; font-size:0; margin-bottom:30px;}
#together .itemWrap .item .textWrap {width:100%; text-align:center;}
#together .itemWrap .item .textWrap .title {position:relative; width:100%; font-size:26px; font-family:PretendardB;}
#together .itemWrap .item .textWrap .title:after {content:""; display:block; width:60%; height:1px; margin:15px auto; background-color:#e5e5e5;}
#together .itemWrap .item .textWrap .title .titleNum {display:none;}
#together .itemWrap .item .textWrap .desc {font-size:24px; font-family:PretendardR;}





/*
    ************************************* 상품안내 ***************************************
*/
#productInfo {padding:150px 0; background-image:url("../images/pdtInfo_bg.jpg"); background-size:cover; background-position:center;}

#productInfo .cl_sectionTitle .mainText {color:#ffffff;}
#productInfo .cl_sectionTitle .descText {color:#ffffff;}

#productInfo .boxWrap {display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap:25px;}
#productInfo .boxWrap .pdtInfoBox {display:flex; flex-direction: column; align-items: center; padding:45px 40px; box-sizing: border-box; border-radius:30px; border:solid 2px #ffffff; background-color:#061026;}
#productInfo .boxWrap .pdtInfoBox .head {display:flex; flex-direction: column; align-items: center; width:100%;}
#productInfo .boxWrap .pdtInfoBox .head .boxIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    width:170px;
    height:48px;
    font-size:33px;
    color:#0a1836;
    font-family:NanumMjB;
    line-height:1;
    border-radius: 30px;
    margin-bottom:25px;
    background-color: #c8a76a;
}
#productInfo .boxWrap .pdtInfoBox .head .price {font-size:40px; color:#ffffff; font-family:NanumMjB; text-align:center; line-height: 1; margin-bottom:15px;}
#productInfo .boxWrap .pdtInfoBox .head .price .sText {font-size:34px;}
#productInfo .boxWrap .pdtInfoBox .head .textCell {
    width: 100%;
    font-size: 25px;
    color: #ffffff;
    font-family: PretendardM;
    text-align: center;
}
#productInfo .boxWrap .pdtInfoBox .divider {width:100%; height:2px; margin:25px 0; background-color:#7a808b;}
#productInfo .boxWrap .pdtInfoBox .pdtList li {font-size:22px; color:#ffffff; font-family:PretendardR; margin-bottom:10px;}
#productInfo .boxWrap .pdtInfoBox .pdtList li:before {content:""; display:inline-block; width:18px; height:18px; margin-right:10px; vertical-align: -2px; background-image:url("../images/bullet1.png");}

#productInfo .boxWrap .pdtInfoBox:nth-child(1) {border-color:#c8a76a; background-color:#ffffff;}
#productInfo .boxWrap .pdtInfoBox:nth-child(1) .head .price {color:#061026;}
#productInfo .boxWrap .pdtInfoBox:nth-child(1) .head .textCell {color:#061026;}
#productInfo .boxWrap .pdtInfoBox:nth-child(1) .pdtList li {color:#061026;}




/*
    ************************************* 지점안내 ***************************************
*/
#branchInfo {padding:150px 0; background-color:#f9f6f4;}
#branchInfo .contentWrap {display:flex; justify-content: space-between; align-items: center;}

#branchInfo .cl_sectionTitle .mainText {text-align:left;}
#branchInfo .cl_sectionTitle .descText {text-align: left;}
#branchInfo .boxInfo {display:flex; align-items: center; border-radius:15px; padding:30px 0; background-color:#ffffff;}
#branchInfo .boxInfo .box {position:relative; display:flex; flex-direction: column; justify-content: center; align-items: center; gap:15px; width:180px; font-size:18px; font-family:PretendardM; text-align:center;}
#branchInfo .boxInfo .box:after {content:""; position:absolute; top:0; right:0; width:2px; height:100%; background-color:#f1f1f1;}
#branchInfo .boxInfo .box:last-child:after {display:none;}




/*
    ************************************* 고객 후기 ***************************************
*/
#customerReview {padding:150px 0; background-color:#9DAABF;}
#customerReview {padding:150px 0 140px 0; background-image:url("../images/customerReview_bg.jpg"); background-size:cover; background-position:center;}


#customerReview .cl_sectionTitle .mainText {color: #ffffff;}
#customerReview .cl_sectionTitle .descText {color: #ffffff;}

#customerReview .reviewListWrap {display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap:30px;}
#customerReview .reviewListWrap .reviewItem {display:flex; flex-direction: column; align-items: center; padding:15px 15px 50px 15px; box-sizing: border-box; background-color:#ffffff; border-radius: 32px;}
#customerReview .reviewListWrap .reviewItem .imgCell {width:100%; margin-bottom:30px;}
#customerReview .reviewListWrap .reviewItem .imgCell img {display:block; width:100%;}
#customerReview .reviewListWrap .reviewItem .decoStar {font-size:0; margin-bottom:40px;}
#customerReview .reviewListWrap .reviewItem .reviewText {font-size:20px; color:#000000; font-family:NanumMjB; text-align:center;}
#customerReview .reviewListWrap .reviewItem .reviewText .name {font-family: PrentendardM; display:block; margin-top:30px;}



/*
    ************************************* faq ***************************************
*/
.faq {padding:150px 0; background-color:#faf8f4;}

.faq .cl_sectionTitle .subText {letter-spacing: 5px; margin-right:-5px;}

.faq .faqListWrap {border-top:solid 2px #282828;}
.faq .faqListWrap .faqList {display:flex; align-items: flex-start; gap:30px; padding:0 75px; border-bottom:solid 2px #f0f0f0; background-color:#ffffff; transition:all 0.3s linear;}
.faq .faqListWrap .faqList:before {content:"Q"; display:flex; justify-content: center; align-items: center; width:30px; height:90px; font-size:30px; color:#cac3b7; font-family:PretendardB;}
.faq .faqListWrap .faqList:after {content:""; display:flex; justify-content: center; align-items: center; width:30px; height:90px; font-family:xeicon; font-size:40px; color:#000000;}
.faq .faqListWrap .faqList .faqContent {flex:1;}
.faq .faqListWrap .faqList .faqContent .title {display:flex; align-items: center; min-height:90px; font-size:30px; color:#282828; font-family:PretendardB;}
/*접근성: 질문은 h3 안의 button 으로 마크업 (키보드 조작 기본 지원). 클릭영역을 제목 전체로 확장*/
.faq .faqListWrap .faqList .faqContent .title > button {display:flex; align-items:center; align-self:stretch; flex:1; text-align:left; cursor:pointer;}
.faq .faqListWrap .faqList .faqContent .desc {display:none; font-size:26px; color:#282828; font-family:PretendardR; line-height:1.5;}
.faq .faqListWrap .faqList .faqContent .desc ul li {position:relative; padding-left:30px;}
.faq .faqListWrap .faqList .faqContent .desc ul li:before {content:""; position:absolute; top:50%; left:10px; transform: translateY(-50%); width:5px; height:5px; border-radius:50%; background-color:#222222;}

.faq .faqListWrap .faqList.on {padding-top:20px; padding-bottom:45px; transition:all 0.3s linear;}
.faq .faqListWrap .faqList.on:after {content:"";}


/*
    ************************************* 상담안내 ***************************************
*/
/*#consultationInfo {padding:150px 0; background-color:#1F2A44;}*/
#consultationInfo {padding:100px 0px; background-image:url("../images/consultationInfo_bg.jpg"); background-size:cover; background-position:center;}

#consultationInfo .cl_sectionTitle{margin-bottom: 50px;}
#consultationInfo .cl_sectionTitle .mainText {font-size: 35px; line-height: 50px; color:#ffffff;}
#consultationInfo .cl_sectionTitle .highlightText {display: inline-block; font-size: 45px; color: #c8a76a;margin-top: 30px;}

#consultationInfo .buttonWrap {display:flex; justify-content: center; align-items: center; gap:10px; margin-bottom:40px;}

#consultationInfo .consultTimeInfo {display: flex; justify-content: center; align-items: center; font-size:25px; color:#ffffff; font-family:PrentendardR; text-align: center;}
#consultationInfo .consultTimeInfo img{margin-right: 20px;}

/*
    ************************************* 푸터 ***************************************
*/
footer {padding-bottom:120px; background-color:#FAF8F5;}
footer .footerInfo {display: flex; flex-direction: column; align-items: center; max-width:1920px; width:100%; padding:75px 0; margin:0 auto; box-sizing: border-box;}
footer .footerInfo .termsButtonWrap {display:flex; align-items: center; gap:70px; margin-bottom:15px; max-width: 1400px; width: 100%;}
footer .footerInfo .termsButtonWrap a {position: relative; font-size:20px; color:#0A0A0A; font-family:NotoSansM; line-height:1;}
footer .footerInfo .termsButtonWrap a:after{
    content: "";
    width: 2px;
    height: 15px;
    background: #e0dcd4;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -35px;
}
footer .footerInfo .termsButtonWrap a:last-child:after{content: none;}

/* 약관 링크(좌) + SNS 아이콘(우) 한 줄 */
footer .footerInfo .footerTopRow {display:flex; justify-content: space-between; align-items: center; gap:30px; max-width: 1400px; width: 100%; margin-bottom:15px;}
footer .footerInfo .footerTopRow .termsButtonWrap {width:auto; max-width:none; margin-bottom:0;}

/* 네이버 블로그 (아이콘 원본은 120px - 레티나에서도 선명하도록 축소해 쓴다) */
footer .footerInfo .snsBlog {flex:0 0 auto; display:block; width:44px; height:44px; transition:opacity 0.2s;}
footer .footerInfo .snsBlog:hover, footer .footerInfo .snsBlog:focus-visible {opacity:0.75;}
footer .footerInfo .snsBlog img {display:block; width:100%; height:100%;}

footer .footerInfo .addressWrap {display:flex; justify-content: space-between; align-items: center; font-size:18px; color:#282828; font-family:PrentendardR; line-height:1.5; max-width: 1400px; width: 100%}
footer .footerInfo .addressWrap .space {padding-left:15px;}



/*
    ************************************* 하단 바 ***************************************
*/
#bottomBar {position:fixed; bottom:0; left:0; display:flex; align-items: center; width:100%; height:120px; padding:0 40px; box-sizing: border-box; background-color:#484848;}
#bottomBar .barWrap {display:flex; justify-content: space-between; align-items: center; max-width:1400px; width:100%; margin:0 auto;}
#bottomBar .consultInfo {display: flex; flex-direction: column;}
#bottomBar .consultInfo > span {font-size:18px; font-family:PretendardR; color: #ffffff; margin-top: 10px;}
#bottomBar .buttonWrap {display:flex; align-items: center; gap:10px;}












@media (max-width:1400px) {
    .contentWrap {padding:0 20px; box-sizing: border-box;}

    main section[id], #content {scroll-margin-top:80px;}




    /*
        ************************************** 헤더 ***************************************
    */
    header {height:80px;}

    header .logo img {height:40px;}

    header nav {font-size:18px;}
    header nav .divider {height:10px; margin:0 20px;}

    header nav .btnTel {padding:8px 20px; margin-left:30px;}
    header nav .btnTel img {height:24px;}



    /*
        ************************************* 메인 비주얼 ***************************************
    */
    #mainVisual {height:800px;}

    #mainVisual .visualText h1 {font-size:50px;}

    #mainVisual .visualText h1 .strongText {font-size:45px; margin-top:30px;}
    #mainVisual .visualText h1 .strongText.brandName {font-size:32px; margin-top:0;}
    #mainVisual .visualText .buttonWrap {gap:15px; margin-top:70px;}



    /*
        ************************************* 혹시 이런걱정 ***************************************
    */
    #worryAbout {padding:120px 0;}

    #worryAbout .worryList {display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap:35px 25px;}
    #worryAbout .worryList .item {
        gap:15px;
        font-size:18px;
        padding:15px;
        padding-top:30px;
        border-radius: 20px;
    }
    #worryAbout .worryList .item:before {
        width: 35px;
        height: 12px;
        border-radius: 35px 35px 0 0;
        padding:5px;
    }
    #worryAbout .worryList .item:after {
        width: 35px;
        height: 35px;
        background-size:contain;
    }

    #worryAbout .worryList .item > img {height:140px;}




    /*
        ************************************* 상품추천 ***************************************
    */
    #recommendPdt {padding:120px 0;}





    /*
        ************************************* 후불제 상조 ***************************************
    */
    #postPayment {padding:120px 0;}

    #postPayment .infoBox {
        font-size: 22px;
        margin-bottom: 50px;
        border-radius: 20px;
        padding-top:40px;
        padding-bottom:30px;
    }
    #postPayment .infoBox .boxTitle {padding:5px 15px;}

    #postPayment .compareArea {gap:30px;}
    #postPayment .compareArea .serviceBox {flex:1; width:auto; border-radius: 2vw;}
    #postPayment .compareArea .serviceBox .title {font-size:24px; padding:20px;}
    #postPayment .compareArea .serviceBox .itemWrap {padding:0 20px;}
    #postPayment .compareArea .serviceBox .itemWrap .item {gap:20px; padding:20px 0;}
    #postPayment .compareArea .serviceBox .itemWrap .icon {width:80px; height:80px;}
    #postPayment .compareArea .serviceBox .itemWrap .icon img {width:100%;}
    #postPayment .compareArea .serviceBox .itemWrap .item .desc .mainText {font-size:24px; margin-bottom:8px;}
    #postPayment .compareArea .serviceBox .itemWrap .item .desc .subText {font-size:18px;}
    #postPayment .compareArea .serviceBox .itemWrap .item .desc .subText .smallText {font-size:16px;}
    #postPayment .compareArea .serviceBox .tailText {font-size:18px; padding:40px 0;}

    #postPayment .compareArea .vs {width:80px; height:80px; font-size:40px; letter-spacing: -2px;}



    /*
        ************************************* 특별한 이유 ***************************************
    */
    #whySpecial {padding:120px 0;}

    #whySpecial .itemWrap {gap:30px;}
    #whySpecial .itemWrap .item {border-radius:15px; box-shadow: 0 0 20px rgba(0,0,0,0.1);}
    #whySpecial .itemWrap .item .imgCell {margin-bottom:30px;}
    #whySpecial .itemWrap .item .imgCell .num {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    #whySpecial .itemWrap .item .imgCell .num:before {top:-5px; left:-5px; z-index:-1; width:50px; height:50px;}
    #whySpecial .itemWrap .item .title {font-size:22px; margin-bottom:15px;}
    #whySpecial .itemWrap .item .desc {font-size:18px; padding-bottom:30px;}



    /*
        ************************************* 존엄한 마지막 ***************************************
    */
    #dignifiedLast {padding:120px 0;}

    #dignifiedLast .itemWrap {grid-template-columns:repeat(4, 1fr); gap:20px;}
    #dignifiedLast .itemWrap .item {border-radius: 30px;}
    #dignifiedLast .itemWrap .item .imgCell {margin-bottom:25px;}
    #dignifiedLast .itemWrap .item .title {font-size:22px;}
    #dignifiedLast .itemWrap .item .decoBar {width:30px; height:2px; margin:20px auto;}
    #dignifiedLast .itemWrap .item .desc {font-size:18px; margin-bottom:30px;}



    /*
        ************************************* 처음부터 끝까지 함께 ***************************************
    */
    #together {padding:120px 0;}

    #together .itemWrap {grid-template-columns: repeat(5, 1fr); gap:15px;}
    #together .itemWrap .item {padding-top:40px; padding-bottom:30px; border-radius:20px;}
    #together .itemWrap .item .num {
        width: 45px;
        height: 45px;
        font-size: 24px;
    }
    #together .itemWrap .item .icon {width:55%; margin-bottom:20px;}
    #together .itemWrap .item .icon img {width:100%;}
    #together .itemWrap .item .textWrap .title {font-size:20px;}
    #together .itemWrap .item .textWrap .title:after {margin:15px auto;}
    #together .itemWrap .item .textWrap .title .titleNum {display:none;}
    #together .itemWrap .item .textWrap .desc {font-size:16px;}



    /*
        ************************************* 상품안내 ***************************************
    */
    #productInfo {padding:120px 0;}

    #productInfo .boxWrap {grid-template-columns: repeat(3, 1fr); gap:15px;}
    #productInfo .boxWrap .pdtInfoBox {padding:30px 20px; border-radius:25px;}
    #productInfo .boxWrap .pdtInfoBox .head .boxIcon {
        width:150px;
        height:40px;
        font-size:28px;
        margin-bottom:20px;
    }
    #productInfo .boxWrap .pdtInfoBox .head .price {font-size:35px; margin-bottom:15px;}
    #productInfo .boxWrap .pdtInfoBox .head .price .sText {font-size:28px;}
    #productInfo .boxWrap .pdtInfoBox .head .textCell {font-size: 22px;}
    #productInfo .boxWrap .pdtInfoBox .divider {margin:20px 0;}
    #productInfo .boxWrap .pdtInfoBox .pdtList li {font-size:16px; margin-bottom:10px;}
    #productInfo .boxWrap .pdtInfoBox .pdtList li:before {width:18px; height:18px; margin-right:6px; vertical-align: -3px;}



    /*
        ************************************* 지점안내 ***************************************
    */
    #branchInfo {padding:120px 0;}
    #branchInfo .contentWrap {justify-content: center; gap:50px;}

    #branchInfo .branchContent {width:45%;}
    #branchInfo .boxInfo {display:flex; align-items: center; border-radius:15px; padding:30px 0; background-color:#ffffff;}
    #branchInfo .boxInfo .box {position:relative; display:flex; flex-direction: column; justify-content: center; align-items: center; gap:15px; width:180px; font-size:18px; font-family:PretendardM; text-align:center;}
    #branchInfo .boxInfo .box:after {content:""; position:absolute; top:0; right:0; width:2px; height:100%; background-color:#f1f1f1;}
    #branchInfo .boxInfo .box:last-child:after {display:none;}

    #branchInfo .branchMap {width:45%;}


    /*
        ************************************* 고객 후기 ***************************************
    */
    #customerReview {padding:120px 0;}

    #customerReview .reviewListWrap {grid-template-columns: repeat(4, 1fr); gap:15px;}
    #customerReview .reviewListWrap .reviewItem {padding:25px 10px;}
    #customerReview .reviewListWrap .reviewItem .decoStar {width:100%; margin-bottom:20px; text-align:center;}
    #customerReview .reviewListWrap .reviewItem .decoStar img {width:50%;}
    #customerReview .reviewListWrap .reviewItem .imgCell {margin-bottom:15px;}
    #customerReview .reviewListWrap .reviewItem .reviewText {font-size:16px;}
    #customerReview .reviewListWrap .reviewItem .reviewText .name {margin-top:10px;}



    /*
        ************************************* faq ***************************************
    */
    #faq {padding:120px 0;}

    #faq .cl_sectionTitle .subText {letter-spacing: 5px; margin-right:-5px;}

    #faq .faqListWrap .faqList {gap:25px; padding:0 60px;}
    #faq .faqListWrap .faqList:before {width:25px; height:70px; font-size:26px;}
    #faq .faqListWrap .faqList:after {width:25px; height:70px; font-size:36px;}
    #faq .faqListWrap .faqList .faqContent .title {min-height:70px; font-size:26px;}
    #faq .faqListWrap .faqList .faqContent .desc {font-size:22px;}

    #faq .faqListWrap .faqList.on {padding-top:15px; padding-bottom:35px;}


    /*
        ************************************* 상담안내 ***************************************
    */
    #consultationInfo {padding:120px 0;}

    #consultationInfo .buttonWrap {gap:40px; margin-bottom:40px;}

    #consultationInfo .consultTimeInfo {font-size:25px;}


    /*
        ************************************* 푸터 ***************************************
    */
    footer {padding-bottom:120px;}
    footer .footerInfo {padding:40px;}
    footer .footerInfo .termsButtonWrap {gap:20px; margin-bottom:30px;}
    footer .footerInfo .termsButtonWrap a {font-size:20px;}
    footer .footerInfo .termsButtonWrap a:after{
        right: -10px;
    }
    footer .footerInfo .footerTopRow {gap:20px; margin-bottom:30px;}
    footer .footerInfo .snsBlog {width:40px; height:40px;}
    footer .footerInfo .addressWrap {font-size:16px;}
    footer .footerInfo .addressWrap .space {padding-left:15px;}



    /*
        ************************************* 하단 바 ***************************************
    */
    #bottomBar {height:120px; padding:0 20px;}
    #bottomBar .consultInfo {font-size:30px;}
    #bottomBar .consultInfo > span {font-size:15px;}
    #bottomBar .buttonWrap {gap:20px;}


}




@media (max-width:768px) {
    main section[id], #content {scroll-margin-top:64px;}


    /*
        ************************************** 헤더 ***************************************
    */
    header {height:64px;}

    header .logo img {height:30px;}

    header nav a, header nav .divider {display:none;}
    header nav a.btnTel {display:flex; gap:8px;}
    header nav .btnTel {font-size:16px; padding:8px 20px; margin-left:0;}
    header nav .btnTel img {height:15px;}


    /*
        ************************************* 메인 비주얼 ***************************************
    */
    #mainVisual {height:400px; background-image:url("../images/mainVisual_m.jpg");}

    #mainVisual .visualText {margin-bottom:80px;}
    #mainVisual .visualText h1 {font-size:25px; line-height:1.5;}

    #mainVisual .visualText h1 .strongText {font-size:20px; margin-top:20px;}
    #mainVisual .visualText h1 .strongText.brandName {font-size:16px; margin-top:0; margin-bottom:5px;}
    #mainVisual .visualText .buttonWrap {display:none; flex-direction:column; align-items: flex-start; gap:5px; margin-top:30px;}



    /*
       ************************************* 혹시 이런걱정 ***************************************
    */
    #worryAbout {padding:60px 0;}

    #worryAbout .worryList {grid-template-columns: repeat(2, 1fr); gap:25px 10px;}
    #worryAbout .worryList .item {
        gap:10px;
        font-size:14px;
        padding:10px;
        padding-top:25px;
        border-radius: 10px;
    }
    #worryAbout .worryList .item:before {
        width: 30px;
        height: 10px;
        border-radius: 35px 35px 0 0;
        padding:5px;
    }
    #worryAbout .worryList .item:after {
        width: 30px;
        height: 30px;
        background-size:contain;
    }

    #worryAbout .worryList .item > img {height:80px;}



    /*
        ************************************* 상품추천 ***************************************
    */
    #recommendPdt {height:80vw; padding:60px 0; background-image:url("../images/s3_bg_m.jpg");}
    #recommendPdt .cl_sectionTitle {text-align:center;}




    /*
       ************************************* 후불제 상조 ***************************************
    */
    #postPayment {padding:60px 0;}

    #postPayment .infoBox {
        font-size: 16px;
        margin-bottom: 40px;
        border-radius: 10px;
        padding-top:30px;
        padding-bottom:20px;
    }
    #postPayment .infoBox .boxTitle {padding:8px 15px;}

    #postPayment .compareArea {align-items:flex-start; gap:15px;}
    #postPayment .compareArea .serviceBox {border-radius: 10px;}
    #postPayment .compareArea .serviceBox .title {font-size:17px; padding:10px 5px;}
    #postPayment .compareArea .serviceBox .itemWrap {padding:0 10px;}
    #postPayment .compareArea .serviceBox .itemWrap .item {flex-direction:column; gap:10px; padding:10px 0;}
    #postPayment .compareArea .serviceBox .itemWrap .item .icon {width:60px; height:60px;}
    #postPayment .compareArea .serviceBox .itemWrap .item .desc {text-align:center; letter-spacing: -1px;}
    #postPayment .compareArea .serviceBox .itemWrap .item .desc .mainText {font-size:16px; margin-bottom:4px;}
    #postPayment .compareArea .serviceBox .itemWrap .item .desc .subText {font-size:13px;}
    #postPayment .compareArea .serviceBox .itemWrap .item .desc .subText .smallText {font-size:12px;}
    #postPayment .compareArea .serviceBox .tailText {font-size:12px; padding:15px 0; letter-spacing: -1px;}

    #postPayment .compareArea .vs {width:50px; height:50px; font-size:25px;}



    /*
        ************************************* 특별한 이유 ***************************************
    */
    #whySpecial {padding:60px 0;}

    #whySpecial .itemWrap {grid-template-columns: repeat(2, 1fr); gap:15px 8px;}
    #whySpecial .itemWrap .item {border-radius:15px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
    #whySpecial .itemWrap .item .imgCell {margin-bottom:30px;}
    #whySpecial .itemWrap .item .imgCell .num {width: 30px; height: 30px; font-size: 16px;}
    #whySpecial .itemWrap .item .imgCell .num:before {top:-5px; left:-5px; z-index:-1; width:40px; height:40px;}
    #whySpecial .itemWrap .item .title {font-size:16px; margin-bottom:10px;}
    #whySpecial .itemWrap .item .desc {font-size:13px; padding-bottom:30px; letter-spacing: -0.5px;}



    /*
        ************************************* 존엄한 마지막 ***************************************
    */
    #dignifiedLast {padding:60px 0;}

    #dignifiedLast .itemWrap {grid-template-columns:repeat(2, 1fr); gap:10px;}
    #dignifiedLast .itemWrap .item {border-radius: 20px;}
    #dignifiedLast .itemWrap .item .imgCell {margin-bottom:15px;}
    #dignifiedLast .itemWrap .item .title {font-size:16px;}
    #dignifiedLast .itemWrap .item .decoBar {width:20px; height:1px; margin:15px auto;}
    #dignifiedLast .itemWrap .item .desc {font-size:14px; margin-bottom:20px;}



    /*
        ************************************* 처음부터 끝까지 함께 ***************************************
    */
    #together {padding:60px 0; background-image:url("../images/together_bg_m.jpg");}

    #together .itemWrap {grid-template-columns: repeat(1, 1fr); gap:12px;}
    #together .itemWrap .item {flex-direction:row; gap:18px; padding:15px; border-radius:15px;}
    #together .itemWrap .item .num {display:none;}
    #together .itemWrap .item .icon {display:flex; justify-content:center; align-items:center; width:70px; padding-bottom:0; margin-bottom:0;}
    #together .itemWrap .item .icon:after {display:none;}
    #together .itemWrap .item .textWrap {width:auto; flex:1;}
    #together .itemWrap .item .textWrap .title {display:flex; align-items: center; gap:5px; font-size:18px; margin-bottom:7px;}
    #together .itemWrap .item .textWrap .title:after {display:none;}
    #together .itemWrap .item .textWrap .title .titleNum {position:static; display:flex; transform:translate(0,0); width:23px; height:23px; font-size:12px;}
    #together .itemWrap .item .textWrap .desc {font-size:14px; text-align:left;}



    /*
        ************************************* 상품안내 ***************************************
    */
    #productInfo {padding:60px 0;}

    #productInfo .boxWrap {grid-template-columns: repeat(1, 1fr); gap:12px;}
    #productInfo .boxWrap .pdtInfoBox {flex-direction:row; gap:30px; padding:17.5px; border-radius:16px;}
    #productInfo .boxWrap .pdtInfoBox .head {width:auto;}
    #productInfo .boxWrap .pdtInfoBox .head .boxIcon {width:85px; height:25px; font-size:17px; margin-bottom:15px;}
    #productInfo .boxWrap .pdtInfoBox .head .price {font-size:21px; margin-bottom:8px;}
    #productInfo .boxWrap .pdtInfoBox .head .price .sText {font-size:17px;}
    #productInfo .boxWrap .pdtInfoBox .head .textCell {font-size: 14px;}
    #productInfo .boxWrap .pdtInfoBox .divider {display:none;}
    #productInfo .boxWrap .pdtInfoBox .pdtList {flex:1;}
    #productInfo .boxWrap .pdtInfoBox .pdtList li {font-size:11px; margin-bottom:8px;}
    #productInfo .boxWrap .pdtInfoBox .pdtList li:last-child{margin-bottom: 0px;}
    #productInfo .boxWrap .pdtInfoBox .pdtList li:before {width:12px; height:12px; margin-right:5px; vertical-align: -3px; background-size:contain;}



    /*
        ************************************* 지점안내 ***************************************
    */
    #branchInfo {padding:60px 0 230px 0px;}
    #branchInfo .contentWrap {position:relative; flex-direction:column; gap:30px; padding: 0px 21px;}

    #branchInfo .branchContent{width: auto;}
    #branchInfo .branchContent .cl_sectionTitle{margin-bottom: 0px;}
    #branchInfo .branchContent .cl_sectionTitle .mainText{text-align: center;}
    #branchInfo .branchContent .cl_sectionTitle .descText{text-align: center;}

    #branchInfo .cl_sectionTitle .mainText {margin-bottom:0px;}

    #branchInfo .boxInfo {position:absolute; bottom:-160px; left:50%; transform: translateX(-50%); justify-content: center; width: calc(100% - 42px); max-width: 640px; height: 100px; padding: 15px 0px; box-sizing: border-box;}
    #branchInfo .boxInfo .box {width:calc(100% / 3); height:80px; font-size:11px; gap: 10px;}
    #branchInfo .boxInfo .box:after {height: 60px; top: 50%; transform: translateY(-50%);}
    #branchInfo .boxInfo .box img{width: 32px; height: 32px;}

    #branchInfo .branchMap {flex:1; width: 100%;}
    #branchInfo .branchMap img {width:100%;}



    /*
        ************************************* 고객 후기 ***************************************
    */
    #customerReview {padding:60px 0; background-image: url(../images/review_bg_m.jpg);}

    #customerReview .reviewListWrap {grid-template-columns: repeat(2, 1fr); gap:10px;}
    #customerReview .reviewListWrap .reviewItem {padding:20px 10px;}
    #customerReview .reviewListWrap .reviewItem .decoStar {width:100%; margin-bottom:15px;}
    #customerReview .reviewListWrap .reviewItem .imgCell {margin-bottom:15px;}
    #customerReview .reviewListWrap .reviewItem .reviewText {font-size:14px;}
    #customerReview .reviewListWrap .reviewItem .reviewText .name {margin-top:10px;}



    /*
        ************************************* faq ***************************************
    */

    #faq {padding:60px 0;}

    #faq .cl_sectionTitle .subText {letter-spacing: 3px; margin-right:-3px;}

    #faq .faqListWrap .faqList {gap:10px; padding:0 15px;}
    #faq .faqListWrap .faqList:before {width:20px; height:45px; font-size:15px;}
    #faq .faqListWrap .faqList:after {width:20px; height:45px; font-size:18px;}
    #faq .faqListWrap .faqList .faqContent .title {min-height:45px; font-size:15px;}
    #faq .faqListWrap .faqList .faqContent .desc {font-size:13px;}
    #faq .faqListWrap .faqList .faqContent .desc ul li {padding-left:15px;}
    #faq .faqListWrap .faqList .faqContent .desc ul li:before {top:50%; left:5px; width:4px; height:4px;}

    #faq .faqListWrap .faqList.on {padding-top:5px; padding-bottom:25px;}


    /*
        ************************************* 상담안내 ***************************************
    */
    #consultationInfo {padding:60px 0; background-image: url(../images/consultationInfo_bg_m.jpg);}

    #consultationInfo .cl_sectionTitle {margin-bottom: 30px;}
    #consultationInfo .cl_sectionTitle .mainText {font-size: 17.5px; line-height: 25px;}
    #consultationInfo .cl_sectionTitle .highlightText {font-size: 22.5px; line-height: 32.5px; margin-top: 15px;}

    #consultationInfo .buttonWrap {gap:10px; margin-bottom:20px;}
    #consultationInfo .buttonWrap button {width:140px;}

    #consultationInfo .consultTimeInfo {font-size:12.5px;}
    #consultationInfo .consultTimeInfo img {margin-right: 10px; width: 14px; height: 14px;}


    /*
        ************************************* 푸터 ***************************************
    */
    footer {padding-bottom:0; margin-bottom: 130px;}
    footer .footerInfo {padding:20px 25px;}
    footer .footerInfo .termsButtonWrap {gap:32.5px; margin-bottom:15px;}
    footer .footerInfo .termsButtonWrap a {font-size:10px; position: relative;}
    footer .footerInfo .termsButtonWrap a:after{
        content: "";
        width: 1px;
        height: 7px;
        background: #e0dcd4;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -15px;
    }
    footer .footerInfo .footerTopRow {gap:12px; margin-bottom:15px;}
    footer .footerInfo .snsBlog {width:26px; height:26px;}

    footer .footerInfo .addressWrap {font-size:9px; position: relative; align-items: flex-end;}
    footer .footerInfo .addressWrap img{width: 96px; height: 22px;}
    footer .footerInfo .addressWrap .space {padding-left:10px;}


    /*
        ************************************* 하단 바 ***************************************
    */
    #bottomBar {height: 130px; padding: 14px 12px;}
    #bottomBar .barWrap {flex-direction: column; gap: 10px;}
    #bottomBar .consultInfo {align-items: center;}
    #bottomBar .consultInfo img{width: 122px; height: 28px;}
    #bottomBar .consultInfo > span {font-size: 11px; margin-top: 8px;}
    #bottomBar .buttonWrap {justify-content: center; width: 100%; gap: 5px;}
    #bottomBar .buttonWrap .cl_baseButton {width: 100%; height: 45px; font-size: 15px;}
}