/* line-break */
.x-large {
    display: block;
}

@media only screen and (min-width: 1068px) {
    .x-large {
        display: none;
    }
}

@media only screen and (max-width: 470px) {
    .x-large {
        display: block;
    }
}

.small-large {
    display: none;
}

@media only screen and (min-width: 470px) and (max-width: 734px) {
    .small-large {
        display: block;
    }
}

.small-x {
    display: block;
}

@media only screen and (max-width: 470px) {
    .small-x {
        display: none;
    }
}

.xs-small-show{
    display: none;
}

@media only screen and (max-width: 360px) {
    .xs-small-show{
        display: block;
    }
}

.custom_nowrap {
    white-space: nowrap;
}

@media only screen and (max-width: 1068px) {
    .custom_nowrap {
        white-space: normal;
    }
}

@media only screen and (max-width: 420px){
    .hero-lead-in {
        width: 200px
    }
}

/* line-heihgt */

.section-changemakers .card-headline-container .card-headline {
    line-height: 1.1;
}

/* icon */
.icon-after::after,
#ac-globalfooter .ac-gf-more::after,
.icon-wrapper .more::after,
.ribbon-link.more::after {
    position: relative !important;
    top: -0.1em !important;
}

[data-component-list=DrawerComponent] [data-drawer-toggle] .icon {
    transform-origin: 73% 49% !important;
}

/*--- section-hero ---*/

.section-hero .hero-headline {
    line-height: 1.13;
}

@media only screen and (min-width: 1069px) {
    .section-hero .overview-hero {
        margin-top: 110px;
    }

    .section-hero .overview-hero-iphone {
        margin-top: 20px;
    }

    .section-hero .iphone-callout .snipe {
        top: 320px;
    }

    .section-hero .overview-hero-ipad {
            padding-top: 10px;
    }
}

@media only screen and (max-width: 1068px) and (min-width: 735px) {
    .section-hero .overview-hero {
        margin-top: 110px;
    }

    .section-hero .overview-hero-iphone {
        margin-top: 20px;
    }

    .section-hero .iphone-callout .snipe {
        top: 260px;
    }

    .section-hero .overview-hero-ipad {
        padding-top: 20px;
    }
}

@media only screen and (max-width: 320px) {
    .section-hero .overview-hero {
        margin-top: 65px;
    }

    .section-hero .overview-hero-iphone {
        margin-top: 15px;
    }

    .section-hero .iphone-callout .snipe {
        top: 175px;
    }
}

.section-hero .overview-hero-snipe-iphone {
    margin-left: -12px;
}

@media only screen and (min-width: 1069px) {
    .section-hero .overview-hero-snipe-mac-mini {
        top: -8px;
        position: absolute;
    }
}

@media only screen and (max-width: 1068px) {
    .section-hero .overview-hero-snipe-mac-mini {
        top: -5px;
        position: absolute;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .overview-hero-snipe-mac-mini {
        top: -2px;
        position: absolute;
    }

    .section-hero .mac-mini-callout .snipe .m1-illustration {
        top: 35px;
    }
}

@media only screen and (max-width: 1068px) {
    .section-hero .overview-hero-snipe-ipad {
        top: -15px;
    }
}

@media only screen and (max-width: 1068px) {
    .section-hero .overview-hero-snipe-ipad {
        top: -15px;
        position: absolute;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .overview-hero-snipe-ipad {
        top: -4px;
        position: absolute;
    }
}

@media only screen and (max-width: 734px) and (max-width: 734px) {
    .section-hero .overview-hero-snipe-keyboard {
        top: -8px;
        left: -6px;
        position: absolute;
    }
}

/*--- section-hero snipe ---*/

/* macbook */
.section-hero .overview-hero-snipe-macbook {
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 175px;
    --p-height: 47px;
    margin-left: 13px
}

@media only screen and (max-width:1068px)and (max-width:1068px) {
    .section-hero .overview-hero-snipe-macbook {
        --p-width: 85px;
        --p-height: 78px;
        margin-left: 0
    }
}

@media only screen and (max-width:734px)and (max-width:734px) {
    .section-hero .overview-hero-snipe-macbook {
        --p-width: 65px;
        --p-height: 59px
    }
}

/* iphone */
.section-hero .overview-hero-snipe-iphone {
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 216px;
    --p-height: 50px
}

@media only screen and (max-width:1068px)and (max-width:1068px) {
    .section-hero .overview-hero-snipe-iphone {
        --p-width: 166px;
        --p-height: 39px
    }
}

@media only screen and (max-width:734px)and (max-width:734px) {
    .section-hero .overview-hero-snipe-iphone {
        --p-width: 132px;
        --p-height: 30px
    }
}

/* mac-mini */
.section-hero .overview-hero-snipe-mac-mini {
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 104px;
    --p-height: 73px;
    left: 26px
}

@media only screen and (max-width:1068px)and (max-width:1068px) {
    .section-hero .overview-hero-snipe-mac-mini {
        --p-width: 85px;
        --p-height: 57px;
        top: -3px;
        left: 15px
    }
}

@media only screen and (max-width:734px)and (max-width:734px) {
    .section-hero .overview-hero-snipe-mac-mini {
        --p-width: 65px;
        --p-height: 45px;
        left: 11px
    }
}

@media only screen and (max-width: 1068px) {
    .section-hero .mac-mini-callout .snipe .m1-illustration {
        top: 52px;
    }
}

@media only screen and (max-width: 734px) {
    .section-hero .mac-mini-callout .snipe .m1-illustration {
        top: 33px;
    }
}

/* iphone-box */
.section-hero .overview-hero-snipe-iphone-box {
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 104px;
    --p-height: 47px
}

@media only screen and (max-width:1068px)and (max-width:1068px) {
    .section-hero .overview-hero-snipe-iphone-box {
        --p-width: 85px;
        --p-height: 38px
    }
}

@media only screen and (max-width:734px)and (max-width:734px) {
    .section-hero .overview-hero-snipe-iphone-box {
        --p-width: 49px;
        --p-height: 45px
    }
}

.section-hero .overview-hero-snipe-iphone-box {
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 132px;
    --p-height: 42px
}

@media only screen and (max-width:1068px)and (max-width:1068px) {
    .section-hero .overview-hero-snipe-iphone-box {
        --p-width: 85px;
        --p-height: 38px;
        margin-left: 10px
    }
}

@media only screen and (max-width:734px)and (max-width:734px) {
    .section-hero .overview-hero-snipe-iphone-box {
        --p-width: 49px;
        --p-height: 45px;
        margin-left: 0
    }
}

/* keyboard */
.section-hero .overview-hero-snipe-keyboard {
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 134px;
    --p-height: 91px
}

@media only screen and (max-width: 1068px) and(max-width: 1068px) {
    .section-hero .overview-hero-snipe-keyboard {
        --p-width: 96px;
        --p-height: 66px
    }
}

@media only screen and (max-width: 734px) and(max-width: 734px) {
    .section-hero .overview-hero-snipe-keyboard {
        --p-width: 82px;
        --p-height: 54px
    }
}

/* ipad */
.section-hero .overview-hero-snipe-ipad {
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 104px;
    --p-height: 78px;
}

@media only screen and (max-width:1068px)and (max-width:1068px) {
    .section-hero .overview-hero-snipe-ipad {
        --p-width: 82px;
        --p-height: 60px
    }
}

@media only screen and (max-width:734px)and (max-width:734px) {
    .section-hero .overview-hero-snipe-ipad {
        --p-width: 65px;
        --p-height: 48px
    }
}

/* watch */
.section-hero .overview-hero-snipe-watch {
    display: block;
    width: var(--p-width);
    height: var(--p-height);
    --p-width: 90px;
    --p-height: 95px;
    margin-left: 10px
}

@media only screen and (max-width:1068px)and (max-width:1068px) {
    .section-hero .overview-hero-snipe-watch {
        --p-width: 77px;
        --p-height: 78px;
        margin-left: 10px
    }
}

@media only screen and (max-width:734px)and (max-width:734px) {
    .section-hero .overview-hero-snipe-watch {
        --p-width: 55px;
        --p-height: 57px;
        margin-left: 13px
    }
}


/* section-recycled-guts */
.cst {
    display: inline-flex;
    margin-top: 32px;
}

@media only screen and (max-width: 734px) {
    .cst {
        display: inline-flex;
        margin-top: 30px;
    }
}

.section-recycled-guts.card.card-rounded {
    min-height: 685px;
}

.section-recycled-guts.card .card-content {
    padding-top: 88px;
}

@media only screen and (max-width: 1068px) {
    .section-recycled-guts.card.card-rounded {
        min-height: 572px;
    }

    .section-recycled-guts.card .card-content {
        padding-top: 80px;
    }
}

@media only screen and (max-width: 734px) {
    .section-recycled-guts.card.card-rounded {
        min-height: 550px;
    }

    .section-recycled-guts.card .card-content {
        padding-top: 54px;
    }
}

.section-recycled-guts.card .card-picture-container.animation-activated .card-picture-sprite {
    animation: go-lineup var(--animation-duration) steps(2) forwards;
}

.section-recycled-guts.card .card-picture-sprite {
    height: 100%;
    width: 3090px;
    display: flex;
}

@media only screen and (max-width: 1068px) {
    .section-recycled-guts.card .card-picture-sprite {
        width: 2442px;
    }
}

@media only screen and (max-width: 734px) {
    .section-recycled-guts.card .card-picture-sprite {
        width: 1170px;
    }
}

.section-recycled-guts.card .card-picture-container {
    --sprite-travel-distance: -2060px;
}

@media only screen and (max-width: 1068px) {
    .section-recycled-guts.card .card-picture-container {
        --sprite-travel-distance: -1628px;
    }
}

@media only screen and (max-width: 734px) {
    .section-recycled-guts.card .card-picture-container {
        --sprite-travel-distance: -780px;
    }
}

.section-recycled-guts.card .card-headline>span[aria-hidden] span:before {
    width: 120px;
    height: 64px;
    background-size: 120px 64px;
    background-repeat: no-repeat;
    background-image: url(/kr/environment/q/images/overview/recycled_arrow__byk8b3zmq5ea_large.png);
    top: -40px;
    left: -64px
}

@media (-webkit-min-device-pixel-ratio:1.5),
(min-resolution:144dpi),
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-resolution:1.5dppx) {
    .section-recycled-guts.card .card-headline>span[aria-hidden] span:before {
        background-image: url(/kr/environment/q/images/overview/recycled_arrow__byk8b3zmq5ea_large_2x.png)
    }
}

@media only screen and (max-width:1068px) {
    .section-recycled-guts.card .card-headline>span[aria-hidden] span:before {
        width: 118px;
        height: 62px;
        background-size: 118px 62px;
        background-repeat: no-repeat;
        background-image: url(/kr/environment/q/images/overview/recycled_arrow__byk8b3zmq5ea_medium.png);
        top: -46px;
        left: -66px
    }
}

@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) {
    .section-recycled-guts.card .card-headline>span[aria-hidden] span:before {
        background-image: url(/kr/environment/q/images/overview/recycled_arrow__byk8b3zmq5ea_medium_2x.png)
    }
}

@media only screen and (max-width:734px) {
    .section-recycled-guts.card .card-headline>span[aria-hidden] span:before {
        width: 90px;
        height: 44px;
        background-size: 90px 44px;
        background-repeat: no-repeat;
        background-image: url(/kr/environment/q/images/overview/recycled_arrow__byk8b3zmq5ea_small.png);
        left: -48px;
        top: -34px
    }
}

@media only screen and (max-width:734px)and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-width:734px)and (min-resolution:1.5dppx),
only screen and (max-width:734px)and (min-resolution:144dpi) {
    .section-recycled-guts.card .card-headline>span[aria-hidden] span:before {
        background-image: url(/kr/environment/q/images/overview/recycled_arrow__byk8b3zmq5ea_small_2x.png);
    }
}

/* section-iphone-carousel */
.section-iphone-carousel .callout-magnets,
.section-iphone-carousel .callout-antenna {
    margin-right: 30px;
}

@media only screen and (max-width: 1068px) {
    .section-iphone-carousel .callout-antenna {
        margin-right: 30px;
    }
}

@media only screen and (max-width: 734px) {

    .section-iphone-carousel .callout-magnets,
    .section-iphone-carousel .callout-antenna {
        margin-right: 0;
    }
}

@media only screen and (min-width: 735px) {
    .section-iphone-carousel .callout-daisy {
        margin-right: 0;
    }
}

@media only screen and (max-width: 734px) {
    .section-trade-in .card-content {
        padding-right: 0;
        padding-left: 0;
    }
}

.no-hero-enhance-xp .section-hero .overview-hero {
    margin-top: 0;
}

.no-js .section-hero .overview-hero {
    margin-top: 20px;
}

.modal.modal-plan .modal-contents {
    display: inline-block;
}

.card-modal-body {
    width: 780px;
    margin: 44px auto;
}

.modal.modal-plan .plan-modal-goal {
    max-width: 780px;
    margin: 57px auto 0;
}

@media only screen and (min-width: 735px) {
    .modal.modal-plan .plan-modal-headline {
        width: 780px;
        max-width: 780px;
        margin: 0 auto;
    }

    .modal.modal-plan .plan-modal-subheadline {
        max-width: 24ch;
    }

    .modal.modal-plan .plan-modal-goal p {
        max-width: 22ch;
    }
}

@media only screen and (max-width: 1068px) {
    .card-modal-body {
        width: 100%;
        max-width: 780px;
    }

    .modal.modal-plan .plan-modal-headline {
        width: 100%;
    }
}

.section-wild-ideas .card-headline:after {
    margin-top: 4px;
}

/* section-one-less-thing */
.section-one-less-thing .card-headline {
    max-width: 5em;
}

.section-blockquote .blockquote-wrapper {
    max-width: 72%;
}

@media only screen and (max-width: 1068px) {
    .section-blockquote .blockquote-wrapper {
        max-width: 85%;
    }
}

@media only screen and (max-width: 734px) {
    .section-blockquote .blockquote-wrapper {
        max-width: 77.5%;
    }
}

@media only screen and (max-width: 459px) {
    .section-blockquote .blockquote-wrapper {
        max-width: 90%;
    }
}

/* section-trade-in */
@media only screen and (max-width: 734px) {
    .section-trade-in .card-headline {
        padding-right: 3px;
        padding-left: 3px;
    }
}

.callout-antenna .typography-body-reduced-tight, .callout-magnets .typography-body-reduced-tight {
    width:190px
}
@media only screen and (min-width: 735px) and (max-width: 1068px){
    .section-iphone .callout .resistant {
        width: 169px
    }
}


.highlighted-text .highlight-illustration {
    width: 103%;
}

@media only screen and (max-width: 734px) {
    width: 86%;
}