/* ------------------- 마알스타일 */

.detail_swip .swiper-slide img {width:100%;}
.detail_tab_box {display:flex; align-items:center; justify-content: space-between; ; border-top: 1px solid #e2e6ec; /*border-bottom:1px solid #d2d2d2;*/}

.detail_tab_box .de_link {display:block; font-size:14px;}
.detail_tab_box .de_link i {display: inline-block;vertical-align: middle;}
.detail_tab_box .de_link img{width: 15px; height: 15px;}

ul.de_tabs {display:flex;}
ul.de_tabs li {cursor:pointer; padding:15px 25px; background:#f5f7fa; border-bottom: 1px solid #e2e6ec; border-right: 1px solid #e2e6ec;}
ul.de_tabs li:nth-of-type(1){border-left:1px solid #e2e6ec;}
ul.de_tabs li.active{font-weight:700; background:#fff; border-bottom:none; }

/*ul.de_tabs li + li {margin-left:10px;}*/

.tab-content {display:block;}

.tab_tit {display:flex; align-items:center; }
.de_icon_box {display:inline-block; vertical-align:middle; margin-right:5px;}
.tab_link {display:flex; margin-left:0px;}

.h_info {width:100px; height:30px; line-height:30px; border:1px solid #ddd; text-align:center;}
.h_info i img{width:15px; height:15px; display:inline-block; vertical-align:middle;}
.tab_link .heart img {width:15px; height:15px;}
.tab_link .heart_box {display:flex; align-items:center; margin-left:10px; padding:0 10px; height:30px; line-height:30px; border:1px solid #ddd;justify-content: center;}
.tab_link .heart_box.on .h_off{display:none;}
.tab_link .heart_box.on .h_on {display:block;}
.tab_link .heart_box .heart {margin-right:5px;}

.tab_link .heart_box2 {display:flex; align-items:center; margin-left:0px; padding:0 10px; height:30px; line-height:30px; border:1px solid #ddd;justify-content: center;}

.h_off {display:block;}
.h_on {display:none;}

.star_box.on .star_on{display:inline-block;}
.star_box.on .star_off {display:none;}

.star {margin-right:5px;}
.star_on {display:none;}


.de_sns_box {display:flex; justify-content: center;  border-top:1px solid #c6c6c6 ; padding-top:30px;}
.de_sns_box a {display:flex; align-items: center; justify-content: center; text-align:center; color:  var(--color-basic); font-size:1.25rem; border: 1px solid  var(--color-basic); transition:0.25s; border-radius:5px; background:#fff6f3;}
.de_sns_box a:nth-of-type(1) {background: var(--color-basic); color:#fff; width:197px; height:55px;}
.de_sns_box a:nth-of-type(2) {background:#fff; color:#2d2d2d; margin-left:10px; width:160px;} 
.de_sns_box a:nth-of-type(3) {background:#fff; color:#2d2d2d; margin-left:10px; width:160px;} 
.de_sns_box a:nth-of-type(4) {background:#fff; color:#2d2d2d; margin-left:10px; width:160px;}
.de_sns_box a:nth-of-type(5) {background:#fff; color:#2d2d2d; margin-left:10px; width:160px;}
.de_sns_box a i {display:inline-block; vertical-align:middle;}

.talk_p i {margin-right:9px;}

.detail_rec_box {position:relative; margin-top:100px; background:#f8f8f8; padding:20px; box-sizing:border-box;}

.add_de_box .near_box li {display:flex;}
.add_de_box .near_box li .img_box img {width:100%;}
.add_de_box .near_box li div {width:calc((100% - 10px)/2); margin-right:10px;}
.add_de_box .near_box li div:nth-of-type(2) {margin-right:0;}
.add_de_box .near_box li .near_txt {display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.work_con01 dl{display:flex;}
.work_con01 dl dt {width:95px; font-weight: 600; line-height:1.3;}
.work_con01 dl dd {line-height:1.3;}
.detail_bot_box {border-top:2px solid #d2d2d2; padding-top:40px;}
.detail_bot_box ul{display:flex; justify-content: space-evenly;}
.detail_bot_box ul li figure img{width:100%; max-width:200px; height: auto; }
.detail_bot_box ul li p {line-height:2.35em;}


@media screen and (max-width: 767px){
	ul.de_tabs li {padding:10px 15px;}

	.detail_tab_box .de_link img {width:15px; height:15px;}
	.h_info {font-size:16px; width:100px; height:30px; line-height:30px;}
	.tab_link { margin-left:0; margin-top:0px;}
	.tab_link .heart_box {font-size:16px;  width:150px; height:30px; line-height:30px; padding:0; margin-left:10px; }
	.tab_link .heart img {width:10px; height:10px;}
	.de_sns_box a {font-size:16px;}

	.tab_tit {flex-wrap: wrap;}

	.de_sns_box a {width:100px; height:30px; line-height:30px;}
	.work_con01 dl{flex-wrap: wrap; gap:10px;}
	.work_con01 dl dt { width:65px; }

	.detail_bot_box ul {flex-wrap:wrap; gap:10px;}
	.detail_bot_box ul li p {line-height:1.85em;}
	.detail_bot_box ul li figure img {width:150px; height: auto;}
	
}

@media screen and (max-width: 1080px){
	.mail_i {margin-right:5px}
	.phone_i {margin-right:5px}
	.phone_i img {width:21px; height:21px;}
	.mail_i  img {width:21px; height:21px;}
}	

@media screen and (max-width: 980px){
	.de_sns_box a:nth-of-type(3) {margin-left:10px;}
}	

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

}

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

	.de_sns_box a:nth-of-type(1) {height:40px; line-height:40px;}
	.de_sns_box {flex-wrap:wrap;}
	.de_sns_box a {width:250px; margin-right:10px; margin-left:0; height:40px; line-height:40px; max-width:158px;}
	.de_sns_box a:nth-of-type(2n) {margin-right:0;}
	.de_sns_box a:nth-of-type(n + 2) {margin-left:0;}
	.de_sns_box a:nth-of-type(n + 3) {margin-top:10px;} 
	.star {line-height:16px;}
	.star img{width:16px; height:16px;}
	.phone_i {line-height:16px; margin-right:5px;}
	.phone_i img {width:16px; height:16px; }
	.mail_i {line-height:10px; margin-right:5px;}
	.mail_i img {width:16px; height:16px;}
}	

.detail_cont04 {}
.serviceDesc {background:#f5f7fa; text-align:center; padding:16px; border-radius:15px;}
.serviceDesc p { font-weight:var(--font-m); color:#738299; word-break:keep-all;} 
.serviceBtnWrap {display:flex; justify-content:space-between;}
.serviceBtnBox {display:flex;}
.serviceBtnBox .serBtn {display:flex; align-items:center; justify-content: center; width:220px; margin-right:8px; text-align:center;}
.serviceBtnBox .serBtn:nth-of-type(3) {margin-right:0;}

.serBtn {font-size:var(--font-size_18); font-weight:var(--font-sb); color:#fff; border-radius:15px; display:block; }

.serBtn.sertype01 {background: var(--color-basic);}
.serBtn.sertype02 {background: var(--color-basic-b);}
.serBtn.sertype03 {background:#00a2ff;}
.serBtn.sertype04 {background:#fff6f3}

.faviriteBtnBox {display:flex; gap:7px;}
.faviriteBtnBox .serBtn02 {width:60px; height:60px; display:flex; align-items:center; border-radius:15px; border:1px solid #d2d8e0;justify-content: center;}


@media (min-width:1024px) and (max-width:1279px) { /* 노트북 & 테블릿이상까지*/  
	.serviceBtnBox .serBtn {width:180px;}
	.serviceBtnBox {margin-right:20px;}
}

@media (max-width: 1023px) { /* 모바일,테블릿까지 */
.serviceBtnBox .serBtn {width:78px; height:40px; border-radius:5px;}
.faviriteBtnBox .serBtn02 {height:40px; width:40px;}
.serviceDesc p {font-size:14px;}
}


/* ------------------- 비주얼슬라이드부분 */

/* 1. 전체 레이아웃 */
.swiper.SwiperViewVisual, 
.swiper.SwiperViewThumbs {
    position: relative;
    height: 350px !important;
    overflow: hidden;
}

.swiper.SwiperViewVisual {
    width: 70%;
    float: left;
}

.swiper.SwiperViewThumbs {
    width: 28%;
    float: right;
    box-sizing: border-box;
}

/* 2. 슬라이드 공통 스타일 */
.SwiperViewVisual .swiper-slide,
.SwiperViewThumbs .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    height: 100% !important;
}

/* 썸네일 높이: (전체 350px - 간격합계) / 2.5개 */
.SwiperViewThumbs .swiper-slide {
    /* 하단 잘림 방지를 위해 간격을 뺀 정확한 계산값 적용 */
    height: calc(((350px - 14px) / 2.5) + 1px) !important;
    opacity: 0.5;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.SwiperViewThumbs .swiper-slide-thumb-active {
    opacity: 1;
    box-shadow: inset 0 0 0 3px #ff5a5f;
}

/* 이미지 비율 고정 */
.SwiperViewVisual .swiper-slide img,
.SwiperViewThumbs .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. 화살표 네비게이션 */
.SwiperViewVisual .swiper-button-next,
.SwiperViewVisual .swiper-button-prev {
    width: 70px;
    height: 70px;
    top: 50% !important;
    margin-top: -35px !important;
    z-index: 10;
    position: absolute;
}
.SwiperViewVisual .swiper-button-next {
    background: url('/images/icon/btn_next.png') no-repeat right center / 50% auto;
    right: 10px;
}
.SwiperViewVisual .swiper-button-prev {
    background: url('/images/icon/btn_prev.png') no-repeat left center / 50% auto;
    left: 5px;
}
.SwiperViewVisual .swiper-button-next::after,
.SwiperViewVisual .swiper-button-prev::after {
    display: none !important;
}

/* 4. 썸네일 래퍼 - flex 정렬 유지 */
.SwiperViewThumbs .swiper-wrapper {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 5. 모바일 반응형 */
@media all and (max-width: 768px) {
    .swiper.SwiperViewVisual {
        width: 100% !important;
        height: 250px !important;
        float: none;
    }
    .swiper.SwiperViewThumbs {
        display: none !important;
    }
}

/* ------------------- 모바일 뷰페이지 하단바 */

#mo_float_bar_view{display: none; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px); z-index: 1046;}
@media (max-width: 1023px) { /* 모바일,테블릿까지 */

    #mo_float_bar_view{display: block;position: fixed;bottom: 0;left: 0;width: 100%;background-color: #fbfbfb; border-top: 1px solid #e4e3e3;padding: 10px 15px 10px 15px;
        box-shadow: 0 -3px 3px rgba(0,0,0,.02);
        -webkit-box-shadow: 0 -3px 3px rgba(0,0,0,.02);
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);
    }
    #mo_float_bar_view ul{display: flex;justify-content: space-between;}
    #mo_float_bar_view ul li{width: 20%;}
	#mo_float_bar_view ul li figure{text-align: center;height: 11px;}
	#mo_float_bar_view ul li figure i{font-size: 24px; color:#999fa7;}
    #mo_float_bar_view ul li p{text-align: center;font-size: 12px;font-weight: 700; color:#999fa7;}

	#mo_float_bar_view ul li i.on, #mo_float_bar_view ul li p.on{color: #15d0f2;}

}

.serviceBtnBox .serBtn {width:110px;height:45px;}
.serviceBtnBox a.serBtn {color:#ff}
.serviceBtnBox .serBtn:hover{color:#fff}
.faviriteBtnBox .serBtn02 {height:45px; width:45px;}


/* ------------------- 마가 게시글프로필 */

.deinfoDesc02 {padding:35px 38px 35px; background:#f5f7fa; border-radius:15px; overflow:hidden; margin-top:11px;}
.deinfoDesc02 dl {width:100%; display:flex;}
.deinfoDesc02 dl + dl {margin-top:28px;}
.deinfoDesc02 dl dt {width:80px; margin-right:55px;  font-weight:var(--font-b);}
.deinfoDesc02 dl dd {width:calc(100% - 115px);  font-weight:var(--font-m);}

@media (max-width: 767px) {  /* 모바일기기전용 */
	.deinfoDesc02 {padding:20px 15px;}
	.deinfoDesc02 dl dt {width:60px; margin-right:15px;}
	.deinfoDesc02 dl dd {width:calc(100% - 95px);}
	.deinfoDesc02 {margin-top:0;}

}