@charset "utf-8";
/* CSS Document */


.footer {background: #6c1112; font-size: 16px; line-height: 29px; color: #fff; letter-spacing: calc(1em / 1000 * 75); text-align: center; padding: 60px 0;}

.header-poster {width: 100%; height: 971px;}
.header-intro {width: 1200px; height: 216px; margin: 0 auto; box-sizing: border-box; padding: 28px 28px 28px 144px;}

.header-intro-scroll {width: auto; height: 160px; overflow-x: hidden; overflow-y: auto;}
.header-intro-scroll::-webkit-scrollbar {width: 6px; background: rgba(255, 255, 255, 0.1);}
.header-intro-scroll::-webkit-scrollbar-thumb {background-color: rgba(233, 80, 49, 0.2);}

.header-intro-content {width: 1006px; font-size: 18px; line-height: 32px; color: #282828; letter-spacing: calc(1em / 1000 * 90); text-align: justify;}
.header-intro-content,
.header-intro-content p {text-indent: 2em;}

.nav-bar {width: 1200px; height: 87px; display: flex;}
.nav-bar .item {min-width: 100px; height: 87px; flex: auto; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 20px; color: #fff; position: relative;}
.nav-bar .item:after {content: ''; display: block; width: 2px; height: 50px; background: #fff; position: absolute; left: 100%; top: 50%; margin-top: -25px;}
.nav-bar .item:last-child:after {display: none;}
.nav-bar .item.on {background: #f3c87c; color: #a10004; font-weight: bold;}
.nav-bar .item.on:after {display: none;}


.header-menu {width: 100%; height: 87px; background: #a10004; display: flex; justify-content: center; margin-top: 59px;}



.fixed-menu {width: 1920px; height: 87px; background: #a10004; display: flex; justify-content: center; position: fixed; left: 0; top: 0; z-index: 998; transform-origin: left top;}
.fixed-menu {display: none;}
.fixed-menu.show {display: flex;}


.md-row {width: 100%; background-size: 100% 100%; background-repeat: no-repeat; position: relative;}
.md-row-mask {width: 100%; height: 20px; background-size: 100% 100%; background-repeat: no-repeat; position: absolute; left: 0; top: -10px; z-index: 20;}

.md-content {
    --width: 630px;
    --font-size: 16px;
    --line-height: 29px;
    --letter-spacing: 10;
    --left: 0;
    --top: 0;
    --rows: 8;
}
.md-content {position: absolute; left: var(--left); top: var(--top); width: var(--width); font-size: var(--font-size); line-height: var(--line-height); color: #690101; letter-spacing: calc(1em / 1000 * var(--letter-spacing)); text-align: justify;}
.md-content,
.md-content p {text-indent: 2em;}
.md-content {max-height: calc(var(--line-height) * var(--rows)); overflow-x: hidden; overflow-y: auto; padding-right: 10px; box-sizing: border-box;}
.md-content::-webkit-scrollbar {width: 5px; background: rgba(0, 0, 0, 0.05);}
.md-content::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2);}


.md-button {
    --size: 110px;
    --left: 0;
    --top: 0;
}
.md-button {position: absolute; left: var(--left); top: var(--top); display: flex; align-items: flex-start; gap: 100px;}
.md-button .item {display: block; width: var(--size); height: var(--size); position: relative;}
.md-button .item img {width: var(--size); height: var(--size);}
.md-button .item:nth-child(1) {margin-top: 12px;}
.md-button .item:nth-child(2) {margin-top: 42px;}
.md-button .item:nth-child(4) {margin-top: 36px;}
.md-button .item:first-child:before {content: ''; display: block; width: 120px; height: 120px; border-radius: 50%; box-sizing: border-box; border: 2px solid #fb2527; position: absolute; left: 50%; margin-left: -60px; top: 50%; margin-top: -60px;}

.md-button.small {
    --size: 100px;
}

.md-button.small {gap: 90px;}
.md-button.small .item:nth-child(1) {margin-top: 12px;}
.md-button.small .item:nth-child(2) {margin-top: 40px;}
.md-button.small .item:nth-child(4) {margin-top: 32px;}
.md-button.small .item:first-child:before {width: 110px; height: 110px; margin-left: -55px; margin-top: -55px;}


.md-box {
    --left: 0;
    --top: 0;
    --width: 970px;
    --height: 550px;
}
.md-box {position: absolute; left: var(--left); top: var(--top); width: var(--width); height: var(--height);}
.md-box:before {content: ''; display: block; position: absolute; inset: 0; box-sizing: border-box; border: 2px solid #c82a00; z-index: 30; pointer-events: none;}
.md-video {display: block; width: var(--width); height: var(--height); position: relative;}
.md-video .image {font-size: 0; width: var(--width); height: var(--height);}
.md-video .image img {width: var(--width); height: var(--height);}
.md-video .title {width: 100%; height: 80px; background: rgba(0, 0, 0, 0.5); font-size: 29px; color: #fff; line-height: 80px; text-align: center; padding: 0 100px; box-sizing: border-box; position: absolute; left: 0; bottom: 0; z-index: 10;}
.md-video .title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.md-video .play {width: 52px; height: 52px; position: absolute; left: 30px; bottom: 14px; background: url("../images/play.png") no-repeat center / 100% 100%; z-index: 20;}