@charset "utf-8";

/* 기본색상 */
:root {
    --primary: #aca091;
    --primary-dark: #8b8170;
    --accent: #f79e36;
    --bg-beige: #f5f3f0;
    --bg-light: #faf9f7;
}

/* =========================== PAGE */
.pagecommon{position:relative;padding-bottom:100px;font-size:15px;line-height:1.5;color:#777;font-family:var(--k-font)}
.pagecommon .pl{white-space:pre-line}
.pagecommon *{word-break:keep-all}
.pagecommon .inner{max-width:var(--mainsize);margin:0 auto}

#service1018 .tit{text-align:center;background:#fff}
#service1018 .txt{position:relative;z-index:2;max-width:1040px;margin:-100px auto 0;padding:60px;background:#fff}
#service1018 .tit span{font-size:13px;font-weight:700;color:var(--primary);letter-spacing:0;font-family:var(--e-font)}
#service1018 .tit p{margin:10px 0 20px;font-size:30px;font-weight:700;color:#111}
#service1018 .s_tit{text-align:center;font-size:22px;font-weight:700;color:#111;margin-bottom:30px}

#service1018 .cont{margin-top:70px}
#service1018 .flex{display:flex;align-items:flex-start;justify-content:space-between}
#service1018 .box{padding:0 8%}
#service1018 .flex+.flex{margin-top:100px;padding-top:100px;border-top:1px solid #e1e1e1}
#service1018 .box .l_cont{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:30px}
#service1018 .box .l_cont .s_tit{margin:0}
#service1018 .box .r_cont{width:50%}
#service1018 .box .pl{padding:15px 0 0 20px;font-size:13px;color:#999}

#service1018 .arrow{display:flex;position:absolute;right:0}
#service1018 .arrow span{position:relative;display:flex;align-items:center;justify-content:center;width:35px;height:35px;cursor:pointer}
#service1018 .arrow span+span:before{position:absolute;content:'';top:10px;left:0;width:1px;height:15px;background:#e1e1e1}
#service1018 .arrow svg{width:20px}
#service1018 .bnr{margin-top:30px;padding-bottom:100px}
#service1018 .bnr .l_cont div span{cursor:pointer}
#service1018 .bnr li div{display:flex;align-items:center;background:#f2f2f2}
#service1018 .bnr li div span{display:flex;align-items:center;justify-content:center;width:90px;height:90px;font-size:17px;font-weight:700;color:#fff;background:var(--primary);font-family:var(--e-font)}
#service1018 .bnr li div p{margin:0 20px 0 40px;font-size:17px;font-weight:700;color:#111}

#service1018 .flex li{display:flex;align-items:center;gap:20px}
#service1018 .flex li+li{margin-top:20px}
#service1018 .flex li span{display:flex;width:45px;height:45px;align-items:center;justify-content:center;border-radius:5px}
#service1018 .mrt li span{font-size:13px;font-weight:700;color:#fff;background:var(--primary);font-family:var(--e-font)}
#service1018 .mrt dt{font-size:16px;font-weight:700;color:#111}
#service1018 .chk li span{color:var(--primary);background:#e1ebf2}
#service1018 .chk li{font-size:16px;font-weight:700;color:#111}
#service1018 .chk li span svg{width:20px;stroke-width:3px}

#service1018 .bg{padding:35px 30px;border-radius:5px;background:#f2f2f2}
#service1018 .bg dl+dl{margin-top:30px}
#service1018 .bg dl dt{position:relative;padding-left:13px;font-size:16px;font-weight:700;color:#111}
#service1018 .bg dl dt:before{position:absolute;content:'';top:9px;left:0;width:3px;height:3px;background:#111}

@media(max-width:1024px){
#service1018 .tit img{width:100%}
#service1018 .txt{width:90%}
#service1018 .bnr img{width:100%}
#service1018 .box .r_cont{width:60%}
}
@media(max-width:768px){
#service1018 .tit p{font-size:26px}
#service1018 .s_tit{font-size:20px}
#service1018 .flex{display:block}
#service1018 .flex+.flex{margin-top:70px;padding-top:70px}
#service1018 .bnr{margin-top:10px;padding-bottom:30px}
#service1018 .bnr li div{display:block;padding:30px}
#service1018 .bnr li div p{margin:0;padding:10px 0 5px}
#service1018 .bnr li div span{width:30px;height:30px;border-radius:5px;font-size:12px;background:#111}
#service1018 .box .r_cont{width:100%}
#service1018 .box .pl{padding:0;white-space:normal}
#service1018 .box .r_cont{margin-top:20px}

}
@media(max-width:480px){
#service1018 .txt{padding:30px}
#service1018 .tit p{font-size:22px}
#service1018 .bnr{margin-bottom:50px;padding-bottom:0}
#service1018 .bnr li div p{font-size:16px}
#service1018 .box{padding:0 15px}
#service1018 .flex+.flex{margin-top:40px;padding-top:40px}
#service1018 .mrt{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
#service1018 .mrt li{display:block;padding:30px;border-radius:5px;background:#f2f2f2}
#service1018 .mrt li+li{margin-top:0}
#service1018 .mrt li span{width:30px;height:30px;font-size:12px}
#service1018 .mrt li dl{margin-top:10px}
}
@media(max-width:380px){
#service1018 .mrt{display:block}
#service1018 .mrt li+li{margin-top:10px}
#service1018 .mrt li:nth-child(even){border:1px solid #e1e1e1;background:#fff}
}

/* ============================================================
  공통셋팅 */

/* --------------------  -------------------- */
#service1018 .voucher_section {
    padding: 100px 5% 80px;
    background: var(--bg-light);
    border-top: 1px solid #e1e1e1;
}

#service1018 .voucher_title_area {
    text-align: center;
    margin-bottom: 60px;
}

#service1018 .voucher_title_area .s_tit {
    margin-bottom: 15px;
}

#service1018 .voucher_title_area .sub_txt {
    color: #888;
    font-size: 16px;
}

#service1018 .voucher_content {
    max-width: 1200px;
    margin: 0 auto;
}

#service1018 .voucher_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

#service1018 .voucher_card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: center;
}

#service1018 .voucher_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

#service1018 .voucher_icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    border-radius: 50%;
}

#service1018 .voucher_icon svg {
    width: 40px;
    height: 40px;
    color: #fff;
    stroke-width: 2px;
}

#service1018 .voucher_card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
}

#service1018 .voucher_desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

#service1018 .voucher_list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

#service1018 .voucher_list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

#service1018 .voucher_list li:last-child {
    margin-bottom: 0;
}

#service1018 .voucher_list li svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
}

#service1018 .voucher_notice {
    background: #fff9f0;
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 25px 30px;
    text-align: center;
}

#service1018 .voucher_notice p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 15px;
    color: #666;
    margin: 0;
    line-height: 1.7;
}

#service1018 .voucher_notice svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

/* ¹ÝÀÀÇü */
@media (max-width: 1024px) {
    #service1018 .voucher_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #service1018 .voucher_section {
        padding: 70px 15px 50px;
    }
    
    #service1018 .voucher_title_area {
        margin-bottom: 40px;
    }
    
    #service1018 .voucher_grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    #service1018 .voucher_card {
        padding: 30px 25px;
    }
    
    #service1018 .voucher_icon {
        width: 70px;
        height: 70px;
    }
    
    #service1018 .voucher_icon svg {
        width: 35px;
        height: 35px;
    }
    
    #service1018 .voucher_card h3 {
        font-size: 18px;
    }
    
    #service1018 .voucher_notice {
        padding: 20px;
    }
    
    #service1018 .voucher_notice p {
        flex-direction: column;
        font-size: 14px;
    }
}

/* ============================================================
  다이어트 (page_diet.php)
   ============================================================ */


#service1018 .diet_checklist {
    max-width: 900px;
    margin: 0 auto;
}

#service1018 .checklist_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#service1018 .check_item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 25px;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    transition: all 0.3s ease;
}

#service1018 .check_item:hover {
    border-color: var(--accent);
    background: #fef9f3;
    transform: translateX(5px);
}

#service1018 .check_item svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
    stroke-width: 3px;
    flex-shrink: 0;
}

#service1018 .check_item span {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 1.5;
}

@media (max-width: 768px) {
    #service1018 .checklist_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    #service1018 .check_item {
        padding: 18px 20px;
    }
    
    #service1018 .check_item span {
        font-size: 14px;
    }
}

#service1018 .diet_medicine_section {
    padding: 100px 5% 80px;
    background: var(--bg-light);
    border-top: 1px solid #e1e1e1;
}

#service1018 .medicine_title_area {
    text-align: center;
    margin-bottom: 60px;
}

#service1018 .medicine_title_area .s_tit {
    margin-bottom: 15px;
}

#service1018 .medicine_title_area .sub_txt {
    color: #888;
    font-size: 16px;
}

#service1018 .medicine_slider_wrap {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
}

#service1018 .medicine_slider {
    width: 100%;
}

#service1018 .medicine_card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

#service1018 .medicine_img {
    position: relative;
    height: 350px;
    overflow: hidden;
}

#service1018 .medicine_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#service1018 .medicine_info {
    padding: 40px;
}

#service1018 .medicine_info .badge {
    display: inline-block;
    padding: 8px 20px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    margin-bottom: 20px;
    font-family: var(--k-font);
}

#service1018 .medicine_info h3 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
}

#service1018 .medicine_info > p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 25px;
}

#service1018 .feature_list {
    display: flex;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#service1018 .feature_list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

#service1018 .feature_list li svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

#service1018 .medicine-next,
#service1018 .medicine-prev {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: all 0.3s ease;
}

#service1018 .medicine-next:hover,
#service1018 .medicine-prev:hover {
    background: var(--accent);
}

#service1018 .medicine-next::after,
#service1018 .medicine-prev::after {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

#service1018 .medicine-next:hover::after,
#service1018 .medicine-prev:hover::after {
    color: #fff;
}


#service1018 .medicine-pagination {
    bottom: 20px !important;
}

#service1018 .medicine-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ccc;
    opacity: 0.6;
}

#service1018 .medicine-pagination .swiper-pagination-bullet-active {
    background: var(--accent);
    opacity: 1;
}


@media (max-width: 768px) {
    #service1018 .diet_medicine_section {
        padding: 70px 15px 50px;
    }
    
    #service1018 .medicine_title_area {
        margin-bottom: 40px;
    }
    
    #service1018 .medicine_img {
        height: 250px;
    }
    
    #service1018 .medicine_info {
        padding: 30px 25px;
    }
    
    #service1018 .medicine_info h3 {
        font-size: 20px;
    }
    
    #service1018 .medicine_info > p {
        font-size: 14px;
    }
    
    #service1018 .feature_list {
        flex-direction: column;
        gap: 12px;
    }
    
    #service1018 .medicine-next,
    #service1018 .medicine-prev {
        width: 40px;
        height: 40px;
    }
    
    #service1018 .medicine-next::after,
    #service1018 .medicine-prev::after {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    #service1018 .medicine_img {
        height: 200px;
    }
    
    #service1018 .medicine_info {
        padding: 25px 20px;
    }
    
    #service1018 .medicine_info h3 {
        font-size: 18px;
    }
}

/* ============================================================
  추나 (page_chuna.php)
   ============================================================ */

#service1018 .chuna_core_section {
    text-align: center;
    padding: 100px 8% 80px;
    background: var(--bg-light);
    border-top: 1px solid #e1e1e1;
}

#service1018 .chuna_core_section .sub_desc {
    text-align: center;
    color: #888;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 50px;
}

#service1018 .chuna_core_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

#service1018 .core_card {
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    transition: all 0.4s ease;
}

#service1018 .core_card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

#service1018 .core_card .icon_wrap {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

#service1018 .core_card:hover .icon_wrap {
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    transform: scale(1.15) rotate(10deg);
}

#service1018 .core_card .icon_wrap svg {
    width: 38px;
    height: 38px;
    color: var(--primary);
    stroke-width: 2.5px;
    transition: all 0.4s ease;
}

#service1018 .core_card:hover .icon_wrap svg {
    color: #fff;
}

#service1018 .core_card dt {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

#service1018 .core_card:hover dt {
    color: var(--accent);
}

#service1018 .core_card dd {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    word-break: keep-all;
    margin: 0;
}


@media (max-width: 1024px) {
    #service1018 .chuna_core_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    #service1018 .chuna_core_section {
        padding: 70px 15px 50px;
    }
    
    #service1018 .chuna_core_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    #service1018 .core_card {
        padding: 35px 20px;
    }
    
    #service1018 .core_card .icon_wrap {
        width: 70px;
        height: 70px;
    }
    
    #service1018 .core_card .icon_wrap svg {
        width: 32px;
        height: 32px;
    }
    
    #service1018 .core_card dt {
        font-size: 18px;
    }
}

#service1018 .chuna_process_section {
    padding: 100px 5% 80px;
    background: var(--bg-beige);
    border-top: 1px solid #e1e1e1;
}

#service1018 .process_title_area {
    text-align: center;
    margin-bottom: 60px;
}

#service1018 .process_title_area .s_tit {
    margin-bottom: 15px;
}

#service1018 .process_title_area .sub_txt {
    color: #888;
    font-size: 16px;
}

#service1018 .process_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

#service1018 .process_card {
    position: relative;
    background: #fff;
    border: 2px solid #eee;
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    transition: all 0.4s ease;
}

#service1018 .process_card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

#service1018 .process_card .step_number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    background: #fef9f3;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: var(--e-font);
    letter-spacing: 0.5px;
}

#service1018 .process_card .icon_circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

#service1018 .process_card:hover .icon_circle {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    transform: scale(1.1);
}

#service1018 .process_card .icon_circle svg {
    width: 36px;
    height: 36px;
    color: var(--primary);
    stroke-width: 2.5px;
    transition: all 0.4s ease;
}

#service1018 .process_card:hover .icon_circle svg {
    color: #fff;
}

#service1018 .process_card dt {
    font-size: 19px;
    font-weight: 700;
    color: #111;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

#service1018 .process_card:hover dt {
    color: var(--accent);
}

#service1018 .process_card dd {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    word-break: keep-all;
    margin: 0;
}


@media (max-width: 1024px) {
    #service1018 .process_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    #service1018 .chuna_process_section {
        padding: 70px 15px 50px;
    }
    
    #service1018 .process_title_area {
        margin-bottom: 40px;
    }
    
    #service1018 .process_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    #service1018 .process_card {
        padding: 35px 20px;
    }
    
    #service1018 .process_card .icon_circle {
        width: 70px;
        height: 70px;
    }
    
    #service1018 .process_card .icon_circle svg {
        width: 32px;
        height: 32px;
    }
    
    #service1018 .process_card dt {
        font-size: 17px;
    }
}


#service1018 .symptoms_section {
    position: relative;
    padding: 100px 8% 80px;
    border-top: 1px solid #e1e1e1;
}

#service1018 .symptoms_section .sub_desc {
    text-align: center;
    color: #888;
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 50px;
}

#service1018 .symptoms_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#service1018 .symptom_card {
    position: relative;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

#service1018 .symptom_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

#service1018 .symptom_card:hover::before {
    transform: scaleX(1);
}

#service1018 .symptom_card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

#service1018 .symptom_card .icon_wrap {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.4s ease;
}

#service1018 .symptom_card:hover .icon_wrap {
    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
    transform: scale(1.1) rotate(10deg);
}

#service1018 .symptom_card .icon_wrap svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
    stroke-width: 2.5px;
    transition: all 0.4s ease;
}

#service1018 .symptom_card:hover .icon_wrap svg {
    color: #fff;
}

#service1018 .symptom_card .number {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    background: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--e-font);
    opacity: 0.9;
}

#service1018 .symptom_card dt {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

#service1018 .symptom_card:hover dt {
    color: var(--primary);
}

#service1018 .symptom_card dd {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    word-break: keep-all;
    margin: 0;
}

/* ¹ÝÀÀÇü ó¸® */
@media (max-width: 1024px) {
    #service1018 .symptoms_grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    #service1018 .symptoms_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    #service1018 .symptom_card {
        padding: 30px 20px;
    }
    
    #service1018 .symptom_card .icon_wrap {
        width: 60px;
        height: 60px;
    }
    
    #service1018 .symptom_card .icon_wrap svg {
        width: 28px;
        height: 28px;
    }
    
    #service1018 .symptom_card dt {
        font-size: 17px;
    }
    
    #service1018 .symptom_card dd {
        font-size: 13px;
    }
}


#service1018 .cause_section {
    text-align: center;
    padding: 100px 8% 80px;
    border-top: 1px solid #e1e1e1;
    background: #f5f3f0;
}

#service1018 .cause_section .sub_desc {
    margin-bottom: 50px;
}

#service1018 .cause_grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

#service1018 .cause_card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s ease;
}

#service1018 .cause_card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

#service1018 .cause_card .img_box {
    position: relative;
    height: 180px;
    overflow: hidden;
}

#service1018 .cause_card .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

#service1018 .cause_card:hover .img_box img {
    transform: scale(1.1);
}

#service1018 .cause_card .overlay {
    position: absolute;
    top: 15px;
    left: 15px;
}

#service1018 .cause_card .overlay span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

#service1018 .cause_card .txt_box {
    padding: 20px;
}

#service1018 .cause_card dt {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}

#service1018 .cause_card dd {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* ¹ÝÀÀÇü ó¸® */
@media(max-width: 1024px) {
    #service1018 .cause_grid { width: 100% !important; margin-top: 30px; }
}

@media(max-width: 640px) {
    #service1018 .cause_grid { grid-template-columns: 1fr; }
    #service1018 .cause_card .img_box { height: 150px; }
}

#service1018 .faq {
    padding: 100px 8% 80px;
    background: var(--bg-beige);
    border-top: 1px solid #e1e1e1;
}

#service1018 .faq .s_tit {
    margin-bottom: 50px;
}

.faq_list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.faq_list li {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease;
}

.faq_list li:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq_list li:last-child {
    margin-bottom: 0;
}

.faq_q {
    display: flex;
    align-items: center;
    padding: 20px 25px;
    background: #f8f9fa;
    border-bottom: 1px solid #e0e0e0;
}

.faq_q .q_mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--accent);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50%;
    margin-right: 15px;
}

.faq_q strong {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
}

.faq_a {
    display: flex;
    align-items: flex-start;
    padding: 20px 25px;
    background: #fff;
}

.faq_a .a_mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--primary);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    border-radius: 50%;
    margin-right: 15px;
}

.faq_a p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin: 0;
    padding-top: 4px;
}


@media screen and (max-width: 768px) {
    .faq_q,
    .faq_a {
        padding: 15px 20px;
    }
    
    .faq_q .q_mark,
    .faq_a .a_mark {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 14px;
        margin-right: 12px;
    }
    
    .faq_q strong {
        font-size: 15px;
    }
    
    .faq_a p {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .faq_q,
    .faq_a {
        padding: 12px 15px;
    }
    
    .faq_q .q_mark,
    .faq_a .a_mark {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 13px;
        margin-right: 10px;
    }
    
    .faq_q strong {
        font-size: 14px;
    }
    
    .faq_a p {
        font-size: 13px;
    }
}


#service1018 .ward_section {
    padding: 100px 5% 80px;
    background: var(--bg-light);
    border-top: 1px solid #e1e1e1;
}

#service1018 .ward_title_area {
    text-align: center; 
    margin-bottom: 60px;
}

#service1018 .ward_title_area .s_tit {
    margin-bottom: 15px;
}

#service1018 .ward_title_area .sub_txt {
    margin-top: 10px; 
    color: #888; 
    font-size: 16px;
}

#service1018 .ward_slider_wrap {
    position: relative;
    margin-bottom: 50px;
    border-radius: 15px;
    overflow: hidden;
}

#service1018 .ward_slider {
    width: 100%;
    height: 500px;
}

#service1018 .ward_slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

#service1018 .ward_slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#service1018 .ward-next,
#service1018 .ward-prev {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

#service1018 .ward-next:hover,
#service1018 .ward-prev:hover {
    background: var(--primary);
}

#service1018 .ward-next::after,
#service1018 .ward-prev::after {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

#service1018 .ward-next:hover::after,
#service1018 .ward-prev:hover::after {
    color: #fff;
}

#service1018 .ward-pagination {
    bottom: 20px !important;
}

#service1018 .ward-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #fff;
    opacity: 0.6;
}

#service1018 .ward-pagination .swiper-pagination-bullet-active {
    background: var(--primary);
    opacity: 1;
}


#service1018 .ward_info_grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
}

#service1018 .info_item {
    background: #f8f9fa;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #eee;
    transition: 0.3s;
}

#service1018 .info_item:hover {
    border-color: var(--primary); 
    background: #fff;
}

#service1018 .info_item.highlight {
    background-color: #f79e36;
    color: white;
}

#service1018 .info_item.highlight * {
    color: white;
}


#service1018 .info_item.highlight .icon_circle svg {
    color: #f79e36 !important;
    stroke: #f79e36 !important;
}

#service1018 .info_item .icon_circle {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

#service1018 .info_item .icon_circle svg {
    color: #f79e36;
    width: 28px;
}

#service1018 .info_item dt {
    font-size: 17px; 
    font-weight: 700; 
    color: #111; 
    margin-bottom: 10px;
}

#service1018 .info_item dd {
    font-size: 14px; 
    color: #666; 
    line-height: 1.5; 
    word-break: keep-all;
}


@media (max-width: 1024px) {
    #service1018 .ward_slider {
        height: 400px;
    }
    #service1018 .ward_info_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    #service1018 .ward-next,
    #service1018 .ward-prev {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 768px) {
    #service1018 .symptoms_section {
        padding: 70px 15px 50px;
    }
    
    #service1018 .cause_section {
        padding: 70px 15px 50px;
    }
    
    #service1018 .ward_section {
        padding: 70px 15px 50px;
    }
    
    #service1018 .faq {
        padding: 70px 15px 50px;
    }
    #service1018 .ward_title_area {
        margin-bottom: 30px;
    }
    #service1018 .ward_slider {
        height: 300px;
    }
    #service1018 .ward_slider_wrap {
        margin-bottom: 40px;
    }
    #service1018 .ward_info_grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    #service1018 .info_item {
        padding: 25px 20px;
    }
    #service1018 .faq {
        margin-top: 70px;
        padding-top: 70px;
    }
}

@media (max-width: 480px) {
    #service1018 .symptoms_section {
        padding: 50px 15px 40px;
    }
    
    #service1018 .cause_section {
        padding: 50px 15px 40px;
    }
    
    #service1018 .ward_section {
        padding: 50px 15px 40px;
    }
    
    #service1018 .faq {
        padding: 50px 15px 40px;
    }
    
    #service1018 .ward_slider {
        height: 250px;
    }
    #service1018 .ward_title_area .s_tit {
        font-size: 18px;
    }
    #service1018 .ward_title_area .sub_txt {
        font-size: 14px;
    }
    #service1018 .ward-next,
    #service1018 .ward-prev {
        width: 35px;
        height: 35px;
    }
    #service1018 .ward-next::after,
    #service1018 .ward-prev::after {
        font-size: 16px;
    }
}

#service1018 .accident_symptoms .cause_grid {
    grid-template-columns: repeat(3, 1fr);
}

#service1018 .accident_causes .symptoms_grid {
    grid-template-columns: repeat(2, 1fr);
}


/**프로필소개**/
  .director-profile-page * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .director-profile-page {
            font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.8;
            color: #333;
            background-color: #fff;
        }

        .director-profile-container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* 상단 헤더 섹션 */
        .director-profile-top-banner {
            position: relative;
            height: 400px;
            overflow: hidden;
            margin-bottom: 80px;
        }

        .director-profile-banner-image {
            position: absolute;
            top: 0;
            right: 0;
            width: 60%;
            height: 100%;
            background: #d4c4b0;
            overflow: hidden;
        }

        .director-profile-banner-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .director-profile-banner-text {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(135deg, #8B7355 0%, #6B5644 100%);
            padding: 60px 80px;
            z-index: 10;
            box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
        }

.director-profile-banner-desc {
    font-size: 1.1rem;
    color: white;  /* 또는 #ffffff */
    line-height: 1.9;
    font-weight: 300;
}

        .director-profile-banner-subtitle {
            font-size: 0.95rem;
            color: rgba(255,255,255,0.9);
            margin-bottom: 10px;
            font-weight: 400;
            letter-spacing: 1px;
        }

        .director-profile-banner-title {
            font-size: 2.5rem;
            color: white;
            font-weight: 700;
            line-height: 1.4;
        }


.director-profile-doctor-badge {
    position: absolute;
    top: -20px;
    left: 100%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #D4AF37 0%, #C8A882 100%);
    color: white;
    padding: 20px 20px;
    border-radius: 50px;
    font-weight: 900;
    font-size: 1.4rem;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6);
    z-index: 10;
    letter-spacing: 3px;
    border: 4px solid white;
    animation: directorProfileBadgePulse 2s ease-in-out infinite;
}

@keyframes directorProfileBadgePulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.6);
    }
    50% {
        transform: translateX(-50%) scale(1.08);
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.8);
    }
}

        /* 메인 프로필 섹션 */
        .director-profile-main-section {
            padding: 0 40px 80px;
        }

        .director-profile-content-wrapper {
            display: grid;
            grid-template-columns: 350px 1fr;
            gap: 0;
            background: #f5f1ed;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 왼쪽 이미지 영역 */
        .director-profile-image-section {
            position: relative;
            background: white;
        }

        .director-profile-main-image {
            width: 100%;
            height: 100%;
            min-height: 500px;
            background: linear-gradient(135deg, #e8e3db 0%, #d4cdc3 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .director-profile-main-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .director-profile-image-placeholder {
            text-align: center;
            color: #8B7355;
     
        }

        .director-profile-name-badge {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #8B7355 0%, #6B5644 100%);
            color: white;
            padding: 25px 30px;
            text-align: center;
        }

        .director-profile-name-badge-title {
            font-size: 0.9rem;
            margin-bottom: 8px;
            opacity: 0.95;
            font-weight: 400;
        }

        .director-profile-name-badge-name {
            font-size: 1.8rem;
            font-weight: 700;
        }

        /* 오른쪽 정보 영역 */
        .director-profile-info-section {
            background: white;
            padding: 60px 70px;
            position: relative;
        }

        .director-profile-greeting-box {
            margin-bottom: 50px;
        }

        .director-profile-greeting-title {
            font-size: 1.5rem;
            color: #6B5644;
            margin-bottom: 25px;
            font-weight: 700;
        }

        .director-profile-greeting-text {
            font-size: 1.05rem;
            line-height: 2;
            color: #555;
            margin-bottom: 15px;
        }

        /* 학력 경력 리스트 */
        .director-profile-credentials-list {
            list-style: none;
        }

        .director-profile-credentials-list li {
            padding: 16px 0;
            padding-left: 25px;
            position: relative;
            color: #555;
            font-size: 1.05rem;
            border-bottom: 1px solid #e0d9d0;
            transition: all 0.3s ease;
        }

        .director-profile-credentials-list li:last-child {
            border-bottom: none;
        }

        .director-profile-credentials-list li::before {
            content: '▸';
            position: absolute;
            left: 0;
            color: #8B7355;
            font-size: 1rem;
        }

        .director-profile-credentials-list li:hover {
            padding-left: 30px;
            color: #6B5644;
        }

        /* 장식 요소 */
        .director-profile-deco-line {
            position: absolute;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #C8A882, #8B7355);
            top: 40px;
            right: 70px;
        }

        /* 반응형 디자인 */
        @media (max-width: 1024px) {
            .director-profile-content-wrapper {
                grid-template-columns: 1fr;
            }

            .director-profile-main-image {
                min-height: 400px;
            }

            .director-profile-info-section {
                padding: 50px 40px;
            }

            .director-profile-banner-text {
                padding: 50px 60px;
            }

            .director-profile-banner-title {
                font-size: 2rem;
            }
        }

        @media (max-width: 768px) {
            .director-profile-top-banner {
                height: auto;
                min-height: 300px;
            }

            .director-profile-banner-image {
                width: 100%;
                height: 300px;
                position: relative;
            }

            .director-profile-banner-text {
                position: relative;
                transform: none;
                padding: 40px 30px;
                width: 100%;
            }

            .director-profile-banner-title {
                font-size: 1.8rem;
            }

            .director-profile-main-section {
                padding: 0 20px 60px;
            }

            .director-profile-info-section {
                padding: 40px 30px;
            }

            .director-profile-deco-line {
                right: 30px;
            }

            .director-profile-main-image {
                min-height: 350px;
            }
        }

        @media (max-width: 576px) {
            .director-profile-banner-text {
                padding: 30px 20px;
            }

            .director-profile-banner-title {
                font-size: 1.5rem;
            }

            .director-profile-banner-subtitle {
                font-size: 0.85rem;
            }

            .director-profile-info-section {
                padding: 35px 25px;
            }

            .director-profile-greeting-title {
                font-size: 1.3rem;
            }

            .director-profile-greeting-text {
                font-size: 0.98rem;
            }

            .director-profile-credentials-list li {
                font-size: 0.98rem;
                padding: 14px 0 14px 22px;
            }

            .director-profile-name-badge {
                padding: 20px 25px;
            }

            .director-profile-name-badge-name {
                font-size: 1.5rem;
            }
        }

        /* 애니메이션 */
        @keyframes directorProfileFadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes directorProfileSlideInLeft {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes directorProfileSlideInRight {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .director-profile-banner-text {
            animation: directorProfileSlideInLeft 0.8s ease-out;
        }

        .director-profile-image-section {
            animation: directorProfileFadeInUp 1s ease-out;
        }

        .director-profile-info-section {
            animation: directorProfileSlideInRight 1s ease-out;
        }


/* 자동차보험 통합 래퍼 - 전체 배경 */
.insurance_wrapper {
    background: #fff9f1;
    padding: 100px 8% 80px!important;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid #e1e1e1;
}

/* 자동차보험 안내 섹션 */
.insurance_section {
    padding: 0 0 60px 0;

}

.insurance_section .sub_txt {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin-top: 5px;
    margin-bottom: 50px;}

/* 프로세스 섹션 */
.process_section {
    padding: 60px 0;
    border-top: 2px solid rgba(139, 115, 85, 0.2);
}

.process_steps {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 50px auto 0;
    gap: 20px;
    list-style: none;
}

.process_step {
    flex: 1;
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}

.process_step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(139, 115, 85, 0.2);
}

.step_number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8B7355 0%, #6B5644 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 auto 20px;
}

.process_step dt {
    font-size: 1.2rem;
    color: #6B5644;
    margin-bottom: 15px;
    font-weight: 700;
}

.process_step dd {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
}

.process_arrow {
    font-size: 2rem;
    color: #8B7355;
}

.process_arrow svg {
    width: 30px;
    height: 30px;
}

/* 안내 박스 */
.notice_box {
    max-width: 900px;
    margin: 50px auto 0;
    background: white;
    padding: 30px 40px;
    border-radius: 15px;
    border-left: 5px solid #8B7355;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}

.notice_box svg {
    width: 24px;
    height: 24px;
    color: #8B7355;
    flex-shrink: 0;
}

.notice_box p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
    margin: 0;
}

.notice_box strong {
    color: #8B7355;
}

/* 반응형 */
@media (max-width: 1024px) {
    .insurance_wrapper {
        padding: 80px 6% 70px;
    }
    
    .process_steps {
        flex-direction: column;
        gap: 15px;
    }
    
    .process_arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .insurance_wrapper {
        padding: 70px 5% 50px;
    }
    
    .insurance_section,
    .process_section {
        padding: 40px 0;
    }
    
    .process_section {
        border-top: 1px solid rgba(139, 115, 85, 0.2);
    }
    
    .process_step {
        padding: 30px 20px;
    }
    
    .step_number {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .notice_box {
        padding: 25px 20px;
        flex-direction: column;
        text-align: center;
        margin-top: 40px;
    }
}

@media (max-width: 480px) {
    .insurance_wrapper {
        padding: 50px 4% 40px;
    }
    
    .insurance_section,
    .process_section {
        padding: 30px 0;
    }
    
    .notice_box {
        margin-top: 30px;
    }
}