/* COMMON */

:root{
  --pur: #313DAA;
  --pur2: #2D316C;
  --pur_bg:#F4F5FC;
  --stroke: #2D306B;
  --light_blue: #2DBBE2;
  --main_blue: #165D94;
  --bg_blue: #E7F6FE;
  --black: #000;
  --bd_radius: 10px;
  --grey: #D9D9D9;
  --font_family: 'pretendard', sans-serif;
}

html{font-family: 'pretendard', sans-serif; font-size: 16px; color: #333333 !important;}
body{
    line-height: 1.4;
    color: #000;
    font-weight: 300;
    word-break: keep-all;
    overflow-x: hidden;
}
a{
  display: block;
  color: inherit;
  text-decoration: none;  
}
button{cursor: pointer;}
.inner{
    width: 1560px;
    margin: 0 auto;
}
.bold{font-weight: 700;}
.mt20{margin-top: 20px;}
img{max-width: 100%;}


/* HEADER */

#header{width: 100%; height: 96px; position: absolute; top: 0; left: 0; background-color: transparent; z-index: 9; transition: all .3s;}
.hd_wrap{width: 1560px; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; position: relative;}
.hd_wrap .logo{width: 146px; height: 32px; background: url(../img/common/logo_white.svg)no-repeat center / contain; transition: all .3s;}
.hd_wrap .gnb{display: flex; justify-content: space-between;}
.hd_wrap .gnb li {margin-right: 164px;}
.hd_wrap .gnb li:last-child {margin-right: 50px;}
.hd_wrap .gnb li a{position: relative; color: #fff; font-weight: 400; font-size: 20px; text-align: center; transition: all .2s;}
.hd_wrap .gnb li a::after{content: ''; display: block; position: absolute; bottom: 0px; left: 0; width: 0; height: 2px; background: #fff; transition: all 0.6s;}
.hd_wrap .gnb li a:hover::after{width: 100%;}
.hd_wrap .util{display: flex; gap: 40px;}
.hd_wrap .hd_contact{width: 40px; height: 40px; background: #fff url(../img/common/ico_hd_contact.png)no-repeat center; border-radius: 50%;}
.hd_wrap .menu_btn {background-color: transparent; cursor: pointer; display: inline-block; width: 42px; outline: none; padding: 0; pointer-events: initial; position: relative; vertical-align: middle; z-index: 999;}
.hd_wrap .menu_btn span {background-color: #fff; content: ""; display: block; height: 3px; left: 0; position: absolute; top: 50%; transform-origin: 50% 50%; transition: 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear; width: 100%;}
.hd_wrap .menu_btn span::before, .hd_wrap .menu_btn span::after {background-color: #fff; content: ""; display: block; height: 3px; position: absolute; transform-origin: 50% 50%; transition: 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear; width: 100%;}
.hd_wrap .menu_btn span:before {top: 12px;}
.hd_wrap .menu_btn span:after {top: -12px;}
/*.hd_wrap .menu_btn.active span {background-color: transparent; transition: 0.2s ease-out;}
.hd_wrap .menu_btn.active span::before, .hd_wrap .menu_btn.active span::after {transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out; background: #000;}
.hd_wrap .menu_btn.active span:before {top: 0; transform: rotate3d(0, 0, 1, -45deg);}
.hd_wrap .menu_btn.active span:after {top: 0; transform: rotate3d(0, 0, 1, 45deg);}
*/

/* project 헤더 */

#header.bg{background: #fff; border-bottom: 1px solid #D9D9D9;}
#header.bg .hd_wrap .logo{background: url(../img/common/logo.svg)no-repeat center / contain;}
#header.bg .hd_wrap .hd_contact{background-color: #F4F5FC;}
#header.bg .hd_wrap .gnb li a{color: #232327;}
#header.bg .hd_wrap .menu_btn span{background: #232327;}
#header.bg .hd_wrap .menu_btn span::before,
#header.bg .hd_wrap .menu_btn span::after{background: #232327;}


/* MOBILE MENU */
.all_menu{display: none; width: 100%; height: 100vh; background: #fff; position: fixed; left: 0; top: 0; z-index: 10; overflow: hidden;}
.all_menu .top{width: 100%; height: 100px; border-bottom: 1px solid #eee;}
.all_menu .cont{display: flex; justify-content: space-between; padding-top: 60px;}
.all_menu .cont > div{width: 50%;}
.all_menu .gnb{display: inline-block; padding-left: 60px;}
.all_menu .gnb li{margin-bottom: 60px;}
.all_menu .gnb li a{display: inline-block; position: relative; font-size: 64px; color: #091634; font-weight: 700; transition: all .3s;}
.all_menu .gnb li a::after{position: absolute; width: 0; height: 3px; top: 100%; left: 0; background: #1161BE; transition: all .4s; content: '';}
.all_menu .gnb li a:hover{color: #1161BE;}
.all_menu .gnb li a:hover::after{width: 100%;}
.all_menu .info_wrap{}
.all_menu .info_wrap .tit{font-weight: bold; font-size: 40px; margin-bottom: 72px;}
.all_menu .info_wrap ul li{font-size: 32px; margin-bottom: 56px;}
.all_menu .info_wrap ul li p{position: relative; padding-left: 16px;}
.all_menu .info_wrap ul li p::before{position: absolute; top: 0.6em; left: 0; width: 4px; height: 4px; background: #1161BE; border-radius: 50%; content: '';}
.all_menu .info_wrap ul li strong{color: #1161BE; font-weight: bold;}
.all_menu .top .inner{height: 100%; display: flex; align-items: center; justify-content: space-between;}
.all_menu .top .logo{width: 180px; height: 32px; background: url(../img/common/logo.svg)no-repeat center / contain;}
.all_menu .menu_close_btn{ width: 40px; height: 40px; background: url(../img/common/menu_close.svg)no-repeat center / contain;}

#header.open .all_menu .gnb li:nth-child(1) {
     -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}
#header.open .all_menu .gnb li:nth-child(2) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
  }
#header.open .all_menu .gnb li:nth-child(3) {
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
  }
  #header.open .all_menu .gnb li:nth-child(4) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  #header.open .all_menu .gnb li:nth-child(5) {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
  #header.open .all_menu .gnb li:nth-child(6) {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
  #header.open .all_menu .gnb li:nth-child(7) {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
  #header.open .all_menu .gnb li:nth-child(8) {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
  #header.open .all_menu .gnb li:nth-child(9) {
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
  }
  #header.open .all_menu .gnb li:nth-child(10) {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
#header.open .all_menu .gnb li {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-name: fadeInUp;
            animation-name: fadeInUp;
  }
  #header.open .all_menu .gnb a:hover {
    color: #1161BE;
  }
  .all_menu ul a {
    -webkit-transform: translateZ(0);
    transition: 0.3s ease-in-out;
  }
 



/* Top Button */

.topBtn{
  width: 64px;
  height: 64px;
  background: var(--pur) url(../img/common/top_arrow.png)no-repeat center;
  border-radius: 50%;
  position: fixed;
  right: 60px;
  bottom: 100px;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: none;
}
.topBtn img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* FOOTER */

#footer{width: 100%; padding: 80px 0; background-color: #fff; border-top: 1px solid #D9D9D9;}
#footer .logo{margin-bottom: 20px; width: 180px; height: 32px; background: url(../img/common/logo_ft.svg)no-repeat center / contain;}
#footer .inner{display: flex; justify-content: space-between; align-items: start;}
#footer .left{font-size: 20px;}
#footer  ul{display: flex; align-items: center;}
#footer ul li{position: relative;}
#footer .left ul li:first-child{padding-right: 20px;}
#footer .left ul li::after{position: absolute; content: ''; width: 1px; height: 60%; transform: translate(-50%, -50%);top:50%; right: 10px; background: #9798A4;}
#footer .right{display: flex; align-items: center; gap: 18px; font-size: 22px;}
#footer .right ul li:first-child{padding-right: 20px;}
#footer .right ul li::after{position: absolute; content: ''; width: 1px; height: 60%; transform: translate(-50%, -50%);top:50%; right: 10px; background: #000;}
#footer ul li:last-child:after{display: none;}
#footer .right .ft_nuri{width: 173px; height: 64px; background: url(../img/common/logo_nuri.svg)no-repeat center;}


@media screen and (max-width: 1560px){
  .inner{
    width: 100%;
    padding: 0 40px;
  }
  .request_form .inner{padding: 0;}
  .hd_wrap{
    width: 100%;
    padding: 0 40px;
  }
  .hd_wrap .gnb li{
    margin-right: 80px;
  }
  .hd_wrap .util{
    gap: 40px;
  }
  .hd_wrap .gnb li:last-child {margin-right: 0;}
}

@media screen and (max-width: 1440px){
  .hd_wrap .gnb li{
    margin-right: 60px;
  }
  .hd_wrap .gnb li a{
    font-size: 16px;
  }
  .all_menu .top{
    height: 80px;
  }
  .all_menu .menu_close_btn{
    width: 32px;
    height: 32px;
  }
  .all_menu .gnb li{margin-bottom: 50px;}
  .all_menu .gnb li a{font-size: 40px;}
  .all_menu .info_wrap .tit{
    margin-bottom: 40px;
  }
  .all_menu .info_wrap ul li{
    font-size: 24px;
    margin-bottom: 24px;
  }
  #footer .left{
    font-size: 18px;
  }
  #footer .right{
    gap: 10px;
    font-size: 18px;
  }
  .request_form .inner{padding: 0 20px;}
}


@media screen and (max-width: 1024px){
  #header{
    height: 64px;
  }
  #header .hd_wrap{padding: 0 20px;}
  #header .hd_wrap nav{display: none;}
  .hd_wrap .util{gap: 30px;}
  .all_menu{background: var(--pur);}
  .all_menu .top{
    height: 56px;
    border-bottom: 1px solid #555;
  }
  .all_menu .menu_close_btn{
    width: 24px; 
    height: 24px;
    background: url(../img/common/menu_close_white.svg)no-repeat center / contain;
  }
  .all_menu .top .logo{
    width: 100px;
    background: url(../img/common/logo_white.svg)no-repeat center / contain;
  }
  .all_menu .info_wrap{
    display: none;
  }
  .all_menu .cont{
    display: block;
    width: 100%;
  }
  .all_menu .gnb{
    width: 100%;
    text-align: center;
    padding-left: 0;
  }
  .all_menu .gnb li a{color: #fff;}
  .all_menu .gnb li a:hover{color: #fff;}
  .all_menu .gnb li a::after{background-color: #fff;}
  #footer .inner{
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  #footer .left{margin-bottom: 30px;}
  #footer .left, #footer .right{
    width: 100%;
  }
  #footer .right,
  #footer ul{justify-content: center;}
  #footer a{display: inline-block;}
  #footer .logo{margin: 0 auto 20px;}
  .topBtn{
    right: 20px;
    width: 40px;
    height: 40px;
    background-size: 40%;
  }
}

@media screen and (max-width: 768px){
  .hd_wrap .logo{width: 100px;}
  .hd_wrap .menu_btn{width: 32px;}
  .hd_wrap .menu_btn span:before {top: 10px;}
  .hd_wrap .menu_btn span:after {top: -10px;}
}

@media screen and (max-width: 640px){
  #footer{padding: 40px 0;}
  #footer .logo{
    width: 130px;
    margin: 0 auto 20px;
  }
  #footer .left{font-size: 14px;}
  #footer .right{font-size: 12px;}
  #footer .right .ft_nuri{
    width: 85px;
    height: 30px;
    background-size: contain;
  }
  #footer .right, #footer ul,
  #footer .left p{
    margin: 10px 0;
  }
}