@import (once) "font.less";
@import (once) "default.less";


/* .main ///////////////////////*/
.main{
.pr;
.oh;
width:100%;
height:100%;

.image{
.pa;
.dt;
width:100%;
height:100%;
z-index:0;

dd{
.dtc;
height:100%;
background:rgba(0,0,0,1);
p{
.db;
opacity:.7;
width:100%;
height:100%;
}
}

}

.p1{
background: url(../image/01.jpg) no-repeat center 50%;
background-size:cover;
}
.p2{
background: url(../image/02.jpg) no-repeat center 50%;
background-size:cover;
}
.p3{
background: url(../image/03.jpg) no-repeat center 50%;
background-size:cover;
}

.text{
.pa;
z-index:2;
width:100%;
height:100%;
}

h1{
.pa;
bottom:30%;
left:2%;
.nw;
color:#FFFFFF;
.ffgm;
font-size:6vw;
line-height:130%;
}

.rect{
.pa;
right:0;
bottom:0;
width:50vw;
height:50vw;
}
.rect p{
.bg;
.pa;
width:50vw;
height:50vw;
transform:rotate(-45deg);
top:50%;
left:50%;
}
em{
.pa;
bottom:10vh;
right:4vh;
}
h2{
.ffgr;
font-size:1.25vw;
color:#FFFFFF;
letter-spacing:.7em;
line-height:100%;
}
h3{
.ffgm;
font-size:3vw;
color:#FFFFFF;
letter-spacing:.5em;
line-height:130%;
}

}


@media (max-width:1000px){
.main{

.rect{
width:70vw;
height:70vw;
}
.rect p{
width:70vw;
height:70vw;
}
em{
.pa;
bottom:5vh;
right:2vh;
}
h2{
font-size:2.1vw;
}
h3{
font-size:5vw;
}

}
}

@media (max-width:500px){
.main{

h1{
bottom:35%;
font-size:9vw;
}

.rect{
width:100vw;
height:100vw;
}
.rect p{
width:100vw;
height:100vw;
}
em{
.pa;
bottom:5vh;
right:2vh;
}
h2{
font-size:3vw;
}
h3{
font-size:7vw;
}

}
}


@media (max-height:500px){
.main{

.rect{
width:100vh;
height:100vh;
}
.rect p{
width:100vh;
height:100vh;
}
em{
.pa;
bottom:5vh;
right:2vh;
}
h2{
font-size:3vh;
}
h3{
font-size:7vh;
}

}
}


/* voice ///////////////////////*/
.voice{
padding:10vh 0;

article{
height:50vh;
background: url(../image/04.jpg) no-repeat center 50%;
background-size:cover;
}

.bg{
height:100%;
width:50%;
margin:0 0 0 auto;
trantision:5s;
}
header{
padding:17vh 0 0 0;
}

}

@media (max-width:500px), (max-height:500px){
.voice{

article{
height:45vh;
}
header{
padding:10vh 0 0 0;
}

}
}



/* info about///////////////////////*/
.info,
.about{
.pr;
.dib;
width:50%;
height:70vh;

.image{
.pa;
z-index:0;
width:100%;
height:100%;
opacity:.8;
}

.text{
.pa;
z-index:1;
}

.more{
padding:17vh 0 0 0;
}

}




/* info ///////////////////////*/
.info{
.left;
background: url(../image/05.jpg) no-repeat center 50%;
background-size:cover;

.bg3{
height:100%;
}
header{
padding:25vh 0 0 0;
}

}


/* about ///////////////////////*/
.about{
background: url(../image/06.jpg) no-repeat center 50%;
background-size:cover;

.bg3{
height:100%;
}
header{
padding:25vh 0 0 0;
}

}

@media (max-width:500px){
.info,
.about{
.db;
width:100%;
height:45vh;
float:none;

header{
padding:12vh 0 0 0;
}
.more{
padding:6vh 0 0 0;
}

}
}


/* support ///////////////////////*/
.support{
padding:10vh 0 0 0;

article{
height:50vh;
background: url(../image/07.jpg) no-repeat center 50%;
background-size:cover;
}

.bg{
height:100%;
width:50%;
margin:0 auto 0 0;
}

header{
padding:17vh 0 0 0;
}

}

@media (max-width:500px), (max-height:500px){
.support{

article{
height:45vh;
}
header{
padding:10vh 0 0 0;
}

}
}


/* recruit ///////////////////////*/
.recruit{
padding:2vh 0 10vh 0;

article{
height:50vh;
background: url(../image/08.jpg) no-repeat center 50%;
background-size:cover;
}

.bg{
height:100%;
width:50%;
margin:0 0 0 auto;
}

header{
padding:17vh 0 0 0;
}

}

@media (max-width:500px), (max-height:500px){
.recruit{
padding:2vh 0 6vh 0;

article{
height:45vh;
}
header{
padding:10vh 0 0 0;
}

}
}