#make{}

.make1{ padding: 50px 0;}
.make1 .flex{ display: flex; height: 400px;}
.make1 .flex .flex-item{ width: 33.33%; height: 100%;transition: all .3s;background-color: #1194ff52; background-blend-mode: multiply; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;}
.make1 .flex .flex-item:hover{ width: 70%;background-color: #ffffffff;}
.make1 .flex .flex-item .name{ width: 300px; max-width: 80%; text-align: center; color: #fff; border-radius: 30px; height: 60px; line-height: 60px; font-size: 2rem; background-color: var(--maincolor);box-shadow: 0 -10px 5px #0003 inset;text-shadow: 0px 2px 3px #000; opacity: 0;transition: all .3s;}
.make1 .flex .flex-item .view{ font-size: 2.5rem; font-weight: bold; color:#000; text-shadow: 0px 1px 3px #fff; margin-top: 100px; opacity: 0;transition: all .5s;}
.make1 .flex .flex-item:hover .name{opacity: 1;}
.make1 .flex .flex-item:hover .view{ margin-top: 30px; opacity: 1;}
@media (max-width: 1279px) {
    .make1{ padding: 30px 0;}
}

.make2{ padding: 50px 0;}
.make2 .bg{ position: relative;}
.make2 .bg img{max-width: 100%; border-radius: 30px; overflow: hidden;}
.make2 .bg .text{ position: absolute; bottom:-5px; width: 96%; left: 2%; border-radius: 50px;  background-color: var(--maincolor);box-shadow: 0 -10px 5px #0003 inset; font-size: 2.5rem; color: #fff; padding: 20px 0px; text-align: center;transition: all .5s;}
.make2 .bg .text span{ display: inline-block; margin: 0 8%;}
.make2 .bg:hover .text{bottom: 40%;}
@media (max-width: 1279px) {
    .make2{ padding: 30px 0;}
    .make2 .bg .text span{margin: 0 5%;}
}
@media (max-width: 799px) {

    .make2 .bg .text{font-size: 2rem; position: relative; bottom: auto;}
}
@media (max-width: 599px) {
    .make2 .bg .text span{margin: 0 3%;}
    .make2 .bg .text{font-size: 1.5rem;}
}

.make3{ padding: 50px 0;}
.make3 .flex{ display: flex; justify-content: space-between; align-items: center;}
.make3-l{ width: 40%;}
.make3-r{ width: 55%; text-align: center;}
.make3-r p{ font-size: 3rem; color: #000; line-height: 1.5em; font-weight: bold;}
@media (max-width: 1279px) {
    .make3{ padding: 30px 0;}
}
@media (max-width: 599px) {
    .make3 .flex{flex-wrap:wrap;}
    .make3-l{width: 100%;}
    .make3-r{width: 100%; margin-top: 20px;}
    .make3-r p{font-size: 2rem;}
}




#experiment{}

.exp1{ padding: 50px 0;}
.exp1 table{ width: 100%; font-size: 16px; line-height: 2.5em;border-spacing:0; border: 1px solid #eee; text-align: left;}
.exp1 table tbody{}
.exp1 table tr{}
.exp1 table th, .exp1 table td{ text-align: center; padding:15px 10px; border: 1px solid #ddd; margin: 0;}
.exp1 table th{ background-color: #eee;}
.exp1 table td{vertical-align: top;}
/*.exp1 table tr:hover th, .exp1 table tr:hover td{ background-color: var(--maincolor); color: #fff; border-color: #fff;}*/
.exp1 table td dl{}
.exp1 table td dt{ line-height: 1.5em; font-size: 2rem; font-weight: bold; color: #fff; padding: 15px 25px; margin-bottom: 10px; display: inline-block; width:max-content; background-color: var(--maincolor);box-shadow: 0 -10px 5px #0003 inset; border-radius: 15px;text-shadow: 0px 2px 3px #000;}
.exp1 table td dd{ line-height: 2em;}

.exp1 .grid-table {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    /*gap: 10px;*/
    /*border: 1px solid #ccc;*/
    /*padding: 10px;*/
    grid-auto-flow: column;
    font-size: 16px; line-height: 2.5em; text-align: center;
}

.exp1 .grid-cell {
    border: 1px solid #ddd;
    padding: 10px;
}

.exp1 .grid-th {
    font-weight: bold;
    background-color: #f5f5f5;
}
.exp1 .grid-table dl{}
.exp1 .grid-table dt{ line-height: 1.5em; font-size: 2rem; font-weight: bold; color: #fff; padding: 15px 25px; margin-bottom: 10px; display: inline-block; width:max-content; background-color: var(--maincolor);box-shadow: 0 -10px 5px #0003 inset; border-radius: 15px;text-shadow: 0px 2px 3px #000;}
.exp1 .grid-table dd{ line-height: 2em;}

@media (min-width: 800px) {
    .exp1 #g5, .exp1 #g7{grid-row: span 2;}
}
@media (max-width: 800px) {
    .exp1 .grid-table {
        grid-template-columns: repeat(1, auto);
        grid-template-rows: repeat(7, auto); /* 单列垂直显示 */
    }
}






.exp2{ padding: 50px 0;}
.exp2 .flex{ display: flex; justify-content: space-between; flex-wrap:wrap;}
.exp2 .flex img{ height: 300px; display: block; margin-top: 20px;}

.exp3{ padding: 50px 0;}
.exp3 .grid{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; text-align: center;}
.exp3 .grid .grid-item{ text-align: center;}
.exp3 .grid .grid-item img{ height: 300px; display: block; margin: auto;}
.exp3 .grid .grid-item p{ background-color: var(--maincolor); padding: 10px; color: #fff; font-size: 2rem; font-weight: bold;}
@media (max-width: 960px) {
    .exp3 .grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px) {
    .exp3 .grid{grid-template-columns: repeat(1, 1fr);}
}


.tit{font-size: 3.9rem; color: #2b2b2b; font-family: segoe ui, sans-serif, system-ui; text-align: center;}
.tit-en { color: #bbb; font-size: 1.5rem; margin-top: 12px; text-align: center; margin-bottom: 5rem;}
@media (max-width: 800px) {
    .tit{font-size: 3rem;}
}