@charset "utf-8";
html{
  overflow-x: hidden;
  position: relative;
  height: 100%;
}

 .layout{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
#top_layout{
  width: 100%;
  position: static;
  left:0px;
  background: #FFFFFF;
  z-index: 11;
  top:-80px;
  transition: all .4s ease-in-out;
}
#top_layout .layout{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0
}
#top_layout  .logo{
  width: 131px;
  height: 31px;
}
#top_layout .logo a{
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  background-size: cover;
  background-image: url(../images/logo.svg);
}
#gnb_layout ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 745px;
}

#gnb_layout ul li a{
  display: block;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-size: 19px;
  line-height: 28px;
  color: #000;
  transition:  all .4s ease-in-out;
  position: relative;
  padding-bottom: 5px;
}
#gnb_layout ul li a::before{
  content: "";
  display: block;
  position: absolute;
  bottom:0px;
  height: 3px;
  background: #C799EC;
  width: 0;
  opacity: 0;
  left:50%;
  transition:  all .4s ease-in-out;

}
#gnb_layout ul li a:hover{
  color: #7E44AC;
}
#gnb_layout ul li a:hover::before{
  width: 100%;
  left:0;
  opacity: 1;
}
#gnb_layout ul li a.on,#gnb_layout ul li a.on,#gnb_layout ul li a.on{
  color: #7E44AC;
}
#gnb_layout ul li a.on::before,#gnb_layout ul li a.on::before,#gnb_layout ul li a.on::before{
  width: 100%;
  left:0;
  opacity: 1;
}
.lang{
  display: flex;
  align-items: center;
  justify-content: center;
}
.lang li a{
  display: block;
  color: #a9a9a9;
  font-weight: 700;
  font-size: 14px;
  line-height: 33px;
  padding: 0 10px;
  position: relative;
  transition: all .3s;
  
}
.lang li:first-child a::after{
  display: block;
  content: "";
  background: #a9a9a9;
  width: 1px;
  height: 12px;
  position: absolute;
  top:50%;
  right:0px;
  transform: translate(0, -50%);
}
.lang li.on a,.lang li a:hover{
  color: #1B21A5;
}
.lang li.on a::before{
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 0 0;
  top:50%;
  transform: translate(0,-50%);
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.24863 0.210907C5.31576 0.278559 3.48883 1.11077 2.16919 2.52467C0.849548 3.93857 0.145101 5.81845 0.210753 7.75139C0.244239 8.70917 0.466109 9.65096 0.863598 10.523C1.26109 11.3951 1.82642 12.1803 2.52738 12.8338C3.22835 13.4873 4.05121 13.9964 4.94893 14.3319C5.84664 14.6674 6.80167 14.8229 7.75945 14.7893C9.69232 14.7216 11.5193 13.8894 12.8389 12.4755C14.1585 11.0616 14.8629 9.18163 14.7972 7.24869C14.7637 6.29091 14.542 5.34911 14.1445 4.47707C13.747 3.60502 13.1816 2.81981 12.4806 2.16628C11.7796 1.51274 10.9569 1.00369 10.0592 0.668176C9.16144 0.332664 8.20641 0.177312 7.24863 0.210907ZM12.3243 2.71628C11.8178 2.95368 11.2914 3.14627 10.7513 3.29193C10.3971 2.35713 9.8212 1.52238 9.07296 0.859496C10.3044 1.15421 11.4283 1.78918 12.3162 2.69194L12.3243 2.71628ZM7.63781 4.28921C8.59196 4.24074 9.5394 4.10228 10.4675 3.87569C10.8334 4.92068 11.0464 6.01304 11.1 7.11893L7.74322 7.24057L7.63781 4.28921ZM7.63781 3.79463L7.52428 0.713606C8.63509 0.819011 9.63243 1.84871 10.3054 3.41357C9.42512 3.62645 8.52633 3.75404 7.62158 3.79463H7.63781ZM7.03782 0.729838L7.14322 3.81086C6.24474 3.83413 5.34603 3.7717 4.45939 3.62439C4.99453 2.01088 5.92699 0.908216 7.02158 0.729838H7.03782ZM7.15946 4.30544L7.26487 7.24869L3.9081 7.37033C3.87789 6.2568 4.01175 5.14492 4.30539 4.07037C5.2412 4.24496 6.19127 4.33178 7.14322 4.32979L7.15946 4.30544ZM3.4054 7.38656L0.721567 7.48386C0.714544 6.02423 1.18114 4.60171 2.05131 3.4298C2.62803 3.67116 3.2249 3.86105 3.83505 3.99733C3.5291 5.09474 3.38711 6.23138 3.41351 7.37033L3.4054 7.38656ZM3.4054 7.88115C3.45689 9.02377 3.67818 10.1524 4.0621 11.2298C3.4635 11.399 2.88031 11.6187 2.31884 11.8865C1.37294 10.7852 0.804643 9.40996 0.697219 7.96221L3.4054 7.88115ZM3.89998 7.88115L7.25675 7.7595L7.36216 10.7109C6.4082 10.756 5.4607 10.8917 4.53244 11.1163C4.16286 10.0723 3.94972 8.97938 3.89998 7.87303V7.88115ZM7.37839 11.2217L7.4837 14.3028C6.381 14.1974 5.37566 13.1676 4.71079 11.6027C5.5879 11.3849 6.48385 11.2519 7.38641 11.2055L7.37839 11.2217ZM7.97838 14.2866L7.87297 11.2055C8.77146 11.1825 9.67004 11.2449 10.5567 11.3919C10.0054 12.9892 9.08109 14.0595 7.9865 14.2703L7.97838 14.2866ZM7.84863 10.7109L7.75133 7.7595L11.1081 7.64598C11.1359 8.75726 10.9993 9.8666 10.7027 10.9379C9.76371 10.7682 8.8109 10.6867 7.85674 10.6946L7.84863 10.7109ZM11.6027 7.62975L14.2945 7.53245C14.3004 8.99189 13.8339 10.4141 12.9648 11.5865C12.3866 11.3513 11.79 11.1642 11.181 11.0271C11.483 9.92889 11.625 8.79284 11.6027 7.6541V7.62975ZM11.6027 7.13516C11.5472 5.99038 11.3259 4.85968 10.9459 3.7784C11.544 3.60782 12.1271 3.3882 12.6891 3.12169C13.639 4.22053 14.2079 5.59716 14.3108 7.04599L11.6027 7.13516ZM5.48102 1.02172C4.78318 1.73042 4.26353 2.59464 3.96481 3.54333C3.41238 3.43094 2.87004 3.2736 2.34319 3.07299C3.17292 2.1051 4.25708 1.38894 5.47291 1.00549L5.48102 1.02172ZM2.68377 12.2758C3.1932 12.0454 3.7189 11.8529 4.25669 11.7C4.61172 12.6344 5.18762 13.4689 5.93512 14.1325C4.70445 13.8357 3.58115 13.201 2.69188 12.3L2.68377 12.2758ZM9.54319 14.0108C10.2414 13.3038 10.7587 12.4388 11.0513 11.4892C11.6031 11.6005 12.1453 11.7551 12.6729 11.9514C11.839 12.913 10.7518 13.6209 9.53508 13.9947L9.54319 14.0108Z' fill='%231B21A5' stroke='%231B21A5' stroke-width='0.5' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
}
.lang li:first-child.on a::before{left:-12px;}
.lang li:last-child.on a::before{right:-12px;}

#toTop{
  display: block;
  width: 60px;
height: 60px;
background-color: #5B59D1;
border-radius: 50%;
background-position: center;
background-repeat: no-repeat;
font-size: 0;
background-image: url(../images/toTop.svg);
position: absolute;
top:-30px;
right:35px;
transition: all .4s ease-out;
}
#toTop:hover,#toTop:focus,#toTop:active{
  background-color: #7E44AC;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='23' viewBox='0 0 20 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.82944 0.344999L0.349259 8.82518C0.127777 9.03815 -5.97632e-07 9.32778 -5.84041e-07 9.6387C-5.69891e-07 9.96241 0.119259 10.2563 0.344999 10.482C0.796481 10.9335 1.53333 10.9335 1.98481 10.482L8.47593 3.98667L8.47593 21.8372C8.47593 22.4761 8.99556 23 9.6387 23C10.2819 23 10.8143 22.4804 10.8143 21.8372L10.8143 3.98667L17.2926 10.482C17.7569 10.9293 18.498 10.9293 18.9452 10.482C19.1667 10.2563 19.2902 9.96241 19.2902 9.65148L19.2902 9.6387C19.2902 9.32778 19.1624 9.03815 18.9452 8.82518L10.4693 0.349258C10.252 0.123518 9.95815 -4.35284e-07 9.64296 -4.21507e-07C9.33204 -4.07916e-07 9.04241 0.123518 8.82944 0.344999Z' fill='white'/%3E%3C/svg%3E%0A");
}

@media(max-width:1399px){
  #top_layout .layout,.layout{padding-left: 30px;padding-right: 30px;}
  #gnb_layout{
    width: 100%;
    max-width: 480px;
  }
  #gnb_layout ul{width: 100%;}
  
}

@media(max-width:1023px){
  #gnb_layout ul li a{
    font-size: 17px;
  }
}
@media(max-width:900px){
  #top_layout{background: #fff;}
  #top_layout .layout{
    flex-wrap: wrap;
    padding: 0;
  }
  #top_layout .logo{
    order:0;
    width: 102px;
    height: 25px;
    margin:   10px 0;
    margin-left: 30px;
  }
  .lang{order:1;margin-right: 30px;}
  #gnb_layout{
    order:2;
    width: 100%;
    max-width: 100%;
    background: #F6F6F6;
  }
  #gnb_layout ul li{
    width: 25%;
  }
  #gnb_layout ul li a{
    text-align: center;
    padding:  10px 0;
    font-size: 14px;
    color: #777;
  }
}
@media(max-width:767px){
   #toTop{display: none;}
}
@media(max-width:459px){
    #top_layout .logo{
    margin-left: 15px;
  }
  .lang{margin-right: 15px;}
  .layout{
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* 하단 푸터 */
.footer {position: relative; background-color: #282F3F; z-index: 100;}
.footer .footer-top {border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.footer .footer-top .util-list {padding-top: 25px; padding-bottom: 25px;}
.footer .footer-top .util-list .util-item {display: inline-block; position: relative; margin: 3px 0; margin-right: 60px;}
.footer .footer-top .util-list .util-item:last-child {margin-right: 0;}
.footer .footer-top .util-list .util-item:not(:last-child)::before {content: ""; display: inline-block; position: absolute; top: 5px; right: -34px; width: 1px; height: 16px; background-color: #949CB7;}
.footer .footer-top .util-list .util-item a {font-size: 17px; color: #FFFFFF;}
.footer .footer-top .util-list .util-item a.color-green {color: #C7EE59;}

.footer .footer-bottom {display: flex; position: relative; padding-top: 40px; padding-bottom: 60px;}
/*.footer .footer-bottom .footer-info {padding-left: 45px; padding-right: 20px;}*/
.footer .footer-bottom .footer-info .info-text01 {margin-top: 3px; color: #D3D3D3;}
.footer .footer-bottom .footer-info .info-text02 {margin-top: 10px; color: #858C9B;}

@media (max-width:1024px) {
  /*.footer .footer-bottom .footer-info {padding-left: 25px;}*/
  .footer .footer-bottom .footer-info p {font-size: 15px;}
}
@media (max-width:767px) {
  .footer .footer-top .util-list .util-item a {font-size: 15px;}
  .footer .footer-bottom {display: block;}
  .footer .footer-bottom .footer-info {padding: 0;}
}
@media (max-width:500px) {
  .footer .footer-top .util-list {padding-top: 15px; padding-bottom: 15px;}
  .footer .footer-top .util-list .util-item {margin-right: 25px;}
  .footer .footer-top .util-list .util-item:not(:last-child)::before {top: 6px; right: -15px;}
  .footer .footer-top .util-list .util-item a {font-size: 13px;}

  .footer .footer-bottom {padding-top: 15px; padding-bottom: 25px;}
  .footer .footer-bottom .footer-info .info-text01 {font-size: 13px;}
  .footer .footer-bottom .footer-info .info-text02 {font-size: 11px;}
}
/* 하단 푸터 End */