@charset "utf-8";

#container {margin-bottom: 0px;}

.serviceMakerListWrap {padding-bottom: 134px !important;}
.serviceMakerListContent {max-width: 1320px; margin: 0 auto; width: 100%;}
.serviceMakerListContent > h2 {text-align: center; font-size: 25px; font-weight: 700; margin-bottom: 80px;}
.serviceMakerListContent > ul {display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 70px; column-gap: 42px;}
.serviceMakerListContent > ul > li > a > .list-img {width: 412px; height: 320px; background: #d9d9d9; border-radius: 10px;}
.serviceMakerListContent > ul > li > a > .list-img > img {width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
.serviceMakerListContent > ul > li:nth-child(1) > a > .list-img > img {object-position: 65% center;}
.serviceMakerListContent > ul > li:nth-child(2) > a > .list-img > img {object-position: right center;}
.serviceMakerListContent > ul > li:nth-child(3) > a > .list-img > img {object-position: 52% center;}
.serviceMakerListContent > ul > li > a > .list-title {padding: 20px 0 0 24px;}
.serviceMakerListContent > ul > li > a > .list-title > h2 {font-weight: 400; font-size: 20px;}
.serviceMakerListContent > ul > li > a > .list-title > h3 {font-weight: 400; font-size: 17px; margin-top: 14px;}
.serviceMakerListContent > ul > li > a > .list-title > h2 > strong {font-weight: 700;}
.serviceMakerContent .serviceProcessContent > ul > li > strong > span > img {width: 18px; height: 14px; margin-bottom: 5px;}


.serviceMakerContent {padding-top: 80px; padding-bottom: 100px;}
.serviceMakerContent .serviceProcessContent {width: 100% !important;}
.serviceMakerContentBack {background: #f9f9f9; max-width: none; padding: 80px 0 !important; justify-content: center;}

.serviceMakerTitle {height: 274px; background: #F6F7F8; margin-bottom: 0px;}
.serviceMakerTitle .titleText > h2 > strong {font-weight: 600;}
.serviceMakerTitle .titleText > h2 {font-weight: 400 !important;}

.serviceMakerContent ul > li > strong {display: block; text-align: center;}
.serviceMakerContent .serviceProcessContent > ul > li {justify-content: center; flex-direction: column; max-width: 960px;}
.serviceMakerContent .serviceProcessContent > ul > li:not(:last-child) {margin-bottom: 80px;}
.serviceMakerContent .serviceProcessContent > ul > li > strong {margin-bottom: 80px; font-size: 26px;}
.servicePetlossWrap .serviceProcessContent > ul > li > p {font-weight: 400; font-size: 16px; width: 100%; padding: 0px 0px 0 20px;}
.serviceMakerContent .serviceProcessContent > ul > li > p > strong, .serviceMakerContent .serviceProcessContent > ul > li > div > p > strong {font-weight: 700; font-size: 20px; color: #2a303c; letter-spacing: -0.6px; line-height: 33px; 
    display: inline-block; margin-bottom: 20px;}
.serviceMakerContent .serviceProcessContent > ul > li p em.underline {border-bottom: 1px solid #4A515F; font-weight: 400;}
.servicePetlossWrap .serviceProcessContent > ul > li > p > span {display: block; margin-bottom: 16px; font-size: 16px; font-weight: 400; line-height: 30px;}
.servicePetlossWrap .serviceProcessContent > ul > li > p > span:last-child, .servicePetlossWrap .serviceProcessContent > ul > li > div > p > span {margin-bottom: 0 !important;}
.serviceMakerContentBack > div > ul > li:last-child strong {margin-bottom: 17px !important;}

.serviceMakerContent .imgWrap {width: 960px; height: 467px; margin-bottom:30px;}
.serviceMakerContent .imgWrap > img {width: 100%; height: 100%; object-fit: cover;}
.serviceMakerContent .imgWrap.imgWrap2 {display: flex; gap: 30px;}
.serviceMakerContent .mb-imgWrap, .serviceMakerContent .mb-imgWrap2 {display: none;}

.serviceMakerContent li.makerImg {background: #f9f9f9; display: flex !important; flex-direction: row !important; padding: 45px 0; gap: 40px;}
.serviceMakerContent li.makerImg > .imgWrap {width: 110px; height: 110px; margin-bottom: 0;}
.serviceMakerContent li.makerImg > .imgWrap > img {border-radius: 50%;}
.serviceMakerContent li.makerImg > p {width: auto !important; padding-left: 0 !important; font-size: 14px !important; line-height: 28px;}
.serviceMakerContent li.makerImg > p > span {display: inline-block !important; padding-left: 11px; font-size: 15px !important;}
.serviceMakerContent li.makerImg > p > span , .serviceMakerContent li.makerImg > p > strong {margin-bottom: 10px !important;}

.serviceMakerViewListContent > h2 {font-size: 25px; font-weight: 700; color: #2A303C; margin-bottom: 40px; text-align: center;}
.serviceMakerViewListContent > ul {display: flex; gap: 40px;}
.serviceMakerViewListContent > ul > li > a > .list-img {width: 462px; height: 260px; margin-bottom: 17px; background: #d9d9d9; border-radius: 10px;}
.serviceMakerViewListContent > ul > li > a > .list-img > img {width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}

/*상세페이지 목록 이미지 위치*/
.serviceMakerViewListContent > ul > li.makers01 > a > .list-img > img {object-position: 65% center;}
.serviceMakerViewListContent > ul > li.makers03 > a > .list-img > img {object-position: right;}

.serviceMakerViewListContent > ul > li > a > .list-title {padding-left: 10px; max-width: 462px;}
.serviceMakerViewListContent > ul > li > a > .list-title > span {font-size: 17px; font-weight: 400; display: -webkit-box; overflow: hidden; text-overflow: ellipsis;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 26.5px;}
.serviceMakerViewListContent > ul > li > a > .list-title > span > strong {font-weight: 700;}
.serviceMakerViewListContent > a.list-btn {display: flex; width: 386px; height: 47px; border: 1px solid #431f88; margin: 0 auto; margin-top: 60px; justify-content: center; align-items: center; font-size: 14px; color: #431f88;}

/*슬라이드*/
.makerSwiperWrap {width: 100%; position: relative; margin-bottom: 40px;}
.makerSwiper {width: 100%; overflow: hidden; padding-bottom: 29px;}
.makerSwiper .swiper-slide {display: flex; flex-direction: column; gap: 16px; align-items: center; width: 100% !important; flex-shrink: 0;}
.makerSwiper .makerSwiper_wrap_img > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.makerSwiperWrap .swiper-pagination {display: flex; justify-content: center; align-items: center; bottom: 0;}
.makerSwiperWrap .swiper-pagination .swiper-pagination-bullet {width: 9px; height: 9px; opacity: .5; background: #d9d9d9;}
.makerSwiperWrap .swiper-pagination .swiper-pagination-bullet-active {opacity: 1; background: #431F88 !important;}
.makerSwiperWrap .swiper-button-prev.is_desktop, .makerSwiperWrap .swiper-button-next.is_desktop {color: #BBC0C9; width: 17px; height: 17px;}
.makerSwiperWrap .swiper-button-prev.is_desktop::after, .makerSwiperWrap .swiper-button-next.is_desktop::after {font-size: 17px;}
.makerSwiperWrap .swiper-button-next.is_desktop { right: -37px; top: 50%; transform: translateY(-1px);}
.makerSwiperWrap .swiper-button-prev.is_desktop { left: -37px; top: 50%; transform: translateY(-1px);}

@media only screen and (min-width: 768px) {
    .mb-br{display: none !important}
    .pc-br{display: block !important}
    .is-desktop, .is-desktop {display: block !important;}

    .serviceMakerViewListWrap {margin-top: 40px; padding-bottom: 110px !important;}
    .serviceMakerContent .imgWrap2 > img {width: 465px !important; height: 467px !important;}
}

@media only screen and (max-width: 768px) {
    .mb-br{display: block !important}
    .pc-br{display: none !important}
    .is-mobile, .is-mobile {display: block !important;}
    
    .serviceMakerContent.serviceMakerListWrap {margin-bottom: 0; padding-bottom: 91px;}
    .serviceMakerListWrap {padding-top: 39.38px;}
    .serviceMakerContent {padding-bottom: 80px;}
    .servicePetlossWrap.serviceMakerContent.serviceMakerLast {padding-bottom: 0 !important;}
    .serviceMakerContent .serviceProcessContent > ul > li > strong > span > img {width: 15px; height: 12px; margin-bottom: 2px;}

    .newServiceFuneral > div.titleText > h2 {line-height: 34px;}

    .serviceMakerListWrap {margin-bottom: 102px;}
    .serviceMakerListContent > h2 {margin-bottom: 50px; font-size: 21px;}
    .serviceMakerListContent > h2.is-mobile {margin-bottom: 40px !important;}
    .serviceMakerListContent > ul {grid-template-columns: repeat(1, 1fr); padding: 0 24px; row-gap: 54px; max-width: 327px; box-sizing: content-box; margin: 0 auto;}
    .serviceMakerListContent > ul > li > a > .list-img {width: 100%; height: 185px;}
    .serviceMakerListContent > ul > li > a > .list-title {padding: 12px 0 0 12px;}
    .serviceMakerListContent > ul > li > a > .list-title > h2 {font-size: 16px;}
    .serviceMakerListContent > ul > li > a > .list-title > h3 {font-size: 13px; margin-top: 10px;}
    
    .serviceMakerContentBack {padding: 58px 0 50px 0 !important;}
    .serviceMakerContent .serviceProcessContent {opacity: 1;}
    
    .serviceMakerTitle {height: 260px;}
    .serviceMakerTitle .titleText {padding: 55px;}
    .serviceMakerTitle .titleText > h2 {color: #2A303C; font-size: 23px;}
    .serviceMakerTitle .titleText > h3 {color: #5c6272; font-size: 14px;}
    
    .serviceMakerContent .imgWrap {width: 311px; height: 280px; overflow: hidden;}
    .serviceMakerContent .imgWrap1 {width: 327px; height: 320px;}
    .serviceMakerContent .imgWrap3 {width: 100%; height: 280px;}
    .serviceMakerContent .mb-imgWrap {display: block; height: 155px !important; margin-top: 40px;}
    .serviceMakerContent .mb-imgWrap2 {display: block;}
    
    .serviceProcessContent {padding: 0 !important;}
    .serviceProcessContent > ul {display: block;}
    .serviceMakerContent .serviceProcessContent > ul > li:not(:last-child) {margin-bottom: 60px;}
    .serviceMakerContent .serviceProcessContent > ul > li > strong {margin-bottom: 40px; font-size: 20px;}
    .serviceMakerContent .serviceProcessContent > ul > li > p, .servicePetlossWrap .serviceProcessContent > ul > li > div > p  {padding: 0 8px; max-width: 327px;}
    .serviceMakerContent .serviceProcessContent > ul > li > p > span, .servicePetlossWrap .serviceProcessContent > ul > li > div > p > span {font-size: 14px; display: block;
    margin-bottom: 16px; font-weight: 400; line-height: 26px;}
    .serviceMakerContent .serviceProcessContent > ul > li > p > strong,  .servicePetlossWrap .serviceProcessContent > ul > li > div > p > strong {font-size: 17px; line-height: 27px;}
    .serviceProcessContent > ul > li > div.is-mobile {display: flex !important; flex-direction: column; align-items: center;}

    .serviceMakerContent li.makerImg {position: relative; margin-top: 126px; padding-top:66px; padding-bottom: 36px;}
    .serviceMakerContent li.makerImg > .imgWrap {position: absolute; top: -50%; transform: translateY(50%);}
    .serviceMakerContent li.makerImg > p {text-align: center;} 
    
    .serviceMakerViewListWrap {background: transparent; padding: 64px 0 55px 0 !important;}
    .serviceMakerViewListContent > h2 {font-size: 19px; margin-bottom: 27px;}
    .serviceMakerViewListContent > ul {flex-direction: column; gap: 20px; max-width: 327px; margin: 0 auto;}
    .serviceMakerViewListContent > ul > li > a {display: flex; gap: 20px; align-items: center;}
    .serviceMakerViewListContent > ul > li > a > .list-img {width: 152px; height: 104px; margin-bottom: 0;}
    .serviceMakerViewListContent > ul > li > a > .list-title {padding: 0;}
    .serviceMakerViewListContent > ul > li > a > .list-title > span {font-size: 14px; -webkit-line-clamp: 3; line-height: 21px;}
    .serviceMakerViewListContent > a.list-btn {width: 327px; margin-top: 45px;}

    .makerSwiperWrap.is-mobile > .makerSwiper {overflow: visible; max-width: 263px;}
    .makerSwiper .swiper-slide {width: 263px !important; flex-shrink: 0;}
    .makerSwiper .swiper-wrapper { margin: 0 !important; }
    .serviceMakerViewListContent > ul > li:nth-child(3) {display: none;}
    .serviceMakerViewListContent > ul > li > a > .list-img {overflow: hidden;}
    .serviceMakerViewListContent > ul > li > a > .list-img > img {transform: scale(1.2);}

    /*상세페이지 목록 이미지 위치*/
    .serviceMakerViewListContent > ul > li.makers01 > a > .list-img > img {object-position: 82% 5px;}
    .serviceMakerViewListContent > ul > li.makers02 > a > .list-img > img {object-position: right 5px;}
    .serviceMakerViewListContent > ul > li.makers03 > a > .list-img > img {object-position: center 5px;}
}