@charset "UTF-8";

/* 공용 */
* {
  box-sizing: border-box;
  word-break: keep-all;
}
.flex-box {
  display: flex;
  flex-flow: row wrap;
}

:root {
  --white: #ffffff;
  --black: #000000;
  --mainColor: #005AAB;
  --subColor: #71BF44;

  --black01: #292e41;
  --black02: #222;
  --black03: #333;
  --black06: #666;
  --black09: #999;

  --textBlack01: #222;
  --textBlack02: #323B50;

  --gray01: #eee;
  --gray02: #67738e;
  --gray03: #373f57;
  --gray04: #999999;
  --gray05: #dddddd;
  --gray06: #666666;
  --gray07: #5c667b;
  --gray08: #404040;

  --blue01: #0066ff;
  --blue02: #00ffff;
  --blue03: #00ccff;
  --blue04: #2d65f2;

  --purple01: #562dff;
  --purple02: #f6f3ff;
  --purple03: #a2a0fd;

  --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --box-shadow2: 0 10px 30px rgba(29, 44, 78, 0.4);
  --dim-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  --gnb-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  
  --size11: 0.688rem;
  --size12: 0.75rem;
  --size13: 0.8125rem;
  --size14: 0.875rem;
  --size15: 0.9375rem;
  --size16: 1rem;
  --size17: 1.063rem;
  --size18: 1.125rem;
  --size20: 1.25rem;
  --size22: 1.375rem;
  --size24: 1.5rem;
  --size25: 1.5625rem;
  --size26: 1.625rem;
  --size28: 1.75rem;
  --size30: 1.875rem;
  --size34: 2.125rem;
  --size35: 2.1875rem;
  --size36: 2.25rem;
  --size38: 2.375rem;
  --size40: 2.5rem;
  --size45: 2.8125rem;
  --size48: 3rem;
  --size50: 3.125rem;
  --size55: 3.4375rem;
  --size60: 3.75rem;
  --size62: 3.875rem;
  --size80: 5rem;
}

body,html {
  position: relative; 
  scroll-behavior: smooth; 
  font-size: 16px;
  font-family: 'Pretendard';
  letter-spacing: 0;
}
b {
 font-weight: 600;
}
caption {
    text-indent: -9999px;
    height: 0;
}
.inner {
  max-width: 1280px;
  width: calc(100% - 20px);
  margin: 0 auto;
}

.mt50 {margin-top: 3.125rem;}
.mt40 {margin-top: 2.5rem;}

.wrap {padding-top: 8.3125rem;}

.logo-wrap img,
.img-wrap img {
  display: block;
  max-width: 100%;
}
.btn01 {
  width: 7.5rem; 
  height: 2.563rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--mainColor);
  color: #fff;
  font-size: var(--size14);
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.btn02 {
  width: 7.5rem; 
  height: 2.563rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
  background-color: #fff;
  font-size: var(--size14);
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
a.btn01 {
  width: 100%;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--mainColor);
  color: #fff;
  font-weight: 600;
  font-size: var(--size16);
  line-height: 1.375;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
a.btn02 {
  width: 100%;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
  background-color: #fff;
  font-weight: 600;
  font-size: var(--size16);
  line-height: 1.375;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.btn-area {
    display: flex;
    justify-content: center;    
    margin-top: 50px;
}
.btn-area .btn-step,
.btn-area .btn-down {
  width: 12.5rem;
  height: 3.125rem;
  border-radius: 10px;
  background: var(--white);
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
  font-weight: 600;
  font-size: var(--size16);
  line-height: 3.125;
  text-align: center;
  margin: 0 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.btn-area .btn-step:last-child {
  background: var(--mainColor);
  color: var(--white);
}
.btn-area.t2 {
    justify-content: end;  
    margin: 0 0 50px;
}
.btn-area.t3 { 
    margin-bottom: 50px;
}
.btn-area .btn03,
.btn-area .btn-modify {
  width: 12.5rem;
  height: 3.125rem;
  border-radius: 10px;
  background: var(--mainColor);
  color: var(--white);
  font-weight: 500;
  font-size: var(--size16);
  line-height: 3.125;
  text-align: center;
  margin: 0 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.btn-area.half {
  width: 50%;
  margin: 0 auto;
  justify-content: space-between;
  gap: 10px;
}
.btn-area .btn-down {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0;
}
a.btn-search {
  display:block;
  width: 12.5rem;
  height: 3.125rem;
  border-radius: 10px;
  background: var(--mainColor);
  color: var(--white);
  border: 1px solid var(--mainColor);
  font-weight: 600;
  font-size: var(--size16);
  line-height: 3.125;
  text-align: center;
  margin: 0 auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
a.btn-search.tin01 {
  height: 2.563rem;
  line-height: 2.563;
}
a.btn-search.tin01.mg0 {
  margin: 0;
}
a.btn-search.tin01.bbs {
  margin: 2.125rem auto;
}
a.btn-search.tin02 {
  height: 2.563rem;
  line-height: 2.563;
  width: 5rem;
}
a.btn-search.bbs {
  margin: 0;
}
a.btn-fn {
    display: inline-block;
    width: 5rem;
    height: 2.563rem;
    line-height: 2.563;    
    color: var(--white);
    font-weight: 600;
    font-size: var(--size16);
    text-align: center;
    margin: 0 auto;
    background: var(--mainColor);
    border: 1px solid var(--mainColor);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
a.btn-fn.fd {
    height: 3.75rem;
    line-height: 3.75;
    margin: 0;
}

a.btn-fn.del,
a.btn-fn.cancel {
    background: var(--black03);
    border: 1px solid var(--black03);
}
a.btn-fn.print,
a.btn-fn.go,
a.btn-fn.map {
    background: var(--subColor);
    border: 1px solid var(--subColor);
}
a.btn-fn.go {
    margin-left: 10px;
}
a.btn-fn.map {
    font-size: var(--size14);
    font-weight: 400;
    height: 2.188rem;
    line-height: 2.188rem;
}
a.link {
    font-size: var(--size16);
    color: var(--mainColor);
    text-decoration: underline;
}
select {
    width: 100%;
    height: 41px;
    border: 1px solid #ddd;
    background: url(../img/sub/select_arr.png) #fff no-repeat 90% 50%;    
    font-size: 1rem;
    color: var(--textBlack01);
    letter-spacing: -0.03em;
    appearance: none;
    z-index: 5;
    padding:0 10px 0 20px;
    border-radius: 10px;
}
.gap {
    padding: 2.5rem 0;
}
.mgap {
    padding: 3.75rem 0 0;
}
.sgap {
    padding: 1.25rem 0;
}

/*=======================================================
  paging-wrap
=========================================================*/
.paging-wrap{margin-top:30px;font-size:0px; text-align:center; display:block; position:relative;}
.paging-wrap a.ctrl{display:inline-block;vertical-align:top;text-decoration: none; width:40px; height:40px; border:1px solid #d9d9d9;  box-sizing:border-box; margin:0 3px;background-size:100% auto !important}
.paging-wrap li, .paging-wrap ul{display:inline-block; vertical-align:top;}
.paging-wrap ul{padding:0 2px}
.paging-wrap li{margin:0 3px;}
.paging-wrap li a{display:block; position:relative; text-decoration: none;min-width:40px; height:40px; box-sizing:border-box ;font-size:15px;border:1px solid #d9d9d9; color:#999; text-align:center;line-height:40px;font-weight:400;box-sizing:border-box;}
.paging-wrap li a.active, .paging-wrap li a.active:hover{color:#fff;background: var(--mainColor);; border-color: var(--mainColor);}

.paging-wrap a.prev{background:url(../img/sub/page-prev.jpg) no-repeat center center;}
.paging-wrap a.next{background:url(../img/sub/page-next.jpg) no-repeat center center;}

@media (max-width: 1280px){
  body,html {
    font-size: 15px;
  }
  .wrap {
    padding-top: 127px;
  }
}

@media (max-width: 1024px){
  body,html {
    font-size: 14px;
  }
  .wrap {
    padding-top: 124px;
  }
}

@media (max-width: 768px){
  body,html {
    font-size: 13px;
  }

  .wrap {
    padding-top: 119px;
  }
}

@media (max-width: 480px){
  body,html {
    font-size: 12px;
  }

  .wrap {
    padding-top: 114px;
  }
}

@media (max-width: 320px){
}

/* header */
#header {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
}
#header .top-box {
  padding: 17px 0;
}
#header .top-box .inner {
  justify-content: space-between;
  align-items: center;
}
#header .top-box h5 {
  font-weight: 500;
  font-size: var(--size14);
  line-height: 1;
  color: #323B50;
}
#header .top-box ul {
  gap: 0.9375rem;
  align-items: center;
}
#header .top-box ul .line {
  height: 10px;
  border: 1px solid var(--gray05);
}
#header .top-box ul .login-li p,
#header .top-box ul .login-li a,
#header .top-box ul .textSize h6 {
  font-weight: 500;
  font-size: var(--size14);
  line-height: 1;
  color: #323B50;

}
#header .top-box ul .login-li span:first-child {
  padding-right: 10px;
}
#header .top-box ul .login-li span {
  font-weight: 700;
  font-size: var(--size16);
}
#header .top-box ul .textSize {
  display: flex;
  gap: 10px;
  align-items: center;
}
#header .top-box ul .textSize a {
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--gray05);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80%;
}

#header .bottom-box {  
}
#header .bottom-box .inner {
  align-items: flex-end;
  justify-content: space-between;
}
#header .bottom-box .logo-wrap {
  width: 18rem;
  padding: 0 0 1.5625rem;
}
#header .bottom-box .nav-wrap {
  align-items: center;
  max-width: calc(100% - 18rem);
  gap: 3.4375rem;
  padding: 0 0 1.5625rem;
}
#header .bottom-box #nav {
  gap: 3.125rem;
}
#header .bottom-box #nav > li > a {
  font-weight: 600;
  font-size: var(--size20);
  line-height: 1;
  letter-spacing: 0;
  color: var(--black02);
  /*padding: 0 1.5625rem;*/
}
#header .all-btn {
  display: none;
}
#header .gnb-wrap {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  background-color: #fff;
  width: 100%;
  box-shadow: 0px 4px 10px 0px #00000040;
  border-top: 1px solid #ddd;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#header .gnb-wrap.open {
  max-height: 1000px;
}

#header .gnb {
  display: none;
}

#header .gnb.active {
  display: block;
}

#header .gnb .flex-box {
  padding-top: 2.5rem;
}
#header .gnb h4 {
  font-weight: 600;
  font-size: var(--size30);
  line-height: 1;
  color: var(--textBlack01);
  width: 14.375rem;
}
#header .gnb-list {
  width: calc(100% - 14.375rem);
  display: flex;
  flex-flow: row wrap;
}
#header .gnb-list > li {
  width: 20%;
  height: 21.125rem;
  padding: 0 0.938rem;
  letter-spacing: -0.04em;
  border-left: 1px solid #ddd;
}
#header .gnb-list > li > a {
  font-weight: 500;
  font-size: var(--size18);
  line-height: 1;
  color: var(--textBlack01);
}
#header .gnb-list >li > .depth2 {
  margin-top: 15px;
}
#header .gnb-list >li > .depth2 > li {}
#header .gnb-list >li > .depth2 > li > a {
  font-weight: 400;
  font-size: var(--size16);
  line-height: 1.8125;
  color: var(--textBlack01);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  padding-left: 1.5625rem;
  position: relative;
}
#header .gnb-list >li > .depth2 > li > a::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--textBlack01);
  position: absolute;
  top: 50%;
  left: 0.6875rem;
  transform: translateY(-50%);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

#header .gnb-list > li:hover > a {
  text-decoration: underline;
  text-underline-offset: 6px;
}
#header .gnb-list >li > .depth2 > li:hover > a {
  color: var(--mainColor);
}
#header .gnb-list >li > .depth2 > li:hover > a::before {
  background-color: var(--mainColor);
}

@media (max-width: 1280px){
  #header .bottom-box #nav {
  gap: 0;
    }
  #header .bottom-box #nav > li > a {
    padding: 0 1vw;
  }
}

@media (max-width: 1024px){
  #header .bottom-box .inner {
    align-items: center;
  }
  #header .bottom-box .logo-wrap {
    padding:15px 0;
  }
  #header .bottom-box #nav {
    display: none;
  }
  #header .all-btn {
    display: block;
  }
  #header .bottom-box .nav-wrap {
    padding-bottom: 0;
  }
}

@media (max-width: 764px){}

@media (max-width: 480px){}

@media (max-width: 320px){}

/* footer */
#footer {
  background: #373737;
  padding: 2.5rem 0 6.75rem;
}

#footer .inner {
  gap: 4.375rem;
}
#footer .logo-wrap {
  width: 17.3125rem;
}
#footer .text-wrap {
  margin-top: 12px
}
#footer .text-wrap ul {
  gap: var(--size15);
  align-items: center;
}
#footer .text-wrap ul li:first-child a {
  color: #79C0FF;
  font-weight: 600;
}
#footer .text-wrap ul li a {
  font-weight: 400;
  font-size: var(--size17);
  line-height: 2;
  letter-spacing: 0;
  color: #fff;
}
#footer .text-wrap ul li.line {
  height: 10px;
  border: 1px solid var(--white);
  opacity: 0.2;
}
#footer .text-wrap p {
  font-weight: 400;
  font-size: var(--size16);
  line-height: 1.8125;
  color: rgba(255,255,255,0.7);
  margin-top: var(--size15);
}
#footer .text-wrap p .span-wrap {}
#footer .text-wrap p .span-wrap span {
  color: rgba(255,255,255,0.7);
}
#footer .text-wrap h6 {
  font-weight: 400;
  font-size: var(--size15);
  line-height: 2;
  letter-spacing: 0;
  color: var(--white);
  opacity: 0.7;
  margin-top: 5px;
}

@media (max-width: 1280px){}

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

@media (max-width: 768px){
  #footer .inner {gap: 2rem;}
}

@media (max-width: 480px){}

@media (max-width: 320px){}

#qickmenu {
  position: fixed;
  top: 16.875rem;
  right: 0;
  width: 6.25rem;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  overflow: hidden;
  z-index: 999;
}
#qickmenu h5 {
  background-color: var(--subColor);
  font-weight: 700;
  font-size: var(--size17);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 3.125rem;
  color: #fff;
}
#qickmenu ul {
  background-color: #fff;
  width: 100%;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 0 9px 0px;
}
#qickmenu ul li {
  border-bottom: 1px solid #ddd;
}
#qickmenu ul li:last-child {border: none;}
#qickmenu ul li a {
  display: block;
  padding: 11px 0;
  font-weight: 400;
  font-size: var(--size14);
  line-height: 1.214286;
  text-align: center;
  color: var(--textBlack02);
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  text-align: center;
}
#qickmenu ul li a:hover {
  color: var(--subColor);
}
#qickmenu button {
  background-color: var(--subColor);
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 400;
  font-size: var(--size14);
  line-height: 1;
  color: #fff;
}

@media (max-width: 1280px){}

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

@media (max-width: 764px){}

@media (max-width: 480px){}

@media (max-width: 320px){}

/* mobile menubar */

.mobile-gnb-bg {    

  width: 100vw;

  height: 100vh;

  position: fixed;

  top: 0;

  right: 0;

  z-index: 890;

  background-color: rgba(0, 0, 0, 0.5);

  transition: opacity 0.3s ease;

  -webkit-transition: opacity 0.3s ease;

  -moz-transition: opacity 0.3s ease;

  -ms-transition: opacity 0.3s ease;

  -o-transition: opacity 0.3s ease;

  opacity: 0;

  visibility: hidden;

}

.mobile-gnb-bg.active {

  opacity: 1;

  visibility: visible;

}

.mobile-nav {
  position: fixed;
  top: 0%;
  right:-100%;
  padding: 4rem 0 0;
  width: 100vw;
  max-width: 500px;
  height:100vh;
  background: #fff;
  z-index:900;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.mobile-nav.on {
  right: 0;
}
/* .mobile-nav .pc {
  width: 100%;
  height: 100%;
}
.mobile-nav #sitemap {
  display: flex;
  flex-flow: row wrap;
  max-width: 1525px;
  width: calc(100% - 40px);
  margin: 0 auto;  
}
.mobile-nav #sitemap > li {
  width: 20%;
}
.mobile-nav #sitemap > li a {
  color: #fff;
}
.mobile-nav #sitemap > li > a {
  font-weight: 800;
  font-size: var(--size24);
  line-height: 1.41667;
  letter-spacing: 0;
}
.mobile-nav #sitemap > li > .depth2 {
  margin-top: 1.875rem;
}
.mobile-nav #sitemap > li > .depth2 > li.hasDepth {
  margin-top: 0.625rem;
}
.mobile-nav #sitemap > li > .depth2 > li > a {
  font-weight: 700;
  font-size: var(--size18);
  line-height: 1.5;
  letter-spacing: 0;
  padding: 5px 0;
}
.mobile-nav #sitemap .lnb-depth2 {
  padding-bottom: 0.625rem;
}
.mobile-nav #sitemap .lnb-depth2 > li {}
.mobile-nav #sitemap .lnb-depth2 > li a {
  font-family: 'Inter';
  font-weight: 400;
  font-size: var(--size16);
  line-height: 2;
  letter-spacing: 0;
  padding-left: 1.5rem;
  position: relative;
}
.mobile-nav #sitemap .lnb-depth2 > li a::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 0.84375rem;
  left: 0.5625rem;
  background-color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
} */

/* .mobile-nav #sitemap > li:hover > a {
  color: var(--mainColor);
} */

.mobile-nav-box .mobile-nav-top {
  text-align: right;
  font-size: 0; 
  padding: 4.8rem 0 0; 
  box-sizing: border-box;
}
.mobile-nav-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 0 4rem 2rem;
  border-bottom: 1px solid #ddd;
}
.mobile-nav-top ul {
  display: flex;
}
.mobile-nav-top li {
  display: inline-block; 
  vertical-align: middle; 
  padding: 0 2rem 0 0; 
  position: relative; 
}
.mobile-nav-top li a { 
  display: inline-block; 
  background-repeat:no-repeat; 
  background-position: center; 
  line-height: 1; 
  font-size: var(--size18);
  color:#9a9a9a;
  vertical-align: middle;
}
.mobile-nav-top li:last-of-type {
  padding: 0;
}
.mobile-nav-top li:after {
  content: ''; 
  display: block; 
  width: 1px; height: 0.6rem; 
  background: #9a9a9a; 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  right: 1rem;
}
.mobile-nav-top li:last-of-type:after {
  content: initial;
}
.mobile-nav-top button {
  background: #F3F6F9;
    color: var(--black);
  width: 5rem;
  height: 1.875rem;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: var(--size14);
  line-height: 1;
  letter-spacing: 0;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
  transition: all 0.3s;
}
.mobile-nav-top button .language-box {
  width: 0.75rem;
  height: 0.75rem;
  background: url(/img/common/language_on.png) no-repeat center center / cover;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.mobile-nav-close {
  position: absolute; 
  right: 30px; 
  top: 1.8rem; 
  font-size: 0; 
  width:24px; 
  height:24px;
  background: url(../img/common/nav_clos_btn.png) no-repeat;    
  background-position: center ; 
  background-size: contain; 
}
.respon-gnb {
  padding: 0rem 0rem 5rem; height: 100%;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE, Edge */
  -webkit-overflow-scrolling: touch; /* iOS 何靛矾款 胶农费 */
  overflow-y: auto;
  position: relative;
}
.respon-gnb::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
.respon-gnb > li > a {
  display: inline-block;
  width:100%; 
  font-size:var(--size24); 
  font-weight:500; 
  color:#333;    
  line-height: 1;
  padding: 20px 2rem;
}
.respon-gnb > li {
  border-bottom: 1px solid #ddd;
}
.respon-gnb > li:last-child {
  margin-bottom: 0;
}
/* .respon-gnb > li > a {
  background: url(../img/common/nav_arr.png) right center no-repeat; 
  background-size:11px 18px;
}
.respon-gnb > li.active > a {
  background-image: url(../img/common/nav_btmarr.png); 
  background-size:18px 11px;
} */
.respon-gnb .mobile-depth2 {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  display: none;
  overflow: hidden;
  width: 50%;
  padding: 1rem 2rem 5rem;
  height: 100%;
  border-left: 1px solid #ddd;
}
.respon-gnb > li.active > a {position: relative;}
.respon-gnb > li.active > a::before {
  content: "";
  display: block;
  width: 4px;
  height: calc(100% + 0px);
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.respon-gnb > li.active .mobile-depth2 {
  /* max-height: 1000px;
  margin-top: 20px; */
  display: block;
}
.respon-gnb .mobile-depth2 li {
  /* margin-bottom: 20px; */
  padding: 12.5px 0;
}
.respon-gnb .mobile-depth2 li:last-child {
  margin-bottom: 0;
}
.respon-gnb .mobile-depth2 > li > a {
  display:block; 
  /* padding-left: 20px; */
  line-height: 1; 
  font-size: var(--size24); 
  color:#555;
}
.respon-gnb .mobile-depth2 .lnb-depth2 {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  
}
.respon-gnb .mobile-depth2 .lnb-depth2 > li {
  padding: 5px;
}
.respon-gnb .mobile-depth2 .lnb-depth2 > li > a {
  display:block; 
  line-height: 1; 
  font-size: var(--size20); 
  color:#555;
}

.respon-gnb .mobile-depth2 > li.hasDepth > a {
  background: url(../img/common/nav_arr.png) right center no-repeat; 
  background-size:11px 18px;
}
.respon-gnb .mobile-depth2 > li.hasDepth.on > a {
  background-image: url(../img/common/nav_btmarr.png); 
  background-size:18px 11px;
}
.respon-gnb .mobile-depth2 > li.hasDepth.on .lnb-depth2 {
  max-height: 1000px;
  margin-top: 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
}

@media all and (max-width: 1024px) {
  .mobile-nav {
    background-color: #fff;
  }
  .mobile-nav-close {
    position: absolute; 
    right: 30px; 
    top: 1.8rem; 
    font-size: 0; 
    width:15px; 
    height:15px;
    background: url(../img/common/nav_clos_btn.png) no-repeat;    
    background-position: center ; 
    background-size: contain; 
  }
}
@media all and (max-width: 768px) {
  .mobile-nav {
    width: 100%;
  }
}

@media all and (max-width: 480px) {}
@media all and (max-width: 400px) {}