@charset "utf-8";
@font-face {
  font-family: 'Tenada';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
/* 초기화 */
html {overflow-y:scroll;}
body {margin:0;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
figure, form { margin: 0; }
*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
body::-webkit-scrollbar {  width: 10px; } 
body::-webkit-scrollbar-track { background-color: #333 } 
body::-webkit-scrollbar-thumb { border-radius: 5; background-color: gray } 

span.typed-cursor { position: absolute; right: -18px; top: 0; }

.warp{position: relative;}
.warp .header{height: 80px; position: fixed; width: 100%; top: 0; display: flex; justify-content: space-between;padding: 0 10px;z-index:110;}
.warp .header .logo{padding: 10px 0;display: flex; align-items: center;}
.warp .header .logo a.logos { color: #fff; font-size: 30px; font-weight: bold; font-family: 'Tenada'; height: 30px;}
.warp section .ct{display: flex;position: relative;background-color: #000;width: 100%; height: 100vh;}
.warp section .ct:after{z-index: 2;position: absolute;left: 0; top: 0; width: 100%;height: 100vh;content: ""; background-color: rgba(0,0,0,.3);}
.warp section .ct .box_left{width: 50%;height: 100vh;position: absolute;top: 0;left: 0;}
.warp section .ct .box_rite{width: 50%;height: 100vh;position: absolute;top: 0;right: 0;}

.warp section .ct .box_left .bg_part { width: 100%; background: url(../img/banner.jpg) no-repeat center; position: absolute; top: 0; left: 0; display: block; height: 100vh;    background-size: cover; }

.text_btn{width: 80vw; top: 50%; position: fixed; z-index: 5; left: 50%; transform: translate(-50%,-50%);width: 80vw; top: 50%; position: fixed; z-index: 5; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center;}
.text_btn h2{color: #fff;font-size: 50px;font-family: 'Pretendard-Regular';height:59px}
.text_btn a{padding: 12px 50px; display: inline-block; margin: 20px auto 0; background: #ed2040; border-radius: 5px;font-size: 20px;color: #fff;font-weight: bold;font-family: 'Pretendard-Regular';}
.text_btn p{font-size: 18px; color: #fff; font-weight: bold; margin-top: 10px;}

.xet-toggle-menu { position: relative; display: block; width: 60px; height: 80px; line-height: 80px; font-size: 0; overflow: hidden; white-space: nowrap; cursor: pointer; margin: 0; padding: 0; color: transparent; border: 0; border-radius: 0; background: none; transition: all 0.3s cubic-bezier(0, 0, 0.58, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1) 0s; -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1) 0s; }
.xet-toggle-menu span, .xet-toggle-menu span::before, .xet-toggle-menu span::after { position: absolute; display: inline-block; height: 2px; background-color: #fff; }
.xet-toggle-menu span { width: 20px; background-color: #FEB500; }
.xet-toggle-menu span::after { width: 30px; }
.xet-toggle-menu span::before { width: 40px; }
.xet-toggle-menu span::before, .xet-toggle-menu span::after { content: ''; right: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; }
.xet-toggle-menu span::before { top: -6px; }
.xet-toggle-menu span::after { top: 6px; }
.xet-toggle-menu span { position: absolute; top: 50%; right: 0; margin-top: 0px; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; }

.xet-toggle-menu.push-active span { right: 0; background: none; }
.xet-toggle-menu.push-active span::before, .xet-toggle-menu.push-active span::after { width: 30px; }
.xet-toggle-menu.push-active span::before { -webkit-transform: translateX(4px) translateY(-5px) rotate(45deg); -moz-transform: translateX(4px) translateY(-5px) rotate(45deg); -ms-transform: translateX(4px) translateY(-5px) rotate(45deg); -o-transform: translateX(4px) translateY(-5px) rotate(45deg); transform: translateX(4px) translateY(-5px) rotate(45deg); }
.xet-toggle-menu.push-active span::before, .xet-toggle-menu.push-active span::after { width: 30px; }
.xet-toggle-menu.push-active span::after { -webkit-transform: translateX(4px) translateY(4px) rotate(-45deg); -moz-transform: translateX(4px) translateY(4px) rotate(-45deg); -ms-transform: translateX(4px) translateY(4px) rotate(-45deg); -o-transform: translateX(4px) translateY(4px) rotate(-45deg); transform: translateX(4px) translateY(4px) rotate(-45deg); }
.xet-nav-m-wrp { margin: 0 10%; }
.xet-nav-m li a { position: relative; display: inline-block; font-size: 16px; font-weight: 400; margin: 5px 0 5px 45px; padding: 5px 0; vertical-align: middle; color: #c1c1c1; transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; }
.xet-nav-m li > button { position: absolute; top: 0; left: 0; width: 45px; height: 40px; padding: 0; background: none; border: 0;height: 45px; }
.xet-nav-m li > button:after { content: ''; display: block; height: 10px; width: 10px; position: absolute; top: 50%; bottom: auto; left: 50%; margin-left: -4px; opacity: .7; background: url(../img/nav-add.png) no-repeat center center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }
.xet-nav-m li a { position: relative; display: inline-block; font-size: 16px; font-weight: 400; margin: 5px 0 5px 45px; padding: 5px 0; vertical-align: middle; color: #c1c1c1; transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; }
.xet-nav-m li a { min-width: auto; font-size: 18px; margin: 5px 0 5px 60px; }
.xet-nav-m li > a:hover, .xet-nav-m li > a:focus { color: #fff; }

.xet-push { z-index: 109; position: fixed; height: 100%; background-color: rgba(0,0,0,.8);height: 100%; top: 0;transition: all 0.3s cubic-bezier(0, 0, 0.58, 1) 0s;
  -moz-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1) 0s;
  -webkit-transition: all 0.3s cubic-bezier(0, 0, 0.58, 1) 0s;width: 50%; right: -50%; }
.xet-nav-m { position: relative; top: 80px; width: 100%; height: calc((100vh - 250px)); *overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; list-style: none; margin: 0 0 0 17px; padding: 0; text-align: left; }
.xet-nav-m { top: 120px; height: calc((100vh - 220px)); }
.xet-push-right.push-open { right: 0; }
#xet-shadow-layer { background-color: rgba(0, 0, 0, .6); cursor: pointer; display: none; left: 0; min-height: 100%; position: fixed; top: 0; width: 100%; z-index: 101; animation: 0.4s ease 0s normal none 1 running cd-fade-in; }
#xet-shadow-layer.is-visible { display: block; }
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; }
.delay-03s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }

.xet-nav-m li > a::before, .xet-nav-m li > a::after { position: absolute; left: 0; width: 100%; height: 1px; background: #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); transform: translateY(-15px); }
.xet-nav-m li > a::before { top: 0; -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); transform: translateY(-15px); }
.xet-nav-m li > a:hover::before, .xet-nav-m li > a:focus::before, .xet-nav-m li > a:hover::after, .xet-nav-m li > a:focus::after { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }
.xet-nav-m li > a::after { bottom: 0; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); transform: translateY(15px); }

@keyframes cd-fade-in {
	0% {
	    opacity: 0;
	}
	100% {
	    opacity: 1;
	}
}
@media (max-width:600px){
    .warp section .ct .box_left{width: 100%;}
    .warp section .ct .box_rite{display: none;}
    .text_btn h2 { color: #fff; font-size: 30px; }
    .xet-push-right { width: 100%; right: -100%; }
}


.coten_box{background: #000;min-height:100vh;padding-top: 80px;min-width: 360px;padding-bottom: 70px;}
.coten_box .pg_title{ padding: 5px 0 10px;display: flex; justify-content: center;}
.coten_box .pg_title h2{font-size: 30px; color: #fff;font-weight: bold;position: relative;}
.coten_box .pg_title h2:after{content: "";position: absolute;bottom:-6px;width: 30px; height: 2px;background-color: #FEB500; left: 50%; transform: translateX(-50%);}

.quick-link { display: flex; justify-content: center; width: auto; margin:60px 8px; }

.cate_gori{ overflow: hidden; display: grid; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(1,auto); grid-auto-rows: 0; }
.cate_gori a{ display: flex; flex-direction: column; align-items: center; justify-self: center;width: 90px; margin-top: 16px; text-align: center; }
.cate_gori a .quick-link__thumb { display: block; overflow: hidden; margin-right: auto; margin-left: auto; width: 4.8rem; height: 4.8rem; border-radius: 1.9rem; background-color: hsla(0,0%,100%,.3); }
.cate_gori a .quick-link__thumb { width: 56px; height:56px; border-radius: 22px;display: flex; justify-content: center; align-items: center;color: #b7b7b7;}
.cate_gori a .quick-link__thumb, .cate_gori a .quick-link__thumb img { transition-property: all; transition-duration: .4s; transition-timing-function: cubic-bezier(.645,.045,.355,1); }
.cate_gori a .quick-link__thumb:hover{color: #fff;}
.cate_gori a .quick-link__caption { margin-top: 6px; font-size: 12px; color: #ccc; }
.quick-link__thumb img { object-fit: cover; width: 100%; height: 100%; }


.item_list{max-width: 1400px;margin: 0 auto;display: grid; grid-template: auto/repeat(4,1fr);gap: 30px;padding: 0 30px; box-sizing: border-box;}
.item_list .item{transition-property: all; transition-duration: .4s; transition-timing-function: ease-in-out;display: block; overflow: hidden; border-radius: 1rem; transform: translateZ(0);cursor: pointer;}
.item_list .item a.u_link { position: absolute; padding: 5px 10px; color: #fff; font-size: 16px; background: #d13f4a; font-weight: bold; left: 10px; top: 10px; border-radius: 5px; }
.item_list .item a.d_link{ position: absolute; padding: 5px 10px; color: #fff; font-size: 16px; background: #d13f4a; font-weight: bold; left: 66px; top: 10px; border-radius: 5px; }
.item_list .item:focus, .item_list .item:hover { transform: translate3d(0,-16px,0); }
.item_list .item .img_themp img{width: 100%;}
.item_list .item .item_info figcaption{padding:0 20px 20px;background: #333;background-color: #252525;}
.item_list .item .item_info figcaption dl{ position: relative; display: flex; flex-wrap: wrap; overflow: hidden; max-height: 3.4rem; border-bottom: 0.1rem solid hsla(0,0%,100%,.12); font-weight: 700; font-size: 12px; }
.item_list .item .item_info figcaption dl{padding-top:20px;padding-bottom: 10px;}
.item_list .item .item_info figcaption dl dt{ display: flex; align-items: center; justify-content: center; vertical-align: top; box-sizing: border-box; margin-right: 0.8rem; margin-bottom: 0.8rem; padding: 0.2rem 0.8rem; border: 0.1rem solid transparent; border-radius: 0.4rem; background-color: #595959; font-style: normal; color: #fff; }
.item_list .item .item_info figcaption dl dt.caption {border-color: #ed2040; background-color: #ed2040; color: #fff; animation: fade-in .2s ease-in-out forwards; }
.item_list .item .item_info figcaption strong{-webkit-line-clamp: 2; margin-bottom:10px; margin-top: 10px; font-weight: 700; font-size: 20px; color: #fff; height: 54px;;display: block; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; word-wrap: normal;}




/* view */
.catalog-cover { background-color: #000; color: #fff; text-align: center; position: relative; height: 180px;    margin-bottom: 30px;}
.catalog-cover { height: 280px; }
.catalog-cover__description { position: absolute; bottom: 0; display: flex; justify-content: center; width: 100%; margin: 0 auto; }
.catalog-cover__caption { position: relative; z-index: 11; padding-right: 1.6rem; padding-left: 1.6rem; animation: fade-in 1.2s ease-in-out, blur-out 1.2s ease-in-out; will-change: auto; }
.catalog-cover__caption { z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 2rem; text-align: center; text-shadow: 0 0 0.8rem rgba(0,0,0,.25); }
.catalog-cover__caption { max-width: 720px; margin-bottom: 100px; }
.catalog-cover__caption-title { margin-top: 20px; margin-bottom: 0.6rem; font-size: 36px; }

.catalog-category { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; right: 0; top: -3.4rem;font-size: 16px;}
.catalog-category a { position: relative; display: block;    color: #fff; }
.catalog-category a:last-child { font-weight: 700; }

.catalog-panel {z-index: 1; position: fixed; bottom: 0; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; padding: 1rem 2rem; background-color: #333; }
.catalog-panel { position: absolute; flex-direction: column; padding: 0; background-color: transparent; animation: fade-in .2s ease-in; }

.btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 180px;  padding: 16px 12px; border: 0.1rem solid #ed2040; border-radius: 5px; background-color: #ed2040; font-weight: 700; font-size: 16px; color: #fff; text-align: center; transition: filter .2s; }
.catalog-panel__btn { width: 170px; height: 40px; margin-left: 12px; border: none; font-size:14px; }
.catalog-panel__btn--prepared { background-color: #4200ff; }
.catalog-panel__btn { margin-left: 0; }
.btn>span { position: relative; display: flex; align-items: center; }
.btn>span svg{margin-right: 10px;}
.container-fluid .content{max-width: 980px; margin: 0 auto;}


/* view */
section#bo_w { max-width: 800px; margin: 0 auto; }





/* 게시판 */
table { width: 100%; border-collapse: collapse; empty-cells: show; }
.info-notice__posts { text-align: center; }
.info-notice__posts thead { display: table-header-group; }

tbody { display: table-row-group; vertical-align: middle; border-color: inherit; }
.info-notice__posts thead th { width: 16rem; padding: 8px;font-size: 14px; color: #fff; }
.info-notice__posts .title { text-align: left; }
.info-notice__posts thead th.title { width: auto; }
.info-notice__posts thead th { width: 160px; padding: 8px; }
.info-notice__posts tbody tr { display: table-row; padding: 0;border-top: 0.1rem solid #a0a0a0;  border-bottom: 0.1rem solid #a0a0a0;font-size: 14px; color: #fff; }
.info-notice__posts tbody td { padding: 16px 8px; }
.info-notice__posts .title { text-align: left; }
.info-notice__posts tbody .title { flex-basis: 100%; }
.info-notice__posts tbody .title a { display: block;font-size: 14px; color: #fff; }
.info-notice__posts tbody .writer { margin-right: 0; }
.info-layout { padding: 48px 20px; font-size:14px; color: #fff; }
.info-layout { margin-right: auto; margin-left: auto; max-width:1120px; padding-right: 3.5714285714%; padding-left: 3.5714285714%; }
@media (max-width:900px){
  .cate_gori { grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(2,auto); }
  .cate_gori a{width: 80px}
  .item_list{grid-template: auto/repeat(2,1fr);}
  .catalog-cover__caption {max-width: 400px; margin-bottom: 68px;}
  .catalog-category { font-size: 14px;top: -30px;}
  .catalog-panel { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  .catalog-panel__btn { min-width: 280px; height: 45px; margin-left: 16px; font-size: 14px; }
  .catalog-cover { height: 190px; }
  .catalog-cover__caption-title {  font-size: 20px; }

  .info-notice__posts thead { display: none; }
  .info-notice__posts tbody tr { display: flex; padding: 16px 8px; border-top: 0.1rem solid #a0a0a0; border-bottom: 0.1rem solid #a0a0a0; flex-wrap: wrap; }
  .info-notice__posts tbody td { padding: 0; }
  .info-notice__posts tbody .writer { position: relative; margin-right:16px; }
  .info-notice__posts tbody .writer:after { content: ""; position: absolute; top: 50%; right: -8px; width: 1px; height:14px; background-color: #fff; transform: translateY(-50%); }
}
@media (max-width:400px){
  .quick-link {width: calc(400px - 60px); margin-left: auto; margin-right: auto; }
  .cate_gori a{width: 66px}
  .item_list{grid-template: auto/repeat(1,1fr);}
  .cate_gori a .quick-link__thumb { width: 50px; height: 50px;border-radius: 19px;}

  .catalog-cover { position: relative; height: 180px;margin-top: 5px;}
  .catalog-category { font-size: 14px;     top: -30px;}
  .catalog-cover__caption-title { font-size: 18px;margin-top: 5px;  }
  
}