@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

html {
    --blackWhite: #fff;
    --default: #131313;
    --reverse: #fff;
    --background01:#fff;
    --background02:#fff;
    --background03:#fff;
    --background04:#e1e1e1;
    --background05:#eaeaea;
    --background06:#f5f5f5;
    --thumbHover:rgba(0,0,0,0.8);
    --menuTxt01: #010101;
    --menuTxt02: #999;
    --menuTxt03: #666;
    --txtColor01: #777;
    --txtColor02: #333;
    --border01: #e1e1e1;
    --border02: #e1e1e1;
    --inputBg : #fff;
    --inputBorder: #e1e1e1;
    --inputFocus: #f7f7f7;
    --point:#c81339;
    --footer: #111;
}

html.theme-dark {
    --blackWhite: #090909;
    --default: #fff;
    --reverse: #090909;
    --background01:#090909;
    --background02:#111;
    --background03:#1d1d1f;
    --background04:#393939;
    --background05:#393939;
    --background06:#282828;
    --headerBg:rgba(0,0,0,0.3);
    --menuTxt01: #fcfcfc;
    --menuTxt02: #999;
    --menuTxt03: #999;
    --txtColor01: #bbb;
    --txtColor02: #ccc;
    --border01: #e1e1e1;
    --border02: #1d1d1f;
    --inputBg : #393939;
    --inputBorder: #545454;
    --inputFocus: #393939;
    --point:#c81339;
    --footer: #fcfcfc;
    
}

body { background: var(--background01); font-family: 'Poppins','Pretendard', sans-serif; font-size: 10px; line-height: 1.4; color: var(--default); position: relative; word-break: keep-all;}

img {max-width: 100%; object-fit: cover;}
b {font-weight: 700;}
.inner {width: 100%; padding: 0 min(100px,5.3%);}
.flx {display: flex; flex-flow: row wrap;}
.flx2 {display: flex; flex-flow:column wrap}
.view-768 {display: none;}

@media (max-width:1520px) {
.hide-1520 {display: none;}
}
@media (max-width:768px) {
.hide-768 {display: none;}
.view-768 {display: block;}
}

.color_r {color:var(--point)}

/* header */
header {position: fixed; width: 100%; z-index: 997; transition: all .2s; top:0em; background: none;}
header.f-nav {background: var(--background01);}
header.f-nav2 {top:-10em; }
header > .inner {height: 10em; justify-content: space-between; align-items: center;}

/* header-logo */
header .header_logo {position: relative; z-index: 99;}
header .header_logo img {width: 6em;}
header.mo_open .header_logo {filter: brightness(10);}

/* header-gnb */
header .nav_list > li {margin-left: 3em; position: relative; padding: 20px 0}
header .nav_list > li > a {font-size: 1.5em; color: var(--menuTxt02); font-weight: 300; transition: all 0.2s;}
header .nav_list li.active > a {color:var(--menuTxt01); font-weight: 700;}
header .nav_list li:hover a {color:var(--menuTxt01);}
header .nav_list ul {position: absolute; top:95%; left: 50%; transform: translateX(-50%); width: 110px; text-align: center; background: var(--background04); display: none;} 
header .nav_list ul li a {font-size: 1.3em; font-weight: 500; padding: 7px 0; display: block; color: var(--default)}
header .nav_list ul li a:hover {color: var(--reverse);}


/*mobile menu*/
header .mo_nav {display: none;}
header .mo_nav .inner {opacity:0; transition: opacity 0.4s;}
header .mo_nav_wrap {visibility: hidden;}
header.mo_open .mo_nav .inner {opacity:1;}
header.mo_open .mo_nav_wrap {visibility: visible;}

/*mobile menu-button*/
header .mo_nav_btn {flex-flow: column wrap; align-content: flex-end; position: relative; z-index: 99;  width: 72px; height:38px; }
header .mo_nav_btn span {display: block; background: var(--default); width: 100%; height: 3px;  position: absolute; left: 50%; transform: translateX(-50%); transition: 0.2s;}
header .mo_nav_btn span:nth-of-type(1) {top:0;}
header .mo_nav_btn span:nth-of-type(2) {top:50%; transform: translate(-50%,-50%);}
header .mo_nav_btn span:nth-of-type(3) {bottom:0;}
header.mo_open .mo_nav_btn span {background: #fff;}
header.mo_open .mo_nav_btn span:nth-of-type(1) {top:50%; transform: translate(-50%,-50%) rotate(30deg);}
header.mo_open .mo_nav_btn span:nth-of-type(2) {opacity: 0;}
header.mo_open .mo_nav_btn span:nth-of-type(3) {bottom:auto; top:50%; transform: translate(-50%,-50%) rotate(-30deg);}

/*mobile menu-top*/
header .mo_nav_wrap {position: fixed; width: 100%; height: 100vh; left: 0; top: 0; background: #7a7d84; z-index: 98;}
header .mo_nav_wrap .inner {flex-direction: column; height: 100%;}
header .mo_nav .mo_nav_top {flex-direction: column; justify-content: flex-end; height: min(770px,60%);}
header .mo_nav .mo_nav_top > li > a {font-size: min(92px,10em); font-weight: 700; color: #fff; line-height: 1.3;}

/*mobile menu-bottom*/
header .mo_nav_bottom {height: 40%;flex-direction: column; justify-content: center; align-items: flex-start;}
header .mo_nav .sns {align-items: center; width: 100%;}
header .mo_nav .sns li{width: 3.5em;}
header .mo_nav .sns li:nth-of-type(2) {width: 3em; margin: 0 5%;}
header .mo_nav .sns li img {width: 100%; filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(231deg) brightness(102%) contrast(101%);}
header .mo_nav .sns li.theme_mode {width: 4em;}
header .mo_nav .sns li.theme_mode img:last-child {display: none;}
html.theme-dark header .mo_nav .sns li.theme_mode img {display: none;}
html.theme-dark header .mo_nav .sns li.theme_mode img:last-child {display: block;}
header .mo_nav_bottom > p, header .mo_nav_bottom > a {font-size:min(22px,3.6vw); color: #fff; margin-top: min(30px,5%);}
header .mo_nav_bottom .admin-btn {margin-block:0 min(30px,5%);}
/*  */
#signin_menu {margin-left: -15px;-moz-border-radius: 5px;-webkit-border-radius: 5px;background-color: #ddeef6;border: 1px transparent;color: #789;display: none;font-size: 11px;left: 600px;margin-left: -8px;margin-top: 5px;padding: 10px;position: absolute;text-align: left;width: 210px;z-index: 100;}
#signin_menu input[type=text],
#signin_menu input[type=password] {-moz-border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #ace;display: block;font-size: 13px;margin: 0em 0em 5px;padding: 5px;width: 195px;}
#signin_menu p {margin: 0em;}
#signin_menu a {color: #6ac;}
#signin_menu label {font-weight: normal;}
#signin_menu p.remember {padding: 10px 0em;}
#signin_menu p.search_info {clear: both;margin: 5px 0em;text-align: center;}
#signin_menu p a {color: #27b!important;}
#signin_submit {-moz-border-radius: 4px;-webkit-border-radius: 4px;background: #39d url("/bbs/images/common/bg-btn-blue.png") repeat-x scroll 0em 0em;border: 1px solid #39d;color: #fff;font-size: 11px;font-weight: bold;margin: 0em 5px 0em 0em;padding: 4px 10px 5px;text-shadow: 0em -1px 0em #39d;}
#signin_submit::-moz-focus-inner {border: 0em;padding: 0em;}
#signin_submit:hover,
#signin_submit:focus {background-position: 0em -5px;cursor: pointer;}
.search_submit {-moz-border-radius: 4px;-webkit-border-radius: 4px;background: #39d url("/bbs/images/common/bg-btn-blue.png") repeat-x scroll 0em 0em;border: 1px solid #39d;color: #fff;font-weight: bold;margin: 0em 5px 0em 0em;padding: 4px 10px 5px;text-shadow: 0em -1px 0em #39d;}


/*sub top*/
/* .sub_top {padding-top: 18em; transition: padding 0.2s;}  */
.sub_top {padding-top: 15em; transition: padding 0.2s;}
.f-nav .sub_top {padding-top: 10em;}
.sub_top h4 {font-size: min(20px,2em); font-weight: 500;}
.sub_top h2 {font-size: min(72px,8em); font-weight: 700; color: var(--menuTxt01);}
.sub_top .sub_category {font-size: clamp(16px,1.8em, 1.8em);}
.sub_top .sub_category li:not(:last-child) {margin-right: 2.5em;}
.sub_top .sub_category li a {color: var(--menuTxt03); font-weight: 300; transition: all 0.2s;}
.sub_top .sub_category li.active a {color: var(--menuTxt01); font-weight: 500;}
.sub_top .sub_category li:hover a {color: var(--menuTxt01)}

/* floating menu */
.fl_menu {position: fixed; top:36%; right: min(50px,2.2%); transform: translateX(50%);}
.fl_menu li:not(:last-child) {margin-bottom: 2em; width: 19px;}
.fl_menu li:nth-of-type(2) {width: 18px;}
.fl_menu li img { filter: brightness(0);}
.fl_menu li.theme_mode a {display: block; width: 23px; height: 23px; }
.fl_menu li.theme_mode a img:last-child {display: none;}
html.theme-dark .fl_menu li img {filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(231deg) brightness(102%) contrast(101%);}
html.theme-dark .fl_menu li.theme_mode a img {display: none;}
html.theme-dark .fl_menu li.theme_mode a img:last-child {display: block;}

/* lean_overlay */
#lean_overlay {background:#010101 url(/img/common/animated-overlay.gif);display: none;height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 1000;}
.leanmodal_layer {z-index: 1100;    border-radius        : 1px;box-shadow:10px 10px 30px rgba(0,0,0,.5);overflow             : hidden;display              : none;width                : 90%;max-width            : 700px;margin-left          :-45%;border-radius:1em;}
.leanmodal_layer h4{padding:20px;margin:0;color:#fff;background:#595C7D;font-family: "Franklin Gothic Bold", "Arial Black", sans-serif;font-size:20px;}
.leanmodal_layer .modal_con {background           : #fff;color: #666;height: 500px;text-shadow: none;padding:20px;width: 100%;box-sizing:border-box;positoin:relative;overflow-y:auto;}
.leanmodal_layer .modal_close {display: block;height: 30px;width:30px;position: absolute;right: 17px;top: 17px;text-indent:-9999px;background:url(/img/common/bt_close2.gif) 50% 50% no-repeat;z-index: 2;}
.leanmodal_layer .mytextarea{width:100%;height:100%;overflow-x:hidden;border:none;}

/* paginate*/
.paginate { padding: 3em 0em; text-align: center; }
.paginate * { margin: 0em; padding: 0em; }
.paginate a, .paginate strong {display: inline-block; padding: 0.3em 0.5em; margin: 0 0.3em; position: relative; font-size: max(12px, 1.6em); color: var(--txtColor01);}
.paginate strong {color: var(--point); font-weight: 500; }
.paginate a.pre {margin: 0; padding: 0.3em 0.5em 0.3em 1em;}
.paginate a.pre_end {}
.paginate a.next { margin: 0; padding: 0.3em 1em 0.3em 0.5em;}
.paginate a.next_end {  }

/* top button */
.top_btn {position: fixed; bottom:20%; right: min(50px,2.2%); transform: translateX(50%); width: 4em; height: 4em; border: 2px solid var(--default); flex-flow: row wrap; justify-content: center; align-items: center; cursor: pointer; z-index: 99;}
html.theme-dark .top_btn img {filter:invert(1);}

.ft_banner {text-align: center; justify-content: space-between; width: min(1500px,100%); margin: 8em auto 0;}
.ft_banner a {width: min(732px,49%);}

/* footer */
footer {padding: 6em 0; border-top:1px solid var(--footer); text-align: center; margin-top: 4em;}
footer p {font-size: 1.5em;}
footer p.flx {justify-content: center; align-items: center; margin-bottom: 1em;}
footer p span {display: inline-block; width: 1px; height: 1em; margin: 0 1em; background: var(--border01);}




@media (max-width:1700px) {
    .inner {padding: 0 4.5%;}
}

@media (max-width:1520px) {
    body {font-size: 9.5px;}
    
}

@media (max-width:1400px) {
    body {font-size: 9px;}
}

@media (max-width:1200px) {
    body {font-size: 8.5px;}
    
    /* .sub_top .sub_category {font-size: 2em;} */
    .sub_top .sub_category li:not(:last-child) {margin-right: 2em;}

    .ft_banner {text-align: center; margin-top:6em;}
    footer {padding: 4em 4.5%; margin-top: 2em;}
}

@media (max-width:1080px) {
    body {font-size: 8px;}
    .header_down_btn {display: none;}
    header .header_logo img {width: 8.5em;}
    header .nav {display: none;}
    header .mo_nav {display: block;}

    .fl_menu {display: none;}
    .top_btn {display: none;}

    .sub_top {padding-top: 16em;}
    .f-nav .sub_top {padding-top: 8em;}
}



@media (max-width:768px) {
    body {font-size: max(7.5px,1.35vw); overflow-x: hidden;}

    header .mo_nav_btn {width: max(50px,9.4vw); height:max(25px,5vw); }
    
    .sub_top .sub_category li:not(:last-child) {margin-right: 1.5em;}
    
    .fl_menu {display: none;}

    .sub_top {padding-top: 14em;}
    .sub_top h2 {font-size: 6.6em;}
    .f-nav .sub_top {padding-top: 6em;}

    .ft_banner a {width: 100%;}
    .ft_banner a:last-child {margin-top: 2em;}

    .paginate a, .paginate strong {padding: 0.3em;}
}

@media (max-width:500px) {
    header .mo_nav .mo_nav_top > li > a {font-size: 8em;}
    header .mo_nav_bottom > p, header .mo_nav_bottom > a {margin-top: 5%;}
    header .mo_nav_bottom .admin-btn {margin-bottom: 5%;}
}


/*fancybox*/
.fancybox__content {padding: 0; background: none;}

@media (max-width:1920px) {
    .fancybox__content {padding:1em min(20px,4%); padding-bottom: 0;}
    .fancybox__content>.f-button.is-close-btn {right: min(20px, 4%);}
}