/* template.css overrides -- use only when absolutely necessary
================================*/
.banner {padding-top:79.667%;}
.banner-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-height: 575px;
background: url('https://promotions.newegg.ca/amd/26-0053/images/imgs/hero.jpg') no-repeat 0 0; /* ../imgs/hero.jpg*/
background-size:289.722222%; border-bottom:1px solid #ccc5;
}
.banner-img2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 462px;
    background: url(../imgs/hero-prev.jpg) no-repeat 0 0;
    background-size:289.722222%; border-bottom:1px solid #ccc5;
    }
.header2021-logo-img > img{
  width:102px !important;
  height:auto;
}
.productList li {
    margin: 0em 0;
}

.originalPrice {
    color: #000;
    font-size: 0.8em;
    text-decoration: line-through;
	display:none;
}
.price{margin:0 0 0.825em 0;}
.price-save{display:none;}
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:#cc4e00;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:19px solid #cc4e00;border-right: 10px solid transparent;margin-bottom:0;}
.price-save-label{padding:0 0 1px 6px}
.price-save-dollar{padding:0 0 1px 2px}
.price-save-percent{padding:0 6px 1px 2px}
.price-save-label:before,.price-save-percent:after{content:'';position:absolute;bottom:0;width:0;height:0;}
.item-cell{border-bottom:none;}
.item-promo{margin-top:1em;}
.item-promo-code{border-color:#888;}
.item-promo-title span{color:#333;}
.item-promo-info{color:#cc4e00;}
.item-promo-code{padding:1.5em 5px 1em 5px;height:auto;color:#cc4e00;}
.item-promo-code-save{display:inline;}
li.mir{display:none;}
.instantSavings, .mir{display:none;}
.finalPrice{font-size:1.6em;}
.instantSavings{font-size:0.925em}
.finalPrice, .instantSavings {color:#fff;}
.shipping{visibility:hidden;}
.mir{font-size:1em;margin:0;color:#016B04}
.header .logo { width:125px; }
.items-grid:after { background:none; }
.item-title a { font-size:14px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; color:#fff; }
/* No Orange Bar for Custom LPs with Black Background
.price-save-dollar,.price-save-label,.price-save-percent{position:relative;background:none;color:#fff;font-weight:700;font-size:13px;}
.price-save-percent:after{left: 100%;border-bottom:none;border-right: 10px solid transparent;margin-bottom:0;}
================================*/

/* custom CSS on a per project basis
================================*/
body { background-color:#000; }
:root {
	--ngg-darkblue:#09144f;
	--ngg-blue:#084BA6;
	--ngg-orange:#fa9d28;
	--ngg-darkorange: #ff8500;  
	--ngg-footgry: #333;  
	--ngg-opensans:'Open Sans', sans-serif;
	--ngg-btn-txt:#212121;
  }
.btn-primary, .button.button-primary, .ngg-shopall, .ngg-buynow { text-transform:none; font-family:var(--ngg-opensans); border:#ffffff 2px solid; background-color:#000000; color:#FFFFFF; }
.ngg-btn { border:0; background:none; width:100%; margin:3% auto; text-align:center; }
.ngg-item-btn { font-size:1rem; }
.ngg-item-btn a { border-radius:35px; padding:10px 0; width:100%; letter-spacing:0; }
.ngg-shopall, .ngg-buynow { border-radius:30px; text-align:center; transition:0.5s;	font-weight:700; font-family:var(--ngg-opensans); }
.ngg-shopall { font-size:18px; padding:15px 8%; }
.ngg-buynow { padding:10px 20px; }
.ngg-shopall:hover, .ngg-buynow:hover, .ngg-item-btn a:hover { background-color:var(--ngg-darkorange); transition:0.35s; }
.ngg-comingsoon { background-color:#333; color:#fff; }

sup { font-size:50%; }

.combo-items li:nth-child(odd) { background:transparent; }
.combo-items li { color:white; font-weight:bold; }
.disclaimer { color:#ccc8; }

.ngg-section, .ngg-clock, .ngg-all-skus { position:relative; color:#fff; clear:both; }
.ngg-text-left { position:absolute; top:0; left:0; padding:5%; max-width:500px; }
.ngg-text-right { position:absolute; top:0; right:0; padding:5%; max-width:500px; }

.ngg-sect { display:flex; }
.ngg-sect div { flex:1; color:#fff; max-width:500px; }
.ngg-details { padding:5%; }



.hero-content {
    position: absolute;
    top: 50%;
    right: 6%;
    transform: translateY(-50%);
    max-width: 420px;
    z-index: 1;
  }

  .hero-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.25;
    margin: 0 0 14px;
    text-transform: uppercase;
  }

  .hero-text {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.9;
  }

  .hero img { width:100%; max-width:1366px; }

  .desktop-only { display: none; }
  .mobile-only  { display: block !important; width: 100%; }

  @media (min-width: 768px) {
    .desktop-only { display: block !important; width: 100%;  }
    .mobile-only  { display: none !important; }
  }


.ngg-sect-img {
    position: relative; top: 0; left: 0; right: 0; bottom: 0; max-height: 468px; background: url(../imgs/section1.jpg) no-repeat 0 0;
    background-size:289.722222%; padding-top: 5%;border-bottom:1px solid #ccc5; }
.ngg-sect-img2 {
    position: relative; top: 0; left: 0; right: 0; bottom: 0; max-height: 468px; background: url(../imgs/section2.jpg) no-repeat 0 0;
    background-size:289.722222%; padding-top: 3%;border-bottom:1px solid #ccc5; }
.ngg-sect-img3 {
    position: relative; top: 0; left: 0; right: 0; bottom: 0; max-height: 468px; background: url(../imgs/section3.jpg) no-repeat 0 0;
    background-size:289.722222%; padding-top: 2%; border-bottom:1px solid #ccc5; }
.ngg-sect-img4 {
    position: relative; top: 0; left: 0; right: 0; bottom: 0; max-height: 468px; background: url(../imgs/section4.jpg) no-repeat 0 0;
    background-size:289.722222%; border-bottom:1px solid #ccc5; }
.ngg-sect-img5 {
    position: relative; top: 0; left: 0; right: 0; bottom: 0; max-height: 468px; background: url(../imgs/section5.jpg) no-repeat 0 0;
    background-size:289.722222%; padding-top: 8%; border-bottom:1px solid #ccc5; }
	
.ngg-details1 { position:relative; top:0; right:-50%;  color:#fff; z-index:1; max-width:420px; }
.ngg-details2 { position:relative; top:0; left:0; padding:4% 5% 5% 16%; color:#fff; z-index:1; max-width:420px; }
.ngg-details3 { position:relative; top:0; right:-50%; padding:7% 21% 5% 5%; color:#fff; z-index:1; max-width:450px; }
.ngg-details3a { position:relative; top:70px; left:16%; padding:4% 21% 5% 5%; color:#fff; z-index:1; max-width:770px; text-shadow:#000 1px 1px 20px; }
.ngg-details5 { position:relative; top:0; right:-50%; color:#fff; z-index:1; max-width:440px; }
.ngg-details4 { position:relative; top:0; left:0; padding:12% 11% 14% 14%; color:#fff; z-index:1; max-width:420px; }
.ngg-detailsA { position:relative; top:0; left:0; padding:4% 5% 5% 21%; color:#fff; z-index:1; max-width:500px; margin:3% auto; }
.ngg-detailsB { position:relative; top:0; right:10%; padding:4% 21% 5% 5%; color:#fff; z-index:1; max-width:500px; }
.ngg-details2 p, .ngg-details3 p .ngg-details5 p{ padding:3% 0 5%; }
.ngg-details3 p { padding:3% 0 5%; }

.ngg-btn { margin:3% 0 0; max-width:180px; }
.ngg-btn a { padding:8px 16px; border:2px solid #fff; font-size:2.5rem; font-weight:700; transition:1s; }
.ngg-btn a:hover { background:#fff; color:#000; transition:0.8s; }
.ngg-seebtn { font-size:14px; width:100%; max-width:180px; }

.ngg-all-skus { padding:0; }
.ngg-sku { display:flex; justify-content:space-around; margin:5% auto; }
.ngg-sku-title { text-align:center; color:#fff; font-weight:700; font-size:3rem; padding:3% 0 3%; }
.ngg-add { padding:15px 0; }

.ngg-bg1 { background: url('../imgs/242502416-F_Ryzen_9000Series_Module-01-BG.jpg') no-repeat top left; background-size:100%;  }
.ngg-line { border-bottom:1px solid #ccc5; }
.item-img > img { max-width:500px; }
.ngg-AL { text-align:left; }
.main-item .item-img > img {max-width: 400px;}
.ngg-logo{ margin: auto;padding: 20px 10px 20px 0px; text-align: center; max-width:100%; }
.ngg-logo2 { margin: auto;padding: 20px 40px 20px 0px; text-align: center; max-width:100%; }
.ngg-badges {margin: auto;padding: 20px 40px 20px 0px; text-align: center;}

/* clock countdown */
.ngg-clock { display:block; margin:auto; width:100%; text-align:center; padding:15px 0; color:#000; }
.ngg-timerbg { /*background:url('../imgs/timer_bg.png') no-repeat left center; background-size:cover;*/ background-color:#ff661c;}
.date { font-size:2em;}
.clock { font-size:1.45em; -moz-border-radius: 10px; -webkit-border-radius: 10px; -ms-border-radius: 10px; padding: 1% 3% 12%; 
    font-weight: bold; height:auto; }
.clock-time { display:flex; width:400px; margin:0 auto; text-align: center; padding:10px 0 0; }

.clock ul { margin:0 auto!important; padding:0; text-align: center!important; width:300px; }
.clock li { list-style-type:none; float: left; font-size:12px; font-weight:bold; text-transform:uppercase; color:#000; }
.c_days { padding:2% 0% 0 0%; }
.c_hrs { padding:2% 0% 0 8.35%; }
.c_mins { padding:2% 0% 0 8.35%; }
.c_secs { padding:2% 0% 0 9.35%; }

#timer { 
	color: #000;
	font-weight: bold;
	text-align:left;
	width:310px;
	margin:0 auto;
    font-size:2em;
}
.timer { float:left; font-weight:normal; font-size:16px; text-align:center; text-transform:uppercase; color:#000; width:90px; padding:0 1%; border-right:0px solid #669999; font-family:'Open Sans',sans-serif; }
.timer:last-child { border-right:0px; }
.timer span { font-size:3rem !important; font-weight:bold !important; color:#000 !important; }
.timerbd { border-right:1px solid #fff6; }
.ngg-clockbg { background: rgb(255,145,10);
    background: linear-gradient(0deg, rgba(255,145,10,1) 0%, rgba(255,102,28,1) 100%); z-index:-1; }

.disclaimer {
    margin: 1.3em 5% 2em 5%;
}
.ngg-logo3{margin: 5% 0%;}
/* responsive CSS on a per project basis
================================*/
@media only screen and (max-width: 1000px) {
  /* insert responsive CSS for tablet screens below 768px */
  .ngg-timerbg { background-image:none; }
  
  .ngg-details1, .ngg-details5 {max-width: 300px;}
  .ngg-logo {max-width: 80%;}
.ngg-details4, .ngg-details5 {max-width: 300px; padding: 3%;}


}

@media only screen and (max-width: 550px) {
	/* insert responsive CSS for mobile screens below 550px */
  .items-grid .item-cell { width:90%; text-align:center; border-bottom:1px solid #333; padding-bottom:8%; }
  .item-img > img { max-width:300px; }
  .items-grid .item-title { height:auto; }
    .ngg-sku { flex-direction:column-reverse; margin-top:10%; }

	.ngg-details1 { padding:53% 6% 0% 8%; right:0; max-width: 420px; }
    .ngg-details2 { padding:53% 6% 0% 8%; right:0; max-width: 420px; }
    .ngg-details3 { padding:40% 9% 0% 5%; right:0; max-width: 420px; }
	.ngg-details4 { padding:55% 6% 3%; }
	.ngg-details5 { padding:45% 6% 5%; right:0; }
    .ngg-sect-img, .ngg-sect-img2, .ngg-sect-img3, .ngg-sect-img4 { border-bottom:0; }
    .ngg-detailsA, .ngg-detailsB { padding:5%; margin-top:-10%; }
    .ngg-detailsB { right:0; }
    .ngg-rev { flex-direction:column; }
    .ngg-btn a { font-size:2rem; }
    .ngg-sku-title { font-size:2rem; padding:5% 0; }
    .btn-area2 { margin:auto; text-align:center; }
	.ngg-details3a {
    position: relative;
    top: 70px;
    left: 0%;
    padding: 28% 9% 13% 6%;
    color: #fff;
    z-index: 1;
    /* max-width: 770px; */
    text-shadow: #000 1px 1px 20px;
}
.ngg-details2 {max-width: 420px;}
.ngg-logo{ margin: auto;padding: 20px 40px 20px 0px; text-align: center; width:50%;}
.ngg-logo2 { margin: auto;padding: 0px 40px 20px 0px; text-align: center;width:50%;  }
 .ngg-section { margin:10% auto; } 
}


@media only screen and (min-width: 375px) {
	/* insert responsive CSS for screens above 375px */
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 481px */
    .two-items .items-split { border-left:0; }
	.items4col { width:19% !important; margin:0; }
	
	
}
@media only screen and (min-width: 641px) {
	/* insert responsive CSS for screens above 641px */
	.banner { padding-top: 42.86%; }
	.banner-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .banner-img2 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .items-grid .item-title { color:#fff; height:6em; }
    
	
	.ngg-sect-img {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img2 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img3 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
    .ngg-sect-img4 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
	
	 .ngg-sect-img5 {
		background-position:100% 0;
		background-size: 152.7086383601757%;
	}
}
@media only screen and (min-width: 769px) {
	/* insert responsive CSS for screens above 769px */
		.items-grid .item-cell { width: 22%; }

}
@media only screen and (min-width: 1000px) {
	/* insert responsive CSS for screens above 1025px */


 

@media only screen and (min-width: 912px) {
	/* insert responsive CSS for screens above 1025px */



}

@media (max-width: 768px) {
    .section1 {
      padding-top: 60%; /* Mobile 更舒适的高度 */
    }

    .hero::before {
      background: rgba(0, 0, 0, 0.65);
    }

    .hero-content {
      position: static;
      transform: none;
      max-width: 100%;
      padding: 20px;
    }

    .hero-title {
      font-size: 22px;
    }

    .hero-text {
      font-size: 14px;
    }
  }
  	.ngg-details1 {
    
    right: -60%;
    padding: 4% 4% 5% 2%;
    color: #fff;
    z-index: 1;
    max-width: 320px;
}

 	.ngg-details5 {
    position: relative;
    top: 0;
    right: -60%;
    padding: 4% 4% 5% 2%;
    color: #fff;
    z-index: 1;
    max-width: 320px;
}

@media only screen and (min-width: 1800px) { 
    .ngg-timerbg { background-size:contain; }
}