@charset "utf-8";

.titleText > h3 > span {display: block; margin-top: 14px; font-weight: 400;}
.serviceWrap.funeralFullbox > .tab-content {max-width: 1320px; margin: 0 auto;}
.serviceWrap.funeralFullbox > .tab-content > ul.swiper-box {display: flex; flex-direction: column; gap: 100px;}

ul.supplies-content {width: 100%; display: flex; justify-content: flex-start; column-gap: 48px;}
ul.supplies-content > li {width: 50%; margin: 0;}
ul.supplies-content > li.supplies-txt {width: 591px; padding: 23px 0; display: flex; flex-direction: column; justify-content: space-between;}

ul.supplies-content > li > ul > li > img {width: 100%; height: 100%; display: block;}

li.supplies-txt .supp-desc > strong {font-size: 22px; line-height: 34px; font-weight: 700; color: #2a303c;}
li.supplies-txt .supp-desc > p {font-size: 18px; font-weight: 400; line-height: 23px; color: #2a303c; margin-top: 5px; margin-bottom: 20px;}
li.supplies-txt .supp-desc > span {font-size: 15px; font-weight: 400; color: #5c6272; line-height: 23px;}
li.supplies-txt .supp-desc > span.desc {display: inline-block; font-size: 13px; color: #798493; line-height: 22.5px;}

.supp-table {display: flex; gap: 1px;}
.supp-table.column {flex-direction: column;}
.supp-table span {font-size: 10px; font-weight: 400; line-height: 20px; color: #798493; margin-top: 3px;}
.supp-table table { border: 1px solid #D1D4DA !important; width: 100%; border-collapse: collapse;}
.supp-table table * {text-align: center; vertical-align: middle;}
.supp-table table > tbody > tr:first-child > th {background: #F1F2F3; font-size: 12px; font-weight: 500; color: #2a303c; padding: 6px 0;}
.supp-table table > tbody > tr > td {font-size: 12px; font-weight: 400; color: #2a303c; padding: 8px 0;}
.supp-table table > tbody > tr > td:first-child, .supp-table table > tbody > tr > th:first-child {border-right: 1px solid #D1D4DA;}
.supp-table table > tbody > tr:not(:last-child) {border-bottom: 1px solid #D1D4DA;}
.supp-table table > tbody > tr > td:nth-child(3), .supp-table table > tbody th:nth-child(3) {border-left: 1px solid #D1D4DA;}
#supplies04 .swiper-box > li:first-child .supp-table tr:nth-child(2) {height: 82px;}
#supplies04 > ul > li:last-child .supp-table table > tbody > tr > td {border-bottom: 1px solid #D1D4DA;}
.supp-table > div {width: 100%;}

ul.txt-box {border: 1px solid #EAECF0; padding: 30px 36px; margin-top: 60px;}
ul.txt-box > li {font-size: 15px; font-weight: 400; line-height: 27px;}

#supplies04 .swiper-box > li:last-child .supp-table tr:nth-child(2) td:last-child {text-align: start; padding: 20.5px 35px; line-height: 22px;}

.supp-table tr:nth-child(2) td:nth-child(3) > p > span.desc {font-size: 10px; font-weight: 400; color: #5C6272; display: inline-block; margin: 0 36.5px;}
.supp-table tr:nth-child(2) td:nth-child(3) > p {display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 12px; justify-content: center;}
#supplies04 .swiper-box > li:last-child .supp-table tr:nth-child(2) td:nth-child(3) > p {justify-content: start;}
span.circle {display: flex; align-items: center; font-weight: 400; font-size: 12px; color: #2a303c;}
span.circle::before {content: ''; display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px;}
span.circle-w::before {background: #fff; border: 1px solid #D1D4DA; width: 12px; height: 12px;}
span.circle-w2::before {background: #FFFDEB; border: 1px solid #D1D4DA; width: 12px; height: 12px;}
span.circle-pu::before {background: #F0DCF9;}
span.circle-pi::before {background: #FFBCD8;}
span.circle-bl::before {background: #C1E7F7;}
span.circle-iv::before {background: #FBF7E6; border: 1px solid #D1D4DA;}
span.circle-ye::before {background: #FCF6D2;}
span.circle-gr::before {background: #D2EABB;}
span.circle-na::before {background: #5163C1;}
span.circle-re::before {background: #CE3C32;}

span.circle.circle-gr {padding-left: 10px;}

ul.supplies04-descBox {margin-top: 60px;}
ul.supplies04-descBox > li.desc-ti > h3 {font-size: 18px; font-weight: 700; line-height: 26.5px; color: #5C6272; padding-bottom: 12px; border-bottom: 1px solid #BBC0C9;}
ul.supplies04-descBox > li.desc-table {display: flex; align-items: center; justify-content: center; margin-top: 35px; column-gap: 66px; row-gap: 16px;}
ul.supplies04-descBox > li.desc-table > img {width: 156px; height: 163px;}
ul.supplies04-descBox > li.desc-table > table {border-collapse: collapse; width: 656px;}
ul.supplies04-descBox > li.desc-table > table th, ul.supplies04-descBox > li.desc-table > table td {border: 1px solid #D1D4DA;}
ul.supplies04-descBox > li.desc-table > table th {height: 40px; background: #F7F7F4; font-size: 16px; font-weight: 700; line-height: 23px; border-top: none;}
ul.supplies04-descBox > li.desc-table > table td {height: 55px; font-size: 16px; font-weight: 400; line-height: 16px;}
ul.supplies04-descBox > li.desc-table > table caption{caption-side:top; text-align:right !important; font-size:11px; margin-bottom:5px; font-weight: 400; line-height: 16px; color: #5C6272;}
/* ── 대각선 셀 ───────────────────────── */
.diag-cell{--diag-color: #D1D4DA; --diag-w: 1px; position: relative; overflow: hidden;}
.diag-cell::after{content:""; position:absolute; inset:0; background-image: linear-gradient(to top right, transparent calc(50% - var(--diag-w)/2), var(--diag-color) 0,
    var(--diag-color) calc(50% + var(--diag-w)/2), transparent 0); pointer-events:none;}
ul.supplies04-descBox > li.desc-table > table * {text-align: center; vertical-align: middle;}
ul.supplies04-descBox > li.desc-table > table th.diag-cell, ul.supplies04-descBox > li.desc-table > table tr > td:first-child {border-left: none !important;}
ul.supplies04-descBox > li.desc-table > table th:last-child, ul.supplies04-descBox > li.desc-table > table tr > td:last-child {border-right: none !important;}


/**************** 태블릿 이상 ****************/
@media only screen and (min-width: 768px) {
    .lineTab {margin-bottom: 80px;}
    .lineTab.supp ul li a {width: 243px;}
    .lineTab.supp ul {gap: 15px;}
}

/************* 모바일 *************/
@media only screen and (max-width: 768px) {
    .lineTab {margin-bottom: 41px;}
    .lineTab ul {padding: 0 24px;}

    .serviceWrap.funeralFullbox > .tab-content {padding: 0 24px;}
    .serviceWrap.funeralFullbox > .tab-content > ul.swiper-box {gap: 80px;}

    ul.supplies-content {flex-direction: column;}
    ul.supplies-content > li, ul.supplies-content > li.supplies-txt {width: 100%;}

    ul.supplies-content > li.supplies-txt {padding: 30px 11px 0 10px;}
    .supp-table {margin-top: 16px;}
    .supp-table span {margin-top: 5px;}

    li.supplies-txt .supp-desc > strong {font-size: 19px; line-height: 27px;}
    li.supplies-txt .supp-desc > p {font-size: 17px; line-height: 150%; margin-bottom: 10px;}
    li.supplies-txt .supp-desc > span {font-size: 12px; line-height: 20px;}

    .supp-table > table > tbody > tr > td, .supp-table > table > tbody > tr:first-child > th {font-size: 13px; padding: 9px 0;}

    ul.txt-box {padding: 16px;}
    ul.txt-box > li {font-size: 12.5px; line-height: 17px; text-indent: -6px; padding-left: 6px;}
    ul.txt-box > li:not(:last-child) {margin-bottom: 8px;}

    .supp-table tr:nth-child(2) td:nth-child(3) > p {flex-direction: column; align-items: center; row-gap: 5px;}
    #supplies04 .swiper-box > li:last-child .supp-table tr:nth-child(2) td:last-child {padding: 12.5px 0;}
    #supplies04 .supp-table tr:nth-child(2) td:nth-child(3) > p {flex-direction: column; align-items: start; row-gap: 5px; width: fit-content; margin: 0 auto;}
    
    .priceServiceWrap .titleText {margin-bottom: 62px;}
    .supp-table tr:nth-child(2) td:nth-child(3) > p > span.desc {margin: 0 12.5px;}

    #supplies01 .supp-table > table > tbody > tr > th:first-child, #supplies01 .supp-table > table > tbody > tr > td:first-child {width: 30%;}
    #supplies01 .supp-table > table > tbody > tr > th:last-child, #supplies01 .supp-table > table > tbody > tr > td:last-child {width: 70%;}

    ul.supplies04-descBox > li.desc-table {flex-direction: column;}
    ul.supplies04-descBox > li.desc-table > table {width: 327px;}
    ul.supplies04-descBox > li.desc-table > table caption {font-size: 10px; line-height: 14px;}
    ul.supplies04-descBox > li.desc-table > table th {font-size: 14px; line-height: 19px; height: 42px;}
    ul.supplies04-descBox > li.desc-table > table td {font-size: 14px; line-height: 14px; height: 46px;}
    ul.supplies04-descBox ul.txt-box {margin-top: 30px;}
    ul.supplies04-descBox > li.desc-table > img {width: 327px; height: 177px;}

    span.circle.circle-gr {padding-left: 0px;}
    li.supplies-txt .supp-desc > span.desc {font-size: 12px;}
}