@font-face {
  font-family: "XType";
  src: url("../assets/font/XType-Regular.otf");
}

:root {
  --pixel-ratio: 1;
}

* {
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scrollbar-width: none;
}

a {
  color: #007aff;
  text-decoration: none;
}

#app {
  opacity: 0;
  transition: 0.1s;
}

.start {
  position: fixed;
  top: 50%;
  transform: translate(0, -75%);
  z-index: 999;
  width: 100%;
  background-color: #fff;
  text-align: center;
}

.start img {
  width: calc(88px * var(--pixel-ratio));
}

.start .p1 {
  margin-top: calc(8px * var(--pixel-ratio));
  font-size: calc(22px * var(--pixel-ratio));
}

.start .p2 {
  font-size: calc(14px * var(--pixel-ratio));
  color: #a0a0a0;
}

.header {
  position: fixed;
  z-index: 1;
  width: 100%;
}

.header .city {
  color: #fff;
  font-size: calc(24px * var(--pixel-ratio));
  text-align: center;
  margin-top: calc(24px * var(--pixel-ratio));
}

.header a {
  z-index: 10;
  display: block;
  position: relative;
  bottom: calc(27px * var(--pixel-ratio));
  left: calc(100% - calc(40px * var(--pixel-ratio)));
  height: calc(20px * var(--pixel-ratio));
}

.header a img {
  height: 100%;
}

.header .city_locate {
  margin: calc(-18px * var(--pixel-ratio)) auto 0 auto;
  width: calc(6px * var(--pixel-ratio));
  height: calc(8px * var(--pixel-ratio));
  background: url("../assets/local_indicator_focused.png") no-repeat;
  background-size: contain;
  filter: invert(100%);
}

.header .tips {
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  color: #fff;
  font-size: calc(10px * var(--pixel-ratio));
  padding: calc(3px * var(--pixel-ratio)) calc(8px * var(--pixel-ratio));
  background: rgba(255, 255, 255, 0.15);
  border-radius: calc(4px * var(--pixel-ratio));
  margin-top: calc(4px * var(--pixel-ratio));
}

.refresh {
  margin-top: calc(28px * var(--pixel-ratio));
  text-align: center;
}

.refresh svg {
  height: calc(30px * var(--pixel-ratio));
}

.refresh path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 80;
  stroke-linecap: round;
  stroke-dasharray: 2150 345;
  stroke-dashoffset: -300;
  animation: path 3s infinite;
}

@keyframes path {
  0% {
    stroke-dashoffset: -300;
  }

  100% {
    stroke-dashoffset: 2195;
  }
}

.refresh p {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(10px * var(--pixel-ratio));
}

hr {
  border: 0;
  height: calc(3px * var(--pixel-ratio));
  background: #dfdfdf;
  margin: -14vh calc(20px * var(--pixel-ratio)) 0 calc(20px * var(--pixel-ratio));
  opacity: 0;
}

.header .temp {
  opacity: 0;
  text-align: right;
  margin: calc(-35px * var(--pixel-ratio)) calc(22px * var(--pixel-ratio)) 0 0;
}

.header .white {
  width: 100%;
  height: 9.5vh;
  position: absolute;
  top: 0;
  background-color: #fff;
  opacity: 0;
  z-index: -1;
}

.container> :not(.background) {
  margin: 0 calc(20px * var(--pixel-ratio));
}

.background {
  z-index: -1;
  height: calc(560px * var(--pixel-ratio));
  background: url("../assets/bg_first_cloudy.png") no-repeat;
  background-size: 100% 100%;
}

.container .temp-now {
  position: relative;
  margin-top: calc(-120px * var(--pixel-ratio));
  margin-bottom: calc(-80px * var(--pixel-ratio));
  font-size: calc(88px * var(--pixel-ratio));
  font-family: "XType";
}

.container .temp-now img {
  position: absolute;
  height: calc(68px * var(--pixel-ratio));
  margin-top: calc(26px * var(--pixel-ratio));
}

.container .right {
  position: relative;
  text-align: right;
  margin-top: calc(-96px * var(--pixel-ratio));
}

.container .right .weather {
  font-size: calc(34px * var(--pixel-ratio));
}

.container .right .airq {
  color: #8c8c8c;
  font-size: calc(14px * var(--pixel-ratio));
  margin-top: calc(6px * var(--pixel-ratio));
}

.container .a1 {
  position: relative;
  font-size: calc(14px * var(--pixel-ratio));
  margin-top: calc(44px * var(--pixel-ratio));
  -webkit-text-stroke: .1px #000;
}

.container .a1 .day {
  margin-left: calc(14px * var(--pixel-ratio));
}

.container .a1 .temp {
  position: absolute;
  right: 0;
  top: calc(4px * var(--pixel-ratio));
}

.container .a2 {
  margin: calc(10px * var(--pixel-ratio)) 0 calc(20px * var(--pixel-ratio)) 0;
  height: calc(115px * var(--pixel-ratio));
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.container .a2 ul {
  display: inline-block;
}

.container .a2 li {
  margin-right: calc(36px * var(--pixel-ratio));
  display: inline-block;
}

.container .a2 li:first-child {
  margin-left: calc(20px * var(--pixel-ratio));
}

.container .a2 li:last-child {
  margin-right: calc(20px * var(--pixel-ratio));
}

.container .a2 p {
  color: #8c8c8c;
  font-size: calc(12px * var(--pixel-ratio));
  text-align: center;
  line-height: calc(26px * var(--pixel-ratio));
}

.container .a2 img {
  width: calc(32px * var(--pixel-ratio));
}

.c2 {
  text-align: center;
  font-size: calc(14px * var(--pixel-ratio));
}

.c2 img {
  height: calc(10px * var(--pixel-ratio));
  margin-left: calc(4px * var(--pixel-ratio));
}

.d1,
.d2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: calc(46px * var(--pixel-ratio)) calc(14px * var(--pixel-ratio)) 0 calc(14px * var(--pixel-ratio));
}

.d2 {
  padding-top: calc(20px * var(--pixel-ratio));
}

.d1 div,
.d2 div {
  text-align: center;
  width: calc(50px * var(--pixel-ratio));
}

.d1 div:nth-child(3n-1),
.d2 div:nth-child(3n-1) {
  padding: 0 calc(70px * var(--pixel-ratio));
}

.d1 div:nth-child(-n+3),
.d2 div:nth-child(-n+6) {
  margin-bottom: calc(44px * var(--pixel-ratio));
}

.d2 div:last-child {
  margin-right: calc(52px * var(--pixel-ratio));
}

.d1 img,
.d2 img {
  width: calc(30px * var(--pixel-ratio));
}

.d1 div :nth-child(2),
.d2 div :nth-child(2) {
  margin-top: calc(6px * var(--pixel-ratio));
  color: #4d4d4d;
  font-size: calc(13px * var(--pixel-ratio));
  line-height: calc(13px * var(--pixel-ratio));
}

.d1 div p:last-child,
.d2 div p:last-child {
  color: #8c8c8c;
  font-size: calc(11px * var(--pixel-ratio));
}

h1 {
  text-align: center;
  padding-top: calc(42px * var(--pixel-ratio));
  font-size: calc(14px * var(--pixel-ratio));
  font-weight: normal;
  -webkit-text-stroke: .1px #000;
}

.e1 {
  text-align: center;
}

.e1 img {
  margin: calc(10px * var(--pixel-ratio)) 0;
  width: calc(70px * var(--pixel-ratio));
}