/********** Template CSS **********/
@font-face {
	font-family: 'Pretendard';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../css/font/PretendardVariable.woff2') format('woff2-variations');
}
body, html * {font-family: "Pretendard", 'malgun gothic','맑은고딕',  Arial, sans-serif; ;}

:root {
    --primary: #16D5FF;
    --secondary: #999999;
    --light: #F2F8FE;
    --dark: #111111;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 60px;
    z-index: 99;
}

body,
html { max-width: 100vw}

html { font-size: 100%; overflow-x: hidden}

body { margin: 0; font-family: var(--lqd-body-font-family); font-size: var(--lqd-body-font-size); font-weight: var(--lqd-body-font-weight); letter-spacing: var(--lqd-body-letter-spacing); line-height: var(--lqd-body-line-height); color: var(--lqd-body-text-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}

iframe { max-width: 100%}

.font_small,
small { font-size: .667em}

a { text-decoration: none; color: var(--lqd-color-link); transition: all .3s}

a:focus,
a:hover { text-decoration: none}

img { max-width: 100%; height: auto}

figure { margin-bottom: 0}

label { font-weight: 400}

textarea { resize: vertical}

dd { margin-inline-start: 1.5em; margin-top: .5em; margin-bottom: .5em}

table { width: 100%; color: #333}

table tr { border-bottom: 1px solid #dedede}

table td,
table th { border: none; padding: .5em 1em .5em 0}

table th,
table th a { color: #000}

table thead th { padding-top: .8em; padding-bottom: .8em; font-size: .8em; text-transform: uppercase; letter-spacing: .1em}

table tbody th { font-weight: 400}

table tbody tr:nth-child(odd) { background-color: #f7f7f7}

pre { margin-bottom: 1.5em}

blockquote { display: block; margin-bottom: 2.5em; font-style: italic}

blockquote cite { display: inline-block; position: relative; padding-top: 1em; margin-top: 1em; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-style: normal}

blockquote cite:before { content: ""; display: inline-block; width: 30px; height: 2px; position: absolute; top: 0; left: 0; background-color: currentColor}

#lqd-site-content,
#wrap { position: relative}

#lqd-site-content { z-index: 2; transition: transform .3s}

@media screen and (max-width: 879px) { body { overflow: hidden}

 /*#wrap { padding-bottom: 100px}*/}

h1,
h2,
h3,
h4,
h5,
h6,
.h4,
.h5,
.h6 {
    font-weight: 500 !important;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand {
    height: 75px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 500;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

.navbar .btn:hover {
    color: #FFFFFF !important;
    background: var(--primary) !important;
}


/*** Header ***/
.hero-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--secondary);
}


/*** Service ***/
.service-item {
    position: relative;
    overflow: hidden;
}

.service-item::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: -80px;
    right: -80px;
    border: 80px solid;
    transform: rotate(45deg);
    opacity: 1;
    transition: .5s;
}

.service-item.bg-white::after {
    border-color: transparent transparent var(--light) transparent;
}

.service-item.bg-light::after {
    border-color: transparent transparent #FFFFFF transparent;
}

.service-item:hover::after {
    opacity: 0;
}


/*** Roadmap ***/
.roadmap-carousel {
    position: relative;
}

.roadmap-carousel::before {
    position: absolute;
    content: "";
    height: 0;
    width: 100%;
    top: 20px;
    left: 0;
    border-top: 2px dashed var(--secondary);
}

.roadmap-carousel .roadmap-item .roadmap-point {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 6px;
    left: 50%;
    margin-left: -15px;
    background: #FFFFFF;
    border: 2px solid var(--primary);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.roadmap-carousel .roadmap-item .roadmap-point span {
    display: block;
    width: 18px;
    height: 18px;
    background: var(--primary);
}

.roadmap-carousel .roadmap-item {
    position: relative;
    padding-top: 150px;
    text-align: center;
}

.roadmap-carousel .roadmap-item::before {
    position: absolute;
    content: "";
    width: 0;
    height: 115px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-right: 2px dashed var(--secondary);
}

.roadmap-carousel .roadmap-item::after {
    position: absolute;
    content: "";
    width: 14px;
    height: 14px;
    top: 111px;
    left: 50%;
    margin-left: -7px;
    transform: rotate(45deg);
    background: var(--primary);
}

.roadmap-carousel .owl-nav {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.roadmap-carousel .owl-nav .owl-prev,
.roadmap-carousel .owl-nav .owl-next {
    margin: 0 12px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-size: 22px;
    color: var(--light);
    background: var(--primary);
    transition: .5s;
}

.roadmap-carousel .owl-nav .owl-prev:hover,
.roadmap-carousel .owl-nav .owl-next:hover {
    color: var(--primary);
    background: var(--dark);
}


/*** FAQs ***/
.accordion .accordion-item {
    border: none;
    margin-bottom: 15px;
}

.accordion .accordion-button {
    background: var(--light);
    border-radius: 2px;
}

.accordion .accordion-button:not(.collapsed) {
    color: #FFFFFF;
    background: var(--primary);
    box-shadow: none;
}

.accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion .accordion-body {
    padding: 15px 0 0 0;
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--secondary);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--secondary);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .btn.btn-square {
    color: var(--primary);
    border: 1px solid var(--primary);
}

.footer .btn.btn-square:hover {
    color: #FFFFFF;
    background: var(--primary);
}

.footer .copyright {
    padding: 25px 0;
    border-top: 1px solid rgba(17, 17, 17, .1);
}

.footer .copyright a {
    color: var(--primary);
}

.footer .copyright a:hover {
    color: var(--dark);
}

/* 수정 */
:root {
    --primary: #ff951f;
}
body {font-size: 1.1rem;}
a {color: #05c4ef;}
.form-control {padding: .75rem .75rem;}
.text-primary {color: var(--primary) !important; }
.accordion .accordion-button,
.accordion .accordion-body {color: #222; font-size: 1.1rem;}
.accordion .accordion-body {color: #666;}
.btn-primary { font-size: 1.3rem; background-color: #0dc7f1 !important; border-color: #0dc7f1 !important;}

.tit-logo img {height: 50px;}
.visual-txt {line-height: 150%;}
.visual-img {position: relative;}
.visual-img .img-car {position: absolute; right: 0; bottom: 0; width: 58%; animation: bounce1 0.4s infinite;}
@keyframes bounce1 {
    0% {bottom: 0;}
    25% {bottom: -1px;}
    75% {bottom: 1px;}
    100% {bottom: 0px;}
}

.dot-txt {display: inline-block;}
.dot-txt em {position: relative; color: #05c4ef; font-style: normal; animation: dotTxt 4.5s ease-in-out forwards infinite;}
.dot-txt em::before {position: absolute; top: -50px; left: 12px; width: 8px; height: 8px; border-radius: 50%; background-color: #05c4ef; content: ""; opacity: 0; animation: dot 4.5s ease-in-out forwards infinite; }
@keyframes dot01 {
    0% {top: -50px; opacity: 0}
    40% {top: -50px;opacity: 0}
    42% {top: 0; opacity: 1;}
    44% {top: -9px; opacity: 1}
    100% {top: -9px; opacity: 1;}
}
@keyframes dot02 {
    0% {top: -50px; opacity: 0}
    44% {top: -50px;opacity: 0}
    46% {top: 0; opacity: 1;}
    48% {top: -9px; opacity: 1}
    100% {top: -9px; opacity: 1;}
}
@keyframes dot03 {
    0% {top: -50px; opacity: 0}
    48% {top: -50px;opacity: 0}
    50% {top: 0; opacity: 1;}
    52% {top: -9px; opacity: 1}
    100% {top: -9px; opacity: 1;}
}
@keyframes dot04 {
    0% {top: -50px; opacity: 0}
    52% {top: -50px;opacity: 0}
    54% {top: 0; opacity: 1;}
    56% {top: -9px; opacity: 1}
    100% {top: -9px; opacity: 1;}
}
@keyframes dot05 {
    0% {top: -50px; opacity: 0}
    56% {top: -50px;opacity: 0}
    58% {top: 0; opacity: 1;}
    60% {top: -9px; opacity: 1}
    100% {top: -9px; opacity: 1;}
}
@keyframes dot06 {
    0% {top: -50px; opacity: 0}
    60% {top: -50px;opacity: 0}
    62% {top: 0; opacity: 1;}
    64% {top: -9px; opacity: 1}
    100% {top: -9px; opacity: 1;}
}

@keyframes dotTxt01 {
    0% {top: 0;}
    40% {top: 0;}
    42% {top: 10px}
    44% {top: 0;}
    100% {top: 0;}
}
@keyframes dotTxt02 {
    0% {top: 0;}
    44% {top: 0;}
    46% {top: 10px}
    48% {top: 0;}
    100% {top: 0;}
}
@keyframes dotTxt03 {
    0% {top: 0;}
    48% {top: 0;}
    50% {top: 10px}
    52% {top: 0;}
    100% {top: 0;}
}
@keyframes dotTxt04 {
    0% {top: 0;}
    52% {top: 0;}
    54% {top: 10px}
    56% {top: 0;}
    100% {top: 0;}
}
@keyframes dotTxt05 {
    0% {top: 0;}
    56% {top: 0;}
    58% {top: 10px}
    60% {top: 0;}
    100% {top: 0;}
}
@keyframes dotTxt06 {
    0% {top: 0;}
    60% {top: 0;}
    62% {top: 10px}
    64% {top: 0;}
    100% {top: 0;}
}

.dot-txt em:nth-child(1) {animation-name: dotTxt01;}
.dot-txt em:nth-child(2) {animation-name: dotTxt02;}
.dot-txt em:nth-child(3) {animation-name: dotTxt03;}
.dot-txt em:nth-child(4) {animation-name: dotTxt04;}
.dot-txt em:nth-child(5) {animation-name: dotTxt05;}
.dot-txt em:nth-child(6) {animation-name: dotTxt06;}
.dot-txt em:nth-child(1)::before {animation-name: dot01;}
.dot-txt em:nth-child(2)::before {animation-name: dot02;}
.dot-txt em:nth-child(3)::before {animation-name: dot03;}
.dot-txt em:nth-child(4)::before {animation-name: dot04;}
.dot-txt em:nth-child(5)::before {animation-name: dot05;}
.dot-txt em:nth-child(6)::before {animation-name: dot06;}

@media (max-width: 993px) {
    .dot-txt {padding-top: 20px;}
}

.roadmap-carousel .roadmap-item {padding-top: 75px;}
.roadmap-carousel .roadmap-item span {display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; text-align: left;}
.roadmap-carousel .roadmap-item .roadmap-point {border-radius: 50%; width: 50px; height: 50px; transform: none; margin-left: -25px; }
.roadmap-carousel .roadmap-item .roadmap-point span {width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: url(../img/new/default_profile.webp) no-repeat 50% 50% / cover;}
.roadmap-carousel .roadmap-item::before,
.roadmap-carousel .roadmap-item::after {display: none;}

.payment-list {display: flex; gap: 24px; padding: 0 24px; }
.service-item {transition: all 0.2s;}
.service-item:hover {transform: translateY(-10px); filter: drop-shadow(0 10px 10px rgba(0,0,0,0.05));}
.payment-wrap {transition: all 0.2s; flex: 1;}
.payment-wrap:hover {filter: drop-shadow(0 10px 10px rgba(0,0,0,0.08));}
.payment-box {padding: 30px 20px; border-radius: 24px; position: relative; z-index: 1;}
.payment-box + .btn-primary {margin-top: -30px; padding-top: 36px !important;}
.payment-box + .btn-primary:hover {transform: translateY(10px);}
.payment-box h1 {margin-bottom: 10px;}
.payment-box img {display: inline-block; max-width: 340px; width: 80%; padding: 65px 0 40px;}
.payment-txt .time {font-size: 20px; color: #666;}
.payment-txt .payment {padding-top: 8px; font-size: 32px; font-weight: 700; color: #111;}
.payment-info-txt {display: block; margin-top: 20px; color: #666;}
.payment-info-txt span {display: inline-block; padding: 0 5px; background-color: rgba(13,199,241, 0.1) ; color:#05c4ef ; font-weight: 700;}
footer {text-align: center; color: #222;}
footer h1 img {height: 52px;}
@media (max-width: 1400px) and (min-width: 992px) {
.visual-txt {font-size: 2.7rem }

}
@media (max-width: 1280px) {
.payment-list {padding: 0; gap: 6px;}
.payment-box h1 {font-size: 2.4rem;}
.payment-info-txt {font-size: 1.1rem !important;}
.payment-txt .time {font-size: 18px;}
.payment-txt .payment {font-size: 28px;}
}
@media (max-width: 991px) {
.payment-list {flex-direction: column;}
.payment-box img {padding: 30px 0 20px;}
}

.info-txt {margin-top: 60px; color: #222; padding: 0 30px; }
.info-txt dl {border-top: 2px dashed #ccc; padding: 1.2rem 1.5rem !important; /* 패딩 더욱 축소 */}
.info-txt dl dt {font-size: 1.3rem; margin-bottom: 10px;}
.info-txt dl dd {font-size: 1.1rem; color: #444; line-height: 2rem;}

.navbar { background-color: rgba(255,255,255,0.5);   backdrop-filter: blur(3px); }

/*.quick-menu {position: fixed; bottom: 60px; right: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 100; }*/
/*.quick-menu .btn-quick {display: block; width: 60px; height: 60px; border-radius: 50%; background-repeat: no-repeat; background-size: 40px; background-position: 50% 50%;}*/
/*.quick-menu .btn-kakao {background-image: url(../img/new/logo_kakao.webp); background-color: #fae100;}*/
/*.quick-menu .btn-tel {background-image: url(../img/new/icon_tel.webp); background-color: #05c4ef; background-size: 26px; }*/

.quick-menu {
    position:fixed;
    bottom:170px; /* 제일 위로 변경 (전화상담) */
    right:15px;
    z-index:63182;
    background:#7DD3FC;  /* 전화상담 - 파란색 */
    padding: 5px 10px;
    max-width:140px;
    border-radius: 25%
}
.quick-menu img {max-width:30px; }
.quick-menu2 {
    position:fixed;
    bottom:110px; /* 중간 위치 (카카오톡) */
    right:15px;
    padding: 5px 10px;
    background: #fdd800;  /* 카카오톡 - 노란색 */
    z-index:63182;
    border-radius: 25%;
    max-width:140px;

}
.quick-menu2 img {max-width:30px; }

.quick-menu3 {
    position:fixed;
    bottom:50px; /* 제일 아래 (연수신청) */
    right:15px;
    padding: 5px 10px;
    background: #f8f9ff;  /* 연수신청 - 흰색 */
    border: 1px solid #f8f9ff;
    z-index:63182;
    border-radius: 25%;
    max-width:140px;
}
.quick-menu3 img {max-width:30px; }
.sub-visual {max-height: 400px; ;}

/* 서브페이지 */
.sub-visual-img {position: relative;}
.sub-visual-img .img-car {position: absolute; bottom: 3%; right: 20%; width: 45%; animation: bounce1 0.4s infinite;}

.zone-list {display: flex; gap: 6%; padding: 60px 60px 0;}
.zone-list .zone-item {flex: 1; position: relative;  border-radius: 12px; transition: 0.3s;}
.zone-list .zone-item:hover {transform: translateY(-10px);}
.zone-list .zone-item h3 {padding: 20px; text-align: center; width: 100%; }
.zone-list .zone-item .img-box {max-width: 100%; display: block; border-radius: 12px;}
.zone-list .zone-item .img-box img {width: 100%; height: 100%; object-fit: cover;}

.review-list {display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0;}
.review-list li .btn-review {display: flex; gap: 16px; width: 100%; padding: 24px 60px; justify-content: space-between; border-radius: 6px; color: #222;}
.review-list li .btn-review .tit {display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-list li .btn-review .review-name {display: block; width: 150px; font-size: 1rem; color: #888; text-align: right; flex-shrink: 0; }
.review-list li .btn-review:hover .tit {text-decoration: underline;}

.pagination {display: flex; align-items: center; justify-content: center; position: relative;}
.pagination .pg-wrap {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px;}
.pagination .pg-wrap .pg-page {display: inline-block; min-width: 50px; height: 50px; padding: 0 12px; line-height: 50px; text-align: center; border-radius: 3px; background-color: #F2F8FE;}
.pagination .pg-wrap a:hover {text-decoration: underline;}
.pagination .pg-wrap .pg-page.pg-current {background-color: #0dc7f1 !important; color: #fff;}
.pagination .btn-primary {position: absolute; right: 0; top: 0;}

.btn-wrap {text-align: right;}

.review-detail-box,
.review-detail-box .bg-white {padding: 48px;}
.review-detail-box .inner {margin-bottom: 40px;}
.review-detail-box .name {display: flex; align-items: center; justify-content: center; gap: 12px;}

.step-list {list-style: none; padding: 0; display: flex; justify-content: center; gap: 24px; border-top: 2px dashed #74c5ec; margin-top: 80px;}
.step-list li {flex: 1; display: flex; align-items: center; flex-direction: column; max-width: 300px;}
.step-list .step-num {display: block; position: relative; flex-shrink: 0; width: 80px; padding: 4px; height: 80px; margin-top: -40px; background-color: #0dc7f1 !important; border-radius: 50%; color: #fff; }
.step-list .step-num::before {position: absolute; left: 50%; top: 100%; height: 40px; width: 0; border: 1px dashed  #0dc7f1; content: "";}
.step-list .step-num span {display: block; height: 100%; border-radius: 50%;  line-height: 68px; text-align: center; border: 3px solid #fff;}
.step-list .step-box.bg-light {padding: 24px 16px 16px; margin-top: 40px; border-radius: 20px; height: 100%;}
.step-list .step-box.bg-light .img-box img {max-width: 100%; margin-bottom: 30px;}
.step-list .step-box.bg-light h5 {font-weight: 700 !important; color: #222; height: 48px;}
.step-list .step-box.bg-light p {margin-bottom: 0; color: #666;}
@media (max-width: 1400) {
    .container.step-contents {max-width: 100% !important;}
}
/* 운전연수 이용안내와 연수신청 사이 여백 줄이기 */
.container-xxl {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#contactForm {
    margin-top: 0 !important;
}
@media (max-width: 992px) {
    .container-fluid.hero-header.mb-5 {margin-bottom: 0 !important;}
    .container-xxl.my-5.py-5 {margin-top: 0 !important; padding-top: 0 !important;}
    .info-txt {padding: 0;}

    .review-detail-box,
    .review-detail-box .bg-white {padding: 40px 30px 40px;}
    .review-detail-box .inner {margin-bottom: 5vw;}
    .review-list li .btn-review {padding: 24px;}
    .review-list li .btn-review .review-name {width: 60px;}

    .pagination {flex-direction: column;}
    .pagination .btn-primary {position: unset;}

    .zone-list {flex-direction: column; padding: 40px}
    .zone-list .zone-item .img-box {max-height: 360px; height: 360px;}

    .step-list {flex-direction: column; border:0;}
    .step-list li {max-width: 100%;}
    .step-list .step-num {margin: 0 0 20px;}
    .step-list .step-box.bg-light {margin-top: 0; margin-left: 0; width: 100%; text-align: center;}
    .step-list .step-num::before {height:20px}
    .step-list .step-box.bg-light .img-box img {width: 200px;}
    .step-list .step-box.bg-light h5 {height: auto;}
    .pagination .pg-wrap .pg-page {min-width: 32px; height: 32px; line-height: 32px;}

}
@media (max-width: 767px) {
    .zone-list {padding: 20px}
    .zone-list .zone-item .img-box {height: 250px;}
}

/* 게시판 */
.board-title .mj-w-10,
.board-content .mj-w-10 {width: 10%; flex-shrink: 0; text-align: center;}
.board-title .mj-w-15,
.board-content .mj-w-15 {width: 15%; flex-shrink: 0; text-align: center;}
.board-title .mj-w-50 {text-align: center;}
.board-title .mj-w-50,
.board-content .mj-w-50 {width: 50%; flex-shrink: 0;}
.board-content a {max-width: 100%; }

.board-list-group {}
.board-list-group .item {display: flex; align-items: center; gap: 32px; white-space: nowrap; }
.board-list-group .item:first-child {padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px dashed #ddd;}
.board-list-group .item strong {padding-right: 24px; border-right: 1px solid #ddd; font-weight: 400; color: #222;}
.board-list-group .item a {display: inline-block; overflow: hidden; text-overflow: ellipsis;}
@media (max-width: 992px) {
    .card.board-title {display: none;}
    .board-title .mj-w-10,
    .board-content .mj-w-10 ,
    .board-title .mj-w-15,
    .board-content .mj-w-15,
    .board-title .mj-w-50,
    .board-title .mj-w-50,
    .board-content .mj-w-50 {width: 100%; text-align: left;}
}
.section {margin-top: 60px;}
.comment-box {padding: 32px;}
.sound_only {position: absolute; width: 1px; height: 1px; opacity: 0;}
.board-write-box {display: flex; flex-direction: column; gap: 12px;}
.col-form-label {color: #222; white-space: nowrap;}
.form-control,
.form-control:focus {color: #222;}
input[type=file].form-control {background-color: #fff;}

<!-- 폼 스타일 추가 -->
<style>
     /* 폼 전체 스타일 */
 .module-form {
     max-width: 100%;
     border-radius: 15px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
     padding: 30px;
     background-color: #fff;
     margin-bottom: 20px;
 }

/* 입력 필드 공통 스타일 */
.lqd-cf-form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

.lqd-cf-form-control:focus {
    border-color: #05c4ef;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* 라벨 스타일 */
.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

/* 폼 컬럼 간격 조정 */
.row.-mx-15 {
    margin-left: -15px;
    margin-right: -15px;
}

.col.py-0.px-15 {
    padding: 10px 15px;
}

/* 제목 스타일 */
h2.ld-fh-element {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #333;
}

/* 텍스트 영역 스타일 */
textarea.lqd-cf-form-control {
    min-height: 120px;
    resize: vertical;
}

/* 제출 버튼 스타일 */
#btnSubmit {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    background-color: #05c4ef;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

#btnSubmit:hover {
    background-color: #05c4ef;
}

/* 선택 박스 스타일 */
select.lqd-cf-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 40px;
}

/* 모바일 반응형 조정 */
@media (max-width: 768px) {
    .module-form {
        padding: 20px 15px;
    }

    h2.ld-fh-element {
        font-size: 20px;
        white-space: nowrap;
        font-weight: 600;
    }

    .lqd-cf-form-control {
        font-size: 14px;
        padding: 10px 12px;
    }
}