118 lines
2.5 KiB
CSS
118 lines
2.5 KiB
CSS
*{
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
body{
|
||
background: url(../img/content01.jpg) no-repeat #daa91c;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-size: 100% auto;
|
||
overflow: hidden;
|
||
min-width: 1024px;
|
||
min-height: 400px;
|
||
}
|
||
.logo{
|
||
text-align: center;
|
||
padding-top: 60px;
|
||
}
|
||
.inlet .hd{
|
||
width: 100%;
|
||
min-width: 1024px;
|
||
height: 40px;
|
||
background: rgba(0,0,0,0.3);
|
||
}
|
||
.inlet .hd ul{
|
||
width: 1200px;
|
||
margin: 0 auto;
|
||
text-align: left;
|
||
}
|
||
.inlet .hd li{
|
||
color: #ffe4b1;
|
||
display: inline-block;
|
||
height: 40px;
|
||
margin: 0 5px;
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
line-height: 40px;
|
||
text-shadow:1px 1px 1px #000;
|
||
}
|
||
.inlet .hd li span{
|
||
display: inline-block;
|
||
transition: all 0.3s;
|
||
-moz-transition: all 0.3s;
|
||
-webkit-transition: all 0.3s;
|
||
-o-transition: all 0.3s;
|
||
}
|
||
.inlet .hd li span:hover{
|
||
color: #fff;
|
||
}
|
||
.inlet .hd li .icon{
|
||
width: 30px;
|
||
margin: 5px 0px;
|
||
height: 30px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
.inlet .hd li .Ch{
|
||
background: url(../img/lan_chs.jpg) no-repeat center 4px;
|
||
background-size: 26px;
|
||
}
|
||
.inlet .hd li .Cht{
|
||
background: url(../img/lan_cht.jpg)no-repeat center 4px;
|
||
background-size: 26px;
|
||
}
|
||
.inlet .hd li .Us{
|
||
background: url(../img/lan_en.jpg)no-repeat center 4px;
|
||
background-size: 26px;
|
||
}
|
||
.inlet .bd{
|
||
text-align: center;
|
||
margin-top: 15vh;
|
||
}
|
||
.inlet .bd .item{
|
||
width: 45vh;
|
||
display: inline-block;
|
||
margin:2vw;
|
||
-moz-box-shadow: 0px 5px 40px #000;
|
||
box-shadow: 0px 5px 40px #000;
|
||
border-radius: 10px;
|
||
background: #29220d;
|
||
transition: all 0.3s;
|
||
-moz-transition: all 0.3s;
|
||
-webkit-transition: all 0.3s;
|
||
-o-transition: all 0.3s;
|
||
min-width: 305px;
|
||
position: relative;
|
||
text-align: center;
|
||
color: #29220d;
|
||
|
||
}
|
||
.inlet .bd .item span{
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0.7vw;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
}
|
||
.inlet .bd .item:hover{
|
||
-moz-box-shadow: 0px 5px 60px #000;
|
||
box-shadow: 0px 5px 60px #000;
|
||
color: #ccaa05;
|
||
text-shadow: 1px 1px 1px #000;
|
||
}
|
||
.inlet .aside{
|
||
position: absolute;
|
||
right: 2vw;
|
||
top: 50%;
|
||
margin-top: -50px;
|
||
-moz-transition: all 0.3s;
|
||
-webkit-transition: all 0.3s;
|
||
-o-transition: all 0.3s;
|
||
-webkit-transform:translate(0, -50%);
|
||
-moz-transform:translate(0, -50%);
|
||
transform:translate( 0, -50%);
|
||
}
|
||
.inlet .aside .bg{
|
||
width: 10vw;
|
||
} |