@charset 'utf-8';
/* common */
:root {
    --baseF: 'Pretendard', 'Malgun Gothic', 'verdana', sans-serif;
	--gan : "Gantari", sans-serif;
	--chF : "Noto Sans TC", sans-serif;
	--syn: "Syne", serif;
	--imp: "Imperial Script", serif;
	--mon : "Montserrat", sans-serif;
	--mainC: #004EA2;
	--subC: #;
	--hHeight:90px; 
	--hBg: 405px; 
}

img,
svg path{ transition:all 0.5s; }

.w1720{ max-width:1700px; margin: 0 auto; }

.ch-font{ font-family: var(--chF);}

.flex-box{ display:flex;}
.flex-box.center{ display:flex; justify-content:center; align-items:center; }

body.scrollN{ height: 100vh !important; overflow: hidden !important;}
body.scrollN{ -ms-overflow-style:none scrollbar-width:none }
body.scrollN::-webkit-scrollbar { display: none; }

figure.fit-box { position: relative; width: 100%; height: 100%; overflow: hidden;}
figure.fit-box img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width: 100%; min-height:100%; object-fit: cover;}

body #HappytalkIframe{ opacity: 0; pointer-events:none; transition:bottom 0.7s, opacity 0.5s; }
body.chat #HappytalkIframe{ opacity: 1; pointer-events:auto; }
body.chat-f #HappytalkIframe{ bottom: 40% !important;} 

body #star-box{ position: fixed; bottom: 30px; right: 25px; background: var(--mainC); padding: 15px 30px; padding-right: 100px; color:#fff; z-index: 100; box-shadow:0 0 10px rgba(0,0,0,0.2); border-radius:50px; transition:bottom 0.7s, opacity 0.5s; opacity: 0; pointer-events:none; text-align: right; line-height: 1.5; cursor:pointer;   }
body.chat #star-box{ opacity: 1; pointer-events:auto; }
body.chat-f #star-box{ bottom: 51% !important;} 

#mobile{ display:none; }

#top-btn{ display:inline-block; }
#top-btn:hover .circle{ fill:#fff; }
#top-btn:hover .arrow path{ stroke: #000; }

/*#inquiry-btn{ position: fixed;  z-index: 10; bottom: 30px; right: 30px; display:inline-flex; align-items:center; padding: 0 17px; height: 70px; border-radius:50px; background: var(--mainC);}*/
/*#inquiry-btn .txt{ margin: 0 20px 0 13px; text-align: right; color:#fff; letter-spacing: -0.48px;}*/

#dimmed{ position: fixed; top: 0; left: 0; width: 100%; height: 100%;	background: rgba(0,0,0,0.7); z-index: 100001; display:none; }

#viewbtn{ display:flex; align-items:center; color:#000; font-size:18px; font-weight: 500; letter-spacing: -0.54px; }
#viewbtn span{ display:block; position: relative; }
#viewbtn span em{ font-family: var(--gan); }
#viewbtn span:after{ content:''; display:block; width: 0; height: 1px; background: #000; position: absolute; bottom: 0; left: 0; transition:all 0.5s; } 
#viewbtn figure{ position: relative; margin-left: 10px; width: 30px; height: 30px; background: url(/img/common/viewBg.png) no-repeat 50% 50%; }
#viewbtn figure svg{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; transition:all 0.4s; }
#viewbtn figure .on{ opacity: 1; }
#viewbtn figure .off{ left: 0%; opacity: 0; }
#viewbtn:hover span:after{ width: 100%; }
#viewbtn:hover figure .on{ opacity: 0; left: 100%; }
#viewbtn:hover figure .off{ left: 50%; opacity: 1; }
#viewbtn.white,
#viewbtn.blue,
#viewbtn.black{ color:#fff; }
#viewbtn.white figure,
#viewbtn.blue figure,
#viewbtn.black figure{ background: url(/img/common/viewBg2.png) no-repeat 50% 50%; }
#viewbtn.white figure svg path{ stroke: #000; }
#viewbtn.blue{ background: var(--mainC); width: 300px; height: 80px; justify-content:center; }
#viewbtn.blue figure svg path{ stroke:var(--mainC); }
#viewbtn.black{ background: #000; width: 300px; height: 80px; justify-content:center; }
#viewbtn.black figure svg path{ stroke:#000; }
#viewbtn.blue span:after,
#viewbtn.black span:after,
#viewbtn.white span:after{ background: #fff; }

#title-box{ margin-bottom: 60px; }
#title-box .title{ color:#222; font-weight: 500; }
#title-box .title span{ color:var(--mainC); }
#title-box .txt{ color:#333; font-weight: 300; line-height: 1.7; margin-top: 20px;}

.mb100{ margin-bottom: 100px; }

.depth3,
.depth4{ display:none; }

/* header */
header{ position: relative; position: fixed; top: 0; left: 0; z-index: 100000; width: 100%; height: var(--hHeight); transition:background 0.5s; }
header:after{ content:''; display:block; width: 0; height: 1px; background: #eee; position: relative; left: 0; transition:all 1s; }
header .header-box{ position: relative; display:flex; justify-content:space-between; align-items:center; padding: 0 100px; height: 100%; }
header .gnb-bg{ position: absolute; top: 0; left:0; display:block;  width: 100%; height: 0; background: #fff; transition: all 0.5s 0.2s; }
header .header-box .logo{ flex-shrink:0; position: relative; z-index: 2; }
header .header-box .logo a{ display:block; }
header .header-box .logo a svg{ height: 100%; }
header .header-box nav{ position: relative; position: absolute; transform: translateX(-50%); top: 0; left: 50%; height: 100%; }
header .header-box nav #gnb{ position: relative; display:flex; height: 100%; justify-content: center; transition:all 0.5s 0.2s; }
header .header-box nav #gnb > li{ height: 100%; }
header .header-box nav #gnb > li > a{ display:flex; justify-content:center; align-items:center; height: 100%; padding: 0 40px; font-size:19px; letter-spacing: -0.57px; 
font-weight: 600; transition:padding 0.5s 0.2s, color 0.5s; color:#111; }
header .header-box nav #gnb > li > a svg{ margin-left: 10px; }
header .header-box nav #gnb .depth2{ height: calc(var(--hBg) - var(--hHeight)); padding-top: 50px; pointer-events:none; }
header .header-box nav #gnb .depth2 li{ text-align: center; overflow: hidden; }
header .header-box nav #gnb .depth2 li:not(:last-child){ margin-bottom: 15px;}
header .header-box nav #gnb .depth2 li a{ position: relative; color:#666; font-size:18px; letter-spacing: -0.54px; transform: translateY(100%); display:inline-block; transition:transform 0.3s 0s, color 0.5s; }
header .header-box nav #gnb .depth2 li a:after{ content:''; display:block; width: 0; height: 1px; background: #666; position: absolute; transform:translateX(-50%); left: 50%; bottom: -1px; 
transition:all 0.3s; }
header .header-box nav #gnb .depth2 li:hover a:after{ width: 100%; }
header .header-box .menu-btn{ position: relative; width: 40px; height: 32px; display:flex; justify-content:center; align-items:center; flex-shrink:0; cursor:pointer; }
header .header-box .menu-btn:after,
header .header-box .menu-btn:before{ content:''; display:block; width: 100%; height: 4px; background: #000; position: absolute; transform:translateX(-50%); left: 50%; transition:all 0.5s; }
header .header-box .menu-btn:after{ top: 0; }
header .header-box .menu-btn:before{ top: calc( 100% - 4px ); }
header .header-box .menu-btn span{ position: absolute; display:block; width: 100%; height: 4px; background: #000; transform:translateX(-50%); left: 50%; transition:all 0.5s; }
header .header-box .menu-btn:hover span{ width: 10px; height: 10px; }
header .header-box .menu-btn:hover:after,
header .header-box .menu-btn:hover:before{ width: 10px; height: 10px; transform:translate(-50%,-50%); top: 50%;}

header.white .header-box .logo svg path{ fill:#fff; }
header.white .header-box nav #gnb > li > a{ color:#fff; }
header.white .header-box nav #gnb > li > a svg path{ stroke: #fff; }
header.white .header-box .menu-btn:after,
header.white .header-box .menu-btn:before,
header.white .header-box .menu-btn span{ background: #fff; }

header.blue .logo svg path{ fill:var(--mainC) !important; }
header.blue:after{ width: 100%; transition-delay: 0.5s;}
header.blue .gnb-bg{ height: var(--hBg); box-shadow: 0 0 15px rgba(0,0,0,0.1);  }
header.blue .header-box nav #gnb > li > a{ color:#111; }
header.blue .header-box nav #gnb > li > a svg path{ stroke: #000; }
header.blue .header-box nav #gnb > li:hover > a svg path{ stroke:var(--mainC); }
header.blue .header-box nav #gnb > li:hover > a{ color:var(--mainC); }
header.blue .header-box nav #gnb .depth2{ pointer-events:inherit; }
header.blue .header-box nav #gnb .depth2 li a{ transform: translateY(-1px);  transition:transform 0.3s 0.5s, color 0.5s; }
header.blue .header-box .menu-btn:after,
header.blue .header-box .menu-btn:before,
header.blue .header-box .menu-btn span{ background: #000; }

/*header.blue .header-box .logo svg path{ fill:var(--mainC); }*/
/*header.blue .header-box nav #gnb > li > a{ color:#000;}*/
/*header.blue .header-box nav #gnb > li > a svg path{ stroke:#000; }*/
/*header.blue .header-box .menu-btn:after,*/
/*header.blue .header-box .menu-btn:before,*/
/*header.blue .header-box .menu-btn span{ background: #000; }*/


#allmenu{ position: relative; position: fixed; width: 100%; height: 100%; z-index: 100000; width: 100%; height: 100%; background: #fff; display:none; }
#allmenu .bg{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; z-index: -1;}
#allmenu .allclose{ position: absolute; top: 25px; right: 100px; }
#allmenu .inner-box{ display:flex; flex-direction:column; justify-content:space-between; padding: 150px 100px 50px; height: 100%; }
#allmenu .title-box{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 100px; }
#allmenu .title-box .title{ font-family: var(--gan); font-weight: 500; color:#000; }
#allmenu .title-box .txt{ text-align: right; letter-spacing: -0.66px; line-height: 1.55; color:#222; }
#allmenu .allgnb #gnb{ display:flex; }
#allmenu .allgnb #gnb > li{ width: calc(100% / 5); text-align: center;}
#allmenu .allgnb #gnb > li > a{ display:block; font-size:40px; color:#ccc; font-weight: 600; letter-spacing: -1.2px; margin-bottom: 40px; transition:all 0.5s; }
#allmenu .allgnb #gnb > li > a svg{ margin-left: 10px; vertical-align: super; }
#allmenu .allgnb #gnb > li > a svg path{ stroke: #ccc; }
#allmenu .allgnb #gnb .depth2 li:not(:last-child){ margin-bottom: 15px;}
#allmenu .allgnb #gnb .depth2 li a{ position: relative; display:inline-block; font-size:18px; color:#666; letter-spacing: -0.54px; }
#allmenu .allgnb #gnb .depth2 li a:after{ content:''; display:block; position: absolute; transform:translateX(-50%); left: 50%; bottom: -1px; background: #666; width: 0; height: 1px; 
transition:all 0.3s; } 
#allmenu .allgnb #gnb > li:hover > a{ color:var(--mainC); }
#allmenu .allgnb #gnb > li:hover > a svg path{ stroke:var(--mainC); }
#allmenu .allgnb #gnb .depth2 li:hover a:after{ width: 100%; }
#allmenu .link-box{ align-self: end; display:flex; align-items:center; }
#allmenu .link-box li:not(:last-child){ margin-right: 30px;}
#allmenu .link-box li a{ color:#aaa; font-weight: 500; letter-spacing: -0.54px; font-size:18px; transition:all 0.5s; }
#allmenu .link-box li:hover a{ color:var(--mainC); }

/* footer */
.footer{ position: relative; z-index: 5; background: #171717; overflow: unset;}
.footer .footer-inner{ display:flex; justify-content:space-between; padding: 100px 0; }
.footer .footer-inner > div:first-child{ display:flex; }
.footer .footer-inner > div:last-child{ display:flex; flex-direction:column; align-items: flex-end; }
.footer .footer-inner ul li{ letter-spacing: -0.54px; }
.footer .footer-inner ul li:not(:last-child){ margin-bottom: 15px; }
.footer .footer-inner ul li em{ font-family: var(--gan);}
.footer .footer-inner .link-box{ margin: 0 150px; }
.footer .footer-inner .link-box li a{ color:#fff; font-weight: 500; display:flex; align-items:center; }
.footer .footer-inner .link-box li a svg{ margin-left: 10px;}
.footer .footer-inner .link-box li a svg path{ stroke:#fff; }
.footer .footer-inner .info-box li{ color:#fff; font-weight: 300; }
.footer .footer-inner .info-box li:last-child{ color:rgba(255,255,255,0.4); font-family: var(--gan);}
.footer .footer-inner .family-box{ position: relative; width: 240px; height: 60px; margin-bottom: 20px; }
.footer .footer-inner .family-box:before{ content:''; display:block; position: absolute; bottom: 0; left: 0; height: 100%; border-radius:50px; border:1.5px solid #fff; width: 100%; 
transition:all 0.5s 0.15s; }
.footer .footer-inner .family-box button{ position: relative; width: 100%; height: 100%; color:#fff; display:flex; justify-content:space-between; align-items:center;  padding: 0 25px; text-transform: uppercase; font-family: var(--gan); font-weight: 500; z-index: 2;}
.footer .footer-inner .family-box button:after{ content:''; display:block; position:absolute; transform:translateX(-50%); top: 0; left: 50%; width: calc(100% - 10px); height: 1px; background: #fff; 
width: 180px; transition:all 0.7s; opacity: 0; }
.footer .footer-inner .family-box button img{ transition:all 0.5s; }
.footer .footer-inner .family-box ul{ width: 100%; padding: 30px;display:none; position: absolute; left: 0; bottom: 100%; }
.footer .footer-inner .family-box ul li:not(:last-child){ margin-bottom: 10px; }
.footer .footer-inner .family-box ul li a{ display:block; color:#fff; }
.footer .footer-inner #top-btn{ text-align: right; cursor:pointer; }

.footer .footer-inner .family-box.on:before{ height: 275px; background: #000; border-radius:30px; transition-delay:0s; }
.footer .footer-inner .family-box.on button:after{ opacity: 1;} 
.footer .footer-inner .family-box.on button img{ transform:rotate(180deg); } 

/* privacy */
.privacy { color:#333; width: 100%; box-sizing:border-box; font-size:18px; line-height: 1.66; word-break:break-all; }
.privacy .title-box { margin-bottom: 50px; }
.privacy .title-box .title{ color:#222; font-size:20px; font-weight: 600; letter-spacing: -0.6px; margin-bottom: 30px; line-height: 1.3; }
.privacy .title-box p:not(.title){ letter-spacing: -0.54px; }
.privacy dl:not(:last-child) { padding-bottom:30px;}
.privacy dl dt{ color:#333; font-weight:500; line-height: 1.3; margin-bottom: 10px; }
.privacy dl dd{ color:#666; font-weight: 300; }
.privacy .prev-box{ margin-top: 100px; display:flex; align-items:center; }
.privacy .prev-box .txt{ color:#222; font-weight: 500; letter-spacing: -0.6px; margin-right: 60px; }
.privacy .prev-box .list-box{ position: relative; width: 400px; }
.privacy .prev-box .list-box button{ width: 100%; height: 70px; display:flex; justify-content:space-between; align-items:center; border: 1px solid #DDD; padding: 0 30px; 
color: #666; font-weight: 300; letter-spacing: -0.54px; }
.privacy .prev-box .list-box button img{ filter:invert(1); --webkit-filter:invert(1); width: 14px; transition:all 0.5s; }
.privacy .prev-box .list-box button.on img{ transform:rotate(180deg); }
.privacy .prev-box .list-box .scroll-box{ width: 100%; background: #fff; padding: 10px; position: absolute; transform:translateX(-50%); left: 50%; top: calc(100% - 1px);  border:1px solid #ddd; 
display:none; }
.privacy .prev-box .list-box ul{ width: 100%; max-height: 150px; }
.privacy .prev-box .list-box ul li a{ display:block; width: 100%; padding: 10px 20px; color:#666; font-weight: 300; letter-spacing: -0.54px;  display:flex; justify-content:space-between; align-items:center; background: #fff;}

/* paging */
.paging{ display:flex; align-items:center; justify-content:center; }
.paging .arr{display:flex;margin: 0 10px;}
.paging .arr a{ display:flex; width: 30px; }
.paging .arr a i{ font-size:28px; color:#000; }
.paging .arr a.last,
.paging .arr a.first{letter-spacing:-10px;}
.paging .arr a.last i,
.paging .arr a.first i{-webkit-transform:translateX(-5px);transform:translateX(-5px);}
.paging a{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging ul{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 5px;}
.paging .arr a:not(:last-child),.paging ul li:not(:last-child){margin-right:5px;}
.paging a{ width:30px; height:30px; color: #ccc; line-height: 30px; font-weight: 600; font-size:18px; border-radius:50%; border:none;}
.paging ul li.on a { color:#000; background: transparent;}
.paging .arr a{border:none; color: #666;}
.paging .arr a.first i:last-of-type{transform:translateX(-13px);}
.paging .arr a.last i:first-of-type{transform:translateX(3px);}

.pages{ display:flex; gap:20px; }
.pages div{ width: calc((100% - 20px) / 2); }
.pages div a{ display:block; width: 100%; border: 1px solid #DDD; min-height:100px; padding: 0 60px ; display:flex; align-items:center; gap:60px; transition:all 0.5s;  }
.pages div .title{ display:flex; align-items:center; gap:10px; color:#111; font-weight: 500; letter-spacing: -0.54px; }
.pages div .txt{ max-width:60%; text-overflow: ellipsis;  overflow: hidden; display:-webkit-inline-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; color:#333; font-weight: 300; 
letter-spacing: -0.54px; }
.pages div:last-child a,
.pages div:last-child .title{ flex-direction:row-reverse; }
.pages div:hover a{ border:1px solid #000; gap:50px; }


/* 게시판 */
.board-box{ border-top:1px solid #000; }
.board-box table tr > *{ height: 80px; border-bottom: 1px solid #EEE; }
.board-box table th{ color:#333; letter-spacing: -0.54px; font-weight: 500; }
.board-box table td:not(:nth-child(2)){ text-align: center; color:#666; font-family: var(--gan); font-weight: 300; } 
.board-box table td:nth-child(2){ padding-right: 20%; }
.board-box table td:nth-child(2) p a{ position: relative; display:inline-flex; font-weight: 300; color:#333; letter-spacing: -0.54px; }
.board-box table td:nth-child(2) span{ text-overflow: ellipsis;  overflow: hidden; display:-webkit-inline-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.board-box table td:nth-child(2) img{ position: absolute; transform:translateY(-50%); top: 50%; right: -35px; }
.board-box table td.status{ font-family: var(--baseF); }
.board-box table td.status span{ min-width:75px; height: 35px; border-radius:50px; display:inline-flex; justify-content:center; align-items:center; padding: 0 10px; background: #bbb; color:#fff; 
font-size:16px; font-weight: 500; letter-spacing: -0.48px; }
.board-box table td.status span.on{ background: var(--mainC); }
.board-box table td.status span.ing{ background: #000; }
.board-box table tr.bell td:nth-child(2) p a{ font-weight: 500; }
.board-box table tr.bell td:first-child span{ width: 70px; height: 35px; background: #000; border-radius:50px; display:inline-flex; justify-content:center; align-items:center; color:#fff; 
font-family: var(--baseF); }

.gallery-box{ display:flex; flex-wrap:wrap; gap: 80px 20px; }
.gallery-box .item-box{ width: calc((100% - 60px) / 4);}
.gallery-box .item-box figure{ margin-bottom: 30px; position: relative; width: 100%; aspect-ratio: 435 / 300; height: auto;}
.gallery-box .item-box .txt-box{ display:flex; flex-direction:column; justify-content:space-between; }
.gallery-box .item-box .txt-box .title{ text-overflow: ellipsis;  overflow: hidden; display:-webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 0 0 20px;
color:#111; font-weight: 500; letter-spacing: -0.66px; }
.gallery-box .item-box .txt-box .day{ color:#aaa; font-family: var(--gan); font-weight: 300; }
.gallery-box .item-box:hover figure img{ transform:translate(-50%,-50%) scale(1.1); }

.board-view .content{ border-top:1px solid #000; }
.board-view .content .title-box{ padding: 50px 60px; }
.board-view .content .title-box .title{ color:#222; font-weight: 500; letter-spacing: -1.2px; margin-bottom: 20px; }
.board-view .content .title-box .txt{ display:flex; align-items:center; color:#666; font-weight: 300; letter-spacing: -0.48px; }
.board-view .content .title-box .txt .day{ margin-right: 20px; font-family: var(--gan); }
.board-view .content .file{ border-top: 1px solid #EEE; border-bottom: 1px solid #EEE; padding: 30px 60px; display:flex; align-items:center; color:#666; font-weight: 300; letter-spacing: -0.54px; }
.board-view .content .file span{ color:#222; font-weight: 500; letter-spacing: -0.54px; margin-right: 60px; }
.board-view .content .inner-box{ max-width:1320px; padding: 80px 20px 0; margin: 0 auto 150px; }