@charset "utf-8";
/* CSS Document */
html, body {
  height: 100%;
  margin: 0;
}
p{
	color: #fff;
    font-size: 1em;
}
h2 {
	color: #fff
}

.footer p{
	color:#969696
}

.title h1{
	color:rgba(255,254,81,1.00)
}
.title h3{
	color:rgba(255,177,30,1.00)
}
.wrapper {
  min-height: 100%; /*外層高度100%*/
  margin-bottom: -50px; /*隨footer高度需做調整*/
}
.content{
  padding-bottom: 50px; /*避免文字超出瀏覽器時，內容區塊不會和footer打架*/
}
.footer{
  height: 100px; /*設定footer本身高度*/
  background-color: hsla(0,0%,0%,0.50);
  text-align: center;
  padding: 5em;
}
.footer a{
	color: #969696
}

@media only screen and (min-width:998px) {
.title {
	padding: 10vh 0 3vh 0;
	display:flex;
	justify-content: center;
	align-content: center;
	color: #fff
}
.title-center{
	text-align: center
}

.icon-buttom {
	display:flex;
	justify-content: center;
	align-content: center;
	padding-bottom: 20em;
}

.icon {
	text-align: center;
	width:300px;
	height:300px;
	padding: 3em;
}
.icon-content {
	display: none;
}
.icon:hover .icon-content{
	display:block;
}
.icon:hover img{
	top: 10px;
}
}

@media only screen and (max-width:997px) {
	h1{
		font-size:4em;
	}
	h2{
		font-size:4em;
	}
	h3{
		font-size:3.5em;
	}
    p{
    text-align: left;
    font-size:3em;
	}
	.title {
        padding: 1vh 0 1vh 0;
        display:flex;
        justify-content: center;
        align-content: center;
        color: #fff
    }
    .title-center{
        text-align: center;
    }
	.icon{
		width:80%;
		text-align: center;
        padding: 0 10%
	}
	.icon img{
		width:80%;
		
	}
	.icon-buttom{ 
		width:100%;
    }

	.footer p{
		text-align: center
	}
	.footer{
		padding-bottom: 50em
	}
}


/*
@media only screen and (min-width:769px) and (max-width:1249px) {
.title {
	padding: 10vh 0 3vh 0;
	display:flex;
	justify-content: center;
	align-content: center;
	color: #fff
}
.title-center{
	text-align: center
}

.icon-buttom {
	height: 50vh; 
	display:flex;
	justify-content: center;
	align-content: center;
}

.icon {
	text-align: center;
	width:180px;
	height:180px;
}
.icon img {
    width:80%
}
.icon:hover img{
	top: 10px;
}

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

	.title {
        padding: 1vh 0 1vh 0;
        display:flex;
        justify-content: center;
        align-content: center;
        color: #fff
    }
    .title-center{
        text-align: center;
    }
	.icon{
		width:70%;
		text-align: center;
        padding: 0 15%
	}
	.icon img{
		width:100%;
		
	}
	.icon-buttom{ 
		width:100%;
    }
	p{
		text-align: left
	}
	
}
*/