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


/* body ///////////////////////*/
/*
.design{
.pa;
z-index:0;
width:100%;
height:15000px;
background:url("../about/image/design.jpg") no-repeat center 0;
opacity:.3;
}

.body{
.pr;
z-index:1;
}
*/


/* message ///////////////////////*/
.message{
padding:130px 0 100px 0;

section{
.dtc;
.vat;
}
section:first-child{
width:300px;
}

header{
border-left:3px @c2 solid;
padding:10px 0 10px 20px;
}
h3{
font-size:25pt;
line-height:180%;
}
.text{
padding:30px 0 0 0;
}

dl{
.dt;
padding:30px 0 0 0;
width:100%;
}
dd{
.dtc;
.vat;
}
dd:fitst-child{
padding:0 50px  0 0;
}
h4{
color:@c3;
font-size:14pt;
.ffgb;
padding:30px 0 10px 0;
margin:0 0 10px 0;
border-bottom:1px @g2 dotted;
}

}


@media (max-width:1000px) {
.message{
padding:100px 0 50px 0;

section{
.db;
}
section:first-child{
width:auto;
}

header{
border-left:3px @c2 solid;
padding:10px 0 0 10px;
}

h3{
padding:20px 0 0 0;
font-size:17pt;
line-height:160%;
}

}
}


@media (max-width:500px) {
.message{
padding:80px 0 50px 0;

.text{
padding:20px 0 0 0;
}

dl{
.db;
padding:30px 0 0 0;
.tac;
}
dd{
.db;
}
dd:fitst-child{
padding:0;
}
h4{
font-size:12pt;
padding:20px 0 10px 0;
}

}
}



/* feature ///////////////////////*/
.feature{
padding:80px 0 50px 0;
background:@g1;

section{
.dtc;
.vat;
}
section:first-child{
width:300px;
}

header{
border-left:3px @c2 solid;
padding:10px 0 10px 20px;
}

dl{
.dt;
margin:0 0 30px 0;
}
dd{
.dtc;
.vat;
}
dd:first-child{
width:340px;
padding:0 40px 0 0;
}

small{
color:@c3;
.ffgb;
letter-spacing:.05em;
font-size:9pt;
}

h3{
color:@c1;
.ffgb;
letter-spacing:.05em;
font-size:18pt;
padding:0 0 10px 0;
margin:0 0 20px 0;
border-bottom:1px @g2 dotted;
}

}



@media (max-width:1000px) {
.feature{
padding:80px 0 50px 0;

section{
.db;
}
section:first-child{
width:auto;
padding:0 0 30px 0;
}

header{
border-left:3px @c2 solid;
padding:10px 0 0 10px;
}

dl{
margin:0 0 30px 0;
}
dd{
.dtc;
.vat;
}
dd:first-child{
width:310px;
padding:0 0 0 0;
}

}
}


@media (max-width:500px) {
.feature{
padding:50px 0 20px 0;

dl{
margin:0 0 30px 0;
}
dd{
.db;
.vat;
}

dd:first-child{
width:100%;
padding:0 0 10px 0;
img{
width:100%;
}
}

h3{
font-size:14pt;
margin:0 0 10px 0;
}

}
}


/* service ///////////////////////*/
.service{
padding:80px 0 0 0;

header{
.tac;
padding:0 0 40px 0;
}
header .line{
border-bottom:3px @c2 solid;
width:30px;
margin:20px auto;
}

.wrap{
.pr;
.dt;
max-width:1000px;
.center;
z-index:10;
}

section{
.dtc;
padding:0 10px;
}

dt{
.pr;
.oh;
width:100%;
height:300px;
background:#FFF;
}

dt img{
.pa;
top:0;
width:100%;
height:100%;
transition:.5s;
.of;
}

dd{
background:#FFF;
padding:30px;

h4{
font-size:14pt;
letter-spacing:.1em;
.ffgb;
}
small{
font-size:9pt;
}
.line{
width:20px;
margin:10px 0;
}
} /* dd */

a:hover >  dl dt img{
width:110%;
height:110%;
opacity:.5;
top:-5%;
}


.sec1{
h4,
small{
color:@c3;
}
.line{
border-top:2px @c3 solid;
}
} /*sec1*/


.sec2{
h4,
small{
color:@c1;
}
.line{
border-top:2px @c1 solid;
}
}/*sec2*/

.bg{
background:@g1;
height:400px;
width:100%;
margin-top:-320px;
}

}


@media (max-width:1000px){
.service{
padding:50px 0 0 0;

header{
padding:0 0 30px 0;
}

.wrap{
.db;
}

section{
.db;
padding:0;
margin:0 0 20px 0;
width:100%;
}

dt{
height:300px;
}

dd{
padding:20px 0;
border-top:15px @g1 solid;
border-bottom:15px @g1 solid;
}

.bg{
.dn;
}

}
}

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

dt{
height:200px;
}

}
}


/* staff ///////////////////////*/
.staff{
padding:100px 0 0 0;

header{
.tac;
padding:0 0 40px 0;
}
header .line{
border-bottom:3px @c2 solid;
width:30px;
margin:20px auto;
}

section{
.pr;
margin:80px 0 0 0;
}

section:nth-child(2){
margin:0;
}

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

.wrap{
.pr;
z-index:10;
padding:20px 0 0 0;
width:600px;
}

ul{
width:100%;
.dt;
}
li{
.dtc;
.tac;
padding:0 5px;
}

h4{
color:@c3;
.ffgb;
font-size:10pt;
letter-spacing:.1em;
.nw;
.db;
}
h3{
font-size:25pt;
letter-spacing:.1em;
padding:20px 0 0 0;
.nw;
.dib;
.vam;
}
small{
color:@c1;
.ffgb;
font-size:8pt;
letter-spacing:.2em;
padding:20px 10px 0 10px;
.nw;
.dib;
.vam;
}
.line{
.cr;
margin:20px 0 0 0;
border-bottom:1px @c2 solid;
width:15px;
}
.text{
.cr;
padding:30px 0 20px 0;
}

section:nth-child(even){
.bg{
right:0;
}
}
section:nth-child(odd){
.wrap{
margin:0 0 0 auto;
}
h4,
h3,
small,
.line{
.right;
}
h3{
.cr;
}
}

}


@media (max-width:1000px){
.staff{
padding:50px 0 0 0;

header{
padding:0 0 30px 0;
}
header .line{
margin:10px auto;
}

section{
margin:50px 0 0 0;
}
section:nth-child(2){
margin:0;
}

.bg{
.ps;
img{
width:100%;
height:420px;
.of;
}
}


ul{
width:auto;
}
li{
.dtc;
.tac;
padding:0 5px;
}

.wrap{
padding:10px 0 0 0;
width:auto;
}

h3{
font-size:20pt;
padding:10px 0 0 0;
}
small{
font-size:7pt;
padding:10px 10px 0 10px;
}
.line{
margin:20px 0 0 0;
width:10px;
}
.text{
.cr;
padding:15px 0 15px 0;
}

section:nth-child(even){
.bg{
right:auto;
}
}
section:nth-child(odd){
.wrap{
margin:0;
}
h4,
h3,
small,
.line{
.fn;
}
h3{
.cr;
}
}

}
}


@media (max-width:500px){
.staff{
padding:50px 0 0 0;

.bg{
img{
height:220px;
}
}

}
}

.founder {
padding: 5%;
background: #f6f6f6;
}
.staff .founder .wrap{
max-width: 530px;
}
.staff .founder h4{
color: #999;
}
.staff .founder small{
color: #666;
}
.staff .founder .bg{
right: 5% !important;
div{
padding-bottom: 10px;
}
}
@media (max-width:1000px){
.staff .founder .bg{
display: table;
margin-bottom: 15px;
div{
display: table-cell;
padding: 0 5px;
}
img{
width: 100%;
height: auto;
}
}
}