@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root {
    --main-bg: #ECEBDE;
    --nav-bg: #C1BAA1;
    --main-txcl: #FFFFFF;
    --dm-bg-i: #C1BAA1;
    --dm-bg-ii: #A59D84;
    --dm-bg-iii: #6c644e
}

p {
    margin: 8px 0 8px 0;
}

body {
    margin: 0;
    background: var(--main-bg);
    font-family: 'League Spartan';
    color: var(--main-txcl);
}

.nav {
    background: var(--nav-bg);
    display: flex;
    flex-direction: row;
    border-bottom: 5px solid #A59D84;
}

.nav-nm {
    display: flex;
    flex-direction: column;
    margin-top: 36px;
    margin-right: 15px;
    font-size: 20px;
}

.nav-nm a {
    transform: scaleY(0.9);
}

.nav-tb {
    font-weight: 800;
    margin-top: 36px;
}

.nav-tb a {
    transform: scaleY(0.9);
    margin: 0 0 0 15px;
    font-size: 18px;
}

.main-in {
    width: 70vw;
    background: var(--nav-bg);
    margin-left: 96px;
    margin-top: 10vh;
    display: flex;
    flex-direction: row;
}

.main-in-cn a,
.main-dm a,
.main-pv-pi a,
.main-pv-pii a,
.main-pv-vd a {
    font-weight: 700;
    font-size: 30px;
}

.main-in-cn {
    margin: 10px 0 10px 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 50%;
}

.main-in-im {
    height: 100;
    width: 245px;
    flex-shrink: 0;
    margin-left: auto;
}

.main-in-im img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-dm {
    width: 70vw;
    display: flex;
    flex-direction: row;
    margin-left: 96px;
    margin-top: 15vh;
}

.main-dm-i {
    background: var(--dm-bg-i);
}

.main-dm-ii {
    background: var(--dm-bg-ii);
    margin: 0 10px 0 10px
}

.main-dm-iii {
    background: var(--dm-bg-iii);
}

.main-dm-i,
.main-dm-ii,
.main-dm-iii {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 5px 10px 5px;
}

.main-dm p {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 18px;
}

.main-dm p,
.main-dm a {
    overflow-wrap: break-word;
    word-break: break-word;
}

.main-pv {
    width: 70vw;
    display: flex;
    flex-direction: row;
    margin-left: 96px;
    margin-top: 40px;
    background: var(--dm-bg-ii);
    height: fit-content;
}

.main-pv-pi,
.main-pv-pii {
    width: 15vw;
    background: var(--nav-bg);
    padding: 10px 10px 10px 10px;
}

.main-pv-vd {
    margin: 0px 10px 0 10px;
    height: 100%;
    padding: 10px 0 10px 0;
    width: 40vw;
    top: 0;
    text-align: center;
}

.main-pv-vd iframe,
.main-pv-vd video {
    width: 100%;
}

footer {
    background: var(--nav-bg);
    display: flex;
    flex-direction: row;
    padding: 10px;
    margin-top: 40px;
}

.imp-left a,
.imp-right a {
    font-size: 12px;
    margin-bottom: 5px;
}

.imp-left,
.imp-right {
    display: flex;
    flex-direction: column;
    margin-right: 30px;
}

.main-ph {
    background: var(--nav-bg);
    width: 70vw;
    display: flex;
    flex-direction: row;
    height: fit-content;
    margin-left: 96px;
    margin-top: 40px
}

.main-ph img {
    flex: 1;
    max-width: 33.3%;
}