/*# sourceURL=asset/css/gnb.css */
/*@ sourceURL=asset/css/gnb.css */
/* HEADER */
#header {position:fixed; top:0px; left:0; right:0; width:100%; background-color:#fff; z-index:9999; transition:.3s;}

/* GNB */
#gnb {position:relative; border-bottom:1px solid #dcdddd; background-color:inherit; z-index:9100; transition:.5s;}
#gnb > .container {-webkit-box-align:center; -ms-flex-align:center; align-items:center;}
#gnb .logo-box > .sidebar-btn {display:none; position:absolute; top:50%; right:16px; width:30px; height:20px; transform:translateY(-50%);}
#gnb .logo-box > .sidebar-btn > span {position:absolute; display:inline-block;}
#gnb .logo-box > .sidebar-open-btn > span {left:0; width:100%; height:2px; background-color:#333;}
#gnb .logo-box > .sidebar-open-btn > span:nth-child(1) {top:0;}
#gnb .logo-box > .sidebar-open-btn > span:nth-child(2) {top:50%;}
#gnb .logo-box > .sidebar-open-btn > span:nth-child(3) {top:100%;}
#gnb .logo-box > .sidebar-close-btn {opacity:0; transform:scale(0) translateY(-50%); transform-origin:top; transition:.3s;}
#gnb .logo-box > .sidebar-close-btn > span {top:-4px; left:15px; width:2px; height:31px; background-color:#fff;}
#gnb .logo-box > .sidebar-close-btn > span:nth-child(1) {transform:rotate(45deg);}
#gnb .logo-box > .sidebar-close-btn > span:nth-child(2) {transform:rotate(-45deg);}
#gnb .menu-box .gnb-list {-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
#gnb-panel .panel-list > .panel-item {-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}

#gnb .gnb-box .icon-group {padding:1.2rem 0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-flow:row; flex-flow:row; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
#gnb .menu-box .gnb-list .gnb-item {/* position:relative; *//* display:inline-block; *//* padding:0; */position: relative;font-size: 16px;font-weight: 500;padding: 0rem;}
/*#gnb .menu-box .gnb-list .gnb-item:before,
 #gnb .menu-box .gnb-list .gnb-item:after {content:''; position:absolute; bottom:-2px; width:0; height:4px; background-color:#0765ed; transition:.2s ease-out;}
#gnb .menu-box .gnb-list .gnb-item:before {left:50%;}
#gnb .menu-box .gnb-list .gnb-item:after {right:50%;} */
#gnb .menu-box .gnb-list .gnb-item > a { letter-spacing: -1px; display:inline-block;padding: 1rem .2rem;width:100%;font-size: 15px;font-weight:500;transition:.3s;text-align: center;}
#gnb .menu-box .gnb-list .gnb-item > ul {visibility:hidden; opacity:0; position:absolute; top:100%; left:50%; right:0; width:100%; min-width:110px; padding:0; background-color:#fff; box-shadow: 0 0 4px rgba(0, 0, 0, .25); transform:translate(-50%, 16px); transition:.3s;}
#gnb .menu-box .gnb-list .gnb-item > ul:before {content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -6px; height: 0; width: 0; border: 6px solid transparent; border-bottom-color: #fff; transform:translateX(-50%);}
#gnb .menu-box .gnb-list .gnb-item.on-focus:before,
#gnb .menu-box .gnb-list .gnb-item.on-focus:after,
#gnb .menu-box .gnb-list .gnb-item.on-active:before,
#gnb .menu-box .gnb-list .gnb-item.on-active:after {width:50%;}
#gnb .gnb-util-box {position:relative; text-align:right;}
#gnb .gnb-util-box > .util-list {line-height:1;}
#gnb .gnb-util-box > .util-list > .util-btn {display:inline-block; margin:0; padding:6px; background:none; border:0; outline:0; vertical-align:middle; font-weight:500;}
#gnb .gnb-util-box > .util-list > .util-btn  ~ .util-btn  {margin-left:.5rem;}
#gnb .gnb-util-box > .util-list > .util-btn.util-sidebar {display:none;}

.gnb_center {justify-content: center;}

/* SIDEBAR BUTTON */
.sidebar-btn {position:absolute; top:50%; right:0; width:20px; height:12px; cursor:pointer; transition:.5s ease-in-out; transform:translateY(-50%);}
.sidebar-btn > span {display:block;position:absolute;right:0;width:100%;height:2px;background-color: #ffffff;border-radius:9px;opacity:1;transition:.25s ease-in-out;}

/* GNB EFFECT */
#gnb.on-active .logo-box > .sidebar-open-btn {transform:scale(0) translateY(-50%);}
#gnb.on-active .logo-box > .sidebar-open-btn > span {background-color:#fff;}
#gnb.on-active .logo-box > .sidebar-close-btn {opacity:1; transform:scale(1) translateY(-50%);}
/* GNB PANEL */
#gnb-panel {position:absolute; left:0; right:0; background-color:#fff; box-shadow:0 0 6px rgba(0, 0, 0, .5); visibility:hidden; opacity:0; z-index:1;  transform:translateY(-100%);  transition:.3s; }
#gnb-panel .panel-list > .panel-item {padding:.5rem 0; border-right:1px solid #eeefef; transition:.3s;}
#gnb-panel .panel-list > .panel-item:first-child {border-left:1px solid #eeefef;}
#gnb-panel .panel-list > .panel-item > a {display:block; padding:.6rem .5rem; font-size:15px; font-weight:300; color:#3e3a39; text-align:center; word-break:keep-all; word-wrap:break-word; transition:color .3s;}
#gnb-panel .panel-list > .panel-item:not(.empty).on-active,
#gnb-panel .panel-list > .panel-item:not(.empty):hover {background-color:#eeefef;}
#gnb-panel .panel-list > .panel-item > a.on-active,
#gnb-panel .panel-list > .panel-item > a:hover {color:#0765ed; font-weight:400;}
/* GNB PANEL EFFECT */
#gnb-panel.on-active {visibility:visible; opacity:1; transform:translateY(0);}
/* #gnb-panel .panel-list {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
#gnb-panel .panel-list .panel-item {width: auto;}
#gnb-panel .panel-list .panel-item {    margin: 0 30px; position: relative;font-size: 16px;font-weight: 500;} */
/**/
#gnb .menu-box .gnb-list .gnb-item {width: 7%;}
#gnb-panel .panel-list > .pure-u-1-12 {width: 7%;}
#gnb-panel .panel-list {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}






.btn.large, 
.btn-two.large, 
.btn-effect.large {
  padding: 20px 40px; 
  font-size: 22px;
}
.btn.small, 
.btn-two.small, 
.btn-gradient.small, 
.btn-effect.small {
  padding: 5px 0px;  
  font-size: 14px;
}
.btn.mini, 
.btn-two.mini, 
.btn-gradient.mini, 
.btn-effect.mini {
  padding: 4px 12px;  
  font-size: 12px;
}
.btn.block, 
.btn-two.block, 
.btn-gradient.block, 
.btn-effect.block {
  display: block;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.btn-gradient.large {
  padding: 15px 45px; 
  font-size: 22px;
}

/* Colors for .btn and .btn-two */
.btn.blue, .btn-two.blue     {background-color: #7fb1bf;}
.btn.green, .btn-two.green   {background-color: #9abf7f;}
.btn.red, .btn-two.red       {background-color: #fa5a5a;}
.btn.purple, .btn-two.purple {background-color: #cb99c5;}
.btn.cyan, .btn-two.cyan     {background-color: #7fccde;}
.btn.yellow, .btn-two.yellow {background-color: #f0d264;}

.rounded {
  border-radius: 10px;
}

/* default button style */
.btn {
  position: relative;
  border: 0;
  padding: 15px 25px;
  display: inline-block;
  text-align: center;
  color: white;
}
.btn:active {
  top: 4px; 
}

/* color classes for .btn */
.btn.blue {box-shadow: 0px 4px #74a3b0;}
.btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;}

.btn.green {box-shadow: 0px 4px 0px #87a86f;}
.btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;}

.btn.red {box-shadow:0px 4px 0px #E04342;}
.btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;}

.btn.purple {box-shadow:0px 4px 0px #AD83A8;}
.btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;}

.btn.cyan {box-shadow:0px 4px 0px #73B9C9;}
.btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;}

.btn.yellow {box-shadow:0px 4px 0px #D1B757;}
.btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;}

/* Button two - I have no creativity for names */
.btn-two {
  color: #000;
  padding: 15px 25px;
  display: inline-block;
  /* border: 1px solid rgb(0 0 0 / 7%); */
  text-shadow:0 1px 0 rgba(0,0,0,0.15);
  /*box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 0 3px 0 -1px rgba(0,0,0,0.08), 0 -3px 12px -6px rgb(0 0 0 / 39%);*/
}
.btn-two:active {
  top: 1px;
  border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);
  box-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset;
  position: relative;
}
/* 3D Button */
.btn-3d {
  position: relative;
  display: inline-block;
  font-size: 22px;
  padding: 20px 60px;
  color: white;
  margin: 20px 10px 10px;
  border-radius: 6px;
  text-align: center;
  transition: top .01s linear;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
.btn-3d.red:hover    {background-color: #e74c3c;}
.btn-3d.blue:hover   {background-color: #699DD1;}
.btn-3d.green:hover  {background-color: #80C49D;}
.btn-3d.purple:hover {background-color: #D19ECB;}
.btn-3d.yellow:hover {background-color: #F0D264;}
.btn-3d.cyan:hover   {background-color: #82D1E3;}

.btn-3d:active {
  top: 9px;
}

/* 3D button colors */
.btn-3d.red {
  background-color: #e74c3c;
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 #C24032,
        0 8px 0 1px rgba(0,0,0,0.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.red:active {
  box-shadow: 0 0 0 1px #c63702 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.blue {
  background-color: #6DA2D9;
  box-shadow: 0 0 0 1px #6698cb inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(110, 164, 219, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.blue:active {
  box-shadow: 0 0 0 1px #6191C2 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.green {
  background-color: #82c8a0;
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(126, 194, 155, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.green:active {
  box-shadow: 0 0 0 1px #82c8a0 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.purple {
  background-color: #cb99c5;
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(189, 142, 183, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.purple:active {
  box-shadow: 0 0 0 1px #cb99c5 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.cyan {
  background-color: #7fccde;
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(102, 164, 178, .6),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.cyan:active {
  box-shadow: 0 0 0 1px #7fccde inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

.btn-3d.yellow {
  background-color: #F0D264;
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 8px 0 0 rgba(196, 172, 83, .7),
        0 8px 0 1px rgba(0,0,0,.4),
        0 8px 8px 1px rgba(0,0,0,0.5);
}
.btn-3d.yellow:active {
  box-shadow: 0 0 0 1px #F0D264 inset,
        0 0 0 2px rgba(255,255,255,0.15) inset,
        0 0 0 1px rgba(0,0,0,0.4);
}

/* Gradient buttons */
.btn-gradient {
  text-decoration: none;
  color: white;
  padding: 10px 30px;
  display: inline-block;
  position: relative;
  border: 1px solid rgba(0,0,0,0.21);
  border-bottom: 4px solid rgba(0,0,0,0.21);
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
/* Gradient - ugly css is ugly */
.btn-gradient.cyan {
  background: rgba(27,188,194,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(27,188,194,1)), to(rgba(24,163,168,1)));
  background: -webkit-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -moz-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: -o-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  background: linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbcc2', endColorstr='#18a3a8', GradientType=0);
}

.btn-gradient.red{ 
  background: rgba(250,90,90,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(250,90,90,1)), to(rgba(232,81,81,1)));
  background: -webkit-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -moz-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: -o-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  background: linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5a5a', endColorstr='#e85151', GradientType=0 );
}
.btn-gradient.orange {
  background: rgba(255,105,30,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,105,30,1)), to(rgba(230,95,28,1)));
  background: -webkit-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -moz-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: -o-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
  background: linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
}
.btn-gradient.blue {
  background: rgba(102,152,203,1);
  background: -moz-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,152,203,1)), color-stop(100%, rgba(92,138,184,1)));
  background: -webkit-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -o-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: -ms-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  background: linear-gradient(to bottom, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 );
}
.btn-gradient.purple { 
  background: rgba(203,153,197,1);
  background: -moz-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,153,197,1)), color-stop(100%, rgba(181,134,176,1)));
  background: -webkit-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -o-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: -ms-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  background: linear-gradient(to bottom, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb99c5', endColorstr='#b586b0', GradientType=0 );
}
.btn-gradient.yellow {
  background: rgba(240,210,100,1);
  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240,210,100,1)), to(rgba(229,201,96,1)));
  background: -webkit-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -moz-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: -o-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  background: linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0 );
}
.btn-gradient.green {
  background: rgba(130,200,160,1);
  background: -moz-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(130,200,160,1)), color-stop(100%, rgba(130,199,158,1)));
  background: -webkit-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -o-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: -ms-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
  background: linear-gradient(to bottom, rgba(130,200,160,1) 0%, rgba(124, 185, 149, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c8a0', endColorstr='#82c79e', GradientType=0 );
}

.btn-gradient.red:active    {background: #E35252;}
.btn-gradient.orange:active {background: #E8601B;}
.btn-gradient.cyan:active   {background: #169499;}
.btn-gradient.blue:active   {background: #608FBF;}
.btn-gradient.purple:active {background: #BD8EB7;}
.btn-gradient.yellow:active {background: #DBC05B;}
.btn-gradient.green:active  {background: #72B08E;}


.main_top_f {display: flex;flex-direction: row;flex-wrap: wrap;width: 460px;justify-content: flex-end;}
.fz-18 p {font-size: 15px !important;}



@media screen and (max-width:1690px){
#gnb .menu-box .gnb-list .gnb-item {margin: 0 20px;}
#gnb-panel .panel-list > .pure-u-7-24 {width: 25.3%;}
#gnb-panel .panel-list > .pure-u-8-24 {width: 31.4%;}
#gnb .menu-box .gnb-list .gnb-item {width: auto;}


}
@media screen and (max-width:1440px){
#gnb .menu-box .gnb-list .gnb-item {margin: 0 15px;}


}
@media screen and (max-width:1024px){

#gnb .menu-box .gnb-list .gnb-item > a {padding: 0.4rem 0.2rem; font-size: 13px;}

#gnb .menu-box .gnb-list .gnb-item {margin: 0 5px;}

}



@media screen and (max-width:768px){
#gnb .menu-box .gnb-list {display: none;}
#gnb-panel {display: none;}




.btn.small, .btn-two.small, .btn-gradient.small, .btn-effect.small {padding: 6px 0px;}
.main_top_f {width: 100%; justify-content: center; align-items: center !important;; font-family: 'NanumSquareNeo-Variable';}
.top_fixe ul li {width: 21%; margin: 2px;}
.btn-two {display: flex;gap:5px; flex-wrap: nowrap; align-items: center !important;}
.btn-two p{font-size: 12px;	  font-family: 'NanumSquareNeo-Variable';  }

.fz-14 p{font-size: 12px !important;}

}


@media screen and (max-width:390px){


.btn-two {gap:5px}
.top_fixe ul li {margin: 3px;}
.btn.small, .btn-two.small, .btn-gradient.small, .btn-effect.small {padding: 6px 0;}


}