@import url(./animate.css);
@import url(./menu_footer.css);
@font-face { font-family: 'Gills Sans MT Condensed'; src: url(../fonts/GILC____.TTF); }
@font-face { font-family: 'Geometr231B'; src: url(../fonts/GEO231B.TTF); }
@font-face { font-family: 'bank_gothic_light_bt'; src: url(../fonts/bank_gothic_light_bt.ttf); }
header nav,footer .body { background: #f4f5f6; }
.site.side-open { height: 100vh; }
.P_header .page_heading {
    padding: 10px 0 5px 0;
    margin: 8vh auto 12vh auto;
    font-size: 36px;
    max-width: 550px;
    border-bottom: 1px solid #e8e8e9;
    color: #000;
    font-family: 'Gills Sans MT Condensed';
}
.top {
    position: relative;
    width: 100%;
    background: #f4f5f6;
    padding: 0 80px;
    display: grid;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -15px 15px -15px #c9c9c9,
        0 80px 80px -80px #c9c9c9
}
.top::before,.top::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 15%;
    background: #d6d6d6;
    z-index: 2;
}
.top::before { left: 0; }
.top::after { right: 0; }
.top ul {
    height: auto;
    margin: auto 0;
    z-index: 3;
}
.top li {
    position: relative;
    list-style: none;
    display: inline-block;
    font-family: 'bank_gothic_light_bt';
    font-size: 2.2em;
    margin: 0 30px;
    height: 35vh;
    line-height: 35vh;
    color: #898a8b;
    text-shadow: 0 0 1px #000;
    cursor: pointer;
}
.top li.active::before {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
    border-left: 25px solid #f4f5f6;
    border-right: 25px solid #fff;
    border-top: 25px solid #f4f5f6;
    border-bottom: 25px solid #fff;
    height: 50px;
    width: 50px;
}
.box {
    width: 100%;
    padding: 20vh 0;
}
.box .content {
    width: 85%;
    margin: 0 auto;
    height: auto;
    box-shadow: 0 0 5px #c9c9c9;
    display: grid;
    grid-template-columns: 12% 1fr;
}
.box .content .left {
    background: #f4f5f6;
    box-shadow: 10px 0 10px -10px #c9c9c9;
}
.box .content .right { padding: 8vh 20px 8vh 10px; }
.box .content .right.change { animation: srink 0.5s linear 1; }
@keyframes srink {
    0%,100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(0) rotate(360deg); }
}
.box .content .right .holder {
    width: 90%;
    margin: 0 auto;
    height: 0;
    overflow: hidden;
    transition: all 0.2s;
}
.box .content .right .holder.active {
    margin: 10vh auto;
    height: auto;
    overflow: visible;
    transition: all 0.2s;
}
.box .content .right .holder.Video {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 60px;
    text-align: center;
}
.box .content .right .holder.Video .display {
    grid-column: 1 / -1;
    height: 70vh;
    border-bottom: 1px solid #333;
}
.box .content .right .holder.Video .display video,
.box .content .right .holder.Video .display iframe {
    width: 100%;
    height: 60vh;
}
.box .content .right .holder.Video .item video {
    height: 35vh;
    width: 100%;
}
.box .content .right .holder.Video .item .date {
    margin: 3vh 0 0 0;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 15px;
    border-bottom: 1px solid #333;
}
.box .content .right .title {
    position: relative;
    font-family: 'bank_gothic_light_bt';
    font-size: 28px;
}
.box .content .right .title::before {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 0;
    height: 1px;
    width: 100%;
    background: #333;
}
.box .content .right .holder.Text .matter {
    padding: 3vh 15px 3vh 50px;
}
.box .content .right .holder.Image img { margin: 5vh 0; }