You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2089 lines
84 KiB
2089 lines
84 KiB
<!-- baisong -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>{{.Title}}
|
|
</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="referrer" content="unsafe-url">
|
|
<meta name="keywords" content="{{.Keywords}}">
|
|
<meta name="description" content="{{.Description}}">
|
|
<link rel="shortcut icon" type="image/png" href="{{replaceImage .Favicon}}" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<style data-emotion="css-global 1a6bwvo">
|
|
html {
|
|
line-height: 1.15;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
display: block;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
margin: 0.67em 0;
|
|
}
|
|
|
|
hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
pre {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
a {
|
|
background-color: transparent;
|
|
}
|
|
|
|
abbr[title] {
|
|
border-bottom: none;
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
-webkit-text-decoration: underline dotted;
|
|
text-decoration: underline dotted;
|
|
}
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
img {
|
|
border-style: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
line-height: 1.15;
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
overflow: visible;
|
|
}
|
|
|
|
button,
|
|
select {
|
|
text-transform: none;
|
|
}
|
|
|
|
button,
|
|
[type='button'],
|
|
[type='reset'],
|
|
[type='submit'] {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
button::-moz-focus-inner,
|
|
[type='button']::-moz-focus-inner,
|
|
[type='reset']::-moz-focus-inner,
|
|
[type='submit']::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
button:-moz-focusring,
|
|
[type='button']:-moz-focusring,
|
|
[type='reset']:-moz-focusring,
|
|
[type='submit']:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
fieldset {
|
|
padding: 0.35em 0.75em 0.625em;
|
|
}
|
|
|
|
legend {
|
|
box-sizing: border-box;
|
|
color: inherit;
|
|
display: table;
|
|
max-width: 100%;
|
|
padding: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
}
|
|
|
|
[type='checkbox'],
|
|
[type='radio'] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
|
|
[type='number']::-webkit-inner-spin-button,
|
|
[type='number']::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
[type='search'] {
|
|
-webkit-appearance: textfield;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
[type='search']::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button;
|
|
font: inherit;
|
|
}
|
|
|
|
details {
|
|
display: block;
|
|
}
|
|
|
|
summary {
|
|
display: -webkit-box;
|
|
display: -webkit-list-item;
|
|
display: -ms-list-itembox;
|
|
display: list-item;
|
|
}
|
|
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: sans-serif;
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
-webkit-animation-duration: 0.01ms !important;
|
|
animation-duration: 0.01ms !important;
|
|
-webkit-animation-iteration-count: 1 !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
html.no-scroll,
|
|
body.no-scroll {
|
|
overflow: hidden;
|
|
}
|
|
|
|
html.touch.no-scroll #__next,
|
|
html.touch body.no-scroll #__next {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: -webkit-fill-available;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
a:focus-visible {
|
|
outline: 0.125rem dotted;
|
|
outline-offset: 0.313rem;
|
|
}
|
|
|
|
button {
|
|
color: inherit;
|
|
}
|
|
|
|
img:-moz-loading {
|
|
color: transparent;
|
|
}
|
|
|
|
.__resp-container {
|
|
position: relative;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.__resp-container:before {
|
|
content: '""';
|
|
color: transparent;
|
|
display: block;
|
|
width: 100%;
|
|
height: 0;
|
|
padding-bottom: var(--aspect-ratio, 100%);
|
|
}
|
|
|
|
.__resp-container img:not(.video-items-box img):not(.filmstrip-image-wrapper img),
|
|
.__resp-container video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
height: var(--height, auto);
|
|
max-height: 100%;
|
|
object-fit: var(--object-fit, cover);
|
|
}
|
|
|
|
.__resp-container .video-player video {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.__resp-container .video-player {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.__resp-container.lqip img[importance=auto] {
|
|
-webkit-transition: opacity 0.3s linear;
|
|
transition: opacity 0.3s linear;
|
|
opacity: 0;
|
|
}
|
|
|
|
.__resp-container.lqip img[importance=auto].lazyloaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
.screen-reader-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
.lqip {
|
|
-webkit-background-size: cover;
|
|
background-size: cover;
|
|
-webkit-background-position: center;
|
|
background-position: center;
|
|
}
|
|
|
|
@media print {
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'CaseStudy';
|
|
src: local('CaseStudy'), url('../_assets/design-tokens/runnersworld/static/fonts/641dec90-d119-4113-8dc4-31e712d91752.ebfe2e6.woff2') format('woff2');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
</style>
|
|
<div id="__next">
|
|
<section data-interactive="SidePanel-1" class="css-0 e11rvpfh0">
|
|
<style data-emotion="css jqcgoi">
|
|
.css-jqcgoi {
|
|
visibility: hidden;
|
|
content-visibility: hidden;
|
|
background-color: #59E7ED;
|
|
color: #000;
|
|
width: 20rem;
|
|
max-width: 20rem;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
position: fixed;
|
|
top: 0rem;
|
|
z-index: 5999998;
|
|
-webkit-transition: -webkit-transform 0.2s linear;
|
|
transition: transform 0.2s linear;
|
|
-webkit-transform: translateX(-20rem);
|
|
-moz-transform: translateX(-20rem);
|
|
-ms-transform: translateX(-20rem);
|
|
transform: translateX(-20rem);
|
|
}
|
|
|
|
.css-jqcgoi>div {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
min-height: 100%;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.css-jqcgoi~.sidepanelToggleable {
|
|
-webkit-transform: initial;
|
|
-moz-transform: initial;
|
|
-ms-transform: initial;
|
|
transform: initial;
|
|
-webkit-transition: -webkit-transform 0.2s linear;
|
|
transition: transform 0.2s linear;
|
|
}
|
|
|
|
.css-jqcgoi#sidepanel:target {
|
|
-webkit-transform: translateX(0);
|
|
-moz-transform: translateX(0);
|
|
-ms-transform: translateX(0);
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
content-visibility: auto;
|
|
}
|
|
|
|
.css-jqcgoi#sidepanel:target~.sidepanelToggleable {
|
|
-webkit-transform: translateX(20rem);
|
|
-moz-transform: translateX(20rem);
|
|
-ms-transform: translateX(20rem);
|
|
transform: translateX(20rem);
|
|
}
|
|
|
|
@media(min-width: 90rem) {
|
|
.css-jqcgoi#sidepanel:target~.sidepanelToggleable {
|
|
-webkit-transform: translateX(7rem);
|
|
-moz-transform: translateX(7rem);
|
|
-ms-transform: translateX(7rem);
|
|
transform: translateX(7rem);
|
|
}
|
|
}
|
|
</style>
|
|
</section>
|
|
<div data-focus-lock-disabled="disabled" data-focus-lock="main" class="sidepanelToggleable">
|
|
<style data-emotion="css 1ec7baw">
|
|
.css-1ec7baw {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
z-index: 9999999;
|
|
text-align: center;
|
|
opacity: 0;
|
|
-webkit-transform: translateY(calc(-100% - 2.5rem));
|
|
-moz-transform: translateY(calc(-100% - 2.5rem));
|
|
-ms-transform: translateY(calc(-100% - 2.5rem));
|
|
transform: translateY(calc(-100% - 2.5rem));
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
border: medium solid white;
|
|
box-shadow: 0 0 0 3px #55adff;
|
|
background-color: #000000;
|
|
color: #fff;
|
|
border-radius: 1.875rem;
|
|
font-family: Inter, Helvetica, Arial, Sans-serif;
|
|
font-size: 0.8928rem;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
padding: 0.625rem 1.25rem;
|
|
width: auto;
|
|
}
|
|
|
|
.css-1ec7baw:focus {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0%);
|
|
-moz-transform: translateY(0%);
|
|
-ms-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
|
|
.css-1ec7baw:focus-visible {
|
|
outline: none;
|
|
}
|
|
</style>
|
|
<style data-emotion="css 9l6ije">
|
|
.css-9l6ije {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
left: 1rem;
|
|
top: 1rem;
|
|
z-index: 9999999;
|
|
text-align: center;
|
|
opacity: 0;
|
|
-webkit-transform: translateY(calc(-100% - 2.5rem));
|
|
-moz-transform: translateY(calc(-100% - 2.5rem));
|
|
-ms-transform: translateY(calc(-100% - 2.5rem));
|
|
transform: translateY(calc(-100% - 2.5rem));
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
border: medium solid white;
|
|
box-shadow: 0 0 0 3px #55adff;
|
|
background-color: #000000;
|
|
color: #fff;
|
|
border-radius: 1.875rem;
|
|
font-family: Inter, Helvetica, Arial, Sans-serif;
|
|
font-size: 0.8928rem;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
padding: 0.625rem 1.25rem;
|
|
width: auto;
|
|
}
|
|
|
|
.css-9l6ije:focus {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(0%);
|
|
-moz-transform: translateY(0%);
|
|
-ms-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
|
|
.css-9l6ije:focus-visible {
|
|
outline: none;
|
|
}
|
|
</style><a href="index.html#main-content" class="e1i650950 css-9l6ije epl65fo4">Skip to Content</a>
|
|
<style data-emotion="css 1qb0y8q">
|
|
.css-1qb0y8q {
|
|
background-color: #000000;
|
|
color: #fff;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 5999997;
|
|
}
|
|
|
|
@media print {
|
|
.css-1qb0y8q {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-1qb0y8q {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: var(--nav-offset, 0);
|
|
}
|
|
}
|
|
</style>
|
|
<nav data-tracking-id="topNav" class="css-1qb0y8q efnztv77">
|
|
<style data-emotion="css 1pioqs8">
|
|
.css-1pioqs8 {
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-flex-wrap: wrap;
|
|
-webkit-flex-wrap: wrap;
|
|
-ms-flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
max-width: 75rem;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-1pioqs8 {
|
|
-webkit-box-flex-wrap: nowrap;
|
|
-webkit-flex-wrap: nowrap;
|
|
-ms-flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="nav-bar-container css-1pioqs8 efnztv76">
|
|
<style data-emotion="css 2gskqg">
|
|
.css-2gskqg {
|
|
line-height: 0.7;
|
|
margin-left: 0.9375rem;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media(max-width: 64rem) {
|
|
.css-2gskqg {
|
|
padding: 0.5rem 0.25rem 0.5rem 0.625rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 20rem) {
|
|
.css-2gskqg {
|
|
padding: 0.5rem 0.25rem 0.5rem 0;
|
|
}
|
|
|
|
.css-2gskqg svg {
|
|
fill: #ffffff;
|
|
-webkit-transition: fill 0.3s ease-in-out;
|
|
transition: fill 0.3s ease-in-out;
|
|
}
|
|
|
|
.css-2gskqg svg:hover {
|
|
fill: #595959;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 40.625rem) and (max-width: 90rem) {
|
|
.css-2gskqg {
|
|
margin-left: 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-2gskqg {
|
|
padding: 0.5rem 0.625rem 0.5rem 0.625rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 90rem) {
|
|
.css-2gskqg {
|
|
margin-left: 0rem;
|
|
}
|
|
}
|
|
|
|
.css-2gskqg svg {
|
|
fill: #ffffff;
|
|
height: 1.875rem;
|
|
width: 1.875rem;
|
|
}
|
|
</style>
|
|
<style data-emotion="css 1oysjit">
|
|
.css-1oysjit {
|
|
height: 1.25rem;
|
|
line-height: 1.4;
|
|
margin-bottom: 0.3125rem;
|
|
margin-right: auto;
|
|
width: 9rem;
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-1oysjit {
|
|
margin-right: 0.3125rem;
|
|
}
|
|
}
|
|
|
|
.css-1oysjit svg {
|
|
fill: #ffffff;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<a href="{{.IndexUrl}}" aria-label="Runner's World" suppressHydrationWarning
|
|
class="nav-logo css-1oysjit epl65fo4">
|
|
<img src="{{replaceImage .Logo}}" alt="logo"
|
|
style="height: 50px;position: relative; top: -10px;" />
|
|
</a>
|
|
<style data-emotion="css g49b2g">
|
|
.css-g49b2g {
|
|
border-bottom: thin solid #F5F5F5;
|
|
border-top: thin solid #F5F5F5;
|
|
-webkit-order: 1;
|
|
-ms-flex-order: 1;
|
|
order: 1;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
@media(min-width: 20rem) {
|
|
.css-g49b2g {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-g49b2g {
|
|
background-color: inherit;
|
|
border-bottom: 0;
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-g49b2g {
|
|
-webkit-order: 0;
|
|
-ms-flex-order: 0;
|
|
order: 0;
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.css-g49b2g::-webkit-scrollbar {
|
|
height: 0rem;
|
|
}
|
|
</style>
|
|
<div style="scrollbar-width: none;" class="css-g49b2g efnztv73">
|
|
<style data-emotion="css xs3857">
|
|
.css-xs3857 {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0rem;
|
|
padding-left: 1.125rem;
|
|
-webkit-transform: translateX(undefinedpx);
|
|
-moz-transform: translateX(undefinedpx);
|
|
-ms-transform: translateX(undefinedpx);
|
|
transform: translateX(undefinedpx);
|
|
width: 100%;
|
|
}
|
|
|
|
@media(min-width: 40.625rem) and (max-width: 61.25rem) {
|
|
.css-xs3857 {
|
|
padding-left: 2.625rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-xs3857 {
|
|
padding-left: 3.125rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-xs3857 {
|
|
padding-left: 0rem;
|
|
}
|
|
}
|
|
</style>
|
|
<ul class="css-xs3857 efnztv72">
|
|
<style data-emotion="css d03ygd">
|
|
.css-d03ygd {
|
|
font-family: Sailec, Helvetica, Arial, sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
line-height: 2rem;
|
|
padding: 0 1.875rem 0 1.25rem;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-d03ygd {
|
|
padding: 0 1.25rem 0 1.25rem;
|
|
}
|
|
}
|
|
</style>
|
|
<li class="css-d03ygd efnztv71">
|
|
<style data-emotion="css c8i4ma">
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-c8i4ma:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style>
|
|
<style data-emotion="css 7qn7yr">
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-7qn7yr:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style><a target="_blank" rel="noopener" href="{{.IndexUrl}}" aria-current="false"
|
|
class="epl65fo1 css-7qn7yr epl65fo4">HOME</a>
|
|
</li>
|
|
|
|
|
|
|
|
{{if .HasAbout }}
|
|
|
|
|
|
|
|
<li class="css-d03ygd efnztv71">
|
|
<style data-emotion="css c8i4ma">
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-c8i4ma:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style>
|
|
<style data-emotion="css 7qn7yr">
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-7qn7yr:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style><a target="_blank" rel="noopener" href="{{.AboutUrl}}" aria-current="false"
|
|
class="epl65fo1 css-7qn7yr epl65fo4">ABOUT</a>
|
|
</li>
|
|
{{end}}
|
|
|
|
|
|
|
|
{{if .HasContact }}
|
|
|
|
<li class="css-d03ygd efnztv71">
|
|
<style data-emotion="css c8i4ma">
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-c8i4ma:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style>
|
|
<style data-emotion="css 7qn7yr">
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-7qn7yr:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style><a target="_blank" rel="noopener" href="{{.ContactUrl}}" aria-current="false"
|
|
class="epl65fo1 css-7qn7yr epl65fo4">CONTACT</a>
|
|
</li>
|
|
{{end}}
|
|
|
|
{{if .HasPolicy }}
|
|
|
|
<li class="css-d03ygd efnztv71">
|
|
<style data-emotion="css c8i4ma">
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-c8i4ma {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-c8i4ma:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style>
|
|
<style data-emotion="css 7qn7yr">
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
display: inline-block;
|
|
line-height: 2.58918;
|
|
min-height: 3rem;
|
|
min-width: 3rem;
|
|
padding: .5rem 0 .5rem 0;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
transition: outline 0.3s ease-in-out, outline-offset 0.3s ease-in-out;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-7qn7yr {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.css-7qn7yr:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 0.0625rem;
|
|
text-underline-offset: 0.25rem;
|
|
}
|
|
</style><a target="_blank" rel="noopener" href="{{.PolicyUrl}}" aria-current="false"
|
|
class="epl65fo1 css-7qn7yr epl65fo4">POLICY</a>
|
|
</li>
|
|
{{end}}
|
|
|
|
</ul>
|
|
</div>
|
|
<style data-emotion="css glpqcs">
|
|
.css-glpqcs {
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
height: 1.875rem;
|
|
width: 6.25rem;
|
|
margin: 0 0 0 auto;
|
|
padding-left: 1.05rem;
|
|
padding-right: 1.05rem;
|
|
text-align: center;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
background-color: #59E7ED;
|
|
color: #000000;
|
|
font-family: Sailec, Helvetica, Arial, sans-serif;
|
|
font-size: 0.75rem;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.fonts-loaded .css-glpqcs {
|
|
width: unset;
|
|
word-spacing: unset;
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
.css-glpqcs {
|
|
-webkit-transition: box-shadow 0.2s linear, background 0.2s linear;
|
|
transition: box-shadow 0.2s linear, background 0.2s linear;
|
|
}
|
|
|
|
.css-glpqcs:hover {
|
|
box-shadow: nav-subscribe-link.hover;
|
|
background-color: nav-subscribe-link.hover-bg;
|
|
}
|
|
}
|
|
|
|
.css-glpqcs:focus-visible {
|
|
outline-color: #ffffff;
|
|
}
|
|
|
|
.css-glpqcs:hover {
|
|
background-color: #17D0D8;
|
|
color: #000;
|
|
}
|
|
</style>
|
|
|
|
<style data-emotion="css 1y41cbl">
|
|
.css-1y41cbl {
|
|
padding-right: 0.9375rem;
|
|
position: relative;
|
|
}
|
|
|
|
@media(min-width: 40.625rem) and (max-width: 90rem) {
|
|
.css-1y41cbl {
|
|
padding-right: 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 90rem) {
|
|
.css-1y41cbl {
|
|
padding-right: 0rem;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="css-1y41cbl e7dmux20">
|
|
<style data-emotion="css 1hmozpy">
|
|
.css-1hmozpy {
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
font-family: Sailec, Helvetica, Arial, sans-serif;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
line-height: 2rem;
|
|
margin-left: 0.3125rem;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-1hmozpy {
|
|
margin-left: 0.9375rem;
|
|
}
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="oop-ad css-0 e1rux3pu1">
|
|
<div id="gpt-ad-oop-1" class="ad-container css-0 e1rux3pu0"></div>
|
|
</div>
|
|
<style data-emotion="css 17vkd49">
|
|
.css-17vkd49 {
|
|
background-color: bg-primary;
|
|
position: relative;
|
|
}
|
|
|
|
@media(max-width: 61.25rem) {
|
|
.css-17vkd49 .ewwgwfo0 {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-17vkd49 {
|
|
margin-right: var(--sponsor-panel-width, auto);
|
|
}
|
|
}
|
|
</style>
|
|
<main id="main-content" class="css-17vkd49 e1q9j2sb0">
|
|
<style data-emotion="css 1hxhvk3">
|
|
.css-1hxhvk3 {
|
|
margin: 0.9375rem;
|
|
padding: 0 0.938rem;
|
|
text-align: center;
|
|
}
|
|
|
|
@media(min-width: 40.625rem) {
|
|
.css-1hxhvk3 {
|
|
padding: 0 2.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style data-emotion="css pf0ake">
|
|
.css-pf0ake {
|
|
background-color: #E8E8E8;
|
|
color: #000;
|
|
display: none;
|
|
min-width: 45.5rem;
|
|
padding: 0.9375rem 0 1.25rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-pf0ake {
|
|
min-height: 121px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-pf0ake {
|
|
display: block;
|
|
}
|
|
}
|
|
</style>
|
|
<style data-emotion="css 17joiac">
|
|
.css-17joiac {
|
|
padding: 0 0.938rem 1.25rem 0.938rem;
|
|
}
|
|
|
|
@media(min-width: 20rem) and (max-width: 61.25rem) {
|
|
.css-17joiac {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-17joiac {
|
|
padding: 0 2.5rem 1.875rem 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-17joiac {
|
|
display: grid;
|
|
grid-column-gap: 1.25rem;
|
|
grid-row-gap: 1.25rem;
|
|
grid-template-areas: "header" "content";
|
|
grid-template-columns: minmax(auto, 75rem);
|
|
grid-template-rows: repeat(2, auto);
|
|
}
|
|
|
|
@media(min-width: 73.75rem) {
|
|
.css-17joiac {
|
|
grid-column-gap: 0rem;
|
|
grid-template-areas: "lgut header rgut" "lgut content rgut";
|
|
grid-template-columns: 1fr minmax(auto, 75rem) 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-17joiac {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style data-emotion="css vjteey">
|
|
.css-vjteey {
|
|
background-color: #ffffff;
|
|
color: #000000;
|
|
margin-bottom: 0;
|
|
padding: 0 0.938rem 1.25rem 0.938rem;
|
|
}
|
|
|
|
@media(max-width: 40.625rem) {
|
|
.css-vjteey {
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 20rem) and (max-width: 61.25rem) {
|
|
.css-vjteey {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 40.625rem) {
|
|
.css-vjteey {
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-vjteey {
|
|
padding: 0 2.5rem 1.875rem 2.5rem;
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-vjteey {
|
|
display: grid;
|
|
grid-column-gap: 1.25rem;
|
|
grid-row-gap: 1.25rem;
|
|
grid-template-areas: "header header header" "content content ad";
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: repeat(2, auto);
|
|
}
|
|
|
|
@media(min-width: 73.75rem) {
|
|
.css-vjteey {
|
|
grid-column-gap: 0rem;
|
|
grid-template-areas: "lgut header header header rgut" "lgut content content ad rgut";
|
|
grid-template-columns: 1fr repeat(3, minmax(auto, 25rem)) 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-vjteey {
|
|
margin: 0 auto;
|
|
padding-bottom: 1.875rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div id="breadcrumb" style="width: 60%;margin-left:20%;">
|
|
<a href="{{.IndexUrl}}">Home</a> /
|
|
<a href="#">{{.Title}}</a>
|
|
</div>
|
|
|
|
<section data-vars-block-curation="collection" data-vars-block-type="4 Across Block"
|
|
data-vars-block-slot="2" data-vars-block-id="60d18648-84cd-4194-8398-a49bee58f19d"
|
|
data-vars-block-heading="COVID-19" id="91a34af4-e52b-47ad-ad3b-7194426d67e8"
|
|
data-interactive="FourAcross-1" class=" css-vjteey e1tz1z2e0">
|
|
|
|
|
|
<div class="d-lg-flex">
|
|
<div id="article-container" class="col-lg-8 col-md-12">
|
|
<!-- article content start -->
|
|
<!-- span class="link"
|
|
section="shortcodeLink"><a
|
|
href="/tech/mobile/the-next-iphone-moment-will-arrive-eventually-hurry-up-already/">the
|
|
iPhone</a></span> -->
|
|
<article id="article" style="width: 300%; margin-left: 100%;">
|
|
|
|
<div id="article-head">
|
|
<h1 id="title">{{.Title}}</h1>
|
|
<div>
|
|
<span>{{timeFormat .PublishTime}}</span>
|
|
<span> / </span>
|
|
<span>{{.Views}} views</span>
|
|
</div>
|
|
</div>
|
|
|
|
<img width="100%" src="{{getCover .Article.Pictures}}" />
|
|
<p class="speakableTextP1">{{.Article.Summary}}</p>
|
|
{{range .Article.Topics}}
|
|
<p><strong>{{.Topic}}</strong></p>
|
|
{{$tlen := len .Pictures}}
|
|
{{if ne $tlen 0}}
|
|
{{range .Pictures}}
|
|
<img width="100%" src="{{replaceImage .}}" />
|
|
{{end}}
|
|
{{end}}
|
|
<p>{{.Content}}</p>
|
|
{{end}}
|
|
</article>
|
|
<!-- article content end -->
|
|
<div class="article-page" style="margin-left: 100%;width: 300%;">
|
|
{{ if .Prev }}
|
|
<div class="hidden-text">
|
|
<a href="{{.Prev.Url}}">Prev:{{.Prev.Title}}</a>
|
|
</div>
|
|
{{ end }}
|
|
{{ if .Next }}
|
|
<div class="hidden-text">
|
|
<a href="{{.Next.Url}}">Next:{{.Next.Title}}</a>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style data-emotion="css 1jg59bw">
|
|
.css-1jg59bw {
|
|
padding: 0 0.938rem 1.25rem 0.938rem;
|
|
}
|
|
|
|
@media(max-width: 61.25rem) {
|
|
.css-1jg59bw {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-1jg59bw {
|
|
padding: 0 2.5rem 1.875rem 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-1jg59bw {
|
|
display: grid;
|
|
grid-gap: 1.25rem;
|
|
grid-column-gap: 1.25rem;
|
|
grid-row-gap: 1.25rem;
|
|
grid-template-areas: "header" "content";
|
|
grid-template-columns: minmax(auto, 75rem);
|
|
grid-template-rows: repeat(2, auto);
|
|
}
|
|
|
|
@media(min-width: 73.75rem) {
|
|
.css-1jg59bw {
|
|
grid-column-gap: 0rem;
|
|
grid-template-areas: "lgut header rgut" "lgut content rgut";
|
|
grid-template-columns: 1fr minmax(auto, 75rem) 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-1jg59bw {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
<section data-vars-block-curation="curated" data-vars-block-type="3 Column Block"
|
|
data-vars-block-slot="3" data-vars-block-id="b006b241-95f7-45ba-b133-4dda5c7a5747"
|
|
data-vars-block-heading id="3f9a1862-c9f1-4929-aaf7-ffe4409c82ab" data-interactive="ThreeColumn-1"
|
|
class=" css-1jg59bw e1q4d2a52">
|
|
<style data-emotion="css 3a8cdk">
|
|
.css-3a8cdk {
|
|
grid-area: content;
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-3a8cdk {
|
|
display: grid;
|
|
grid-column-gap: 1.25rem;
|
|
grid-auto-columns: 1fr;
|
|
grid-auto-flow: column;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="css-3a8cdk e1q4d2a51">
|
|
<style data-emotion="css kxh4zi">
|
|
.css-kxh4zi {
|
|
position: relative;
|
|
border-top: 0.625rem solid #59E7ED;
|
|
margin-bottom: 1.875rem;
|
|
}
|
|
</style>
|
|
<div class="css-kxh4zi e1q4d2a50">
|
|
<style data-emotion="css 1ovupi0">
|
|
.css-1ovupi0 {
|
|
position: relative;
|
|
grid-area: header;
|
|
margin: 0rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<div class=" css-1ovupi0 ewdt5k42">
|
|
<style data-emotion="css 12gwn9v">
|
|
.css-12gwn9v {
|
|
background-color: none;
|
|
display: inline-block;
|
|
font-family: CaseStudy, Helvetica, Arial, sans-serif;
|
|
font-weight: bold;
|
|
letter-spacing: 0.2rem;
|
|
margin: 0rem;
|
|
padding: 0 0.625rem;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media(max-width: 48rem) {
|
|
.css-12gwn9v {
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 40.625rem) {
|
|
.css-12gwn9v {
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-12gwn9v {
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-12gwn9v {
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.css-12gwn9v:before,
|
|
.css-12gwn9v:after {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.css-12gwn9v a {
|
|
color: #000000;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
|
|
.css-12gwn9v a:hover {
|
|
color: #757575;
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
.css-12gwn9v a {
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
|
|
.css-12gwn9v a:hover {
|
|
color: #6F6F6F;
|
|
}
|
|
}
|
|
|
|
.css-12gwn9v a,
|
|
.css-12gwn9v span {
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<h2 class="css-12gwn9v ewdt5k41">
|
|
<style data-emotion="css 1140rqp">
|
|
.css-1140rqp {
|
|
background-color: #59E7ED;
|
|
color: #000;
|
|
content: '';
|
|
display: block;
|
|
height: 0.75rem;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: -1.4rem;
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
width: 0.75rem;
|
|
z-index: 999;
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-1140rqp {
|
|
top: -1rem;
|
|
}
|
|
}
|
|
|
|
.css-1140rqp:before,
|
|
.css-1140rqp:after {
|
|
visibility: hidden;
|
|
}
|
|
</style><span aria-hidden="true" class="css-1140rqp eh2fd3i0"></span>
|
|
|
|
|
|
{{$plen := len .PopularArticles}}
|
|
{{if ne $plen 0}}
|
|
<div class="block-title">
|
|
<div class="text">POPULAR ARTICLES</div>
|
|
</div>
|
|
<div id="article-popular">
|
|
<!-- popular article list start -->
|
|
{{range .PopularArticles}}
|
|
<div class="article d-flex">
|
|
<a href="{{.Url}}" target="_blank">
|
|
<img class="image" src="{{getCover .Cover 125 75}}" alt="Cover Image" />
|
|
</a>
|
|
<div class="content">
|
|
<a class="title" href="{{.Url}}" target="_blank"
|
|
style="font-size: middle !important;">{{.Title}}</a>
|
|
<div class="info">
|
|
<span>{{timeFormat .PublishTime}}</span>
|
|
/
|
|
<span>{{.Views}} views</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
<!-- popular article list end -->
|
|
</div>
|
|
{{end}}
|
|
|
|
|
|
|
|
|
|
{{$plen := len .RecommendArticles}}
|
|
{{if ne $plen 0}}
|
|
<div class="block-title" style="margin-top: 60px;">
|
|
<div class="text">RECOMMEND ARTICLES</div>
|
|
</div>
|
|
<div id="article-popular">
|
|
<!-- popular article list start -->
|
|
{{range .RecommendArticles}}
|
|
<div class="article d-flex">
|
|
<a href="{{.Url}}" target="_blank">
|
|
<img class="image" src="{{getCover .Cover 125 75}}" alt="Cover Image" />
|
|
</a>
|
|
<div class="content">
|
|
<a class="title" href="{{.Url}}" target="_blank"
|
|
style="font-size: middle !important;">{{.Title}}</a>
|
|
<div class="info">
|
|
<span>{{timeFormat .PublishTime}}</span>
|
|
/
|
|
<span>{{.Views}} views</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
<!-- popular article list end -->
|
|
</div>
|
|
{{end}}
|
|
|
|
<style data-emotion="css 1aq4sl">
|
|
.css-1aq4sl:before,
|
|
.css-1aq4sl:after {
|
|
visibility: hidden;
|
|
}
|
|
</style><span aria-hidden="true" class="css-1aq4sl eh2fd3i1"></span>
|
|
</h2>
|
|
</div>
|
|
<style data-emotion="css 16o0u6j">
|
|
.css-16o0u6j {
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
display: grid;
|
|
grid-template-columns: 50% 1fr;
|
|
grid-gap: 0.9375rem;
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.css-16o0u6j h2 span {
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
|
|
.css-16o0u6j h2 span:hover {
|
|
color: #5B5B5B;
|
|
}
|
|
</style>
|
|
<style data-emotion="css ihot0k">
|
|
.css-ihot0k {
|
|
display: grid;
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
display: grid;
|
|
grid-template-columns: 50% 1fr;
|
|
grid-gap: 0.9375rem;
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.css-ihot0k h2 span {
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
|
|
.css-ihot0k h2 span:hover {
|
|
color: #5B5B5B;
|
|
}
|
|
</style>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<style data-emotion="css 1sns0zy">
|
|
.css-1sns0zy {
|
|
clear: both;
|
|
color: #000000;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-flex-direction: column;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
justify-content: space-between;
|
|
margin: 1.25rem 0;
|
|
margin-bottom: 1.25rem;
|
|
margin-top: 1.25rem;
|
|
min-height: 523px;
|
|
text-align: center;
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-1sns0zy {
|
|
min-height: 138px;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-1sns0zy {
|
|
margin: 1.25rem auto;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-1sns0zy {
|
|
max-width: 75rem;
|
|
}
|
|
}
|
|
|
|
.css-1sns0zy:after {
|
|
border-bottom: thin solid #E8E8E8;
|
|
content: "";
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
margin: 0.9375rem 0.938rem 0;
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-1sns0zy:after {
|
|
margin: 0.9375rem 2.5rem 0;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 75rem) {
|
|
.css-1sns0zy:after {
|
|
margin: 0.9375rem 0 0;
|
|
}
|
|
}
|
|
|
|
.css-1sns0zy.clearfix {
|
|
clear: both;
|
|
}
|
|
</style>
|
|
|
|
<style data-emotion="css 1bomcxf">
|
|
.css-1bomcxf {
|
|
padding: 0 0.938rem 1.25rem 0.938rem;
|
|
}
|
|
|
|
@media(min-width: 20rem) and (max-width: 61.25rem) {
|
|
.css-1bomcxf {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-1bomcxf {
|
|
padding: 0 2.5rem 1.875rem 2.5rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-1bomcxf {
|
|
display: grid;
|
|
grid-column-gap: 1.25rem;
|
|
grid-row-gap: 1.25rem;
|
|
grid-template-areas: "header header header" "content content ad";
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: repeat(2, auto);
|
|
}
|
|
|
|
@media(min-width: 73.75rem) {
|
|
.css-1bomcxf {
|
|
grid-column-gap: 0rem;
|
|
grid-template-areas: "lgut header header header rgut" "lgut content content ad rgut";
|
|
grid-template-columns: 1fr repeat(3, minmax(auto, 25rem)) 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-1bomcxf {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
<style data-emotion="css 8xxpz9">
|
|
.css-8xxpz9 {
|
|
background-color: #000000;
|
|
color: #fff;
|
|
margin-bottom: 0;
|
|
padding: 0 0.938rem 1.25rem 0.938rem;
|
|
}
|
|
|
|
@media(max-width: 40.625rem) {
|
|
.css-8xxpz9 {
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 20rem) and (max-width: 61.25rem) {
|
|
.css-8xxpz9 {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 40.625rem) {
|
|
.css-8xxpz9 {
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-8xxpz9 {
|
|
padding: 0 2.5rem 1.875rem 2.5rem;
|
|
padding-bottom: 1.25rem;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-8xxpz9 {
|
|
display: grid;
|
|
grid-column-gap: 1.25rem;
|
|
grid-row-gap: 1.25rem;
|
|
grid-template-areas: "header" "content";
|
|
grid-template-columns: minmax(auto, 75rem);
|
|
grid-template-rows: repeat(2, auto);
|
|
}
|
|
|
|
@media(min-width: 73.75rem) {
|
|
.css-8xxpz9 {
|
|
grid-column-gap: 0rem;
|
|
grid-template-areas: "lgut header rgut" "lgut content rgut";
|
|
grid-template-columns: 1fr minmax(auto, 75rem) 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-8xxpz9 {
|
|
margin: 0 auto;
|
|
padding-bottom: 1.875rem;
|
|
}
|
|
}
|
|
</style>
|
|
</main>
|
|
<style data-emotion="css 5vtz2">
|
|
.css-5vtz2 {
|
|
background-color: #000000;
|
|
color: #fff;
|
|
font-family: Sailec, Helvetica, Arial, sans-serif;
|
|
font-size: 0.8928rem;
|
|
font-weight: bold;
|
|
line-height: 2rem;
|
|
padding-bottom: 1.875rem;
|
|
padding-top: 1.875rem;
|
|
position: relative;
|
|
}
|
|
|
|
[data-has-sponsor] .css-5vtz2 {
|
|
margin-top: 25vh;
|
|
top: -25vh;
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
[data-has-sponsor] .css-5vtz2 {
|
|
margin-top: auto;
|
|
top: auto;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.css-5vtz2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(min-width: 64rem) {
|
|
.css-5vtz2 {
|
|
margin-right: var(--sponsor-panel-width, auto);
|
|
}
|
|
}
|
|
</style>
|
|
<footer data-interactive="Footer-1" class="footer css-5vtz2 emmc8xg0">
|
|
<style data-emotion="css 183kuhw">
|
|
.css-183kuhw {
|
|
margin: 0 auto;
|
|
max-width: 75rem;
|
|
padding: 0 0.938rem;
|
|
}
|
|
|
|
@media(min-width: 40.625rem) {
|
|
.css-183kuhw {
|
|
padding: 0 2.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="css-183kuhw e1xh2s9r8">
|
|
<style data-emotion="css iz4391">
|
|
.css-iz4391 {
|
|
display: grid;
|
|
grid-gap: 0.5rem;
|
|
grid-template-rows: 1fr 1fr;
|
|
line-height: 1;
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-iz4391 {
|
|
-webkit-align-items: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
grid-gap: 10%;
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
<style data-emotion="css 1e16p1">
|
|
.css-1e16p1 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
margin-bottom: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
@media(min-width: 48rem) {
|
|
.css-1e16p1 {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
</style>
|
|
<nav role="navigation" aria-label="Footer" class="footer-menu css-1e16p1 e1xh2s9r6">
|
|
<style data-emotion="css 1vc4yu1">
|
|
.css-1vc4yu1 {
|
|
padding: 0.6rem 0;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
.css-1vc4yu1 {
|
|
-webkit-transition: color 0.3s ease-in-out;
|
|
transition: color 0.3s ease-in-out;
|
|
}
|
|
|
|
.css-1vc4yu1:hover {
|
|
-webkit-text-decoration: underline;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="links">
|
|
<li class="title">Related Links</li>
|
|
{{if .HasAbout }}
|
|
<li class="nav-item">
|
|
<a href="{{.AboutUrl}}">ABOUT</a>
|
|
</li>
|
|
{{end}}
|
|
{{if .HasContact }}
|
|
<li class="nav-item">
|
|
<a href="{{.ContactUrl}}">CONTACT</a>
|
|
</li>
|
|
{{end}}
|
|
{{if .HasPolicy }}
|
|
<li class="nav-item">
|
|
<a href="{{.PolicyUrl}}">POLICY</a>
|
|
</li>
|
|
{{end}}
|
|
</div>
|
|
|
|
|
|
|
|
{{$flen := len .Friendship}}
|
|
{{if ne $flen 0}}
|
|
<div class="column flex-grow-1">
|
|
<div class="title">Friendship Links</div>
|
|
<div class="links">
|
|
<!-- friend links start -->
|
|
{{range .Friendship}}
|
|
<a href="{{.Url}}">{{.Name}}</a>
|
|
{{end}}
|
|
<!-- friend links end -->
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="column d-md-flex flex-column">
|
|
<img class="logo" src="{{replaceImage .Logo}}" alt="logo" style="height: 50px;" />
|
|
<div class="copyright">{{.Copyright}}</div>
|
|
</div>
|
|
</nav>
|
|
<style data-emotion="css 15si9rg">
|
|
.css-15si9rg {
|
|
max-width: 12rem;
|
|
padding-bottom: 0.3125rem;
|
|
}
|
|
</style>
|
|
<style data-emotion="css j307y1">
|
|
.css-j307y1 {
|
|
padding-top: 0.9375rem;
|
|
margin: 0.3125rem 0;
|
|
}
|
|
</style>
|
|
<style data-emotion="css wwhp4j">
|
|
.css-wwhp4j {
|
|
padding-top: 0.9375rem;
|
|
margin: 0.3125rem 0;
|
|
line-height: 1.4;
|
|
}
|
|
</style>
|
|
<style data-emotion="css lqx6q4">
|
|
.css-lqx6q4 {
|
|
padding-top: 0.9375rem;
|
|
line-height: 2;
|
|
}
|
|
</style>
|
|
<style data-emotion="css 5tjtfu">
|
|
.css-5tjtfu {
|
|
display: inline-block;
|
|
margin: 1.875rem 0.9375rem 1.25rem 0;
|
|
}
|
|
</style>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
<style data-emotion="css 1auaywn">
|
|
.css-1auaywn {
|
|
background-color: #E8E8E8;
|
|
bottom: 0;
|
|
color: #000000;
|
|
position: fixed;
|
|
text-align: center;
|
|
width: 100%;
|
|
z-index: 5999997;
|
|
}
|
|
|
|
@media(min-width: 61.25rem) {
|
|
.css-1auaywn {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="mobile-adhesion-unit open css-1auaywn e12hkqta1">
|
|
<style data-emotion="css 1pie5a9">
|
|
.css-1pie5a9 {
|
|
min-width: 18.75rem;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<div id="adAdhesion" class="css-1pie5a9 e1hka4w80"></div>
|
|
<style data-emotion="css pdj4d8">
|
|
.css-pdj4d8 {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
right: 0.625rem;
|
|
bottom: auto;
|
|
top: -0.7rem;
|
|
padding: 0rem;
|
|
margin: 0rem;
|
|
-webkit-text-decoration: none;
|
|
text-decoration: none;
|
|
z-index: 1;
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
border: 2px solid white;
|
|
border-radius: 1em;
|
|
color: #fff;
|
|
text-overflow: clip;
|
|
cursor: pointer;
|
|
background-color: #000000;
|
|
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.css-pdj4d8::before {
|
|
display: inline-block;
|
|
width: 0.75rem;
|
|
height: 0.1rem;
|
|
position: absolute;
|
|
content: "";
|
|
top: 0.52rem;
|
|
left: 0.21rem;
|
|
border: none;
|
|
color: #000;
|
|
text-overflow: clip;
|
|
background-color: #ffffff;
|
|
text-shadow: none;
|
|
-webkit-transform: rotateZ(45deg);
|
|
-moz-transform: rotateZ(45deg);
|
|
-ms-transform: rotateZ(45deg);
|
|
transform: rotateZ(45deg);
|
|
}
|
|
|
|
.css-pdj4d8::after {
|
|
display: inline-block;
|
|
width: 0.75rem;
|
|
height: 0.1rem;
|
|
position: absolute;
|
|
content: "";
|
|
top: 0.52rem;
|
|
left: 0.21rem;
|
|
border: none;
|
|
color: #000;
|
|
text-overflow: clip;
|
|
background-color: #ffffff;
|
|
text-shadow: none;
|
|
-webkit-transform: rotateZ(-45deg);
|
|
-moz-transform: rotateZ(-45deg);
|
|
-ms-transform: rotateZ(-45deg);
|
|
transform: rotateZ(-45deg);
|
|
}
|
|
</style>
|
|
<div aria-label="Close" class="mobile-adhesion-unit-close-button css-pdj4d8 e12hkqta0"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html> |