@charset "utf-8";
html{ overflow-x:hidden}
body {
font-family: "微軟正黑體";
font-size: 14px;
line-height: 22px;
}
.bg1 {
background-image: url(../images/bg1.jpg);
width: 100%;
height: 100%;
background-size: cover
}
a {
color: #666;
}
a:hover {
color: #666;
text-decoration: none;
}
.top_m {
float: right;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.s1box {
width: 60%;
position: absolute;
z-index: 999;
margin-left: 40%;
height: 360px;
padding-top: 40px
}
.s2box {
width: 70%;
margin-left: 10%;
position: absolute;
z-index: 999;
margin-top:-400px;
height: 370px;
padding: 15px;
}
.s3box {
width: 100%;
margin-left: 0%;
margin-top: 0%;
margin-top: -800px;
height: 400px;
}
.s4box {
width: 100%;
margin-left: 0%;
margin-top: 0%;
margin-top: -1200px;
height: 400px;
}
.s3l {
width: 40%;
margin-left: 10%;
overflow:hidden;
padding: 0px
}
.s3r {
width: 50%;
margin-left:50%;
margin-top: 70px
}
h1, h2, h3, h4 {
margin: 10px 0px;
}
.s4l {
width: 50%;
padding-left: 50px;
padding-top: 50px;
color: #000;
}
.s4r {
width: 50%;
margin-left: 50%;
}
.s4_img {
right: 0%;
top: 0%;
}
.s4_title {
position: static;
color: #000;
text-align: left;
font-size: 36px;
margin-bottom: 10px;
margin-top:50px
}
.s4_sub {
font-size: 24px;
font-weight: bold;
color: #F00;
margin-bottom: 10px;
padding-top: 10px;
text-align: left;
position: static
}
.bg4 {
height: 400px;
background-image: url(../images/bg4.jpg);
width: 100%;
top: 0%;
left: 0%
}
.s4_text {
text-align: left;
color: #000
}
.s1 {
padding: 6px;
margin-bottom: 10px;
font-size: 36px;
text-align: left;
margin-top: 50px;
position: static
}
.s2 {
color: #FFF;
font-size: 24px;
font-weight: bold;
background-color: #F00;
padding: 10px;
margin-bottom: 10px;
text-align: left;
position: static
}
.s3 {
font-size: 16px;
color: #000;
text-align: left;
font-weight: bold;
position: static
}
.icon1 {
margin-top: -200px;
margin-left: -36%
}
.anim-slide h3#todo {
top: 0%;
left: 0%;
margin-top: 0px
}
h3#bounce {
font-size: 36px;
text-align: left;
margin-top: 20px;
margin-bottom: 0px;
color: #F00;
position: static
}
h4#bounceUp {
color: #000;
width: auto;
font-size: 24px;
font-weight: bold;
margin-top: 5px;
margin-bottom: 10px;
text-align: left;
position: static
}
h4#bounceRight {
font-size: 16px;
color: #004553;
text-align: left;
font-weight: bold;
position: static
}
.anim-slide #css3 {
height: 400px;
background-image: url(../images/footer_lodyas.png);
width: 100%;
top: 0%;
left: 0%
}
.anim-slide img#home {
float: left;
position: static;
max-height: 400px;
max-width: 100%;
margin-right: 10px;
}
#modernizr {
position: static;
text-align: left;
font-size: 36px;
color: #FFF;
padding-top: 20px;
}
h2#animatecss {
position: static;
text-align: left;
font-size: 24px;
font-weight: normal;
padding-top: 10px;
color: #FFF;
}
.s3_text {
text-align: left;
color: #F90
}
.box {
width:95%;
margin:auto;
border: #CCC 1px solid;
min-height: 400px;
padding: 10px;
background-color: #FFF;
text-align: center;
cursor:pointer;
}
.box:hover {
background-color: #000;
color: #FFF
}
.box h2 {
margin: 10px;
border-bottom: 1px dashed #CCCCCC;
padding-bottom: 10px;
margin-top: 0px;
font-size: 20px;
font-weight: bold;
color: #F00
}
.about {
margin-top: 20px;
}
.map {
border: 5px #efefef solid;
margin-top: 20px;
}
@media (max-width: 700px) {
.box {
width: 85%;
display: inline-block;
vertical-align: top;
margin: 10px;
min-height: inherit;
}
.s4r {
display: none
}
.s4l {
width: 90%;
padding: 20px
}
.s1 {
font-size: 24px
}
.s2 {
font-size: 18px
}
.s3 {
font-size: 16px
}
h4 {
font-size: 14px
}
.icon1 {
display: none
}
.s1box {
width: 100%;
margin-left: 0%;
}
.s3l {
width: 100%;
position: static;
float:none;
text-align: center
}
.s3l img {
width: 50%;
margin:auto
}
.s2box{ }
.s3r {
width: 100%;
margin-left: 0%;
position: static;
margin-top: 0px
}
.bg1{
background-position:-350px 0px}
.anim-slide h3#todo{
background-position:-280px 0px}
.box {
width:100%;
}
}