/* 小人开始 */
.out {
    width: 710px;
    height: 90px;
    position: relative;
    margin: 50px auto 80px auto;
    top: 50px;
}

.out .inner {
    width: 100%;
    height: 100%;
}

.out .inner .img {
    width: 70px;
    height: 90px;
    position: absolute;
    transition: transform 0.3s;
}

.out .inner .img img {
    width: 100%;
    height: 100%;
}

.out .arrow i {
    position: absolute;
    cursor: pointer;
    top: 21px;
    font-size: 50px;
}

.out .arrow .back {
    left: -50px;
}

.out .arrow .front {
    right: -50px;
}

.out #middle {
    transform: translateX(320px) scale(1.6);
    opacity: 1;
}

.out #left1 {
    transform: translateX(200px) scale(1.3);
    opacity: 1;
}

.out #right1 {
    transform: translateX(440px) scale(1.3);
    opacity: 1;
}

.out #left2 {
    transform: translateX(100px) scale(1.1);
    opacity: 1;
}

.out #right2 {
    transform: translateX(540px) scale(1.1);
    opacity: 1;
}

.out #left3 {
    transform: translateX(0px) scale(0.9);
    opacity: 1;
}

.out #right3 {
    transform: translateX(640px) scale(0.9);
    opacity: 1;
}

.out #first {
    transform: translateX(-100px);
    opacity: 0;
}

.out #last {
    transform: translateX(740px);
    opacity: 0;
}

@media (max-width: 800px) {
    .out {
        width: 265px;
    }

    .out #middle {
        transform: translateX(100px) scale(1.3);
        opacity: 1;
    }

    .out #left1 {
        transform: translateX(0);
        opacity: 1;
    }

    .out #right1 {
        transform: translateX(200px);
        opacity: 1;
    }

    .out #first {
        transform: translateX(-100px);
        opacity: 0;
        width: 10px;
    }

    .out #last {
        transform: translateX(300px);
        opacity: 0;
        width: 10px;
    }
}

/* 小人结束 */

/* 主区域 */
.main {
    padding-top: 50px;
}

.main .member .mem-head,
.main .member .group-head {
    text-align: center;
    color: #342762;
    margin: 60px 0;
}

.main .member .group-head{
    width: 100%;
    margin: 30px 0;
}

.main .member .group-head:nth-child(1){
    margin-top: 0;
}

.main .member .group-head h4{
    font-family: 'Roboto1';
    font-size: 46px;
    border-top: 5px solid #342762;
    border-bottom: 5px solid #342762;
    font-weight: bold;
    padding: 10px 0;
}

.main .member .mem-head h3,
.main .attr .attr-head {
    font-family: 'Aileron1';
    font-size: 60px;
    font-weight: bold;
    border-top: 5px solid #342762;
    border-bottom: 5px solid #342762;
    padding: 20px 0;
}

.main .member .group-head h4,
.main .member .mem-head h3,
.main .attr .attr-head {
    position: relative;
    display: inline-block;
    text-shadow:
        1px 1px 0 #fff,
        2px 2px 0 #fff,
        3px 3px 0 #fff,
        4px 4px 0 #fff;
}

.main .member .mem-head h3::after, 
.main .attr .attr-head::after{
    position: absolute;
    display: block;
    content: attr(data-text);
    left: -17px;
    top: 3px;
    color: #342762;
    padding: 8px;
}

.main .member .mem-area {
    margin: 40px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.main .mem-area .card {
    position: relative;
    width: 330px;
    height: 480px;
    border-radius: 30px;
    perspective: 1000px;
    transform-style: preserve-3d;
    box-sizing: border-box;
    margin: 25px;
}

.main .card .front,
.main .card .back {
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    backface-visibility: hidden;
    transition: transform 0.8s;
    font-family: 'Roboto1';
}

.main .card .front {
    background-color: #f9f0ff7a;
}

.main .card .front .photo {
    position: absolute;
    width: 250px;
    height: 250px;
    left: calc(50% - 125px);
    top: 35px;
    background-color: #d9d9f09c;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .card .front .img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main .card .front .img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main .card .front .f-content {
    position: absolute;
    top: 330px;
    left: 0;
    width: 100%;
    text-align: center;
}

.main .card .front .f-content .name {
    font-family: "dancing";
    font-size: 32px;
    font-weight: bolder;
    color: #006C62;
}

.main .card .front .f-content .college {
    font-size: 20px;
    color: #006C62;
    margin-top: 40px;
    margin-bottom: 10px;
}

.main .card .front .f-content .group {
    font-size: 20px;
    color: #006C62;
}

.main .card .back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.main .card .back .title {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.main .card .back .title h1 {
    font-size: 20px;
}

.main .card .back .title h2 {
    font-family: "Rowdies";
    font-size: 28px;
    font-weight: bold;
}

.main .card .back .little {
    position: relative;
    height: 160px;
}

.main .card .back .little img {
    width: 100%;
    height: 100%;
}

.main .card .back .intro,
.main .card .back .motto {
    width: 290px;
    line-height: 1.2;
    font-size: 13px;
    font-family: 'Roboto1';
    color: #342762;
}

.main .card .back .intro {
    text-align: justify;
    margin-top: 5px;
}

.main .card .back .motto {
    height: 52px;
    background-color: #decaeb;
    border-radius: 52px;
    text-align: center;
    display: grid;
    place-items: center;
}

.main .card .back .motto p {
    margin: 0 5px;
}

.main .card:hover .back {
    transform: rotateY(0deg);
}

.main .card:hover .front {
    transform: rotateY(-180deg);
}

.main .card.teacher .back{
    background-image: none !important;
    background-color: #fff;
}

.main .card.teacher .back .resp{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin: 40px 0 20px 0;
    width: 80%;
}

.main .card.teacher .back{
    justify-content: space-evenly;
    gap: 0;
    padding: 30px;
}

.main .card.teacher .back .intro{
    font-size: 15px;
    line-height: 1.4;
    width: auto;
    box-shadow: rgb(227 218 243) 2px 2px 8px 0;
    padding: 30px;
}

.main .card.teacher .back .resp .box{
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    width: 100%;
    border-radius: 50px;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    place-content: center;
    text-align: center;
}

.main .card.inst:hover .front{
    transform: rotateY(0deg);
}

.main .card.inst .front {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 30px;
}

.main .card.inst .front .i-content{
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 17px;
    line-height: 1.3;
    border-bottom: 1px solid #a09b9b;
}

.main .card.inst .front .i-content:nth-last-child(1){
    border-bottom: none;
}

@media (max-width: 600px) {
    .main .member .mem-area {
        margin: 40px 0 !important;
    }

    .main .card {
        margin: 40px auto !important;
    }
}

/* 主区域结束 */

.main .attr{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: -20px auto 20px auto;
}

.main .attr .attr-head{
    padding: 20px 0;
    margin: 20px auto;
    font-size: 4vw;
}



.main .attr .form{
    width: 100%;
    padding: 40px;
    box-shadow: #BED7EE 2px 2px 15px 0px;
    background-color: #eff0f7;
    border-radius: 15px;
}