/* index /

@media screen and (min-width: 768px) {

    .index #contents_header article{
        width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
    }

    .index #contents_header article figure{
        position: relative;
        width: 33.333333333333%;
        height: 100%;
        background-size: cover;
        background-position: center center ;
       
    }

    .index #contents_header article figure:nth-of-type(1){
        background-image: url(/recruit/project/img/project_index_1.webp);
        z-index: 2;
    }

    .index #contents_header article figure:nth-of-type(2){
        background-image: url(/recruit/project/img/project_index_2.webp);
        z-index: 3;
    }
    
    .index #contents_header article figure:nth-of-type(3){
        background-image: url(/recruit/project/img/project_index_3.webp);
        z-index: 4;
    }


    .index #contents_header article::before{
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, .2);
        z-index: 10;
        left: 0;
        top: 0;
    }

}


.index #contents_area article{
    padding: 30px 0 100px;
    max-width: 1000px;
}

.index #contents_area article a figure{
    overflow: hidden;
    border-radius: 10px;
    background-color: #FFF;
}

.index #contents_area article a div.tbox div{
    padding: 15px 0px 10px;
    line-height: 1;
}

.index #contents_area article a div.tbox div strong{
    font-size: 30px;
    padding-left: 5px;
}

.index #contents_area article a div.tbox h2{
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 1.2;
    padding-bottom: 10px;
}


@media screen and (max-width: 1000px) {
	
    .index #contents_area article{
        padding: 3vw 0px 10vw;
    }
}


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

    .index #contents_header article{
        width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
    }


    .index #contents_header article figure{
        position: relative;
        width: 50%;
        height: 100%;
        background-size: cover;
        background-position: center center ;
    }

    .index #contents_header article figure.img_1{
        background-image: url(/recruit/project/img/project_index_1.webp);
        z-index: 2;
    }

    .index #contents_header article figure.img_2{
        background-image: url(/recruit/project/img/project_index_2.webp);
        z-index: 3;
    }
    
    .index #contents_header article figure.img_3{
        background-image: url(/recruit/project/img/project_index_3.webp);
        z-index: 4;
    }

    .index #contents_header article figure:nth-of-type(3),
    .index #contents_header article figure:nth-of-type(4){
        display: none;
    }

    .index #contents_header article::before{
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0, .2);
        z-index: 10;
        left: 0;
        top: 0;
    }

    .index #contents_area article a div.tbox div strong{
        font-size: 26px;
        padding-left: 5px;
    }
    
    .index #contents_area article a div.tbox h2{
        font-size: 26px;
        letter-spacing: 1px;
    }
    
}



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

    .index #contents_area article a div.tbox div {
        font-size: 12px;
    }

    .index #contents_area article a div.tbox div strong{
        font-size: 7vw;
    }
    
    .index #contents_area article a div.tbox h2{
        font-size: 6.5vw;
    }

}







/* index /








/* ¥×¥í¥¸¥§¥¯¥È /


/* main */

.detail main{
    position: relative;
}

@media screen and (min-width: 768px) {

    .detail main{
        width: 100vw;
        height: calc(100vh - 55px) ;
        background-size: cover;
        background-position: center center ;

        min-height: 45vw;
    }

    .detail #contents_header figure div{
        width: 25%;
        height: 100%;
        background-size: cover;
        background-position: center center ;
    }

    .detail.project_1 main{
        background-image: url(/recruit/project/img/p1_main.webp);
    }

    .detail.project_2 main{
        background-image: url(/recruit/project/img/p2_main.webp);
    }

    .detail.project_3 main{
        background-image: url(/recruit/project/img/p3_main.webp);
    }

    .detail.project_4 main{
        background-image: url(/recruit/project/img/p4_main.webp);
    }

}


.detail #contents_header{
    position: absolute;
    background-color: #d1e7ec;
    background: linear-gradient(90deg, rgba(234,247,244,1) 0%, rgba(229,245,253,1) 100%); 
    display: inline-block;
    white-space: nowrap;
    padding: 25px 60px 50px 30px;
    line-height: 1;
    border-radius: 10px;
    left: 4%;
    bottom: -25px;
    z-index: 10;
}

.detail #contents_header div{
    font-size: 14px;
    letter-spacing: 1px;
}

.detail #contents_header div strong{
    font-size: 22px;
    font-weight: 400;
    padding-left: 10px;
}

.detail #contents_header h1{
    font-size: 3.5vw;
    font-size: 40px;
    letter-spacing: 1px;
    padding: 20px 0px 0px;
}




@media (max-aspect-ratio: 7/6) and (min-width: 768px) {

   
}




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


@media screen and (max-width: 1000px) {
	
    .detail #contents_header{
        padding: 3% 3% 5%;
        min-width: auto;
        left: 3vw;
        bottom: -3vw;
        z-index: 10;
    }

    .detail #contents_header div strong{
        font-size: 18px;
        padding-left: 8px;
    }
    
    .detail #contents_header h1{
        font-size: 4vw;
        padding: 15px 0px 0px;
    }
    
   
   
    
}

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

    main {
        min-height: auto;
    }

}

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

    .detail #contents_header{
        padding: 15px 20px 20px 20px;
        border-radius: 6px;
    }

    .detail #contents_header div {
        font-size: 12px;
    }

    .detail #contents_header div strong{
        font-size: 22px;
        padding-left: 5px;
    }

    .detail #contents_header h1{
        font-size: 6.5vw;
        letter-spacing: 0;
    }

}

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

    

    
    
}





/* main */





/* title & data & member */


.detail #contents_area{
    padding: 140px 0px 40px;
}

.detail #contents_area article{
    padding-bottom: 150px;
}

.detail #contents_area h1{
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: 2px;
    padding-bottom: 60px;
    text-align:justify;
    text-justify:distribute;
}

.detail #contents_area h2{
    font-size: 35px;
    line-height: 1;
    border-top: #000 solid 3px;
    border-bottom: #000 solid 3px;
    padding: 15px;
    text-align: center;
    letter-spacing: 5px;
}

.detail #contents_area dl{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 70px 0px 0px;
}

.detail #contents_area dl dt{
    position: relative;
    width: 105px;
    padding: 2px 15px 0px 20px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.detail #contents_area dl dt::before{
    content: "";
    position: absolute;
    display: block;
    width: 13px;
    height: 13px;
    background-color: #000;
    left: 0;
    top: 4px
}

.detail #contents_area dl dt::after{
    content: "£º";
    display: inline-block;
    font-size: inherit;
    position: absolute;
    line-height: 1;
    display: block;
    right: 0;
    top:3px;
}


.detail #contents_area dl dt span{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    line-height: 1;
}


.detail #contents_area dl dd{
    width : calc(100% - 115px) ;
    line-height: 1.4;
    margin-bottom: 10px;
}


/* project 3 */

.project_3.detail #contents_area #databox .flex > div{
    width: 55%;
    align-items: flex-start;
    padding-right: 5%;
}

.project_3.detail #contents_area #databox .flex figure{
    width: 45%;
    padding-top: 65px;
}

/* project 3 */



.detail #contents_area ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px 0px 0px;
}

.detail #contents_area ul li:nth-child(2n-1){
    width: 300px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
    padding: 30px 0px;
    margin-bottom: 30px;
    border-bottom: #ccc solid 1px;
}

.detail #contents_area ul li:nth-child(2n-1) div{
    width: 150px;
}

.detail #contents_area ul li:nth-child(2n-1) div figure{
    overflow: hidden;
    border-radius: 10px;
}

.detail #contents_area ul li:nth-child(2n-1) aside{
    width: 130px;
    line-height: 1;
}

.detail #contents_area ul li:nth-child(2n-1) aside strong{
    display: block;
    font-size: 16px;
    background-color: #000;
    color: #FFF;
    text-align: center;
    letter-spacing: 0;
    padding: 7px 10px;
}

.detail #contents_area ul li:nth-child(2n-1) aside h3{
    font-size: 25px;
    text-align: center;
    letter-spacing: 3px;
    padding-top: 15px;
    line-height: 1;
}


.detail #contents_area ul li:nth-child(2n){
    width : calc(100% - 300px) ;
    padding: 25px 0px 30px 30px;
    margin-bottom: 30px;
    border-bottom: #ccc solid 1px;
}

.detail #contents_area ul li:nth-child(2n) p{
    font-size: 14px;
}




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

    

}

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

    .detail #contents_area{
        padding: 14vw 0px 4vw;
    }
    
    .detail #contents_area article{
        padding-bottom: 15vw;
    }
    
    .detail #contents_area h1{
        font-size: 4.8vw;
        padding-bottom: 6vw;
    }

    .detail #contents_area h2{
        font-size: 3.5vw;
        line-height: 1;
        padding: 1.5vw;
        text-align: center;
        letter-spacing: 3px;
    }

    .detail #contents_area dl{
        padding: 7vw 0px 0px;
    }

    .detail #contents_area dl dt{
        position: relative;
        width: 90px;
        padding: 2px 13px 0px 16px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    .detail #contents_area dl dt::before{
        content: "";
        position: absolute;
        display: block;
        width: 12px;
        height: 12px;
        background-color: #000;
        left: 0;
        top: 4px
    }
    
    .detail #contents_area dl dt::after{
        content: "£º";
        display: inline-block;
        font-size: inherit;
        position: absolute;
        line-height: 1;
        display: block;
        right: 0;
        top:3px;
    }
    
    
    .detail #contents_area dl dt span{
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        line-height: 1;
    }
    
    
    .detail #contents_area dl dd{
        width : calc(100% - 96px) ;
        line-height: 1.4;
        margin-bottom: 10px;
    }


    /* project 3 */

    .project_3.detail #contents_area #databox .flex > div{
        width: 55%;
        align-items: flex-start;
        padding-right: 5%;
    }

    .project_3.detail #contents_area #databox .flex figure{
        width: 45%;
        padding-top: 7vw;
    }

    /* project 3 */

    

    .detail #contents_area ul{
        padding: 4vw 0px 0px;
    }
    
    .detail #contents_area ul li:nth-child(2n-1){
        width: 240px;
        padding: 3vw 0px 4vw;
    }
    
    .detail #contents_area ul li:nth-child(2n-1) div{
        width: 120px;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside{
        width: 110px;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside strong{
        font-size: 14px;
        padding: 5px 10px;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside h3{
        font-size: 21px;
    }
    
    .detail #contents_area ul li:nth-child(2n){
        width : calc(100% - 240px) ;
        padding: 2.5vw 0px 4vw 20px;
    }
}


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


    .detail #contents_area h1{
        font-size:5.8vw;
        padding-bottom: 6vw;
    }


    .detail #contents_area ul li:nth-child(2n-1){
        width: 100px;
        display: block;
        padding: 3vw 0px 4vw;
    }
    
    .detail #contents_area ul li:nth-child(2n-1) div{
        width: 100px;
        padding-bottom: 10px;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside{
        width: 100px;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside strong {
        font-size: 13px;
      }

    .detail #contents_area ul li:nth-child(2n-1) aside h3{
        font-size: 20px;
        padding-top: 10px;
    }
    
    .detail #contents_area ul li:nth-child(2n){
        width : calc(100% - 100px) ;
    }

    .detail #contents_area ul li:nth-child(2n) p{
        font-size: 13px;
    }

    /* project 3 */


    .project_3.detail #contents_area #databox .flex > div{
        width:100%;
        align-items: flex-start;
        padding-right: 0%;
    }

    .project_3.detail #contents_area #databox .flex figure{
        width: 100%;
        padding-top: 30px;
    }

    /* project 3 */

}


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

    .detail #contents_area h1{
        font-size: 7.2vw;
    }

    .detail #contents_area h2{
        font-size: 20px;
        
    }

}


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

    .detail #contents_area ul li:nth-child(2n-1){
        width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
        border: none;
        padding: 5vw 0px 0vw;
        margin-bottom: 0px;
    }
    
    .detail #contents_area ul li:nth-child(2n-1) div{
        width: 80px;
        padding-bottom: 0px;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside{
        width : calc(100% - 100px) ;
        display: block;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside strong{
        width: 120px;
        font-size: 14px;
        padding: 5px 10px;
        text-align: left;
    }

    .detail #contents_area ul li:nth-child(2n-1) aside h3{
        width: 120px;
        font-size: 24px;
        text-align: left;
    }

    .detail #contents_area ul li:nth-child(2n){
        width: 100%;
        padding: 3vw 0px 5vw;
    }

}


/* title & data & member */






/* contents */

@media screen and (min-width: 768px) {

    .projectbox .long_bg{
        width: 100vw;
        padding-top: 33.333%;
        background-size: cover;
        background-position: center center ;
    }

    .project_1 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p1_1_whilebg.webp);
    }

    .project_1 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p1_2_whilebg.webp);
    }

    .project_1 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p1_3_whilebg.webp);
    }

    .project_2 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p2_1_whilebg.webp);
    }

    .project_2 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p2_2_whilebg.webp);
    }

    .project_2 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p2_3_whilebg.webp);
    }

    .project_3 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p3_1_whilebg.webp);
    }

    .project_3 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p3_2_whilebg.webp);
    }

    .project_3 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p3_3_whilebg.webp);
    }

    .project_4 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p4_1_whilebg.webp);
    }

    .project_4 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p4_2_whilebg.webp);
    }

    .project_4 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p4_3_whilebg.webp);
    }

}

.projectbox article{
    padding: 200px 0px;
}

.projectbox article div .chapter_txt{
    border: #000 solid 3px;
    line-height: 1;
    padding: 8px 18px;
    font-size: 16px;
    letter-spacing: 2px;
}

.projectbox article div h2{
    font-size: 45px;
    line-height: 1.4;
    letter-spacing: 3px;
    padding: 70px 0px 70px;
    text-align:justify;
    text-justify:distribute;
}

.projectbox article div p{
    padding-bottom: 70px;
}

.projectbox article div p span{
    display: block;
    padding-top: 20px;
}

.projectbox article div p span small{
    position: relative;
    font-size: 85%;
    display: block;
    margin-bottom: 10px;
    padding: 6px 15px 8px 60px;
    background-color: rgba(0,0,0, .05);
    line-height: 1.6;
}

.projectbox article div p span small::before{
    content: "";
    position: absolute;
    display: block;
    left: 13px;
}

.projectbox article div p span small.note_1::before{
    content: "¡ù1¡­";
}

.projectbox article div p span small.note_2::before{
    content: "¡ù2¡­";
}

.projectbox article div p span small.note_3::before{
    content: "¡ù3¡­";
}

.projectbox article div p span small.note_4::before{
    content: "¡ù4¡­";
}

.projectbox article div p span small.note_5::before{
    content: "¡ù5¡­";
}

.projectbox article div p span small.note_6::before{
    content: "¡ù6¡­";
}

.projectbox article div p span small.note_7::before{
    content: "¡ù7¡­";
}

.projectbox article div p span small.note_8::before{
    content: "¡ù8¡­";
}

.projectbox article div p span small.note_9::before{
    content: "¡ù9¡­";
}

.projectbox article ul{
    padding: 80px 0px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    
    max-width: 1360px;
    margin: 0% auto 0% calc(50% - 600px) ;
    
}

.projectbox article ul li{
    width: 48%;
    padding-bottom: 70px;
}

.projectbox article ul li figure{
    overflow: hidden;
    border-radius: 10px;
}

.projectbox article ul li figcaption{
    font-size: 13px;
    padding-top: 15px;
}

.projectbox article #photo_last{
    padding: 70px 0px 50px;
}

.projectbox article #photo_last figure{
    overflow: hidden;
    border-radius: 10px;
}


.projectbox article div.slider{
    position: relative;
    overflow: hidden;
    margin: 0% auto 0% calc(50% - 600px) ;
}


.projectbox article div.slider .card{
    margin-right: 40px;
}

.projectbox article div.slider .card figure{
    width: 40vw;
    max-width: 600px;
    overflow: hidden;
    border-radius: 10px;
}

.projectbox article div.slider .card figure img{
    max-width: 100%;
    height: auto;
}

@media screen and (min-width: 1620px) {

    .projectbox article ul{
        max-width: 1360px;
        margin: 0% auto 0% calc(50% - 600px) ;
    }

}

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

    .projectbox article ul{
        max-width: 1360px;
        margin: 0% auto 0% 5%;
    }

    .projectbox article div.slider{
        max-width: 1360px;
        margin: 0% auto 0% 5%;
    }

}

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

    .projectbox article ul{
        margin: 0% 5% 0% 5%;
    }

    .projectbox article div h2{
        line-height: 1.4;
        letter-spacing: 5px;
        padding: 70px 0px 70px;
    }

}

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

    .projectbox article{
        padding: 15vw 0px 10vw;
    }
    
    .projectbox article div h2{
        font-size: 4.5vw;
        line-height: 1.4;
        letter-spacing: 1px;
        padding: 7vw 0px 7vw;
    }
    
    .projectbox article div p{
        padding-bottom: 7vw;
    }
    
    .projectbox article div p span{
        padding-top: 15px;
    }
    
    .projectbox article div p span small{
        margin-bottom: 1vw;
        padding: 4px 12px 6px 50px;
    }
    
    .projectbox article div p span small::before{
        left: 11px;
    }


    .projectbox article ul{
        padding: 0vw 0px 8vw;
    }

    .projectbox article ul li{
        padding-bottom: 5vw;
    }

    .projectbox article #photo_last{
        padding: 0vw 0px 15vw;
    }

}


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

    .projectbox .long_bg{
        width: 100vw;
        padding-top: 300px;
        background-size: cover;
        background-position: center center ;
    }

    .project_1 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p1_1_whilebg_sp.webp);
    }

    .project_1 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p1_2_whilebg_sp.webp);
    }

    .project_1 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p1_3_whilebg_sp.webp);
    }

    .project_2 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p2_1_whilebg_sp.webp);
    }

    .project_2 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p2_2_whilebg_sp.webp);
    }

    .project_2 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p2_3_whilebg_sp.webp);
    }

    .project_3 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p3_1_whilebg_sp.webp);
    }

    .project_3 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p3_2_whilebg_sp.webp);
    }

    .project_3 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p3_3_whilebg_sp.webp);
    }

    .project_4 .projectbox#project_area_1 .long_bg{
        background-image: url(/recruit/project/img/p4_1_whilebg_sp.webp);
    }

    .project_4 .projectbox#project_area_2 .long_bg{
        background-image: url(/recruit/project/img/p4_2_whilebg_sp.webp);
    }

    .project_4 .projectbox#project_area_3 .long_bg{
        background-image: url(/recruit/project/img/p4_3_whilebg_sp.webp);
    }

    .projectbox article ul{
        width: 88%;
        margin: 0 auto;
    }

    .projectbox article div.slider .card figure{
        width: 50vw;
    }
    

    .projectbox article div.slider .card{
        margin-right: 3.5vw;
    }
    
}


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

    .projectbox article div h2{
        font-size: 6.6vw;
        line-height: 1.4;
        letter-spacing: 0px;
        padding: 10vw 0px 10vw;
    }

    .projectbox article div p{
        padding-bottom: 10vw;
    }
    
    .projectbox article ul li{
        width: 100%;
        margin: 0 auto;
        padding-bottom: 25px;
    }

    .projectbox article ul li figcaption{
        font-size: 12px;
        padding-top: 8px;
    }
    
    .projectbox article div.slider .card figure{
        width: 280px;
    }

}


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

    .projectbox article div h2{
        font-size: 7vw;
    }

    .projectbox article div .chapter_txt{
        border: #000 solid 2px;
        line-height: 1;
        padding: 6px 15px;
        font-size: 15px;
        letter-spacing: 1px;
    }
    

}



/* ¥×¥í¥¸¥§¥¯¥È /





#category_menu.category_common ul li span{
    display: inline-block;
    position: absolute;
    transform-origin: left top;
    transform: rotate(90deg);
    left: 10px;
    top: 0;
    white-space: nowrap;
    opacity: .2;
}

#category_menu.category_common ul li span strong{
    font-size: 24px;
}


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

    #category_menu.category_common ul li span{
        font-size: 12px;
    }

    #category_menu.category_common ul li span strong{
        font-size: 18px;
    }
}


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

    #category_menu.category_common ul li span{
        display: none;
    }

}



/* ;ÖÐдÕæ */

.middle,
.middle_slider{
    padding-bottom: 70px;
}

.middle figure{
    overflow: hidden;
    border-radius: 10px;
}

.middle figcaption{
    display: block;
    text-align: center;
    line-height: 1.4;
    padding: 10px 0px 20px;
}

.middle .flex.flex_3 div{
    width: 32%;
}

.middle .flex.flex_2 div{
    width: 48.5%;
}

.middle .flex_3_2 > div:nth-of-type(1){
    width: 32%;
}

.middle .flex_3_2 > div:nth-of-type(2){
    width: 66%;
}

.longcaption{
    width: 100%;
}

.middle .flex div.bgwhite figure{
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5px;
    height: 100%;
}

.middle .flex div.bgwhite figure::before{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #FFF;
    z-index: -1;
}

@media screen and (max-width: 1000px) {
    .middle,
    .middle_slider{
        padding-bottom: 7vw;
    }
}

@media screen and (max-width: 540px) {
    .middle,
    .middle_slider{
        padding-bottom: 10vw;
    }
    
    .middle .flex{
        display: block;
    }

    .middle .flex.flex_3 div,
    .middle .flex.flex_2 div,
    .middle .flex_3_2 > div:nth-of-type(1),
    .middle .flex_3_2 > div:nth-of-type(2){
        width: 100%;
        margin-top: 15px;
    }
}




/* ;ÖÐдÕæ */