@charset "utf-8";

#main{
background: #178aff;
overflow: hidden;
}

#mf1{
background:url("../../img/interview/staff1/mbg.jpg") center center /contain no-repeat;
}
#mf1 img{
max-width: 1400px;
visibility: hidden;
}
@media screen and (max-width: 1400px) {
#mf1{
background-size:auto;
}
}

#mf2{
position: relative;
z-index: 9;
}
#mf2:before{
content: "";
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 600px);
right: 0;
z-index: -1;
}
#mf2 .mf-inner{
position: relative;
padding: 100px 50px;
}
#mf2 h2{
display: table;
margin: 0 auto 60px auto;
padding: 0 50px;
color: #178aff;
font-size: 2em;
font-weight: bold;
text-align: center;
position: relative;
}
#mf2 h2:before,
#mf2 h2:after{
content: "";
max-width: 30px;
max-height: 45px;
width: 4vw;
height: 6vw;
background: url("../../img/interview/ic4.png") center center /cover no-repeat;
position: absolute;
bottom: 0;
}
#mf2 h2:before{
left: 0;
}
#mf2 h2:after{
right: 0;
transform: scaleX(-1);
}
#mf2 dl{
width: 560px;
margin: 0 0 50px 0;
}
#mf2 dt{
color: #178aff;
font-size: 1.5em;
font-weight: bold;
margin: 0 0 20px 0;
}
#mf2 dd{
font-size: 1.13em;
}
#mf2 dt:before{
content: "Q";
font-size: 2.5em;
font-weight: bold;
margin: 0 10px 0 0;
}
#mf2 figure{
max-width: 600px;
width: 80vw;
margin: 0 auto;
position: absolute;
bottom: 0;
right: -60px;
}

#mf3{
position: relative;
}
#mf3 .mf-inner{
padding: 100px 50px;
}
#mf3 h2{
display: table;
margin: 0 auto 60px auto;
padding: 0 50px;
color: #fff;
font-size: 2em;
font-weight: bold;
text-align: center;
position: relative;
}
#mf3 h2:before,
#mf3 h2:after{
content: "";
max-width: 30px;
max-height: 45px;
width: 4vw;
height: 6vw;
background: url("../../img/interview/ic5.png") center center /cover no-repeat;
position: absolute;
bottom: 0;
}
#mf3 h2:before{
left: 0;
}
#mf3 h2:after{
right: 0;
transform: scaleX(-1);
}
#mf3 dl{
width: 680px;
margin: 0 0 50px auto;
color: #fff;
}
#mf3 dt{
font-size: 1.5em;
font-weight: bold;
margin: 0 0 20px 0;
}
#mmf3f2 dd{
font-size: 1.13em;
}
#mf3 dt:before{
content: "Q";
font-size: 2.5em;
font-weight: bold;
margin: 0 10px 0 0;
}

#mf3 figure{
max-width: 314px;
width: 41.87vw;
margin: 0 auto;
position: absolute;
top: 50%;
left: calc(50% - 600px);
transform: translate(0,-50%);
}


#mf4{
position: relative;
z-index: 9;
}
#mf4:before{
content: "";
background: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: calc(50% - 600px);
z-index: -1;
}
#mf4 .mf-inner{
padding: 100px 50px;
}
#mf4 h2{
display: table;
margin: 0 auto 60px auto;
padding: 0 50px;
color: #178aff;
font-size: 2em;
font-weight: bold;
text-align: center;
position: relative;
}
#mf4 h2:before,
#mf4 h2:after{
content: "";
max-width: 30px;
max-height: 45px;
width: 4vw;
height: 6vw;
background: url("../../img/interview/ic4.png") center center /cover no-repeat;
position: absolute;
bottom: 0;
}
#mf4 h2:before{
left: 0;
}
#mf4 h2:after{
right: 0;
transform: scaleX(-1);
}
#mf4 dl{
width: 600px;
margin: 0 0 50px 0;
}
#mf4 dt{
color: #178aff;
font-size: 1.5em;
font-weight: bold;
margin: 0 0 20px 0;
}
#mf4 dd{
font-size: 1.13em;
}
#mf4 dt:before{
content: "Q";
font-size: 2.5em;
font-weight: bold;
margin: 0 10px 0 0;
}
#mf4 figure{
max-width: 418px;
width: 55.73vw;
margin: 0 auto;
position: absolute;
top: 50%;
right: calc(50% - 620px );
transform: translate(0,-50%);
}


#mf5{
position: relative;
}
#mf5 .mf-inner{
padding: 100px 50px;
}
#mf5 h2{
display: table;
margin: 0 auto 100px auto;
padding: 0 50px;
color: #fff;
font-size: 2em;
font-weight: bold;
text-align: center;
position: relative;
}
#mf5 h2:before,
#mf5 h2:after{
content: "";
max-width: 30px;
max-height: 45px;
width: 4vw;
height: 6vw;
background: url("../../img/interview/ic5.png") center center /cover no-repeat;
position: absolute;
bottom: 0;
}
#mf5 h2:before{
left: 0;
}
#mf5 h2:after{
right: 0;
transform: scaleX(-1);
}

#mf5 .ctext{
width: 550px;
color: #fff;
}
#mf5 .ctext p{
font-size: 1.38em;
margin: 0 0 2em 0;
}
#mf5 .ctext p.btn{
width: 500px;
}


#mf5 figure{
max-width: 536px;
width: 71.47vw;
margin: 0 auto;
position: absolute;
bottom: 0;
right: calc(50% - 620px );
}




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

#mf1{
background-image: url("../../img/interview/staff1/mbgs.jpg");
}



#mf2:before{
left: 5vw;
}
#mf2 .mf-inner{
padding: 10vw 5vw 10vw 10vw;
}
#mf2 h2{
margin: 0 auto 5vw auto;
padding: 0 7vw;
font-size: 1.5em;
}


#mf2 dl{
width: auto;
margin: 0 0 5vw 0;
}
#mf2 dt{
font-size: 1.2em;
margin: 0 0 2vw 0;
}
#mf2 dt:before{
font-size: 1.2em;
margin: 0 1vw 0 0;
}
#mf2 dd{
font-size: 1em;
}
#mf2 figure{
position: static;
text-align: center;
}


#mf3 .mf-inner{
padding: 15vw 5vw;
}
#mf3 h2{
margin: 0 auto 5vw auto;
padding: 0 7vw;
font-size: 1.5em;
}
#mf3 dl{
width: auto;
margin: 0 0 5vw 0;
}
#mf3 dt{
font-size: 1.2em;
margin: 0 0 2vw 0;
}
#mf3 dt:before{
font-size: 1.2em;
margin: 0 1vw 0 0;
}
#mmf3f2 dd{
font-size: 1em;
}
#mf3 figure{
position: static;
text-align: center;
transform: none;
}


#mf4:before{
right: 5vw;
}
#mf4 .mf-inner{
padding: 15vw 10vw 15vw 5vw;
}
#mf4 h2{
margin: 0 auto 5vw auto;
padding: 0 7vw;
font-size: 1.5em;
}

#mf4 dl{
width: auto;
margin: 0 0 5vw 0;
}
#mf4 dt{
font-size: 1.2em;
margin: 0 0 2vw 0;
}
#mf4 dt:before{
font-size: 1.2em;
margin: 0 1vw 0 0;
}
#mf4 dd{
font-size: 1em;
}
#mf4 figure{
position: static;
text-align: center;
transform: none;
}


#mf5 .mf-inner{
padding: 15vw 5vw 0 5vw;
}
#mf5 h2{
margin: 0 auto 10vw auto;
padding: 0 7vw;
font-size: 1.5em;
}

#mf5 .ctext{
width: auto;
margin: 0 0 10vw 0;
}
#mf5 .ctext p{
font-size: 1.2em;
margin: 0 auto 2em auto;
}

#mf5 .ctext p.btn{
max-width: 500px;
width: 80vw;
}

#mf5 figure{
position:static;
text-align: center;
}

}


@media screen and (max-width: 750px) {
#mf1{
background-size: contain;
}
#mf1 img{
max-width: 750px;
width: 100%;
}

}