@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

/* 1) root 설정  */
:root{
    --inr-narrow: 1280;
    --inr: 1400;
    --inr-wide: 1700;
    --inr-width: .92;
    --primary: #0e6eb8;
    --black: #111;
    --font-pre: 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --font-mon: 'Montserrat', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --font-play: 'Play', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --font-roe: 'ROEHOE-CHAN', 'Pretendard', 'Malgun Gothic', 'Dotum', 'Gulim', Sans-serif;
    --fs65: clamp(28rem, calc(65 / var(--inr) * 100vw), 65rem);
    --fs60: clamp(28rem, calc(60 / var(--inr) * 100vw), 60rem);
    --fs55: clamp(26rem, calc(55 / var(--inr) * 100vw), 55rem);
    --fs50: clamp(26rem, calc(50 / var(--inr) * 100vw), 50rem);
    --fs45: clamp(24rem, calc(45 / var(--inr) * 100vw), 45rem);
    --fs42: clamp(24rem, calc(42 / var(--inr) * 100vw), 42rem);
    --fs40: clamp(24rem, calc(40 / var(--inr) * 100vw), 40rem);
    --fs35: clamp(24rem, calc(35 / var(--inr) * 100vw), 35rem);
    --fs30: clamp(24rem, calc(30 / var(--inr) * 100vw), 30rem);
    --fs28: clamp(22rem, calc(28 / var(--inr) * 100vw), 28rem);
    --fs25: clamp(20rem, calc(25 / var(--inr) * 100vw), 25rem);
    --fs24: clamp(20rem, calc(24 / var(--inr) * 100vw), 24rem);
    --fs22: clamp(20rem, calc(22 / var(--inr) * 100vw), 22rem);
    --fs20: clamp(18rem, calc(20 / var(--inr) * 100vw), 20rem);
    --fs18: clamp(15rem, calc(18 / var(--inr) * 100vw), 18rem);
    --fs17: clamp(15rem, calc(17 / var(--inr) * 100vw), 17rem);
}

/* 2) 폰트설정 */
@media(min-width:1921px){
    html{ font-size: clamp(0px, calc((100 / 1920) * 1vw), 500px ); }
}
@media(max-width:1920px) and (min-width:1280px){
    html{ font-size: clamp(0px, calc((100 / (var(--inr) / var(--inr-width))) * 1vw), 1px ); }
}
@media(max-width:1279px) and (min-width:768px){
    html{ font-size: clamp(0px, calc((100 / 768) * .75vw), 5px ); }
}
@media(max-width:767px){
    html{ font-size: clamp(0px, calc((100 / 360) * .875vw), 5px ); }
}

/* 검색엔진 고려한 숨기기, 로고, 제목, 링크 등, 버튼은 aria-label과 title */
.visually-hidden{ overflow: hidden; position: absolute; width: 0; height: 0; }

/* 선택자 */
::selection{ background: var(--primary); color: #fff; }

/* 말줄임표 */
.ellipsis{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; min-height: 1lh; white-space: normal; word-break: break-all; }
.ellipsis.e2{ -webkit-line-clamp: 2; height: 2lh; }
.ellipsis.e3{ -webkit-line-clamp: 3; height: 3lh; }

/* show, hide */
@media(min-width: 768px){
    #wrap .show-mob{ display: none; }
}
@media(min-width: 1280px){
    #wrap .show-tab{ display: none; }
}
@media(min-width:2561px){
    #wrap .show-qhd{ display: none; }
}
@media(max-width:2560px){
    #wrap .hide-qhd{ display: none; }
}
@media(max-width: 1279px){
    #wrap .hide-tab{ display: none; }
}
@media(max-width: 767px){
    #wrap .hide-mob{ display: none; }
}

/* 3) 레이아웃설정 */
:root{ --header-height: clamp(80rem, calc( 110 / var(--inr) * 100vw ), 110rem); }
body{ accent-color: var(--primary); font: 16rem/1.5 var(--font-pre); color:var(--black); overflow-wrap: break-word; word-break: keep-all; }

/* inner */
.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); }
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }
.inr-narrow{ max-width: calc(var(--inr-narrow) * 1rem); }

header{ position: absolute; inset: 0 0 auto; z-index:10; }
header .inr{ display: grid; align-items: center; height: var(--header-height); }
header .logo a{ display: block; width: fit-content; }
header .logo-img{ display: block; width: clamp(86rem, calc( 119 / var(--inr) * 100vw ), 119rem); height: auto; fill: #6a8588; }
header .gnb{ display: flex; }
header .gnb > li{ position: relative; }
header .gnb > li > a{ display: flex; align-items: center; height: var(--header-height); padding: 0 42rem; font: 600 22rem var(--font-pre); }
header .gnb .box{ visibility: hidden; position: absolute; top: 80%; left: 50%; translate: -50%; min-width: 182px; width: max-content; border-radius: 6rem; padding: 15px 0; background: #fff; opacity: 0; }
header .gnb li:hover .box{ visibility: visible; opacity: 1;}
header .gnb .box a {display: block; padding: 7px; color: var(--black); opacity: 0.6; text-align: center; font-weight:500; transition: .3s;}
header .gnb .box a:hover {opacity: 1;}
.drawer-btn{ justify-self: end; position: relative; width: 43rem; aspect-ratio: 1; }
.drawer-btn .bar{ position: absolute; inset: 0; margin: auto; height: 2px; background: #fff; }
.drawer-btn .b1{ translate: 0 -5rem;}
.drawer-btn .b2{ translate: 0 6rem;}
@media(min-width:1280px){
	header .inr{ grid-template-columns: 1fr auto 1fr; }
}
@media(max-width:1279px){
	header .inr{ grid-template-columns: 1fr auto; }
	header nav{ display: none; }
}

/* mgnb */
.drawer{ position: fixed; inset: 0;  width: 100%; height: 100%; z-index: 11; background: #000 no-repeat 50% / cover; }
.drawer[aria-hidden="true"]{ opacity: 0; height: 0; visibility: hidden; }
.drawer-close {position: absolute; top: 50rem; right: 50rem; width: 43rem; aspect-ratio: 1; }
.drawer-close .bar{ position: absolute; inset: 0; margin: auto; height: 2px; background: #fff; }
.drawer-close .b1 { transition: .5s}
.drawer-close .b2 { transition: .5s}
.drawer[aria-hidden="false"] .drawer-close .b1 {transform: rotate(45deg)}
.drawer[aria-hidden="false"] .drawer-close .b2 {transform: rotate(-45deg)}
.drawer .gnb {width: 100%; max-width: 1500rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; display: grid;  grid-template-columns: repeat(5,1fr); color: #fff; text-align: center;}
.drawer .gnb > li > a {display: block; font-size: var(--fs40); font-weight: 600; margin-bottom: 20rem; pointer-events: none;}
.drawer .gnb > li.direct-menu > a {pointer-events:auto;}
.drawer .box {}
.drawer .box a {display: block; font-size: var(--fs20); padding: 10rem 0; opacity: 0.5;}
.drawer .box a:hover {opacity: 1;}


@media(min-width: 768px){
    .drawer{ background-image: url('../images/main/mgnb-pc.jpg');  }
    
}
@media(max-width: 767px){
    .drawer{ background-image: url('../images/main/mgnb-mo.jpg'); }
    .drawer .gnb > li > a {font-size: 20rem; margin-bottom: 10rem;}
    .drawer .box a {font-size: 15rem; padding: 5rem 0;}
    .drawer .gnb {gap: 30rem 0; grid-template-columns: repeat(2,1fr);}
    .drawer-close {top: 25rem; right: 25rem; width: 35rem;}
    
}

@media(prefers-reduced-motion:no-preference){
    .drawer{ transition: .6s; }
}




footer{ padding: 56rem 0 48rem; background: #2c2c2c; color: #fff; }
footer .inr{ display: grid; }
footer .logo-img{ width: 120rem; height: auto; fill: color-mix(in srgb, currentColor, #0000 80%); }
footer .btn-group{ margin: 25rem 0 30rem; display: flex; gap: 31rem; font-size: 15rem; color: color-mix(in srgb, currentColor, #0000 40%); }
footer address{ display: flex; flex-direction: column; flex-wrap: wrap; gap: 12rem 27rem; max-width: 800rem; font-size: 15rem; color: color-mix(in srgb, currentColor, #0000 40%); }
footer .copyright{ margin-top: 33rem; font: 300 14rem var(--font-pre); color: color-mix(in srgb, currentColor, #0000 60%); }
@media(min-width:768px){
    footer .inr{ grid-template: 'add btn' 'add logo' 'copy logo' 1fr;  }
    footer .logo-img{ grid-area: logo; place-self: end; margin-top: 27rem; }
    footer .btn-group{ grid-area: btn; justify-content: end; margin: 0; }
    footer address{ grid-area: add; flex-direction: row; }
    footer .copyright{ grid-area: copy; }
}

.quick{ position: sticky; bottom: 0; z-index: 9; }
.quick-wrapper{ --space: clamp(5rem, calc(49 / var(--inr) * 100vw), 49rem); position: absolute; right: var(--space); bottom: var(--space); display: grid; gap: 11rem; }
.quick .btn{ display: block; width: 60rem; aspect-ratio: 1; background: no-repeat 50% / cover; border-radius: 50%; }
.quick .blog{ background-image: url('../images/common/quick-blog.png'); }
.quick .top{ background-image: url('../images/common/quick-top.png'); }

@font-face {
    font-family: 'ROEHOE-CHAN';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/ROEHOE-CHAN.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}