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

@font-face {
	font-family: 'Gfont';
	src: url('../fonts/Quicksand.ttf');
	font-weight: normal;
	font-style: normal;
    }

:root {
    --primary-color: #2a5e5d;;
    --secondary-color: #ccc;
    --divider-color: #ccc;
    --text-color: #333;
    --text-bg-color: #f5f5f5;
}

body {
    margin: 0;
    padding: 0;
    background-color: white;
    justify-content: center;
    color: var(--text-color);
    font-family: Gfont;
}

/* 背景区域 */
.top_bg {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 32px;
    font-weight: bold;
}

.index_bg {background: url('/static/images/index_bg.jpg') no-repeat top center / cover;}
.mbm_brand_bg {background: url('/static/images/mbm_brand1.jpg') no-repeat top center / cover;}
.contacts_bg {background: url('/static/images/contacts_bg.jpg') no-repeat top center / cover;}

.slogen, .slogen_details {
    font-weight: bold;
    opacity: 0;
    color: var(--text-color);
    animation: changeText 10s ease-in-out infinite;
    max-width: 90%;
    z-index: 1;
    user-select: none; /* 禁止文字选中 */
    -webkit-user-select: none; /* 兼容 Safari */
    -moz-user-select: none; /* 兼容 Firefox */
    -ms-user-select: none; /* 兼容 IE/Edge */
text-shadow:
    -0.5px -0.5px 0 var(--text-bg-color),
     0.5px -0.5px 0 var(--text-bg-color),
    -0.5px  0.5px 0 var(--text-bg-color),
     0.5px  0.5px 0 var(--text-bg-color);
}

.slogen{font-size: 1.5em; line-height: 2em;}
.slogen_details{font-size: 1em;}
.page_title{font-size: 3em; line-height: 3em; margin: auto; text-align: center;}

@keyframes changeText {
    0%, 100% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
}

.content {
    max-width: 1280px;
    width: 90%;
    margin: auto;
}

.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px 0;
    color: white;
    z-index: 1000;
}

.header_scrolled{
    position: fixed;
    background-color: white;
    box-shadow: 0 1px 2px rgb(200,200,200);
}

.container {
    width: 1280px;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section {
    max-width: 1280px;
    width: 90%;
    margin: 50px auto;
    display: flex;
    align-items: center;
    position: relative;
    gap: 20px; /* 图片和文字的间距 */
}

.footer {
    max-width: 1280px;
    width: 90%;
    margin: 10px auto;
    display: flex;
    align-items: center;
    position: relative;
    gap: 20px;
}


.align_center{align-items: center;text-align: center;}
.align_top{display: flex;align-items: flex-start;}
.align_right {display: flex;justify-content: flex-end;}


.margin0{margin: 0}
.margin100{margin: 100px}

.padding20{padding: 20px;}
.padding50{padding: 50px;}
.padding80{padding: 80px;}

.col2{width: 50%;}
.col3{width: 33.33%;}
.col4{width: 25%;}

.width10{width: 10%;}
.width20{width: 20%;}
.width30{width: 20%;}
.width40{width: 30%;}
.width50{width: 50%;}
.width60{width: 60%;}
.width70{width: 70%;}
.width80{width: 80%;}
.width90{width: 90%;}


.white {color: #ffffff;}
.red {color: red;}

.font3em {font-size: 3em;}
.font2em {font-size: 2em;}

.text-shadow {text-shadow: 0 0 15px #000;}


.bg_grey {
    background: var(--text-bg-color);
}

.bg_dark {
    background: var(--text-color);
}

.bg_primary {
    background: var(--primary-color);
}

.font_bold{font-weight: bold;}
.font_line_height_xl{line-height: 1.2}

.section_title{
    font-size: 2em;
    margin-bottom: 10px;
}
.section_title::before {
    border-left: 2px solid #da0301;
    padding-right: 5px;
    content: '';
}

.section_sub_title{
    font-size: 1.5em;
    margin-bottom: 10px;
}

.txt_col {
    background: var(--text-bg-color);
    padding: 40px;
    position: relative;
    z-index: 1;
}

.txt_col h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.txt_col p {
    font-size: 1em;
    line-height: 1.3em;
    text-align: left;
}

.img_col {
    position: relative;
    z-index: 2; /* 确保图片在灰色背景上方 */
}
.img_col img {
    width: 100%; /* 图片自适应 */
    height: auto;
    display: block;
}

.divider {
    width: 1px;
    background-color: #ccc;
    align-self: stretch;;
}

.block-spacer {
	height: 60px;
	clear: both;
}

@media (max-width:640px) {
	.block-spacer {
		height: 30px !important;
	}
}

.left_top_shadow{
    box-shadow: -38px -38px var(--text-bg-color);
}

.book_img{
    width: 33.33%;
    box-shadow: 2px 2px 5px rgb(25,25,25);
}

.text_r_ext::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 25%;
    height: 100%;
    background: var(--text-bg-color);
}

.text_l_ext::before {
    content: "";
    position: absolute;
    top: 0;
    left: -25%;
    width: 25%;
    height: 100%;
    background: var(--text-bg-color);
}

.button_more {
    display: flex;
    align-items: center;
    background-color: #2a5e5d;
    color: white;
    padding: 12px 20px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 50%;
    cursor: pointer;
}

.button_more .arrow {
    margin-right: 10px;
    font-size: 18px;
}

.button_more:hover {
    background-color: #1a4746;
}

.button_link {
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
}

.button_link:hover {
    color: red;
}

.flex_row {
    display: flex;
    justify-content: center; /* 让整个内容区域居中 */
    align-items: center; /* 垂直居中 */
    width: 100%; /* 确保 flex 容器占满可用宽度 */
}

.contact_content {
    display: flex;
    align-items: center; /* 让 title 和 icon 在同一行 */
    gap: 10px; /* 控制 title 和 icon 之间的间距 */
}

.contact_title {
    font-size: 2em;
    color: white;
    margin: 0; /* 去掉默认 margin */
}

.contact_detail {
    font-size: 16px;
    color: white;
    margin-top: 5px;
}

.contact_icon {
    display: flex;
    font-size: 2.5em;
    align-items: center;
    justify-content: center;
    color: white;
    padding-bottom: 10px;
}



details {

}

details + dl {
    max-height: 0;
    transition: max-height .25s;
    margin: 0 0 1rem;
    overflow: hidden;
}
[open] + dl {
    max-height: 500px;
}

summary {
    font-size: 1.5em;
    line-height: 2.5em;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    user-select: none;
    display: flex; /* 使用 Flexbox 布局 */
    justify-content:space-between; /* 确保内容和符号对齐 */
    align-items: center; /* 垂直居中 */
}

summary:hover {
    background-color: #d0d0d0;
}

summary::after {
    content: '+';
    margin-right: 10px;
}

details[open] summary::after {
    content: '−';
}

.icon-quality {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='图层_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23BBBBBB;%7D%0A%3C/style%3E%3Cpath class='st0' d='M530.1,597.8v123.4l59.1,24.6V565.4C570.7,578.2,550.9,589,530.1,597.8L530.1,597.8z M210.7,565.4v179.2 l59.1-24.6V597.8C249.1,589,229.3,578.2,210.7,565.4z M400,624.1c-27.9,0-55.7-3.5-82.8-10.3V800l82.8-34.5l82.8,34.5V613.7 C455.7,620.6,427.9,624.1,400,624.1z M400,0C241,0,111.6,129.4,111.6,288.4S241,576.7,400,576.7s288.4-129.4,288.4-288.4 S559,0,400,0z M400,515.8c-126.1,0-228.6-102.6-228.6-228.6c0-126.1,102.6-228.6,228.6-228.6s228.6,102.6,228.6,228.6 S526.1,515.8,400,515.8z M400,105.9c-99.9,0-181.3,81.3-181.3,181.3S300,468.4,400,468.4s181.3-81.3,181.3-181.3 S500,105.9,400,105.9L400,105.9z M474.5,393L400,353.8L325.5,393l14.2-83l-60.3-58.7l83.3-12.1l37.2-75.5l37.2,75.5l83.3,12.1 L460.3,310L474.5,393z'/%3E%3C/svg%3E");
}

.icon-mission {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Icons' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 32 32' style='enable-background:new 0 0 32 32;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23BBBBBB;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cline class='st0' x1='16' y1='16' x2='22' y2='10'/%3E%3Cpolygon class='st0' points='30,6 26,6 26,2 22,6 22,10 26,10 '/%3E%3Ccircle class='st0' cx='16' cy='16' r='6'/%3E%3Cpath class='st0' d='M27,9c1.3,2,2,4.4,2,7c0,7.2-5.8,13-13,13S3,23.2,3,16S8.8,3,16,3c2.6,0,5,0.7,7,2'/%3E%3C/svg%3E");
}

.icon-maintenance {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 502.697 502.697' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath style='fill:%23BBB;' d='M439.109,0H111.341C81.983,0,57.953,24.008,57.953,53.388v327.768 c0,7.42,1.553,14.496,4.314,20.924l-42.559,42.343l0.216,0.237c-13.007,13.439-13.007,34.815,0.259,47.995 c13.18,13.309,34.621,13.352,48.081,0.345l0.173,0.237l58.996-58.694h311.655c29.336,0,53.409-24.008,53.409-53.409V53.388 C492.496,24.008,468.445,0,439.109,0z M54.286,480.058c-5.867,5.867-15.445,5.889-21.42-0.065c-5.889-5.889-5.91-15.531,0-21.42 c5.91-5.867,15.488-5.91,21.398-0.022C60.175,464.484,60.175,474.083,54.286,480.058z M444.394,387.627H174.586l93.639-93.143 l94.027-0.28l25.734-96.141l-10.225-10.246l-51.015,51.123l-49.936-49.872l51.058-51.101l-10.203-10.268l-96.055,25.82 l-0.324,91.417l-0.518-0.582L102.432,362.109V99.01h341.983L444.394,387.627L444.394,387.627z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.icon-recycle {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='_x36_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23BBBBBB;%7D%0A%3C/style%3E%3Cg%3E%3Cpolygon class='st0' points='371.1,160 374.7,166.2 347.5,213.4 290.4,312.4 191.3,255.2 248.5,156.2 305.7,57.2 308.2,52.8 365.2,149.6 '/%3E%3Cpolygon class='st0' points='596.5,143.3 596.4,144.2 579.7,337.9 402.7,255.2 435.7,236.2 386.9,151.6 380.9,141.2 350.5,89.6 297.7,0 469.8,0 475.7,10.2 493.8,41.6 563.5,162.3 595.8,143.6 '/%3E%3Cpolygon class='st0' points='624.8,522.6 617.6,522.6 590.3,475.4 533.2,376.4 632.2,319.3 689.3,418.3 746.5,517.3 749.1,521.7 636.7,522.6 '/%3E%3Cpolygon class='st0' points='526.5,688.1 702.2,688.1 714,688.1 800,539.1 636.1,540.4 624.1,540.4 526.5,540.4 526.5,502.3 366.3,614.2 526.5,726.1 '/%3E%3Cpolygon class='st0' points='187.9,570.6 191.5,564.4 246,564.4 360.3,564.4 360.3,678.7 246,678.7 131.7,678.7 126.6,678.7 182,581 '/%3E%3Cpolygon class='st0' points='254.6,495.6 221.6,476.6 172.8,561.2 166.8,571.6 93,702.1 86.1,714.2 60,669.1 37.9,630.9 0,565.1 5.9,554.9 93.8,402.7 60.8,383.8 224.9,307 237.8,301 '/%3E%3C/g%3E%3C/svg%3E");
}

.icon-facebook {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath fill='%231877F2' d='M15 8a7 7 0 00-7-7 7 7 0 00-1.094 13.915v-4.892H5.13V8h1.777V6.458c0-1.754 1.045-2.724 2.644-2.724.766 0 1.567.137 1.567.137v1.723h-.883c-.87 0-1.14.54-1.14 1.093V8h1.941l-.31 2.023H9.094v4.892A7.001 7.001 0 0015 8z'/%3E%3Cpath fill='%23ffffff' d='M10.725 10.023L11.035 8H9.094V6.687c0-.553.27-1.093 1.14-1.093h.883V3.87s-.801-.137-1.567-.137c-1.6 0-2.644.97-2.644 2.724V8H5.13v2.023h1.777v4.892a7.037 7.037 0 002.188 0v-4.892h1.63z'/%3E%3C/svg%3E");
}

.icon-instagram {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23C13584'/%3E%3Cpath d='M24 14.1622C27.2041 14.1622 27.5837 14.1744 28.849 14.2321C30.019 14.2855 30.6544 14.481 31.0773 14.6453C31.6374 14.863 32.0371 15.123 32.457 15.5429C32.877 15.9629 33.137 16.3626 33.3547 16.9227C33.519 17.3456 33.7145 17.981 33.7679 19.1509C33.8256 20.4163 33.8378 20.7958 33.8378 23.9999C33.8378 27.2041 33.8256 27.5836 33.7679 28.849C33.7145 30.019 33.519 30.6543 33.3547 31.0772C33.137 31.6373 32.877 32.0371 32.4571 32.457C32.0371 32.8769 31.6374 33.1369 31.0773 33.3546C30.6544 33.519 30.019 33.7144 28.849 33.7678C27.5839 33.8255 27.2044 33.8378 24 33.8378C20.7956 33.8378 20.4162 33.8255 19.151 33.7678C17.981 33.7144 17.3456 33.519 16.9227 33.3546C16.3626 33.1369 15.9629 32.8769 15.543 32.457C15.1231 32.0371 14.863 31.6373 14.6453 31.0772C14.481 30.6543 14.2855 30.019 14.2321 28.849C14.1744 27.5836 14.1622 27.2041 14.1622 23.9999C14.1622 20.7958 14.1744 20.4163 14.2321 19.1509C14.2855 17.981 14.481 17.3456 14.6453 16.9227C14.863 16.3626 15.123 15.9629 15.543 15.543C15.9629 15.123 16.3626 14.863 16.9227 14.6453C17.3456 14.481 17.981 14.2855 19.151 14.2321C20.4163 14.1744 20.7959 14.1622 24 14.1622ZM24 12C20.741 12 20.3323 12.0138 19.0524 12.0722C17.7752 12.1305 16.9028 12.3333 16.1395 12.63C15.3504 12.9366 14.6812 13.3469 14.0141 14.0141C13.3469 14.6812 12.9366 15.3504 12.63 16.1395C12.3333 16.9028 12.1305 17.7751 12.0722 19.0524C12.0138 20.3323 12 20.741 12 23.9999C12 27.259 12.0138 27.6676 12.0722 28.9475C12.1305 30.2248 12.3333 31.0971 12.63 31.8604C12.9366 32.6495 13.3469 33.3187 14.0141 33.9859C14.6812 34.653 15.3504 35.0633 16.1395 35.3699C16.9028 35.6666 17.7752 35.8694 19.0524 35.9277C20.3323 35.9861 20.741 35.9999 24 35.9999C27.259 35.9999 27.6677 35.9861 28.9476 35.9277C30.2248 35.8694 31.0972 35.6666 31.8605 35.3699C32.6496 35.0633 33.3188 34.653 33.9859 33.9859C34.653 33.3187 35.0634 32.6495 35.37 31.8604C35.6667 31.0971 35.8695 30.2248 35.9278 28.9475C35.9862 27.6676 36 27.259 36 23.9999C36 20.741 35.9862 20.3323 35.9278 19.0524C35.8695 17.7751 35.6667 16.9028 35.37 16.1395C35.0634 15.3504 34.653 14.6812 33.9859 14.0141C33.3188 13.3469 32.6496 12.9366 31.8605 12.63C31.0972 12.3333 30.2248 12.1305 28.9476 12.0722C27.6677 12.0138 27.259 12 24 12Z' fill='white'/%3E%3Cpath d='M24.0059 17.8433C20.6026 17.8433 17.8438 20.6021 17.8438 24.0054C17.8438 27.4087 20.6026 30.1675 24.0059 30.1675C27.4092 30.1675 30.1681 27.4087 30.1681 24.0054C30.1681 20.6021 27.4092 17.8433 24.0059 17.8433ZM24.0059 28.0054C21.7968 28.0054 20.0059 26.2145 20.0059 24.0054C20.0059 21.7963 21.7968 20.0054 24.0059 20.0054C26.2151 20.0054 28.0059 21.7963 28.0059 24.0054C28.0059 26.2145 26.2151 28.0054 24.0059 28.0054Z' fill='white'/%3E%3Cpath d='M31.8507 17.5963C31.8507 18.3915 31.206 19.0363 30.4107 19.0363C29.6154 19.0363 28.9707 18.3915 28.9707 17.5963C28.9707 16.801 29.6154 16.1562 30.4107 16.1562C31.206 16.1562 31.8507 16.801 31.8507 17.5963Z' fill='white'/%3E%3C/svg%3E");
}

.icon-linkedin {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='800px' height='800px' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='20' fill='%230077B5'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.7747 14.2839C18.7747 15.529 17.8267 16.5366 16.3442 16.5366C14.9194 16.5366 13.9713 15.529 14.0007 14.2839C13.9713 12.9783 14.9193 12 16.3726 12C17.8267 12 18.7463 12.9783 18.7747 14.2839ZM14.1199 32.8191V18.3162H18.6271V32.8181H14.1199V32.8191Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.2393 22.9446C22.2393 21.1357 22.1797 19.5935 22.1201 18.3182H26.0351L26.2432 20.305H26.3322C26.9254 19.3854 28.4079 17.9927 30.8101 17.9927C33.7752 17.9927 35.9995 19.9502 35.9995 24.219V32.821H31.4922V24.7838C31.4922 22.9144 30.8404 21.6399 29.2093 21.6399C27.9633 21.6399 27.2224 22.4999 26.9263 23.3297C26.8071 23.6268 26.7484 24.0412 26.7484 24.4574V32.821H22.2411V22.9446H22.2393Z' fill='white'/%3E%3C/svg%3E");
}

.icon-twitter {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='图层_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 800 800' style='enable-background:new 0 0 800 800;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M364.3,70.8c-117,12.2-221.5,89-269,197.6c-30.6,70.1-35.7,150.9-14,225.3c26.9,92.7,96.3,171,186.2,210.2 c70.4,30.5,151.4,35.6,226,13.9c111.6-32.1,199.5-123.5,228.4-237c45-177.9-65.5-359.8-244.4-402.3 C438.2,69.2,403.6,66.8,364.3,70.8z M368.8,276.4c28.4,37.6,52.4,68.6,53.3,68.6c0.9,0,30.4-31,65.3-68.6l63.7-68.6h36.2l-7.8,8.2 c-4.4,4.6-33.3,35.8-64.1,69.3c-30.9,33.4-61,65.9-67,71.9l-10.6,11.3l83.2,110.4C566.5,539.7,604,590.1,604,591 c0,1.1-27.3,1.8-60.4,1.8l-60.6-0.2l-56.4-75.2c-38.8-52-57-74.4-58.8-73c-1.3,1.1-32.9,35-70.1,75.2L230,592.8h-17.1 c-9.5,0-17.3-0.5-17.3-1.1c0-0.7,35.3-39.2,78.3-85.4c42.9-46.2,78.4-85,78.8-85.6c0.2-0.9-35.1-48.9-78.3-106.7 c-43.3-57.5-78.8-105.1-78.8-105.6c0-0.4,27.3-0.7,60.8-0.7h60.8L368.8,276.4z'/%3E%3Cpath d='M250.5,237.4c0.9,1.5,56.8,76.3,123.8,165.7L496.4,566l27.3,0.2c16.9,0,27.1-0.9,26.6-2.2c-0.2-1.1-55.9-75.9-123.4-166 l-123-163.7h-27.5C253.6,234.3,248.9,234.8,250.5,237.4L250.5,237.4z'/%3E%3C/g%3E%3C/svg%3E");
}


.icon-container {
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.icon-container-s {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 3px;
}

.project_container{
    background-size: 75%;
    background-repeat: no-repeat;
    width: 100%;
    height: 650px;
    display: flex;
    justify-content: flex-end;
}

.project_bg{
    background-image: url("/static/images/index_projects.jpg");
}

.vision_bg{background-image: url("/static/images/story_vision.jpg");}
.mbm_brand_conclusion_bg{background-image: url("/static/images/mbm_brand_conclusion.webp");}
.about_resysta_awards_bg{background-image: url("/static/images/about_resysta_awards.webp");}

.project_text_div{
    width: 40%;
    padding: 20px;
    background: var(--text-bg-color);
    border-style: solid;
    border-width: 5px;
    border-color: white;
}

.copyright{
    color: white;
    font-size: 15px;
    line-height: 30px;
    height: 30px;
}

.logo{
        text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
}

/*Menu Start*/
.menu {
    display: flex;
    gap: 20px;
    z-index: 1000;
    font-weight: bold;
    color: var(--text-color);
    text-shadow:
    -1px -1px 0 white,
     1px -1px 0 white,
    -1px  1px 0 white,
     1px  1px 0 white;
}
.menu a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    color: var(--text-color);
}

.menu a:hover{
    color: red;
    background: var(--text-bg-color);
}

.submenu,
.submenu2 {
    position: relative;
}
.submenu-dropdown,
.submenu2-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--text-bg-color);
    min-width: 150px;
    z-index: 1000;
}
.submenu-dropdown a,
.submenu2-dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    white-space: nowrap;
}
.submenu-dropdown a:hover,
.submenu2-dropdown a:hover {
    background: darkgray;
}
.submenu:hover .submenu-dropdown,
.submenu2:hover .submenu2-dropdown {
    display: block;
}
.submenu2-dropdown {
    top: 0;
    left: 100%;
}

/* 添加箭头图标 */
.submenu > a::after {
    content: "▼"; /* 下箭头 */
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.3s ease;
}
.submenu:hover > a::after {
    transform: rotate(360deg);
}



.submenu2 > a::after {
    content: "▶"; /* 右箭头 */
    font-size: 12px;
    transition: transform 0.3s ease;
}
.submenu2:hover > a::after {
    transform: rotate(90deg);
}

/* 让箭头靠右 */
.submenu > a, .submenu2 > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submenu > a .arrow,
.submenu2 > a .arrow {
    margin-left: auto; /* 让箭头自动靠右 */
    transition: transform 0.3s ease;
}


/* 汉堡菜单 */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}
.menu-toggle span {
    background: var(--text-color);
    height: 3px;
    width: 25px;
    margin: 4px 0;
    display: block;
}
@media (max-width: 768px) {
    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: var(--text-bg-color);
    }
    .menu a {
        padding: 15px;
    }
    .menu.active {
        display: flex;
    }
    .menu-toggle {
        display: flex;
    }
    .submenu-dropdown,
    .submenu2-dropdown {
        position: static;
        display: none;
    }
    .submenu-dropdown{
        padding-left: 30px;
    }

    .submenu2-dropdown{
        padding-left: 60px;
    }
    .submenu.active > .submenu-dropdown,
    .submenu2.active > .submenu2-dropdown {
        display: block;
    }
}
/*Menu End*/

/*Gallery Start*/
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    text-align: center;
    margin: auto;
}

.gallery_item {
    max-width: 33.33vw;
}
@media (max-width: 900px) {.gallery_item {max-width: 100vw;}}

.gallery_item:hover {
    transform: scale(1.05); /* 鼠标悬停时放大 */
}

.gallery_item img {
    width: 100%;
    display: block;
    transition: opacity 0.3s ease-in-out;
}

.gallery_item:hover img {
    opacity: 0.8; /* 图片变暗 */
}

.gallery_item_title{
    font-weight: bold;
    font-size: 1.2em;
}

.gallery_item_description{
    font-size: 1em;
    text-align: left;
}
/*Gallery End*/

/*Mobile Start*/
@media (max-width: 900px) {
.section, .footer {
    flex-direction: column;
    text-align: center;
    width: 100%;
    margin: 5px auto;
}
.img_col, .txt_col .col2, .col3, .col4{
    width: 100%;
}
.txt_col {
    margin-left: 0;
    border-radius: 0;
}


.slogen {font-size: 1em;}
.slogen_details {font-size: 0.6em;}

.project_container{background-size: 100%;}
.project_text_div{width: 80%;}

.book_img{width: 60%;}

.divider {
    width: 80%;
    height: 1px;
    align-self: center;
    margin: 10px 0;
}

.button_more {width: 90%;}

.text_r_ext::after {width: 0;}
.text_l_ext::before {width: 0;}
}
/*Mobile End*/