@charset "utf-8";
/* CSS Document */

/*bootstrap styles*/
@import url("bootstrap.css");
/*bootstrap select*/
@import url("bootstrap-select5.css");
/*bootstrap slider*/
@import url("bootstrap-slider.min.css");
/*Reset*/
@import url("reset.css");
/*AOS*/
@import url("aos.css");
/*Swiper*/
@import url("swiper-bundle.min.css");
/*Owl*/
@import url("owl.carousel.min.css");
@import url("owl.theme.default.min.css");


@import url("sl-style.css");

/* Pretendard Font */
@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('../fonts/pretendard/woff2/Pretendard-Thin.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Thin.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('../fonts/pretendard/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-ExtraLight.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('../fonts/pretendard/woff2/Pretendard-Light.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Light.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../fonts/pretendard/woff2/Pretendard-Regular.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../fonts/pretendard/woff2/Pretendard-Medium.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../fonts/pretendard/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('../fonts/pretendard/woff2/Pretendard-Bold.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('../fonts/pretendard/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('../fonts/pretendard/woff2/Pretendard-Black.woff2') format('woff2'), url('../fonts/pretendard/woff/Pretendard-Black.woff') format('woff');
}

/* Suite Font */
@font-face {
	font-family: 'SUIT';
	font-weight: 100;
	src: url('../fonts/suit/SUIT-Thin.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 200;
	src: url('../fonts/suit/SUIT-ExtraLight.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 300;
	src: url('../fonts/suit/SUIT-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 400;
	src: url('../fonts/suit/SUIT-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 500;
	src: url('../fonts/suit/SUIT-Medium.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 600;
	src: url('../fonts/suit/SUIT-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 700;
	src: url('../fonts/suit/SUIT-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 800;
	src: url('../fonts/suit/SUIT-ExtraBold.woff2') format('woff2');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 900;
	src: url('../fonts/suit/SUIT-Heavy.woff2') format('woff2');
}


:root{
	--main-color1: #0469ff;
	--main-color2: #152433;
	--main-color3: #00326C;
    --main-color4: #151515;
    --main-color5: #e3f4ff;
    --main-color6: #cce3ff;
    --main-color7: #0071fe;
    --main-color8: #333333;
    --main-color9: #ffae00;
    --main-color10: #d2d2d2;
    --main-color11: #f5f8ff;
    --main-color12: #7d8896;
    --main-color13: #808080;
    --main-color14: #222222;
    --main-color15: #4b4b4b;
    --quick-color1: #277eff;
    --quick-color2: #ffb326;
    --company-color1: #1f1f21;
    --company-color2: #425163;
    --company-color3: #36a1fd;
    --company-color4: #0469ff;
    --company-color5: #092eb4;
    --company-color6: #d5ebff;
    --company-color7: #d3e5ff;
    --company-color8: #dae2ff;
    --company-color9: #188bea;
    --company-color10: #64b1f2;
    --company-color11: #579aff;
    --company-color12: #5d76d2;
    --company-color13: #efefef;
    --company-color14: #7d8896;
    --customer-color1: #f9f9f9;
    --customer-color2: #f2f2f2;
    --customer-color3: #eee;
    --customer-color4: #d9d9d9;
    --error-color: #f1f1f1;
    --sec-color1: #f5f8ff;
    --em-color: #ff361b;
	--area-wide-width: 1740px;
	--area-box-width: 1630px;
	--area-width: 1520px;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out;
}

html{
    font-size: 62.5%;
}

body,
header{
    min-width: 320px;
}

body{
    height: 100%;
    color: var(--main-color14);
    line-height: 1.4;
    letter-spacing: -0.5px;
    word-break: keep-all;
    font-size: 1.6rem;
    overflow-x: hidden;
}

*{
    font-family: 'Pretendard', Arial, '돋움', Dotum, sans-serif;
}

a{
    color: var(--bs-gray-800);
    text-decoration: none;
}

input:focus,
textarea:focus{
    border-color: var(--main-color1) !important;
}

.delay-01s{
    animation-delay: 0.1s;
}
.delay-015s{
    animation-delay: 0.15s;
}
.delay-02s{
    animation-delay: 0.2s;
}
.delay-025s{
    animation-delay: 0.25s;
}
.delay-03s{
    animation-delay: 0.3s;
}
.delay-04s{
    animation-delay: 0.4s;
}
.delay-05s{
    animation-delay: 0.5s;
}
.delay-1s{
    animation-delay: 1s;
}
.delay-1_05s{
    animation-delay: 1.5s;
}
.delay-2s{
    animation-delay: 2s;
}
.delay-2_05s{
    animation-delay: 2.5s;
}
.delay-2_01s{
    animation-delay: 2.1s;
}
.delay-3s{
    animation-delay: 3s;
}
.delay-3_05s{
    animation-delay: 3.5s;
}
.delay-3_07s{
    animation-delay: 3.7s;
}
.delay-4s{
    animation-delay: 4s;
}
.delay-4_05s{
    animation-delay: 4.5s;
}
.delay-4_07s{
    animation-delay: 4.7s;
}
.delay-5s{
    animation-delay: 5s;
}
.delay-5_05s{
    animation-delay: 5.5s;
}
.delay-5_07s{
    animation-delay: 5.7s;
}
.delay-6s{
    animation-delay: 6s;
}
.delay-6_02s{
    animation-delay: 6.2s;
}


.wrapper{
    width: 100%;
    min-width: 320px;
    position: relative;
}

.container{
    padding-left: 15px;
    padding-right: 15px;
}

.wrapper header{
    width: 100%;
    position: fixed;
    z-index: 999;
}

.hide-header{
    transform: translateY(-100%);
}

.tooltip.show{
    opacity: 1;
}

.tooltip-inner{
    background: #1c96d5;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{
    border-left-color: #1c96d5;
}


.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
    width: 210px;
}

.bootstrap-select > .dropdown-toggle{
    padding: 6px 12px;
	background: #fff;
    border: 1px solid #d9d9d9;
    outline: none !important;
    border-radius: 0;
    font-size: 1.4rem;
    color: var(--bs-gray-600);
}

.bootstrap-select .dropdown-toggle .filter-option{
    width: calc(100% - 8px);
}

.bootstrap-select .dropdown-toggle .filter-option,
.bootstrap-select .dropdown-menu li a,
.dropdown-menu li a{
    /* height: 20px; */
	position: relative;
	font-weight: 500;
    color: var(--bs-gray-600);
}

.bootstrap-select .dropdown-menu li a{
    font-size: 1.3rem;
}

.bootstrap-select .dropdown-toggle:after{
    width: 20px;
    height: 20px;
    margin: 0;
    background: url('../images/dropdown_arrow.svg') no-repeat 0 0 / 20px;
    -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: none;
}

.bootstrap-select .dropdown-toggle.show:after{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

footer .bootstrap-select .dropdown-toggle:after{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
}

footer .bootstrap-select .dropdown-toggle.show:after{
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.bootstrap-select .dropdown-toggle.show{
    border: 1px solid var(--main-color1) !important;
}

.bootstrap-select.open .dropdown-toggle .caret{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    background-position-y: -7px;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner{
    position: relative;
}

.dropdown-item.active,
.dropdown-item:active{
    background: var(--bs-gray-200);
}

.thumb-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}





/* HEADER */
.wrapper header{
    transition: transform 0.3s ease;
}

.wrapper header:hover .navbar-brand .logo-dark{
    display: none !important;
}
.wrapper header:hover .navbar-brand .logo-light{
    display: inline !important;
}

.wrapper header:hover .navbar-nav .nav-link{
    color: var(--main-color2) !important;
}

.wrapper header.top-header .background-blur,
.wrapper header.hide-header .background-blur{
    visibility: hidden;
    opacity: 0;
}

.wrapper header.show-header {
    transform: translateY(0);  /* 명시적 보임 상태 (기존 .hide-header와 대칭) */
}

.wrapper header.hide-header {
    transform: translateY(-100%);
    /* 기존 유지 */
}

.wrapper header.show-header .background-blur{
    visibility: visible;
    opacity: 1;
}

.wrapper header.show-header .navbar-nav .nav-link{
    color: var(--main-color2) !important;
}


.background-blur{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-white);
    transition: all 0.3s ease;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
}

.navbar{
    height: 100px;
    padding: 0;
}

.navbar .container{
    height: 100%;
}

.navbar-brand{
    display: flex;
    align-items: center;
    padding: 0;
    transition: all 0.5s ease;
}

.navbar-brand img{
    max-width: 100%;
    max-height: 100%;
}

.navbar-brand .logo-dark{
    display: none;
}

.navbar-collapse{
    justify-content: end;
}

#pcMenu,
.navbar-nav .nav-item{
    height: 100%;
}

/* #pcMenu{
    width: 70%;
} */

.wrapper header .navbar-nav .nav-item.nav-on .nav-link{
    color: var(--main-color1) !important;
}

.wrapper header .navbar-nav .nav-item.nav-on .nav-link:after{
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--main-color1);
}

.navbar-nav{
    height: 100%;
    align-items: center;
    justify-content: end;
    gap: 60px;
}

.navbar-nav > .nav-item > .child > .container > .offering-gnb{
    width: 985px;
    margin: 0 0 0 calc(100% - 985px);
}

.navbar-nav .nav-link{
    width: max-content;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bs-white);
}

.navbar-nav .nav-item .child{
    visibility: hidden;
    width: 100%;
    position: absolute;
    top: 100px;
    left: 0;
    padding: 30px 0;
    background: var(--bs-white);
    transition: all 0.3s ease;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    opacity: 0;
}

.navbar-nav .nav-item:hover .child{
    visibility: visible;
    opacity: 1;
}

#mainMenu .child.hide-header{
    visibility: hidden;
    opacity: 0;
}

header:has(.navbar-nav .nav-item.nav-on){
    background: var(--bs-white);
}

header.show-header .navbar,
header:has(.navbar-nav .nav-item.nav-on) .navbar{
    box-shadow: inset 0 -1px var(--bs-gray-200);
}

.navbar-nav .nav-item .items{
    width: fit-content;
    max-width: 730px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
}

.navbar-nav .nav-item .items a{
    display: block;
    padding: 5px;
    font-weight: 500;
}

/* .navbar-nav .nav-item .items li{
    width: 160px;
} */

.navbar-nav > .nav-item:nth-child(1) .items{
    left: 0;
}
.navbar-nav > .nav-item:nth-child(2) .items{
    left: 152px;
}
.navbar-nav > .nav-item:nth-child(3) .items{
    left: 308px;
}
.navbar-nav > .nav-item:nth-child(4) .items{
    left: 464px;
}
.navbar-nav > .nav-item:nth-child(5) .items{
    left: 594px;
}

.etc-nav > ul > .nav-item{
    position: relative;
}

.etc-nav > ul > .nav-item .child{
    width: fit-content;
    top: 110px;
    left: auto;
    right: 0;
    padding: 5px 10px;
    border-radius: 10px;
}

.etc-nav > ul > .nav-item:last-child .items{
    width: 100%;
    justify-content: center;
    left: auto;
    gap: 0;
}

.etc-nav > ul > .nav-item:last-child .items li{
    flex: 1;
}

.etc-nav > ul > .nav-item .items li:not(:last-child){
    border-bottom: 1px solid var(--bs-gray-200);
}

.etc-nav > ul > .nav-item:last-child .items a{
    padding: 10px 5px;
    font-size: 1.4rem;
    text-align: center;
}

.navbar-nav .child.nav-sol .items li{
    width: 160px;
}


.navbar-nav .etc-nav{
    height: 100%;
}

.navbar-nav .etc-nav > ul{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 0 0 0 100px;
}

.navbar-nav .etc-nav .nav-link{
    font-size: 1.5rem;
}

.navbar-toggler{
    width: 26px;
    height: 18px;
    position: relative;
    margin-left: auto;
    padding: 0;
    border: none;
    font-size: 0;
    box-shadow: none !important;
}
.navbar-toggler .ham,
.navbar-toggler .ham:before,
.navbar-toggler .ham:after{
    width: 100%;
    height: 2px;
    background: var(--bs-gray-700);
}

.navbar-toggler .ham:before,
.navbar-toggler .ham:after {
    content: "";
    position:absolute;
    left:0;
}
.navbar-toggler .ham:before{
    top:calc(50% - 1px);
}

.navbar-toggler .ham:after {
    top:calc(100% - 2px);
}

.hide-header,
.hide-scrollBtn{
    pointer-events: none;
}




/* SubPages header */
.wrapper.sub-pages .navbar-brand .logo-light{
    display: inline !important;
}
.wrapper.sub-pages .navbar-brand .logo-dark{
    display: none !important;
}

.wrapper.sub-pages .background-blur{
    visibility: visible !important;
    opacity: 1 !important;
}

.wrapper.sub-pages .navbar-nav .nav-link{
    color: var(--main-color2);
}




/* offcanvas */
.offcanvas.offcanvas-end{
    width: 320px;
    height: 100vh;
}

.offcanvas .offcanvas-title{
    width: 100%;
    height: 26px;
    font-size: 0;
    background: url(../images/unidocs_logo2.svg) no-repeat 0 50% / 100px;
}

.offcanvas-header{
    padding: 17px 30px;
    background: #eee;
}

.offcanvas-header .btn-close{
    width: 26px;
    height: 26px;
    position: relative;
    margin-left: auto;
    padding: 0;
    background: url("../images/ico_close.svg") no-repeat 0 0;
    font-size: 0;
    opacity: 1;
}

.offcanvas-header .btn-close .ham:before,
.offcanvas-header .btn-close .ham:after{
    width: 100%;
    height: 1px;
    background: var(--bs-black);
}

.offcanvas-header .btn-close .ham:before,
.offcanvas-header .btn-close .ham:after{
    content: "";
    width:100%;;
    position:absolute;
    top:50%;
    left: 0;
}

.offcanvas-header .btn-close .ham:before{
    transform:rotate(45deg);
}
.offcanvas-header .btn-close .ham:after{
    transform:rotate(-45deg);
}

.offcanvas-body{
    padding: 0;
}

.offcanvas-body .navbar-nav-m li{
    border-bottom: 1px solid var(--bs-gray-200);
}

.offcanvas-body .navbar-nav-m li a{
    padding: 10px;
}

.offcanvas #mainMenu .nav-item{
    border-bottom: 1px solid var(--bs-gray-300);
}

.offcanvas #mainMenu .nav-item .nav-link{
    position: relative;
    padding: 14px 20px;
    font-size: 1.4rem;
    font-weight: 600;
}

.offcanvas #mainMenu .nav-item .nav-link::before,
.offcanvas #mainMenu .nav-item .nav-link::after{
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border-radius: 5px;
    background: var(--bs-gray);
    transition: all 0.1s ease;
}

.offcanvas #mainMenu .nav-item .nav-link::before{
    width: 12px;
    height: 2px;
    right: 20px;
}
.offcanvas #mainMenu .nav-item .nav-link::after{
    width: 2px;
    height: 12px;
    right: 25px;
}

.offcanvas #mainMenu .nav-item .child{
    max-height: 0; /* 초기 상태: 높이 0 */
    overflow: hidden; /* 내용 숨김 */
}

.offcanvas #mainMenu .nav-item .child.open{
    max-height: 1000px; /* 충분히 큰 값으로 설정 (동적 높이 처리) */
}

.offcanvas #mainMenu .nav-item .child .container{
    padding: 0;
}

.offcanvas #mainMenu .nav-item .offering-gnb{
    padding: 10px 20px;
    background: var(--bs-gray-100);
}

.offcanvas #mainMenu .nav-item .offering-gnb .items{
    display: flex;
    flex-direction: column;
}

.offcanvas #mainMenu .nav-item .offering-gnb .items li:not(:last-child){
    border-bottom: 1px solid var(--bs-gray-300);
}

.offcanvas #mainMenu .nav-item .offering-gnb .items a{
    display: block;
    padding: 10px;
    font-size: 1.4rem;
}

.offcanvas #mainMenu .nav-item:has(.child.open) .nav-link{
    color: var(--main-color1);
}

.offcanvas #mainMenu .nav-item:has(.child.open) .nav-link::before,
.offcanvas #mainMenu .nav-item:has(.child.open) .nav-link::after{
    background: var(--main-color1);
}

.offcanvas #mainMenu .nav-item:has(.child.open) .nav-link::after{
    transform: translate(0, -50%) rotate(90deg);
}




/* Footer */
.footer{
    background: var(--main-color8);
}

.footer .footerTop{
    padding: 30px 0;
    border-bottom: 1px solid var(--bs-gray-700);
}

.footer .footerBottom{
    padding: 30px 0;
}

.footer .footer-nav,
.footer .footer-nav a{
    color: var(--bs-white);
}

.footer .footer-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 3%;
    justify-content: space-between;
}

/* .footer .footer-nav > li:not(:last-child){
    display: none;
} */

.footer .footer-nav .nav-tit{
    min-width: 80px;
    margin: 0 0 20px;
    font-weight: 600;
}

.footer .footer-nav > li > a,
.footer .footer-nav .nav-group a{
    display: block;
    padding: 5px 0;
    font-size: 1.4rem;
    color: var(--bs-gray-300);
}

.footer .nav-group{
    width: 320px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer .nav-group a{
    width: 50%;
}

.footer .b-grp1{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer .company{
	width: 128px;
	height: 26px;
	position: relative;
	font-size: 0;
}

.footer .company:before{
	content: "";
	width: 128px;
	height: 26px;
	position: absolute;
	top: 0;
	left: 0;
	background: url('../images/unidocs_logo2_dark.svg') no-repeat 0 0 / 128px;
}

.footer .sns-group{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.footer .sns-group li a{
	width: 60px;
    height: 60px;
    position: relative;
    display: block;
    padding: 17px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
	font-size: 0;
}

.footer .sns-group li a:before{
	content: "";
	width: 26px;
	height: 26px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url("../images/ico_snsgroup.svg") no-repeat 0 0 / 78px;
}

.footer .sns-group li.blog a:before{
    background-position-x: -26px;
}
.footer .sns-group li.youtube a:before{
    background-position-x: -52px;
}

.footer .b-grp2{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    margin: 30px 0 0;
}

.footer .b-grp2,
.footer .b-grp2 .btn-privacy,
.footer address{
    color: var(--main-color10);
}

.b-grp2 address,
.b-grp2 .etc-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.b-grp2 .etc-info{
    align-items: end;
}

.footer .b-grp2 .btn-privacy{
    font-size: 1.4rem;
}

.b-grp2 address{
    margin: 0;
}

.footer address .info{
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 1.4rem;
}

.footer address .info li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.footer address .info li p{
    position: relative;
    margin: 0;
    font-weight: 200;
}

.footer address .info li p:not(:first-child):before{
    content: "";
    width: 1px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: -10px;
    transform: translate(0, -50%);
    background: var(--main-color10);
}

.footer .footer-copyright{
    font-size: 1.2rem;
}


.footer .familySite{
    width: 150px;
}

.footer .familySite .dropdown,
.footer .familySite .bootstrap-select > .dropdown-toggle{
    background: none;
}

.footer .familySite .bootstrap-select > .dropdown-toggle,
.footer .familySite .bootstrap-select .dropdown-toggle.show{
    padding: 0;
    border: none !important;
}

.footer .familySite .bootstrap-select .dropdown-toggle .filter-option-inner-inner{
    color: var(--bs-white);
}





/* Quick menu */
.quick-menu-btn{
    visibility: hidden;
    transition: visibility, opacity 1s;
    transition-delay: 1s;
    position: fixed;
    right: 26px;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 14px;
    opacity: 0;
    z-index: 99;
}

.quick-menu-btn .btn{
    width: 48px;
    height: 48px;
    position: relative;
    padding: 16px;
    text-align: right;
    font-size: 0;
    font-weight: 600;
    color: var(--bs-white);
    border-radius: 30px;
    transition: width 0.3s ease;
}

.quick-menu-btn .btn:not(:last-child){
    background: var(--quick-color1);
}
.quick-menu-btn .btn:last-child{
    background: var(--quick-color2);
}

.quick-menu-btn .btn:before{
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/ico_quickmenu.svg") no-repeat 0 0 / 72px;
    transition: all 0.3s ease;
}

.quick-menu-btn .btn:nth-child(2):before{
    background-position-x: -24px;
}
.quick-menu-btn .btn:nth-child(3):before{
    background-position-x: -48px;
}

.quick-menu-btn .btn span{
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    color: var(--bs-white);
}

.quick-menu-btn .btn:hover{
    width: 110px;
    font-size: 1.3rem;
}
.quick-menu-btn .btn:last-child:hover{
    width: 86px;
}

.quick-menu-btn .btn:hover:before{
    left: 16px;
    transform: translate(0, -50%);
}

.quick-menu-btn .btn:hover span{
    visibility: visible;
    opacity: 1;
}



/* animation */
.bounce-in-fwd{
	animation: bounce-in-fwd 0.9s forwards;
}

@keyframes bounce-in-fwd{
    0% {
        transform: scale(0);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    38% {
        transform: scale(1.4);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    55% {
        transform: scale(0.8);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    72% {
        transform: scale(1.2);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    81% {
        transform: scale(0.9);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    89% {
        transform: scale(1.1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
    95% {
        transform: scale(0.95);
        animation-timing-function: ease-in;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        animation-timing-function: ease-out;
        opacity: 1;
    }
}

.fade-in{
	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fade-in-top{
	animation: fade-in-top 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-top{
    0% {
        -webkit-transform: translateY(-50px);
                transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}

.fade-in-bottom{
	animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-bottom{
    0% {
        -webkit-transform: translateY(50px);
                transform: translateY(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}

.levitate{
    animation: levitate 6s infinite ease-in-out both;
}

@keyframes levitate{
    from {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 10px);
                transform: translate(0, 10px);
    }

    to {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
    }
}

.slider-thumb::before {
    position: absolute;
    content: "";
    background: var(--bs-blue5);
    border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
    will-change: border-radius, transform, opacity;
    animation: sliderShape 5s linear infinite;
    display: block;
    -webkit-animation: sliderShape 5s linear infinite;
}
.slider-thumb.s380:before{
    width: 380px;
    height: 380px;
    top: -7%;
    left: -7%;
    opacity: 0.9;
}
.slider-thumb.s370:before{
    width: 370px;
    height: 370px;
    bottom: 10%;
    right: -8%;
    opacity: 0.5;
}
.slider-thumb.s210:before{
    width: 210px;
    height: 210px;
    bottom: 5%;
    left: 5%;
}
@keyframes sliderShape{
    0%,100%{
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
            transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    34%{
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform:  translate3d(0,5px,0) rotateZ(0.01deg);
    }
    50%{
        transform: translate3d(0,0,0) rotateZ(0.01deg);
    }
    67%{
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
        transform: translate3d(0,-3px,0) rotateZ(0.01deg);
    }
}

.slide-in-tr{
	animation: slide-in-tr 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-tr{
    0% {
        transform: translateY(-1000px) translateX(1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}


.slide-out-fwd-center{
	-webkit-animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-fwd-center 0.7s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes slide-out-fwd-center {
    0% {
        -webkit-transform: translateZ(1);
                transform: translateZ(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(600px);
                transform: translateZ(600px);
        opacity: 0;
    }
}



/* 약관/개인정보처리방침 */
.sec-service .tabGroup{
    width: 440px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    border: 1px solid var(--bs-gray-200);
    border-radius: 20px;
    background: var(--bs-white);
}

.sec-service .tabGroup li{
    width: 50%;
    position: relative;
    text-align: center;
}

.sec-service .tabGroup li + li:before{
    content: "";
    width: 1px;
    height: 22px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: var(--bs-gray-300);
}

.sec-service .tabGroup li a{
    display: block;
    padding: 15px;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--bs-gray-400);
}

.sec-service .tabGroup li.tab-on a{
    color: var(--bs-gray-800);
    pointer-events: none;
}





/* Modal */
.modal-header,
.modal-footer{
    justify-content: center;
}

.modal-title{
    margin: 0;
    font-size: 2.6rem;
    font-weight: 600;
}

.modal-body{
    max-height: 74vh;
    padding: 40px 20px;
    overflow-y: auto;
}

.modal-footer .btn{
    padding: 2px 20px;
    font-size: 1.4rem;
}

#privacyModal .boxRow{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
    margin: 0 0 30px;
	padding: 0 0 30px;
	border-bottom: 1px solid var(--bs-gray-300);
}

#privacyModal .boxRow li{
	width: calc((100% - 20px) / 2);
    font-weight: 500;
    color: var(--main-color2);
}

.rules-cont .numList{
	padding: 0 0 0 25px;
}

.rules-cont .numList .txtNum{
	position: absolute;
	left: -25px;
	margin: 0;
	padding: 0;
}

.rules-cont .numList .txtNum:before,
.rules-cont .numList span.noPoint:before{
	content: none;
}

.rules-cont dl:not(:last-child){
	margin: 0 0 30px;
}

.rules-cont dl dt{
	margin: 0 0 5px;
    font-size: 2rem;
    font-weight: 600;
}



.rules-cont dl.m1.boxRow dt{
	width: calc((100% - 40px) / 3);
}

.rules-cont dl.m2.boxRow dt{
	width: calc((100% - 20px) / 2);
}

.rules-cont dl dd,
.rules-cont dl dd p,
.rules-cont dl ul li,
.rules-cont dl ul li span,
.rules-cont dl ul li span em,
.rules-cont .numList .txtNum{
	font-weight: 400;
	color: var(--bs-gray-700);
	line-height: 22px;
}

.rules-cont dl dd{
	position: relative;
	padding: 5px 0;
}

.rules-cont.service dl dd ul{
	padding: 0 0 0 25px;
}

.rules-cont.policy dl dd ul:not(:first-child){
	padding: 0 0 0 20px;
}

.rules-cont dl ul li{
	position: relative;
	padding: 3px 0;
}

.rules-cont dl ul li span{
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0 12px;
}

.rules-cont dl ul li span:before{
	content: "";
	width: 3px;
	height: 3px;
	position: absolute;
	top: 9px;
	left: 0;
	background: var(--bs-gray-600);
	border-radius: 50%;
}

.rules-cont dl ul li span em{
	display: block;
}

.list-labeling{
	margin: 0 0 50px;
}

.list-labeling ul{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.list-labeling li{
	width: calc((100% - 50px) / 6);
	min-width: 160px;
	display: flex;
	flex-direction: column;
    align-items: center;
	flex: 1 1 auto;
	padding: 20px;
	background: #f6f6f6;
	border-radius: 10px;
}

.list-labeling li a{
	width: 100%;
	height: 100%;
}

.list-labeling li .thumb{
	width: 90px;
	height: 90px;
	position: relative;
	margin: 0 auto;
}

.list-labeling li .thumb:before{
	content: "";
	width: 90px;
	height: 90px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	background: url('../images/ico_rules.svg') no-repeat 0 0 / 990px;
}

.list-labeling li.p2 .thumb:before{
	background-position-x: -90px;
}
.list-labeling li.p3 .thumb:before{
	background-position-x: -180px;
}
.list-labeling li.p4 .thumb:before{
	background-position-x: -270px;
}
.list-labeling li.p5 .thumb:before{
	background-position-x: -360px;
}
.list-labeling li.p6 .thumb:before{
	background-position-x: -450px;
}
.list-labeling li.p7 .thumb:before{
	background-position-x: -540px;
}
.list-labeling li.p8 .thumb:before{
	background-position-x: -630px;
}
.list-labeling li.p9 .thumb:before{
	background-position-x: -720px;
}
.list-labeling li.p10 .thumb:before{
	background-position-x: -810px;
}
.list-labeling li.p11 .thumb:before{
	background-position-x: -900px;
}

.list-labeling li .title{
	margin: 15px 0 5px;
	text-align: center;
	line-height: 1.2;
}

.list-labeling li .txt{
	font-size: 1.4rem;
	text-align: center;
}

.rules-cont .table-warp{
	overflow-x: auto;
}

.rules-cont .table-warp .table{
	min-width: 800px;
	margin: 0 0 10px;
}

.rules-cont .table tr th{
	text-align: center;
	background: #f6f6f6;
}

.rules-cont .table tr td{
	font-weight: 400;
	color: #666;
	text-align: center;
    vertical-align: middle;
}

.rules-cont #pr-con2 .col-1{
    width: 10%;
}
.rules-cont #pr-con2 .col-2{
    width: 20%;
}
.rules-cont #pr-con2 .col-3{
    width: 30%;
}
.rules-cont #pr-con2 .col-4{
    width: auto;
}

.rules-cont #pr-con4 colgroup col{
    width: 50%;
}

.rules-cont #pr-con4 p{
    margin: 0;
}

.rules-cont #pr-con5 .col-1{
    width: 10%;
}
.rules-cont #pr-con5 .col-2{
    width: 15%;
}
.rules-cont #pr-con5 .col-3{
    width: auto;
}
.rules-cont #pr-con5 .col-4{
    width: 20%;
}
.rules-cont #pr-con5 .col-5{
    width: 20%;
}

.rules-cont #pr-con6 .col-1{
    width: auto;
}
.rules-cont #pr-con6 .col-2{
    width: 20%;
}
.rules-cont #pr-con6 .col-3{
    width: 35%;
}

.rules-cont #pr-con10 td{
    text-align: left !important;
}

.rules-cont #pr-con10 td span{
    display: block;
}



/* Owl Dots */
.owl-dots {
    text-align: center;
    margin: 80px 0 0;
    position: relative;
    z-index: 10;
}

/* 각 dot 버튼 */
.owl-carousel button.owl-dot{
    width: 36px;
    height: 36px;
    position: relative;
    margin: 0 12px;
    border-radius: 50%;
    background: none;
    display: inline-block;
    cursor: pointer;
}

.owl-carousel button.owl-dot::before{
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bs-gray-300);
}

/* 활성화된 dot */
.owl-carousel button.owl-dot.active{
    background: var(--main-color6);
}
.owl-carousel button.owl-dot.active::before{
    background: var(--main-color7);
}

/* span 제거 혹은 숨기기 */
.owl-carousel button.owl-dot span{
    display: none;
}




.error-wrap{
    height: 100vh;
    position: relative;
    background: var(--error-color);
}

.error-wrap .error-cont{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 15px;
    text-align: center;
}

.error-wrap .error-cont .txt-box{
    margin: 60px 0 0;
    font-size: 2rem;
}

.error-wrap .error-cont .txt-box h1{
    font-size: 3rem;
    font-weight: 800;
}

.error-wrap .error-cont .txt-box p{
    color: var(--bs-gray-700);
}









/*------------------------------------ ONLY PC ------------------------------------*/
@media(hover: hover) and (pointer: fine) {
    a:active,
    a:hover {
        color: var(--main-color1);
    }

    .wrapper header:hover{
        background: var(--bs-white);
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:active,
    .wrapper header.show-header .navbar-nav .nav-link:hover,
    .wrapper header.show-header .navbar-nav .nav-link:active{
        color: var(--main-color1) !important;
    }

    .footer .footer-nav a:hover{
        color: var(--main-color9);
    }
}

/*------------------------------------ ONLY Tablet --------------------------------*/
@media (hover: none) and (pointer: coarse) {

}

/* ----------------------------------- Only Phone ---------------------------------*/
@media(max-width: 991px) and (hover: none) and (pointer: coarse) {



}

@media(max-width: 1690px){

}

@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container{
        max-width: 1540px;
    }
}

@media(max-width: 1399px){
    .navbar-nav{
        gap: 30px;
    }

    .navbar-nav .etc-nav > ul{
        gap: 10px;
        margin: 0 0 0 50px;
    }

    .navbar-nav > .nav-item > .child > .container > .offering-gnb{
        width: 755px;
        margin: 0 0 0 calc(100% - 755px);
    }

    .navbar-nav .nav-item .items{
        gap: 10px 20px;
    }

    .navbar-nav > .nav-item:nth-child(2) .items{
        left: 0;
    }
    .navbar-nav > .nav-item:nth-child(3) .items{
        left: 248px;
    }
    .navbar-nav > .nav-item:nth-child(4) .items{
        left: 374px;
    }
    .navbar-nav > .nav-item:nth-child(5) .items{
        left: 340px;;
    }

    .footer .footer-nav{
        gap: 2%;
    }

    .footer .nav-group{
        width: 280px;
    }
}

@media(max-width: 1199px){
    .navbar-nav{
        gap: 10px;
    }

    .navbar-nav .etc-nav > ul{
        gap: 10px;
        margin: 0;
    }

    .navbar-nav .nav-link{
        font-size: 1.5rem;
    }

    .navbar-nav > .nav-item > .child > .container > .offering-gnb{
        width: 100%;
        margin: 0;
    }

    .navbar-nav .nav-item .items{
        max-width: fit-content;
        justify-content: center;
        margin: 0 auto;
        font-size: 1.5rem;
    }

    .navbar-nav > .nav-item:nth-child(2) .items,
    .navbar-nav > .nav-item:nth-child(3) .items,
    .navbar-nav > .nav-item:nth-child(4) .items,
    .navbar-nav > .nav-item:nth-child(5) .items{
        left: auto;
    }

    .footer .nav-group{
        width: 270px;
    }

    .footer .footer-nav > li:last-child{
        flex: 1;
    }

    .footer .footer-nav > li:last-child .familySite{
        margin: 20px auto 0;
    }
}

@media (max-width: 991px) and (orientation: landscape){
    .error-wrap .error-cont img{
        width: 160px;
    }
}

@media(max-width: 991px){
    .container{
        max-width: 100%;
    }

    .wrapper header{
        background: var(--bs-white);
    }

    .wrapper header .navbar{
        height: 60px;
        box-shadow: inset 0 -1px var(--bs-gray-200);
    }

    .wrapper header .navbar .container{
        padding-left: 15px;
        padding-right: 15px;
    }

    #pcMenu,
    .navbar-nav,
    .background-blur,
    .navbar-brand .logo-dark,
    .quick-menu-btn{
        display: none !important;
    }

    .navbar-brand .logo-light{
        display: inline !important;
    }

    .navbar-expand-sm .navbar-toggler{
        display: flex;
    }

    .wrapper header .navbar-nav .nav-item.nav-on .nav-link:after{
        content: none;
    }

    .offcanvas #mainMenu .etc-nav li:first-child a::before,
    .offcanvas #mainMenu .etc-nav li:first-child a::after{
        content: none;
    }

    .offcanvas #mainMenu .etc-nav .child{
        width: 100%;
        padding: 0;
        border-radius: 0;
    }

    .offcanvas #mainMenu .etc-nav .child .items a{
        text-align: left;
    }

    .footer .footerTop{
        padding: 20px 0;
    }

    .footer .footer-nav > li:not(:last-child){
        display: none;
    }

    .footer .footer-nav > li:last-child .familySite{
        margin: 0 auto;
    }

    .footer .b-grp1,
    .footer .b-grp2{
        flex-direction: column;
        gap: 20px;
    }

    .footer .sns-group li a{
        width: 50px;
        height: 50px;
    }

    .footer address .info,
    .b-grp2 .etc-info{
        align-items: center;
    }

    .footer address .info li{
        justify-content: center;
    }

    .list-labeling li {
        width: calc((100% - 20px) / 3);
        min-width: auto;
        padding: 10px;
    }

    .modal-dialog{
        width: auto;
        max-width: 100%;
        margin: 5px;
    }

    .modal-body{
        height: calc(100vh - 200px);
    }
}

@media(max-width: 767px){
    .offcanvas.offcanvas-end{
        width: 100%;
    }

    .list-labeling li .title{
        font-size: 1.4rem;
    }

    .modal-body{
        height: calc(100vh - 240px);
    }

    #privacyModal .boxRow{
        flex-direction: column;
    }

    #privacyModal .boxRow li{
        width: 100%;
    }

    .error-wrap .error-cont .txt-box h1{
        font-size: 2.6rem;
    }

    .error-wrap .error-cont .txt-box{
        font-size: 1.6rem;
    }
}

@media(max-width: 575px){

}

@media(max-width: 480px){
    .footer .footerTop{
        flex-direction: column;
        gap: 10px;
    }

    .footer address .company{
        margin: 0 auto 15px;
    }

    .footer address ul{
        justify-content: center;
    }

    .list-labeling li .thumb{
        width: 63px;
        height: 63px;
        position: relative;
        margin: 0 auto;
    }

    .list-labeling li .thumb:before{
        content: "";
        width: 63px;
        height: 63px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        background: url('../images/ico_rules.svg') no-repeat 0 0 / 693px;
    }

    .list-labeling li.p2 .thumb:before{
        background-position-x: -63px;
    }
    .list-labeling li.p3 .thumb:before{
        background-position-x: -126px;
    }
    .list-labeling li.p4 .thumb:before{
        background-position-x: -189px;
    }
    .list-labeling li.p5 .thumb:before{
        background-position-x: -252px;
    }
    .list-labeling li.p6 .thumb:before{
        background-position-x: -315px;
    }
    .list-labeling li.p7 .thumb:before{
        background-position-x: -378px;
    }
    .list-labeling li.p8 .thumb:before{
        background-position-x: -441px;
    }
    .list-labeling li.p9 .thumb:before{
        background-position-x: -504px;
    }
    .list-labeling li.p10 .thumb:before{
        background-position-x: -567px;
    }
    .list-labeling li.p11 .thumb:before{
        background-position-x: -630px;
    }
}

/*------------------------------------ DARK MODE ------------------------------------*/
:root {
	color-scheme: dark light;
}

@media (prefers-color-scheme: dark){
    body,
    .background-blur{
        background: var(--main-color14);
    }

    .wrapper.sub-pages .navbar-brand .logo-light,
    .wrapper header:hover .navbar-brand .logo-light{
        display: none !important;
    }

    .wrapper.sub-pages .navbar-brand .logo-dark,
    .wrapper header:hover .navbar-brand .logo-dark{
        display: inline !important;
    }

    header.show-header .navbar,
    header:has(.navbar-nav .nav-item.nav-on) .navbar{
        box-shadow: none;
    }

    .wrapper header .navbar-nav .nav-link,
    .wrapper.sub-pages .navbar-nav .nav-link,
    .navbar-nav .nav-item .items a{
        font-weight: 400;
        color: var(--bs-white) !important;
    }

    .wrapper header.show-header .navbar-nav .nav-link{
        color: var(--bs-white) !important;
    }

    .navbar-nav .nav-item .child,
    .offcanvas-header{
        background: var(--main-color8);
    }

    .navbar-toggler .ham, .navbar-toggler .ham:before, .navbar-toggler .ham:after{
        background: var(--main-color10);
    }

    .offcanvas .offcanvas-title,
    .offcanvas-header .btn-close{
        filter: invert(1) brightness(10);
    }

    .offcanvas.offcanvas-end,
    .offcanvas #mainMenu .nav-item .offering-gnb{
        border-color: var(--main-color14);
        background: var(--main-color15);
    }

    .offcanvas #mainMenu .nav-item .nav-link,
    .offcanvas #mainMenu .nav-item .offering-gnb .items a{
        color: var(--bs-white);
    }

    .offcanvas #mainMenu .nav-item .nav-link::before, .offcanvas #mainMenu .nav-item .nav-link::after{
        background: var(--bs-white);
    }

    .offcanvas #mainMenu .nav-item:has(.child.open) .nav-link{
        color: var(--company-color10);
    }

    .offcanvas #mainMenu .nav-item:has(.child.open) .nav-link::before, .offcanvas #mainMenu .nav-item:has(.child.open) .nav-link::after{
        background: var(--company-color10);
    }

    .offcanvas #mainMenu .nav-item,
    .offcanvas #mainMenu .nav-item .offering-gnb .items li:not(:last-child){
        border-color: var(--main-color13);
    }

    .modal-content{
        background: var(--main-color14);
        color: var(--bs-white);
    }

    .modal-header,
    #privacyModal .boxRow,
    .modal-footer{
        border-color: var(--main-color8);
    }

    #privacyModal .boxRow li a,
    .rules-cont dl dd,
    .list-labeling li a,
    .rules-cont .table tr th,
    .rules-cont .table tr td,
    .rules-cont dl dd, .rules-cont dl dd p, .rules-cont dl ul li, .rules-cont dl ul li span, .rules-cont dl ul li span em, .rules-cont .numList .txtNum{
        color: var(--bs-white);
    }

    .list-labeling li,
    .rules-cont .table tr th,
    .rules-cont .table tr td{
        background: var(--main-color8);
    }
}

@media (prefers-color-scheme: dark) and (hover: hover) and (pointer: fine){
    .wrapper header:hover{
        background: var(--main-color14);
    }

    .wrapper header:hover .navbar-nav .nav-link{
        color: var(--bs-white) !important;
    }

    .navbar-nav .nav-item .items a:hover{
        color: var(--main-color1) !important;
    }
}

@media (prefers-color-scheme: dark) and (max-width: 991px){
    .wrapper header{
        background: var(--main-color14);
    }

    .wrapper header .navbar{
        box-shadow: none;
    }

    .wrapper.days-on .logo-light, .wrapper header.show-header .logo-light,
    .navbar-brand .logo-light{
        display: none !important;
    }

    .navbar-brand .logo-dark{
        display: inline !important;
    }
}