.athm-nav {
  height: 88px;
  line-height: 1;
  background-color: #2873FF;
}

.athm-nav a {
  text-decoration: none;
}

.athm-nav__searchframe {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  color: #999;
  line-height: 28px;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  transition: all 200ms ease;
}

.athm-nav__searchframe::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 8px 5px 0 0;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAMFBMVEUAAAApc/8pc/8pc/8wef8pdf8odP8pdP8qdf8pdP8rc/8rgP8pdP8rdP8oc/8oc/+2iSjtAAAAD3RSTlMA1PbbFWulcFVRKgyKQrqLIsJdAAAAhUlEQVQY02MAgjYj5QwGKJj8HwgsIWye/+KrdxX+PwDmnFcFkUF/QCTnpwsgild/ApBk/gpRHW8AJPoFIBzGH0AivwDCYf8GJOwXQDhcn4GE/gYIh/sTOgehDN0AhNHoliKcg+TQfw5IXngvguQ5x49AKZi3WeSBUnAAkoIBdCmgjQipAACobTX+u560hwAAAABJRU5ErkJggg==") no-repeat;
  background-size: 100% 100%;
}

.athm-nav__searchicon {
  line-height: 0;
}

.athm-nav__searchicon::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAmVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VHQRUAAAAMnRSTlMAEfkU9skGHNyyDzYE8+aKUfHiy2MoDOnTxcF22M1bQSIZo5hHPS3r3myRg4F8S7q5bkoSZL8AAAGESURBVDjLhZPZdoMgFEWRYBDneTbRzOnc8/8f17Joq0mU7pfLWm4PlyuSkXXfiMRnRSeabE1msTclQJnneYxSWKnxqKwPHdhlH2YGsbO3J4uhDe/TjFfQJCQjh4ohWN04ww7xJ7kltSD6ac4O5ZHc45gQw9jPK8qePMIrBPnf/oi3ZA6nxeb37B29knk2tOU/KyRkiQ9cXVndkoaL0jaKDVl7XMgyCRxZGuw1UoBnOXghd9PsV+cykGUaiReW/V18z9BIa/WYeURHDCkVnq1NYlLqtD0NqidB3zTSUZ2uwZNGeqGBnFMGSyOZauKuRQ+LjhP5akApqkVJoHHV5W1puuCELOa/S1ycWedU4u/1PIDJZ5ysxn4c9Eqgch5zauBERnqBNr3vpwRQDdMbEcB7304nLSLsTxXM6V+cbyycu2DLXeLy44t5hp/aZDBvLZdfYyA6+7FfREDRcFd2q6yJZjjPtcVArTpwVvKLKStZ3d2e3DYMw86VoaxEZmlRWTvyv7XjXxbdH433bc8GAAAAAElFTkSuQmCC") no-repeat;
  background-size: 100% 100%;
}

.athm-nav__backward {
  float: left;
  padding: 13px 15px;
  line-height: 0;
}

.athm-nav__backward::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 18px;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkBAMAAAB73QeTAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACXRSTlMA/niHXlFqJiV8vycNAAAAK0lEQVQY02PAApgV4ExDcbigYABcUHTQCTIJOsDdrCjCMMiFJRDCCUjhDgD6SwocO7niFwAAAABJRU5ErkJggg==") no-repeat;
  background-size: 100% 100%;
}

.athm-nav__home {
  float: left;
  padding: 13px 15px;
  line-height: 0;
}

.athm-nav__home::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAARVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////9SnXPCAAAAFnRSTlMAmWYH3G9K9/HSfj0Y47GjjyHOslQwapTH+gAAAItJREFUOMvtzUkOgzAQRNECD0w2mKnuf9QgOYoRHcMiu8BfdUslPRxyYZqCw1nK1NyqjUK2riHndZ3JpstM3EBqiy2rycFlpKpV76etoimlfkz/2CdTSLFkCiklTCF9M8NBEmYAjJCEaaC54LSFGiQuIp/Rn4wKfip+HZXxKG818tyVRvs8rL8aefsCKW0V0U5XOUwAAAAASUVORK5CYII=") no-repeat;
  background-size: 100% 100%;
}

.athm-nav__dot {
  float: right;
  padding: 21px 15px;
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: 0;
  box-shadow: none;
}

.athm-nav__dot::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAEAgMAAACSKdVHAAAADFBMVEUAAAD///////////84wDuoAAAAA3RSTlMA40mAJZ3FAAAAHElEQVQI12OYxsDAmcAApGoZGNgvMAApGAMuBQB5XAbN4sX9cgAAAABJRU5ErkJggg==") no-repeat;
  background-size: 100% 100%;
}

.athm-nav__dot.activate ~ .athm-nav__dotlayer {
  display: block;
}

.athm-nav__dot.activate ~ .athm-nav__mask {
  display: block;
}

.athm-nav__dotlayer {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 1010;
  display: none;
  width: 258px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.athm-nav__dotlayer::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 16px;
  width: 0;
  height: 0;
  border: solid;
  border-width: 0 7px 7px;
  border-color: transparent transparent #fff;
  overflow: hidden;
}

.athm-nav__dotlayer > div:first-child {
  height: 50px;
  overflow: hidden;
}

.athm-nav__dotlayer > div:first-child img {
  float: left;
  width: 34px;
  height: 34px;
  margin: 8px 15px 0 5px;
  border: 0;
  border-radius: 50%;
}

.athm-nav__dotlayer > div:first-child a {
  position: relative;
  float: left;
  padding: 0 15px;
  font-size: 16px;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}

.athm-nav__dotlayer > div:first-child a:visited {
  color: #333332;
}

.athm-nav__dotlayer > div:first-child a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 14px;
  margin-top: -7px;
  border-left: solid #eee 1px;
  transform: scaleX(0.5);
  overflow: hidden;
}

.athm-nav__dotlayer > a {
  position: relative;
  display: block;
  height: 50px;
  overflow: hidden;
}

.athm-nav__dotlayer > a img {
  float: left;
  width: 34px;
  height: 34px;
  margin: 8px 0 0 20px;
  border: 0;
  border-radius: 50%;
}

.athm-nav__dotlayer > a i {
  position: absolute;
  top: 6px;
  right: 199px;
  min-width: 12px;
  height: 16px;
  padding: 0 2px;
  font-size: 12px;
  font-style: normal;
  color: #fff;
  line-height: 16px;
  white-space: nowrap;
  text-align: center;
  background-color: #fd4d4d;
  border-radius: 8px;
}

.athm-nav__dotlayer > a span {
  display: block;
  margin: 0 20px 0 69px;
  font-size: 16px;
  color: #333;
  line-height: 50px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.athm-nav__dotlayer > div:last-child {
  padding: 5px 0;
  overflow: hidden;
}

.athm-nav__dotlayer > div:last-child::before {
  content: "";
  display: block;
  height: 0;
  border-top: solid #eee 1px;
  transform: scaleY(0.5);
  overflow: hidden;
}

.athm-nav__dotlayer > div:last-child a {
  float: left;
  width: 33.333%;
  font-size: 16px;
  color: #333;
  line-height: 40px;
  text-align: center;
}

.athm-nav__dotlayer > div:last-child a:visited {
  color: #333332;
}

.athm-nav__mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: rgba(27, 27, 27, 0.3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: 0;
  box-shadow: none;
}

.athm-nav-header {
  position: relative;
  height: 40px;
  padding: 2px 0;
}

.athm-nav-header__logo {
  float: left;
  margin: 10px 15px 0 15px;
}

.athm-nav-header__logo::before {
  content: "";
  display: inline-block;
  width: 80px;
  height: 20px;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAoCAMAAABO8gGqAAAApVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+4/eNVAAAANnRSTlMA+gXvEii9Pi/VOjIKkEOq6dtlJCBYEOV+8qGUXRsDblNGFse0zfeel4RNNcN4aeLfuHKvpoplgMJWAAAEeElEQVRYw82Y2ZqiMBCFCxAURUUQEJHNfdexu/P+jzYuKUlMUJme+Xr+q3TlGE8qW9nwf1HbyOMtF1v5MFqdnKzTgKdYPcNT3/xKbzDc2voLmdrIdouJRshY1quHZNq5NQ1yYwFPWZ4l9pcLr/jQ6HinF0KXUDzZJHuXnll+bsaoe57BnKqMV4kZ4ni/xL64xYIz+eSitYswMXCQBqxoc25w1IHDD6jMtOA5KRrUxL42eY3DC5V6KGow737jThfjowaPYGJDEP2PDY6KP9urEp2HuucocKHfKcjn2LfqMKhVDC7vY0z0+d8wOHgt9CstcRwpt23SN8h/aRCg/0nOZA75EYO2KaLdDVI2E9JuzX/G4A5EFrzBsQWQxQdCmdY4fN9X/6XBuSaicAYt095ZsCMltM+Sn92Dlx148GD33KBaOxObNBh6zRs1ljcNKlYlgyl9R+JckxuU7A0y6tGGKr6cupSNSZD0trH0F4vyoeuXVNdxvbXMPY+xfGbQwdgSCoPv4U8IMsRYncjhCpbYLjLf96e7xhODJ5zLTK1qcDwjyMzCoD48MyUcxiV2Ff9yHl/EL/eM3nwgtgAxUBnaNnq1C2IopXUkiN3nCyPag2wTgOx64fWo0AuwmFkSGWMQDcrpQxl7hSBhk83rfiKMcrK+aOvo0uo4IheCcURkWN826H8WGq2o6dfRrIgP0yLFBAmwBGr2LqUWRPK77bsGvUDwhycO6eVZj0gILLgncQByg+E3Dbrsh7QW2zVBG2k2IzK0HKV9cJMSg/a3DMZthRGYOn9yrn2zNNsSKaaLyprSdaHE4OEPDSZxAnHE1R9dC3iiYDrYpL2ye7qQ7wlR2jVoKxx0e0DBoFsQ4rcWjJnMDRWiGQq3mU8goK4/w+IG7HHy9HEzhDt+gg4alPL8onZtcb/XH0WNtKsxe32/Dli9xypxzWUGj/fZ8qBBiw0mNH8H4S5oc7MXi4pp8+NhQsyGibg3Ehnxh0Qlb9C+SYXbd9IAEdUs+jtpsdTFNU2xsC/nry869wTUVTWDy8f0OSCljq9bNpIdlABnlWIgAZY1DbuwCJMqBvdMAB3gAouFvdZuUHsCWueWadwwX/Lf3B9bQloVDHYUIjKfLAb7UbbOPOe0irrbWyFQ+zVo6quAU4on2Sm5Z2NGmb5v0NXeEWq0WBgZ3EkRdEMf1CP2wgMhc8W+b9Aj72BcKoAV/8D18j1mrshhDjsiHBHx3bArLPEIt3SzuS0Vfol7NVh9zqmrjsYsHaZ19vSe8iGp8+DO6bBB93r8rwkIGwDJQCn/oY1fLdID18RfFsUga8Ggzj6zVV6STLmPFy/lFt3rDrSxVOaLrQjAn17jt8HrB0kCuRkq+2pP3VohEbZrjiF61Jib7Dg4z37DaJSL+2RFiOnjGB+ENEGkb+M7UPUtXnP/2bSap4VxZKr+A75Zy2BJn+hd0evRa9xkli1dgAx9S4jWzasXC2DJYuO+7vbjMfOJopkYRNEOphE543sI3kBVy3osCvwlkhI/vwHLLdXVmx4OzwAAAABJRU5ErkJggg==") no-repeat;
  background-size: 100% 100%;
}

.athm-nav-header__logo:nth-last-child(5) ~ .athm-nav-header__camera {
  right: 99px;
}

.athm-nav-header__logo:nth-last-child(5) ~ .athm-nav__searchframe {
  margin-right: 99px;
}

.athm-nav-header__camera {
  position: absolute;
  top: 8px;
  right: 60px;
  padding: 7px 10px;
  line-height: 0;
  transition: all 200ms ease;
}

.athm-nav-header__camera::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 14px;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAMAAAA3HE0QAAAAOVBMVEUAAACnp6ebm5uampqZmZmampqZmZmampqZmZmZmZmZmZmampqZmZmampqZmZmampqZmZmenp6ZmZkAUSU7AAAAEnRSTlMADEG/8+PVmpSPNyvufOZJxh3+17KsAAAAoklEQVQoz52R2w6EIAwFW+4XFT3//7GbGNaSlEh2502cDFDo4TrxcF6ksRiwpDDYmDq8wUwCu3zssPOASuiATjSPmx6QxI1v1P9/A5LoBgGyWnNwLuQqK8AgcEIn8UxgC8TCXCJgeSIkHKZf+UDSQgWMDAVVCRmRHiKyEgKKCAVBCQ7jqOGWwnKL5SGX11wNajnqfx5r/dzCb4LHK57aq+HbB947E+1IxbYCAAAAAElFTkSuQmCC") no-repeat;
  background-size: 100% 100%;
}

.athm-nav-header__login {
  float: right;
  position: relative;
  margin: 5px 15px 0 15px;
}

.athm-nav-header__login img {
  width: 30px;
  height: 30px;
  vertical-align: top;
  border: 0;
  border-radius: 50%;
}

.athm-nav-header__login i {
  position: absolute;
  top: -2px;
  right: -5px;
  min-width: 12px;
  height: 16px;
  padding: 0 2px;
  font-size: 12px;
  font-style: normal;
  color: #fff;
  line-height: 16px;
  white-space: nowrap;
  text-align: center;
  background-color: #fd4d4d;
  border-radius: 8px;
}

.athm-nav-header__login i:empty {
  display: none;
}

.athm-nav-header .athm-nav__searchframe {
  margin-top: 6px;
}

.athm-nav-service__assist {
  position: relative;
  height: 44px;
}

.athm-nav-service__chief {
  display: flex;
  justify-content: space-between;
  margin: 0 43px 0 15px;
}

.athm-nav-service__chief a {
  font-size: 17px;
  color: #fff;
  line-height: 44px;
  opacity: 0.5;
}

.athm-nav-service__chief a:visited {
  color: #fffffe;
}

.athm-nav-service__chief a.activate {
  opacity: 1;
}

@media screen and (min-width: 360px) {
  .athm-nav-service__chief a {
    font-size: 18px;
  }
}

.athm-nav-service__arrow {
  position: absolute;
  top: 0;
  right: 10px;
  padding: 17px 5px;
  line-height: 0;
  transition: transform 200ms ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: 0;
  box-shadow: none;
}

.athm-nav-service__arrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 10px;
  vertical-align: top;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAUBAMAAAAXVIIGAAAAGFBMVEUAAAD///////////////////////////8jfp1fAAAACHRSTlMA/niHXlElamQplLwAAABSSURBVBjTZcoxDYRAAADBzT+hh4QeC0jAARKQgP+KbjcXph64Gczw2xicD//lgkzLDsc2pBVsJZvJVrKZbCWbqWaqlWqmWqlmqplqppqpVvp6AZ85CjjlUxvGAAAAAElFTkSuQmCC") no-repeat;
  background-size: 100% 100%;
}

.athm-nav-service__arrow.activate {
  transform: rotate(180deg);
}

.athm-nav-service__arrow.activate::after {
  display: none;
}

.athm-nav-service__arrow.activate ~ .athm-nav-service__arrowlayer {
  display: block;
}

.athm-nav-service__arrow.activate ~ .athm-nav__mask {
  display: block;
}

.athm-nav-service__arrow.highlight::after {
  content: "";
  position: absolute;
  top: 11px;
  right: -2px;
  width: 6px;
  height: 6px;
  vertical-align: top;
  background-color: #fd4d4d;
  border-radius: 50%;
}

.athm-nav-service__arrowlayer {
  position: absolute;
  top: 44px;
  right: 8px;
  z-index: 1010;
  display: none;
  width: 94px;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translate3d(0, 0, 0);
}

.athm-nav-service__arrowlayer::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 10px;
  width: 0;
  height: 0;
  border: solid;
  border-width: 0 7px 7px;
  border-color: transparent transparent #fff;
  overflow: hidden;
}

.athm-nav-service__arrowlayer a {
  position: relative;
  display: block;
  height: 45px;
  padding: 0 15px;
  font-size: 16px;
  color: #333;
  line-height: 44px;
  overflow: hidden;
}

.athm-nav-service__arrowlayer a:visited {
  color: #333332;
}

.athm-nav-service__arrowlayer a::before {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  border-bottom: solid #eee 1px;
  transform: scaleY(0.5);
}

.athm-nav-service__arrowlayer a:last-child::before {
  display: none;
}

.athm-nav-service__arrowlayer a.highlight::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-top: 12px;
  vertical-align: top;
  background-color: #fd4d4d;
  border-radius: 50%;
}

.athm-nav-service .athm-nav__searchicon {
  display: none;
}

.athm-nav-service.sticky .athm-nav-service__assist {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  background-color: #2873FF;
}

.athm-nav-service.sticky .athm-nav-service__assist .athm-nav-service__chief {
  margin-right: 76px;
}

.athm-nav-service.sticky .athm-nav-service__assist .athm-nav-service__arrow {
  right: 43px;
}

.athm-nav-service.sticky .athm-nav-service__assist .athm-nav-service__arrowlayer {
  right: 41px;
}

.athm-nav-service.sticky .athm-nav-service__assist .athm-nav__searchicon {
  display: block;
  position: absolute;
  top: 0;
  right: 10px;
  padding: 13px 5px;
}

.athm-nav-channel {
  position: relative;
  height: 44px;
}

.athm-nav-channel .athm-nav__searchicon {
  float: right;
  padding: 13px 15px;
}

.athm-nav-channel__title {
  font-size: 17px;
  color: #fff;
  line-height: 44px;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
  overflow: hidden;
}

.athm-nav-subject {
  position: relative;
  height: 44px;
}

.athm-nav-subject .athm-nav__home {
  margin-right: 10px;
}

.athm-nav-subject .athm-nav__dot {
  margin-left: 10px;
}

.athm-nav-subject .athm-nav__searchframe {
  position: relative;
  top: 8px;
  text-align: center;
}