@charset "utf-8";

html, body, div, span,
a, img,
h1, h2, h3, h4, h5, h6, p,
strong, em, i,
ol, ul, li,
table, tr, th, td,
audio, video, form,
article, footer, header, main, menu, nav, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}

article, footer, header, main, menu, nav, section {
display: block;
}

html {
display: block;
width: 100%;
height: 100%;
-webkit-text-size-adjust: 100%;
}

.html- {
overflow-y: hidden;
}

body {
display: block;
width: auto;
min-width: 320px;
height: 100%;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 1em;
line-height: 1em;
font-weight: 400;
overflow-x: hidden;
overflow-y: scroll;
background-color: #2d2926;
}

.body- {
overflow-y: hidden;
}

@media screen and (min-width: 720px) {
body {background-color: #ffffff;}
.body- {overflow-y: scroll;}
}

a {
color: inherit;
text-decoration: none;
background-color: transparent;
outline: none;
}

img {
display: block;
border-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-weight: inherit;
font-size: inherit;
line-height: inherit;
}

p {
margin-bottom: 1.5em;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
}

p:last-child {
margin-bottom: 0;
}

strong {
font-weight: 700;
}

em, i {
font-style: italic;
}

ul, ol {
font-size: 0px;
list-style: none;
margin-bottom: inherit;
}

li {
position: relative;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/**/

.canvas {
position: relative;
display: table;
width: 100%;
height: 100%;
padding-bottom: 72px;
background-color: #ffffff;
border-bottom: 3px solid #ba0c2f;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.48s ease 0s;
-moz-transition: all 0.48s ease 0s;
-o-transition: all 0.48s ease 0s;
transition: all 0.48s ease 0s;
}

.canvas- {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

.-canvas {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: all 0s ease 0s;
-moz-transition: all 0s ease 0s;
-o-transition: all 0s ease 0s;
transition: all 0s ease 0s;
}

@media screen and (min-width: 720px) {
.canvas {-webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s;}
.canvas- {-webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(-0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0);}
}

.header {
position: relative;
width: auto;
margin: 6px;
}

.mast {
float: left;
width: auto;
height: 108px;
padding-top: 24px;
padding-bottom: 24px;
}

.logo {
width: 108px;
height: 108px;
margin-left: 3px;
}

.navigation {
float: right;
width: 25%;
height: 156px;
}

.mark-menu {
position: relative;
width: 72px;
height: 72px;
margin-top: 42px;
margin-right: auto;
margin-left: auto;
cursor: pointer;
}

.mark-menu-bars {
position: absolute;
top: 34px;
left: 25px;
width: 22px;
height: 4px;
margin-right: auto;
margin-left: auto;
background-color: #2d2926;
}

.mark-menu-bars:before {
content: '';
position: absolute;
top: -7px;
width: 20px;
height: 4px;
background-color: #2d2926;
}

.mark-menu-bars:after {
content: '';
position: absolute;
top: 7px;
width: 18px;
height: 4px;
background-color: #2d2926;
}

.mark-close {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 72px;
height: 72px;
cursor: pointer;
}

.mark-close-bars {
position: absolute;
top: 27px;
left: 34px;
width: 4px;
height: 18px;
background-color: #ffffff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(45deg);
}

.mark-close-bars:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 18px;
background-color: #ffffff;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

.menu-m {
position: absolute;
z-index: 10;
top: 0;
right: 0;
bottom: 0;
left: 100%;
width: 0;
background-color: #2d2926;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.24s ease 0s;
-moz-transition: all 0.24s ease 0s;
-o-transition: all 0.24s ease 0s;
transition: all 0.24s ease 0s;
overflow: hidden;
}

.menu-m- {
left: 0;
width: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

.-menu-m {
-webkit-transform: translate(100%, 0);
-moz-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}

.menu-m-group {
margin-top: 53px;
margin-bottom: 45px;
margin-left: 53px;
width: auto;
}

.menu-m-btn {
display: block;
position: relative;
float: left;
clear: left;
margin-bottom: 8px;
padding-top: 12px;
padding-right: 18px;
padding-bottom: 16px;
padding-left: 18px;
color: #ffffff;
font-size: 18px;
line-height: 1em;
font-weight: 700;
white-space: nowrap;
}

.menu-m-btn-dd {
display: block;
position: relative;
float: left;
clear: left;
padding-top: 12px;
padding-right: 18px;
padding-bottom: 9px;
padding-left: 18px;
color: #969492;
font-size: 18px;
line-height: 1em;
font-weight: 700;
white-space: nowrap;
}

.menu-m-btn:after {
content: '';
position: absolute;
right: 19px;
bottom: 3px;
left: 19px;
height: 3px;
background-color: #ffffff;
}

.menu {
display: none;
}

.menu-group {
display: table-cell;
width: auto;
height: 100%;
font-size: 0;
vertical-align: middle;
text-align: right;
}

.menu-btn {
display: inline-block;
position: relative;
padding-top: 12px;
padding-right: 15px;
padding-bottom: 16px;
padding-left: 15px;
color: #2d2926;
font-size: 18px;
line-height: 1em;
font-weight: 400;
white-space: nowrap;
}

.menu-btn:hover {
color: #ba0c2f;
}

.-yah {
position: relative;
color: #ba0c2f;
}

.-yah:after {
content: '';
position: absolute;
right: 16px;
bottom: 3px;
left: 16px;
height: 2px;
background-color: #ba0c2f;
}

.menu-dd- {
position: relative;
display: inline-block;
cursor: pointer;
}

.menu-dd {
display: block;
position: absolute;
z-index: -2;
margin-left: -9px;
padding-right: 9px;
padding-bottom: 9px;
padding-left: 9px;
background-color: #ffffff;
text-align: left;
opacity: 0;
}

.menu-dd-:hover .menu-dd {
z-index: 2;
opacity: 1;
}

.mark-dd {
position: relative;
display: inline-block;
width: 0;
height: 0;
top: 1px;
margin-right: -3px;
margin-left: 9px;
border-top: 4px solid #969492;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

.mark-dd:before {
content: '';
position: absolute;
left: -1px;
bottom: 3px;
width: 2px;
height: 12px;
background-color: #969492;
}

.canvas-index {
position: relative;
width: auto;
margin-top: 0;
margin-right: 6px;
margin-bottom: 24px;
margin-left: 6px;
}

.slot {
position: relative;
}

.slot-start {
position: relative;
width: auto;
overflow: hidden;
}

.slot-start-size {
position: relative;
height: 0;
padding-bottom: 56.25%;
background-color: #cac9c9;
}

.slot-of {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.slot-h {
position: relative;
width: auto;
margin-bottom: 6px;
padding-top: 18px;
padding-right: 12px;
padding-bottom: 30px;
padding-left: 12px;
color: #2d2926;
font-size: 16px;
line-height: 1.5em;
font-weight: 700;
}

.slot-p {
width: auto;
margin-top: 4px;
margin-bottom: 0;
padding-right: 1px;
padding-bottom: 2px;
padding-left: 1px;
font-size: 14px;
line-height: 1.5em;
font-weight: 400;
}

.slot-h:hover {
color: #ba0c2f;
}

.slot-go {
position: absolute;
bottom: -8px;
left: 5px;
width: 108px;
height: 36px;
pointer-events: none;
}

.slot-go:before {
content: '';
position: absolute;
width: auto;
right: 12px;
left: 9px;
bottom: 17px;
height: 2px;
background-color: #969492;
}

.slot-go:after {
content: '';
position: absolute;
top: 12px;
right: 9px;
width: 0; 
height: 0; 
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #969492;
}

.slot-h:hover + .slot-go:before {
background-color: #ba0c2f;
}

.slot-h:hover + .slot-go:after {
border-left: 6px solid #ba0c2f;
}

.canvas-page {
position: relative;
width: auto;
margin-top: 22px;
margin-right: 6px;
margin-bottom: 18px;
margin-left: 6px;
}

.page-h {
margin-right: 12px;
margin-left: 12px;
color: #2d2926;
font-size: 18px;
line-height: 1.5em;
font-weight: 700;
}

.page-p {
margin-right: 12px;
margin-bottom: 1.5em;
margin-left: 12px;
font-size: 16px;
line-height: 1.5em;
font-weight: 400;
text-align: justify;
}

.slot-subject {
width: auto;
margin-top: 32px;
margin-bottom: 30px;
overflow: hidden;
}

.slot-subject-size {
position: relative;
height: 0;
padding-bottom: 56.25%;
background-color: #cac9c9;
}

.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: 72px;
margin-right: 20px;
margin-left: 20px;
border-top: solid 3px #ba0c2f;
}

.footer-btn {
float: left;
position: relative;
margin-left: -13px;
margin-top: 9px;
padding-top: 13px;
padding-right: 12px;
padding-bottom: 16px;
padding-left: 12px;
color: #ba0c2f;
font-size: 16px;
line-height: 1em;
font-weight: 700;
white-space: nowrap;
}

.canvas-home {
display: table;
width: 100%;
height: 50%;
height: 50vh;
}

.canvas-logo {
display: table-cell;
width: auto;
height: 100%;
vertical-align: middle;
}

.logo-home {
width: 216px;
height: 216px;
margin-top: -108px;
margin-right: auto;
margin-bottom: 48px;
margin-left: auto;
}

@media screen and (min-width: 360px) {
.slot-h {padding-top: 16px; padding-bottom: 29px; font-size: 18px;}
}

@media screen and (min-width: 576px) {
.header {margin-top: 36px; margin-right: 36px; margin-left: 36px;}
.logo {margin-left: -9px;}
.canvas-index {margin-top: 0; margin-right: 36px; margin-bottom: 30px; margin-left: 36px;}
.slot-h {padding-top: 27px; padding-right: 24px; padding-bottom: 45px; padding-left: 24px; font-size: 24px; font-weight: 300;}
.slot-p {margin-top: 9px; padding-bottom: 3px; font-size: 16px;}
.slot-go {bottom: 1px; left: 18px;}
.canvas-page {margin-top: 26px; margin-right: 36px; margin-left: 36px;}
.page-h {margin-right: 15px; margin-left: 15px; font-size: 30px;}
.page-p {margin-right: 18px; margin-left: 18px;}
.slot-subject {margin-top: 46px;}
.footer {margin-right: 36px; margin-left: 36px; border-top: solid 2px #ba0c2f;}
.footer-btn {font-weight: 400;}
.logo-home {width: 288px; height: 288px;}
}

@media screen and (min-width: 720px) {
.header {height: 156px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}
.mast {position: absolute; z-index: 2; top: 0; left: 0; width: 144px; height: 144px; padding-top: 48px; padding-right: 36px; padding-bottom: 48px; padding-left: 36px;}
.logo {width: 144px; height: 144px; margin-left: 0;}
.navigation {float: none; width: auto; height: 100%; margin-right: 33px; margin-left: 216px;}
.mark-menu {display: none;}
.menu-m {display: none;}
.menu {display: table; position: relative; top: 13px; left: auto; width: 100%; height: 100%;}
.canvas-index {margin-top: 84px; margin-right: 72px; margin-bottom: 39px; margin-left: 72px;}
.slot {margin-right: 9px; margin-left: 9px;}
.canvas-page {margin-top: -6px; margin-right: 72px; margin-bottom: 20px; margin-left: 72px;}
.page-h {margin-right: 0; margin-left: 168px;}
.page-p {margin-right: 24px; margin-left: 24px; font-size: 18px;}
.slot-subject {margin-bottom: 34px;}
.footer {margin-right: 48px; margin-left: 48px;}
.footer-btn {margin-left: -12px;}
.logo-home {margin-top: -36px; margin-bottom: 72px;}
}

@media screen and (min-width: 864px) {
.navigation {margin-right: 30px;}
.menu-btn {padding-right: 18px; padding-left: 18px;}
.-yah:after {right: 19px; left: 19px;}
.slot {margin-right: 33px; margin-left: 33px;}
.page-p {margin-right: 48px; margin-left: 48px;}
}

@media screen and (min-width: 936px) {
.canvas-index {margin-right: 108px; margin-left: 108px;}
.canvas-page {margin-right: 108px; margin-left: 108px;}
.page-h {margin-left: 156px;}
.page-p {margin-right: 60px; margin-left: 60px;}
}

@media screen and (min-width: 1080px) {
.header {height: 144px;}
.mast {padding-top: 36px; padding-bottom: 36px;}
.navigation {height: 100%; margin-right: 66px; margin-left: 288px;}
.menu {top: 7px;}
.mast {padding-right: 72px; padding-left: 72px;}
.canvas-index {margin-top: 72px; margin-right: 144px; margin-left: 144px;}
.slot-start-size {padding-bottom: 39.375%;}
.canvas-page {margin-right: 264px; margin-bottom: 18px; margin-left: 264px;}
.page-h {margin-right: 24px; margin-left: 24px;}
.page-p {margin-right: 24px; margin-left: 24px; font-size: 16px;}
.slot-subject {margin-top: 34px; margin-bottom: 30px;}
.footer {margin-right: 84px; margin-left: 84px;}
}

@media screen and (min-width: 1152px) {
.canvas-index {margin-right: 192px; margin-left: 192px;}
.canvas-page {margin-bottom: 20px;}
.page-p {margin-right: 24px; margin-left: 24px; font-size: 18px;}
.slot-subject {margin-bottom: 34px;}
}

@media screen and (min-width: 1224px) {
.canvas-page {margin-right: 288px; margin-left: 288px;}
}

@media screen and (min-width: 1332px) {
.header {width: 1296px;}
.canvas-index {width: 912px; margin-right: auto; margin-left: auto;}
.canvas-page {width: 720px; margin-right: auto; margin-left: auto;}
.page-h {margin-right: 36px; margin-left: 36px;}
.page-p {margin-right: 36px; margin-left: 36px;}
.footer {width: 1128px; margin-right: auto; margin-left: auto;}
}

@media screen and (min-width: 1404px) {
.header {width: auto; height: 156px;}
.mast {padding-top: 48px; padding-bottom: 48px;}
.menu {top: 13px;}
.canvas-index {width: auto; margin-right: 192px; margin-left: 192px;}
.canvas-page {width: 792px; margin-right: auto; margin-left: auto;}
.slot-subject {margin-top: 46px;}
.footer {width: auto; margin-right: 84px; margin-left: 84px;}
}

@media screen and (min-width: 1548px) {
.header {width: 1512px;}
.canvas-index {width: 1128px; margin-right: auto; margin-left: auto;}
.footer {width: 1344px; margin-right: auto; margin-left: auto;}
}

@media screen and (min-width: 1656px) {
.header {width: 1584px;}
.canvas-index {width: 1200px;}
.footer {width: 1416px;}
}

/*auxiliary*/

.img-of {
width: 100%;
height: 100%;
-webkit-object-fit: cover;
-moz-object-fit: cover;
-o-object-fit: cover;
object-fit: cover;
-webkit-object-position: 50% 50%;
-moz-object-position: 50% 50%;
-o-object-position: 50% 50%;
object-position: 50% 50%;
font-family: 'object-fit: cover; object-position: 50% 50%;';
}

.group:after {
content: "";
display: table;
clear: both;
}

.wsnw {
white-space: nowrap;
}

* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}