nav.menuTop {max-width:1280px;margin:0 auto;padding:0 10px;}
nav.menuTop ul {display:flex;list-style:none;}
nav.menuTop li {position:relative;z-index:0;}
nav.menuTop li+li {margin-left:30px;padding-left:30px;}
nav.menuTop li.social {margin-left:auto;padding-left:10px;display:flex;align-items:center;}
nav.menuTop li+li::before {content:'';position:absolute;left:0;top:0;bottom:0;width:1px;height:20px;margin:auto 0;background-color:rgba(255,255,255,0.13)}
nav.menuTop li.social::before {content:none;}
nav.menuTop li a {display:flex;height:60px;justify-content:center;align-items:center;font-size:18px;color:#d7d2e4;text-align:center;font-weight:600;}
nav.menuTop li.social a {height:auto;}
nav.menuTop li.social a+a {margin-left:25px;}
nav.menuTop li.social .cls-1 {fill: #d7d2e4;}
nav.menuTop li.social a:hover .cls-1 {fill: #fff;}
nav.menuTop li.sub>a::after {display:inline-block;margin-left:3px;content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAABHNCSVQICAgIfAhkiAAAAHVJREFUGFd1kIENgDAIBMsGbqIj6AaO6CbqBnUTN8B/rY0FbEJIv39fgqjqklLqUZOInOjuwNNBXFFZcMkFYHfQxzzgfSdAeosgYz7gGYX/R1CZi2Mw+TFj5Bv4gSg3ZgoVCCBKNfkNbgADcWOz3ZwD/FJb5QKhoDpvSOFbswAAAABJRU5ErkJggg==');}
nav.menuTop li.sel>a {font-weight:bold;color:#fff;text-shadow:0 0 15px #fff;}
nav.menuTop li a:hover {color:#fff;text-shadow:0 0 15px #fff;}
nav.menuTop li.item35>a {color:orange;}
nav.menuTop li ul {display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);background-color:#200080;min-width:100%;border-width:0 1px 1px;border-style:solid;border-color:#100040;;visibility:hidden;opacity:0;transition:opacity 0.3s, visibility .3s;}
nav.menuTop li:hover>ul {opacity:1;visibility:visible;}
nav.menuTop li li a {display:block;height:auto;padding:10px 15px;white-space:nowrap;text-align:left;}
nav.menuTop li li+li {margin-left:0;padding-left:0;}
nav.menuTop li li+li::before {margin:0;left:15px;right:15px;width:auto;height:1px;top:0;bottom:auto;}

div.menuAccount ul {list-style:none;display:flex;align-items:center;}
div.menuAccount svg .cls-1 {fill: #200080;}
div.menuAccount li {position:relative;z-index:2;}
div.menuAccount li+li {margin-left:.5em;}
div.menuAccount button {transition:color .3s;display:block;background-color:transparent;border:none;font:bold 16px 'Roboto', sans-serif;color:#484848;cursor:pointer;padding:0;white-space:nowrap;outline:none;}
div.menuAccount button:hover,
div.menuAccount button.show {color:#200080;}
div.menuAccount li.panel>button::before,
div.menuAccount li.panel>a::before {content:'';width:22px;height:22px;display:inline-block;margin-right:10px;vertical-align:middle;background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi4yNTciIGhlaWdodD0iMjIuMzk1IiB2aWV3Qm94PSIwIDAgMjIuMjU3IDIyLjM5NSI+PHBhdGggaWQ9IlBhdGhfNTE2MSIgZGF0YS1uYW1lPSJQYXRoIDUxNjEiIGQ9Ik02OTMuMDUsNDIzLjA4MWEyLjU5MywyLjU5MywwLDAsMCwuNTQ3LS4wNTgsMi42NTgsMi42NTgsMCwwLDAsMi4wNTQtMy4xNDksMTEuMzg0LDExLjM4NCwwLDAsMC03LjU4My04LjQ4NCw1LjkzNiw1LjkzNiwwLDAsMC0zLjQ4Ny0xMC43aDBhNS45NDQsNS45NDQsMCwwLDAtMy40ODcsMTAuNywxMS4zODIsMTEuMzgyLDAsMCwwLTcuNTgzLDguNDg0LDIuNjU4LDIuNjU4LDAsMCwwLDIuMDU0LDMuMTQ5LDIuNTkzLDIuNTkzLDAsMCwwLC41NDcuMDU4Wm0tMTIuNi0xNi40NTRhNC4xMjcsNC4xMjcsMCwxLDEsNC4yNTYsNC4yaC0uMjZBNC4yMDksNC4yMDksMCwwLDEsNjgwLjQ1Myw0MDYuNjI2Wm0tNC4zNDQsMTQuN2EuODg4Ljg4OCwwLDAsMS0uNy0uMzMyLjkxNS45MTUsMCwwLDEtLjE4NS0uNzY2LDkuNjcxLDkuNjcxLDAsMCwxLDkuMjEtNy42NThoLjI5MWE5LjY3MSw5LjY3MSwwLDAsMSw5LjIxLDcuNjU4LjkxOS45MTksMCwwLDEtLjE4NS43NjYuODg4Ljg4OCwwLDAsMS0uNy4zMzJaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjczLjQ1MSAtNDAwLjY4NikiIGZpbGw9IiMyMDAwODAiLz48L3N2Zz4=') no-repeat 50% 50%/contain;}
div.menuAccount button.sub::after,
div.menuAccount a.sub::after {content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAdUlEQVR42mJUYGhYwMDAoA/Ejvf/139gwAIUGRsFgNR+IL7ABCQMoHg/VAKXYpAaRZAGByC+iE0TmmKQmgDG////wyQOQJ12AeQ8qB5kxQ4gJ4M1IJmGrIkBXTFIAK4BiyYGdMUYGtA0gRQFoIcchgZCACDAAIopOkb17NoIAAAAAElFTkSuQmCC');margin-left:4px;display:inline-block;transition:transform .3s;}
div.menuAccount button.sub.show::after,
div.menuAccount a.show::after {transform:rotate(180deg);}
div.menuAccount a {transition:color .3s;font-size:14px;color:#50445b;display:block;padding:10px 0;white-space:nowrap;font-weight:600;}
div.menuAccount a:hover {color:#200080;}
div.menuAccount li.watched>a::before {content:'';width:22px;height:19px;display:inline-block;margin-right:10px;vertical-align:middle;background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS41NTEiIGhlaWdodD0iMTguOTQxIiB2aWV3Qm94PSIwIDAgMjEuNTUxIDE4Ljk0MSI+PHBhdGggaWQ9IlBhdGhfMzMzNzEiIGRhdGEtbmFtZT0iUGF0aCAzMzM3MSIgZD0iTTE1Ljc0MiwzMWE2LjkwNyw2LjkwNywwLDAsMC00Ljk2NywyLjEyMkE2LjkwNyw2LjkwNywwLDAsMCw1LjgwOSwzMUMyLjQsMzEsMCwzNC4wMjUsMCwzNy41OTRjMCw1LjUyLDUuNDkzLDkuNzM4LDEwLjM5MSwxMi4yNTRhLjg0Mi44NDIsMCwwLDAsLjc2OSwwYzQuOS0yLjUxNywxMC4zOTEtNi43MywxMC4zOTEtMTIuMjU0QzIxLjU1MSwzNC4wMzEsMTkuMTU1LDMxLDE1Ljc0MiwzMVpNMTAuNzc1LDQ4LjE1Yy00LjEzMS0yLjE4My05LjA5Mi01LjkxMi05LjA5Mi0xMC41NTYsMC0yLjU1NywxLjYtNC45MTEsNC4xMjUtNC45MTFhNS4zLDUuMywwLDAsMSw0LjI2LDIuMi44MzguODM4LDAsMCwwLDEuNDE0LDAsNS4zMzIsNS4zMzIsMCwwLDEsNC4yNTktMi4yYzIuNTI1LDAsNC4xMjUsMi4zNTUsNC4xMjUsNC45MTFDMTkuODY3LDQyLjIzNSwxNC45LDQ1Ljk3MiwxMC43NzUsNDguMTVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIC0zMSkiIGZpbGw9IiMyMDAwODAiLz48L3N2Zz4=') no-repeat 50% 50%/contain;}
div.menuAccount li ul {position:absolute;top:100%;background-color:#fff;display:block;border:1px solid #d7e2ed;padding:10px;min-width:100%;box-sizing:border-box;visibility:hidden;opacity:0;transition:visibility, opacity .3s;}
div.menuAccount li.show>ul {visibility:visible;opacity:1;}
div.menuAccount li li+li {margin-left:0;padding-left:0;}
div.menuAccount li li+li::before {content:none;}
div.menuAccount li li a {padding:7px 0;}
div.menuAccount ul.logout a {text-align:center;}
div.menuAccount ul.logout li.item2 a {padding:7px 20px;color:#fff;background-color:#7fb615;border:1px solid #7fb615;transition:color .3s, background-color .3s;}
div.menuAccount ul.logout li.item2 a:hover {color:#7fb615;background-color:#fff;}

div.menuAccount a.watchedCountWrap span.watchedCount {margin-left:4px;}
div.menuAccount a.watchedCountWrap span.watchedCount::before {content:'(';}
div.menuAccount a.watchedCountWrap span.watchedCount::after {content:')';}

nav.menuTop button[type="button"] {display:none;margin-left:auto;height:22px;width:28px;position:relative;z-index:0;background:transparent;border:none;outline:none;cursor:pointer;}
nav.menuTop button[type="button"] span {transition: opacity .4s;position:absolute;left:0;right:0;height:4px;background-color:#fff;border-radius:2px;top:0;bottom:0;margin:auto 0;}
nav.menuTop button[type="button"]::before {content:'';position:absolute;left:0;right:0;height:4px;background-color:#fff;border-radius:2px;top:0;transition:top .15s ease-out .15s,transform .15s;}
nav.menuTop button[type="button"]::after {content:'';position:absolute;left:0;right:0;height:4px;background-color:#fff;border-radius:2px;bottom:0;transition:bottom .15s ease-out .15s,transform .15s;}

nav.menuTop button[type="button"].show span {opacity:0;}
nav.menuTop button[type="button"].show::before {top:9px;transform: rotate(-45deg);transition:top .15s,transform .15s ease-out .15s;}
nav.menuTop button[type="button"].show::after {bottom:9px;transform: rotate(45deg);transition:bottom .15s,transform .15s ease-out .15s;}

@media screen and (max-width:1200px){
    div.menuAccount li+li {margin-left:10px;}
    nav.menuTop li+li {margin-left:25px;padding-left:25px;}
    nav.menuTop li.social + li {margin-left:10px;}
    nav.menuTop li a {font-size:15px;}

}

@media screen and (max-width:994px){
    div.menuAccount li.watched>a::before {margin-right:0;}
    div.menuAccount a.watchedCountWrap span.watchedCount {margin-left:0;}
    div.menuAccount a.watchedCountWrap span.tlt {display:none;}
    div.menuAccount li.panel>a {font-size:0;}
    nav.menuTop li+li {margin-left:15px;padding-left:15px;}
}
@media screen and (max-width:768px){
    div.menuAccount li.panel > button::before,
    div.menuAccount li.panel > a::before {margin: 0px}
    div.menuAccount li+li {padding-left:0;margin-left:20px}
    div.menuAccount li+li::before {content:none;}
    div.menuAccount a.watchedCountWrap span.watchedCount {position:absolute;background-color:#ea0000;color:#fff;top:0;right:-8px;font:10px/16px Arial;width:16px;height:16px;text-align:center;border-radius:2px;}
    div.menuAccount a.watchedCountWrap.empty span.watchedCount {opacity:0;}
    div.menuAccount a.watchedCountWrap span.watchedCount::before,
    div.menuAccount a.watchedCountWrap span.watchedCount::after {content:none;}
    div.menuAccount button {font-size:0;width:40px;height:40px;background:#669cff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABIUlEQVR42sSWfxGCMBTHnysgDSQCERaBCDSQCDQwgjQAE0ADNAERoMFz0+1ED9jv+bn7Hn/A7cPGeG+AiGAQynJlGfFDx3JmSUzG0n2QD9rgPhNL4VPMpQPqU/gSt2gOdRVTtGNQiQnsU4AdmcgmKjEFe3IX8QkCQeBPqMQPh7FnF3HvIG537yq2fWr4G03i2vsoIJWhdBYv7KVW15ryWadq6RQQTsoyan7XUfsXVDSHi2XJ5G0zt1lquvhmLjRbfXpNWqBfhjV5aOmmfCnNMCzd1q5uA5dn3unK311dYRwmueRyxmWkppRIFxGnjGPEjniWYhq5FfNZZ0R1RAlETiIv89dB4PYH710WjhnjwVssHF7l6936StVZ2AO1CDwFGAA4PkSenxb8ZQAAAABJRU5ErkJggg==') no-repeat 50% 50%/22px auto;}

    div.menuAccount li.watched>a::before {width:30px;height:26px;}
    div.menuAccount li.panel>a::before {width:28px;height:28px;}

    nav.menuTop {height:50px;display:flex;align-items:center;margin:0 0 0 auto;padding:0;}
    nav.menuTop button[type="button"] {display:inline-block;}

    nav.menuTop ul {position:fixed;right:-90%;width:90%;top:110px;bottom:0;overflow:auto;display:none;background-color:#200080;}
    nav.menuTop li.social {justify-content:center;}
    nav.menuTop li+li {margin-left:0;padding-left:0;border-top:1px solid #2c0e88;}
    nav.menuTop li+li::before {content:none;}
    nav.menuTop li a {display:block;text-align:left;height:auto;padding:15px;}
    nav.menuTop li.sub>a::after {content:none;}
    nav.menuTop li ul {position:static;transform:none;background-color:transparent;min-width:0;border-width:1px 0 0;border-color:#2c0e88;visibility:visible;opacity:1;transition:none;width:auto;}
    nav.menuTop li li a {padding:10px 15px 10px 45px;white-space:normal;}
}