@import url(https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

* {
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  padding: 0%;
  margin: 0%;
}
html,body{
  font-family: 'Pretendard',sans-serif;  
}
html{
    max-width: 1920px;
    margin: auto !important;
}
body {

}
html *{
  font-family: inherit !important;
}
#container_title,
#aside {
  display: none !important;
}
.pg_wrap {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    justify-content: center;
    margin-bottom: 140px;
    bottom: 0;
    left: 0;
    right: 0;   
}
.pg_current {
    display: inline-block;
    background: #1E2853;
    border: 1px solid #1E2853;
    color: #fff;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    min-width: 30px;
    border-radius: 3px;
    font-size: 16px;
}
.pg_page {
    color: #959595;
    font-size: 16px;
    height: 30px;
    line-height: 28px;
    background-color: #fff;
    border: 0;
}
.pg_start {
    text-indent: -999px;
    overflow: hidden;
    background: url(../img/p_arrow.svg) no-repeat 50% 50% ;
    padding: 0;
    border: 0;
}
.pg_end {
    text-indent: -999px;
    overflow: hidden;
    background: url(../img/n_arrow.svg) no-repeat 50% 50%;
    padding: 0;
    border: 0;
}
.ctt_admin {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9999;
  display: none;
}
.main {
  margin: auto;
  max-width: 1920px;
  overflow-x: hidden;
}
img {
  max-width: 100%;
}
.sec {
  color: #222;
}
.wr {
  width: 90%;
  margin: auto;
  min-width: 960px;
  max-width: 1520px;
}
.subTitile{
    overflow: hidden;
}
.hd_background{
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
    margin: auto;
    font-size: 0;
    text-align: center;
    margin: auto;
    max-width: 1920px;
    min-height: 300px;
    position: relative;
    margin-bottom: 140px;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: hdBg;
    animation-timeline: auto;
    animation-range-start: normal;
    animation-range-end: normal;
}
@keyframes hdBg{
    0%{transform: scale(1.2);}
    100%{transform: scale(1);}
}

.hd_background .tbox .img_wr{
    opacity:0;
  }
  .hd_background .tbox h3 {
    text-align: center;
    position: absolute;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    z-index: 1000;
    bottom: 37%;
    left: 0;
    right: 0;

  }
  .hd_background .wr {
    align-items: center;
  }
  .hd_background .m_img_wr {
    display: none;
  }
header {
  position: fixed;
  z-index: 1000;
  width: 100%;
  font-weight: 500;
  left: 0;
  right: 0;
}
header.on,
header.fx {
  background-color: #fff;
  color: #222;
  border-bottom: 1px solid #dedede;
}

header .hd_wr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 3;
}

header .logo {
  width: 180px;
}
header .logo a {
  display: block;
}
header .logo a.on {
  display: none;
}
header.fx .logo a,
header.on .logo a {
  display: none;
}
header.fx .logo a.on,
header.on .logo a.on {
  display: block;
}

header nav > ul {
  display: flex;
  /* grid-gap: 80px; */
  align-items: center;
  grid-gap: 5px;
}
header nav > ul > li {
  position: relative;
  padding: 26px 0;
}
header nav > ul > li > a {
  color: #fff;
  font-size: 20px;
  padding: 0 35px;
  display: block;
  line-height: 1.3;
  text-align: center;
}
#en_menu > ul >li > a {
    padding: 0 35px;
}
header nav > ul > li > a:hover{
    color: #14284C !important;
}
header nav > ul > li > a.lang {
  font-size: 0;
}
header.fx nav > ul > li > a,
header.on nav > ul > li > a {
  color: inherit;
}

header.fx nav > ul > li > a path,
header.on nav > ul > li > a path {
  fill: #222;
}

header nav .gnb2ul {
  position: absolute;
  padding: 17.5px 0;
  width: 100%;
  left: 0;
  text-align: center;
  display: none;
  border-top: 1px solid transparent;
  top: 100%;
}
/* -------------------------헤더 인버터 메뉴 안보이기--------------------------- */
/* header nav .gnb2ul ul:nth-child(4){
    display: none;
} */





header nav .gnb2ul::after{
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background-color: #14284c;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

header.on nav .gnb2ul:hover::after{
  transition: all .3s;
  width: 100%;
  transform-origin: center;
  /* border-top: 1px solid #14284c; */
}
header nav .gnb2ul li {
  padding: 7.5px 0;
}
header nav .gnb2ul li a {
  font-size: 14px;
  color: #222;
  font-weight: 500;
}
header nav .gnb2ul li a:hover{
    color: #14284C !important;
}
header .header_bg {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 450px;
  z-index: 2;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  border-top:  1px solid #dedede;
}
header.on nav .gnb2ul,
header.on .header_bg2,
header.on .header_bg {
  /* display: block; */
}

header .header_bg2{
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: none;
}

header nav div.gnb2ul {
  padding-top: 0;
}

header nav div.gnb2ul ul {
  margin-bottom: 12.5px;
}
header nav .gnb2ul h6 {
  background-color: #14284c;
  color: #fff;
  padding: 3px 0 6px 0;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 7.5px;
}
header nav .gnb2ul h6 a {
  color: #fff;
}
#blue2 {
  background-color: #14284c;
  color: #fff;
  padding: 3px 42px 2px 42px;
}
/*       호버시 헤더변경 */
.hover_hd_wr {
  display: flex;
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  border-bottom: solid 1px #dedede;
}
.hover_hd_wr nav ul li a {
  color: #222;
}

.hover_hd_wr nav ul li {
  text-transform: uppercase;
  display: inline-block;
}
.hover_hd_wr nav ul li:after {
  display: block;
  content: "";
  border-bottom: solid 1px #14284c;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
}
.hover_hd_wr nav ul li:hover:after {
  transform: scaleX(1);
}
/* 모바일 헤더 */
.m_header {
  display: none;
  width: 100%;
  position: fixed;
  z-index: 9999;
  position: relative;
  min-width: 300px;
}
.m_logo {
  padding: 18px 15px;
  position: absolute;
  z-index: 100000;
  width: 100;
}
.m_menu {
  width: 100%;
  display: none;
  background-color: #14284c;
  color: #fff;
  padding: 78px 0 29px 0;
  position: absolute;
  top: 0;
  left: 0;
}
.m_menu .wr > ul > li {
  margin-bottom: 22px;
}
.m_menu .wr > ul > li:nth-child(10) {
  margin-bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 30%;
}
.m_menu h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}
.m_menu h6{
    margin-bottom: 10px;
}
.m_menu h6 a {
  color: #f2f2f2;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}
.m_menu .txt_wr {
  width: 100%;
  display: grid;
  grid-template-columns: 149px 95px 110px;
  grid-gap: 15px 20px;
}
.m_menu .txt_wr a {
  color: #cbcbcb;
  font-size: 14px;
  font-weight: 500;

}
.m_menu a {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

/* bt버튼 */
.m-bt {
  position: absolute;
  right: 4%;
  top: 18px;
  z-index: 100000;
  width: 30px;
  height: 30px;
  cursor: pointer;
} /* 나중에 보더는 변경하도록 */

.m-bt span {
  position: absolute;
  width: inherit; /* 부모 값 대로 상속해라 100%해도됨. */
  height: 3px;
  left: 0px;
  top: 50%;
  background-color: #fff;
  transform: translate(0, -50%);
  display: inline-block;
  transition: 0.5s;
}

.m-bt span:before,
.m-bt span:after {
  content: "";
  position: absolute;
  width: inherit; /* 부모 값 대로 상속해라 100px해도됨. */
  height: inherit; /* 10px */
  background-color: #fff;
  transition: 0.5s;
}
.m-bt span:before {
  /* 이것의 부모는 .m-bt span 주의 */
  top: -8px;
}
.m-bt span:after {
  /* 이것의 부모는 .m-bt span 주의 */
  top: 8px;
}

/* 클릭시 보여질 active클래스  */
.m-bt.active span {
  background-color: transparent;
}

.m-bt.active span:before {
  top: 0px; /* -20값을 그래로 가져가면 위치가 바뀌므로 0으로 수정 */
  transform: rotate(45deg);
}
.m-bt.active span:after {
  top: 0px; /* 20값을 그래로 가져가면 위치가 바뀌므로 0으로 수정 */
  transform: rotate(-45deg);
}
.m_footer {
  display: none;
}
footer {
  padding: 59px 0;
  font-size: 14px;
  width: 100%;
  color: #222;
  font-weight: 500;

  margin: auto;
  min-width: 960px;
  max-width: 1920px;
  background-color: #e1e8ec;
}
footer .wr {
  margin: auto;
}
footer .f_logo {
  width: 180px;
  padding-bottom: 38px;
}
footer nav {
  display: flex;
  justify-content: space-between;
}
footer .w_footer ul:nth-child(2){
    width: 23%;
}
footer.m_footer {
  display: none;
}

footer nav ul li {
  line-height: 1.6;
}
footer nav ul li span {
  border-right: solid 1px;
  line-height: 1;
  padding-right: 10px;
  margin-right: 10px;
}

/*  */
.map_box {
  position: relative;
  color: #14284c;
  font-size: 16px;
  font-weight: 500;
}
.map_box .ic_wr {
  display: flex;
  align-items: center;
}
.ger,
.pak,
.thai,
.indo,
.chi,
.kor,
.ger_line,
.pak_line,
.thai_line,
.indo_line,
.chi_line
/* .ger_font,
.pak_font,
.thai_font,
.indo_font,
.chi_font,
.kor_font  */ {
  position: absolute;
  z-index: 15;
}
.ger {
  top: 28.7%;
  left: 37.3%;
}
.ger_line {
  top: 28%;
  left: 39%;
  transform: rotate(1deg);
}

.pak {
  top: 41%;
  left: 49%;
}
.pak_line {
  top: 36%;
  left: 50.8%;
}

.thai {
  top: 45.3%;
  left: 55.7%;
}
.thai_line {
  top: 37.5%;
  left: 56.5%;
}

.indo {
  top: 52%;
  left: 61.5%;
}
.indo_line {
  top: 40%;
  left: 62.5%;
  transform: rotate(-10deg);
}

.chi {
  top: 41%;
  left: 60.5%;
}
.chi_line {
  top: 39.5%;
  left: 61%;
  transform: rotate(-20deg);
}

.kor {
  top: 36%;
  left: 62.5%;
}
.onlyMob{display: none;}
.mobile{display: none;}









@media screen and (max-width: 1023px) {
    .pg_wrap {
        margin-bottom: 60px;
    }
    .hd_background{
        min-height: 260px;
        margin-bottom:62px ;
    }
    .hd_background .img_wr {
        display: none;
      }
      .hd_background .m_img_wr {
        display: block;
        opacity: 0;
      }
      .hd_background .m_img_wr img {
        width: 100%;
      }
      .hd_background .wr {
        width: 100%;
      }
      .hd_background .tbox h3 {
        font-size: 28px;
      }
  header {
    padding: 0;
  }
 
  .wr {
    max-width: 700px;
    min-width: 300px;
  }
  .hd_wr.wr {
    display: none;
  }
  
  header .header_bg,
  header .header_bg2
  {
    display: none !important;
  }
  header.on, header.fx {border-bottom: 0 solid #fff!important;}
  .m_header {
    display: block;
  }
  .m_logo_b{
    display: none;
  }
  .hd.fx .m_logo{
    background-color:#14284C;
  } 
  /* .hd.fx .m_logo_w{
    display: none;
  } */
  .hd.fx .m_logo_b{
    display: none;
  }
   /* .hd.fx .m-bt span{
    background-color: #222;
  } */
  .hd.fx .m-bt.active span {
    background-color: transparent;
  }
  
  /* .hd.fx .m-bt span:before,
  .hd.fx .m-bt span:after{
    background-color: #222;
  } */
  .m_logo {
    width: 100%;
  }
  .m_menu {
    width: 100%;
  }
  .m-bt {
    display: block;
  }
  footer {
    padding: 41px 0;
    min-width: 300px;
  }

  footer .wr {
    margin: auto;
    width: 95%;
  }
  footer .f_logo {
    padding-bottom: 21px;
  }
  .w_footer {
    display: none;
  }
  .m_footer {
    display: block;
    display: flex;
    flex-direction: column-reverse;
  }

  footer .m_footer ul {
    min-width: auto;
  }
  footer .m_footer ul:nth-child(2) {
    font-size: 12px;
  }
  .onlyMob{display: block !important;}
  .pc{display: none;}
  .mobile{display: block;}



/* 메인 영문 */
  .inquiry{
    width: 145px !important;
}
}