/*------------------------------------*\
   LOCAL FIXES
\*------------------------------------*/
.page-overview .section-inspiration.section-hero {
    overflow: hidden;
    background-color: #fafafa;
    height: 1153px
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero {
        height: 835px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero {
        height: 888px
    }
}

.page-overview .section-inspiration.section-hero .section-hero-image {
    width: 2560px;
    height: 1153px;
    background-size: 2560px 1153px;
    background-repeat: no-repeat;
    background-image: url("https://images.apple.com/cn/education/images/overview/inspiration_large.jpg");
    background-position: center center;
    position: absolute;
    top: auto;
    left: auto;
    bottom: 0;
    width: 100%
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        background-image: url("https://images.apple.com/cn/education/images/overview/inspiration_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 1068px;
        height: 835px;
        background-size: 1068px 835px;
        background-repeat: no-repeat;
        background-image: url("https://images.apple.com/cn/education/images/overview/inspiration_medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        background-image: url("https://images.apple.com/cn/education/images/overview/inspiration_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 736px;
        height: 888px;
        background-size: 736px 888px;
        background-repeat: no-repeat;
        background-image: url("https://images.apple.com/cn/education/images/overview/inspiration_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        background-image: url("https://images.apple.com/cn/education/images/overview/inspiration_small_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        position: absolute;
        top: auto;
        bottom: 0
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 100%
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-image {
        width: 100%
    }
}

.page-overview .section-inspiration.section-hero .section-hero-content {
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    padding-top: 0;
    padding-bottom: 75px
}

.page-overview .section-inspiration.section-hero .section-hero-content:before,
.page-overview .section-inspiration.section-hero .section-hero-content:after {
    content: ' ';
    display: table
}

.page-overview .section-inspiration.section-hero .section-hero-content:after {
    clear: both
}

@media only screen and (min-width: 1442px) {
    .page-overview .section-inspiration.section-hero .section-hero-content {
        margin-left: auto;
        margin-right: auto;
        width: 980px
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-content {
        margin-left: auto;
        margin-right: auto;
        width: 692px
    }
}

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

@media only screen and (max-width: 480px) {
    .page-overview .section-inspiration.section-hero .section-hero-content {
        margin-left: auto;
        margin-right: auto;
        width: 90%
    }
}

.page-overview .section-inspiration.section-hero .section-hero-content:not(:last-child) {
    padding-bottom: 0
}

.page-overview .section-inspiration.section-hero .section-hero-headline {
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    padding-top: 0;
    padding-bottom: 75px;
    padding-top: 182px
}

.page-overview .section-inspiration.section-hero .section-hero-headline:before,
.page-overview .section-inspiration.section-hero .section-hero-headline:after {
    content: ' ';
    display: table
}

.page-overview .section-inspiration.section-hero .section-hero-headline:after {
    clear: both
}

@media only screen and (min-width: 1442px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline {
        margin-left: auto;
        margin-right: auto;
        width: 980px
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline {
        margin-left: auto;
        margin-right: auto;
        width: 692px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline {
        margin-left: auto;
        margin-right: auto;
        width: 87.5%
    }
}

@media only screen and (max-width: 480px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline {
        margin-left: auto;
        margin-right: auto;
        width: 90%
    }
}

.page-overview .section-inspiration.section-hero .section-hero-headline:not(:last-child) {
    padding-bottom: 0
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline {
        padding-top: 153px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline {
        padding-top: 162px
    }
}

.page-overview .section-inspiration.section-hero .section-hero-intro {
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    padding-top: 0;
    padding-bottom: 75px;
    padding-top: 17px
}

.page-overview .section-inspiration.section-hero .section-hero-intro:before,
.page-overview .section-inspiration.section-hero .section-hero-intro:after {
    content: ' ';
    display: table
}

.page-overview .section-inspiration.section-hero .section-hero-intro:after {
    clear: both
}

@media only screen and (min-width: 1442px) {
    .page-overview .section-inspiration.section-hero .section-hero-intro {
        margin-left: auto;
        margin-right: auto;
        width: 980px
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-intro {
        margin-left: auto;
        margin-right: auto;
        width: 692px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-intro {
        margin-left: auto;
        margin-right: auto;
        width: 87.5%
    }
}

@media only screen and (max-width: 480px) {
    .page-overview .section-inspiration.section-hero .section-hero-intro {
        margin-left: auto;
        margin-right: auto;
        width: 90%
    }
}

.page-overview .section-inspiration.section-hero .section-hero-intro:not(:last-child) {
    padding-bottom: 0
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-intro {
        padding-top: 26px;
    }
}

.page-overview .section-inspiration.section-hero .section-hero-link {
    margin-top: 17px
}

.page-overview .section-inspiration.section-hero .section-hero-link a {
    color: #fff;
}

.page-overview .section-inspiration.section-hero .section-hero-link:first-of-type {
    margin-top: 12px
}

.page-overview .section-inspiration.section-hero:before {
    background-repeat: no-repeat;
    background-image: url("https://images.apple.com/cn/education/images/overview/swatch_deployment_large.jpg");
    background-repeat: repeat;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    height: 1650px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero:before {
        background-image: url("https://images.apple.com/cn/education/images/overview/swatch_deployment_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero:before {
        height: 1250px
    }
}

.page-overview .section-inspiration.section-hero:after {
    background: none;
    position: relative;
    width: 0;
    height: 0;
    z-index: 0
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero:before {
        background: none;
        position: relative;
        width: 0;
        height: 0;
        z-index: 0
    }

    .page-overview .section-inspiration.section-hero:after {
        background-repeat: no-repeat;
        background-image: url("https://images.apple.com/cn/education/images/overview/swatch_deployment_large.jpg");
        background-repeat: repeat;
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        z-index: -1;
        height: 1250px
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-overview .section-inspiration.section-hero:after {
        background-image: url("https://images.apple.com/cn/education/images/overview/swatch_deployment_large_2x.jpg")
    }
}

.page-overview .section-inspiration.section-hero.section-hero-subsection .section-hero-headline {
    padding-top: 100px;
    color:white
}

@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero.section-hero-subsection .section-hero-headline {
        padding-top: 80px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero.section-hero-subsection .section-hero-headline {
        padding-top: 70px
    }
}

.page-overview .section-inspiration.section-hero .section-hero-intro-format {
    width: 430px;
    color:white
}


@media only screen and (max-width: 1068px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline-format {
        width: 470px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .section-inspiration.section-hero .section-hero-headline-format {
        width: 100%
    }
    .page-overview .section-inspiration.section-hero .section-hero-intro-format{
        width: 90%
    }
}






/*------------------------------------*\
   END LOCAL FIXES
\*------------------------------------*/
.page-overview .edu-hero-headline{
    background-repeat: no-repeat;
    background-size: 507px 163px;
    height: 163px;
    width: 507px;
    background-image: url("/tw/education/images/overview/hero_title_large.png");
    background-position: center left;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
   .page-overview .edu-hero-headline{
        background-image: url("/tw/education/images/overview/hero_title_large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .edu-hero-headline {
        background-size: 326px 131px;
        height: 131px;
        width: 326px;
        background-repeat: no-repeat;
        background-position: center left;
        background-image: url("/tw/education/images/overview/hero_title_medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .page-overview .edu-hero-headline {
        background-image: url("/tw/education/images/overview/hero_title_medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .edu-hero-headline {
        background-size: 307px 103px;
        height: 103px;
        width: 307px;
        background-image: url("/tw/education/images/overview/hero_title_small.png")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-overview .edu-hero-headline {
        background-image: url("/tw/education/images/overview/hero_title_small_2x.png")
    }
}

.page-overview .section-inspiration .column.large-8.medium-7.small-12 h2.hero-headline span.nowrap{font-family:  'HanHei TC', 'PingFang TC', 'Helvetica Neue', 'Helvetica', 'STHeitiTC-Light', 'Arial', sans-serif;}

.page-overview .hour-of-code-2017 {
    background: #EDFCF9
}
.page-overview .hour-of-code-2017 .section-content {
    padding-top: 120px;
    padding-bottom: 170px
}

@media only screen and (max-width: 1068px) {
    .page-overview .hour-of-code-2017 .section-content {
        padding-top: 102px;
        padding-bottom: 100px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017 .section-content {
        padding-top: 55px;
        padding-bottom: 55px
    }
}

.page-overview .hour-of-code-2017 .hour-of-code-image {
    width: 352px;
    height: 422px;
    background-size: 352px 422px;
    background-repeat: no-repeat;
    background-image: url("/v/education/education/i/images/shared/hoc-2017/robot_large.png");
    right: 108px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/robot_large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        width: 302px;
        height: 362px;
        background-size: 302px 362px;
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/shared/hoc-2017/robot_medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/robot_medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        width: 281px;
        height: 339px;
        background-size: 281px 339px;
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/shared/hoc-2017/robot_small.png")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/robot_small_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        right: 45px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        right: auto
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017 .hour-of-code-image {
        margin-top: 53px
    }
}

.page-overview .hour-of-code-2017 .hour-of-code-logo {
    width: 72px;
    height: 72px;
    background-size: 72px 72px;
    background-repeat: no-repeat;
    background-image: url("/v/education/education/i/images/shared/hoc-2017/logo_large.png");
    margin-bottom: 44px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-overview .hour-of-code-2017 .hour-of-code-logo {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/logo_large_2x.png")
    }
}

@media only screen and (max-width: 1068px) {
    .page-overview .hour-of-code-2017 .hour-of-code-logo {
        width: 69px;
        height: 69px;
        background-size: 69px 69px;
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/shared/hoc-2017/logo_medium.png")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .page-overview .hour-of-code-2017 .hour-of-code-logo {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/logo_medium_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017 .hour-of-code-logo {
        width: 62px;
        height: 62px;
        background-size: 62px 62px;
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/shared/hoc-2017/logo_small.png")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-overview .hour-of-code-2017 .hour-of-code-logo {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/logo_small_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017 .hour-of-code-logo {
        margin-bottom: 31px
    }
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017-text {
        max-width: 510px
    }
}

.page-overview .hour-of-code-2017 .section-hero-headline {
    width: 104%
}

@media only screen and (max-width: 1068px) {
    .page-overview .hour-of-code-2017 .section-hero-headline {
        width: auto
    }
}

.page-overview .hour-of-code-2017-image {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute
}

@media only screen and (max-width: 735px) {
    .page-overview .hour-of-code-2017-image {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        position: relative;
        top: auto
    }
}

.page-teachers .hour-of-code-2017 .hour-of-code-image {
    width: 490px;
    height: 470px;
    background-size: 490px 470px;
    background-repeat: no-repeat;
    background-image: url("/v/education/education/i/images/shared/hoc-2017/hour_of_code_tile_large.jpg")
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-teachers .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/hour_of_code_tile_large_2x.jpg")
    }
}

@media only screen and (max-width: 1068px) {
    .page-teachers .hour-of-code-2017 .hour-of-code-image {
        width: 347px;
        height: 435px;
        background-size: 347px 435px;
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/shared/hoc-2017/hour_of_code_tile_medium.jpg")
    }
}

@media only screen and (max-width: 1068px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 1068px) and (min-resolution: 1.5dppx), only screen and (max-width: 1068px) and (min-resolution: 144dpi) {
    .page-teachers .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/hour_of_code_tile_medium_2x.jpg")
    }
}

@media only screen and (max-width: 735px) {
    .page-teachers .hour-of-code-2017 .hour-of-code-image {
        width: 416px;
        height: 170px;
        background-size: 416px 170px;
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/shared/hoc-2017/hour_of_code_tile_small.jpg")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-teachers .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/hour_of_code_tile_small_2x.jpg")
    }
}

.page-teaching-code .hour-of-code-2017 {
    background: #EDFCF9
}

.page-teaching-code .hour-of-code-2017 .section-content {
    padding-top: 68px;
    padding-bottom: 139px
}

@media only screen and (max-width: 1068px) {
    .page-teaching-code .hour-of-code-2017 .section-content {
        padding-top: 54px;
        padding-bottom: 58px
    }
}

@media only screen and (max-width: 735px) {
    .page-teaching-code .hour-of-code-2017 .section-content {
        padding-top: 0;
        padding-bottom: 46px
    }
}

@media only screen and (max-width: 735px) {
    .page-teaching-code .hour-of-code-2017 .callout {
        margin-top: 0
    }
}

.page-teaching-code .hour-of-code-2017 .hour-of-code-image {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    background-repeat: no-repeat;
    background-image: url("/v/education/education/i/images/shared/hoc-2017/icon_hourofcode_large.png");
    margin: 0 auto;
    display: block;
    margin-bottom: 28px
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    .page-teaching-code .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/icon_hourofcode_large_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .page-teaching-code .hour-of-code-2017 .hour-of-code-image {
        width: 52px;
        height: 52px;
        background-size: 52px 52px;
        background-repeat: no-repeat;
        background-image: url("/v/education/education/i/images/shared/hoc-2017/icon_hourofcode_small.png")
    }
}

@media only screen and (max-width: 735px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 735px) and (min-resolution: 1.5dppx), only screen and (max-width: 735px) and (min-resolution: 144dpi) {
    .page-teaching-code .hour-of-code-2017 .hour-of-code-image {
        background-image: url("/v/education/education/i/images/shared/hoc-2017/icon_hourofcode_small_2x.png")
    }
}

@media only screen and (max-width: 735px) {
    .page-teaching-code .hour-of-code-2017 .hour-of-code-image {
        margin-bottom: 22px
    }
}

.page-teaching-code .hour-of-code-2017 .subsection-text {
    margin: 0 auto;
    text-align: center;
    max-width: 600px
}