/*built 2019-06-10*/
@media only screen and (max-width: 1068px) {
    .graph-slide .graph-container .badge .badge-caption {
        width: calc(100% - 115px);
        padding-left: 25px;
    }
}

@media only screen and (max-width: 735px) {
    .graph-slide .graph-container .badge .badge-caption {
        width: calc(100% - 95px);
        padding-left: 25px;
    }
}

.subsection-radeon .mpx-container .pin-holder .pin-caption span.nowrap{
	display: inline-block;
}

.icon-wrapper .icon-playcircle.icon-after{
	font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}

/** hide AR in wechat **/

@media only screen and (max-width: 735px) {
    html.wechat-fix .links-wrapper>* .quicklook-component {
        display: none
    }
}

html.wechat-fix .quicklook-component {
    display: none
}

html.wechat-fix .hide-on-quicklook {
    display: block
}
html.wechat-fix.quick-look .links-wrapper>*.quicklook-component {
        display: none
    }
@media only screen and (max-width: 735px) {
    html.wechat-fix.quick-look .links-wrapper>*.quicklook-component {
        display: none
    }
}

/** Fix performance data **/
.subsection-processor-performance .graph-gallery-container .slide-container{
    padding-left: 32px;
}
@media only screen and (max-width: 1068px) {
    .subsection-processor-performance .graph-gallery-container .slide-container {
        padding-left: 0;
    }
}
.subsection-processor-performance .graph-slide .graph-container .badge{
    right: calc(8.33% - 69px);
}

@media only screen and (max-width: 1068px) {
    .subsection-processor-performance .graph-slide .graph-container .badge{
        right: calc(8.33% - 44px);
    }
}

/* ribbon */

.ribbon {
    width: 100%;
    overflow: hidden;
    position: absolute;
    z-index: 10;
    top:90px
}

.ribbon-wrapper {
    width: 100%;
    padding: 13px 0;
    text-align: center;
    color: #333;
    background-color: #ffffff;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: background-color 1s ease-in-out 1.8s, color 1s ease-in-out 1.8s, -webkit-transform .8s ease-in-out;
    transition: background-color 1s ease-in-out 1.8s, color 1s ease-in-out 1.8s, -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out, background-color 1s ease-in-out 1.8s, color 1s ease-in-out 1.8s;
    transition:transform .8s ease-in-out, background-color 1s ease-in-out 1.8s, color 1s ease-in-out 1.8s, -webkit-transform .8s ease-in-out
}

.ribbon-content {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    display:block
}

@media only screen and (min-width: 1442px) {
    .ribbon-content {
        margin-left: auto;
        margin-right: auto;
        width:980px
    }
}

@media only screen and (max-width: 1068px) {
    .ribbon-content {
        margin-left: auto;
        margin-right: auto;
        width:692px
    }
}

@media only screen and (max-width: 735px) {
    .ribbon-content {
        margin-left: auto;
        margin-right: auto;
        width:87.5%
    }
}

@media only screen and (max-width: 735px) {
    .ribbon-content {
        margin-left: auto;
        margin-right: auto;
        max-width:303px
    }
}

.ribbon .icon-wrapper, .ribbon .icon-copy {
    color: #0070c9;
    -webkit-transition: color 1s ease-in-out 1.8s;
    transition:color 1s ease-in-out 1.8s
}

.ribbon .will-change {
    will-change:transform
}

html.js.no-reduced-motion .ribbon.ribbon-hide .ribbon-wrapper {
    color: #fff;
    background-color: #338dd4;
    -webkit-transform: translateY(-100%);
    transform:translateY(-100%)
}

html.js.no-reduced-motion.aow .ribbon.ribbon-hide .ribbon-wrapper {
    -webkit-transform: translateY(0px);
    transform:translateY(0px)
}

html.js.no-reduced-motion .ribbon.ribbon-hide .icon-wrapper, html.js.no-reduced-motion .ribbon.ribbon-hide .icon-copy {
    color:#fff
}

.ribbon + .section-content {
    padding-top: auto;
    margin-top:46px
}

@media only screen and (max-width: 1068px) {
    .ribbon + .section-content {
        padding-top:auto
    }
}

@media only screen and (max-width: 735px) {
    .ribbon + .section-content {
        padding-top:66px
    }
}

@media only screen and (max-width: 1068px) {
    .ribbon + .section-content {
        margin-top:46px
    }
}

@media only screen and (max-width: 735px) {
    .ribbon + .section-content {
        margin-top:auto
    }
}

.ribbon a{
    color:inherit;
}

.ac-ls-visible .ribbon{
    top: 206px
}

@media only screen and (max-width: 833px) {
    .ac-ls-visible .ribbon{
    top: 267px
	}
}


@media only screen and (max-width: 767px) {
    .ac-ls-visible .ribbon{
    top: 269px
}
}

#graphics-stats-gallery .badge .badge-content.mw-alt{width:102px}
@media only screen and (max-width: 1068px) {#graphics-stats-gallery .badge .badge-content.mw-alt{width:88px}}
@media only screen and (max-width: 735px) {#graphics-stats-gallery .badge .badge-content.mw-alt{width:144px}}

p.typography-headline-copy.headline-copy:lang(zh-CN),
.typography-headline-copy.headline-intro:lang(zh-CN){line-height:1.2}

@media only screen and (max-width: 1068px) {
    p.typography-headline-copy.headline-copy:lang(zh-CN),
.typography-headline-copy.headline-intro:lang(zh-CN){line-height:1.25}
}

@media only screen and (max-width: 735px) {
    p.typography-headline-copy.headline-copy:lang(zh-CN),
.typography-headline-copy.headline-intro:lang(zh-CN){line-height:1.3}
}

.section-connections .connect-intro-max-width {
    max-width: 859px;
}
@media only screen and (max-width: 1068px) {
    .section-connections .connect-intro-max-width {
        max-width:740px
    }
}


/* vertical */
.section-expansion .expansion-stats .badge-caption {
    margin-top: 0px;
}

@media only screen and (min-width: 735px) and (max-width: 1068px) {
    .section-expansion .expansion-stats .badge-caption {
        margin-top: 13px;
    }
}

@media only screen and (min-width: 735px) and (max-width: 1068px) {
    .section-expansion .expansion-stats .badge-caption:not(:first-child) {
        margin-top: 13px;
    }
}

@media only screen and (max-width: 734px) {
    .section-expansion .expansion-stats .badge-caption {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 324px) {
    br.small.no {
        display: none;
    }
}


/* badge-unit '倍' font-size */
.performance-gallery .item-container .bars-container .badge-unit, .performance-gallery .item-container .bars-container .badge-value + .badge-unit {
    /* Initial value font-size: 56px; */
    font-size: 36px;
    margin-bottom: -10px;
}


@media only screen and (max-width: 1068px) {
    .performance-gallery .item-container .bars-container .badge-unit, .performance-gallery .item-container .bars-container .badge-value + .badge-unit {
        /* Initial value  font-size: 48px; */
        font-size: 28px;
        margin-bottom: -10px;
    }
}

@media only screen and (max-width: 734px) {
    .performance-gallery .item-container .bars-container .badge-unit, .performance-gallery .item-container .bars-container .badge-value + .badge-unit {
        /* Initial value font-size: 28px; */
        font-size: 18px;
        margin-bottom: -5px;
    }
}

/* headline h1 */
.section-hero .hero-wrapper {
    top: calc(130px + 7.5vh);
}
@media only screen and (max-width: 1068px) {
    .section-hero .hero-wrapper {
        top: calc(120px + 7vh);
    }
}
@media only screen and (max-width: 734px) {
    .section-hero .hero-wrapper {
        top: calc(92px + 14vh);
    }
}

@media only screen and (max-width: 734px) {
    .section-compare .product-pricing {
        max-width: 9em;
    }
}


.section-compare .grid-container {
    grid-template-areas: "mac-mini-hw 					.	mac-studio-hw 					.	mac-pro-hw" "mac-mini-swatch 				.	mac-studio-swatch 				.	mac-pro-swatch" "mac-mini-headline 				.	mac-studio-headline  			.	mac-pro-headline" "mac-mini-pricing 				.	mac-studio-pricing 				.	mac-pro-pricing" "mac-mini-processor 			.	mac-studio-processor 			.	mac-pro-processor" "mac-mini-cpu 					.	mac-studio-cpu 					.	mac-pro-cpu" "mac-mini-gpu 					.	mac-studio-gpu 					.	mac-pro-gpu" "mac-mini-memory 				.	mac-studio-memory 				.	mac-pro-memory" "mac-mini-storage 				.	mac-studio-storage 				.	mac-pro-storage" 
    "mac-mini-apple-intelligence	.	mac-studio-apple-intelligence	.	mac-pro-apple-intelligence" "mac-mini-btn 					.	mac-studio-btn 					.	mac-pro-btn" "mac-mini-cta					.	mac-studio-cta 					.	mac-pro-cta"
}

@media only screen and (max-width: 734px) {
    .section-compare .grid-container {
        grid-template-areas: "mac-mini-hw 					mac-studio-hw" "mac-mini-swatch 				mac-studio-swatch" "mac-mini-headline 				mac-studio-headline" "mac-mini-pricing 				mac-studio-pricing" "mac-mini-processor 			mac-studio-processor" "mac-mini-cpu 					mac-studio-cpu" "mac-mini-gpu 					mac-studio-gpu" "mac-mini-memory 				mac-studio-memory" "mac-mini-storage 				mac-studio-storage" "mac-mini-apple-intelligence	mac-studio-apple-intelligence" "mac-mini-btn 					mac-studio-btn" "mac-mini-cta					mac-studio-cta" ".								." "mac-pro-hw						." "mac-pro-swatch					." "mac-pro-headline  				." "mac-pro-pricing    			." "mac-pro-processor				." "mac-pro-cpu					." "mac-pro-gpu					." "mac-pro-memory					." "mac-pro-storage				." "mac-pro-apple-intelligence		." "mac-pro-btn					." "mac-pro-cta 					.";
    }
}