@charset "utf-8";

@font-face {
    font-family: 'Pretendard-Black';
    src: url('/fonts/Pretendard-Black.woff') format('woff');
    font-weight: 900;
}

@font-face {
    font-family: 'Pretendard-Bold';
    src: url('/fonts/Pretendard-Bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Pretendard-ExtraBold';
    src: url('/fonts/Pretendard-ExtraBold.woff') format('woff');
    font-weight: 800;
}

@font-face {
    font-family: 'Pretendard-ExtraLight';
    src: url('/fonts/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200; 
}

@font-face {
    font-family: 'Pretendard-Light';
    src: url('/fonts/Pretendard-Light.woff') format('woff');
    font-weight: 300; 
}

@font-face {
    font-family: 'Pretendard-Medium';
    src: url('/fonts/Pretendard-Medium.woff') format('woff');
    font-weight: 500; 
}

@font-face {
    font-family: 'Pretendard';
    src: url('/fonts/Pretendard-Regular.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: 'Pretendard-SemiBold';
    src: url('/fonts/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600; 
}

@font-face {
    font-family: 'Pretendard-Thin';
    src: url('/fonts/Pretendard-Thin.woff') format('woff');
    font-weight: 100; 
}

/* COMMON */
html,body{height: 100%;}
body{color: #333;font-size: 16px;font-weight: normal;line-height: 1.4;font-family: 'Pretendard', sans-serif; display: flex; flex-direction: column;}
main{flex:1}
.fw-100{font-family: 'Pretendard-Thin', sans-serif;}
.fw-200{font-family: 'Pretendard-ExtraLight', sans-serif;}
.fw-300{font-family: 'Pretendard-Light', sans-serif;}
.fw-500{font-family: 'Pretendard-Medium', sans-serif;}
.fw-600{font-family: 'Pretendard-SemiBold', sans-serif;}
.fw-800{font-family: 'Pretendard-ExtraBold', sans-serif;}
.fw-900{font-family: 'Pretendard-Black', sans-serif;}
.fw-b{font-family: 'Pretendard-Bold', sans-serif;}
.fc-white{color: #fff !important;}
.fc-orange{color: #F74E1D;}
.fc-blue{color: #1e7cff;}
img{display: block;}
a{color: inherit;text-decoration: none;}
.center-area{margin: 0 auto;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.grid{display: grid;}
.flex{display: flex;}
button{border: 0; background-color: transparent;font-family: 'Pretendard', sans-serif;}
.flex-col{flex-direction: column;}
.sec-title{font-size: 44px; font-weight: bold; color: #000;}
.sub-title{font-size: 22px; color: #333;}
.text-center{text-align: center;}
.a_to_top{transform: translateY(20px);opacity: 0;transition: 1s 0.4s;}
.inner{position: relative;width: 1840px;max-width: 100%;padding: 0 20px;margin: 0 auto;box-sizing: border-box;transition: all 0.2s;}
.sub{padding-top: 150px;}
.am-fade {text-transform: none;animation: fadeIn ease 3.5s;-webkit-animation: fadeIn ease 3.5s;}
.fadein {opacity: 0;transition: all 1.5s;transform: translate(0, 100px);}  
.fadein.visible {opacity: 1;transform: translate(0, 0);}
#Badge{transition: .3s;}
#Badge:hover{animation: pulse 1s infinite; transition: .3s;}
.material-icons {font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: 24px;  display: inline-block;line-height: 1;text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;direction: ltr;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-feature-settings: 'liga';color: #5f6368;}

/*HEADER*/
header {width: 100%;position: sticky;top: 0;z-index: 9;display: flex;left: 0;flex-wrap: wrap;background-color: #fff;box-shadow: 0px 10px 10px -15px #111;}
header nav{display: flex; flex-direction: column;}
header .inner {display: flex;align-items: center;flex-wrap: wrap;height: 100%; width: 100%;}
header .logo {display: flex;align-items: center;line-height: 1;}
header .logo a{display: flex;align-items: center;position: relative;}
header .logo a img{display: block; width: 170px;}
header .header_top{display: flex;align-items: center;width: 100%;height: 50px;border-bottom: 1px solid rgba(90,90,90,0.2);background-color: #fff;}
header .header_top .header_top_wrap{font-size: 12px;text-align: right; width: 100%;}
header .header_top .header_top_wrap a{color: #000;display: flex;justify-content: end;align-items: center;}
header .header_top .header_top_wrap a > span{margin-right: 5px;}
header .header_top .header_top_wrap a > span.material-icons{font-size: 20px;margin: 0;}
header nav{display: flex;align-items: center;flex: 1;height: 100%;justify-content: end;}
header nav{height: 100%;}
header nav .desktop-nav-container{display: flex; width: 100%; align-items: center; justify-content: space-between;}
header nav .nav-menu-container{display: flex;height: 100%; flex-basis: 48%;display: flex;justify-content: space-between;align-items: center;}
header nav .nav-menu-container .nav-menu-item{display: flex;align-items: center;position: relative;height: 100%;transition: margin 0.2s;}
header nav .nav-menu-container .nav-menu-item a{display: block;position: relative;z-index: 1;font-size: 18px;font-weight: bold;color: #000;}
header nav .nav-menu-container .nav-menu-item a:before {content: "";position: absolute;bottom: -1px;left: 0;transform: translateY(100%);width: 0%;height: 2px;background-color: #000;transition: all .3s;}
header nav .nav-menu-container .nav-menu-item:hover a:before {width: 100%;}
header .badges{position: absolute;top: 20rem;right: 12px}
header .badges .badge{border-radius: 10px;overflow: hidden;margin-bottom: 12px;box-shadow: 4px 4px 10px rgba(0,0,0,.15);cursor: pointer;}
header .badges .badge img{width: 80px;}

/* footer */
footer{min-height: 200px; background-color: #000; padding: 50px 0 10px;}
footer .flex{margin-bottom: 50px;}
footer .flex .flex-item{flex: 0 0 33%; text-align: center;}
footer .flex .flex-item h3{font-size: 24px; color: #fff;}
footer .flex .flex-item > div{margin-top: 20px; color: #898989;}

#to-top {position: fixed;bottom: 30px;right: 30px;z-index: 9;width: 42px;height: 42px;background-color: #333;color: #fff;border: 2px solid #fff;border-radius: 10px;cursor: pointer;display: flex;justify-content: center;align-items: center;}
#to-top .material-icons{color: #fff !important;}

@media screen and (max-width: 1920px){
  .inner {
      width: 1640px;
      padding: 0 5.5vw;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
    100% {
    transform: scale(1);
  }
}


@media screen and (max-width: 1920px){
  header .nav .deps1 > li + li {
      margin-left: 40px;
  }
}

@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}