@charset "UTF-8";
/*================ hero 共用樣式 ================*/
@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100,200,400);
@import url(https://fonts.googleapis.com/css?family=Lato:100,200,300,400);

html {
    scroll-behavior: smooth;
}

#spotlight, #fr55-spotlight, #fr55-garmin-coach, #fr55-other-function {
    padding-top: 100px!important;
    margin-top: -100px!important;
}

#hero>div {
    margin-top: 0;
    padding-bottom: 0px;
    min-height: 0px;
}

#hero [data-choose].active {
    display: block;
    min-height: 350px;
    padding-bottom: 38.5%;
    background-size: cover;
    background-position: center;
}

[data-choose="forerunner-45"] .hero-box {
    position: absolute;
    top: 68%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

[data-choose="forerunner-245-music"] .hero-box {
    position: absolute;
    top: 75%;
    left: 80%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#hero [data-choose="forerunner-245-music-jp-edition"].active {
    display: block;
    min-height: 0px;
    padding-bottom: 0%;
    background-color: #802827;
    overflow: hidden;
}

[data-choose="forerunner-245-music-jp-edition"] .hero-bc {
    display: block;
    min-height: 350px;
    padding-bottom: 38.5%;
    background-size: cover;
    background-position: center;
    background-color: #802827;
    z-index: 0;
}

[data-choose="forerunner-245-music-jp-edition"] .hero-box .hero-text {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 20%;
    left: 50%;
    z-index: 2;
}

[data-choose="forerunner-245-music-jp-edition"] .hero-box .hero-img {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 57%;
    left: 50%;
    z-index: 3;
}

#hero [data-choose="forerunner-645-music"] .hero-box {
    position: absolute;
    top: 50%;
    left: 75%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#hero [data-choose="forerunner-745"].active {
    display: block;
    min-height: 0px;
    padding-bottom: 0%;
    background-color: #14a7a0;
    overflow: hidden;
    position: relative;
}

#hero [data-choose="forerunner-745"] .hero-bc {
    display: block;
    min-height: 350px;
    padding-bottom: 38.5%;
    background-size: cover;
    background-position: center;
    background-color: #14a7a0;
    z-index: 0;
}

#hero [data-choose="forerunner-745"] .hero-box .hero-text {
    position: absolute;
    bottom: 0%;
    left: 0%;
    z-index: 3;
}

#hero [data-choose="forerunner-745"] .hero-box .hero-text img {
    max-width: 100%;
}

#hero [data-choose="forerunner-55"].active {
    display: block;
    min-height: 350px;
    padding-bottom: 38.5%;
    background-image: url('../images/hero-fr55.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}

#hero [data-choose="forerunner-55"] .hero-text {
    height: 80%;
    max-height: 734px;
    position: absolute;
    top: 10%;
    right: 10px;
}

#hero [data-choose="forerunner-55"] .hero-text img {
    max-width: 100%;
    max-height: 100%;
}

[data-choose="forerunner-935"] .hero-box {
    position: absolute;
    top: 50%;
    left: 70%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

[data-choose="forerunner-945"] .hero-box {
    position: absolute;
    top: 68%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

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

[data-choose="forerunner-245-music-jp-edition"] .hero-box .hero-img img {
    max-width: 85%;
}

@media (max-width: 1366px) {
    [data-choose="forerunner-245-music-jp-edition"] .hero-box .hero-img img {
        max-width: 260px;
    }
}

@media (max-width: 767px) {
    #hero [data-choose].active {
        min-height: 500px;
    }
}

@media (max-width: 600px) {
    #hero [data-choose="forerunner-745"] .hero-bc {
        min-height: 500px;
    }

}

/*dropdown*/
#pd-nav #subNavDropDown {
    background: none;
    color: #999;
    border: none;
}

#pd-nav #subNavDropDown .icon-down-open-big::before {
    color: #999;
}

#pd-nav #subNavDropDown .icon-down-open-big.active::before {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#pd-nav .dropdown-content {
    background: rgba(255, 255, 255, 0.95);
    height: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: calc(5% + 60px);
    z-index: -1;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}

#pd-nav .dropdown-content li {
    text-align: center;
    padding: 10px;
    margin: 0;
    display: block;
}

#pd-nav .dropdown-content li a {
    color: #999999;
    font-size: 14px;
}

#pd-nav .dropdown-content.active {
    top: 100px;
    opacity: 1;
    height: auto;
    overflow: visible;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
}

/*================ device修正按鈕是否顯示 ================*/
#device a.buy-now {
    display: none !important;
}

/*================ 比較表修正樣式 ================*/
#comparison {
    z-index: 100;
    position: relative;
}

#comparison .price {
    color: #666666;
    margin-top: 5px;
}

#comparison #comparison-head {
    background: rgba(255,255,255,0.98);
    position: relative;
    z-index: 1;
}

#comparison thead td {
    border: 1px transparent;
}

#comparison td.dot,
#comparison th.dot {
    color: #000000 !important;
}

#spec.container.show table {
    margin-top: 120px;
}

#spec.container.show table#comparison-head {
    margin-top: 0;
}

#comparison #spec table tbody tr:first-child,
[id*=comparison] #spec table tbody tr:first-child {
    border-top: 1px solid #ccc;
}

#comparison #spec table tbody tr,
[id*=comparison] #spec table tbody tr {
    border-bottom: 1px solid #ccc;
}

#comparison #spec table th,
#comparison #spec tfoot tr td {
    border: 1px transparent;
    background-color: transparent;
}

#comparison ul li {
    list-style: none;
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

/*pop-up*/
.pop-up-55 {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    text-align: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    display: none;
}

.pop-up-55.active {
    display: block;
}

.pop-up-55 .pop-up-wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}

.pop-up-55 .pop-up-content {
    width: 90%;
    max-width: 450px;
    background: white;
    padding-bottom: 10px;
    margin: 0 auto;
    border-radius: 10px;
    position: relative;
}

.pop-up-55 .scroll-content {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.pop-up-55 .pop-up-hero {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.pop-up-55 .close-pop-up {
    background: none;
    border: none;
    position: absolute;
    top: -20px;
    right: -10px;
    cursor: pointer;
}

.pop-up-55 .pop-up-product {
    margin: -80px auto 0 auto;
}

.pop-up-55 .pop-up-tit {
    font-size: 24px;
    color: black;
    text-align: center;
    margin-bottom: 0;
}

.pop-up-55 .pop-up-tit span {
    font-size: 12px;
    color: #333333;
    display: block;
}

.pop-up-55 .flex-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pop-up-55 .flex-box li {
    flex: calc(100% / 3);
    text-align: center;
    list-style: none;
}

.pop-up-55 .flex-box h2 {
    font-size: 16px;
    color: #666666;
    margin-bottom: 0;
}

.pop-up-55 .flex-box h3 {
    font-size: 14px;
    color: black;
    margin-bottom: 10px;
}

.pop-up-55 .flex-box .btn-black {
    background: black;
    font-size: 14px;
    color: white;
    padding: 10px 15px;
    border: 1px solid black;
}

@media (min-width: 500px) {
    .pop-up-55 .pop-up-tit span {
        font-size: 14px;
    }

    .pop-up-55 .flex-box h2 {
        font-size: 18px;
    }

    .pop-up-55 .flex-box h3 {
        font-size: 16px;
    }

    .pop-up-55 .flex-box .btn-black {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    .pop-up-55 .flex-box .btn-black:hover {
        background: white;
        color: black;
    }
}

/*================ END ================*/
/*================ jp-editon ================*/
#jp-editon {
    position: relative;
    background-color: #802827;
    overflow: hidden;
}

#jp-editon .wrapper::before {
    content: '';
    display: block;
    -webkit-transform: translateX(50%) skew(-24deg);
    -ms-transform: translateX(50%) skew(-24deg);
    transform: translateX(50%) skew(-24deg);
    background-color: #d44645;
    bottom: 0;
    position: absolute;
    top: 0;
    width: 100%;
    left: 50%;
    z-index: 1;
}

#jp-editon .wrapper .container {
    padding: 100px 0px;
    max-width: 1170px;
    text-align: center;
    z-index: 5;
}

#jp-editon .wrapper .container h2 {
    text-transform: uppercase;
    color: #ffffff;
    font-size: 2.2rem;
    margin: 0px 15px;
}

#jp-editon .wrapper .container p {
    color: #ffffff;
    margin: 0px 15px;
}

#jp-editon .wrapper .container .img-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 50px;
}

#jp-editon .wrapper .container .img-detail .detail .text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: left;
    padding: 1rem;
}

#jp-editon .wrapper .container .img-detail .detail {
    width: 33.33%;
}

#jp-editon .wrapper .container .img-detail .detail h3 {
    text-transform: uppercase;
    color: #ffffff;
    font-size: 1.4rem;
}

#jp-editon .wrapper .container .img-detail .detail p {
    color: #ffffff;
    margin: 0;
}

#jp-editon .wrapper .container .img-detail .detail>img {
    max-width: 100%;
}

@media (max-width: 1024px) {
    #jp-editon .wrapper .container .img-detail {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    #jp-editon .wrapper::before {
        content: '';
        display: none;
    }

    #jp-editon .wrapper .container {
        padding: 100px 0px;
        width: 100% !important;
        margin: 0;
        max-width: 100%;
        text-align: center;
        z-index: 5;
    }

    #jp-editon .wrapper .container .img-detail .detail {
        width: 100%;
    }
}

#spotlight [data-choose="forerunner-245-music-jp-edition"] .spotlight-group-feature {
    background-color: #ffffff;
}

#spotlight [data-choose="forerunner-245-music-jp-edition"] h3,
#spotlight [data-choose="forerunner-245-music-jp-edition"] h4,
#spotlight [data-choose="forerunner-245-music-jp-edition"] p {
    color: #000000;
}

@media (min-width: 992px) {
    #spotlight [data-choose="forerunner-245-music-jp-edition"] .spotlight-group-slide-bt.active {
        background-color: #888888;
    }

    #spotlight [data-choose="forerunner-245-music-jp-edition"] .spotlight-group-slide-bt {
        background-color: #eeeeee;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-slide-bt.active {
        background-color: white;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-slide-bt {
        background-color: #95D1D7;
    }

    #spotlight .spotlight-group-feature h2 {
        background: none;
        color: white;
        padding: 0;
    }
    
    .text-con {
        position: absolute !important;
        z-index: +1 !important;
        top: 50% !important;
        padding-right: 5% !important;
        -ms-transform: translateY(-50%) !important;
        -webkit-transform: translateY(-50%) !important;
        transform: translateY(-50%) !important;
        text-align: left !important;
    }
}

#forerunner-245-music [data-pd-type="forerunner-245-music"] span,
#forerunner-645-music [data-pd-type="forerunner-645-music"] span {
    font-size: 38px;
    font-weight: bold;
}

[data-pd-type=forerunner-45-s],
[data-pd-type="forerunner-245"],
[data-pd-type="forerunner-645"] {
    display: none;
}

#forerunner-245-music .key-主な機能-con figure hr,
#forerunner-645-music .key-主な機能-con figure hr {
    display: none;
}

.video-field {
    position: relative;
}

.fr245-video .video-bc {
    position: relative;
    min-height: 600px;
    height: auto;
    opacity: .8;
    background-position: center;
    background-size: cover;
}

.fr245-video [data-choose="forerunner-245-music-jp-edition"] .video-bc {
    position: relative;
    min-height: 600px;
    height: auto;
    opacity: .8;
    background-position: bottom;
    background-size: cover;
}

.fr245-video .video-bc:after {
    content: "";
    background: #2980B9;
    background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
    background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), color-stop(#6DD5FA), to(#2980B9));
    background: -webkit-linear-gradient(left, #FFFFFF, #6DD5FA, #2980B9);
    background: -o-linear-gradient(left, #FFFFFF, #6DD5FA, #2980B9);
    background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);
    width: 100%;
    height: 100%;
    opacity: .3;
    position: absolute;
    left: 0;
    top: 0;
}

.fr245-video [data-choose="forerunner-245-music-jp-edition"] .video-bc:after {
    content: "";
    background: #232526;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #414345, #232526);
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-gradient(linear, left top, left bottom, from(#414345), to(#232526));
    background: -webkit-linear-gradient(top, #414345, #232526);
    background: -o-linear-gradient(top, #414345, #232526);
    background: linear-gradient(to bottom, #414345, #232526);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    width: 100%;
    height: 100%;
    opacity: .3;
    position: absolute;
    left: 0;
    top: 0;
}

.video-field .video-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.video-field .video-txt h2 {
    font-size: 5rem;
    letter-spacing: 1px;
    color: #fff;
    line-height: 1.2 !important;
}

.fr945-video .video-txt h2 {
    font-size: 4rem;
    text-align: center;
    letter-spacing: 5px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2 !important;
}

.fr945-video .video-bc {
    position: relative;
    min-height: 600px;
    height: auto;
    opacity: 1;
    background: center center no-repeat;
    background-position: 100% 0;
    background-size: cover;
}

.video-field .play-video-button {
    width: 70px;
    height: 70px;
}

.video-field .play-video-button circle {
    -webkit-transition: .25s all ease-in-out;
    -o-transition: .25s all ease-in-out;
    transition: .25s all ease-in-out;
    fill: transparent;
}

.video-field .play-video-button:hover circle {
    fill: #fff;
}

.video-field .play-video-button:hover path {
    fill: #000;
}

@media (min-width: 992px) {
    #app-connect .container {
        min-height: 800px !important;
    }

    .connect-laptop-1 {
        position: absolute;
        right: 0;
        width: 60%;
        min-width: 950px;
        max-width: 600px;
    }
}

#app-connect small {
    color: #999;
}

/*#device .pd-photo-con nav.pd-color-con>* {
    line-height: 0px !important
}*/
.promotion {
    background-image: url("../images/pro_bc.png");
    background-size: cover;
}

.promotion .inner {
    text-align: center;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 10px;
    max-width: 1440px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 2;
}

.promotion .inner .pro-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    padding-bottom: 100px;
}

.promotion .inner .img-wrapper {
    position: relative;
    padding-bottom: 20px;
}

.promotion .inner .img-wrapper .top-img {
    position: absolute;
    top: 45%;
    left: 18%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 5;
    max-width: 100%;
}

.pro-wrapper .cta-highlights__item__image {
    width: 400px;
    min-width: 400px;
    padding-bottom: 400px;
    background-color: #eeeeee;
}

.pro-wrapper .cta-highlights__item__image:before {
    position: absolute;
    left: 0;
    height: 100%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 40px #eeeeee;
    box-shadow: inset 0 0 40px #eeeeee;
}

.promotion h2 {
    font-size: 4rem;
    padding-top: 50px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
}

.promotion h3 {
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
}

.promotion p {
    color: #ffffff;
}

/*945促銷*/
.promotion-945 {
    background: #000000;
    background-size: cover;
}

.promotion-945 .inner {
    text-align: center;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 10px;
    max-width: 90%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 2;
}

.promotion-945 .inner .pro-wrapper {
    -webkit-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
    padding: 2vw;
}

.promotion-945 .inner .img-wrapper {
    position: relative;
    padding-bottom: 20px;
}

.promotion-945 .inner .img-wrapper .top-img {
    position: absolute;
    top: 45%;
    left: 12%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 5;
    max-width: 100%;
}

.pro-wrapper .cta-highlights__item__image {
    width: 18vw;
    min-width: 18vw;
    padding-bottom: 18vw;
    background-color: #eeeeee;
}

.pro-wrapper .cta-highlights__item__image:before {
    position: absolute;
    left: 0;
    height: 100%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 40px #eeeeee;
    box-shadow: inset 0 0 40px #eeeeee;
}

.promotion-945 h2 {
    font-size: 4rem;
    padding-top: 50px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
}

.promotion-945 h3 {
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
}

.promotion-945 p {
    color: #ffffff;
    min-height: 60px;
}

@media (max-width: 1600px) {
    .promotion-945 .inner {
        max-width: 1440px;
    }
}

@media (max-width: 1024px) {
    .promotion-945 .inner .img-wrapper .top-img {
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .promotion-945 .inner .img-wrapper .top-img {
        max-width: 70%;
    }

    .promotion-945 h3 {
        min-height: 80px;
    }

    .promotion-945 .inner .img-wrapper .top-img {
        left: 20%;
    }

    .fr945-video .video-bc {
        min-height: 600px !important;
    }
}

/*945促銷*/
#athletes-new {
    position: relative;
    background: #333;
}

#athletes-new .athletes-hero {
    position: relative;
    min-height: 600px;
    opacity: .3;
    background: center center no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

@media (max-width: 767px) {
    #athletes-new .athletes-hero {
        height: auto;
        opacity: .4;
        background-position: 90% 0;
    }

    .fr945-video .video-bc {
        background-position: 50% 0;
    }

    .fr945-video .video-txt h2 {
        font-size: 3rem;
    }

    .fr945-video .video-bc {
        min-height: 300px;
    }

    .promotion .inner .img-wrapper .top-img {
        position: absolute;
        top: 45%;
        left: 25%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        z-index: 5;
        max-width: 80%;
    }

    .pro-wrapper .cta-highlights__item__image {
        width: 250px;
        min-width: 250px;
        padding-bottom: 250px;
    }
}

#athletes-new .athlete-quote-container {
    position: absolute;
    top: 10%;
    left: 10%;
}

#athletes-new .athlete-quote-container__heading {
    font-size: 3rem;
    letter-spacing: 1px;
    color: #fff;
}

#athletes-new .athlete-quote-container__copy {
    font-size: 2rem;
    width: 100%;
    margin-top: 2rem;
    letter-spacing: 1px;
    color: #fff;
}

#athletes-new .play-video-button {
    position: absolute;
    z-index: +1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
}

#athletes-new .play-video-button circle {
    -webkit-transition: .25s all ease-in-out;
    -o-transition: .25s all ease-in-out;
    transition: .25s all ease-in-out;
    fill: transparent;
}

#athletes-new .play-video-button:hover {
    cursor: pointer;
}

#athletes-new .play-video-button:hover circle {
    fill: #fff;
}

#athletes-new .play-video-button:hover path {
    fill: #000;
}

@media (min-width: 992px) {
    #athletes-new .play-video-button {
        top: 50%;
        margin: 0 auto;
    }
}

#athletes-new #ytplayer {
    position: fixed;
    z-index: +201;
    right: 0;
    bottom: 0;
    display: none;
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
}

#athletes-new #close-video {
    position: fixed;
    z-index: +202;
    top: 25px;
    right: 25px;
    display: none;
    width: 25px;
    height: 25px;
}

#athletes-new #close-video path {
    -webkit-transition: .25s all ease-in-out;
    -o-transition: .25s all ease-in-out;
    transition: .25s all ease-in-out;
    opacity: 1;
}

#athletes-new #close-video:hover {
    cursor: pointer;
}

#athletes-new #close-video:hover path {
    opacity: .5;
}

@media (max-width: 767px) {
    #athletes-new .athlete-quote-container__heading {
        font-size: 2.2rem;
        letter-spacing: 1px;
        color: #fff;
    }

    #athletes-new .athlete-quote-container {
        position: absolute;
        top: 10%;
        left: 10%;
        right: 10%;
    }
}

#running-dynamics {
    color: #fff;
    background: #162430;
}

#running-dynamics .container {
    max-width: 100%;
}

#running-dynamics a:active,
#running-dynamics a:link,
#running-dynamics a:visited {
    text-decoration: underline;
    color: #fff;
}

#running-dynamics a:active:hover,
#running-dynamics a:link:hover,
#running-dynamics a:visited:hover {
    color: #6dcff6;
}

.cta-highlights {
    padding: 2em 0;
}

.cta-highlights__item {
    padding: 1em;
}

.cta-highlights__item a,
.cta-highlights__item a:link,
.cta-highlights__item a:visited,
.cta-highlights__item__heading {
    color: #fff;
}

.cta-highlights__item a:hover,
.cta-highlights__item a:link:hover,
.cta-highlights__item a:visited:hover {
    text-decoration: none;
}

.cta-highlights__item__more {
    font-weight: 400;
}

.cta-highlights__item__more:hover svg {
    margin-left: .75em;
}

.cta-highlights__item__more svg {
    height: .75em;
    margin-left: 0;
    -webkit-transition: margin-left .3s;
    -o-transition: margin-left .3s;
    transition: margin-left .3s;
    vertical-align: middle;
    fill: #fff;
}

.cta-highlights__item__image {
    position: relative;
    overflow: hidden;
    width: 50%;
    margin: 0 auto 2em;
    padding-bottom: 50%;
    border-radius: 50%;
    background-color: #6dcff6;
}

#running-dynamics .container {
    padding-left: 0px;
    padding-right: 0px;
}

@media (min-width: 480px) and (max-width: 991px) {
    .cta-highlights__item__image {
        width: 35%;
        padding-bottom: 35%;
    }
}

.cta-highlights__item__image:before,
.hero-angled__info:before {
    top: 0;
    display: block;
    width: 100%;
    content: '';
}

.cta-highlights__item__image:before {
    position: absolute;
    left: 0;
    height: 100%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0 0 40px rgba(0, 105, 199, 0.5);
    box-shadow: inset 0 0 40px rgba(0, 105, 199, 0.5);
}

.cta-highlights__item__image img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
}

#running-dynamics p {
    color: #ffffff;
}

.hero-angled {
    background-repeat: no-repeat;
    background-position: 100% 0;
    background-size: cover;
}

.hero-angled h2 {
    font-size: 2em;
    font-weight: 300;
    margin-bottom: 1em;
    color: #fff;
}

.hero-angled__info {
    position: relative;
    z-index: 1;
    padding: 2em 1em;
    color: #fff;
}

.hero-angled__info:before {
    position: absolute;
    z-index: -1;
    right: 0;
    height: 100%;
    opacity: .8;
    background: #0069c7;
}

@media (min-width: 992px) {
    .hero-angled__info {
        width: 60%;
        padding: 3em 0;
        background-color: #0069c7;
    }

    .hero-angled__info:before {
        top: 0;
        right: -30%;
        width: 300%;
        height: 100%;
        -webkit-transform: skew(20deg);
        -ms-transform: skew(20deg);
        transform: skew(20deg);
        opacity: 1;
    }
}

/*Forerunner 745 動畫*/
#fr745-device {
    overflow: hidden;
    position: relative;
}

#fr745-device .bc {
    height: 100vh;
    background-size: cover;
    background-color: #4aaba4;
}

#fr745-device .bc .txt-inner {
    position: absolute;
    top: 0%;
    left: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

#fr745-device .bc .txt-inner .txt-body {
    -webkit-transform: translate3d(-51.2%, 0, 0);
    transform: translate3d(-51.2%, 0, 0);
    -webkit-animation-name: mv-txt-move;
    animation-name: mv-txt-move;
    position: relative;
    display: block;
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

#fr745-device .bc .txt-inner .txt-body p {
    font-size: 10.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -.025em;
    opacity: .03;
    line-height: 1 !important;
    z-index: 5;
    margin: 0 50px;
    text-transform: uppercase;
}

#fr745-device .bc .txt-inner .txt-body-border {
    -webkit-transform: translate3d(51.2%, 0, 0);
    transform: translate3d(51.2%, 0, 0);
    -webkit-animation-name: mv-txt-move-1;
    animation-name: mv-txt-move-1;
    position: relative;
    display: block;
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

#fr745-device .bc .txt-inner .txt-body-border p {
    font-size: 10rem;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    font-style: italic;
    opacity: .1;
    line-height: 1 !important;
    z-index: 5;
    margin: 0 50px;
    text-transform: uppercase;
}

#fr745-device .product {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
    z-index: 100;
}

#fr745-device .product .product-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

#fr745-device .product .product-inner a figure {
    text-align: center;
}

#fr745-device .product .product-inner a figure img {
    height: 315px;
    -webkit-overflow-scrolling: touch;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all ease-in 0.2s;
    -o-transition: all ease-in 0.2s;
    transition: all ease-in 0.2s;
}

#fr745-device .product .product-inner a figure img:hover {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

#fr745-device .product .product-inner a figure h3 {
    font-size: 2rem;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.2 !important;
}

#fr745-device .product .product-inner a figure p {
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
    line-height: 1.2 !important;
    color: #ffffff;
    text-transform: uppercase;
}

#fr745-device .single-product {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
    z-index: 5;
}

#fr745-device .single-product .product-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 1170px;
    margin: 0 auto;
}

#fr745-device .single-product .product-inner .text-wrapper {
    -webkit-box-flex: 55%;
    -ms-flex: 55%;
    flex: 55%;
}

#fr745-device .single-product .product-inner .text-wrapper h3 {
    font-size: 5rem;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.2 !important;
}

#fr745-device .single-product .product-inner .text-wrapper h5 {
    font-size: 2.4rem;
    margin: 0;
    padding: 0;
    line-height: 1.2 !important;
    color: #ffffff;
    text-transform: uppercase;
    padding-bottom: 1vw;
}

#fr745-device .single-product .product-inner .product-image {
    -webkit-box-flex: 45%;
    -ms-flex: 45%;
    flex: 45%;
}

#fr745-device .single-product .product-inner .product-image img {
    max-width: 100%;
}

#fr745-warranty {
    background: #327671;
    padding-top: 50px;
}

#fr745-warranty .wrapper .warranty {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1170px;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#fr745-warranty .wrapper .warranty img {
    width: 250px;
    height: 250px;
}

#fr745-warranty .wrapper .warranty h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1170px;
    background-color: #4aaba4;
    color: #ffffff;
    padding: 10px;
    margin-top: 20px;
    font-size: 1.6rem;
    -webkit-transform: skew(-15deg);
    -ms-transform: skew(-15deg);
    transform: skew(-15deg);
    line-height: 1.6 !important;
}

#fr745-features {
    background: #327671;
    padding: 100px 0px;
}

#fr55-features {
    background: white;
    text-align: center;
    color: black;
}

#fr55-features .wrapper {
    width: 90%;
    max-width: 1170px;
    margin: 0 auto;
}

#fr55-features .wrapper h2 {
    color: black;
    font-weight: bold;
}

#fr745-features .wrapper figure,
#fr55-features .wrapper figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1170px;
    text-align: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
}

#fr55-features .wrapper figure {
    margin-top: 60px;
}

#fr745-features .wrapper figure figcaption,
#fr55-features .wrapper figure figcaption {
    position: relative;
    max-width: 16.666%;
    max-width: calc(100%/6);
    -webkit-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-flex-basis: calc(100%/6);
    -ms-flex-preferred-size: calc(100%/6);
    flex-basis: calc(100%/6);
}

#fr745-features .wrapper figure figcaption img,
#fr55-features .wrapper figure figcaption img {
    width: inherit;
    height: 60px;
}

#fr745-features .wrapper figure figcaption h5 {
    color: #ffffff;
}

#fr745-features .wrapper figure figcaption h5,
#fr55-features .wrapper figure figcaption h3 {
    text-transform: uppercase;
    font-size: 1rem;
    margin: 10px 0;
}

#fr745-features .wrapper p {
    color: #ffffff;
}

#fr745-features .wrapper p,
#fr55-features .wrapper p {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1170px;
    text-align: center;
    font-size: 1.2rem;
}

#fr745-features .wrapper p {
    margin-top: 50px;
}

#fr745-features .wrapper h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1170px;
    background-color: #4aaba4;
    color: #ffffff;
    padding: 10px;
    margin-top: 50px;
    font-size: 2rem;
    -webkit-transform: skew(-15deg);
    -ms-transform: skew(-15deg);
    transform: skew(-15deg);
    line-height: 1.6 !important;
}

#spotlight [data-choose="forerunner-55"] .spotlight-group-feature {
    background-color: #3FB8C2;
}

#spotlight [data-choose="forerunner-55"] .spotlight-group-slide .spotlight-group-content small {
    color: rgba(255, 255, 255, 0.60);
}

#spotlight [data-choose="forerunner-55"] .spotlight-group-slide .spotlight-group-content small a {
    color: white;
    text-decoration: underline;
}

#fr745-video,
#fr55-video {
    width: 100vw;
    height: 100vh;
    background: #000000;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 7;
}

#fr55-video {
    height: auto;
    background: none;
}

#fr745-video .video,
#fr55-video .video {
    position: relative;
}

#fr55-video .video .video-bc {
    display: grid;
}

#fr745-video .video .video-bc video,
#fr55-video .video .video-bc video {
    width: 100%;
}

#fr745-video .video .video-bc:after,
#fr55-video .video .video-bc:after {
    content: '';
    background: -webkit-gradient(linear, right top, left top, from(#232526), to(#414345));
    background: -webkit-linear-gradient(right, #232526, #414345);
    background: -o-linear-gradient(right, #232526, #414345);
    background: linear-gradient(to left, #232526, #414345);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .3;
}

#fr745-video .video .slogan,
#fr55-video .video .slogan {
    color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 90%;
    z-index: 100;
    text-align: center;
}

#fr745-video .video .slogan h2,
#fr55-video .video .slogan h2 {
    color: #ffffff;
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 1 !important;
}

#fr745-video .video .slogan .play-video-button,
#fr55-video .video .slogan .play-video-button {
    width: 80px;
    height: 80px;
    vertical-align: middle;
    cursor: pointer;
}

#fr745-video .video .slogan .play-video-button:hover circle,
#fr55-video .video .slogan .play-video-button:hover circle {
    fill: #fff;
}

#fr745-video .video .slogan .play-video-button:hover path,
#fr55-video .video .slogan .play-video-button:hover path {
    fill: #000;
}

#fr745-spotlight,
#fr55-spotlight {
    position: relative;
    background-color: #000000;
    z-index: 6;
}

#fr745-spotlight #slideContainer .slide .slide-wrapper,
#fr55-spotlight #slideContainer .slide .slide-wrapper {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

#fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left,
#fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left {
    max-width: 50%;
    z-index: 1;
    position: relative;
    padding: 4vw;
}

#fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left h2,
#fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left h2 {
    font-size: 3rem;
    color: #ffffff;
    line-height: 1.2 !important;
}

#fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left p,
#fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left p,
#fr55-garmin-coach p {
    font-size: 1.2rem;
    color: #ffffff;
}

#fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left img,
#fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left img {
    max-width: 80%;
}

#fr745-spotlight #slideContainer .slide .slide-wrapper .slide-right,
#fr55-spotlight #slideContainer .slide .slide-wrapper .slide-right {
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 50%;
    height: 100vh;
    top: 0%;
    right: 0;
    bottom: 0;
    opacity: 0;
    display: none;
}

#fr745-spotlight #slideContainer .slide .slide-wrapper .slide-right img,
#fr55-spotlight #slideContainer .slide .slide-wrapper .slide-right img {
    max-width: 100%;
    position: absolute;
    right: 4vw;
    top: 10vw;
}

#fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left, #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left .slide-txt, #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-right {
    pointer-events: none;
} 

#slidein2 {
    background: #8bbae4;
    position: relative;
    z-index: 8;
}

#slidein2.on {
    position: fixed;
    left: 0;
    right: 0;
    top: 67px;
    padding-top: 50px;
}

.disable-scroll {
    height: 100%;
    overflow: hidden;
}

.fr55-health-content {
    width: 90%;
    max-width: 1170px;
    text-align: left;
    padding: 0;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.fr55-health-content .fr55-health-txt.content-2 {
    height: 100%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: calc(50% - 200px);
    left: 0;
}

.fr55-health-content .fr55-health-txt {
    width: 60%;
    background: #8bbae4;
    padding-top: 40px;
    margin: auto;
    list-style: none;
}

.fr55-health-content .fr55-health-img {
    width: 40%;
    padding-bottom: 45%;
    list-style: none;
    overflow: hidden;
    position: relative;
}

.fr55-health-content .fr55-health-img img {
    width: 100%;
    transform: scale(1.2);
    transition: all 0.5s ease-in-out;
    margin-left: 10px;
    position: absolute;
    bottom: 20px;
    right: 0;
    left: 0;
}

.fr55-health-content .fr55-health-txt h2, .fr55-health-content .fr55-health-txt p {
    color: white;
}

#opacity.on {
    opacity: 1;
    transition: all 0.5s ease-in-out; 
}

#animate.on img{
    transform: scale(1);
    transition: all 0.5s ease-in-out;
    bottom: 0;
}

.zero-to-hero {
    background-image: url(../images/hero-fr55-b.jpg);
    background-position: center;
    background-size: cover;
    padding: 50px 0 150px 0;
    position: relative;
    z-index: 2;
}

.zero-to-hero p {
    max-width: 1170px;
    text-align: left;
    margin-left: 20px;
}

.zero-to-hero p img {
    max-width: 200px;
}

#fr55-device, #fr55-features, #fr55-garmin-coach, #fr55-other-function{
    padding-top: 60px;
    padding-bottom: 60px;
}

#fr55-other-function .fr55-large-txt {
    padding-top: 60px;
}

#fr55-device {
    background: linear-gradient(110deg, #a8d8dd 50%, #95D1D7 50%);
    position: relative;
    z-index: 9;
}

#fr55-device::before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(-165deg, rgba(255, 255, 255, 0) 50%, #3FB8C2 50%);
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
}

#fr55-device::after {
    content: 'FORERUNNER';
    color: rgba(255, 255, 255, 0.15);
    font-family: "Oswald", "Roboto", "Noto Sans TC", sans-serif;
    font-size: 19.5vw;
    display: block;
    position: absolute;
    top: 35%;
    left: 0;
}

#fr55-device .series-name {
    text-align: center;
    position: relative;
    z-index: 2;
}

#fr55-device .series-name .fr55-large-txt {
    font-family: "Oswald", "Roboto", "Noto Sans TC", sans-serif;
    margin-bottom: 0;
}

#fr55-device .series-name .video-btn {
    float: none;
}

#fr55-device .series-name .video-btn a{
    color: white;
}

#fr55-device .product-details {
    max-width: 1600px;
    text-align: center;
    margin: -60px auto 0;
    position: relative;
    z-index: 1;
}

#fr55-device .product-details a {
    width: calc(25% - 3px);
    max-width: 396px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

#fr55-device .product-details img {
    width: 100%;
}

#fr55-device .product-details p {
    color: white;
    margin-top: -15px;
}

#fr55-device .product-details p.fr55-super-small-txt {
    color: rgba(255, 255, 255, 0.6);
}

#fr55-device .product-details .product-series {
    font-size: 28px;
    font-family: "Oswald", "Roboto", "Noto Sans TC", sans-serif;
    margin-top: -60px;
}

#fr55-device .product-details button {
    background: none;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid white;
    padding: .5em 1em;
}

#fr55-garmin-coach {
    background: linear-gradient(110deg, #95D1D7 65%, #3FB8C2 35%);
    text-align: center;
    padding-left: 5%;
    padding-right: 5%;
    position: relative;
    z-index: 7;
}

#fr55-garmin-coach p {
    max-width: 1170px;
    color: white;
    margin: 0 auto;
}

#fr55-garmin-coach .fr55-small-txt {
    text-align: left;
}

#fr55-garmin-coach p img {
    width: 100%;
    max-width: 650px;
    margin-top: 60px;
}

#fr55-function {
    position: relative;
}

#fr55-function h2 {
    color: white;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: calc(50% - 60px);
    left: 0;
    right: 0;
    z-index: 1;
}

#fr55-function h2 span {
    display: block;
}

#fr55-function .fr55-function-images {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#fr55-function .fr55-function-images::after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#fr55-function .fr55-function-images div {
    width: 50%
}

#fr55-function .fr55-function-images img {
    width: 100%;
}

#fr55-other-function {
    width: 90%;
    text-align: center;
    margin: 0 auto;
}

#fr55-other-function h2 {
    color: black;
    font-weight: bold;
}

#fr55-other-function .data_buttons {
    max-width: 1170px;
    text-align: center;
    margin: 20px auto;
}

#fr55-other-function .data_buttons .icon_btn {
    min-width: 105px;
    margin: 20px 15px;
    display: inline-block;
}

#fr55-other-function .data_buttons .icon_btn img {
    height: 60px;
}

#fr55-other-function .data_buttons .icon_btn h3 {
    font-size: 1em;
    margin-top: 10px;
}

#fr55-other-function .icon_btn_other {
    margin: .2rem 0;
    padding: .8em 2em;
    font-size: 15px;
    line-height: 1em;
    letter-spacing: .1em;
    border-radius: 0;
    color: black;
    background-color: none;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    position: relative;
    display: inline-block;
}

#fr55-promotion {
    background: #f5f5f5;
    padding: 60px 0;
}

#fr55-promotion h2, #fr55-promotion .promotion-content {
    width: 90%;
    max-width: 900px;
    text-align: center;
    margin:  0 auto;
}

#fr55-promotion .fr55-large-txt {
    color: black;
}

#fr55-promotion .promotion-content img {
    max-width: 250px;
}

#fr55-promotion .promotion-content p {
    text-align: left;
}

#fr55-promotion .promotion-content p a {
    color: #6dcff6;
}

.fr55-large-txt {
    font-size: 3rem!important;
}

.fr55-small-txt {
    font-size: 1.2rem!important;
}

.fr55-super-small-txt {
    font-size: 1rem!important;
}

.fr55-white-txt {
    color: white;
}

.fr55-black-lighter-txt {
    color: rgba(0, 0, 0, 0.6);
}

.fr55-black-bg {
    background: black;
}

#spotlight {
    position: relative;
    z-index: 7;
}

.spotlight-group.active {
    height: auto!important;
}

#spotlight .spotlight-group-photo {
    background-position: left;
}

#spotlight .col-width .spotlight-group-photo {
    margin: 60px 0 0 20px;
}

#footnotes {
    text-align: left!important;
}

/*尋找門市*/
.find-a-store {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.find-a-store li {
    list-style: none;
}

.find-a-store .find-a-store-txt {
    position: absolute;
    top: calc(50% - 67px);
    left: 0;
    right: 0;
    z-index: 1;
}

.find-a-store .find-a-store-img {
    position: relative;
}

.find-a-store .find-a-store-img::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.find-a-store .find-a-store-img img {
    width: 100%;
    max-width: 800px;
}

@media (max-width: 599px) {
    .fr55-health-content {
        display: block;
    }

    .fr55-health-content .fr55-health-txt {
        width: 90%;
    }

    .fr55-health-content .fr55-health-txt.content-2 {
        top: 0;
        left: 5%;
    }

    .fr55-health-content .fr55-health-img {
        width: 70%;
        margin: auto;
        padding-bottom: 85%;
    }

    #animate.on img {
        margin-top: 40px;
    }

}
@media (max-width: 690px) {
    #fr55-device h2 {
        display: block;
    }

    #fr55-other-function .data_buttons a {
        width: calc(50% - 23px);
    }
}

@media (max-width: 767px) {
    .fr55-large-txt {
        font-size: 2rem!important;
    }

    #fr55-device::after {
        top: 60%;
    }

    #fr55-device .product-details a {
        width: calc(50% - 2px);
        margin-bottom: 0;
    }

    #fr55-device .product-details .product-series {
        font-size: 21px;
        margin-top: -30px;
    }

    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-right {
        background-position: top center;
    }

}

@media (min-width: 768px) {
    #running-dynamics .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .cta-highlights__item__image {
        width: 70%;
        padding-bottom: 70%;
    }

    #athletes-new .athletes-hero {
        height: auto;
        opacity: .8;
    }
    
    .cta-highlights {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 3em 0;
    }
    
    .cta-highlights__item {
        padding: 0 30px;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }
    
    .hero-angled {
        background-position: top right;
        background-size: auto 100%;
    }
    
    .hero-angled__info {
        width: 50%;
        padding: 3em 1em;
    }

    .hero-angled__info:before {
        top: 0;
        right: -30%;
        width: 300%;
        height: 100%;
        -webkit-transform: skew(20deg);
        -ms-transform: skew(20deg);
        transform: skew(20deg);
        opacity: 1;
    }
    
    /*尋找門市*/
    .find-a-store {
        background: black;
        text-align: center;
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .find-a-store .find-a-store-txt {
        width: 580px;
        text-align: left;
        position: relative;
    }

    #hero [data-choose="forerunner-55"] .hero-text {
        right: 0;
        left: 60vw;
    }

    #hero .title {
        position: absolute;
        top: 50%;
        left: 25%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #hero .title img {
        width: 100%;
    }

    .zero-to-hero p {
        margin-left: 20vw;
    }

    .fr55-health-content .fr55-health-txt .fr55-small-txt {
        max-width: 90%;
    }
}

@media (min-width: 1280px) {
    #hero .title {
        position: absolute;
        top: 50%;
        left: 20%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #hero .title img {
        width: 150%;
    }
}

@media (min-width: 992px) {
    #fr55-device, #fr55-features, #fr55-garmin-coach, #fr55-other-function{
        padding-top: 120px;
        padding-bottom: 120px;
    }

    #fr55-other-function .fr55-large-txt {
        padding-top: 120px;
    }

    #fr55-device .series-name .video-btn a:hover {
        color: black;
    }

    #fr55-device .product-details a:hover figure img {
        transform: scale(1.05);
        transition: transform 300ms ease-in-out;
    }

    #fr55-device .product-details a:hover figure button {
        background: white;
        color: black;
    }

    #fr55-function h2 {
        top: calc(50% - 75px);
    }

    #fr55-other-function .icon_btn_other:hover {
        background-color: black;
        color: white;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-photo, #spotlight [data-choose="forerunner-55"] .spotlight-group-feature {
        min-height: 750px!important;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-photo.photo-1 {
        background-image: url('../images/feature-spotlight-forerunner-55-1.png')!important;
        background-position: right;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-photo.photo-2 {
        background-image: url('../images/feature-spotlight-forerunner-55-2.png')!important;
        background-position: right;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-photo.photo-3 {
        background-image: url('../images/feature-spotlight-forerunner-55-3.png')!important;
        background-position: right;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-photo.photo-4 {
        background-image: url('../images/feature-spotlight-forerunner-55-4.png')!important;
        background-position: right;
    }

    #spotlight [data-choose="forerunner-55"] .spotlight-group-photo.photo-5 {
        background-image: url('../images/feature-spotlight-forerunner-55-5.png')!important;
        background-position: right;
    }
    
    #fr55-promotion {
        padding: 120px 0;
    }

    #fr55-promotion .promotion-content {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #fr55-promotion .promotion-content img {
        margin-right: 40px;
    }
}

@media (min-width: 1024px) {
    #pd-nav .dropdown-content.active {
        top: 110px;
    }
}

@media (min-width: 1170px) {
    .fr55-health-content.content-2 {
        left: calc(50% - 585px);
    }

    #fr745-device .product .product-inner a figure img {
        height: 315px;
    }

    #pd-nav .dropdown-content {
        left: calc(50% - 585px + 80px);
    }

    .zero-to-hero {
        padding: 150px 0 200px 0;
    }

    .zero-to-hero p {
        margin-left: 25%;
    }

    .zero-to-hero p img {
        max-width: 300px;
    }
}

@media (min-width: 1400px) {
    #fr745-device .product .product-inner a figure img {
        height: 400px;
    }
}

@media (min-width: 1920px) {
    #hero [data-choose="forerunner-55"] .hero-text {
        left: auto;
        right: calc(50% - 585px);
    }
}

@media (max-width: 1200px) {
    #fr745-video .mask-svg {
        display: none;
    }

    #fr745-device .single-product .product-inner {
        width: 90%;
    }

    .fr55-small-txt {
        font-size: 1rem!important;
    }

    .fr55-super-small-txt {
        font-size: 0.8rem!important;
    }
}

@media (max-width: 1024px) {
    #fr745-device .product .product-inner a figure img {
        height: 315px;
    }

    #fr745-device .product .product-inner {
        width: 100%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    #fr745-device .product .product-inner a {
        min-width: 280px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
    }

    #fr745-features .wrapper p,
    #fr55-features .wrapper p {
        max-width: 90%;
    }

    #fr745-warranty .wrapper .warranty h3 {
        max-width: 90%;
        font-size: 1.4rem;
        -webkit-transform: skew(0deg);
        -ms-transform: skew(0deg);
        transform: skew(0deg);
    }

    #fr745-device .single-product .product-inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    #fr745-device .single-product .product-inner .text-wrapper {
        text-align: center;
    }

    #fr745-device .single-product .product-inner .product-image img {
        height: 315px;
    }

    #fr745-device .single-product .product-inner .text-wrapper h3 {
        font-size: 2.6rem;
    }

    #fr745-device .single-product .product-inner .text-wrapper h5 {
        font-size: 2rem;
        padding-bottom: 5vw;
    }

    #fr745-spotlight #slideContainer .slide,
    #fr55-spotlight #slideContainer .slide {
        position: relative;
        background: transparent;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper,
    #fr55-spotlight #slideContainer .slide .slide-wrapper {
        height: 100vh;
        display: block;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left {
        padding: 5vw 0;
        position: fixed;
        width: 100%;
        max-width: inherit;
        left: 0%;
        top: 35vw;
        opacity: 0;
        text-align: center;
    }

    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left {
        padding: 10px;
        position: fixed;
        width: 100%;
        max-width: inherit;
        left: 0%;
        top: 101px;
        opacity: 0;
        text-align: center;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left h2,
    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left h2 {
        font-size: 2.2rem;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left .slide-txt,
    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left .slide-txt {
        padding: 0vw 5vw;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left img {
        display: none;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-right,
    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-right {
        height: 35vh;
        top: auto;
        right: 0px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        bottom: 0vw;
        width: 100%;
        position: fixed;
    }

    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-right {
        height: 35vh;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-right img,
    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-right img {
        right: 10vw;
        z-index: 1;
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    #fr745-features .wrapper figure figcaption,
    #fr55-features .wrapper figure figcaption {
        max-width: calc(100%/2);
        -ms-flex-preferred-size: calc(100%/2);
        flex-basis: calc(100%/2);
        margin: 10px 0;
        padding: 0 10px;
    }

    #fr745-video {
        z-index: 1;
    }

    #fr745-video .video .video-bc video {
        width: initial;
        height: 60vh;
    }

    #fr745-video .video .slogan h2 {
        font-size: 3rem;
    }
}

@media (max-width: 375px) {

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left h2,
    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left h2 {
        font-size: 1.8rem;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-right {
        height: 32vh;
    }

    #fr745-spotlight #slideContainer .slide .slide-wrapper .slide-left p,
    #fr55-spotlight #slideContainer .slide .slide-wrapper .slide-left p {
        font-size: 0.9rem;
    }
}

/*通用區塊*/
#connect-iq, #garmin-connect {
    background: #1d1d1d;
    position: relative;
    z-index: 7;
}

#connect-iq {
    background: #3e3e3e;
    padding-bottom: 60px;
}

#garmin-connect {
    padding: 60px 0;
}

#connect-iq .wrapper, #garmin-connect .wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

#connect-iq .wrapper .connect-iq-image, #garmin-connect .wrapper .connect-iq-image {
    background-size: cover;
    background-position: left;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

#connect-iq .wrapper .connect-iq-image img, #garmin-connect .wrapper .connect-iq-image img {
    display: block;
    width: 100%;
}

#connect-iq .wrapper .txt, #garmin-connect .wrapper .txt {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 42vw;
    flex: 1 0 42vw;
    position: relative;
}

#connect-iq .wrapper .txt .txt-inner, #garmin-connect .wrapper .txt .txt-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#connect-iq .wrapper .txt .txt-inner h2, #garmin-connect .wrapper .txt .txt-inner h2 {
    color: #ffffff;
    font-size: 3rem;
}

#connect-iq .wrapper .txt .txt-inner p, #garmin-connect .wrapper .txt .txt-inner p {
    color: #ffffff;
    font-size: 1.2rem;
}

#garmin-coach {
    position: relative;
    z-index: 7;
}

#garmin-coach .wrapper .garmin-coach-image {
    background-size: cover;
    background-position: center;
    min-height: 700px;
    height: 700px;
}

#garmin-coach .wrapper .garmin-coach-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .3;
    background: -webkit-gradient(linear, right top, left top, from(#232526), to(#414345));
    background: -webkit-linear-gradient(right, #232526, #414345);
    background: -o-linear-gradient(right, #232526, #414345);
    background: linear-gradient(to left, #232526, #414345);
}

#garmin-coach .wrapper .txt-inner {
    position: absolute;
    top: 50%;
    left: 75%;
    width: 45vw;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#garmin-coach .wrapper .txt-inner h2 {
    color: #ffffff;
    font-size: 3rem;
    line-height: 1.2 !important;
}

#garmin-coach .wrapper .txt-inner p {
    color: #ffffff;
    font-size: 1.2rem;
}

/*#garmin-connect {
    background: #1d1d1d;
    position: relative;
    z-index: 7;
}

#garmin-connect .wrapper .inner {
    max-width: 1170px;
    width: 1170px;
    margin: 0 auto;
    padding: 100px 0px;
    text-align: center;
}

#garmin-connect .wrapper .inner h2 {
    color: #ffffff;
    font-size: 3rem;
    line-height: 1.2 !important;
}

#garmin-connect .wrapper .inner p {
    color: #ffffff;
    font-size: 1.2rem;
}

#garmin-connect .wrapper .inner img {
    max-width: 100%;
}*/

#g-running-dynamics {
    background-color: #f5f5f5;
    padding: 60px 0;
    display: none;
}

#g-running-dynamics>img {
    display: block;
    margin-bottom: 4rem;
    width: 100%;
}

#g-running-dynamics .wrapper .inner {
    margin: 0 auto;
    max-width: 1170px;
    text-align: center;
}

#g-running-dynamics .wrapper .inner h2 {
    font-size: 2rem;
    line-height: 1.2 !important;
    color: #000000;
}

#g-running-dynamics .wrapper .inner p {
    margin: 0 auto;
    padding: 0 1rem;
    color: #000000;
}

#g-running-dynamics .wrapper .inner .g__dynamics__trio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0 1rem;
    max-width: 1170px;
    text-align: left;
}

#g-running-dynamics .wrapper .inner .g__dynamics__trio>div {
    padding: 0 2rem;
    width: 33.33%;
}

#g-running-dynamics .wrapper .inner .g__dynamics__trio>div img {
    display: block;
    width: 100%;
}

#g-running-dynamics .wrapper .inner .g__dynamics__trio>div h3 {
    font-size: 20px;
    line-height: 20px;
}

#g-running-dynamics .wrapper .inner .g__dynamics__trio>div p {
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 1280px) {
    #connect-iq .wrapper, #garmin-connect .wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #connect-iq .wrapper .txt, #garmin-connect .wrapper .txt {
        text-align: center;
    }

    #garmin-coach .wrapper .txt-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90%;
        text-align: center;
    }

    #garmin-connect .wrapper .inner {
        max-width: 90%;
        width: 90%;
        margin: 0 auto;
        padding: 100px 0px;
        text-align: center;
    }

    #g-running-dynamics .wrapper .inner {
        max-width: 90%;
    }
}

@media (max-width: 767px) {
    #connect-iq .wrapper .txt .txt-inner, #garmin-connect .wrapper .txt .txt-inner {
        width: 90%;
    }

    #connect-iq .wrapper .txt, #garmin-connect .wrapper .txt {
        min-height: 350px;
    }

    #g-running-dynamics .wrapper .inner .g__dynamics__trio>div {
        padding: 0 2rem;
        width: 100%;
        text-align: center;
    }

    .btn-size-default {
        padding: .8em 2em!important
    }

    #spec.container.show table {
        margin-top: 0;
    }
}

@media (max-width: 413px) {
    .btn-size-default {
        width: auto!important;
    }

    #hero [data-choose="forerunner-55"].active {
        background-position: 65% 0;
    }
}

/*fade in 動畫*/
@-webkit-keyframes mv-txt-move {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        -webkit-transform: translate3d(-51.2%, 0, 0);
        transform: translate3d(-51.2%, 0, 0);
    }
}

@keyframes mv-txt-move {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        -webkit-transform: translate3d(-51.2%, 0, 0);
        transform: translate3d(-51.2%, 0, 0);
    }
}

@-webkit-keyframes mv-txt-move-1 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        -webkit-transform: translate3d(51.2%, 0, 0);
        transform: translate3d(51.2%, 0, 0);
    }
}

@keyframes mv-txt-move-1 {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        -webkit-transform: translate3d(51.2%, 0, 0);
        transform: translate3d(51.2%, 0, 0);
    }
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

*,
body,
html {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@-webkit-keyframes smokebg {
    25% {
        -webkit-transform: translate3d(100px, 0, 0) rotate(2deg);
        transform: translate3d(100px, 0, 0) rotate(2deg);
    }

    50% {
        -webkit-transform: translate3d(75px, -50px, 0) rotate(2deg);
        transform: translate3d(75px, -50px, 0) rotate(2deg);
    }

    75% {
        -webkit-transform: translate3d(300px, 50px, 0) rotate(2deg);
        transform: translate3d(300px, 50px, 0) rotate(2deg);
    }

    100% {
        -webkit-transform: translate3d(500px, -15px, 0) rotate(2deg);
        transform: translate3d(500px, -15px, 0) rotate(2deg);
    }
}

@keyframes smokebg {
    25% {
        -webkit-transform: translate3d(100px, 0, 0) rotate(2deg);
        transform: translate3d(100px, 0, 0) rotate(2deg);
    }

    50% {
        -webkit-transform: translate3d(75px, -50px, 0) rotate(2deg);
        transform: translate3d(75px, -50px, 0) rotate(2deg);
    }

    75% {
        -webkit-transform: translate3d(300px, 50px, 0) rotate(2deg);
        transform: translate3d(300px, 50px, 0) rotate(2deg);
    }

    100% {
        -webkit-transform: translate3d(500px, -15px, 0) rotate(2deg);
        transform: translate3d(500px, -15px, 0) rotate(2deg);
    }
}

@-webkit-keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInDown {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -200px, 0);
        transform: translate3d(0, -200px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

@-webkit-keyframes bounceInUp {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes bounceInUp {

    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 200px, 0);
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}