@charset "UTF-8";

@import url('../fonts/Pretendard/pretendard.css');
@import url('../fonts/RemixIcon/remixicon.css');
@import url('../fonts/NotoSans/notoSansKr.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:#5b9845; border:1px solid #5b9845;}
#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 */
.btn-grad {
    color: #ffffff !important;   
    background: linear-gradient(150deg, #5b9845 0%, #97c74e 50%, #5b9845 100%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-size: 260% 100%;
    background-position: right bottom;
    border: 0;
    line-height: 1.92;    
}
.btn-grad:hover {color:#ffffff;background-position:left bottom; transform: translateY(-0.3rem);}
.form-floating > .form-control,.form-floating > .form-control-plaintext{padding:1rem 1rem;}
.w-md {min-width:160px !important;}
.custom-btn {
    color: #fff;
    border-radius: 0;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
}
.custom-btn span i {display:inline-block;vertical-align:middle;margin-left:8px;}
.btn-3 {background:#5b9845; width:180px;height:48px;line-height:46px;padding:0;border:none;text-align:center;padding:0;border:none;}
.btn-3 span {position:relative;display:block;width:100%;height:100%;}
.btn-3:before,
.btn-3:after{position:absolute;content:"";right:0;top:0;background:#5b9845;transition:all 0.3s ease;}
.btn-3:before{height:0%;width:2px;}
.btn-3:after{width:0%;height:2px;}
.btn-3:hover{background:transparent;box-shadow:none;}
.btn-3:hover:before{height:100%;}
.btn-3:hover:after{width:100%;}
.btn-3 span:hover{color:#5b9845;}
.btn-3 span:before,
.btn-3 span:after {position:absolute;content:"";left:0;bottom:0;background:#5b9845;transition:all 0.5s ease;}
.btn-3 span:before{width:2px;height:0%;}
.btn-3 span:after{width:0%;height:2px;}
.btn-3 span:hover:before{height:100%;}
.btn-3 span:hover:after{width:100%;}

.btn-text {display:inline-block; padding:0; border:0; color:#080c05; background-color:transparent;}
.btn-text:hover {padding:0; border:0; color:#5b9845; text-decoration:underline;}

/* 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; }
}

/* header */
header {position:relative; width:100%; padding:0;}
header.main .fixed-top {padding:0;}
header .navbar .container-fluid {position:relative; width:100%; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; padding:0 80px;}
header .navbar .navbar-brand {width:140px; height:70px; background:url(../img/logo/winecotec.svg) no-repeat 0 center; background-size:100% auto; transition:0.5s;}
header.main .navbar .navbar-brand {width:160px; height:80px; background:url(../img/logo/winecotec-white.svg) no-repeat 0 center; background-size:100% auto; transition:0.5s;}
.btn.btn-login {height:100%; padding:12px 20px; font-weight:300 !important; border:0;}
.btn.btn-login i {font-size:16px;}
.btn.btn-login:hover {background-color:#5b9845; border:0;}
.btn.btn-login i[class^="ri-"] {font-size: 24px;}
header .hd_login .profile-img {width:50px;height:50px;padding:0; background-color:#92a68f;;flex-shrink:0;color:rgba(255,255,255,1); font-size:20px;text-align:center;line-height:44px;;}
header .hd_login .user {color:#080c05;}
header.main .hd_login .profile-img {width:50px;height:50px;padding:0; background-color:rgba(255,255,255,0.2);flex-shrink:0;color:rgba(255,255,255,0.8); font-size:20px;text-align:center;line-height:44px;;}
header.main .hd_login .user {color:#fff;}
.hd_login .profile-img i {color:inherit;}
header.main .navbar.navbar-stuck {border-bottom:1px solid rgba(0,0,0,0.1)}
header.main .navbar.navbar-stuck .navbar-nav .nav-link {color:#080c05}
header.main .navbar.navbar-stuck .hd_login .profile-img {width:50px;height:50px;padding:0; background-color:#92a68f;flex-shrink:0;color:rgba(255,255,255,1); font-size:20px;text-align:center;line-height:44px;;}
header.main .navbar.navbar-stuck .hd_login .user {color:#080c05;}
header .btn-sitemap {position:relative;order:4;border:0;width:40px;height:40px;margin-left:24px;padding:2px;}
header .btn-sitemap span {position:relative;display:block;height:2px;width:36px;border-radius:1px;background-color:#fff;transition:all .2s ease-in-out;}
header .btn-sitemap span:before,
header .btn-sitemap span:after {position:absolute;content:"";height:2px;width:36px;left:0; border-radius:2px;background-color:#fff;transition:all .2s ease-in-out;}
header .btn-sitemap span:before {top:-10px;visibility:visible;}
header .btn-sitemap span:after {top: 10px;}
header .btn-sitemap:hover span,
header .btn-sitemap:hover span:before,
header .btn-sitemap:hover span:after {background-color:#5b9845;}
header .btn-sitemap.open span {background-color:transparent;}
header .btn-sitemap.open span:before {transform:rotate(45deg) translate(7px, 7px);opacity:1;}
header .btn-sitemap.open span:after {transform: rotate(-45deg) translate(7px, -7px);}
header.main .navbar-expand-lg .navbar-nav .nav-link {color:#fff; font-size:18px;}
header.main .navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item {font-size:16px;}
header.main .navbar-expand-lg.navbar-stuck .navbar-nav .nav-link {color:#080c05;}
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap {color:#080c05;}
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap span,
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap span:before,
header.main .navbar-expand-lg.navbar-stuck .btn-sitemap span:after {background-color:#080c05;}
header.main .navbar.navbar-stuck .navbar-brand {width:130px; height:70px; background:url(../img/logo/winecotec.svg) no-repeat 0 center; background-size:100% auto;}

/* sitemap allNav */
#sitemap .btn-close {background:none;line-height:1;background:none;font-size:28px;padding:4px;color:#080c05;opacity:0.8;transition:0.3s; position:absolute;top:20px;right:20px;}
#sitemap .btn-close:hover {opacity:1;}
#sitemap .login-wrap {justify-content:flex-start;}
#sitemap .login-wrap .dropdown a {color:rgba(8, 12, 5, 0.8);}
#sitemap .login-wrap .dropdown a:hover {color:rgba(8, 12, 5, 1);}
#sitemap .login-wrap .dropdown a .profile-img {width:40px;height:40px;background-color:#b7bec5;color:#fff;text-align:center;line-height:38px;font-size:18px;flex-shrink:0;}
#sitemap .nav {display:flex;flex-direction:column;}
#sitemap .nav a {transition:0.3s;}
#sitemap .nav > li {display:flex; flex-direction:column; margin:40px 0;}
#sitemap .nav > li > a {display:block; color:rgba(8, 12, 5, 1); font-size:18px; font-weight:500;}
#sitemap .nav > li > ul {display:flex;flex-direction:column; margin-top:20px}
#sitemap .nav > li > ul > li {margin:4px 0;}
#sitemap .nav > li > ul > li a {display:block; color:rgba(8, 12, 5, 0.8); font-size:16px; font-weight:400;}
#sitemap .nav > li > ul > li a:hover {color:#5b9845;}
#sitemap .nav > li > ul > li > ul {padding:4px;}
#sitemap .nav > li > ul > li > ul > li {margin:2px 0;}
#sitemap .nav > li > ul > li > ul > li i {display:inline-block; vertical-align:middle; font-size:16px;}
#sitemap .nav > li > ul > li > ul > li a {position:relative; display:inline-block; vertical-align:middle; font-size:14px; color:rgba(8, 12, 5, 0.8); font-weight:400;}
#sitemap .nav > li > ul > li > ul > li a:hover {color:rgba(8, 12, 5, 1); text-decoration:underline;}
/* #sitemap .nav > li > ul > li > ul > li a:before {content:""; position:absolute; left:0; top:10px; width:6px; height:1px; background-color:rgba(8, 12, 5, 0.8);} */

/* footer */
footer {position:relative; width:100%; padding:40px 80px; color:rgba(255,255,255,0.7); background:#080c05; font-size:14px;}
footer .row.d-flex {align-items:flex-end; justify-content:space-between; width:100%; margin:0; padding:0;}
footer .row.d-flex [class^="col-"]:last-child {text-align:right; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-end; padding-right:120px;}
footer .row.d-flex [class^="col-"]:last-child .dropdown {width:200px;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item {position:relative; padding-right:40px;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item + .dropdown-item {border-top:1px solid rgba(255,255,255,0.1);}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item > * {display:inline-block; vertical-align:middle;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item .logo {width:32px; height:32px; margin-right:8px; text-align:center; background-color:#fff; border-radius:50%; overflow:hidden;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item .logo img {width:70%; margin:4px auto;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item:first-child .logo img {width:60%; margin:4px auto;}
footer .row.d-flex [class^="col-"]:last-child .dropdown .dropdown-item i {position:absolute; right:16px; top:16px;}
footer [class^="col-"] span, 
footer [class^="col-"] a.tel {display:inline-block; color:rgba(255,255,255,0.7); margin:2px 0;}
footer [class^="col-"] .adress {display:block; color:rgba(255,255,255,0.7); margin:2px 0;}
footer a.foot-logo {display:block; width:100%; margin-bottom:36px;}
footer a.foot-logo img {max-width:160px;}
footer .row.d-flex [class^="col-"] span.first {display:block; font-size:18px; font-weight:400; margin-bottom:16px;}
footer .copy {display:block; margin-top:24px}
footer span.business-number:before,
footer a.tel + a.tel:before {content:""; display:inline-block; margin:0 8px; width:1px; height:12px; background-color:rgba(255,255,255,0.4);}
footer a.mail {display:block; color:rgba(255,255,255,0.7); margin:2px 0;}
footer span i,
footer a i {display:inline-block; vertical-align:middle; font-size:16px; color:inherit;}
footer .sns-area {position:relative; width:100%; justify-content:flex-end; margin:24px 0;}
footer .sns-area a {display:inline-block; padding:8px; margin:8px; font-size:16px; text-align:center; background-color:rgba(255,255,255,0.1); line-height:1;}
footer .sns-area a i {display:block; padding:0; color:#fff; font-size:16px; font-weight:normal;}
footer .sns-area a:hover {background-color:#fff; color:#080c05;}
footer .sns-area a:hover i {color:inherit;}
footer .foot-menu a {display:inline-block; color:rgba(255,255,255,0.7); font-size:14px; transition:0.3s;}
/* footer .foot-menu a + a:before {content:""; display:inline-block; margin:0 8px; width:1px; height:12px; background-color:rgba(255,255,255,0.4);} */
footer a.mail:hover,
footer [class^="col-"] a.tel:hover,
footer .foot-menu a:hover {text-decoration:underline; color:#fff;}
footer .business-inquiry {display:inline-block; margin-left:4px; font-size:12px; padding:2px 8px; border-radius:4px; background-color:rgba(255,255,255,0.1);}
.copy-notification {position:absolute;top:16px;right:-124px;font-size:14px;letter-spacing:-1px;color:#fff;display:none;}
footer span i,
footer a i {display:inline-block; vertical-align:middle; font-size:16px; color:inherit;}
footer .sns-area {position:relative; width:100%; justify-content:flex-end; margin:24px 0;}
footer .sns-area a {display:inline-block; padding:8px; margin:8px; font-size:16px; text-align:center; background-color:rgba(255,255,255,0.1); line-height:1;}
footer .sns-area a i {display:block; padding:0; color:#fff; font-size:16px; font-weight:normal;}
footer .sns-area a:hover {background-color:#fff; color:#080c05;}
footer .sns-area a:hover i {color:inherit;}


/* quick_menu */
.quick_wrap{
    position:fixed;     
    bottom:80px; 
    right:80px; 
    width:51px; 
    padding-top:0; 
    z-index:11;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;  
    -moz-transition: 0.4s ease;  
    -ms-transition: 0.4s ease;  
    -o-transition: 0.4s ease;
}
.quick_wrap.scrolled {bottom:0;}
.open .quick_wrap {display:none;}
.quick_menu_wrap {
    position:absolute; 
    bottom:7.8rem; 
    right:0%; width:0; 
    height:0; 
    overflow:hidden;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
aside .quick_menu_wrap {bottom:44px;}
.quick_wrap.open .quick_menu_wrap{
    width:auto; height:auto;
}
.quick_menu_list{
    position:relative; width:100%; margin:4% 0; opacity:0;
    transform: translateY(30%);
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
}
.quick_wrap.open .quick_menu_list{
    opacity:1; 
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
}
.quick_wrap.open .quick_menu_list.quick_menu_li_insta{
    transition-delay: 0.9s;
    -webkit-transition-delay: 0.9s;
    -moz-transition-delay: 0.9s;
    -ms-transition-delay: 0.9s;
    -o-transition-delay: 0.9s;
}
.quick_wrap.open .quick_menu_list.quick_menu_li_blog{
    transition-delay: 0.7s;
    -webkit-transition-delay: 0.7s;
    -moz-transition-delay: 0.7s;
    -ms-transition-delay: 0.7s;
    -o-transition-delay: 0.7s;
}
.quick_wrap.open .quick_menu_list.quick_menu_li_blog2{
    transition-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    -moz-transition-delay: 0.5s;
    -ms-transition-delay: 0.5s;
    -o-transition-delay: 0.5s;
}
.quick_wrap.open .quick_menu_list.quick_menu_li_kakao{
    transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
}
.quick_menu_list > a {display:flex; justify-content:flex-end; align-items:center; overflow:hidden; color:#fff;}
.quick_menu_list > a > p {
    margin-right:6px; 
    margin-bottom:0;
    width:100px; 
    height:42px; 
    padding:0 24px;
    color:#fff; 
    font-size:14px;
    background-color:#5b9845; 
    border-radius:21px;
    text-align:center; 
    line-height:40px; 
    font-weight:300;
    opacity:0; 
    visibility:hidden; 
    transform:translateX(20%) translateZ(0); 
    -webkit-transform:translateX(20%) translateZ(0); 
    -moz-transform:translateX(20%) translateZ(0); 
    -ms-transform:translateX(20%) translateZ(0); 
    -o-transform:translateX(20%) translateZ(0); 
    transition:all 0.6s ease-in-out;
    -webkit-transition:all 0.6s ease-in-out; 
    -moz-transition:all 0.6s ease-in-out; 
    -ms-transition:all 0.6s ease-in-out; 
    -o-transition:all 0.6s ease-in-out;
}
.quick_menu_list > a:hover > p {
    opacity:1; visibility:visible; 
    transform:translateX(0%) translateZ(0); 
    -webkit-transform:translateX(0%) translateZ(0);  
    -moz-transform:translateX(0%) translateZ(0);  
    -ms-transform:translateX(0%) translateZ(0);  
    -o-transform:translateX(0%) translateZ(0);  
}
.quick_menu_list > a {}
.quick_menu_list > a i {position:relative; display:block; width:50px; height:50px; color: #080c05; font-size:24px; text-align:center; line-height:50px; background-color:#f8f8f8; border-radius:50%; flex-shrink:0;}
.quick_menu_list > a:hover i {color:#5b9845;}
.quick_menu_list > a i.kakao-channel {background:#f8f8f8 url(../img/kakao-channel.svg) no-repeat 50%; background-size:36px;}
.quick_menu_list > a:hover i.kakao-channel {display:inline-block; background:#080c05 url(../img/kakao-channel-on.svg) no-repeat 50%; background-size:50px; background-size:36px;}
.quick_menu_list > a i.kakao-talk {background:#f8f8f8 url(../img/kakao-Talk.svg) no-repeat 50%; background-size:28px;}
.quick_menu_list > a:hover i.kakao-talk {display:inline-block; background:#080c05 url(../img/kakao-Talk-on.svg) no-repeat 50%; background-size:50px; background-size:28px;}
.quick_btn_wrap {position:relative; width:100%;}
.quick_btn {
    position:relative; 
    width:50px; 
    height:50px; 
    padding:0; 
    margin:0 auto; 
    border:0; 
    border-radius:100%; 
    background-color: 
    transparent; 
    display:block; 
}
.quick_wrap .quick_btn > i[class^="ri-"] {
    position: absolute;
    top:50%;
    left:50%;
    color:#fff; 
    font-size:28px;
    transition:0.3s;
    -webkit-transition:0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transform: translate(-50%, -50%);
    opacity: 1;
}
.open_btn {    
    position:relative; 
    width:100%; 
    height:100%; 
    text-align:center; 
    margin-left:auto;
    margin-right:auto;
    transform: rotate(0deg) translateZ(0); 
    -webkit-transform: rotate(0deg) translateZ(0); 
    -moz-transform: rotate(0deg) translateZ(0); 
    -ms-transform: rotate(0deg) translateZ(0); 
    -o-transform: rotate(0deg) translateZ(0); 
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    opacity: 0;
}
.open_btn > div { 
    position:absolute; 
    display:inline-block; margin:0;
    background-color:#fff; 
    transform: translate(-50%,-50%) translateZ(0); 
    -webkit-transform: translate(-50%,-50%) translateZ(0); 
    -moz-transform: translate(-50%,-50%) translateZ(0); 
    -ms-transform: translate(-50%,-50%) translateZ(0); 
    -o-transform: translate(-50%,-50%) translateZ(0); 
}
.quick_wrap .open_btn > .bounce1 { top:50%; left:50%; width:50%; height:2px;}
.quick_wrap .open_btn > .bounce2 { top:50%; left:50%; width:2px; height:50%;}
.quick_wrap.open .quick_btn > i[class^="ri-"] {opacity:0; transition:0.3s;}
.quick_wrap.open .open_btn { 
    opacity:1;
    transform: rotate(45deg) translateZ(0); 
    -webkit-transform: rotate(45deg) translateZ(0); 
    -moz-transform: rotate(45deg) translateZ(0); 
    -ms-transform: rotate(45deg) translateZ(0); 
    -o-transform: rotate(45deg) translateZ(0); 
}
.quick_btn {opacity:1; background-color:#5b9845;}
.quick_wrap.open .quick_btn {opacity:1; background-color:#080c05;}
.quick_top_btn {
    position:relative; 
    width:51px; 
    height:51px; 
    padding:0; 
    margin:0; 
    border:0; 
    background-color: transparent; 
    display:block; 
    margin-top:15px; 
    margin-left:auto; 
    margin-right:0; 
    opacity:1; 
    visibility:visible;
    transition: opacity 0.3s ease; 
    -webkit-transition: opacity 0.3s ease; 
    -moz-transition: opacity 0.3s ease; 
    -ms-transition: opacity 0.3s ease; 
    -o-transition: opacity 0.3s ease; 
}

/* 검색 */
.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% #5b9845;border-color:#5b9845;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:#5b9845;}
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;}
#bo_cate h2 { font-size:32px;text-align:center; margin-top:4px;}
#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_bo_user li button,
#bo_btn_top .btn_bo_user li a,
#bo_btn_top .btn_bo_user li button {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 a:hover,
.btn_bo_user li button:hover,
#bo_btn_top .btn_bo_user li a:hover,
#bo_btn_top .btn_bo_user li button: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: #5b9845;
    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;}
#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:50%; top:60px; z-index:10; transition:0.3s; margin-right: -600px;}
.ctt_admin a {padding:8px 24px;}
.ctt_admin a i {display:none;}
.ctt_admin a .sound_only {position:relative; font-size:16px; color:#5b9845; 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;}
#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;}
#ctt_con .table{border-top:1px solid rgba(0,0,0,0.1);margin-top:8px;}
#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;}

/* 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;}
}
/* badge */
.badge-group {display:flex; flex-wrap:wrap;}
.badge-dark {display:inline-block; padding:8px 16px; margin:2px; background-color:rgba(8, 12, 5, .1); color:rgba(8, 12, 5, .8); font-size:13px;}
.badge-primary {display:inline-block; padding:4px 8px; margin:2px; background-color:rgba(35, 153, 71, .1); color:rgba(35, 153, 71, 1); font-size:12px;}


/* 고객문의 */
.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:#5b9845;border:2px solid #5b9845;}
.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);}
}


/* 문의하기 */
input[type="checkbox"] {opacity:0; position:absolute;}
table {min-width: 1000px;}
#bo_cate {position:relative; width:100%; margin:0; padding:0;}
/* 카테고리 반응형 처리 */
#bo_cate_mobile {
    display: none;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Responsive
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1510px) { 
    header .navbar .container-fluid {padding:0 20px;}
    footer {padding:20px 80px 80px 20px;}
    .quick_wrap {right:20px;}
    .btn-scroll-top {right:20px;}    
} /* max 1510 */

@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;}
    .ctt_admin{top:55px;}    
    .table-responsive {margin:0 -24px 0 0; padding:0;}
    .table-responsive table {margin:0; padding:0;}
} /* max 1024 */

@media screen and (max-width: 992px) {
    .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;}
    a.btn_admin, .btn_admin {line-height:34px !important;}
    .ctt_admin a .sound_only {font-size:14px;}
    #bo_cate_mobile{display:block;margin:24px 0 24px;}

} /* 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;}
    #ctt{margin:8px 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;}
} /* 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;}

} /* max 450 */