/* no */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

/* lib */
.flex {
  display:flex;
}

.flex-column-nowrap {
  flex-flow:column nowrap;
}

.flex-order-m1 {
  order:-1;
}

.flex-ai-c {
  align-items:center;
}

.height-100p {
  height:100%;
}

.relative {
  position:relative;
}

/* cus */
.top-bar {
  height:100px;
}

.top-bar .menu-box-1 > ul > li > a::before {
  content:"";
  display:block;
  width:5px;
  height:5px;
  background-color:black;
  position:absolute;
  top:calc(50% - 20px);
  left:calc(50% - 2.5px);
  border-radius:50%;
  visibility:hidden;
  opacity:0;
  transition: opacity .4s, visibility .4s;
}

.top-bar .menu-box-1 > ul > li:hover > a::before {
  opacity:1;
  visibility:visible;
}

.top-bar .menu-box-1 > ul > li {
  position:relative;
}

.top-bar .menu-box-1 > ul > li > ul {
  background-color:red;
  top:100%;
  left:0;
  width:100%;
  height:100px;
  position:absolute;
  border:2px solid blue;
}

.top-bar .menu-box-1 > ul > li > ul::before {
  content:"";
  position:absolute;
  top:-7px;
  left:calc(50%);
  transform:translateX(-50%) rotate(45deg);
  width:10px;
  height:10px;
  background-color:red;
  border:2px solid blue;
  border-bottom-color:transparent;
  border-right-color:transparent;
}

.lang-select > ul > li > a > span:last-child {
  transition:transform 1s;
  font-size:5px;
}

.lang-select > ul > li:not(.flex-order-m1) > a > span:last-child {
  visibility:hidden;
}

.lang-select.active > ul > li > a > span:last-child {
  transform:rotate(180deg);
}

.lang-select {
  border:10px solid red;
  display:inline-block;
  border-radius:10px;
  height:22px;
  overflow:hidden;
  transition:height 1s;
}

.lang-select.active {
  height:42px;
}

.ship-ani-box {
  position: relative;
  width: 476px;
  height: 267px;
  border:20px solid red;
  margin:0 auto;
}

.ship-ani-box > .outerWrapper {
  width:100%;
  height:100%;
  position: relative;
}

.ship-ani-box > .follow-path {
  position: absolute;
  width: 51px;
  height: 20px;
  top: -12px;
  left: -23px;
  z-index: 99;
}

.img-box-1 {
  opacity:0;
  transform:translateY(-500px);
  transition:opacity 3s, transform 3s 1s;
}

.img-box-1.active {
  opacity:1;
  transform:translateY(0);
}

/* 발견되면 활성화시키는 라이브러리 시작 */
function ActiveOnVisible__init() {
    $(window).resize(ActiveOnVisible__initOffset);
    ActiveOnVisible__initOffset();

    $(window).scroll(ActiveOnVisible__checkAndActive);
    ActiveOnVisible__checkAndActive();
}

function ActiveOnVisible__initOffset() {
    $('.active-on-visible').each(function(index, node) {
        var $node = $(node);

        var offsetTop = $node.offset().top;
        $node.attr('data-active-on-visible-offsetTop', offsetTop);

        if ( !$node.attr('data-active-on-visible-diff-y') ) {
            $node.attr('data-active-on-visible-diff-y', '0');
        }

        if ( !$node.attr('data-active-on-visible-delay') ) {
            $node.attr('data-active-on-visible-delay', '0');
        }
    });

    ActiveOnVisible__checkAndActive();
}

function ActiveOnVisible__checkAndActive() { 
    $('.active-on-visible:not(.actived)').each(function(index, node) {
        var $node = $(node);

        var offsetTop = $node.attr('data-active-on-visible-offsetTop') * 1;
        var diffY = parseInt($node.attr('data-active-on-visible-diff-y'));
        var delay = parseInt($node.attr('data-active-on-visible-delay'));

        var callbackFuncName = $node.attr('data-active-on-visible-callback-func-name');

        if ( $(window).scrollTop() + $(window).height() + diffY > offsetTop ) {
            $node.addClass('actived');

            setTimeout(function() {
                $node.addClass('active');
                if ( window[callbackFuncName] ) {
                    window[callbackFuncName]($node);
                }
            }, delay);
        }
    });
}

$(function() {
    ActiveOnVisible__init();
})
/* 발견되면 활성화시키는 라이브러리 끝 */

function ShipAniBox__init() {
  var path = anime.path('.ship-ani-box path');

  var motionPath = anime({
    targets: '.ship-ani-box .follow-path',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: 'easeInOutQuad',
    duration: 3000,
    loop: false 
  });
}

function LangSelect__init() {
  $('.lang-select').click(function() {
    $(this).toggleClass('active');
  });
  
  $('.lang-select > ul > li').click(function() {
    $(this).addClass('flex-order-m1');
    $(this).siblings('.flex-order-m1').removeClass('flex-order-m1');
  });
}

$(function() {
  LangSelect__init();
});