body {
  height: 100%;
  width: 100%;
  min-width: 950px;
  background-color: #ffffff;
}

.container-fluid {
  padding-right: 0;
  padding-left: 0;
}

.mainBg {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -475px;
  z-index: 0;
  background-color: #fff;
  background-repeat: no-repeat;
  width: 950px;
}
.sticky-top{
  width: 950px;
  margin: 0 auto;
}
.bg-sk{
  background-color: #002c57;
}
a.navbar-brand{
  margin-left: 20px;
  margin-top: -5px;
}
.index {
  width: 950px;
  position: relative;
  height: 100%;
  overflow: hidden;
  z-index: 3;
  margin: 0 auto;
  min-height: 1300px;
}


/*------------------------------ transition---------------------------------*/
.btn_goTop, .btn_goTop span, .demo_show li a {
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
}
/*----------------------------------Header----------------------------*/
.opening{
  position: relative;
  background-image:url(../images/header-bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1880px;
  background-size: contain;
  z-index: 199;
}
.sk_pd_logo{
  position: absolute;
  top:6%;
  left: 29%;
  z-index: 203;
}
.distanceworker_logo{
  position: absolute;
  top:16%;
  left: 1%;
  z-index: 203;
}
.shoes-shadow{
  position: absolute;
  top: 76%;
  left: 4%;
  z-index: 202;
}
.main_shoes{
  position: absolute;
  top: 47.5%;
  left: 18%;
  z-index: 203;
}
.main_slogan{
  position: absolute;
  top: 82%;
  left: 12%;
  z-index: 202;
  animation: trandshoes 1.5s linear infinite;
  -webkit-animation: trandshoes 1.5s linear infinite;
  -moz-animation: trandshoes 1.5s linear infinite;
}

/*----------------------------------Part1----------------------------*/
.swiper1{
  height: 1728px;
}
.part1_lorene1{
  position: relative;
  background-image:url(../images/part1-bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1728px;
  background-size: contain;
  z-index: 100;
}
.part1_lorene2{
  position: relative;
  background-image:url(../images/pink_bk.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1728px;
  background-size: contain;
  z-index: 100;
}
.part1-slogan{
  position: absolute;
  top: 42%;
  right: 0%;
  z-index: 101;
}
.footprint{
  position: absolute;
  top: 43%;
  right: 34%;
  z-index: 102;
}
.footprint img{
  width: 50%;
}
.arrow_lorene{
  position: absolute;
  top: 94%;
  right: 5%;
  z-index: 102;
  animation: trandx 1.5s linear infinite;
  -webkit-animation: trandx 1.5s linear infinite;
  -moz-animation: trandx 1.5s linear infinite;
}
@keyframes trandx {
  0% {
    transform: translate(0px,0px);
  }
  20% {
    transform: translate(10px,0px);
  }
  40% {
    transform: translate(20px,0px);
  }
  60% {
    transform: translate(10px,0px);
  }
  100% {
    transform: translate(0px,0px);
  }
}
.hyperburst_shoes{
  position: absolute;
  top: 23%;
  left: 11%;
  z-index: 103;
}
.hyperburst_2{
  position: absolute;
  top: 45%;
  left: 32%;
  z-index: 104;
  animation: scalebig 1.5s linear infinite;
  -webkit-animation: scalebig 1.5s linear infinite;
  -moz-animation: scalebig 1.5s linear infinite;
}
@keyframes scalebig {
  0% {
    transform: scale(1,1);
  }
  20% {
    transform: scale(1.05,1.05);
  }
  40% {
    transform: scale(1.1,1.1);
  }
  60% {
    transform: scale(1.1,1.1);
  }
  80% {
    transform: scale(1.05,1.05);
  }
  100% {
    transform: scale(1,1);
  }
}

.hyperburst_1{
  position: absolute;
  top: 62%;
  left: 17%;
  z-index: 103;
}
.line1{
  position: absolute;
  top: 75%;
  left: 18%;
  z-index: 103;
}
.hyper_inf{
  position: absolute;
  top: 79%;
  left: 18%;
  z-index: 103;
}
/*----------------------------------Part2----------------------------*/
.swiper2{
  height: 1611px;
}
.part2_americanmen1{
  position: relative;
  background-image:url(../images/part2-bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1611px;
  background-size: cover;
  z-index: 100;
}
.part2_americanmen2{
  position: relative;
  background-image:url(../images/blue_bk.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1611px;
  background-size: cover;
  z-index: 100;
}
.part2-title{
  position: absolute;
  top: 42%;
  left: 0%;
  z-index: 101;
}
.walking{
  position: absolute;
  top: 43%;
  left: 50%;
  z-index: 102;
}
.walking img{
  width: 65%;
}
.arrow_amercianboy{
  position: absolute;
  top: 93%;
  right: 5%;
  z-index: 102;
  animation: trandx 1.5s linear infinite;
  -webkit-animation: trandx 1.5s linear infinite;
  -moz-animation: trandx 1.5s linear infinite;
}
.backshoes{
  position: absolute;
  top: 27%;
  left: 8%;
  z-index: 103;
}
.backshoes_shadows{
  position: absolute;
  top: 45%;
  left: 4%;
  z-index: 102;
}
.goodyear_highlight{
  position: absolute;
  top: 27%;
  left: 8%;
  z-index: 104;
  opacity: 0.5;
}
.goodyear_1{
  position: absolute;
  top: 54%;
  left: 17%;
  z-index: 103;
}
.line2{
  position: absolute;
  top: 69%;
  left: 18%;
  z-index: 103;
}
.goodyear_information{
  position: absolute;
  top: 73%;
  left: 22%;
  z-index: 103;
}
.goodyear_ref{
  position: absolute;
  top: 87%;
  left: 11%;
  z-index: 103;
}

/*----------------------------------Part3----------------------------*/
.swiper3{
  height: 1711px;
}
.part3_tzu-shien1{
  position: relative;
  background-image:url(../images/part3-bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1711px;
  background-size: contain;
  z-index: 100;
}
.part3_tzu-shien2{
  position: relative;
  background-image:url(../images/yellow_bk.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1711px;
  background-size: contain;
  z-index: 100;
}
.part3-title{
  position: absolute;
  top: 42%;
  right: 0%;
  z-index: 101;
}
.ahead{
  position: absolute;
  top: 43%;
  left: 24%;
  z-index: 102;
}
.ahead img{
  width: 50%;
}
.arrow_tzushien{
  position: absolute;
  top: 93%;
  right: 5%;
  z-index: 102;
  animation: trandx 1.5s linear infinite;
  -webkit-animation: trandx 1.5s linear infinite;
  -moz-animation: trandx 1.5s linear infinite;
}
.shoes_gray{
  position: absolute;
  top: 22%;
  left: 10%;
  z-index: 103;
}
.carbon_image{
  position: absolute;
  top: 33%;
  left: 17%;
  z-index: 104;
}
.arrow2{
  position: absolute;
  top: 31%;
  left: 51%;
  z-index: 104;
  animation: transdistance 1.5s linear infinite;
  -webkit-animation: transdistance 1.5s linear infinite;
  -moz-animation: transdistance 1.5s linear infinite;
}
.arrow4{
  position: absolute;
  top: 51%;
  left: 26%;
  z-index: 104;
  animation: transdistance 1.5s linear infinite;
  -webkit-animation: transdistance 1.5s linear infinite;
  -moz-animation: transdistance 1.5s linear infinite;
}
@keyframes transdistance {
  0% {
    transform: translate(0px,0px);
  }
  20% {
    transform: translate(10px,10px);
  }
  40% {
    transform: translate(20px,20px);
  }
  60% {
    transform: translate(10px,10px);
  }
  100% {
    transform: translate(0px,0px);
  }
}
.carbon_logo1{
  position: absolute;
  top: 60%;
  left: 17%;
  z-index: 103;
}
.line3{
  position: absolute;
  top: 75%;
  left: 18%;
  z-index: 103;
}
.carbon_inf{
  position: absolute;
  top: 80%;
  left: 20%;
  z-index: 103;
}
/*----------------------------------Part4----------------------------*/
.swiper4{
  height: 1648px;
}
.part4_americanwomen1{
  position: relative;
  background-image:url(../images/part4-bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1648px;
  background-size: cover;
  z-index: 100;
}
.part4_americanwomen2{
  position: relative;
  background-image:url(../images/purple_bk.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1648px;
  background-size: cover;
  z-index: 100;
}
.part4-title{
  position: absolute;
  top: 42%;
  left: 0%;
  z-index: 101;
}
.fighting{
  position: absolute;
  top: 41%;
  left: 53%;
  z-index: 102;
}
.fighting img{
  width: 65%;
}
.arrow_amerciangirl{
  position: absolute;
  top: 3%;
  right: 5%;
  z-index: 102;
  animation: trandx 1.5s linear infinite;
  -webkit-animation: trandx 1.5s linear infinite;
  -moz-animation: trandx 1.5s linear infinite;
}
.archfit{
  position: absolute;
  top: -3%;
  left: 0;
  z-index: 103;
}

.archfit_logo_big{
  position: absolute;
  top: 54%;
  left: 17%;
  z-index: 103;
}
.line4{
  position: absolute;
  top: 67%;
  left: 18%;
  z-index: 103;
}
.archfit-inf{
  position: absolute;
  top: 72%;
  left: 18%;
  z-index: 103;
}
/*---------------------------------剖面圖---------------------------*/
.shoes-all{
  position: relative;
  background-image:url(../images/part5-bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1477px;
  background-size: cover;
  z-index: 100;
}
.shoes_all_1{
  position: absolute;
  top: 10%;
  right: 2%;
  z-index: 101;
  animation: trandshoes 1.5s linear infinite;
  -webkit-animation: trandshoes 1.5s linear infinite;
  -moz-animation: trandshoes 1.5s linear infinite;
}
@keyframes trandshoes {
  0% {
    transform: translate(0px,0px);
  }
  20% {
    transform: translate(0px,10px);
  }
  40% {
    transform: translate(0px,20px);
  }
  60% {
    transform: translate(0px,10px);
  }
  100% {
    transform: translate(0px,0px);
  }
}
.archfit1{
  position: absolute;
  top: 21%;
  left: 5%;
  z-index: 101;
}
.line-1{
  position: absolute;
  top: 26%;
  left: 27%;
  z-index: 101;
}
.hyperburst-logo{
  position: absolute;
  top: 33%;
  left: 5%;
  z-index: 101;
}
.line-2{
  position: absolute;
  top: 38%;
  left: 27%;
  z-index: 101;
}
.carbon1{
  position: absolute;
  top: 47%;
  left: 5%;
  z-index: 101;
}
.line-3{
  position: absolute;
  top: 52%;
  left: 27%;
  z-index: 101;
}
.goodyears1{
  position: absolute;
  top: 60.3%;
  left: 5%;
  z-index: 101;
}
.line-4{
  position: absolute;
  top: 63%;
  left: 27%;
  z-index: 101;
}
/*--------------------------------Ending----------------------------*/
.ending-kv{
  position: relative;
  height: 1621px;
  width: 100%;
  z-index: 100;
}
.slogan_12{
  position: absolute;
  top: 25%;
  right: 0;
  z-index: 102;
  animation: trandshoes 1.5s linear infinite;
  -webkit-animation: trandshoes 1.5s linear infinite;
  -moz-animation: trandshoes 1.5s linear infinite;
}
.tzu-shien-name-bk{
  position: absolute;
  top: 80%;
  right: 34%;
  z-index: 103;
}
.slogan_13{
  position: absolute;
  top: 25%;
  left: 0;
  z-index: 102;
  animation: trandshoes 1.5s linear infinite;
  -webkit-animation: trandshoes 1.5s linear infinite;
  -moz-animation: trandshoes 1.5s linear infinite;
}
.lorene_name{
  position: absolute;
  top: 82%;
  left: 22%;
  z-index: 103;
}
/*--------------------------------Ending----------------------------*/
.ending-bg{
  position: relative;
  background-image:url(../images/all-shoes.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 1615px;
  background-size: contain;
  z-index: 101;
}
.DistanceWalker_logo_ending{
  position: absolute;
  top: 8%;
  left: 20%;
  z-index: 200;
}
.brush_1{
  position: absolute;
  left: 8%;
  top: 28%;
  z-index: 100;
}
.longdistance-slogan{
  position: absolute;
  left: 16%;
  top: 25%;
  z-index: 101;
  animation: trandx 1.5s linear infinite;
  -webkit-animation: trandx 1.5s linear infinite;
  -moz-animation: trandx 1.5s linear infinite;
}
.women_1{
  position: absolute;
  top: 37%;
  left: 34%;
  z-index: 101;
}
.shoes_girl_1{
  position: absolute;
  top: 44%;
  left: 11%;
  z-index: 101;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}
.shoes_girl_2{
  position: absolute;
  top: 44%;
  right: 6%;
  z-index: 101;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}
.men_1{
  position: absolute;
  top: 68%;
  left: 36%;
  z-index: 101;
}
.shoes_men_1{
  position: absolute;
  top: 74%;
  left: 11%;
  z-index: 101;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}
.shoes_men_2{
  position: absolute;
  top: 74%;
  right: 6%;
  z-index: 101;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 1));
}
.buy{
  position: absolute;
  top: 95%;
  left: 27%;
  z-index: 105;
}

/*------------------------------ Footer--------------------------------------*/
.footer{
  position: relative;
  background-image:url(../images/footer-bg.jpg);
  background-repeat: no-repeat;
  width: 100%;
  height: 363px;
  background-size: contain;
}
.sk-logo{
  position: absolute;
  left: 17%;
  top:24%;
}
.copyright{
  position: absolute;
  left: 16%;
  top:73%;
}


/*---------------------------btn_goTop---------------------------*/
.btn_goTop {
  position: fixed !important;
  width: 60px;
  height: 60px;
  border-radius: 20%;
  background-color: #0063ba;
  bottom: 10px;
  left: 50%;
  margin-left: 480px;
  z-index: 999;
  display: block;
}

.btn_goTop span {
  display: block;
  position: absolute;
  width: 34px;
  height: 21px;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -17px;
  background-image: url(../images/goTop.png);
}

.btn_goTop:hover {
  background-color: rgb(255, 185, 192);
}

.btn_goTop:hover.btn_goTop span {
  margin: -15px 0 0 -17px;
}