/* >> dlMenu > pcMenu Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */
.dlMenu__pcMenu{
  @include selectDisable;
  .dl-menuwrapper{
    width:100%; display: block; float: none; cursor: pointer; text-align: center; font-family: $titleFont;
    @media #{$mq-iPad_land}{text-align: left;}
    & > a{@include transition();
      display: inline-block;
      position: relative; 
      font-size: 36px; 
      line-height: 1.5;
      margin: 0 auto;
      font-weight: 500;
      color: #fff;
      @media #{$mq-iPad_land} {font-size: 38px;}
      @media #{$mq-pc_1280}{font-size: 42px;}
      @media #{$mq-pc_1400}{font-size: 48px;}
      &:before{@include transition(); content: ''; display: block; position: absolute; width: 3rem; height: 1px; left: 0; top: 50%; background-color: $color-active; opacity: 0; transform: translateX(-3rem);}
      &:after{@include transition(); content: ''; display: block; position: absolute; width: 3rem; height: 1px; right: 0; top: 50%; background-color: $color-active; opacity: 0; transform: translateX(3rem);}
    }
    &:hover > a,
    & > a.dl-active{color: $color-primary; background-color: transparent;
    }
    &.selected{
      .nav { color: #fff; background-color: transparent; color: $color-primary;}
    }

    /*3. szint*/
    & > .dl-submenu{top: 44px; background-color: #fff; width: 220px; will-change: opacity;
      @media #{$mq-pc_1400}{top: 64px;}
    }
    .dl-menu{transition: all 0.5s ease-in; margin-top: 0; display: table; width: 100%; top: 0; left: 0; margin-bottom: 1rem; background-color: transparent; will-change: opacity; transform: translateY(-10px);
      a { text-align: left; color: #fff; font-size: 15px; font-weight: 800; opacity: 0;  visibility: hidden;
        &:hover { @include transition; background-color: $color-active; color: $color-darkBlue; }
      }
      &.dl-menuopen{position: relative;  transform: translateY(0);
        a{ transition: all 0.3s ease-in; visibility: visible; opacity: 1;}
      }

    }
    li{&:last-child{
      margin-right: 0; padding-right: 0;
      a{border-bottom: 0;}
      .dl-menu{right: 0;}
    }
    }
    &.dl-menu-root{
      .nav{
        &:before{ top: calc(50% - 7px); height: 13px; margin: 0 auto; background-color: transparent; background-image: url("../images/submenu-selector.svg"); background-repeat: no-repeat; background-position: center center; background-size: 7px 7px;
          @media #{$mq-pc_1280}{background-size: 24px 24px;}
        }
        &:after{ top: calc(50% - 7px); height: 13px; margin: 0 auto; background-color: transparent; background-image: url("../images/submenu-selector.svg"); background-repeat: no-repeat; background-position: center center; background-size: 7px 7px;
          @media #{$mq-pc_1280}{background-size: 24px 24px;}
        }
        &:hover, &.dl-active{&:before{background-image: url("../images/submenu-selector-active.svg");}}
      }
    }

  }

  @media #{$mq-iPad_land}{
    display: block; width: 100%;
  }

}