@charset "utf-8";

/* s_txt */
.s_txt{margin-bottom: 50px;}
.s_txt h4{font-family: 'Nanum Myeonjo', serif; font-size: 20px; font-weight: 400; letter-spacing: 0.18em; color:#000; transform: rotate(0.1deg); margin-bottom: 35px;}
.s_txt h3{font-size: 42px; font-weight: 500; color:#000;}
.s_txt p{font-size: 20px; font-weight: 500; color:#666666; word-break: keep-all; line-height: 1.6em; margin-top: 35px;}
.s_txt .scroll{margin-top: 60px; font-size: 16px; font-weight: 500; color:#000000;}
.s_txt .scroll span{font-family: 'SUIT', sans-serif;}

@media  all and (max-width:1280px) {
    .s_txt{margin-bottom: 40px;}
    .s_txt h4{font-size: 18px;}
    .s_txt h3{font-size: 36px;}
    .s_txt p{font-size: 18px; margin-top: 25px;}
    .s_txt .scroll{margin-top: 50px; font-size: 15px;}
}
@media  all and (max-width:768px) {
    .s_txt{margin-bottom: 30px;}
    .s_txt h4{font-size: 16px;}
    .s_txt h3{font-size: 32px;}
    .s_txt p{font-size: 17px; margin-top: 18px;}
    .s_txt .scroll{margin-top: 45px; font-size: 14px;}
}


/* intro1 */
.intro1{}
.intro1 .intro_visual{margin: 0 auto;}
.intro1 .intro_visual .img{width: 96%; max-width: 1800px; height: 820px; margin: 0 auto; border-radius: 20px; overflow: hidden;position: relative; }
.intro1 .intro_visual .img img{width: 100%; height: 100%; object-fit: cover;}
.intro1 .intro_visual .txt{position: absolute; padding: 80px 100px; bottom: 0; width: 100%; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end;}
.intro1 .intro_visual .txt h3{font-size: 48px; color:#fff;}
.intro1 .intro_visual .txt .scroll{font-size: 18px; color:#fff; font-weight: 700;}
.intro1 .intro_visual .txt .scroll span{font-family: 'SUIT', sans-serif; margin-left: 5px;}
.intro1 #pageCont{padding: 110px 0 220px;}
.intro1 #pageCont .s-inner{display: flex;}
.intro1 #pageCont .s-inner .tit{width: 42.1875%;}
.intro1 #pageCont .s-inner .tit h3{font-size: 42px; color:#000; word-break: keep-all; }
.intro1 #pageCont .s-inner .tit p{font-size: 20px; font-weight: 500; color:#666666; margin-top: 30px; word-break: keep-all; line-height: 1.5em;}
.intro1 #pageCont .s-inner .txt{width: calc(100% - 42.1875%); display: flex; justify-content: space-between;}
.intro1 #pageCont .s-inner .txt > div{}
.intro1 #pageCont .s-inner .txt > div p{font-family: "Nanum Myeongjo", serif; font-size: 22px; color:#222; line-height: 1.7em; transform: rotate(0.1deg);}
.intro1 #pageCont .s-inner .txt > div p + p{margin-top: 60px;}

@media all and (max-width:1800px) {
    .intro1 .intro_visual .img{aspect-ratio: 180/82; height: 100%; min-height: 540px;}
    .intro1 .intro_visual .txt{padding: 60px 80px;}
    .intro1 .intro_visual .txt h3{font-size: 38px;}
}
@media all and (max-width:1280px) {
    .intro1 .intro_visual .txt{padding: 50px 60px;}
    .intro1 .intro_visual .txt h3{font-size: 36px;}
    .intro1 .intro_visual .txt .scroll{font-size: 17px;}
    .intro1 #pageCont{padding: 90px 0 180px;}
    .intro1 #pageCont .s-inner .tit{width: 38%;}
    .intro1 #pageCont .s-inner .tit h3{font-size: 38px;}
    .intro1 #pageCont .s-inner .tit p{font-size: 19px; margin-top: 25px;}
    .intro1 #pageCont .s-inner .txt{gap:30px; width: calc(100% - 38%);}
    .intro1 #pageCont .s-inner .txt > div p{font-size: 21px; word-break: keep-all;}
    .intro1 #pageCont .s-inner .txt > div p + p{margin-top: 50px;}
}
@media all and (max-width:1024px) {
    .intro1 .intro_visual .txt{padding: 40px 50px;}
    .intro1 .intro_visual .txt h3{font-size: 34px;}
    .intro1 #pageCont{padding: 80px 0 160px;}
    .intro1 #pageCont .s-inner .tit{padding-right: 40px;}
    .intro1 #pageCont .s-inner .tit h3{font-size: 35px;}
    .intro1 #pageCont .s-inner .tit p{font-size: 18px; margin-top: 23px;}
    .intro1 #pageCont .s-inner .txt > div p{font-size: 20px;}
    .intro1 #pageCont .s-inner .txt > div p + p{margin-top: 40px;}
}
@media all and (max-width:768px) {
    .intro1 .intro_visual .img{min-height: 420px;}
    .intro1 .intro_visual .txt{padding: 40px 40px; flex-direction: column; align-items: flex-start; gap:30px;}
    .intro1 .intro_visual .txt h3{font-size: 32px;}
    .intro1 .intro_visual .txt .scroll{font-size: 16px;}
    .intro1 #pageCont{padding: 70px 0 140px;}
    .intro1 #pageCont .s-inner{flex-direction: column; gap:40px;}
    .intro1 #pageCont .s-inner .tit{width: 100%;}
    .intro1 #pageCont .s-inner .tit h3{font-size: 32px;}
    .intro1 #pageCont .s-inner .tit h3 br{display: none;}
    .intro1 #pageCont .s-inner .tit p{font-size: 17px; margin-top: 20px;}
    .intro1 #pageCont .s-inner .txt{width: 100%;}
    .intro1 #pageCont .s-inner .txt > div p{font-size: 19px;}
    .intro1 #pageCont .s-inner .txt > div p + p{margin-top: 35px;}
}
@media all and (max-width:500px) {
    .intro1 .intro_visual .txt{padding: 40px 30px;}
    .intro1 .intro_visual .txt h3{font-size: 30px;}
    .intro1 #pageCont{padding: 60px 0 120px;}
    .intro1 #pageCont .s-inner .tit h3{font-size: 28px;}
    .intro1 #pageCont .s-inner .tit p{font-size: 16px; margin-top: 15px;}
    .intro1 #pageCont .s-inner .txt{flex-direction: column;}
    .intro1 #pageCont .s-inner .txt > div p{font-size: 18px;}
    .intro1 #pageCont .s-inner .txt > div p + p{margin-top: 22px;}
}


/* photo */
.photo .photo_top{display: flex; align-items: center; gap:120px;}
.photo .photo_top .s_txt{flex: 1;}
.photo .photo_top .scroll{display: inline-flex; align-items: center; gap: 8px;}
.photo .photo_top .scroll span{
    display: inline-block;
    animation: bounce 1.6s infinite ease-in-out;
}

@keyframes bounce {
    0%, 100% { transform: translateY(-3px); }
    50% { transform: translateY(3px); }
}

.photo .photo_top .img_box{
    flex: 1;
    max-width: 560px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s ease;
    position: relative;
}
.photo .photo_top .img_box:hover{transform: scale(1.02);}
.photo .photo_top .img_box .img{max-width: 100%; overflow: hidden;}
.photo .photo_top .img_box .img img{
    width: 100%; 
    display: block;
    transform: scale(1);
}

/* 첫 시작 및 슬라이드 전환 시마다 부드럽게 사진이 확대되는 Ken Burns 효과 */
.photo .photo_top .img_box .slick-current img {
    animation: slickZoomIn 3.8s ease-out forwards;
}

@keyframes slickZoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}

/* Slick dots premium custom styling */
.photo .photo_top .img_box .slick-dots {
    bottom: 20px;
    z-index: 10;
}
.photo .photo_top .img_box .slick-dots li {
    margin: 0 4px;
}
.photo .photo_top .img_box .slick-dots li button:before {
    color: #ffffff;
    opacity: 0.55;
    font-size: 8px;
    transition: all 0.3s ease;
}
.photo .photo_top .img_box .slick-dots li.slick-active button:before {
    color: #ceb99a;
    opacity: 1;
    transform: scale(1.2);
}

.photo .bg{background-color: #fcfbfa; padding: 120px 0; margin: 120px 0;}
.photo .list{display: grid; grid-template-columns: repeat(2, 1fr); gap:40px;}
.photo .list li{
    background: #ffffff;
    border: 1px solid #eae7e2;
    border-radius: 16px;
    padding: 50px 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
}
.photo .list li:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(206, 185, 154, 0.1);
    border-color: #ceb99a;
}
.photo .list li:hover::before {
    opacity: 1;
}
.photo .list li .num{font-weight: 800; font-size: 56px; color:#ceb99a; opacity: 0.2; line-height: 1;}
.photo .list li h3{font-size: 23px; font-weight: 600; color:#1a1a1a; margin-top: 15px; word-break: keep-all;}
.photo .list li p{font-size: 17px; color:#666; margin-top: 15px; word-break: keep-all; line-height: 1.6;}

.photo .s_cont{display: flex; align-items: flex-start; position: relative;}
.photo .s_cont .s_txt{width: 35%; position: sticky; top: 140px; padding-right: 40px;}
.photo .s_cont .pd{width: 65%;}
.photo .s_cont .pd li{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    background: #ffffff;
    border: 1px solid #edebe7;
    border-radius: 16px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
    transition: all 0.4s ease;
    position: relative;
}
.photo .s_cont .pd li:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    border-color: #d8cebf;
}
.photo .s_cont .pd li .l_txt{}
.photo .s_cont .pd li .l_txt .tit{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-bottom: 1px solid #f0edf0; padding-bottom: 20px;}
.photo .s_cont .pd li .l_txt .tit h3{
    font-size: 26px; 
    font-weight: 600; 
    color:#1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.photo .s_cont .pd li .l_txt .tit p{font-size: 16px; color:#888; margin-top: 6px; width: 100%;}

/* Badges for recommendations */
.photo .badge {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    padding: 6px 8px 5px;
    border-radius: 30px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.photo .badge.best {
    background: linear-gradient(135deg, #ceb99a 0%, #aa8c64 100%);
    box-shadow: 0 4px 10px rgba(170, 140, 100, 0.2);
}
.photo .badge.hit {
    background: linear-gradient(135deg, #333333 0%, #000000 100%);
}

.photo .s_cont .pd li .l_txt dl{margin-top: 25px; display: grid; grid-template-columns: repeat(2, 1fr); gap:12px 20px;}
.photo .s_cont .pd li .l_txt dl dd{font-size: 16px; color:#555; padding-left: 20px; position: relative;}
.photo .s_cont .pd li .l_txt dl dd::before{
    content: '✓';
    position: absolute;
    left: 0;
    top: -1px;
    color: #ceb99a;
    font-weight: 700;
    font-size: 14px;
}

.photo .s_cont .pd li .r_txt{
    text-align: right;
    position: relative;
    display: flex;
    align-items: center;
    gap:20px;
    justify-content: flex-end; /* Always align to the right */
    margin-top: 30px;
    padding-top: 35px;
    border-top: 1px dashed #e5e0d8;
}
.photo .s_cont .pd li .r_txt .more{
    text-align: center;
    width: max-content;
    background: linear-gradient(135deg, #f5f2eb 0%, #ede7dc 100%);
    color:#aa8c64;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(203, 180, 147, 0.2);
    
    /* Persistent blinking animation */
    animation: blink 1s infinite ease-in-out;
}
@keyframes blink {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}
.photo .s_cont .pd li .r_txt .more span{ font-weight: 700; color: #8f744e;}
.photo .s_cont .pd li .r_txt .price{
    font-size: 38px;
    font-weight: 800;
    color: #1a1a1a; /* Clean and strong premium black */
    font-family: 'SUIT', sans-serif;
    letter-spacing: -0.04em;
    display: inline-flex;
    align-items: baseline;
}
.photo .s_cont .pd li .r_txt .price span{
    font-size: 18px;
    font-weight: 500;
    color: #888888; /* Soft dark grey for unit text */
    margin-left: 4px;
    letter-spacing: 0;
}

/* Photo Page Responsive Styles */
@media all and (max-width: 1280px) {
    .photo .photo_top{gap: 60px;}
    .photo .s_cont{flex-direction: column;}
    .photo .s_cont .s_txt{width: 100%; position: static; padding-right: 0; margin-bottom: 50px;}
    .photo .s_cont .pd{width: 100%;}
}
@media all and (max-width: 1024px) {
    .photo .bg{padding: 90px 0; margin: 90px 0;}
    .photo .list{gap: 30px;}
    .photo .list li{padding: 40px 30px;}
    .photo .list li .num{font-size: 48px;}
}
@media all and (max-width: 768px) {
    .photo .photo_top{flex-direction: column; gap: 40px; text-align: center;}
    .photo .photo_top .img_box{width: 100%;}
    .photo .photo_top .img_box .img{max-width: 100%; margin: 0 auto;}
    .photo .list{grid-template-columns: 1fr; gap: 20px;}
    .photo .s_cont .pd li{padding: 30px 24px;}
    .photo .s_cont .pd li .l_txt dl{grid-template-columns: 1fr; gap: 10px;}
    .photo .s_cont .pd li .r_txt{flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px 15px;}
    .photo .s_cont .pd li .r_txt .more{width: auto; text-align: center;}
    .photo .s_cont .pd li .r_txt .price{align-self: center; font-size: 34px;}
    .photo .s_cont .pd li .r_txt .price span{font-size: 17px;}
}
@media all and (max-width: 500px) {
    .photo .bg{padding: 60px 0; margin: 60px 0;}
    .photo .list li{padding: 35px 20px;}
    .photo .list li .num{font-size: 40px;}
    .photo .list li h3{font-size: 20px;}
    .photo .list li p{font-size: 16px; margin-top: 12px;}
    .photo .s_cont .pd li{padding: 24px 16px;}
    .photo .s_cont .pd li .l_txt .tit h3{font-size: 24px;}
    .photo .s_cont .pd li .r_txt .price{font-size: 30px;}
    .photo .s_cont .pd li .r_txt .price span{font-size: 16px;}
}


/* photo list2 (Recommended families list) */
.photo .bg .list2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}
.photo .bg .list2 li {
    background: #ffffff;
    border: 1px solid #edebe7;
    border-radius: 16px;
    padding: 50px 30px 45px;
    font-size: 17px;
    font-weight: 300;
    color: #222;
    line-height: 1.6;
    word-break: keep-all;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.015);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    
    /* Vertical layout for icons and text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
    position: relative;
}
.photo .bg .list2 li .icon_box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}
.photo .bg .list2 li .icon_box i {
    font-size: 42px;
    color: #ceb99a; /* Warm soft gold brand color */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.photo .bg .list2 li:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(206, 185, 154, 0.1);
    border-color: #ceb99a;
}

/* Emotional caption at the bottom of list2 */
.photo .bg .s-inner > p {
    text-align: center;
    font-family: "Nanum Myeongjo", serif;
    font-size: 22px;
    color: #8f744e; /* Warm golden brown */
    margin-top: 50px;
    font-weight: 500;
    letter-spacing: 0.08em;
    transform: rotate(0.1deg);
}

/* list2 Responsive Styles */
@media all and (max-width: 1024px) {
    .photo .bg .list2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 40px;
    }
}
@media all and (max-width: 768px) {
    .photo .bg .list2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .photo .bg .s-inner > p {
        font-size: 18px;
        margin-top: 40px;
        letter-spacing: 0.05em;
    }
}
@media all and (max-width: 500px) {
    .photo .bg .list2 li {
        padding: 24px 20px;
        font-size: 15px;
        border-radius: 12px;
    }
    .photo .bg .s-inner > p {
        font-size: 16px;
        margin-top: 30px;
    }
}

/* 4-Column Grid Helper for list2 */
.photo .bg .list2.col4 {
    grid-template-columns: repeat(4, 1fr);
}
@media all and (max-width: 1280px) {
    .photo .bg .list2.col4 {
        gap: 20px;
    }
}
@media all and (max-width: 1024px) {
    .photo .bg .list2.col4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}
@media all and (max-width: 768px) {
    .photo .bg .list2.col4 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}




/* 오직 intro2 오시는 길 페이지만 명조체 전면 배제 및 Pretendard 고딕 강제 */
.intro2,
.intro2 * {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif !important;
}

/* 오시는 길 최상단 주소 & 전화번호 미니멀 레이아웃 */
.road-main-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 10px auto 25px auto;
    font-family: 'Pretendard', sans-serif;
    padding: 20px 10px 30px;
    border-bottom: 2px solid #ceb99a; /* 단정한 골드 띠선 하나로 하단 구분 */
}

.road-main-info .info-item {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.road-main-info .info-item > span {
    width: 50%;
    box-sizing: border-box;
}

.road-main-info .info-label {
    font-weight: 700;
    color: #555555; /* 너무 튀는 골드 대신 점잖고 세련된 딥 그레이 */
    font-size: 21px; /* 폰트 크기 더 키움 */
    text-align: left;
}

.road-main-info .info-value {
    color: #1a1a1a;
    font-weight: 500;
    font-size: 21px; /* 폰트 크기 더 키움 */
    text-align: left;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .road-main-info {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 15px 5px 25px;
        margin: 10px auto 25px auto;
    }
    .road-main-info .info-item {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 5px;
    }
    .road-main-info .info-item > span {
        width: 100%;
    }
    .road-main-info .info-label {
        font-size: 15px;
    }
    .road-main-info .info-value {
        font-size: 18px;px        word-break: keep-all;
    }
}

/* 카카오맵 반응형 높이 제어 */
.root_daum_roughmap,
.root_daum_roughmap .wrap_map,
.root_daum_roughmap .map {
    height: 480px !important;
}

@media (max-width: 768px) {
    .root_daum_roughmap,
    .root_daum_roughmap .wrap_map,
    .root_daum_roughmap .map {
        height: 300px !important;
    }
}

.intro2 .root_daum_roughmap .cont .section.lst{display: none;}
.intro2 .root_daum_roughmap .wrap_controllers{display: none;}
.road-access-section {
    background-color: transparent;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    box-sizing: border-box;
}

.road-header {
    text-align: center;
    margin-bottom: 60px;
}

.road-header .sub-tag {
    display: inline-block;
    color: #aa8c64;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.road-header h3 {
    font-size: 36px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.road-header p {
    font-size: 17px;
    color: #666666;
    margin: 0;
    line-height: 1.7;
    word-break: keep-all;
}

/* 정갈한 가로형 텍스트 타임라인/목록 구조 */
.road-list-wrapper {
    margin: 20px auto 40px auto;
    padding: 0;
    list-style: none;
}

.road-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 10px;
    border-bottom: 1px solid #edebe7;
}


.road-item-start {
    font-size: 19px;
    font-weight: 700;
    color: #222222;
    display: flex;
    align-items: center;
    gap: 12px;
}

.road-item-start svg {
    color: #ceb99a;
}

.road-item-arrow {
    flex-grow: 1;
    margin: 0 40px;
    border-bottom: 1px dashed #e2decb;
    position: relative;
}

.road-item-center {
    font-size: 17px;
    font-weight: 700;
    color: #aa8c64;
    background: #fbf9f6;
    padding: 6px 18px;
    border-radius: 4px;
    border: 1px solid rgba(206, 185, 154, 0.3);
}

.road-item-end {
    font-size: 16px;
    font-weight: 600;
    color: #666666;
    min-width: 140px;
    text-align: right;
}

@media (max-width: 768px) {
    .road-list-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        border-top: 1px solid #edebe7;
        border-bottom: 1px solid #edebe7;
        margin: 20px auto 30px auto;
    }

    .road-list-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 24px 10px;
        border-bottom: none;
        gap: 10px;
        box-sizing: border-box;
    }

    /* 1, 3번째 아이템 우측에 세로 구분선 */
    .road-list-item:nth-child(odd) {
        border-right: 1px solid #edebe7;
    }

    /* 1, 2번째 아이템 하단에 가로 구분선 */
    .road-list-item:nth-child(-n+2) {
        border-bottom: 1px solid #edebe7;
    }

    .road-item-arrow {
        display: none;
    }

    .road-item-end {
        display: none; /* 모바일에서 사진관 문구 완벽 은닉 */
    }

    .road-item-start {
        font-size: 17px;
        gap: 8px;
    }

    .road-item-center {
        font-size: 15px;
        padding: 4px 12px;
    }
}

/* 대중교통 상세 그리드 - 카드 제거 버전 */
.transit-flat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0 auto;
    border-top: 2px solid #ceb99a;
    padding-top: 40px;
}

@media (max-width: 900px) {
    .transit-flat-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.transit-col {
    background: transparent;
    padding: 0;
}

.transit-col:not(:first-child) {
    border-left: 1px solid #edebe7;
    padding-left: 40px;
}

@media (max-width: 900px) {
    .transit-col:not(:first-child) {
        border-left: none;
        padding-left: 0;
        border-top: 1px dashed #edebe7;
        padding-top: 20px;
    }
}

.transit-col h5 {
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.transit-col h5 svg {
    color: #666666; /* 은은한 차콜로 통일 */
}

.transit-flat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.transit-flat-item {
    font-size: 17px;
    color: #444444;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.transit-flat-item .type-label {
    color: #aa8c64;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
}

.transit-flat-item .name-text {
    font-weight: 600;
    color: #222222;
    font-size: 17px;
}

.transit-flat-item .bus-num-highlight {
    font-weight: 500;
    color: #000;
    font-size: 17px;
}



.sp_top{display: flex; align-items: center; gap: 120px;}
.sp_top .txt{flex:1;}
.sp_top .txt h4{padding-bottom: 0.5em; font-size: 20px; font-family: 'Nanum Myeonjo', serif; color: #be9448; font-weight: normal;}
.sp_top .txt h3{font-size: 60px; font-family: 'Nanum Myeonjo', serif; color: #be9448;}
.sp_top .txt p.t1{margin: 0.8em 0; font-size: 28px; color: #000; font-weight: 600;}
.sp_top .txt p.t1 span{color: #e9436b;}
.sp_top .txt p.t2{font-size: 18px; color: #000; font-weight: normal; line-height: 1.6em;}

.sp_top .img_box{
    flex: 1;
    max-width: 560px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s ease;
    position: relative;
}
.sp_top .img_box:hover{transform: scale(1.02);}
.sp_top .img_box .img{max-width: 100%; overflow: hidden;}
.sp_top .img_box .img img{
    width: 100%; 
    display: block;
    transform: scale(1);
}
.sp_top .img_box .slick-current img {
    animation: slickZoomIn 3.8s ease-out forwards;
}
@media (max-width: 1024px) {
    .sp_top{display: block; position: relative;}
    .sp_top .img_box{max-width: 100%;}
    .sp_top .txt{position: absolute; left: 0; top: 0; padding: 30px; z-index: 4;}
}
@media (max-width: 568px) {
    .sp_top .txt{padding: 20px;}
    .sp_top .txt h4{font-size: 16px;}
    .sp_top .txt h3{font-size: 34px;}
    .sp_top .txt p.t1{font-size: 20px;}
    .sp_top .txt p.t2{font-size: 15px;}
}

.sp_bg{background-color: #fcfbfa; margin: 120px 0;}

.prodinfo{padding: 120px 0;}
.prodinfo .box_wrap{display: flex; flex-wrap: wrap; gap: 20px;}
.prodinfo .box_wrap .box{width: calc((100% - 20px)/2); background-color: #fff; border:1px solid #eee; border-radius: 10px; overflow: hidden; box-shadow:0 0 18px rgba(170, 170, 170, 0.18);}
.prodinfo .box_wrap .box h4{padding: 0.35em; background-color: #c8b2da; color: #fff; text-align: center; font-size: 28px;}
.prodinfo .box_wrap .box h4 span{display: block; padding-top:1px; font-size: 16px; font-weight: 500; letter-spacing: 0;}
.prodinfo .box_wrap .box .cont_wrap{padding: 34px;}
.prodinfo .box_wrap .box .cont_wrap p.t1{position: relative; padding-left: 20px; font-size: 18px; line-height: 1.4em; color: #000}
.prodinfo .box_wrap .box .cont_wrap p.t1:before{content: ''; position: absolute; left: 0; width: 6px; height: 100%; background-color: #00000010;}
.prodinfo .box_wrap .box .cont_wrap .btm{padding-top: 30px; display: flex; justify-content: space-between; align-items: flex-end;}
.prodinfo .box_wrap .box .cont_wrap .btm .l_btm{}
.prodinfo .box_wrap .box .cont_wrap .btm .l_btm .check_p{position: relative; padding-left: 24px; background:url('/images/sub2/check_p.png')no-repeat left top/contain;}
.prodinfo .box_wrap .box .cont_wrap .btm .l_btm .check_p + .check_p{margin-top: 1em;}
.prodinfo .box_wrap .box .cont_wrap .btm .l_btm dl{display: flex; flex-wrap: wrap; gap: 10px 0;}
.prodinfo .box_wrap .box .cont_wrap .btm .l_btm dl dt{width: 70px; flex:0 0 auto; color: #b4b4b4;}
.prodinfo .box_wrap .box .cont_wrap .btm .l_btm dl dd{width: calc(100% - 70px);}
.prodinfo .box_wrap .box .cont_wrap .btm .r_btm{flex:0 0 auto;}
.prodinfo .box_wrap .box .cont_wrap .btm .r_btm h5{font-size: 70px; letter-spacing: -0.07em; font-weight: 600; color: #a88fbd; line-height: 1; display: flex; gap: 4px; align-items: flex-end;}
.prodinfo .box_wrap .box .cont_wrap .btm .r_btm h5 span{display: block; margin-bottom: 10px;; font-size: 18px;}
.prodinfo .tail{text-align: center; margin-top: 40px; color: #999;}

.prodinfo .box_wrap .box:nth-child(2) h4{background-color: #ffbd71;}
.prodinfo .box_wrap .box:nth-child(2) .cont_wrap .btm .r_btm h5{color: #ff9844;}
.prodinfo .box_wrap .box:nth-child(3) h4{background-color: #ff7171;}
.prodinfo .box_wrap .box:nth-child(3) .cont_wrap .btm .r_btm h5{color: #ff4444;}
.prodinfo .box_wrap .box:nth-child(4) h4{background-color: #6bac7e;}
.prodinfo .box_wrap .box:nth-child(4) .cont_wrap .btm .r_btm h5{color: #346e3e;}

.photo2-3-2 .prodinfo .box_wrap{justify-content: center;}
.photo2-3-2 .prodinfo .box_wrap .box:nth-child(1) h4{background-color: #ef8da4}
.photo2-3-2 .prodinfo .box_wrap .box:nth-child(1) .cont_wrap .btm .r_btm h5{color: #ef8da4;}



@media (max-width: 1024px) {
    .sp_bg{margin: 60px 0;}
    .prodinfo{padding: 60px 0;}
    .prodinfo .box_wrap .box{width: 100%;}
    .prodinfo .box_wrap .box h4 span{display: inline-block;}
    .prodinfo .box_wrap .box .cont_wrap .btm{flex-wrap: wrap;}
    .prodinfo .box_wrap .box .cont_wrap .btm .r_btm{padding-top: 15px; text-align: right; width: 100%;}
    .prodinfo .box_wrap .box .cont_wrap .btm .r_btm h5{display: inline-flex; font-size: 60px;}

}


.prodcommon{padding: 120px 0;}
.prodcommon .item_wrap{display: flex; justify-content: space-between; gap:25px 10px;}
.prodcommon .item_wrap .item{text-align: center;}
.prodcommon .item_wrap .item img{max-width: 100%; border:1px solid #eee;  border-radius: 50%;}
.prodcommon .item_wrap .item p{padding-top: 1em; font-size:18px;}
@media (max-width: 1024px) {
    .prodcommon{padding: 60px 0;}
    .prodcommon .item_wrap{flex-wrap: wrap; justify-content: center;}
}
@media (max-width: 568px) {
    .prodcommon .item_wrap .item{width: calc((100% - 10px*2)/3)}
    .prodcommon .item_wrap .item p{font-size: 15px; padding-top: 5px;}
}

.photo_reco{}
.photo_reco .s_txt dl{padding-top: 25px; color: #000;}
.photo_reco .s_txt dl dt{font-size: 22px; font-weight: 600; color: #e9436b; word-break: keep-all;}
.photo_reco .s_txt dl dd{padding-top: 10px;}
.photo_reco .cont_wrap{display: flex; gap: 30px;}
.photo_reco .cont_wrap .img_box{width: 562px; overflow: hidden; text-align: center; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);;}
.photo_reco .cont_wrap .img_box img{width: 100%; height: 100%; object-fit: cover;} 
.photo_reco .cont_wrap ul{flex:1; display: flex; flex-direction: column; gap: 20px;}
.photo_reco .cont_wrap ul li{flex:1; padding: 30px; gap: 30px; display: flex; align-items: center; border-radius: 20px; border:1px solid #eee; box-shadow:0 0 18px rgba(170, 170, 170, 0.18)}
.photo_reco .cont_wrap ul li .ico{border-radius: 50%; display: flex;; align-items: center; justify-content: center; aspect-ratio: 1/1; background-color: #ef8da4;}
.photo_reco .cont_wrap ul li .ico img{max-width: 90%;}
.photo_reco .cont_wrap ul li dl{color: #000;}
.photo_reco .cont_wrap ul li dl dt{font-size: 24px; font-weight: 600; word-break: keep-all;}
.photo_reco .cont_wrap ul li dl dd{padding-top: 10px; word-break: keep-all;}
@media (max-width: 1024px) { 
 .photo_reco .cont_wrap{display: block;}
 .photo_reco .cont_wrap .img_box{width: 100%;}
 .photo_reco .cont_wrap ul{margin-top: 30px;}
}
@media (max-width: 568px) {
.photo_reco .cont_wrap ul{gap: 10px; margin-top: 10px;}
.photo_reco .cont_wrap ul li .ico img{width: 70px;}
}


.photo1-3-last{padding: 120px 0;}
.photo1-3-last .cont_wrap{display: flex; gap: 20px;}
.photo1-3-last .cont_wrap .l_cont{width: 60%; flex:0 0 auto;}
.photo1-3-last .cont_wrap .l_cont ul{flex:1; display: flex; flex-direction: column; gap: 16px;}
.photo1-3-last .cont_wrap .l_cont ul li{flex:1; padding:30px; gap:30px; display: flex; align-items: center; border-radius: 20px; border:1px solid #eee; box-shadow:0 0 18px rgba(170, 170, 170, 0.18)}
.photo1-3-last .cont_wrap .l_cont ul li .ico{}
.photo1-3-last .cont_wrap .l_cont ul li dl{color: #000;}
.photo1-3-last .cont_wrap .l_cont ul li dl dt{font-size: 24px; font-weight: 600;}
.photo1-3-last .cont_wrap .l_cont ul li dl dd{padding-top: 10px; word-break: keep-all;}
.photo1-3-last .cont_wrap .l_cont ul li dl dd .tel{font-size: 45px; font-weight: 800; color: #e9436b; letter-spacing: -0.07em;}
.photo1-3-last .cont_wrap .r_cont{ border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);}
.photo1-3-last .cont_wrap .r_cont img{width: 100%;height: 100%;object-fit: cover;}
.photo1-3-last .btn_wrap{margin-top: 30px; text-align: center;}
@media (max-width: 1024px) {
.photo1-3-last .cont_wrap{flex-direction: column-reverse;}
.photo1-3-last .cont_wrap .l_cont{width: 100%;}
}
@media (max-width: 568px) {
.photo1-3-last .cont_wrap{gap: 10px;}
.photo1-3-last .cont_wrap .l_cont ul{gap: 10px;}
.photo1-3-last .cont_wrap .l_cont ul li .ico img{width: 70px;}
.photo1-3-last .cont_wrap .l_cont ul li dl dd .tel{font-size: 28px;}
.photo1-3-last .btn_wrap{margin-top: 10px;}
}


.photo2-3-1{}
.photo2-3-1 .list{}
.photo2-3-1 .list li.slick-slide{margin-right: 30px;}
.photo2-3-1 .list li.slick-slide img{max-width: 100%;}


.photo2-3-3 {padding: 100px 0; margin-bottom: 100px; border:1px solid #eee; border-left: 0; border-right: 0;} 
.photo2-3-3 .s-inner{display: flex; gap: 200px; justify-content: center; align-items: center;}
.photo2-3-3 .s-inner .txt{color: #000; }
.photo2-3-3 .s-inner .txt h4{padding-bottom: 0.5em; font-size: 30px; font-weight: 500;;}
.photo2-3-3 .s-inner .txt h3{font-size: 32px; font-weight: 500;}
.photo2-3-3 .s-inner .txt h3 b{color: #e9436b;}
.photo2-3-3 .s-inner .btn_wrap .mbtn{margin-top: 0;}
@media (max-width: 1024px) {
    .photo2-3-3 .s-inner{flex-wrap: wrap; justify-content: center; gap: 50px;}
    .photo2-3-3 .s-inner .txt{text-align: center;}
}
@media (max-width: 568px) {
    .photo2-3-3{padding: 60px 0 ; margin-bottom: 60px;}
    .photo2-3-3 .s-inner{gap: 25px;}
    .photo2-3-3 .s-inner .txt h4{font-size: 20px;}
    .photo2-3-3 .s-inner .txt h3{font-size: 22px;}
    .photo2-3-3 .s-inner .s_txt{text-align: center;}
}

.photo3-3-1{}
.photo3-3-1 .img img{width: 100%;}

.photo3-3-2{margin: 110px auto;}
.photo3-3-2 .item_wrap{display: flex; justify-content: center; gap: 30px;}
.photo3-3-2 .item_wrap .item{text-align: center; border-radius: 20px; border:1px solid #eee; box-shadow:0 0 18px rgba(170, 170, 170, 0.18); background-color: #fff; }
.photo3-3-2 .item_wrap .item h3{font-size: 24px; padding-top: 20px; color: #000;}
.photo3-3-2 .item_wrap .item h4{padding-top: 10px; font-size: 18px; padding-bottom: 20px;}
.photo3-3-2 .item_wrap .item p{padding: 15px 0; line-height: 2em;}
.photo3-3-2 .item_wrap .item p span{color: #e9436b;}
@media (max-width: 1024px) {
.photo3-3-2 .item_wrap{ gap: 20px;}
.photo3-3-2 .item_wrap .item .img img{max-width: 100%;}
}
@media (max-width: 568px) {
.photo3-3-2 .item_wrap{ gap: 10px; flex-wrap: wrap;}
.photo3-3-2 .item_wrap .item {width: calc((100% - 10px)/2);}
.photo3-3-2 .item_wrap .item h3{font-size: 20px;}
}