@charset "utf-8";
@import url('main.css');
@import url('sub.css');
@import url('board.css');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@100;300;400;500;700;900&&display=swap');
@import url('https://webfontworld.github.io/score/SCoreDream.css');
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
@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=Alex+Brush&display=swap');

@font-face {
    font-family: 'KBIZHanmaumMyungjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KBIZHanmaumMyungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* font-family: "Alex Brush", cursive; */

/*common*/
* {margin:0; padding:0;}

/* 세로 이중스크롤 제거 */
#container{
  -ms-overflow-style: none;
}
#container::-webkit-scrollbar{
 display:none;
}

/*html, body {overflow-x:hidden;}*/
html {font-size:62.5%; scroll-behavior: smooth;}
body {background:#fff; overflow-x: hidden;}
body::-webkit-scrollbar-thumb {height:15%;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {font-family: 'Noto Sans KR', sans-serif;}

div {font-size:0;}

img {vertical-align:middle; object-fit:contain; width: 100%; height: 100%;}
a {display:inline-block; color:#000; text-decoration:none;}
p {font-size:1.9rem; color:#1b1b1b; line-height:25px; font-weight:300; word-break:keep-all;}

ul, ol {list-style:none}

table {border-collapse:collapse; border-spacing:0;}
table caption {width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}

/*wrap*/
#wrap {position:relative; width:100%; text-align:center; min-width:340px;}
#wrap.sub #header {background: #fff;}
#wrap.sub #header .navigation .main-menu .gnb > a p {color: #3e3e3e;}
#wrap.sub #header .h-logo .logo-off{display: none;}
#wrap.sub #header .h-logo .logo-on{display: block;}
.inwrap {position:relative; width:100%;}

/*top*/
#header {position:fixed; width:100%; height:90px; top:0; left:0; background: #1e1a182c; z-index:9999; transition: all 0.5s ease;}
#header.on {background-color: #fff; }
#header.on .gnb > a p {color: #3e3e3e;}
#header.on .h-logo .logo-off{display: none;}
#header.on .h-logo .logo-on{display: block;}

/* #top {position:relative; width:100%; height:119px;}
#top .inwrap {display:flex; justify-content:space-between; align-items:center; width:1280px; height:100%; margin:auto;}
#top .t-place a {display:flex;}
#top .t-place .place-txt {text-align:right;}
#top .t-place .place-txt p:first-child {display:inline-block; font-size:1.3rem; font-weight:400; line-height:1; color:#3a99e2; border:1px solid #d7d7d7; border-radius:100px; padding:3px 17px; box-sizing:border-box;}
#top .t-place .place-txt p:last-child {font-size:1.7rem; font-weight:700; line-height:1; color:#002373; padding:5px 0;}

#top .t-logo {position:absolute; left:50%; margin-left:-142.5px;}

#top .t-tel a {display:flex; align-items:end;}
#top .t-tel p {font-size:2.7rem; font-weight:700; line-height:1; color:#222;}
#top .t-tel p span {font-size:3.5rem;} */

.mobile-menu-btn {display:none;}

/*nav*/
#nav {position:relative; width:100%; height:100%; box-sizing:border-box; z-index: 999999;}

.navigation {position:relative;}
.navigation .inwrap {display:flex;  margin:auto; width: 96%; height: 80px; justify-content: space-between;}
.navigation .inwrap > div {margin-top:21px;}
.navigation a {z-index: 99;}
.navigation .h-logo { position: absolute; top: 10px; width: 271px; height: 74px;}
.navigation .h-logo img {width: 100%}
.navigation .h-logo .logo-off{display: block;}
.navigation .h-logo .logo-on{display: none;}
.navigation .menu-btn {display:flex; position:relative; flex-direction:column; justify-content:center; width:47px; height: 47px; background:#1d1b64; cursor:pointer; border-radius: 50%;}
.navigation .menu-btn span {display:block; width:23px; height:2px; background:#fff; margin:0 11px 5px; transition:all 1s ease;}
.navigation .menu-btn span:nth-child(3) {width:15px;}
.navigation .menu-btn span:last-child {margin-bottom:0;}
.navigation .menu-btn.on span {transition:all 1s ease;}
.navigation .menu-btn.on span:nth-child(1),
.navigation .menu-btn.on span:nth-child(3) {width:0;}
.navigation .menu-btn.on span:nth-child(2) {width:28px;}
.navigation .main-menu {display:flex; justify-content: space-around; position:relative; width:66%; padding-left: 20%; padding-top: 15px;}
.navigation .main-menu .gnb {width:calc(95%/7);}
.navigation .main-menu .gnb > a p {font-size:1.9rem; line-height: 20px; font-weight:500; color:#fff; }
.navigation .main-menu .gnb .lnb {display:none; box-shadow:0 0 3px rgba(0,0,0,0.1); margin-top: 10px; border-radius: 10px; overflow: hidden;}
.navigation .main-menu .gnb .lnb-list li {margin-bottom:0; background:#524bec; text-align: left; padding-left: 12px;}
.navigation .main-menu .gnb .lnb-list li:last-child {margin-bottom:0;}
.navigation .main-menu .gnb .lnb-list li p {font-size:1.6rem; line-height:40px; font-weight:400; color:#bebcff; white-space: nowrap; transition: 0.3s; }
.navigation .main-menu .gnb .lnb-list li p:hover {color: #fff;}
.navigation .main-menu .gnb > a p:after{display:block; content:""; left:0; bottom:0px; width:0%; height:2px; background:#524bec; -webkit-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); margin-top: 10px;}
.navigation .main-menu .gnb > a p:hover:after {width:100%;}
.navigation .main-menu .gnb .lnb-list .inb-sub{margin: 0 0 0 5px;}
.navigation .main-menu .gnb .lnb-list .inb-sub li a p{font-size: 1.5rem; color: #bebcff; line-height: 15px; font-weight: 300;}
.navigation .main-menu .gnb .lnb-list .inb-sub li:hover a p{color: #fff;}
.navigation .main-menu .gnb .lnb-list .inb-sub li:not(:last-child){margin-bottom: 10px;}


.all-menu {display:none; position:relative; width:100%; height: 100vh; margin:auto; background:#fff; overflow-y:scroll;}
.all-menu::-webkit-scrollbar {width:0;}
.all-menu > .inwrap {display:flex; width:1280px; margin:auto; padding:180px 0 60px; background:#fff;}
.all-menu .area {width:calc(30%); border-right:1px solid #eaeaea; box-sizing:border-box;}
.all-menu .area:last-child {border:0;}
.all-menu .area > a p {font-size:1.9rem; font-weight:700; line-height:40px; color:#1d1b64;}
.all-menu .area .menu {padding-top:15px}
.all-menu .area .menu li p {display:inline-block;}
.all-menu .area .menu > li {margin-bottom:15px}
.all-menu .area .menu > li > a  p {font-size:1.7rem; font-weight:500; line-height:30px; color:#1c1c1c;}
.all-menu .area .menu > li > a p:after{display:block; content:""; left:0; bottom:0; width:0%; height:3px; background:#524bec; -webkit-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.all-menu .area .menu > li:hover > a p:after{width:100%;}
.all-menu .area .menu-list li:hover p {color:#004cb4;}
.all-menu .area .menu-list li p {font-size:1.7rem; font-weight:300; line-height:28px; color:#333;}
.all-menu .area .menu .sub-li .mn-sub-li{margin-top: 8px;}
.all-menu .area .menu .sub-li:not(:last-child){margin-bottom: 22px;}
.all-menu .area .menu .sub-li .mn-sub-li li a p{font-size: 1.6rem; font-weight: 400; color: #444444; position: relative;}
.all-menu .area .menu .sub-li .mn-sub-li li a p::after{display:block; content:""; position: absolute; left:0; bottom:0; margin-bottom: -5px; width:0%; height:2px; background:#524bec; -webkit-transition: all 0.2s cubic-bezier(0.34, 0.01, 0.56, 1); -o-transition: all 0.2s cubic-bezier(0.34, 0.01, 0.56, 1); transition: all 0.2s cubic-bezier(0.34, 0.01, 0.56, 1);}
.all-menu .area .menu .sub-li .mn-sub-li li:hover a p::after{width: 100%;}
.all-menu .area .menu .sub-li .mn-sub-li li:not(:last-child){margin-bottom: 12px;}

.mobile-menu {display:none;}
.navigation .h-phone {width: 30px; height: 30px; margin-top: 13px; display: none; }



/*container*/
#container {position:relative; width:100%;}

/*footer*/
#footer {position:relative; width:100%; height:200px; top:0; border-top: 0.7px solid #dedede;}
#footer .inwrap {display:flex; width:1280px; margin:auto; padding-top:25px; text-align:center; flex-direction: column;}
.f-logo { width: 175px; height: 65px; margin: auto;}
.f-txt p {font-size:1.55rem; line-height:180%; font-weight:400; color:#676767; word-break: keep-all;}
.f-txt p strong {font-weight: 500; color:#333;}

/*quick*/
.quick {position:fixed; top:210px; right:8.85%; width:100px; z-index:99999; display: none;}
.quick .q-tel {height:100px; border-radius:10px; background:#0e0e0e; box-shadow:0 0 5px rgba(0,0,0,0.1);}
.quick .q-tel img {padding:12px 0 20px;}
.quick ul {border-radius:10px; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.1); padding:25px 0 40px; margin-top:10px;}
.quick ul li {width:100px; height:50px; margin-bottom:30px; padding: 2px; box-sizing: border-box;} 
.quick ul li:last-child {margin-bottom:0;}
.quick ul li a {height:100%;}
.quick .icon {height:28px; line-height:28px;}
.quick p {font-size:1.4rem; font-weight:500; line-height:1; color:#262626; padding-top:8px;}

/* top */
.q-top {display: none;}


/*scroll*/
.act {opacity:0; transition:opacity 500ms;}
.act.scrolled {opacity:1;}
.scrolled.fade-in {animation:fade-in 0.5s ease-in-out both;}
.scrolled.slide-up {animation:slide-up 0.5s ease-in-out both;}
.scrolled.slide-left {animation:slide-left 0.5s ease-in-out both;}
.scrolled.slide-right {animation:slide-right 0.5s ease-in-out both;}

@keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes slide-up {
    0% {
      -webkit-transform: translateY(100px);
      transform: translateY(100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
}
@keyframes slide-left {
    0% {
      -webkit-transform: translateX(-100px);
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
}
@keyframes slide-right {
    0% {
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
}

.PC {display:block !important;}
.PT {display:none !important;}
.TB {display:none !important;}
.MB {display:none !important;}
.TM {display:none !important;}

@media (max-width: 1699px){
  .navigation .main-menu {display: none;}
}


@media (max-width: 1279px){

/*wrap*/
.inwrap {width:768px; margin: auto;}

/*header*/
#header {height:60px;}

#top {height:60px;}
#top .inwrap {width:100%;}

.navigation .inwrap{height: 60px;}
.navigation .main-menu {display: none;}
.navigation .menu-btn {display: none;}
.navigation .h-logo {width : unset; left: 50%; transform: translateX(-50%); height: 40px; }
.navigation .h-phone {display: block; }
.navigation .h-phone img{object-fit: unset;}
.navigation .h-logo img {width: 100%; height: 40px;}
#header.on .h-logo .name {height: 30px;}


.mobile-menu-btn {display:flex; position:absolute; flex-direction:column; justify-content:left; top:19.5px; left:15px; width:27px; height:21px; cursor:pointer; z-index: 9999999;}
.mobile-menu-btn span {display:block; position:relative; width:100%; height:3px; margin-bottom:6px; transition:all 0.3s ease; background:#222222; z-index: 9;}
.mobile-menu-btn span:nth-child(2) {width:17px;}
.mobile-menu-btn span:last-child {margin-bottom:0;}
.mobile-menu-btn.active span:nth-child(1) {top:9px; transform:rotate(45deg);}
.mobile-menu-btn.active span:nth-child(2) {width:0;}
.mobile-menu-btn.active span:nth-child(3) {transform:rotate(-45deg); margin-top:-10px;}

.mobile-menu::-webkit-scrollbar {width:0;}
.mobile-menu {position:relative; width:100%; height:calc(100vh - 60px); border-top:1px solid #dadada; background:#fff; overflow-y:scroll;}
.mobile-menu {border-top:1px solid #d8d8d8;}
.mobile-menu > .inwrap {display:block; width:768px; padding-top:30px;}
.mobile-menu .mobile-area {display:block; width:100%; border:0}
.mobile-menu .mobile-area .area-title {display:flex; justify-content:space-between; cursor:pointer; padding:0 25px;}
.mobile-menu .mobile-area .area-title p {text-align:left; font-size:3.5rem; font-weight:700; line-height:70px; color:#161f48;}
.mobile-menu .mobile-area .plus {display:block; margin-left:20px;}
.mobile-menu .mobile-area .plus span {display:block; width:20px; height:1px; background:#000;}
.mobile-menu .mobile-area .plus span:nth-child(1) {margin-top:34.5px;} 
.mobile-menu .mobile-area .plus span:nth-child(2) {transform:rotate(90deg);}
.mobile-menu .mobile-area .plus.open span:nth-child(2) {width:0;}
.mobile-menu .mobile-area .title {display:none; padding-top:10px;}
.mobile-menu .mobile-area .title > li {margin-bottom:20px}

.mobile-menu .mobile-area .title > li > a {display:flex;}
.mobile-menu .mobile-area .title > li > a  p {display:inline-block; font-size:2.6rem; font-weight:500; line-height:30px; color:#1c1c1c; text-align:left; padding-left:50px;}
.mobile-menu .mobile-area .title > li > a p:after{display:block; content:""; left:0; bottom:0; width:0%; height:3px; background:#004cb4; -webkit-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.mobile-menu .mobile-area .title > li:hover > a p:after{width:100%;}
.mobile-menu .mobile-area .title-list {display:none;}
.mobile-menu .mobile-area .title-list li {margin-top:5px;}
.mobile-menu .mobile-area .title-list li:last-child {margin-bottom:10px;}
.mobile-menu .mobile-area .title-list li:hover p {color:#004cb4;}
.mobile-menu .mobile-area .title-list li p {font-size:1.9rem; font-weight:300; line-height:30px; color:#333;}
.mobile-menu .mobile-area .title .title-sub > li > a {font-size:2rem; font-weight:500; line-height:30px; color:#1c1c1c; text-align:left; padding-left:65px;  display : block;}
.mobile-menu .mobile-area .title .sb > a{margin-bottom : 8px;}



/*footer*/
#footer {height:180px; top: 60px;}
#footer .inwrap {display:block; width:768px; padding-top:20px; text-align:center;}
.f-logo {padding-right:0; margin-bottom:10px;}
.f-txt p {font-size:1.5rem; line-height:22px;}


/*quick*/
.quick {top: 90px; right: 3%;}
.quick .inwrap {width:768px; max-width:1279px; min-width:768px}
.quick ul {display: block;}

}


@media (max-width: 767px){

/*wrap*/
.inwrap {width:340px;}

.PC {display:none !important;}
.PT {display:none !important;}
.TB {display:none !important;}
.TM {display:none !important;}
.MB {display:block !important;}


/*header*/
#header {height:60px;}
  
#top {height:60px;}
#top .inwrap {width:100%;}
#top {opacity:1;}
#top .t-tel {right: 5px;}
#top .t-logo {margin-left:-75px;}
#top .t-logo img {width:160px; height:50px;}
.mobile-menu-btn {width:20px; height:19px; left: 10px;}
#top .mobile-menu-btn span {width:28px; height:4px; margin:0 auto 5px;}
#top .mobile-menu-btn span:nth-child(2) {width:28px;}
#top .mobile-menu-btn.active span:nth-child(3) {margin-top:-18px;}
#top.move .t-logo {margin-left:-75px;}
.mobile-menu {height:calc(100vh - 60px);}
.mobile-menu > .inwrap {width:340px; padding:15px 0 100px;}
.mobile-menu .mobile-area .area-title {padding:0 25px 0 5px;}
.mobile-menu .mobile-area .area-title p {font-size:2.8rem; line-height:64px;}
.mobile-menu .mobile-area .title {padding:0;}
.mobile-menu .mobile-area .title > li {margin-bottom:10px;}
.mobile-menu .mobile-area .title > li > a  p {font-size:2rem; padding-left:30px;}
.mobile-menu .mobile-area .title-list li p {font-size:1.8rem;}
.mobile-menu .mobile-area .title .title-sub{margin-top: 0;}
.mobile-menu .mobile-area .title .title-sub > li > a{font-size: 1.8rem; line-height: 28px; padding-left: 50px; }
.mobile-menu .mobile-area .title .sb > a{margin-bottom : 5px;}


.navigation .h-logo {width: 200px; height: 38px; top: 11px; left: 50%;}
.navigation .h-logo img{height: 38px;}

/*footer*/
#footer {height: 130px; top: 10px; padding-bottom: 100px; margin-top:50px;}
#footer .inwrap {width: 100%; height: 100%; padding-top: 0px;}
.f-txt p {font-size:1.2rem; line-height:18px;}
.f-txt p:nth-child(2){width :300px; margin : 0 auto;}
.f-logo {padding-top: 15px; height: 45px;}



/*quick*/
.quick p{font-size: 1.3rem;}
.quick {position:fixed; top:auto; bottom: 0; background:#fff; width: 100%; height: 80px; right: auto; box-shadow: 0 0 5px rgba(0,0,0,0.2); display: block;}
.quick .q-tel {display: none;}
.quick .inwrap {width:340px; max-width:767px; min-width:340px}
.quick ul {display:flex; width: 340px; position: absolute; left: 50%; transform: translateX(-50%); justify-content: center; top:unset; right:unset; padding: 0; margin-top: 0; box-shadow: none; border-radius:unset;}
.quick ul li {width:calc(26% - 3px); height:80px; border-radius:unset; box-shadow:unset; margin-bottom:0; }
.quick ul li:last-child {margin-right: 0;}
.quick ul li::after {display:block; content:""; width:1px; height:80px; background:#e6e6e6; margin:-78px 5px 0 83px;}
.quick ul li:last-child::after {display:none;}
.quick .icon {padding-top:10px;}
.quick p {padding-top: 13px; padding-bottom: 20px; white-space: nowrap;}
.quick ul li a:nth-child(2) {margin-top: -80px;}

}