.main.view_homepage #document_title {
display: none;
}
.main.view_homepage {
width: 100%;
min-height: 34em;
height: calc(100% - 14em);
background-image: url("/data/f205233a-c443-4e6d-ba76-199a2641455f");
background-size: cover;
background-position: top center;
}
.main.view_homepage .homepage {
width: calc(100% - 16em);
margin: auto;
}
.homepage header {
float: left;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
background-color: #c55;
overflow: hidden;
}
.homepage header > div {
position: relative;
z-index: 110;
background-color: #fff;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
}
.homepage header > div > a {
display: block;
width: 20em;
height: 5.25em;
padding: 2.5em 1.5em 0.75em 1.5em;
margin: 0;
}
.homepage header > div > a > img {
width: inherit;
height: inherit;
padding: 0;
margin: 0;
border: none;
}
.homepage header > div ul {
list-style-type: none;
width: 15em;
padding: 0;
margin: auto;
overflow: hidden;
}
.homepage header > div ul > li {
float: left;
width: 5em;
height: 6em;
}
.homepage header > div ul > li > a {
display: block;
width: 4em;
height: 4em;
padding: 0.5em 0.5em 1.5em 0.5em;
line-height: 4em;
font-size: 1em;
text-decoration: none;
transition: all 0.3s;
}
.homepage header > div ul > li > a > span {
display: block;
width: inherit;
height: inherit;
text-align: center;
border-radius: 5em;
color: #fff;
font-size: 1.4em;
transition: font-size 0.1s;
}
.homepage header > div ul > li > a:hover {
width: 5em;
height: 5em;
padding: 0;
line-height: 5em;
}
.homepage header > div ul > li > a:hover > span {
font-size: 1.8em;
}
.homepage header > div ul > li:nth-child(1) > a > span {
background-color: #e41;
}
.homepage header > div ul > li:nth-child(2) > a > span {
background-color: #083;
}
.homepage header > div ul > li:nth-child(3) > a > span {
background-color: #918;
}
.homepage header > hgroup {
position: relative;
z-index: 100;
height: 0;
transition: height 1s;
}
.homepage header > hgroup.start {
height: 22.5em;
}
.homepage header > hgroup > ul {
position: absolute;
bottom: 0;
width: 100%;
height: 22.5em;
padding: 0;
margin: 0;
}
.homepage header > hgroup > ul > li {
padding: 0;
margin: 0;
line-height: 0;
}
.homepage header > hgroup > ul > li:first-child > a {
padding-top: 1em;
}
.homepage header > hgroup > ul > li:last-child > a {
padding-bottom: 1em;
}
.homepage header > hgroup > ul > li:nth-child(1) > a > div {
background-image: url("/data/972f8a94-32ac-428f-943a-d95431c2ea7b");
}
.homepage header > hgroup > ul > li:nth-child(2) > a > div {
background-image: url("/data/03a814df-58f2-4192-a5ec-2585da427033");
}
.homepage header > hgroup > ul > li:nth-child(3) > a > div {
background-image: url("/data/b2f561c0-f4c8-443a-b5ed-f2e909283812");
}
.homepage header > hgroup > ul > li:nth-child(4) > a > div {
background-image: url("/data/5722f0b6-514b-43ed-9110-8bb38b8e0326");
}
.homepage header > hgroup > ul > li:nth-child(5) > a > div {
background-image: url("/data/7c3e0bc9-8e68-45df-8a37-fa459e739737");
}
.homepage header > hgroup > ul > li:nth-child(6) > a > div {
background-image: url("/data/ce1f7724-2f2f-4969-81c2-39eecb403721");
}
.homepage header > hgroup > ul > li > a {
display: block;
padding: 0 2em;
text-decoration: none;
overflow: hidden;
}
.homepage header > hgroup > ul > li > a > div {
float: left;
width: 3em;
height: 3em;
margin: 0.25em;
border-radius: 4em;
background-color: #000;
background-size: 100% 100%;
transition: all 0.2s;
}
.homepage header > hgroup > ul > li > a > span {
display: block;
width: calc(100% - 4.5em);
padding: 0 1.5em 0 0;
margin: 0.75em auto 0 auto;
height: 2em;
line-height: 2em;
color: #000;
text-align: center;
border-top-right-radius: 0.4em;
border-bottom-right-radius: 0.4em;
background-color: #fff;
transition: all 0.2s;
}
.homepage header > hgroup > ul > li > a:not(.inactive):hover > div {
width: 3.5em;
height: 3.5em;
margin: 0;
}
.homepage header > hgroup > ul > li > a:not(.inactive):hover > span {
padding: 0 0.5em 0 0;
width: calc(100% - 1.5em);
font-size: 1.15em;
background-color: #fd6;
margin: 0.45em auto 0 auto;
}
.homepage header > hgroup > ul > li > a.inactive {
cursor: default;
}
.homepage header > hgroup > ul > li > a.inactive > span,
.homepage header > hgroup > ul > li > a.inactive:hover > span {
color: #777;
background-color: #ccc;
}
.homepage aside {
float: right;
}
.homepage aside > a {
display: block;
float: left;
width: 5em;
height: 5em;
margin: 0;
opacity: 0.9;
padding: 1em 0.25em;
transition: all 0.2s;
}
.homepage aside > a > img {
width: inherit;
height: inherit;
border: none;
}
.homepage aside > a:hover {
width: 5.5em;
height: 5.5em;
padding: 0.75em 0;
opacity: 1;
}