:root {
    --gap: 14;
    --main-width: calc(1454px + 28px);
    --main-width: 100vw;/**/
    --content-width: calc(var(--main-width) - 28px);

    --width: 1454; /* 16 */
    --height: 818; /* 9 */

    --hw-ratio: calc(var(--height) / var(--width));
    --page-height: calc(var(--content-width) * var(--hw-ratio));
    --h-ratio: calc(var(--page-height) / var(--height));
    --w-ratio: calc(var(--content-width) / var(--width));
    --page-gap-span: calc(var(--gap) * var(--h-ratio));
    --content-left: calc(300 * var(--h-ratio));
    --content-top: calc(130 * var(--h-ratio));

    --content-font: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    --head-font: 'Arial MT', 'Arial', sans-serif;
    --font1: 'dengxian';
    --font2: 'bahnschrift';
}
/* 1454px + 28px */
@media (min-width: 1482px) {
    :root {
        /* 1454 是设计稿的宽度 */
        --main-width: calc(1454px + 28px);
    }
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    background-color: #8d8d8d;
    font-family: var(--content-font);
}
.main {
    display: flex;
    flex-direction: column;
    gap: var(--page-gap-span);
    padding: var(--page-gap-span);
    margin: 0 auto;
    font-size: calc(32 * var(--h-ratio));
    min-width: var(--main-width);
    max-width: var(--main-width);
}
.main > div {
    position: relative;
    background-color: #fff;

    /*aspect-ratio: 16 / 9;*/
    height: var(--page-height);/**/
    /*border: 1px solid #f0f0f0;*/
    box-shadow: 0px 0px calc(10 * var(--h-ratio)) rgba(0, 0, 0, 0.5);
}
.main > div > div {
    position: absolute;
}

.page-head {
    display: flex;
    top: calc(44 * var(--h-ratio));
    left: calc(44 * var(--h-ratio));
    right: calc(44 * var(--h-ratio));
    font-size: calc(15 * var(--h-ratio));
    font-family: var(--head-font);
}
.page-head-left {
    color: #bf2e28;
    height: calc(35 * var(--h-ratio));
    border-left: calc(5 * var(--h-ratio)) solid #bf2e28;
    padding-left: calc(14 * var(--h-ratio));
}
.page-head-left-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-head-left-content :last-child {
    margin-top: auto;
}
.page-head-right {
    color: #fff;
    text-align: center;
    width: calc(35 * var(--h-ratio));
    height: calc(35 * var(--h-ratio));
    line-height: calc(35 * var(--h-ratio));
    background-color: #404040;
    border-radius: 50%;
    margin-left: auto;
}

.page-title {
    font-family: var(--content-font);
    left: calc(78 * var(--h-ratio));
    top: calc(132 * var(--h-ratio));
}
.page-title-cn {
    color: #404040;
    font-size: calc(52 * var(--h-ratio));
    font-weight: 300;
    /*line-height: calc(55 * var(--h-ratio));*/
    line-height: 120%;
}
.page-title-en {
    color: #bfbfbf;
    font-size: calc(15 * var(--h-ratio));
    margin-top: calc(3 * var(--h-ratio));
    margin-left: calc(3 * var(--h-ratio));
}

.page-bottom {
    background-color: #f2f2f2;
    --back-height: calc(46 * var(--h-ratio));
    line-height: var(--back-height);
    height: var(--back-height);
    left: calc(18 * var(--h-ratio));
    right: calc(18 * var(--h-ratio));
    bottom: calc(8 * var(--h-ratio));
    border-radius: calc(23 * var(--h-ratio));
    display: flex;
    align-items: center;
    font-family: Arial MT, Arial, sans-serif;
}
/* 背景透明 */
.page-bottom-hidden {
    background: transparent!important;
}
.page-bottom-left {
    color: #b02418;
    font-weight: bolder;
    font-size: calc(18 * var(--h-ratio));
    margin-left: calc(25 * var(--h-ratio));
}
.page-bottom-right {
    font-size: calc(11 * var(--h-ratio));
    color: rgb(166, 166, 166);
    margin-left: auto;
    margin-right: calc(28 * var(--h-ratio));
    margin-top: calc(3 * var(--h-ratio));
}
.page-bottom-right > a {
    color: rgb(166, 166, 166);
    text-decoration: none;
}
.page-bottom-right > span {
    margin: 0 calc(10 * var(--h-ratio));;
}

/* 
 * front
 */

.front {
    color: #fff;
    background: url("../images/front-back.png") no-repeat right / cover;
}
.front-left {
    color: #fff;
    background-color: #b02418;
    height: 100%;
    width: calc(30 * var(--h-ratio));
    font-size: calc(12 * var(--h-ratio));
    line-height: calc(30 * var(--h-ratio));
    text-align: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* 旋转使其从下到上 */
}
.front-title {
    left: calc(116 * var(--h-ratio));
    top: calc(84 * var(--h-ratio));
}
.front-title-cn {
    font-family: var(--content-font);
    font-size: calc(45 * var(--h-ratio));
    font-weight: 300;
}
.front-title-en {
    font-family: var(--head-font);
    font-size: calc(95 * var(--h-ratio));
    line-height: 90%;
}
.front-bottom {
    font-size: calc(18 * var(--h-ratio));
    width: calc(1290 * var(--h-ratio));
    left: calc(118 * var(--h-ratio));
    top: calc(740 * var(--h-ratio));
    display: flex;
}
.front-bottom-left {
    font-size: calc(13 * var(--h-ratio));
}
.front-bottom-right {
    margin-left: auto;
}

/* 关于我们 */

.about-us {
    left: var(--content-left);
    top: var(--content-top);
    width: calc(978 * var(--h-ratio));
}
.vision {
    color: #404040;
    font-size: calc(21 * var(--h-ratio));
    font-weight: 300;
}
.vision-content-cn {
    color:#bf2e28;
    font-size: calc(45 * var(--h-ratio));
}
.vision-content-en {
    color: #bfbfbf;
    font-size: calc(16 * var(--h-ratio));
    font-weight: bolder;
}
.vision, .vision-content-en {
    padding-left: calc(5 * var(--h-ratio));
}
.about-us-content {
    color: #404040;
    font-size: calc(22 * var(--h-ratio));
    font-weight: 300;
}

.sofunny-banner {
    top: calc(464 * var(--h-ratio));
    width: 100%;
    height: calc(276 * var(--h-ratio));
    background: url("../images/sofunny-banner.png") no-repeat center / cover;
}

/* 概况 */

.situation {
    left: var(--content-left);
    top: var(--content-top);
    width: calc(1040 * var(--h-ratio));
    font-size: calc(24 * var(--h-ratio));
    font-weight: 300;
    display: flex;
    justify-self: start;
    align-items: start;
    color: #404040;
}
.situation span {
    color: #b02418;
}
.situation-left {
    flex: 2 0 0;
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--h-ratio));
}
.situation-right {
    flex: 3 0 0;
}
.situation-pic {
    width: calc(1427 * 0.72 * var(--h-ratio));
    height: calc(645 * 0.72 * var(--h-ratio));
    background: url("../images/situation-pic.png") no-repeat center / cover;
    right: -1px;
    bottom: 0;
}

/* 历程 */

.licheng-pic-1, .licheng-pic-2 {
    left: calc(246 * var(--h-ratio));
    top: calc(160 * var(--h-ratio));
    width: calc(1150 * var(--h-ratio));
    height: calc(193 * var(--h-ratio));
}
.licheng-pic-1 {
    background: url("../images/licheng-pic-1.png") no-repeat center / cover;
}
.licheng-pic-2 {
    background: url("../images/licheng-pic-2.png") no-repeat center / cover;
}
.licheng-content {
    left: calc(282 * var(--h-ratio));
    top: calc(391 * var(--h-ratio));
    width: calc(1150 * var(--h-ratio));
    height: calc(380 * var(--h-ratio));
    color: #000;
    font-family: var(--font1);
    font-size: calc(14 * var(--h-ratio));
    columns: 2;
}

.licheng-content > div {
    padding-bottom: 0.2em;
}
.licheng-content span {
    padding-right: 1.5%;
}
.licheng-content-2 {
    column-fill: auto;
}
.column-force-break {
    break-before: column; 
}

/*
 * Game Content
 */

 .game-content-1, .game-content-2, .team-content {
    left: var(--content-left);
    top: var(--content-top);
    display: flex;
    font-weight: 300;
 }
.game-content-1 {
    width: calc(997 * var(--h-ratio));
}
.game-content-left {
    display: grid;
    grid-template-areas: 
    "icon title"
    "tags tags"
    "items items"
    ;
    grid-template-columns: calc(64 * var(--h-ratio)) 1fr;
    column-gap: calc(18 * var(--h-ratio));
    row-gap: calc(10 * var(--h-ratio));
}
.game-content-icon {
    grid-area: icon;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.game-content-icon .app-link {
    position: absolute;
    width: calc(26 * var(--h-ratio));
    height: calc(26 * var(--h-ratio));
    bottom: calc(2 * var(--h-ratio));
    right: calc(-6 * var(--h-ratio));
}
.game-content-icon .app-icon {
    width: calc(64 * var(--h-ratio));
    height: calc(64 * var(--h-ratio));
}
.game-content-title {
    grid-area: title;
    flex: 0 0 auto;
}
.game-content-title-en {
    color: #7f7f7f;
    font-size: calc(15 * var(--h-ratio));
    font-weight: bolder;
}
.game-content-title-cn {
    color: #404040;
    font-size: calc(43 * var(--h-ratio));
}
.game-content-title-cn a {
    color: #404040;
    text-decoration: none;
    border-bottom: 0.06em solid #404040;
}
.game-content-tags {
    grid-area: tags;
    color: #7f7f7f;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 3%;
}
.game-content-tags > div {
    flex: 0 0 auto;
    font-size: calc(12 * var(--h-ratio));
    border: calc(1 * var(--h-ratio)) solid #d9d9d9;
    border-radius: calc(10 * var(--h-ratio));
    padding: 0.5% 2%;
}
.game-content-items {
    grid-area: items;
    color: #0d0d0d;
    font-size: calc(22 * var(--h-ratio));
}
.game-content-items > ul {
    margin-left: -3%;
}
.game-content-items > ul > li {
    margin-bottom: 3%;
}
.game-content-1-right {
    color: #7f7f7f;
    margin-left: auto;
    width: calc(600 * var(--h-ratio));
    font-size: calc(22 * var(--h-ratio));
}
.game-content-2 {
    /*width: calc(1113 * var(--h-ratio));*/
    right: calc(40 * var(--h-ratio));
    align-items: flex-start;
}
.game-content-info {
    color: #7f7f7f;
    width: calc(380 * var(--h-ratio))!important;
    padding-top: calc((55 - 10) * var(--h-ratio));
}
.game-content-2-right {
    margin-left: auto;
    width: calc(656 * var(--h-ratio));
    display: flex;
}
/*
.game-content-2-right > div {
    margin-top: calc(-72 * var(--h-ratio));
    width: calc(313 * var(--h-ratio));
    height: calc(672 * var(--h-ratio));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}
*/
.game-content-2-right > img {
    margin-top: calc(-36 * var(--h-ratio));
    width: calc(313 * var(--h-ratio));
    height: calc(672 * var(--h-ratio));

    /*box-shadow: -1px 3px calc(15 * var(--h-ratio)) rgba(0, 0, 0, 0.4);*/
}
.game-content-2-right :last-child {
    margin-left: auto;
}

.sausage-back {
    background: url("../images/sausage-back.png") no-repeat center bottom / cover;
}
.sausage-honour-title, .ulala-honour-title {
    left: var(--content-left);
    top: var(--content-top);
    font-size: calc(40 * var(--h-ratio));
    font-weight: 300;
    color: #c33d3b;
}
.sausage-honour-content {
    left: var(--content-left);
    top: calc(250 * var(--h-ratio));
    width: calc(1064 * var(--h-ratio));
    font-size: calc(22 * var(--h-ratio));
    color: #404040;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, calc(157 * var(--h-ratio)));
    row-gap: 40%;
    column-gap: 3%;
}
.sausage-honour-content :nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}
.sausage-honour-content :nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1 / 2;
}
.sausage-honour-content :nth-child(3) {
    grid-column: 5 / 7;
    grid-row: 1 / 2;
}
.sausage-honour-content :nth-child(4) {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}
.sausage-honour-content :nth-child(5) {
    grid-column: 4 / 6;
    grid-row: 2 / 3;
}
.sausage-honour-content > div, .ulala-honour-content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url("../images/honour-flower-left.png") no-repeat 5% center / contain,
        url("../images/honour-flower-right.png") no-repeat 95% center / contain;
}
.sausage-honour-content > div :nth-child(1) {
    font-size: calc(23 * var(--h-ratio));
}
.sausage-honour-content > div :nth-child(2) {
    font-size: calc(28 * var(--h-ratio));
}
.sausage-honour-content > div :nth-child(3) {
    color: #bfbfbf;
    font-size: calc(17 * var(--h-ratio));
    border-top: calc(1 * var(--h-ratio)) solid #dfdfdf;
    padding: 1% calc(10 * var(--h-ratio)) 0;
}
.sausage-honour-pic {
    left: calc(69 * var(--h-ratio));
    top: calc(143 * var(--h-ratio));
    right: calc(70 * var(--h-ratio));
    /*width: calc(1313 * var(--h-ratio));*/
    height: calc(534 * var(--h-ratio));
    background: url("../images/sausage-honour.png") no-repeat center / 100% 100%;
}

.ulala-back {
    background: url("../images/ulala-back.png") no-repeat center bottom / cover;
}
.ulala-honour-title {
    left: var(--content-left);
    top: var(--content-top);
    font-size: calc(40 * var(--h-ratio));
    font-weight: 300;
    color: #c33d3b;
}
.ulala-honour-content {
    left: var(--content-left);
    top: calc(250 * var(--h-ratio));
    width: calc(1064 * var(--h-ratio));
    font-size: calc(22 * var(--h-ratio));
    color: #404040;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, calc(157 * var(--h-ratio)));
    row-gap: 40%;
    column-gap: 5%;
}
.ulala-honour-content > div :nth-child(1) {
    font-size: calc(23 * var(--h-ratio));
}
.ulala-honour-content > div :nth-child(2) {
    font-size: calc(28 * var(--h-ratio));
}
.ulala-honour-content > div :nth-child(3) {
    color: #bfbfbf;
    font-size: calc(17 * var(--h-ratio));
    border-top: calc(1 * var(--h-ratio)) solid #dfdfdf;
    padding: 1% calc(10 * var(--h-ratio)) 0;
}
.ulala-honour-pic {
    left: calc(69 * var(--h-ratio));
    top: calc(143 * var(--h-ratio));
    right: calc(70 * var(--h-ratio));
    /*width: calc(1314 * var(--h-ratio));*/
    height: calc(546 * var(--h-ratio));
    background: url("../images/ulala-honour.png") no-repeat center / cover;
}
.ulala-honour-pic img {
    width: 100%;
    height: 100%;
}

.ulala-lite-back {
    background: url("../images/ulala-lite-back.png") no-repeat right center / 80% 100%;
}
.zhongqiu-back {
    background: url("../images/zhongqiu-back.png") no-repeat right center / 80% 100%;
}
.stone-back {
    background: url("../images/stone-back.png") no-repeat right center / 80% 100%;
}
.liechezhang-back {
    background: url("../images/liechezhang-back.png") no-repeat right center / 80% 100%;
}
.mengchongrouge-back {
    background: url("../images/mengchongrouge-back.png") no-repeat right center / 80% 100%;
}
.yumaoqiu-back {
    background: url("../images/yumaoqiu-back.png") no-repeat right center / 80% 100%;
}

/* 企业文化 */

.culture-back {
    background: url("../images/culture-back.png") no-repeat center top / 90%;
}
.culture-vision, .culture-value {
    font-size: calc(18 * var(--h-ratio));
    font-weight: 300;
}
.culture-vision {
    left: var(--content-left);
    top: var(--content-top);
    width: calc(320 * var(--h-ratio));
}
.culture-value {
    left: calc(989 * var(--h-ratio));
    top: var(--content-top);
    width: calc(330 * var(--h-ratio));
}
.culture-vision-title, .culture-value-title {
    color: #404040;
    font-size: calc(28 * var(--h-ratio));
    font-weight: normal;
}
.culture-vision-content, .culture-value-content {
    color: #c33d3b;
    font-size: calc(31 * var(--h-ratio));
}
.culture-vision-desc, .culture-value-desc {
    color: #595959;
    font-size: calc(18 * var(--h-ratio));
}
.culture-vision-title {
    margin-bottom: 2%;
}
.culture-value-title {
    margin-bottom: 5%;
}
.culture-value-content {
    margin-bottom: 2%;
}
.culture-value-desc {
    margin-bottom: 6%;
}

/*
 * 创作空间
 */

.team-content {
    width: calc(1104 * var(--h-ratio));
}
.team-content-left {
    flex: 2.6 0 0;
}
.team-content-left-title, .work-title {
    color: #c33d3b;
    font-size: calc(40 * var(--h-ratio));
    font-weight: 300;
}
.team-content-left-content, .work-content {
    color: #404040;
    font-size: calc(21 * var(--h-ratio));
    line-height: 120%;
    font-weight: 300;
}
.team-content-right {
    flex: 4.4 0 0;
}
.team-pic-1, .team-pic-2, .team-pic-3 {
    left: calc(793 * var(--h-ratio));
    top: calc(143 * var(--h-ratio));
    right: calc(46 * var(--h-ratio));
    /*width: calc(614 * var(--h-ratio));*/
    height: calc(573 * var(--h-ratio));
}
.team-pic-1 {
    background: url("../images/team-1.png") no-repeat center / cover;
}
.team-pic-2 {
    background: url("../images/team-2.png") no-repeat center / cover;
}
.team-pic-3 {
    background: url("../images/team-3.png") no-repeat center / cover;
}
.work {
   left: var(--content-left);
   top: var(--content-top);
   width: calc(1030 * var(--h-ratio));
}
.work-pic {
    top: calc(374 * var(--h-ratio));
    width: 100%;
    height: calc(326 * var(--h-ratio));
    background: url("../images/work.png") no-repeat center / cover;
}

/* 
 * 培训成长 
 */

.train > div {
    position: absolute;
    box-shadow: 0px 0px calc(15 * var(--h-ratio)) rgba(0, 0, 0, 0.1);
    padding: calc(30 * var(--h-ratio));
    line-height: 80%;
}
.train > :nth-child(1) {
    left: calc(329 * var(--h-ratio));
    top: calc(154 * var(--h-ratio));
    width: calc(294 * var(--h-ratio));
}
.train > :nth-child(2) {
    left: calc(293 * var(--h-ratio));
    top: calc(411 * var(--h-ratio));
    width: calc(303 * var(--h-ratio));
}
.train > :nth-child(3) {
    left: calc(957 * var(--h-ratio));
    top: calc(133 * var(--h-ratio));
    width: calc(320 * var(--h-ratio));
}
.train > :nth-child(4) {
    left: calc(1036 * var(--h-ratio));
    top: calc(431 * var(--h-ratio));
    width: calc(294 * var(--h-ratio));
}
.train-title {
    color: #c33d3b;
    font-size: calc(22 * var(--h-ratio));
    margin-bottom: calc(10 * var(--h-ratio));
}
.train-content {
    color: #595959;
    font-size: calc(18 * var(--h-ratio));
}
.triangle-1 {
    position: absolute;
    width: 0;
    height: 0;
    right: 5%;
    bottom: calc(-19 * var(--h-ratio));
    border-top: calc(20 * var(--h-ratio)) solid #fff;
    border-left: calc(25 * var(--h-ratio)) solid transparent;
    border-right: calc(1 * var(--h-ratio)) solid transparent;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
}
.triangle-2 {
    position: absolute;
    width: 0;
    height: 0;
    top: 25%;
    right: calc(-19 * var(--h-ratio));
    border-left: calc(20 * var(--h-ratio)) solid #fff;
    border-bottom: calc(25 * var(--h-ratio)) solid transparent;
    border-top: calc(1 * var(--h-ratio)) solid transparent;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
}
.triangle-3 {
    position: absolute;
    width: 0;
    height: 0;
    right: 30%;
    bottom: calc(-19 * var(--h-ratio));
    border-top: calc(20 * var(--h-ratio)) solid #fff;
    border-right: calc(25 * var(--h-ratio)) solid transparent;
    border-left: calc(1 * var(--h-ratio)) solid transparent;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.1));
}
.triangle-4 {
    position: absolute;
    width: 0;
    height: 0;
    top: 25%;
    left: calc(-19 * var(--h-ratio));
    border-right: calc(20 * var(--h-ratio)) solid #fff;
    border-bottom: calc(25 * var(--h-ratio)) solid transparent;
    border-top: calc(1 * var(--h-ratio)) solid transparent;
    filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1));
}
.train-back {
    left: calc(608 * var(--h-ratio));
    top: calc(179 * var(--h-ratio));
    width: calc(404 * var(--h-ratio));
    height: calc(564 * var(--h-ratio));
    background: url("../images/train-back.png") no-repeat center top / cover;
}

/* 
 * 联系我们 
 */

.contact {
    left: var(--content-left);
    top: var(--content-top);
    width: calc(590 * var(--h-ratio));
    font-size: calc(20 * var(--h-ratio));
    font-weight: 300;
    display: grid;
    grid-template-columns: calc(176 * var(--h-ratio)) 1fr;
    row-gap: calc(30 * var(--h-ratio));
}
.contact-link-title, .contact-link-content {
    grid-column: 1 / 3;
}
.contact a {
    color: #000;
}
.contact .mail {
    text-decoration: none;
}
.contact-link-content {
    display: flex;
    justify-content:space-between;
    font-size: calc(16 * var(--h-ratio));
}
.contact-link-content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10 * var(--h-ratio));
}
.contact-link-content img {
    width: calc(165 * var(--h-ratio));
    height: calc(165 * var(--h-ratio));
}
.contact-map {
    left: calc(984 * var(--h-ratio));
    top: calc(11 * var(--h-ratio));
    right: calc(46 * var(--h-ratio));
    /*width: calc(424 * var(--h-ratio));*/
    height: calc(740 * var(--h-ratio));
    background: url("../images/contact-map.jpg") no-repeat center / cover;
}

/* 
 * back
 */

.back {
    background-color: #da1919!important;
    color: #fff;
    background: url("../images/back.png") no-repeat center / cover;
}
.back > div {
    position: absolute;
}
.back-info {
    width: 100%;
    margin-top: calc(260 * var(--h-ratio));
    text-align: center;
    font-family: var(--head-font);
}
.back-info-1 {
    font-size: calc(135 * var(--h-ratio));
}
.back-info-2 {
    font-size: calc(16 * var(--h-ratio));
}
.back .page-bottom {
    background-color: #b02418;
}
.back .page-bottom .page-bottom-left, 
.back .page-bottom .page-bottom-right, 
.back .page-bottom .page-bottom-right > a {
    color: #fff;
}