@charset "utf-8";
/*愛運動>首頁 非共用CSS*/
.layout1 {
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom:40px;
    padding:0px 0px
}
.section1 { 
  /* border-style:solid;
   border-color:blue;
   border-width:1px;*/
	display: inline-block;
    width: 100%;
    height: auto;
	overflow:hidden; /*影片霧化邊緣不要溢出*/
}
.section1Form {
	display: inline-block;
    position: absolute;
    width: 100%;
    width:96%;
    margin:0px 2%;
    height: auto;
	/*
   border-style:solid;
   border-color:red;
   border-width:1px;*/
   z-index: 3;
	
}
.section1Form>div{
	display: inline-block;
	position: relative;
	color:white;
	text-shadow: 1px 1px 4px black;
	font-size:2em;
	line-height: 2em;
	width:100%;
}

/*霧化背景-圖片*/
.section1-mask {
	display:none;
}
/*霧化背景-影片*/
.section1-video {
	display: inline-block;
	position: relative;
	margin:-0.5px auto 0 auto;
	/*position: fixed;*/
    width: 100%;
    /*height:547px;*/
    /*height:680px;*/
    height:auto;
    z-index: 0;
    /*霧化*/
    filter: blur(3px) ;
    -webkit-filter: blur(3px);
}
/*1 字體*/
#section1Form-1{
	margin-top:50px;
	font-size:4.5em;
	line-height:1.5em;
	word-break: break-all;
}
#section1Form-2{
	font-size:2.3em;
	line-height:1.5em;
	font-weight: bold;
}
#section1Form-3{
	margin-top:10%;
}

/*按鈕*/
.start{
	display:inline-block;
	min-width:100px;

	border-style: solid;
	border-color:white;
	border-width: 1px;
	border-radius: 8px;
	font-size:0.87em;
	padding:1px 1.5em; 

	color:white;
	font-weight: bold;
	text-shadow: 1px 1px 4px black;
	background:rgba(255, 255, 255, 0.2);
}
.start:hover{
	cursor: pointer;
}

@media (max-width: 1200px) {

	/*霧化背景-圖片*/
	.section1-mask {
		display:inline-block;
		height:680px;
		width:100%;
		max-width:1200px;
	    background: url("/public/img/product/fuse/Fuse.jpg");
	    background-size: auto 100%;
	    background-position: center center;
	    z-index: 0;
	    /*霧化*/
	    filter: blur(3px);
	    -webkit-filter: blur(3px);
	}
}

@media (max-width: 400px) {
	#section1Form-2{
		font-size:1.8em;
		line-height:1.5em;
		font-weight: bold;
	}
}

/*app簡介*/
.layout2{ 
	display: inline-block;
	position:relative;
    width: 100%;
    /*min-height: 280px;*/
    margin-top:0px;
    float:top;

	z-index: 1;
	background: white;
    min-height:850px;
    max-width: 1200px;
    height:auto;
}

/*app簡介>左區塊 手機示意圖*/
.layout2 .left{
	z-index: 0;
	position:relative;
	display: inline-block;
	margin:40px 100px 70px 100px;
	float:left;
	width:auto;
	height:auto;
	background: white;
}
/*app簡介>右區塊 簡介文字說明*/
.layout2 .right{
	position:relative;
	display: inline-block;
	margin:0 auto;
	float:left;
	width:auto;
	width:650px;
    height:auto;
    padding:70px 0;
}

.layout2 .right .tabs,
.layout2 .right .descriptions,
.layout2 .right .more,
.layout2 .right .applink{
	display: inline-block;
	width:100%;
	margin:0 auto;
}

.layout2 .right .descriptions{
	width:auto;
	padding:20px 20px 10px 20px;
	min-height: 200px;
	font-size:1.2em;
	line-height:2em;
    /*文字左右對齊*/
    text-align: left;
    text-align: justify;
    text-justify:inter-ideograph;
}
/*手機外框*/
.layout2 .phone-case{
	z-index:2;
}
/*手機螢幕圖片*/
.layout2 .phone-screen{
	position:absolute;
	width:100px;
	height:100px;
	z-index:3;
	/*top:70px;
	left:19px;
	height:446px;
	width:254px;*/
	top:1px; /*test*/
	left:1px; /*test*/
	height:516px; /*test*/
	width:284px; /*test*/
}
/*手機螢幕圖*/
	.layout2  #sc1,
	.layout2  #sc2,
	.layout2  #sc3,
	.layout2  #sc4,
	.layout2  #sc5{
	/*background-size:251px 445px;
	background-position: 20px 70px;
	background-repeat: no-repeat;*/
		
	}
	.layout2  #sc1{
	background-image: url('/public/eventImg/aboutJoiiSports/6.png');
	}
	.layout2  #sc2{
	background-image: url('/public/eventImg/aboutJoiiSports/7.png');
	}
	.layout2  #sc3{
	background-image: url('/public/eventImg/aboutJoiiSports/9-1.png');
	}
	.layout2  #sc4{
	background-image: url('/public/eventImg/aboutJoiiSports/8.png');
	}
	.layout2  #sc5{
	background-image: url('/public/img2016/sports/index/m_screen5.jpg');
	background-size:251px 445px;
	background-position: 20px 70px;
	background-repeat: no-repeat;
	}		
/*簡介切換按鈕*/	
.layout2 .tab1,
.layout2 .tab2,
.layout2 .tab3,
.layout2 .tab4,
.layout2 .tab5{
	cursor: pointer;
	display: inline-block;
	width:85px;
	padding-top:80px;
	height:auto;
	margin:10px 20px;
	background-repeat: no-repeat;
	background-position: center 0;
}
.layout2 .tabs>div{
	color:#9A9A9A;
}
.layout2 .tabs>div:hover{
	color:#FFB400;
}
	.layout2 .tab1{
		background-image: url('/public/img2016/sports/index/icon1.png');
	}
	.layout2 .tab1:hover{
		background-image: url('/public/img2016/sports/index/icon1_1.png');
	}
	.layout2 .tab2{
		background-image: url('/public/img2016/sports/index/icon2.png');
	}
	.layout2 .tab2:hover{
		background-image: url('/public/img2016/sports/index/icon2_1.png');
	}
	.layout2 .tab3{
		background-image: url('/public/img2016/sports/index/icon3.png');
	}
	.layout2 .tab3:hover{
		background-image: url('/public/img2016/sports/index/icon3_1.png');
	}
	.layout2 .tab4{
		background-image: url('/public/img2016/sports/index/icon4.png');
	}
	.layout2 .tab4:hover{
		background-image: url('/public/img2016/sports/index/icon4_1.png');
	}
	.layout2 .tab5{
		background-image: url('/public/img2016/sports/index/icon5.png');
	}
	.layout2 .tab5:hover{
		background-image: url('/public/img2016/sports/index/icon5_1.png');
	}
/*QRcode*/
.layout2 .barcode{
	display: inline-block;
	position: absolute;
	width:102px;
	height:141px;
	margin:5% 20px 0px 15px;
	float: left;
}
.layout2 .iosApp{
	display: inline-block;
	position: relative;
	background-image: url('/public/img2016/sports/index/QRCode_Apple.png');
}
.layout2 .androidApp{
	display: inline-block;
	position: relative;
	background-image: url('/public/img2016/sports/index/QRCode_Android.png');
}
/*閱讀更多*/
.layout2 .more{
	text-align: right;
}
@media (max-width: 1200px) {
	.layout2{
		height: auto;
		min-height: auto;
		background: white;
	}
	.layout2 .left{
		display:none;
	}
	.layout2 .right{
		font-size: 1em;
		width:100%;
    	padding:5% 0px;
	}
    .layout2 .tabs>div{
    	margin:10px 2%;
    	padding-top: 70px;
    }
	.layout2 .barcode{
    	float: none;
    }
    .layout2 .more{
		text-align: center;
    }
}
@media (max-width: 590px) {
	.layout2 .tabs>div{
    	width:85px;
    	padding-top:50px;
    	height:auto;
    	margin:10px 0px 0px 0px; 
    	background-size: 40px 40px;
    	background-repeat: no-repeat;
    	background-position: center 0;
	}
}
@media (max-width: 480px) {
	.layout1,
	.layout2{ 
    	height:auto;
    	min-height: 100px;
	}
	.layout2 .tabs>div{
    	width:55px;
    	padding-top:50px;
    	height:auto;
    	margin:10px 0.5% 0px 0.5%; 
    	background-size: 40px 40px;
    	background-repeat: no-repeat;
    	background-position: center 0;
    	font-size:13px;
	}
	.layout2 .right .descriptions{
		padding:10px 20px;
	}
}

.layout3,
.layout4,
.layout5 { 
	position:relative;
    width: 100%;
    /*min-height: 280px;*/
    margin-top:0px;
    background:#F2F2F2;
    float:top;
}
/*標語*/
.layout3{
	padding:50px 0px;
	min-height:168px;
	height:auto;
	float: left;
	z-index: 1;

	background-image: url('/public/img2016/sports/index/words.png?v=20161214');
	background-size:auto 168px ;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 610px) {
	/*標語*/
	.layout3{
		padding:40% 0px 5% 0px;
		min-height:40px;
		background-size:100% ;
	}
}

.layout3 .description{
	padding:4% 0 3% 0;
	position:center;
	font-size:2em;
	line-height:1.9em;
	font-weight: bold;
	color:#585657;
	color:#838383;
	/*color:#8ecad5;*/
	display: none;
}
/*愛用分享*/
.layout4{
	background:#F2F2F2;
	min-height:790px;
}
.layout4 .card{
	/*background: darkseagreen; test*/ 
	display: inline-block;
	margin:5px 20px 0px 20px;
	width:345px;
	height:auto;
}


.layout4 .content{
	display: inline-block;
	margin:15px auto 0px auto;
	padding:15px;
	min-height:100px;
	min-width:90%;
	height:auto;
	font-size:22px;
	color:#585657;
	background: white;
	border-radius: 15px;
}
.layout4 .content .text,
.layout5 .content .text{
	display: inline-block;
	width:100%;
	font-size:18px;
	line-height:2em;
	text-align: left;
	letter-spacing:1px;
	margin-bottom:10px;
	color:#585657;
	/*左右對齊*/
	text-align: justify;
	text-justify:inter-ideograph;
}
.layout4 .content .text{
	min-height:250px;
}
.layout5 .content .text{
	min-height:220px;
}
.layout4 .content .name{
	display: inline-block;
	margin:15px auto;
	font-size:25px;
	color:#585657;
	font-weight: bold;

}
/*小箭頭*/
.layout4 .arrowDown{
	display: inline-block;
	margin:0px auto 0px auto ;
	margin-left:7px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 18px 0 18px;
	border-color: white transparent transparent transparent;
}
.layout4 .head{
	display: inline-block;
	margin:15px auto 10px auto;
	height:180px;
	width:180px;
	border-radius: 50%;
background: white;
	background-image:url(/public/img/avatar.png);
	background-position: center;
	background-size: 100% 100%;					
}
.layout2 .more,
.layout4 .more{
	cursor:pointer;	
	display: inline-block;
	margin:10px auto 30px auto;
	width:365px;
	min-width: auto;
	font-size:22px;
	line-height:2em;
	color:#FEB600;
}
.layout2 .arrowRight,
.layout4 .arrowRight{
	display: inline-block;
	margin:0px 0px 3px 0px ;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 12px;
	border-color: transparent transparent transparent orange;
}
/*名人堂*/
.layout5{
	background:#F2F2F2;
	min-height:580px;
}
/*標題文字*/
.layout2 .title,
.layout4 .title,
.layout5 .title{
	clear:both;
	line-height:2em;
	font-size:2.8em;
	color:#4B9BD6;
	letter-spacing:5px;
}

@media (max-width: 1200px) {
	/*背景影片改背景圖片*/
	.layout1{
		height: auto;
		min-height:630px;
		max-width: 1200px;
	}

	/*霧化背景-影片*/
	.section1-video{
		
		size: auto 100%;
		max-height:680px;
	}

}
@media (max-width: 900px) {
	/*字體調整*/
	.section1Form{
		font-size:0.8rem
	}
	.layout3{
		font-size:0.65rem
	}
	/*背景影片 改 背景圖片*/
	.layout1{
		height:500px;
	}
	/*.section1Form{
		margin:0px;
		width:auto;
		margin-left:-50%;
	}
	.section1-video{
		display:none;
	}*/
	/*霧化背景-影片*/
	.section1-video{
		height:1px;
		/*display:none;*/
	}
	.layout4 .content .text{
		min-height:195px;
		height: auto;
	}
	.layout5 .content .text{
		min-height:105px;
		height: auto;
	}

}


@media (max-width: 450px) {
	/*調整手機版標題文字顯示在同一行*/
	.layout2 .title{
		font-size:2.4em;
		letter-spacing:1px;
	}
	.layout4 .card{
		display: inline-block;
		margin:15px 3% 0px 3%;
		width:94%;
	}
	.layout4 .content .text,
	.layout5 .content .text{
		min-height:40px;
		height: auto;
	}
}