/* =======================================================================
   youdao.com homepage — local reconstruction
   Values marked (src) are extracted from the live page's inlined <style>
   blocks. Values marked (est) are my estimates — the footer stylesheet
   ships inside yd-nav.js and was not available.
   ======================================================================= */

/* ============ reset ============ */
* { margin: 0; padding: 0; }
html, body { background: #fff; height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: #101214;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { border: 0; }

/* ============ layout container (src) ============ */
.center_container { min-width: 960px; width: 72%; margin: 0 auto; }

.index_page {
  overflow-x: hidden;
  position: relative;
  user-select: none;
  z-index: 1;
}

/* ============ header (src) ============ */
.header_container {
  background: #fff;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 900;
}
.header_content { margin: 0 auto; }
.top_nav { display: flex; }

.nav_list {
  flex: 1;
  line-height: 1;
  padding: 26px 0 0;
  white-space: nowrap;
}
.nav_item {
  color: #101214;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  list-style: none;
  margin-right: 40px;
  vertical-align: middle;
}
.nav_item a:hover { color: #fb4a3e; }
.nav_list .current { position: relative; }
.nav_list .current .item { color: #fa4b3e; font-weight: 600; }
.nav_item.current a { color: #101214; font-weight: 600; }

.account {
  align-items: center;
  color: #17181a;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 70px;
  text-align: right;
  white-space: nowrap;
}
.account .username, .account a { color: #2a2b2e; }
.account .product-nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
  cursor: pointer;
}
.account .account_item { cursor: pointer; margin-right: 32px; }
.account .login { cursor: pointer; }
.account .login:hover { color: #fb4a3e !important; }
/* source uses a base64 PNG 2x2-dot glyph here; redrawn in CSS to avoid
   embedding their asset. Geometry matches: 28px box, left:-28px. (src geom) */
.account .product-nav .nav {
  cursor: pointer;
  display: block;
  height: 28px;
  width: 28px;
  left: -28px;
  margin-top: 1px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  --dot: #2a2b2e;
  background:
    linear-gradient(var(--dot),var(--dot)) 6px  6px/6px 6px no-repeat,
    linear-gradient(var(--dot),var(--dot)) 16px 6px/6px 6px no-repeat,
    linear-gradient(var(--dot),var(--dot)) 6px  16px/6px 6px no-repeat,
    linear-gradient(var(--dot),var(--dot)) 16px 16px/6px 6px no-repeat;
}
.account .product-nav:hover .nav { --dot: #fb4a3e; }
.account .product-nav:hover .account_item { color: #fb4a3e; }
/* nav-scoped split is 20px, unlike the search bar's 12px (src) */
.top_nav .split { margin: 0 20px; }
/* ============ banner bg (src) ============ */
/* MUST stay scoped as `.index_page .content-bg` (0,3,0) so it outranks
   `.content-cell`'s position:relative (0,2,0) below. Source relies on that:
   the banner is absolute, i.e. OUT of flow, sitting behind the logo and
   search box as a backdrop. Unscope this to `.content-bg` (0,1,0) and
   .content-cell wins on source order -> banner rejoins the flow, claims
   300px of height, and pushes the logo/search box down, leaving a blank
   band where the two should overlap. */
.index_page .content-bg { position: absolute; right: 0; }
.content-cell {
  background: url(https://shared.ydstatic.com/market/souti/web_dict/online/3.0.9/dist/client/img/banner.19d6197.png) no-repeat;
  background-position: 50%;
  background-size: cover;
  height: 300px;
  left: 0;
  position: relative;
  top: 70px;
  width: 100%;
  z-index: -1;
}
/* .no-banner (440px) exists in source but is NOT applied to this element
   on the homepage — only .product-container receives it. Kept for parity. */
.content-cell.no-banner { height: 440px; }
.content-cell:before {
  background: linear-gradient(180deg, hsla(0,0%,100%,0), #fff);
  content: "";
  height: 85px;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-180deg);
  width: 100%;
}

/* ============ content (src) ============ */
.content {
  margin: 0 auto 47px;
  padding-top: 150px;
  position: relative;
  z-index: 5;
}
.content.no-banner { padding-top: 246px; }

/* ============ cumulative counter / odometer (src) ============
   Structure: .box draws the static bordered cells; .u1 (old digits) and
   .u2 (new digits) stack directly on top at the same offset. Each digit
   rolls independently. .contianer's overflow:hidden does the clipping.
   Width is set by JS (27*len+220, or 19*len+170 below 1920px). */
.contianer {
  font-family: "PingFang SC";
  font-style: normal;
  height: 36px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 95px;
}
.contianer .text1 { color: #626469; float: left; font-size: 21px; font-weight: 500; line-height: 34px; }
.contianer .text2 { color: #101214; float: right; font-size: 18px; font-weight: 500; line-height: 34px; }
.contianer .text3 { color: #101214; float: right; font-size: 19px; font-weight: 500; line-height: 34px; }
.contianer .box { display: inline-block; left: 176px; position: absolute; }
.contianer .box .boxitem {
  border: 1px solid #e6e7e8;
  border-radius: 6px;
  display: inline-block;
  height: 32px;
  margin-left: 3px;
  width: 27px;
}
/* narrow, borderless cell used for the "." in e.g. "2358.7" */
.contianer .box .boxitem-noborder { display: inline-block; height: 34px; margin-left: 3px; width: 12px; }

.contianer .u1, .contianer .u2 { display: flex; height: 34px; left: 176px; position: absolute; }
.contianer .u1 .numitem, .contianer .u2 .numitem {
  border: 1px solid transparent;
  color: #2a2b2e;
  display: inline-block;
  /* source asks for "Poppins medium" but never ships it — falls back anyway */
  font-family: "Poppins medium", Poppins, "PingFang SC", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  height: 32px;
  line-height: 32px;
  margin-left: 3px;
  text-align: center;
  width: 27px;
  /* deliberately NO overflow:hidden — source clips only at .contianer,
     which leaves a ~2px sliver of the incoming digit below the cells */
}
/* per-digit roll: old digit exits upward, new digit enters from below.
   (Source declares group2-enter twice; the later 34px wins — verified in
   the client bundle, so the two groups never cross mid-flight.) */
.contianer .numitem li { display: block; height: 32px; line-height: 32px; }
.contianer .group1-leave { transform: translateY(0); }
.contianer .group1-leave-active,
.contianer .group2-enter-active { transition: all 1s ease; }
.contianer .group1-leave-to { transform: translateY(-34px); }
.contianer .group2-enter-to { transform: translateY(0); }
.contianer .group2-enter { transform: translateY(34px); }

@media screen and (max-width: 1919px) {
  .contianer { height: 28px; }
  .contianer .text1, .contianer .text2 { font-size: 16px; line-height: 27px; }
  .contianer .text3 { font-size: 14px; line-height: 28px; }
  .contianer .box { align-items: center; display: flex; left: 133px; }
  .contianer .box .boxitem { border-radius: 4px; height: 24px; line-height: 24px; margin-left: 2px; width: 20px; }
  .contianer .box .boxitem-noborder { height: 28px; margin-left: 2px; width: 7px; }
  .contianer .u1, .contianer .u2 { height: 26px; left: 133px; }
  .contianer .u1 .numitem, .contianer .u2 .numitem { font-size: 14px; height: 24px; line-height: 28px; margin-left: 2px; width: 20px; }
  .contianer .numitem li { height: 24px; line-height: 28px; }
  .contianer .group1-leave-to { transform: translateY(-28px); }
  .contianer .group2-enter { transform: translateY(28px); }
  .contianer .group2-enter-to { transform: translateY(0); }
}
/* Source ships this as `.box,.u1,.u2{left:154px}` — UNSCOPED, so its
   specificity (0,2,0) LOSES to the base `.contianer .box` (0,3,0). Media
   queries add no specificity, so 154px never actually applies: the real
   value at >=1920px stays 176px.
   Selectors kept deliberately unscoped to preserve that cascade. Scoping
   them to `.contianer .box` makes 154px win, which pulls the digits left
   into the 168px label (8 chars x 21px) and overlaps them. */
@media screen and (min-width: 1920px) {
  .box, .u1, .u2 { left: 154px; }
}
/* ============ search (src) ============ */
.search_con { position: relative; text-align: center; }
.search_con .logo { margin-bottom: 36px; width: 242px; }

.input_con {
  background: #fff;
  border: 3px solid #101214;
  border-radius: 18px;
  box-shadow: 0 8px 34px rgba(16,18,20,.05);
  box-sizing: border-box;
  height: 78px;
  margin: 0 auto;
  position: relative;
  width: 640px;
  z-index: 999;
}
.input-content {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  left: 0;
  padding: 0 21px 0 26px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

/* Visible language indicator: 英 top-left, 中 bottom-right, plus two swap
   arrows. Source paints the arrows as two base64 PNGs at 10%/80% and
   70%/10%; redrawn here as CSS borders at equivalent positions. */
.select-result {
  background: #fff;
  color: #2a2b2e;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  z-index: 51;
}
.select-result .select-le:last-child { text-align: right; }
.select-result:before, .select-result:after {
  content: "";
  position: absolute;
  width: 10px; height: 8px;
  border-style: solid;
  border-color: #2a2b2e;
}
/* Positions are the source's background-position percentages resolved to px.
   Box is 44 x 40 (two 20px line-height:1 rows); arrow art is 10 x 8.
   left-bottom arrow:  x=(44-10)*.10=3.4   y=(40-8)*.80=25.6
   right-top arrow:    x=(44-10)*.70=23.8  y=(40-8)*.10=3.2 */
.select-result:before { left: 3.4px;  top: 25.6px; border-width: 0 0 1.5px 1.5px; border-radius: 0 0 0 3px; }
.select-result:after  { left: 23.8px; top: 3.2px;  border-width: 1.5px 1.5px 0 0; border-radius: 0 3px 0 0; }
/* transparent 44px hit target sitting over .select-result.
   .multiselect__tags is opacity:0, so its "中英" text never shows. */
.lang_select {
  background: none;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  min-height: 32px;
  vertical-align: middle;
  width: 44px;
  position: relative;
  flex-shrink: 0;
}
.lang_select .multiselect__select { display: none; }
.lang_select .multiselect__tags { background: none; border: none; border-radius: 5px; opacity: 0; padding: 0; }
.lang_select .multiselect__single { background: none; color: #2a2b2e; font-size: 15px; font-weight: 500; }

/* dropdown panel */
.lang_select .multiselect__content-wrapper {
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 33px rgba(0,0,0,.05);
  color: #939599;
  display: none;
  font-size: 20px;
  left: -26px;
  max-height: 500px !important;
  min-height: 176px;
  overflow: visible;
  padding: 12px 0;
  position: absolute;
  top: 65px;
  width: 96px;
  z-index: 60;
}
/* hairline border via 200% box scaled to 0.5 — gives a crisp 0.5px edge */
.lang_select .multiselect__content-wrapper:before {
  border: 1px solid #eeeff0;
  border-radius: 20px;
  box-sizing: border-box;
  content: "";
  height: 200%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: scale(.5);
  transform-origin: 0 0;
  width: 200%;
}
.lang_select.is-open .multiselect__content-wrapper { display: block; }
.lang_select .multiselect__content { display: inline-block; width: 100%; }
.lang_select .multiselect__option {
  display: block;
  line-height: 20px;
  min-height: 20px;
  padding: 8px 0;
  text-align: center;
  cursor: pointer;
}
.lang_select .multiselect__option--selected { background: none; }
.lang_select .multiselect__option:hover,
.lang_select .multiselect__option--highlight { background: none; color: #fb4a3e; }
@media screen and (max-width: 960px) {
  .lang_select .multiselect__content-wrapper { font-size: 15px; }
}
.search_input {
  display: inline-block;
  flex: 1;
  height: 48px;
  line-height: 48px;
  margin-left: 31px;
  vertical-align: middle;
}
.search_input #search_input {
  border: none;
  outline: none;
  font-family: "Poppins-Regular", Poppins, "PingFang SC", system-ui, sans-serif;
  font-size: 26px;
  height: 48px;
  line-height: 48px;
  width: 100%;
  color: #101214;
  background: transparent;
}
.search_input #search_input::placeholder { color: #c8c9cc; }

.split {
  background-color: #e6e7e8;
  display: inline-block;
  height: 25.5px;
  margin: 0 12px;
  width: 1px;
  flex-shrink: 0;
}
/* Source uses raster icons from their CDN; redrawn in CSS so this copy
   carries no Youdao image assets. Box sizes match the source (26 / 30px). */
.translate_btn {
  cursor: pointer;
  display: inline-block;
  height: 26px;
  width: 26px;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  --ic: #101214;
}
.translate_btn:before {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: 15px; height: 15px;
  border: 2.5px solid var(--ic);
  border-radius: 50%;
  box-sizing: border-box;
}
.translate_btn:after {
  content: "";
  position: absolute;
  right: 2.5px; bottom: 2.5px;
  width: 8px; height: 2.5px;
  background: var(--ic);
  border-radius: 2px;
  transform: rotate(45deg);
  transform-origin: right center;
}
.translate_btn:hover { --ic: #fb4a3e; }
.wordbook_btn {
  cursor: pointer;
  display: inline-block;
  height: 30px;
  width: 30px;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  --ic: #101214;
}
.wordbook_btn:before {
  content: "";
  position: absolute;
  left: 5px; top: 4px;
  width: 19px; height: 22px;
  border: 2.5px solid var(--ic);
  border-radius: 2px 4px 4px 2px;
  box-sizing: border-box;
}
.wordbook_btn:after {
  content: "";
  position: absolute;
  left: 9px; top: 4px;
  width: 2.5px; height: 22px;
  background: var(--ic);
}
.wordbook_btn:hover { --ic: #fb4a3e; }

/* ============ product row (src metrics; content client-rendered) ============ */
.product-container {
  font-family: "PingFang SC";
  letter-spacing: 0;
  padding-top: 44px;
  position: relative;
}
.product-container.no-banner { padding-top: 143px; }
/* Two states: populated (20px/16px) vs :empty (32px/0). My earlier build only
   had the :empty value, which was wrong whenever a banner exists. (src) */
.banner-swiper { margin: 20px auto 16px; overflow: hidden; position: relative; width: 88%; z-index: 9; }
.banner-swiper:empty { margin: 32px auto 0; }
/* banner slide image overrides the card-image box entirely (src) */
.banner-swiper .swiper-wrapper .swiper-slide .swiper-img {
  background: transparent;
  cursor: pointer;
  height: auto;
  width: 100%;
}
.banner-swiper .swiper-slide a { display: block; }
/* counter shifts down when a banner is present (src) */
.rollNumber-with-banner { top: 143px !important; }
.product-list {
  align-items: stretch;
  display: flex;
  justify-content: center;
  text-align: center;
}
.product-item { box-sizing: border-box; cursor: pointer; width: 18%; }
.product-item_content { text-align: center; }
/* 60x60 object-fit:contain <img> from the API, as in source (src) */
.product-icon {
  height: 60px;
  width: 60px;
  margin: 0 auto 12px;
  object-fit: contain;
  display: block;
}
.product-title { color: #2a2b2e; font-size: 16px; font-weight: 600; line-height: 1; }
.product-item:hover .product-title { color: #fb4a3e; }
/* adv carousel. Source is Swiper.js (translate3d track). Here the wrapper is
   centered flex — visually equivalent for a non-overflowing 5-card row.
   swiper-button-prev/next only render when >4 slides (verified in JS). */
.adv-box { margin: 47px auto 0; position: relative; width: 100%; z-index: 10; }
.adv-box .swiper { width: 89%; margin: 0 auto; overflow: hidden; }
/* Swiper track: slide width is set inline by JS as (container - 3*22)/4, and
   the track translates in whole pages. Do NOT centre-justify — that would
   fight the transform. */
.adv-box .swiper-wrapper {
  display: flex;
  transition: transform .4s ease;
  will-change: transform;
}
.adv-box .swiper-slide {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 22px;
}
.adv-box .swiper-slide:last-child { margin-right: 0; }
.adv-box .swiper-content { width: 100%; text-align: left; }
/* 180x170 is the IMAGE box, not the slide — the slide is wider (computed by
   Swiper) and this sits inside it. Real API artwork, as in source. (src) */
.adv-box .swiper-img {
  background: #f4f5f7;
  border-radius: 12px;
  display: block;
  height: 170px;
  width: 180px;
  padding: 10px 35px;
  box-sizing: border-box;
  object-fit: contain;
}
/* remaining slide text styles, present in source for API-driven cards */
.adv-box .swiper-title { color: #2a2b2e; font-size: 24px; font-weight: 500; line-height: 100%; margin-top: 21px; }
.adv-box .swiper-desc { color: #939599; font-size: 16px; line-height: 100%; margin: 13px 0 21px; }
.adv-box .swiper-link { color: #4d71ff; cursor: pointer; display: inline-block; font-size: 16px; font-weight: 500; line-height: 100%; }
.adv-box .swiper-link .button-text { margin-right: 16px; }
.adv-box .swiper-link .button-img {
  border: .5px solid #c8c9cc;
  border-radius: 3px;
  bottom: -106px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 4px 10px rgba(0,0,0,.13);
  display: none;
  height: 100px;
  position: absolute;
  transform: scale(1);
  width: 100px;
}
.adv-box .swiper-slide:hover .swiper-link .button-img { display: block; }
/* Source uses two CDN PNGs for these; redrawn as a CSS chevron on a grey
   disc. Box geometry (50px, top:94px) is from source. */
.adv-box .swiper-button-prev,
.adv-box .swiper-button-next {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 94px;
  background: #f2f3f5;
  cursor: pointer;
  z-index: 11;
}
.adv-box .swiper-button-prev { left: 0; }
.adv-box .swiper-button-next { right: 0; }
.adv-box .swiper-button-prev:after,
.adv-box .swiper-button-next:after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  border-style: solid;
  border-color: #9a9da3;
  border-width: 2px 2px 0 0;
}
.adv-box .swiper-button-prev:after { transform: translate(-60%,-50%) rotate(-135deg); }
.adv-box .swiper-button-next:after { transform: translate(-40%,-50%) rotate(45deg); }
.adv-box .swiper-button-prev:hover:after,
.adv-box .swiper-button-next:hover:after { border-color: #fb4a3e; }
/* Swiper adds this class at track ends */
.adv-box .swiper-button-disabled { opacity: .35; cursor: default; }
/* ============ footer (est) ============
   The footer stylesheet is not in the page's inlined <style> chunks — it
   ships inside yd-nav.js and was not extracted. Everything below is an
   estimate matched by eye, NOT verified source values. */
.footer_container { margin-top: 135px; }

.dict-website-footer.footer-default {
  --footer-bg-color: #f1f6ff;
  --footer-list-title-color: #2a2f45;
  --footer-list-item-color: #85899e;
}
.dict-website-footer.footer-gray {
  --footer-bg-color: #f5f6f7;
  --footer-list-title-color: #2a2b2e;
  --footer-list-item-color: #939599;
}
.dict-website-footer {
  background: var(--footer-bg-color);
  box-sizing: border-box;
  font-family: Poppins, "PingFang SC", system-ui, sans-serif;
  font-size: 12px;
  margin: 0 auto;
  padding: 48px 0 0;
  text-align: left;
}
.dict-website-footer .dict-website-footer-container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-bottom: 36px;
}

.official-code .logo { height: auto; width: 130px; display: block; }
.official-code .wechat-container { display: flex; margin-top: 20px; }
.official-code .wechat-container img.wechat-qrcode { height: 76px; width: 76px; }
.official-code .wechat-container p {
  color: var(--footer-list-item-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  margin-left: 12px;
}
.channel-area-title {
  color: var(--footer-list-item-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  margin-top: 28px;
}
.select-channel_area { margin-top: 12px; position: relative; }
.select-channel_area .channel-logo { height: 32px; width: 32px; }
.select-channel_area .channel-logo:nth-child(2) { margin: 0 9px; }
.foot-content {
  display: flex;
  flex-wrap: wrap;
  height: 255px;
  justify-content: space-between;
  position: relative;
  width: 62%;
}
.foot-content .foot-list { white-space: nowrap; }
.foot-content .foot-list:first-child { min-width: 142px; }
.foot-content .foot-list:nth-child(6) { left: 0; position: absolute; top: 125px; }

.list-title {
  color: var(--footer-list-title-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 9px;
}
.list-cell .value {
  color: var(--footer-list-item-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}
.list-cell .value:hover { color: #fb4a3e; }

.copyright, .dict-website-footer .report { text-align: center; }
.copyright .link, .copyright .text,
.dict-website-footer .report .link, .dict-website-footer .report .text {
  color: var(--footer-list-item-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}
.copyright a.link + a.link,
.dict-website-footer .report .text,
.dict-website-footer .report a.link + a.link { margin-left: 10px; }
.copyright .text { margin-left: 10px; }
.copyright .text .mail-text,
.dict-website-footer .report .text .mail-text { color: var(--footer-list-item-color); }
.report {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 30px;
}
.report .parting { display: none; }

/* ---- product/carousel responsive (src) ----
   The base rules above are the >=1920px case. Below 1920 nearly every metric
   changes: icons 60->45, titles 24->18, image box 180x170 -> 136x128,
   arrows 50 -> 37.5px. */
@media screen and (min-width: 961px) and (max-width: 1919px) {
  .product-icon { height: 45px; width: 45px; }
  .product-title { font-size: 12px; }
  .adv-box .swiper { width: 88%; }
  .adv-box .swiper-slide { margin-right: 29px; }
  .adv-box .swiper-img { height: 128px; padding: 7px 26px; width: 136px; }
  .adv-box .swiper-title { font-size: 18px; margin-top: 16.5px; }
  .adv-box .swiper-desc { font-size: 12px; font-weight: 400; margin: 8px 0 9px; }
  .adv-box .swiper-link { font-size: 12px; font-weight: 400; }
  .adv-box .swiper-link .button-img { bottom: -82px; height: 76px; width: 76px; }
  .adv-box .swiper-button-prev,
  .adv-box .swiper-button-next { height: 37.5px; width: 37.5px; top: 80px; }
  .banner-swiper { width: 88%; }
}
@media screen and (max-width: 960px) {
  .product-icon { height: 45px; width: 45px; }
  .product-title { font-size: 12px; }
  .adv-box .swiper { width: 75%; }
  .adv-box .swiper-slide { margin-right: 34px; }
  .adv-box .swiper-img { height: 128px; padding: 7px 8px; width: 136px; }
  .adv-box .swiper-title { font-size: 18px; margin-top: 13.5px; }
  .adv-box .swiper-desc { font-size: 12px; line-height: 16.8px; margin: 8px 0 15px; }
  .adv-box .swiper-link { font-size: 12px; }
  .adv-box .swiper-link .button-img { bottom: -82px; height: 76px; width: 76px; }
  .adv-box .swiper-button-prev,
  .adv-box .swiper-button-next { height: 37.5px; width: 37.5px; top: 80px; }
  .banner-swiper { width: 85%; }
}

/* ============ responsive: verified source breakpoints (src) ============ */
@media screen and (min-width: 960px)  and (max-width: 1360px) { .center_container { width: 79%; } }
@media screen and (min-width: 1360px) and (max-width: 1440px) { .center_container { width: 63%; } }
@media screen and (min-width: 1440px) and (max-width: 5120px) { .center_container { width: 62.5%; } }
@media screen and (min-width: 1920px) { .search_con .search_input #search_input { font-size: 35px; } }
@media screen and (max-width: 1280px) { .result-top_nav .nav_item { margin-right: 40px; } }
@media screen and (min-width: 5210px) {
  .top_nav .nav_item { font-size: 42px; height: 42px; }
  .search_con .logo { margin-bottom: 133px; }
}