@charset "UTF-8";

@import url('../fonts/Pretendard/pretendard.css');
@import url('../fonts/RemixIcon/remixicon.css');

html {width:100%; overflow-x:hidden;}
.fullPage {position:relative; left:0; top:0; width:100vw; height:100vh; overflow:hidden;}
html, body {width:100%; background-color:#fff; margin: 0 auto;}
body {font-size:16px; color:#666; font-weight:300; letter-spacing:normal;word-break:keep-all;}
.page-wrapper{width:100%;
    /* overflow-x:hidden; */
}
a {text-decoration:none; color:inherit;}
i, span {color:inherit;}
.container-fluid {position:relative; padding:0 80px;}
section {position:relative; padding:80px 0;}
.container {position:relative;}
.divider {height:0;margin:8px 0;overflow:hidden; border-top:1px solid rgb(87,96,113); opacity:1;}
.mobile-only {display:none !important;}
.pc-only {display:block !important;}
.hidden {font-size:0; color:transparent; text-indent:-9999px;}
.input-group {padding-top:0;padding-bottom:0;}
.input-group .btn:hover,
.input-group .btn:focus,
.input-group .btn:active {border:0;}
.table {border-top:1px solid rgba(0,0,0,0.4)}
.tooltip-inner {font-size:12px;}
ul, ol {padding-left:0;}
.btn + .btn {margin-left:8px;}
.form-label span.required {color:#E4211F; display:inline-block;}
#container_title + .sub-text {font-size:16px;}
.table thead th, .table tbody th {white-space:nowrap;}
#scrap_do .win_btn .btn_submit {white-space:nowrap;}
.page-loading{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;-webkit-transition:all .4s .2s ease-in-out;transition:all .4s .2s ease-in-out;background-color:#fff;opacity:0;visibility:hidden;z-index:9999;}
[data-bs-theme="dark"] .page-loading{background-color:#080c05;}
.page-loading.active{opacity:1;visibility:visible;}
.page-loading-inner{position:absolute;top:50%;left:0;width:100%;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;opacity:0;}
.page-loading.active > .page-loading-inner{opacity:1;}
.page-loading-inner > span{display:block;font-family:"Inter",sans-serif;font-size:1rem;font-weight:normal;color:#6f788b;}
[data-bs-theme="dark"] .page-loading-inner > span{color:#fff;opacity:.6;}
.page-spinner{display:inline-block;width:2.75rem;height:2.75rem;margin-bottom:.75rem;vertical-align:text-bottom;background-color:#d7dde2;border-radius:50%;opacity:0;-webkit-animation:spinner .75s linear infinite;animation:spinner .75s linear infinite;}
[data-bs-theme="dark"] .page-spinner{background-color:rgba(255,255,255,.25);}
@-webkit-keyframes spinner {
    0%{-webkit-transform:scale(0);transform:scale(0);}
    50%{opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes spinner {
    0%{-webkit-transform:scale(0);transform:scale(0);}
    50%{opacity:1;-webkit-transform:none;transform:none;}
}
.section {position:relative; padding:80px 0;}
p, span, li, dd {word-break:keep-all;}

/* text */
h1, .h1 {font-size:40px;}
h3, .h3 {font-size:28px;}
h4, .h4 {font-size:24px;}
h5, .h5 {font-size:20px;}
h6, .h6 {font-size:16px;}
.fs-14 {font-size:14px;}
.fs-16 {font-size:16px;}
.fs-18 {font-size:18px;}
.fs-20 {font-size:20px;}
.fs-24 {font-size:24px;}
span.inherit {display:block; color:inherit; font-weight:inherit; font-size:inherit; margin:0; padding:0;}
.title-area {margin-bottom:40px;}
.title-area .title {margin-bottom:0;}
.title-area .text {margin-top:16px; margin-bottom:0;}
.title-area .text span {display:block; color:inherit; font-weight:inherit; font-size:inherit; margin:0; padding:0;}

/* bg */
.bg-gray {background-color:#f8f8f8;}


/* login */
.login-wrap {display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;width:100%;}
.login-wrap .text-nav.btn.btn-icon.bg-white {width:48px; height:48px; left:20px !important; font-size:24px; font-weight: normal;}
.login-wrap .left-area{width:50%;position:relative;height:100%;display:flex;align-items:center;justify-content:center;}
.login-wrap .right-area{width:50%;height:100%; padding:40px 24px; display:flex;align-items:center;justify-content:center;flex-grow:1;flex-direction:column;}
.login-wrap .bg-grad {justify-content:center;}
.login-wrap .bg-area {background-image:url(/assets/images/login-bg.jpg);background-repeat:no-repeat;background-position:center top;background-size:cover;position:absolute; left:0; right:0; height:100%;opacity:0.8;}
.login-wrap .password-toggle-btn .password-toggle-check{position:absolute;left:0;z-index:1;width:40px;height:1.25rem;opacity:0;cursor: pointer;}
.login-wrap .text-area{display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:10;}
.login-wrap .logo {display:block;width:200px;position:relative;z-index:10;}
.login-wrap h3 {display:block;margin-top:40px;max-width:80%;text-align:center;word-break:keep-all;line-height:1.4;}
.login-wrap .list-group-item {display:block; font-size:16px;}
.btn-home{position:absolute;top:20px;right:80px;border-radius:50%;z-index:2;background-color:#080c05; border:1px solid #080c05; transition:0.3s;}
.btn-home i {color:#fff; font-size:20px;}
.btn-home:hover {color:#fff;background-color:#00a1e4;  border:1px solid #00a1e4; }
#login_fs [class^="ri-"], 
#login_fs [class*=" ri-"] {font-size: 20px;}
.btn-login {}

/* bg */
.bg-light {background-color:#f6f9fc;}
.bg-white {background-color:#fff !important;}
.bg-dark {background-color:#080c05;}
[class^="bg-overlay-dark-"] {position:absolute; width:100%; height: 100%; z-index:1;}
.bg-overlay-dark-7:before{content:" ";background:#000000;opacity:0.7;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}
.bg-overlay-dark-6:before{content:" ";background:#000000;opacity:0.6;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}
.bg-overlay-dark-5:before{content:" ";background:#000000;opacity:0.5;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}
.bg-overlay-dark-4:before{content:" ";background:#000000;opacity:0.4;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:-1;}

/* button */
.form-floating > .form-control,.form-floating > .form-control-plaintext{padding:1rem 1rem;}
.w-md {min-width:160px !important;}

/* shadow */
.shadow{-webkit-box-shadow:0 0 3.125rem rgba(0,0,0,0.1) !important;box-shadow:0 0 3.125rem rgba(0,0,0,0.1) !important;}
.shadow-box{border:1px solid #f0f1f3;padding:50px;position:relative;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.shadow-box:hover{border-color:transparent;-webkit-box-shadow:0px 0px 40px rgba(83,88,93,0.1);box-shadow:0px 0px 40px rgba(83,88,93,0.1);}

/* list */
ul.list-disc {display:block;list-style-type:disc;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0px;margin-inline-end:0px;padding-inline-start:40px;unicode-bidi:isolate;padding-left:0;margin-left:0;}
ul.list-disc li::marker {margin-top:-2px;} 
.breadcrumb {position:relative; z-index:10;}


/* width */
::-webkit-scrollbar{width:4px; border-radius:2px;}  
/* Track */
::-webkit-scrollbar-track {background:#ddd;}  
/* Handle */
::-webkit-scrollbar-thumb {background:#999;}  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background:#666;}

/* scroll down */
/*
.scroll-down-btn{display:inline-block;text-decoration:none;position:absolute;z-index:1;bottom:16px;left:50%;transform:translateX(-50%);}
.scroll-down-btn p{margin-top:20px;color:white;font-size:12px;font-weight:400;letter-spacing:1px;text-indent:0;animation:colorText 5s ease-out infinite,nudgeText 5s ease-out infinite;}
.mouse{background:transparent linear-gradient(transparent 0%,transparent 50%,white 50%,white 100%);position:relative;width:38px;height:65px;margin:0 auto;border-radius:6rem;background-size:100% 200%;animation:colorSlide 5s linear infinite,nudgeMouse 5s ease-out infinite;}
.mouse:before,.mouse:after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
.mouse:before{width:34px;height:61px;background-color:#080c05;border-radius:6rem;}
.mouse:after{background-color:white;width:.375rem;height:.375rem;border-radius:100%;animation:trackBallSlide 5s linear infinite;}
@keyframes colorSlide {
    0% { background-position: 0% 100%; }
    20% { background-position: 0% 0%; }
    21% { background-color: #2c333e; }
    29.99% {
        background-color: white;
        background-position: 0% 0%;
    }
    30% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }
    50% { background-position: 0% 0%; }
    51% { background-color: #2c333e; }
    59% {
        background-color: white;
        background-position: 0% 0%;
    }
    60% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }
    80% { background-position: 0% 0%; }
    81% { background-color: #2c333e; }
    90%, 100% {
        background-color: white;
    }
}
@keyframes trackBallSlide {
    0%{opacity:1;transform:scale(1) translateY(-20px);}
    6%{opacity:1;transform:scale(0.9) translateY(5px);}
    14%{opacity:0;transform:scale(0.4) translateY(40px);}
    15%,19%{opacity:0;transform:scale(0.4) translateY(-20px);}
    28%,29.99%{opacity:1;transform:scale(1) translateY(-20px);}
    30%{opacity:1;transform:scale(1) translateY(-20px);}
    36%{opacity:1;transform:scale(0.9) translateY(5px);}
    44%{opacity:0;transform:scale(0.4) translateY(40px);}
    45%,49%{opacity:0;transform:scale(0.4) translateY(-20px);}
    58%,59.99%{opacity:1;transform:scale(1) translateY(-20px);}
    60%{opacity:1;transform:scale(1) translateY(-20px);}
    66%{opacity:1;transform:scale(0.9) translateY(5px);}
    74%{opacity:0;transform:scale(0.4) translateY(40px);}
    75%,79%{opacity:0;transform:scale(0.4) translateY(-20px);}
    88%,100%{opacity:1;transform:scale(1) translateY(-20px);}

}
@keyframes nudgeMouse {
    0%, 30%, 60%, 90% { transform: translateY(0); }
    20%, 50%, 80% { transform: translateY(8px); }
}
@keyframes nudgeText {
    0%, 30%, 60%, 90% { transform: translateY(0); }
    20%, 50%, 80% { transform: translateY(2px); }
}
@keyframes colorText {
    21%, 51%, 81% { color: #2c333e; }
    30%, 60%, 90% { color: white; }
}
*/

/* 검색 */
.search-bar {position:relative; width:100%;}
#hd_sch{border-radius:0;}
#hd_sch #sch_stx{position:relative;width:100%;background-color:#fff;}

/* 인기검색어 */
#popular {position:relative;margin:15px 0 0}
#popular h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#popular .popular_inner {width:400px;height:20px;overflow:hidden}
#popular ul {padding:0;margin:0}
#popular ul:after {display:block;visibility:hidden;clear:both;content:""}
#popular li {float:left;width:auto !important;height:18px;line-height:18px;padding-right:20px}
#popular li a {color:#8d8c8c}
#popular li:first-child {border-left:0}
#popular li a:hover {text-decoration:underline}
.popular_inner .popular_btns{display:none}
.popular_btns .pp-next {position:absolute;top:68%;right:0px;width:18px;height:18px;line-height:15px;text-align:center;border:1px solid #53555a;margin-top:-12px;color:#d3d2d2}
.popular_btns .pp-prev {position:absolute;top:68%;right:17px;width:18px;height:18px;line-height:15px;text-align:center;border:1px solid #53555a;margin-top:-12px;color:#d3d2d2}
#popular{position:relative;width:100%;height:auto;margin:0;background-color:#fff;padding:16px;border-radius:4px;}
#popular .popular_inner{width:100%;height:auto;}
#popular ul {width:100%;}
#popular li{display:inline-block;margin:4px;padding:0;}



/* 게시판 */
.chk_box input[type="checkbox"]:checked + label span{background:url(/skin/board/basic/img/chk.png) no-repeat 50% 50% #00a1e4; border-color:#00a1e4; border-radius:6px;}
.chk_box input[type="checkbox"] + label span{position:relative;left:auto;top:auto;width:18px;height:18px;display:block;background:#fff;border:1px solid #d0d4df;border-radius:6px;cursor:pointer;margin-right:8px;margin-top:2px;}
@-moz-keyframes dothabottomcheck {
    0%{height:0;}
    100%{height:50px;}
}
@-webkit-keyframes dothabottomcheck {
    0%{height:0;}
    100%{height:50px;}
}
@keyframes dothabottomcheck {
    0%{height:0;}
    100%{height:50px;}
}
@keyframes dothatopcheck {
    0%{height:0;}
    50%{height:0;}
    100%{height:120px;}
}
@-webkit-keyframes dothatopcheck {
    0%{height:0;}
    50%{height:0;}
    100%{height:120px;}
}
@-moz-keyframes dothatopcheck {
    0%{height:0;}
    50%{height:0;}
    100%{height:120px;}
}
input[type=checkbox]:checked + .check-box,
.check-box.checked{border-color:#00a1e4; }
input[type=checkbox]:checked + .check-box::after,
.check-box.checked::after {
    height: 50px;
    -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
    animation: dothabottomcheck 0.2s ease 0s forwards;
}
input[type=checkbox]:checked + .check-box::before,
.check-box.checked::before {
    height: 120px;
    -moz-animation: dothatopcheck 0.4s ease 0s forwards;
    -o-animation: dothatopcheck 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
    animation: dothatopcheck 0.4s ease 0s forwards;
}

/* 커스텀 스크롤바 스타일 - 가로, 세로 모두 4px */
::-webkit-scrollbar {
    width: 4px;         /* 세로 스크롤바 너비 */
    height: 4px;        /* 가로 스크롤바 높이 */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* Firefox용 스크롤바 스타일 */
html {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* 모든 요소에 커스텀 스크롤바 적용 */
* {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

/* default */
#wrapper .section {padding: 60px 0 80px;}
#wrapper .container {max-width:1400px; padding:0;}
#bo_cate h2 { font-size:32px;text-align:center; margin-top:4px; display: none;}
#bo_btn_top {margin:24px 0 16px; display:flex; align-items:center; justify-content:space-between;}
#bo_btn_top .btn_bo_user,
.btn_bo_user {display:flex; align-items:center; justify-content:flex-end; gap:8px;}
.btn_bo_user li a.btn-admin,
.btn_bo_user li a.btn-write,
.btn_bo_user li button.btn-search,
.btn_bo_user li button.btn-delete,
#bo_btn_top .btn_bo_user li .btn-admin,
#bo_btn_top .btn_bo_user li .btn-write,
#bo_btn_top .btn_bo_user li .btn-delete,
#bo_btn_top .btn_bo_user li button.btn-search {width:40px; height:40px; font-size:20px; color:var(--primary); background-color: var(--bg-primary-10); border-radius: 12px; transition: 0.3s;}
#bo_btn_top .bo_list_total {display:inline-block; margin-right:8px;}
.btn_bo_user li .btn-write:hover,
.btn_bo_user li .btn-admin:hover,
.btn_bo_user li .btn-delete:hover,
.btn_bo_user li .btn-search:hover { color:#fff; background-color: var(--primary); transition:0.3s;}
.btn-send {
    display:flex; 
    text-align:center; 
    justify-content:center;
    position: relative;
    display: block;
    background-color: #0f0f0f;
    border: 1px solid #0f0f0f;;
    padding: 8px 24px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    border-radius: 99px;
    overflow: hidden;
    z-index: 2;
    transition: .2s ease-out;
}
.btn-send:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #00a1e4; 
    transform: translateX(-102%);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: max(calc(99px * var(--base-ratio)), calc(calc(99 / var(--base-size)) * var(--base-percent)));
    transition: .2s ease-out;
    z-index: -1;
}
.btn-send:hover {
    color: #fff;
    transform: translateY(-2px);
}
.btn-send:hover:hover:before {
    transform: translateX(0);
}

#bo_cate_ul {
    display: flex;
    gap: 8px;
    margin-top: 40px;
}
#bo_cate_ul li a {
    display: block;
    padding: 8px 16px;
    overflow: hidden;
    z-index: 2;
    transition: .2s ease-out;
    box-sizing: border-box;
    border: 1px solid #e3e9ef;
    position: relative;
    border-radius: 99px;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 500;
    line-height: 1.3;
    color: #434a57;
    white-space: nowrap;
}
#bo_cate_ul li a:before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    transform: translateX(-102%);
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 99px;
    transition: .2s ease-out;
    z-index: -1;
}
#bo_cate_ul li a:hover{color:#fff;}
#bo_cate_ul li a:hover:before{transform:translateX(0);}
#bo_cate_ul li.active a{color:#fff;}
#bo_cate_ul li.active a:before{transform:translateX(0);}
#qa_content {
    display: block;
    width: 100%;
    padding: 0.825rem 1rem;
    font-size: calc(var(--body-font-size) * 0.875);
    font-weight: 400;
    line-height: 1.4;
    color: var(--body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-clip: padding-box;
    border: var(--border-width) solid var(--gray-400);
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease-in-out;
}
#bo_cate_ul li a#bo_cate_on {background-color:var(--primary); color:#fff;}
#bo_list_total {padding-top: 16px;}

/* modal */
.modal-open {padding-right:0;}


/* 약관  */
#ctt {margin:0 auto;padding:0;background:#fff; max-width: 100%; padding: 80px min(4.166vw, 80px);}
#ctt header h1{display:block;margin-bottom:24px;color:#010208;font-size:24px;text-align:left;font-weight:500;}
#ctt_con {padding:0;}
.ctt_admin {position:absolute;  right: min(4.166vw); top:60px; z-index:10; transition:0.3s;}
.ctt_admin a {padding:8px 24px;}
.ctt_admin a i {display:none;}
.ctt_admin a .sound_only {position:relative; font-size:16px; color:#00a1e4;  font-weight:400; line-height:1; width:auto; height:auto;}
.ctt_admin a:hover .sound_only {color:#fff;}

.info-box{background-color:#f2f4f5;padding:20px;margin-bottom:24px;}
#ctt_con .info-box ul{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;}
.privacy-index{margin-bottom:0;}
#ctt_con .info-box ul li{width:33.333%;white-space:nowrap;font-size:15px; color:#010208;line-height:1.4; word-break:keep-all;}

.privacy-index li{margin:4px 0 0;}
#ctt_con p {margin:8px 0; line-height:1.4; word-break:keep-all; font-size: 16px;}
#ctt_con h6 {margin-top:24px;font-size:16px;color:#010208;line-height:1.4;font-weight:500;}
#ctt_con ul {padding:0;}
#ctt_con ol {padding:0;;margin:16px 0 0 16px;}
#ctt_con ol li{margin-top:8px; line-height:1.4; word-break:keep-all; font-size: 16px;}
#ctt_con .table{border-top:1px solid rgba(0,0,0,0.1);margin-top:8px; width:100%;}
#ctt_con .table th{background-color:#f2f4f5;color:#080c05;font-weight:500;white-space:nowrap;padding:8px 16px;}
#ctt_con .table td{padding:8px 16px;}
a.btn_admin, .btn_admin {color:var(--primary) !important; background-color: rgba(var(--primary-rgb), 0.1) !important;}
.btn_admin:hover, a.btn_admin:hover {background-color: var(--primary) !important;}

/* scroll down */
.c-scrolldown {width:1px;height:60px;position:absolute;bottom:48px;left:0;right:0;margin:0 auto;}
.c-scrolldown .c-line {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%);
    background-position: 0 -60px;
    background-size: 100% 200%;
    animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}  
.c-scrolldown:after {
    content: "Scroll Down";
    position: absolute;
    bottom: -24px;
    color: #fff;
    font-size: 12px;
    display: block;
    z-index: 10;
    white-space: nowrap;
    width: 70px;
    margin-left: -35px;
}
@keyframes scrolldown {
    0%{background-position:0 -60px;}
    75%{background-position:0 0;}
    100%{background-position:0 60px;}
}


/* 고객문의 */
.customer .sub-visual {position:relative; width:100%; height:600px; overflow:hidden; background-color:#000;}
.customer .sub-visual .visual-img {position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/bg/customer-visual.gif) no-repeat 100% 0; background-size:cover;}
.customer .sub-visual .visual-title {position:relative;width:100%;height:100%;padding:0 80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;color:#fff;}
.customer .txt_wrap{width:50%;padding:80px;display:flex;align-items:center;justify-content:center;flex-direction:column;}
.customer #contactForm .btn-area input[type=checkbox]{display:none;}
.customer #contactForm .btn-area{position:relative;display:flex;align-items:center;}
.customer #contactForm .btn-area .btn-reset{position:absolute;right:0;display:inline-block;font-size:16px;color:#080c05;transition:0.2s;}
.customer #contactForm .btn-area .btn-reset:hover{text-decoration:underline;}
.customer #contactForm .btn-area .btn-text{display:inline-block;font-size:16px;color:#080c05;transition:0.2s;margin:-4px 8px 0;}
.customer .checkbox{width:25px;height:25px;border-radius:50%;border:2px solid #b7bec5;display:flex;justify-content:center;align-items:center;cursor:pointer;padding:3px;transition:0.3s all;flex-shrink:0;}
.customer .checkbox svg{width:20px;height:20px;}
.customer .check-input:checked + .checkbox{background:#00a1e4; border:2px solid #00a1e4; }
.customer .check-input:checked + .checkbox svg path{stroke-dashoffset:500;stroke-dasharray:500;stroke:#fff;stroke-width:3;animation:check 4s forwards;}
.customer .checkbox::before{content:"";position:absolute;border-radius:50%;transform:scale(0);display:block;width:60px;height:60px;background:#fff;z-index:-1;}
.customer .check-input:checked + .checkbox::before{animation:ripple 0.3s;}
@keyframes check{
    to{stroke-dashoffset:0;}
}
@keyframes ripple {
    to{transform:scale(1);}
}


/* 문의하기 */
.all_chk input[type="checkbox"]#chkall,
.td_chk.chk_box input[type="checkbox"].selec_chk {opacity:0; position:absolute;}
.qa-visual {position:relative; width:100%; height:300px; background:#000 url(../images/bg_qna.gif) no-repeat 100% 0; background-size: auto 100%;}
.qa-visual .container-inner {position:relative; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; gap:24px;}
.qa-visual .container-inner h2 {display:block; color:#fff; font-size:32px; font-weight:500;}
.qa-visual .container-inner p {display:block; color:rgba(255,255,255,0.8); font-size:18px; word-break:keep-all; font-weight:400;}
table {min-width: 1000px;}
#bo_cate {position:relative; width:100%; margin:0; padding:0;}
.btn_confirm.write_div #btn_submit:hover {color:inherit; background-color:inherit; transform:translateX(2px); transition: 0.3s;}
.ai-download:before {content:"\f177";color:#121519;font-size:20px;margin-left:8px;}
#fqalist .td_stat .txt_rdy {display:inline-block; padding:4px 8px; border-radius:8px; background-color:rgba(var(--primary-rgb), 0.1); color:var(--primary); font-size:14px;}
#fqalist .td_stat .txt_done {display:inline-block; padding:4px 8px; border-radius:8px; background-color:var(--gray-900); color:#fff; font-size:14px;}
#bo_list .table-responsive .table thead th {text-align:center;}
/* 카테고리 반응형 처리 */
#bo_cate_mobile{display:none;}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1400px) {
    .table-area {width:100%; overflow-x:auto;} 
    #ctt .table-area .table tbody th {max-width: 200px;}
} /* max 1400 */

@media screen and (max-width:1200px) { 
    section {padding:40px 0;}
    .container {padding:0;}
    #ctt_con .info-box ul li {width:50%; white-space:normal;}
} /* max 1200 */


/* 1080px 이하에서 Swiper 활성화 */
@media (max-width: 1080px) {
    #bo_cate_desktop {
        display: none;
    }
    
    #bo_cate_mobile {
        display: block;
        margin: 40px 0 24px;
    }
    
    #bo_cate_mobile .swiper-wrapper {
        align-items: center;
    }
    
    #bo_cate_mobile .swiper-slide {
        width: auto;
        text-align: center;
        font-size: 14px;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 4px;
        border-radius: 20px;
        transition: all 0.3s ease;
    }
    
    #bo_cate_mobile .swiper-slide a {
        display: block;
        padding: 8px 16px;
        overflow: hidden;
        z-index: 2;
        transition: .2s ease-out;
        box-sizing: border-box;
        border: 1px solid #e3e9ef;
        position: relative;
        border-radius: 99px;
        font-size: 14px;
        line-height: 1;
        letter-spacing: -0.02em;
        font-weight: 500;
        line-height: 1.3;
        color: #434a57;
        white-space: nowrap;
    }
    
    #bo_cate_mobile .swiper-slide.swiper-slide-active a,
    #bo_cate_mobile .swiper-slide:hover a {
        background-color: var(--primary);
        color: #fff;
    }    
} /* 1080*/

@media screen and (max-width: 1024px) {    
    h1, .h1 {font-size:32px;}  
    h2, .h2 {font-size:28px;}  
    h3, .h3 {font-size:24px;}  
    h4, .h4 {font-size:20px;}  
    h5, .h5 {font-size:18px;}  
    h6, .h6 {font-size:16px;}   
    #bo_cate ul{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;align-items:center;}
    .btn-home {top:16px; right:16px; width:40px; height:40px;}
    .table-responsive {margin:0 -24px 0 0; padding:0;}
    .table-responsive table {margin:0; padding:0;}
    .qa-visual {height:200px; background:#000 url(../images/bg_qna.gif) no-repeat 110% 0; background-size:auto 100%;}
    .qa-visual .container-inner h2 {font-size:28px;}
    .qa-visual .container-inner p {font-size:16px;}
} /* max 1024 */

@media screen and (max-width: 992px) {
    #ctt {padding: 40px min(4.166vw, 80px);}
    .ctt_admin{top:40px;}


    .mobile-only {display:block !important;}
    .pc-only {display:none !important;}
    .container-fluid {position:relative; padding:0 16px;}
    .container-fluid .container {padding:0;}
    .row {width:100%; margin:0 auto;}   
    .video-controls{position:absolute;z-index:10;bottom:24px;right:16px;} 
    .lt_wr{width:33.33%;padding:8px;}  
    .navbar-expand-lg .navbar-nav .nav-link{padding:4px 8px;}
    #wrapper{padding:0;}
    #bo_list{margin-bottom:0;}
    #bo_list .pg_wrap{margin-top:20px;transform:scale(0.8);}
    .bo-bottom-wrap {margin-bottom:0;}
    .bo-bottom-wrap .board-btn.list-bottom-left {display:none;}
    .input-group {max-width:100%;}
    .page-tabs {top:60px;}
    #certificate .row .col-md-4 {padding:0;}
    .login-wrap{flex-direction:column;flex-wrap:wrap;justify-content:flex-start;}
    .login-wrap .left-area{width:100%;max-height:30%; padding:24px;}
    .login-wrap .right-area{width:100%;max-height:70%; padding:24px;}
    .login-wrap .right-area .mt-auto {margin-top: 24px !important}
    .login-wrap .logo {width:180px;}
    .login-wrap h3{margin-top:20px;font-size:20px;}
    .login-wrap ul.mt-4 {margin-top:16px !important}
    .login-wrap .list-group-item {padding:4px;}
    .login-wrap h1 {font-size:28px; letter-spacing:0; margin:0 0 24px;}
    .login-wrap #login_fs {padding:0;};

} /* max 992 */

@media screen and (max-width: 768px) {   
    .fs-base {font-size:14px !important;}    
    #ctt header h2 {font-size:20px;}
    .ctt_admin a .sound_only {font-size:14px;}
    #bo_cate_mobile{display:block;margin:24px 0 24px;}
    #ctt .table-area .table col{width:auto !important;}
} /* 768 */

@media screen and (max-width: 600px) {
    .container {padding:0 20px;}
    [class^="col"] {padding:0;}
    .mb-5{margin-bottom:1rem !important;}
    .pt-2{padding-top:0 !important;}
    .pb-2{padding-bottom:0 !important;}
    .login-wrap .left-area{max-height:20%;}
    .login-wrap .right-area{max-height:80%;}
    .login-wrap .logo {width:140px; margin-top:16px}
    .login-wrap h3{margin-top:16px; font-size:18px !important;}
    .login-wrap .list-group {display: none;}
    .login-wrap #login_fs .mb-3 {margin-bottom: 0 !important;}
    .login-wrap #login_fs .mb-4 {margin-bottom: 16px !important;}
    .btn.btn-login {padding: 8px 20px; font-size: 16px;}
    .login-wrap .text-nav.btn.btn-icon.bg-white {width:36px;height:36px;left:0 !important;font-size:20px; z-index:1000 !important;}
    #sns_login .sns-icon {height:44px !important; line-height:44px !important; font-size:16px;}
    body {font-size:14px;}
    .fs-24 {font-size:20px !important;}
    .g-4,.gy-4{--ar-gutter-y:0 !important;}
    section p{word-break:keep-all;margin:0 auto;}
    .lt_wr{width:50%;padding:8px;}
    .pic_lt li a{font-size:14px;margin-top:8px;}
    h1,.h1{font-size:24px !important;}
    h2,.h2{font-size:24px !important;}
    h3,.h3{font-size:24px !important;}
    h4,.h4{font-size:20px !important;}
    h5,.h5{font-size:18px !important;}
    h6,.h6{font-size:16px !important;}
    .fs-lg {font-size:16px !important;}
    #sch_res_detail{display:flex;flex-direction:column;width:100%;}
    #sch_res_detail select {width:100%; margin-bottom:8px;}
    #sch_res_board a{display:block;padding:4px 8px;}
    #ctt_con .info-box ul li{width:100%;white-space:normal;font-size:15px;word-break:keep-all; margin:2px 0}
    #container_title:after {display:none;}
    #container_title {margin:40px auto 0;}
    #contactForm .col-lg-12 {padding:0;}
    #contactForm .col-lg-12 + .col-lg-12 {margin-top:8px}
    /* #ctt_con .table th {width:30% !important;} */
    #ctt header h1 {font-size:20px !important;}
    .qa-visual{height:200px;}
    .qa-visual .container-inner p {display: none;}
    #fwrite .row.g-4 {--gutter-y: 8px;}
    #fwrite .btn_confirm {text-align:center;}
    #fwrite #qa_content {height: 140px !important}
    #wrapper .section {padding:20px 0 40px;}
} /* max 600 */

@media screen and (max-width: 450px) {  
    .lt_wr{width:50%;padding:8px;}
    .form-control-lg {padding:10px 16px;font-size:14px;border-radius:12px;}  
    .login-wrap .login-copy {margin: 20px auto !important;}
    .qa-visual{height:100px;}


} /* max 450 */