@charset "utf-8";


/*=====================================================*/
/*=====================================================*/
/*===== index ===============*/
/*=====================================================*/
.index_main{
  width: 100%;
}


/* -----------index  banner ----------- */
/* banner */
.index_main .banner{
  width: 100%;
  overflow: hidden;
/*   box-shadow: 0px 0 50px rgba(0, 0, 0, 0.8),
              0 0px rgba(0, 0, 0, 0.8),
              0 0px rgba(0, 0, 0, 0.8),
              0px 0 rgba(0, 0, 0, 0.8); */
}

.index_main .banner_img{
  width: 100%;
}

.index_main .banner_img .item{
  width: 100%;
}

.index_main .banner_img .item_img{
  width: 100%;
  text-align: center;
}

.index_main .banner_img .item_img img{
  width: 100%;
  max-height: 100%;
  height: auto;
}

/* dot none */
.index_main .banner .owl-dots{
  display: none;
}

.index_main .banner .owl-theme .owl-nav{
  display: none;
}
/* dot none END */

/* -----------index banner END----------- */

.icon_tra{
  width: 100%;
}


.icon_tra ul{
  width: 1100px;
  margin: 50px auto;
}

.icon_tra li{
  width: 100%;
  text-align: center;
  margin: 5px 0;
  font-size: 18px;
}

.icon_tra i{
  margin-right: 15px;
}

.icon_tra li:hover{
  color:  #95CACA;
}


/* 滾動視差 */

.parallax_box{

}

.box_1{
  width: 100%;
  height: 900px;
  background: url('../images/firstBG.jpg') 50% 0 no-repeat fixed;
  background-repeat: no-repeat;
}

.box_2{
  width: 100%;
  height: 900px;
  background: url('../images/secondBG.jpg') 50% 0 no-repeat fixed;
  background-repeat: no-repeat;
}

.box_3{
  width: 100%;
  height: 900px;
  background: url('../images/thirdBG.jpg') 50% 0 no-repeat fixed;
  background-repeat: no-repeat;
}

.box_4{
  width: 100%;
  height: 900px;
  background: url('../images/trainers.png') 50% 0 no-repeat fixed;
  background-repeat: no-repeat;
}


/*=====================================================*/
/*=====================================================*/
/*===== form_box ===============*/
/*=====================================================*/



/* input[type="text"] */
/* input[type="submit"] */




/*=====================================================*/
/*=====================================================*/
/*===== animate ===============*/
/*=====================================================*/

.animate_box{
  width: 100%;
}

.animate_box ul{
  width: 1100px;
  margin: 50px auto;
}

/* 1 */
.animated_list,
.animated_list2,
.animated_list3{
  width: 300px;
  height: 300px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  margin: 0 32px;
}

.animated_list img,
.animated_list2 img,
.animated_list3 img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
}



/*=====================================================*/
/*=====================================================*/
/*===== Flex box ===============*/
/*=====================================================*/

/* 要知道層級,下display:flex,只影響下一個層級 flex items */

.flexbox_tra{
  width: 100%;
}

.flexbox_tra > ul{
  width: 1100px;
  margin: 100px auto;
  display: -webkit-flex; /* sa瀏覽器 */
  display: flex;

  flex-direction: row;           /* 預設是row list照1、2、3...依序排列*/
  -webkit- flex-direction: row;  /* row-reverse就是反過來6、5、4... */

  flex-wrap: wrap;             /* 預設是nowrap不換行，就算是寬度超過也不換行 */
  -webkit-flex-wrap: wrap;     /* wrap判斷自動換行 */

  justify-content: center;         /* 預設是flex-start靠左 */
  -webkit-justify-content: center; /* 對齊 方向為左右 */ /* 除了靠左靠右置中，還有space-between or around */

  align-items: flex-start;
  -webkit-align-items: flex-start; 

  /* align-items  align-content 都是上下為基準 例如子元素有個元素內容比較多時，就能訂立基準不跑版*/
  /* https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/ */
}

.list_box{
  width: 30%;
  margin: 25px 18px;
}

.list_img{
  width: 100%;
  text-align: center;
  margin-bottom: 15px;
}

.list_img img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
}

.list_text{
  width: 100%;
  text-align: center;
}

/* ---------------------------------------------- */

.grid_box{
  width: 100%;
}

.grid_wrapper{
  width: 1200px;
  margin: 150px auto;
  display: flex;  /* 外層 */
  display: -webkit-flex;
  align-items: flex-start;
  -webkit-align-items: flex-start; 
}


.left_box{
  width: 25%;
}

.left_box_ul{
  display: -webkit-flex; /* sa瀏覽器 */
  display: flex;
  flex-direction: column;
}

.left_box_list{
  width: 99%;
  height: 200px;
  margin: 20px 0;
  background: orange;
  opacity: 0.7;
}

.middle_box{
  width: 50%;
}

.middle_box_ul{
  display: -webkit-flex; /* sa瀏覽器 */
  display: flex;
  flex-direction: column;
}

.middle_box_list{
  width: 99%;
  height: 400px;
  margin: 20px 0;
  border: solid 2px #000;
  box-sizing: border-box;
}

.right_box{
  width: 25%;
  display: -webkit-flex; /* sa瀏覽器 */
  display: flex;
}

.right_box_info{
  width: 100%;
}

/*=====================================================*/
/*=====================================================*/
/*===== css3 ===============*/
/*=====================================================*/

.css_animate_box{
  width: 1100px;
}

.test_img{
  width: 400px;
}