section.passport_data{
        padding-bottom: 60px;

    centerwraps{
        padding-left: 80px;
        padding-right: 80px;
    }

    .pets_list{
        position: absolute;
        left: 10px;
        z-index: 1;
        top: 10px;



        li{
            background-color: #ddf4fb;
            width: 50px;
            height: 50px;
            border-radius: 60px;
            border: 5px solid #FFF;
            margin-bottom: 17px;
            cursor: pointer;
            background-size: cover;
            background-position: center;
            box-shadow: 0px 0px 25px #d4d4d4;
            cursor: pointer;

            &[thegender="male"]{
                border-color: #6fdde2;
            }
            &[thegender="female"]{
                border-color: #edbece;
            }

            &:hover:before{
                background-color: #ffffff78;
                content: '';
                display: block;
                width: 86px;
                height: 78px;
                position: absolute;
                z-index: -1;
                right: -15px;
                top: -15px;
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
            }

            &.active:before{
                background-color: #ffffffc9;
                content: '';
                display: block;
                width: 86px;
                height: 78px;
                position: absolute;
                z-index: -1;
                right: -15px;
                top: -15px;
                border-top-left-radius: 25px;
                border-bottom-left-radius: 25px;
            }
        }
    }

    h3{
         color: #919191;
    }



    
    .each{
            background-color: #ffffffc9;
            padding: 30px;
            margin-bottom: 20px;
            display: block;



            &.intro{

                .data_list{
                    margin-bottom: 25px;
                }

                .intro_basic{
                    vertical-align: top;
                    display: inline-block;
                    width: calc(50% - 0px);
                    padding-top: 30px;
                    padding-bottom: 30px;

                    .photo{
                        background-color: #FFF;
                        width: 140px;
                        height: 140px;
                        border-radius: 100px;
                        margin: auto;
                        border: 9px solid #FFF;
                        background-size: cover;
                        background-position: center;

                        &[thegender="male"]{
                            border-color: #6fdde2;
                        }
                        &[thegender="female"]{
                            border-color: #edbece;
                        }
                    }

                    .theformeach{
                        text-align: left;
                        margin-bottom: 12px;
                        letter-spacing: 1px;

                        .label{
                                display: inline-block;
                                color: #11757a;
                                width: 70px;
                                vertical-align: top;
                        }
                        .value{
                                display: inline-block;
                                width: calc(100% - 110px);
                                word-break: break-all;
                                vertical-align: top;
                        }
                    }

                }
                .intro_list{
                    vertical-align: top;
                    display: inline-block;
                    background-color: #ffffffc9;
                    width: calc(50% - 70px);
                    padding: 30px;

                    h3{
                        margin-block-start: 0em;
                        margin-block-end: 0em;
                    }
                    h3.en{
                        font-size: 13px;
                        margin-top: 5px;
                    }

                    li{
                        text-align: left;
                        border-bottom: 2px solid #f4f4f4;
                        padding-bottom: 30px;
                        padding-top: 25px;

                        
                        
                        &:last-child{
                            padding-bottom: 0px;
                            border-bottom: none;
                        }

                            .theicon {
                                background-color: #249da366;
                                width: 70px;
                                height: 70px;
                                border-radius: 8px;
                                position: absolute;
                                background-size: cover;
                            }
                            .thename {
                                margin-left: 90px;
                                margin-bottom: 5px;
                                font-size: 18px;
                                margin-top: 0px;
                                font-weight: 500;
                            }
                            .thename_en {
                                margin-left: 90px;
                                color: #4dbdc8;
                                font-size: 19px;
                                margin-bottom: 5px;
                            }
                            .btn{
                                width: 240px;
                                height: 40px;
                                line-height: 40px;
                                font-size: 16px;
                                display: inline-block;
                                margin-left: 90px;
                                margin-top: 12px;

                                span{
                                        position: absolute;
                                        left: 7px;
                                        top: 7px;
                                }
                            }
                            .value{
                                margin-left: 90px;
                                color: #606060;
                                font-size: 15px;
                                margin-bottom: 5px;
                            }
                    }

                }

            }


           
    }
    

  
}




@media screen and (max-width: 1240px) {


    section.passport_data {
        & .each {
            &.intro {
                .intro_basic {
                    vertical-align: top;
                    display: block;
                    width: auto;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    padding-left: 10px;
                    padding-right: 10px;
                
                }
            }
        }
    }

    section.passport_data {
        & .each {
            &.intro {
                .intro_list {
                    vertical-align: top;
                    display: block;
                    background-color: #ffffffc9;
                    width: auto;
                    padding: 20px;
                    
                }
            }
        }
    }


    section.passport_data centerwraps{
        
        padding-right: 30px;
        padding-left: 30px;
    }
    section.passport_data {
        & .each {
            &.intro {
                & .intro_basic {
                    .photo {
                        background-color: #FFF;
                        width: 120px;
                        height: 120px;
                        border-radius: 100px;
                        margin: auto;
                        border: 9px solid #9e9fdb;
                    }
                }
            }
        }
    }

    section.passport_data {
        & .each {
                    padding: 20px;

            &.intro {
                & .intro_basic {
                    .theformeach {
                        text-align: left;
                        margin-bottom: 12px;
                        letter-spacing: 1px;
                        font-size: 14px;
                    }
                }
            }
        }
    }

    section.passport_data {
        & .each {
            &.intro {
                & .intro_list {
                    & li {
                        .theicon {
                            width: 55px;
                            height: 55px;
                        }
                    }
                }
            }
        }
    }

    section.passport_data {
        & .each {
            &.intro {
                & .intro_list {
                    & li {
                        .thename, .thename_en, .value{
                            margin-left: 70px;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
    section.passport_data {
        & .each {
            &.intro {
                & .intro_list {
                    & li {
                        .btn {
                            width: auto;
                            margin: 0;
                            height: 40px;
                            line-height: 40px;
                            font-size: 16px;
                            display: inline-block;
                            margin-left: 90px;
                            margin-top: 12px;
                            width: auto;
                            margin: 0;
                            display: block;
                            max-width: none;
                            margin-top: 10px;
                            font-size: 15px;
                        }
                    }
                }
            }
        }
    }


    section.passport_data {
        & .pets_list {
            & li {
                &.active:before {
                    background-color: #ffffffc9;
                    content: '';
                    display: block;
                    width: 33px;
                    height: 78px;
                    position: absolute;
                    z-index: -1;
                    right: 35px;
                    top: -14px;
                    border-top-left-radius: 82px;
                    border-bottom-left-radius: 76px;
                }
            }
        }
    }

   
}