.header{position: fixed;width: 100%;top: 0;left: 0;padding: 1.875rem 5rem 0 5rem;transition: all 0.3s;z-index: 9999;}
.header.on{background: rgba(255,255,255,.9);padding:0 5rem}
.header.on  .logo a{background: url(../../images/common/logo_bk.svg) no-repeat center !important;background-size: 100% !important}
.header.open .logo a{background: url(../../images/common/logo.svg) no-repeat center !important;background-size: 100% !important;}
.header.on .navbar > ul > li  a{color: #555;}
.header.on .navbar > ul > li:hover {color: #000;}
.header.on .header_controls .lang_area .lang_btn{border: 1px solid rgba(0, 0, 0, 0.40);color: #000;}
.header.on .header_controls .lang_area .lang_btn:after{background: url(../../images/common/ico_lang_on.svg) no-repeat center}
.header.on .m_menu span{background: #000;}
.header .logo a{display: block;width: 260px;height: 36px;background: url(../../images/common/logo.svg) no-repeat center;text-indent: -9999px;background-size: 100% !important}
.header.open{background-color: rgba(0,0,0,.8);}
.header.open .header_inner {border-bottom: 1px solid rgba(0,0,0,.3);}
.header.open .header_inner .navbar  ul li a{color: #fff !important;}
.header.open .header_inner .navbar .navbar > ul > li > div > ul > li > a{color: #fff;}
.header.open .header_inner .navbar > ul > li > div{position: absolute;top: 100%;border-right: 1px solid rgba(255,255,255,.06)}

.header .header_inner{display: flex;align-items: center;justify-content: space-between;}

.header .header_inner >  .navbar{margin-left: auto;}
.header .header_inner >  .navbar > ul{display: flex;}
.header .header_inner >  .navbar ul li{color: #fff;}
.header .header_inner >  .navbar > ul > li {position: relative;}
.header .header_inner >  .navbar > ul > li > a{font-size: 1.375rem;font-weight: 600;;letter-spacing: -.36px;padding: 1.5rem 4.375rem;display: block;position: relative;}
.header .header_inner >  .navbar > ul > li > a:after{content: '';display: block;width: 0;height: 2px;background: var(--primary);transition: all 0.3s;position: absolute;left: 50%;transform: translateX(-50%);bottom: 0;}
.header .header_inner >  .navbar > ul > li:hover > a:after{width: 100%;}
.header .header_inner >  .navbar > ul > li > div{position: absolute;top: 100%;border-right: 1px solid rgba(0,0,0,.06);text-align: center;width: 100%;left: 0;z-index: 99;display: none;}
.header .header_inner >  .navbar:hover > ul > li > div{display: block;}
.header .header_inner >  .navbar > ul > li > div > ul > li > a{padding: 10px;padding: .9375rem .5rem;display: block;color: #000;transition: all 0.3s;font-size: .9375rem;}
.header .header_inner >  .navbar > ul > li > div > ul > li > a:hover{background:  rgba(0,0,0,.8);color: #fff;font-weight: 500;}
.header .header_inner >  .navbar > ul > li:hover > div{background:  rgba(0,0,0,.2);}
.header .header_controls{display: flex;gap: 20px;align-items: center;}
.header .header_controls ul{display: flex;}
.header .header_controls .lang_area{position: relative;}
.header .header_controls .lang_area .lang_btn{padding: .5rem .875rem;display: flex;border-radius: 40px;border: 1px solid rgba(255, 255, 255, 0.40);color: #fff;font-weight: 600;line-height: 16px;font-size: 14px;letter-spacing: -.28px;gap: 6px;align-items: center;transition: all 0.3s;z-index: 99;position: relative;}
.header .header_controls .lang_area .lang_btn:after{content: '';width: 18px;height: 18px;background: url(../../images/common/ico_lang.svg) no-repeat center;}

.header .header_controls .lang_area .lang_btn.active{border: 1px solid rgba(0, 0, 0, 0.40);color: #000;background: #fff;}
.header .header_controls .lang_area .lang_btn.active:after{background: url(../../images/common/ico_lang_on.svg) no-repeat center}
.header .header_controls .lang_div{position: absolute;background: rgba(255, 255, 255, 0.80);top:0;left: 0;width: 100%;border-radius: 18px;z-index: 9;overflow: hidden;padding-top: 35px;z-index: 5;display: none;}
.header .header_controls .lang_div li a{font-size: 14px;padding: .3125rem .875rem;display: block;color: #555;transition: all 0.3s;}
.header .header_controls .lang_div li a:hover{color: #000;}
.header .m_menu{display: flex;flex-direction: column;width: 18px;height: 15px;justify-content: space-between;}
.header .m_menu span{background: #fff;width: 100%;height: 2px;transition: all 0.3s;}

.header.allmenu .logo a{background: url(../../images/common/logo_active.png) no-repeat;}
.site_map{position: fixed;left: 0;top: 0;width:100%;height: 100vh;background: #fff;padding: 6.25rem 5rem 0 5rem;display: none;z-index: 1000;}
.header.allmenu .header_inner > .navbar{display: none;}
.header.allmenu .lang_area{display: none;}
.header .m_menu.active{width: 23px;position: relative;z-index: 9999;}
.header .m_menu.active span{background: #000;}
.header .m_menu.active span:nth-child(1) {transform: rotate(45deg) translate(6px, 6px);}
.header .m_menu.active span:nth-child(2) {opacity: 0;}
.header .m_menu.active span:nth-child(3) {transform: rotate(-45deg) translate(3px, -3px);}
.site_map .navbar > ul{display: flex;width:100%}
.site_map .navbar > ul > li{flex: 1 1;padding:5vh 2.5vw;text-align: center;position: relative;}
.site_map .navbar > ul > li > a:after{content: '';display: block;width: 10px;height: 10px;background: #ddd;border-radius: 50%;margin: 2.5rem auto;}
.site_map .navbar > ul > li:hover > a:after{background: var(--primary);}
.site_map .navbar > ul > li > a{
  font-size: 2.625rem;
  transition:all 0.4s;
	animation-name: fadeIn;animation-duration:0.9s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.4s;
  font-weight: 600;
  opacity: 0;
}
@keyframes fadeIn{
0%{opacity:0;}
  100%{opacity:1;}
}
.site_map .navbar > ul > li:hover > a{color: var(--primary);}
.site_map .navbar > ul > li > div{margin-top: 2.5rem;}
.site_map .navbar > ul > li > div li a{display: block;margin-bottom: 1.25rem;font-size: 1.5rem;color: var(--gray-500);}
.site_map .navbar > ul > li > div li{animation-name: fadeLeftText;animation-duration:1s;animation-fill-mode:forwards;animation-timing-function: ease-in-out;
	animation-delay:0.1s;opacity: 0;}
.site_map .navbar > ul > li > div li a:hover{color: #000;}

/* 인트로 */
.hidden { visibility:hidden; opacity:0; }
.intro { position:fixed; display:grid; place-items:center; height:100vh; width:100%; background:white; z-index:999999; }
.intro__title { color:white; max-width:45%; text-align:center; mix-blend-mode:difference; z-index:2; transform:translateY(40px); }
.intro__title h2{font-size: 7.5rem;font-family: 'Prompt';font-weight: bold;}
.intro__title p{font-size: 2.5rem;}
.intro__background { position:absolute; top:0; background:black; width:50%; height:100%; transform:scaleX(0); }
.intro__background--left { left:0; transform-origin:left center; }
.intro__background--right { left:50%; transform-origin:right center; }


@keyframes fadeLeftText{
  0%{transform:translate3d(0px, 40px, 0);opacity:0;}
   100%{transform:translate3d(0px, 0, 0);opacity:1;}
 }

@media screen and (max-width:1520px) {
  .header{padding: 1.875rem 1.25rem 0 1.25rem;}
  .header.on{padding:0 1.25rem}
  .header .header_inner  .navbar > ul > li > a{padding: 1.5rem 1.875rem;font-size: 1.0625rem;white-space: nowrap;}
  .site_map{padding: 6.25rem 1.25rem 1.875rem 1.25rem;}
  .site_map .navbar > ul > li > a{font-size: 2rem;}
  
}

@media screen and (max-width:1024px) {
  .header{padding: 1.875rem 1.25rem}
  .header.on{padding: .625rem 1.25rem}
  .header .header_inner >  .navbar{position: fixed;background: #fff;width: 100%;height: 100vh;top: 0;right: 0;}
  .header .header_inner >  .navbar {display: none;}
  .site_map .navbar > ul{flex-direction: column;}
  .site_map .navbar > ul > li{text-align: left;padding: 1.25rem 0;}
  .site_map .navbar > ul > li > a{font-size: 1.25rem;position: relative;display: block;}
  .site_map .navbar > ul > li:only-child > a:after{display: none;}
  .site_map .navbar > ul > li > a:after{content: '+';width: auto;background: none !important;position: absolute;right: 0;top:50%;transform: translateY(-50%);height: auto;margin:0}
  .site_map .navbar > ul > li:hover > a:after{color: #000;}
  .site_map .navbar > ul > li.active > a:after{content: '-';}
  .site_map .navbar > ul > li > div{display: none;margin-top: 1.875rem;}
  .site_map .navbar > ul > li > div ul li a{font-size: 1.125rem;}
}

@media screen and (max-width:768px) {
  .site_map{padding:60px 1.25rem 1.875rem 1.25rem}
  .header {padding:1.25rem}
  .header .logo a{background-size: 150px !important;width: 150px !important;height: 22px !important;}
  
  .intro__title{max-width: 100%;}
  .intro__title h2{font-size: 2.8125rem;}

}

.top_btn{position: fixed;right: 40px;bottom: 40px;z-index: 999;}
.top_btn a{display:block;width:70px;height: 70px;background: url(../../images/common/ico_top.svg) no-repeat center #fff;border-radius: 50%;box-shadow: 4px 4px 4px 0 #DF414E;text-indent: -9999px;}

@media screen and (max-width:1420px) {
  .top_btn{right:20px;bottom: 20px;}
}
@media screen and (max-width:768px) {
  .top_btn a{width:55px;height: 55px;background-size: 10px;}
}