/*reset.css*/
body, html{ margin:0; padding:0; width:100%; height:100%; }
body, html, input, textarea, select, button, table{ 
	font-family: 'noto','Gowun Batang', sans-serif;
	-webkit-font-smoothing:antialiased
 }
form, fieldset, h1, h2, h3, h4, h5, h6, p{ margin:0; padding:0; }
form, fieldset, button{ border:none; }
ol, ul, li{ list-style:none; padding:0; margin:0; }
img{ max-width:100%; }
a{ color:inherit; }
a, a:hover{ text-decoration:none; }

.d-lg-none{ display:none; }
.d-lg-block{ display:block; }

/* font */
.font-gb{font-family: "Gowun Batang", serif !important;}

/*header*/
header{ position:fixed; z-index:99999999; top:0; left:0; width:100%; transition:all .5s; background-color: transparent;}
header, header *{ box-sizing:border-box; }
.hd_con{ width:100%; max-width: 1700px; margin:0 auto; display:flex; justify-content:flex-end; align-items:center; position: relative;}

.lg > a{ display:block; font-size:20px; line-height:1em; white-space:nowrap;}
.lg > a > img{ display:block; width:70px; transition: .5s;}
.mn{ display:flex; align-items:center; position: relative;}


/*gnb*/
.hd_bt{ position:relative; z-index:5; }
#gnb{ position:relative; z-index:5;}
#gnb > ul{ display:flex; flex-flow:row wrap; padding-left: 0; margin-bottom: 0;}
#gnb > ul > li{ position:relative; z-index:1; }
#gnb > ul > li > a{ display:block; padding: 40px 30px; font-size:16px; font-weight:500; transition: all .5s; color: #fff; position: relative;}
#gnb > ul > li > a::after{content: ""; width: 4px; height: 4px; background-color: #fff; border-radius: 50%; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);}
#gnb > ul > li:last-child > a::after{display: none;}
#gnb > ul > li:last-child > a{padding-right: 0;}
#gnb > ul > li > ul{ position:absolute; z-index:1; top:70%; left:50%; transform: translateX(-50%); display:none; width: 100%; box-sizing: border-box; background-color: #fff; padding:20px 5px 20px; text-align: center; border-radius: 15px 0 15px 0; border: 1px solid #ddd;}
#gnb > ul > li > ul > li{ position:relative; z-index:1; text-align: center;}
#gnb > ul > li > ul > li > a{ display:block; padding:8px 0; font-weight: 700; font-size:16px; white-space:nowrap; position: relative; font-family: "Gowun Batang", serif !important;}
#gnb > ul > li > ul > li > ul{ position:absolute; z-index:1; top:0; left:100%; display:none; min-width:120px; box-shadow:2px 2px 4px 0 rgba(0,0,0,.3); }
#gnb > ul > li > ul > li > ul > li > a{ display:block; padding:7px 15px; font-size:15px; }


/*mo_btn*/

/* menu */
.menu-toggler {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 99999;
  background-color: #fff;
  border-radius: 50%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mt-wrap{width: 100%; display: flex; justify-content: space-between; transition: .5s;}
.mt-box{width: 4px; height: 4px; background-color: #000;}

.mt-close{display: inline-block; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); font-size: 20px; color: #000; opacity: 0; transition: .5s;}

.menu-toggler.open .mt-wrap{opacity: 0;}
.menu-toggler.open .mt-close{opacity: 1;}

.mo_mn_mn{ position:fixed; top:100%; left:0; width:100%; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: .5s; padding:60px 0; background-color:#F6F0E6; }
.mo_mn_mn > li{width: 100%; text-align: center;}
.mo_mn_mn > li > a{min-width: 150px; display: inline-block; padding:20px 0; font-size:20px; font-weight:400; text-align:center; color: #636363; position: relative;}
.mo_mn_mn > li > a .depth2btn{display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #fff; position: absolute; top: 50%; right: -30px; font-size: 12px; line-height: 22px; color: #000; transform: translateY(-50%); transition: .5s;}
.mo_mn_mn > li > a .depth2btn > i{transition: .5s;}
.mo_mn_mn > li > a .depth2btn.on > i{transform: rotate(180deg); transform-origin: center;}
.mo_mn_mn > li > a .depth2btn.on{line-height: 18px;}
.mo_mn_mn > li > ul{ display:none; padding: 0 0 1.5rem;}
.mo_mn_mn > li > ul > li > a{ display:block; padding:10px 25px; font-size:15px; color: #666; font-weight:400; text-align:center; }

.mo_mn_mn.mt-open{top: 0; z-index: 99998;}

.mt-link{padding: 1rem 0; position: absolute; left: 0; bottom: 0; width: 100%; display: flex; background-color: #F6F0E6;}
.mt-link > a{font-size: 12px; color: #000; display: block; width: 33.33333%; text-align: center; position: relative;}
.mt-link > a::after{content: ""; width: 1px; height: 13px; background-color: #999; position: absolute; top: 3px; right: 0;}
.mt-link > a:last-child::after{display: none;}

/* mo-link */
.mo-link{padding: 1rem 0; position: fixed; left: 0; bottom: 0; width: 100%; display: flex; background-color: #F6F0E6; z-index: 999999; border-top: 1px solid #ddd;}
.mo-link > a{font-size: 12px; color: #000; display: block; width: 33.33333%; text-align: center; position: relative;}
.mo-link > a::after{content: ""; width: 1px; height: 13px; background-color: #999; position: absolute; top: 3px; right: 0;}
.mo-link > a:last-child::after{display: none;}

@media(max-width:1699px){
  .hd_con{ padding:0 3rem; }
} 

@media(max-width:991px){ 
  .mn{ display:none; }

  .mo_btn{ display:block; }

  .d-none{ display:none; }
  .d-block{ display:block; }
  .mo_btn{ display:block; }
}


/*wrapper*/
.article_mover{ position:absolute; z-index:-1; bottom:100%; }


/*footer*/
footer{background-color: #F6F0E6;}
.ft-wrap{padding: 100px 15px; width: 100%; max-width: 1140px; margin: 0 auto;}
.ft-wrap > h2{font-size: 60px; color: #1c1c1c; margin-bottom: 1.5rem; font-weight: 800; text-align: center;}
.ft-wrap > h2 > span{font-size: 40px;}
.ft-map{width: 100%; border-radius: 20px; border: 1px solid #ddd; overflow: hidden; margin-bottom: 1rem;}

.ft-info{width: 100%; display: flex; justify-content: flex-end; align-items: center;}
.ft-info > p{font-size: 14px; color: #636363; font-weight: 400; line-height: 1;}
.ft-info > p > i{margin-right: 5px;}
.ft-info > p > span.copybtn{font-size: 13px; padding: 5px 10px; background-color: #fff; display: inline-block; margin-left: 5px; cursor: pointer;}
.ft-info > p:last-child{position: relative; padding-left: 13px; margin-left: 13px;}
.ft-info > p:last-child::before{content: ""; width: 1px; height: 13px; background-color: #999; position: absolute; top: 1px; left: 0;}

.ft-con{padding: 0 15px 1.5rem; text-align: center;}
.ft-con > p{font-size: 12px; line-height: 1.5; color: #636363; text-align: center;}

.root_daum_roughmap{width: 100% !important;}
.root_daum_roughmap .wrap_controllers{display: none;}

/* mediaquery */

@media(min-width:992px){ 
  .d-lg-none{ display:none; }
  .d-lg-block{ display:block; }

  .mo-link{display: none;}
  .menu-toggler{display: none;}

  .ft-info-mo{display: none;}
}

@media(max-width:991px){ 
  .fixed-wrap{ display:none; }
  .allmenu-wrap{ display:none; }
  .d-none{ display:none; }
  .d-block{ display:block; }

  .hd_con{padding: 0 15px;}

  footer{background-color: #fff;}
  .ft-wrap{padding: 50px 0;}
  .ft-con{padding: 0 15px 100px;}
  .ft-wrap > h2{font-size: 36px;}
  .ft-wrap > h2 > span{font-size: 24px;}
  .ft-map{border: none; border-radius: 0;}
  .root_daum_roughmap .wrap_map{height: 300px !important;}
  .ft-info{display: none;}
  .ft-info-mo{display: flex; padding: 0 15px; flex-direction: column; align-items: center;}
  .ft-info-mo > p{font-size: 14px; margin-bottom: 10px; color: #636363;}
  .ft-info-mo > .copybtn{display: inline-block; padding: 8px 3rem; border-radius: 5px; background-color: #F6F0E6; color: #636363; font-weight: 400;}

  #greyLayer{
    position: fixed; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none;
    z-index: 9999;
  }
  #overLayer{
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 97%;
      min-height: 80px;
      padding: 7px;
      background-color: #fff;
      display: none;
      z-index: 99999999;
  }
  #overLayer::after{
      content: "x";
      display: block;
      width: 30px; height: 30px;
      border-radius: 50%;
      background-color: #fff;
      color: #1c1c1c;
      line-height: 26px;
      font-size: 20px;
      text-align: center;
      position: absolute; top: 15px; right: 15px;
      cursor: pointer;
  }
  #overLayer img{width: 100%;}
  .gray_mask{
      display:none;
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:rgba(0,0,0,0.7);
  }
}