/* The Loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
  z-index:9999;
}
.no-js #loader-wrapper {
  display: none;
}
#loader {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  filter: url('#goo');
  -webkit-animation: rotate-move 2s ease-in-out infinite;
          animation: rotate-move 2s ease-in-out infinite;
          z-index:11;
}
.dot { 
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.dot-3 {
  background-color: #f74d75;
  -webkit-animation: dot-3-move 2s ease infinite, index 6s ease infinite;
          animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}
.dot-2 {
  background-color: #10beae;
  -webkit-animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
          animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}
.dot-1 {
  background-color: #ffe386;
  -webkit-animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
          animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}
@-webkit-keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(-18px) scale(.45)}
  60% {transform: translateY(-90px) scale(.45)}
  80% {transform: translateY(-90px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-3-move {
  20% {transform: scale(1)}
  45% {transform: translateY(-18px) scale(.45)}
  60% {transform: translateY(-90px) scale(.45)}
  80% {transform: translateY(-90px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(-16px, 12px) scale(.45)}
  60% {transform: translate(-80px, 60px) scale(.45)}
  80% {transform: translate(-80px, 60px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-2-move {
  20% {transform: scale(1)}
  45% {transform: translate(-16px, 12px) scale(.45)}
  60% {transform: translate(-80px, 60px) scale(.45)}
  80% {transform: translate(-80px, 60px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(16px, 12px) scale(.45)}
  60% {transform: translate(80px, 60px) scale(.45)}
  80% {transform: translate(80px, 60px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}
@keyframes dot-1-move {
  20% {transform: scale(1)}
  45% {transform: translate(16px, 12px) scale(.45)}
  60% {transform: translate(80px, 60px) scale(.45)}
  80% {transform: translate(80px, 60px) scale(.45)}
  100% {transform: translateY(0px) scale(1)}
}
@-webkit-keyframes rotate-move {
  55% {transform: translate(-50%, -50%) rotate(0deg)}
  80% {transform: translate(-50%, -50%) rotate(360deg)}
  100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@keyframes rotate-move {
  55% {transform: translate(-50%, -50%) rotate(0deg)}
  80% {transform: translate(-50%, -50%) rotate(360deg)}
  100% {transform: translate(-50%, -50%) rotate(360deg)}
}
@-webkit-keyframes index {
  0%, 100% {z-index: 3}
  33.3% {z-index: 2}
  66.6% {z-index: 1}
}
@keyframes index {
  0%, 100% {z-index: 3}
  33.3% {z-index: 2}
  66.6% {z-index: 1}
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #003152;
  z-index: 10;
}
#loader-wrapper .loader-section.section-left {
  left: 0;
}
#loader-wrapper .loader-section.section-right {
  right: 0;
}
/* Loaded styles */
.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.5s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.5s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.3s 1s ease-out;
}
/*********************************************/
.nav-container {
  position: relative;
  margin: 0 auto;
  height:0;
}
.nav-container nav {
  float: right;
}
.nav-container nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-container nav ul li {
  float: left;
  position: relative;
}
.nav-container nav ul li a {
font-size:.85rem;
font-weight:600;
  display: block;
  padding: 0 20px;
  line-height: 45px;
  background: rgba(0,49,82,0);
  color: #FFF;
  text-decoration: none;
}
.nav-container nav ul li a:hover {
  background-color: rgba(255,255,255,0.1);
  color: #00FFFF;
}
.nav-mobile {
  display: none;
}

@media only screen and (max-width:  768px) {
  .nav-mobile {
    display: block;
  }
  .nav-container nav {
    width:100%;
    padding: 45px 0 0px;
  }
  .nav-container nav ul {
    display: none;
    height:100vh;
  }
  .nav-container nav ul li {
    float: none;
  }
  .nav-container nav ul li a {
    padding: 15px 20px;
    line-height: 20px;
    text-align:right;
    margin: 0;
    width:auto;
    font-family:"NEXON Lv1 Gothic OTF","Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
    font-size:1rem;
  }
 .nav-container nav ul li a::before{
/*content:'\f05b\00a0';*/
content:' ';
font-family:fontAwesome;
padding-top: 7px;
}
 .nav-container nav ul li a::after{
content:'\00a0\00a0\f0c1';
font-family:fontAwesome;
padding-top: 7px;
}
}
#nav-toggle {
  position: absolute;
  right: 40px;
  top: 20px;
  cursor: pointer;
  padding:0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 30px;
  background: #FFF;
  position: absolute;
  display: block;
  content: "";
  transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
  top: 10px;
}

#nav-toggle span:after {
  bottom: 10px;
}

#nav-toggle.active span {
  background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}

#nav-toggle.active span:before {
  transform: rotate(45deg);
}

#nav-toggle.active span:after {
  transform: rotate(-45deg);
}

@media screen and (min-width:  768px) {
 .nav-container nav ul {
    display: block !important;
  }
}
@media (max-width:  768px) {
 .nav-container nav ul li a{
    font-size:0.95rem !important;
  }
}
/**********************************/
.imgone::after {
    animation: spin 2s linear infinite;
    background: conic-gradient(
        in oklch from var(--gradient-angle),
        var(--purple),
        var(--orange),
        var(--yellow),
        var(--blue),
        var(--purple)
    );
    border-radius: 50%;
    content: "";
    position: absolute;
    inset: 0;
    filter: blur(50px);
    z-index: 1;
}
.imgone{
 position: absolute;
 top: 60px;
 left: 20px;
}
.imgtow{
 position: absolute;
 top: 60px;
 right: 20px;
}
.imgone, .imgtow{
 --b: 3px; /* border width */
 --g: 3px; /* gap */
 --c: red;
 width: 120px;
 aspect-ratio: 1;
 object-fit: cover;
 border-radius: 50%;
 padding: calc(var(--b) + var(--g));
 background: conic-gradient(from 180deg in oklch longer hue, red 0 0);
 -webkit-mask:
 radial-gradient(farthest-side,
 #000 calc(100% - var(--b) - var(--g) - 1px),
 #0000 calc(100% - var(--b) - var(--g)) 
 calc(100% - var(--b)),
 #000 calc(100% - var(--b) + 1px)),
 conic-gradient(from 180deg,
 #0000 calc(var(--p) - var(--h)),
 #000 0 var(--p),
 #0000,
 #000 0 calc(var(--p) + var(--h)),
 #0000 0),
 linear-gradient(#000 0 0) content-box;
 -webkit-mask-composite: source-in,destination-over;
 mask-composite: intersect,add;
 --p: 0%;
 transition: --h .5s linear,scale .5s;
 cursor: pointer;
}
.imgone:hover, .imgtow:hover {
 --h: 100%;
 --p: 100%;
 scale: 1.1;
}
/*******************************/
#hd_some{
position: relative;
z-index:1;
}
#hd_button{
text-align:center;
margin:0 auto;
padding:0px;
}
#hd_button button {
position: relative;
top:-17px;
 font-size: .7rem;
 background: none;
 border: none;
 /* to do, calc arrow-stripes so they repeat nicely on animation loop */
 --padding-block: .5rem;
 --padding-inline: 1rem;
 --arrow: 2.5rem;
 --arrow-stripes: .4rem;
 padding: var(--padding-block) var(--padding-inline);
 padding-right: calc(var(--padding-inline) + var(--arrow));
 filter: drop-shadow(4px 4px 4px hsl(0 0% 0% / .5));
 color: white;
 border-radius: 999vmax 0 0 999vmax;
 cursor: pointer;
 transition: all 125ms
}
#hd_button button:active {
 scale: .975;
} 
#hd_button button:hover::after{
 animation-play-state: paused;
}
#hd_button button::after{
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 z-index: -1;
 background-color: green;
 background-image: linear-gradient(transparent 50%, hsl(0 0% 0% / .5) 0);
 animation: mask-position 5s linear infinite;
 --conic-stops: black 0 90deg, #0000 0;
 --linear-stops: #0000 0px, black 1px var(--arrow-stripes), #0000 calc(var(--arrow-stripes) + 1px) calc(var(--arrow-stripes) * 2);
 --mask-image:
 conic-gradient(from 225deg at right, var(--conic-stops)),
 conic-gradient(from 225deg at right, var(--conic-stops)),
 repeating-linear-gradient(-135deg, var(--linear-stops)),
 repeating-linear-gradient(-45deg, var(--linear-stops));
 --mask-position: 0 0, 0 0, 0 0, 0 100%;
 --mask-position-to: 0, 0, -100% 0 , -100% 100%;
 --mask-size: calc(100% - var(--arrow)) 100%, 100%, 200% 50%, 200% 50%;
 --mask-repeat: no-repeat, repeat, repeat-x, repeat-x;
 -webkit-mask-image: var(--mask-image);
 -webkit-mask-position: var(--mask-position);
 -webkit-mask-size: var(--mask-size);
 -webkit-mask-repeat: var(--mask-repeat);
 -webkit-mask-composite: source-over, source-out, source-over, source-over;
 mask-image: var(--mask-image);
 mask-position: var(--mask-position);
 mask-size: var(--mask-size);
 mask-repeat: var(--mask-repeat);
 mask-composite: add, subtract, add, add;
}
@keyframes mask-position {
 to { 
 -webkit-mask-position: var(--mask-position-to);
 mask-position: var(--mask-position-to);
 }
}
@property --h {
 syntax: "<percentage>";
 initial-value: 0%;
 inherits: true;
}
/******롤링텍스트*******/
.content_tx {
  overflow: hidden;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    /*transform: translate(-50%, -50%);*/
}
.content__container {
  overflow: hidden;
  height: 20px;
  padding: 0px;
}
.content__container__list {
  margin-top: 0;
  padding: 0px;
  text-align: center;
  list-style: none;
  white-space: nowrap;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.content__container__list__item {
  line-height: 20px;
  margin: 0;
}
.content__container__list__item a{
font-size:0.8rem;
color:#FFF;
font-weight: 500;
text-decoration-line: none;
}
@-webkit-keyframes change {
  0%, 12.66%, 100% {
    transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    transform: translate3d(0, -25%, 0);
  }
  33.32%, 45.98% {
    transform: translate3d(0, -50%, 0);
  }
  49.98%, 62.64% {
    transform: translate3d(0, -75%, 0);
  }
  66.64%, 79.3% {
    transform: translate3d(0, -50%, 0);
  }
  83.3%, 95.96% {
    transform: translate3d(0, -25%, 0);
  }
}
/*****************************/
@media (max-width: 768px) {
.imgone, .imgtow {
display:none;
}
}