.header-top                          { text-align: center; margin: auto; margin-top: 5px; width: calc(100% - 20px); }
.header-top-img                      { position: relative; z-index: 0; max-width: 454px; min-width: 380px; width: 99%; margin: auto; }
.header-top-img-img                  { width: calc(100% - 20px); }
.header-top-txt                      { text-align: center; margin: auto; font-family: Arial, Helvetica, Sans-Serif; color: #C92329; }

.header-top-phone                    { position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); max-width: 1558px; min-width: 380px; width: 99%; text-align: right; }
.header-top-phone-button             { display: inline-block; padding-right: calc(var(--res-ratio) * 10px); padding-top: calc(var(--res-ratio) * 5px); }
.header-top-phone-button img         { height: calc(var(--res-ratio) * 24px); }
.header-top-phone-txt-box            { display: inline-block; padding-right: calc(var(--res-ratio) * 30px); padding-top: calc(var(--res-ratio) * 8px); }
.header-top-phone-txt                { font-family: Arial, Helvetica, Sans-Serif; color: #000000; font-weight: bold; white-space: nowrap; overflow: hidden; }
a.header-top-phone-txt               { color: #000000; font-weight: bold; text-decoration: none; }

.menu-hr-box                         { padding-top: max(5px, 1%); padding-bottom: max(5px, 0.2%); margin: auto; max-width: 1558px; min-width: 380px; width: 99%; }
.menu-hr                             { border: 0; height: 1px; background: #C9E6F4; }

.nav-top-div                         { margin: auto; max-width: 1558px; min-width: 380px; width: 99%; }
.nav-top-header                      { display: none; }
.nav-top-header-img                  { }
.nav-top-header-txt                  { }
.nav-top-pos1                        { display: block; }
.nav-top-pos2                        { display: block; }
.nav-top                             { text-align: center; line-height: var(--menu-line-height); background-color: #C9E6F4; }
.nav-top>li                          { display: inline-block; list-style-type: none; font-family: Verdana; color: #000000; font-weight: bold; }
.nav-top>li a                        { font-family: Verdana; color: #000000; font-weight: bold; text-decoration: underline; }
.nav-top>li:hover > .nav-submenu     { display: block; }
.nav-buttons                         { display: flex; position: relative; cursor: pointer; overflow: hidden; z-index: 13; padding-left: calc(var(--res-ratio) * 25px); padding-right: calc(var(--res-ratio) * 25px); }
.nav-buttons:hover,
.nav-buttons:active,
.nav-buttons:focus                   { color: #000000; }
.nav-buttons:before,
.nav-buttons:after                   { content: ''; position: absolute; top: 50%; width: calc(var(--res-ratio) * -20px); height: 100%; background-color: rgba(236, 192, 39, 0.8); z-index: -1; }
.nav-buttons:before                  { left: calc(var(--res-ratio) * -20px); transform: translate(-50%, -50%); }
.nav-buttons:after                   { right: calc(var(--res-ratio) * -20px);  transform: translate(50%, -50%); }
.nav-buttons:hover:before,
.nav-buttons:active:before,
.nav-buttons:focus:before            { animation: nav-buttons-from-left 0.7s both; }
.nav-buttons:hover:after,
.nav-buttons:active:after,
.nav-buttons:focus:after             { animation: nav-buttons-from-right 0.7s both; }
@keyframes nav-buttons-from-right    {
                                       0%      { right: calc(var(--res-ratio) * -20px); }
                                       50%     { right: 50%; width: calc(var(--res-ratio) * 20px); }
                                       100%    { right: 50%; width: 100%; }
                                     }
@keyframes nav-buttons-from-left     {
                                       0%      { left: calc(var(--res-ratio) * -20px); }
                                       50%     { left: 50%; width: calc(var(--res-ratio) * 20px); }
                                       100%    { left: 50%; width: 100%; }
                                     }

.nav-submenu                         { position: absolute; z-index: 14; display: none; }
.nav-top2                            { text-align: left; background-color: #C9E6F4; line-height: var(--menu-line-height); padding-top: calc(var(--res-ratio) * 5px); padding-bottom: calc(var(--res-ratio) * 10px); }
.nav-top2>li                         { list-style-type: none; font-family: Verdana; color: #000000; font-weight: bold; }
.nav-top2>li a                       { font-family: Verdana; color: #000000; font-weight: bold; text-decoration: underline; }
.nav-buttons2                        { display: flex; position: relative; cursor: pointer; overflow: hidden; z-index: 13; border: 0 solid rgba(255,255,255,.3); padding-left: calc(var(--res-ratio) * 15px); padding-right: calc(var(--res-ratio) * 25px); }
.nav-buttons2:hover,
.nav-buttons2:active,
.nav-buttons2:focus                  { color: #000000; }
.nav-buttons2:before,
.nav-buttons2:after                  { content: ''; position: absolute; top: 50%; width: calc(var(--res-ratio) * -20px); height: 100%; background-color: rgba(236, 192, 39, 0.8); z-index: -1; }
.nav-buttons2:before                 { left: calc(var(--res-ratio) * -20px); transform: translate(-50%, -50%); }
.nav-buttons2:after                  { right: calc(var(--res-ratio) * -20px);  transform: translate(50%, -50%); }
.nav-buttons2:hover:before,
.nav-buttons2:active:before,
.nav-buttons2:focus:before           { animation: nav-buttons2-from-left 0.7s both; }
.nav-buttons2:hover:after,
.nav-buttons2:active:after,
.nav-buttons2:focus:after            { animation: nav-buttons2-from-right 0.7s both; }
@keyframes nav-buttons2-from-right   {
                                      0%      { right: calc(var(--res-ratio) * -20px); }
                                      50%     { right: 50%; width: calc(var(--res-ratio) * 20px); }
                                      100%    { right: 50%; width: 100%; }
                                     }
@keyframes nav-buttons2-from-left    {
                                      0%      { left: calc(var(--res-ratio) * -20px); }
                                      50%     { left: 50%; width: calc(var(--res-ratio) * 20px); }
                                      100%    { left: 50%; width: 100%; }
                                     }

@media screen and (min-width: 1580px)
            {
             .header-top-txt                  { font-size: 18px; }
             .header-top-phone-txt            { font-size: 14px; }
             a.header-top-phone-txt           { font-size: 14px; }

             .nav-top>li                      { font-size: var(--menu-button-font-size); }
             .nav-top>li a                    { font-size: var(--menu-button-font-size); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top2>li                     { font-size: var(--menu-button-font-size2); }
             .nav-top2>li a                   { font-size: var(--menu-button-font-size2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
            }

@media screen and (min-width: 1380px) and (max-width: 1579px)
            {
             .header-top-txt                  { font-size: 18px; }
             .header-top-phone-txt            { font-size: 14px; }
             a.header-top-phone-txt           { font-size: 14px; }

             .nav-top>li                      { font-size: var(--menu-button-font-size); }
             .nav-top>li a                    { font-size: var(--menu-button-font-size); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top2>li                     { font-size: var(--menu-button-font-size2); }
             .nav-top2>li a                   { font-size: var(--menu-button-font-size2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
            }

@media screen and (min-width: 1260px) and (max-width: 1379px)
            {
             .header-top-txt                  { font-size: 16px; font-weight: bold; }
             .header-top-phone-txt            { font-size: 13px; }
             a.header-top-phone-txt           { font-size: 13px; }

             .nav-top>li                      { font-size: var(--menu-button-font-size); }
             .nav-top>li a                    { font-size: var(--menu-button-font-size); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top2>li                     { font-size: var(--menu-button-font-size2); }
             .nav-top2>li a                   { font-size: var(--menu-button-font-size2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
            }

@media screen and (min-width: 1000px) and (max-width: 1259px)
            {
             .header-top-txt                  { font-size: 14px; font-weight: bold; }
             .header-top-phone-txt            { font-size: 12px; }
             a.header-top-phone-txt           { font-size: 12px; }

             .nav-top>li                      { font-size: var(--menu-button-font-size); }
             .nav-top>li a                    { font-size: var(--menu-button-font-size); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top2>li                     { font-size: var(--menu-button-font-size2); }
             .nav-top2>li a                   { font-size: var(--menu-button-font-size2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
            }

@media screen and (min-width: 780px) and (max-width: 999px)
            {
             .header-top-txt                  { font-size: 12px; font-weight: bold; }
             .header-top-phone-txt            { font-size: 9px; }
             a.header-top-phone-txt           { font-size: 9px; }

             .nav-top>li                      { font-size: var(--menu-button-font-size); }
             .nav-top>li a                    { font-size: var(--menu-button-font-size); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top2>li                     { font-size: var(--menu-button-font-size2); }
             .nav-top2>li a                   { font-size: var(--menu-button-font-size2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
            }

@media screen and (min-width: 620px) and (max-width: 779px)
            {
             .header-top-txt                  { font-size: 12px; font-weight: bold; }
             .header-top-phone-txt            { font-size: 9px; }
             a.header-top-phone-txt           { font-size: 9px; }

             .nav-top>li                      { font-size: var(--menu-button-font-size); }
             .nav-top>li a                    { font-size: var(--menu-button-font-size); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top2>li                     { font-size: var(--menu-button-font-size2); }
             .nav-top2>li a                   { font-size: var(--menu-button-font-size2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
            }

@media screen and (max-width: 619px)
            {
             .header-top-txt                  { font-size: 12px; font-weight: bold; }
             .header-top-phone-txt            { font-size: 9px; }
             a.header-top-phone-txt           { font-size: 9px; }

             .nav-top-div                     { margin: auto; min-width: 350px; width: 99%; }
             .nav-top-header                  { position: relative; cursor: pointer; z-index: 13; display: block; text-align: center; margin-top: 7px; }
             .nav-top-header-img              { display: inline-block; padding-right: 15px; height: 13px; vertical-align: middle; }
             .nav-top-header-txt              { display: inline-block; font-family: Verdana; font-size: 14px; color: #000000; font-weight: bold; margin-top: -2px; }
             .nav-top-pos1                    { display: none; }
             .nav-top                         { line-height: unset; box-sizing: border-box; background-color: #C9E6F4; padding-top: 3px; padding-bottom: 3px; margin-top: 7px; }
             .nav-top>li                      { font-size: 12px; display: block; }
             .nav-top>li a                    { font-size: 12px; text-decoration-thickness: 1px; text-underline-offset: 1px; }
             .nav-top>li:hover > .nav-submenu { display: none; }
             .nav-buttons                     { display: block; padding-left: 5px; padding-right: 0; padding-top: 5px; padding-bottom: 5px; }


/*             .nav-top-pos1                    { margin-top: 15px; }
             .nav-top                         { line-height: unset; box-sizing: border-box; padding-top: 3px; background-color: #C9E6F4; margin: auto; min-width: 380px; width: 99%; }
             .nav-top>li                      { font-size: var(--menu-button-font-size); }
             .nav-top>li a                    { font-size: var(--menu-button-font-size); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top2>li                     { font-size: var(--menu-button-font-size2); }
             .nav-top2>li a                   { font-size: var(--menu-button-font-size2); text-decoration-thickness: 1px; text-underline-offset: 2px; }
             .nav-top>li:hover > .nav-submenu { display: none; }
             .nav-buttons                     { padding-bottom: 5px; } */
            }