@charset "utf-8";

#banner{width: 100%; height: 0; padding-bottom: 33.0729%; position: fixed; z-index: 1; left: 0; top: 0; background: #111;}
#banner>div{width: 100%; height: 100%; background: no-repeat center/cover; position: absolute; top: 0; z-index: 1;}
#banner .wrap{position: absolute; z-index: 2; left: 0; right: 0; margin: auto;}
#banner .con{position: relative; top: 55%;}
#banner .t2{margin: 15px 0 0 11.6%;}

/*---1440---*/
@media (max-width:1679px){

}
/*---1366---*/
@media (max-width:1439px){

}
/*---1280---*/
@media (max-width:1365px){

}
/*---MP---*/
@media (max-width:1279px){
  #banner{padding-bottom: 0; height: 80%;}
}


#space{height:0; padding-bottom: 33.0729%;}
/*---MP---*/
@media (max-width:1279px){
  #space{height: 80%; padding-bottom: 0;}
  #banner .con{top: 51%; text-align: center; transform: scale(.9);}
  #banner .t1, #banner .t2{margin: auto;}
  #banner .t2{margin-top: 15px;}
}


#path{position: relative; z-index: 2; background: #fff; color: #3e3a39; font-size: 1.7rem; padding: 60px 0 70px 0;}
#path a{color: #3e3a39;}
#path a:hover{color: #666;}


#m1{position: relative; z-index: 2; background: #fff;}
#m1>.wrap{display: flex; justify-content: space-between;}
#m1 .l{width: 670px;}
#m1 .l .logo{padding-top: 100px;}
#m1 .l .con{padding-left: 123px; position: relative; margin-top: 60px; color: #3e3a39; font-size: 1.8rem; font-weight: 300;}
#m1 .l .con::before{content: ''; display: block; width: 93px; height: 2px; background: #1b1b1b; position: absolute; left: 0; top: 0;}
#m1 .l .con .col-2{display: flex; position: relative; top: -1.4rem;}
#m1 .l .con .col-2>.col{width: 50%; line-height: 2.5;}
#m1 .l .con .col-1{line-height: 2.5; margin-top: 4rem;}
#m1 .r{width: 706px;}

/*---1440---*/
@media (max-width:1679px){
  #m1 .l{width: 600px;}
  #m1 .l .con{font-size: 1.7rem;}
  #m1 .r{width: 656px;}
}
/*---1366---*/
@media (max-width:1439px){
  #path{font-size: 1.6rem;}

  #m1 .l{width: 580px;}
  #m1 .l .con{font-size: 1.6rem;}
  #m1 .r{width: 606px;}
}
/*---1280---*/
@media (max-width:1365px){
  #path{font-size: 1.5rem;}

  #m1 .l{width: 560px;}
  #m1 .l .con{font-size: 1.5rem;}
  #m1 .r{width: 566px;}
}
/*---MP---*/
@media (max-width:1279px){
  #path{font-size: 1.5rem; padding: 50px 15px;}

  #m1>.wrap{display: block;}
  #m1 .l{width: 100%; padding: 0 15px; box-sizing: border-box;}
  #m1 .l .logo{padding-top: 5px;}
  #m1 .l .logo img{height: 40px;}
  #m1 .l .con{padding-left: 83px; margin-top: 60px; font-size: 1.6rem;}
  #m1 .l .con::before{width: 63px;}
  #m1 .l .con .col-2{display: block;}
  #m1 .l .con .col-2>.col{width: 100%; line-height: 2.5; margin-bottom: 30px;}
  #m1 .l .con .col-1{margin-top: 3rem;}
  #m1 .r{width: 100%; margin-top: 50px;}
}


#m2-space{height: 0; padding-bottom: 7.291%; position: relative; z-index: 2; background: #fff;}


#m2{height: 100%; position: relative; z-index: 2; background: #191919 url('../img/about.m2.jpg') no-repeat center/cover;}
#m2 .wrap{padding-top: 10%; color: #fff;}
#m2 .wrap .tit{font-size: 3.6rem; font-weight: bold;}
#m2 .wrap .tit-en{font-size: 3rem; font-weight: 300; margin-top: 10px;}
#m2 .con{width: 52%; padding-left: 123px; box-sizing: border-box; position: relative; margin-top: 50px; color: #3e3a39; font-size: 1.8rem; font-weight: 300;}
#m2 .con::before{content: ''; display: block; width: 93px; height: 2px; background: #fff; position: absolute; left: 0; top: 12px;}
#m2 .con p{color: #fff; font-size: 2rem; line-height: 2.1; margin-bottom: 40px;}


#m3{position: relative; z-index: 2; background: #fff; padding: 150px 0 160px 0;}
#m3 .tit{text-align: center; font-size: 3.6rem; font-weight: bold; color: #3e3a39;}
#m3 .tit-en{text-align: center; font-size: 2.1rem; text-transform: uppercase; margin-top: 16px; font-weight: 300; letter-spacing: 1.2rem;}
#m3 .con{max-width: 1090px; text-align: center; font-size: 2rem; color: #3e3a39; margin: 60px auto auto auto; line-height: 2.3; position: relative;}
#m3 .con::before{content: ''; display: block; width: 93px; height: 2px; background: #1b1b1b; position: absolute; left: 0; right: 0; margin: auto; top: -25px;}


#m4{height: 100%; position: relative; z-index: 2; background: #191919 url('../img/about.m4.jpg') no-repeat center/cover;}
#m4 .wrap{padding-top: 10%; color: #fff;}
#m4 .wrap .tit{font-size: 3.6rem; font-weight: bold; text-align: right;}
#m4 .wrap .tit-en{font-size: 3rem; font-weight: 300; margin-top: 10px; text-align: right;}
#m4 .con{width: 52%; padding-right: 123px; box-sizing: border-box; position: relative; margin-top: 50px; color: #3e3a39; font-size: 1.8rem; font-weight: 300; float: right;}
#m4 .con::before{content: ''; display: block; width: 93px; height: 2px; background: #fff; position: absolute; right: 0; top: 12px;}
#m4 .con p{color: #fff; font-size: 2rem; line-height: 2.1; margin-bottom: 40px;}

/*---1440---*/
@media (max-width:1679px){
  #m2 .con{font-size: 1.7rem;}
  #m2 .con p{font-size: 1.9rem;}

  #m3 .con{font-size: 1.9rem;}

  #m4 .con{font-size: 1.7rem;}
  #m4 .con p{font-size: 1.9rem;}
}
/*---1366---*/
@media (max-width:1439px){
  #m2 .wrap{padding-top: 8%; color: #fff;}
  #m2 .con{font-size: 1.6rem;}
  #m2 .con p{font-size: 1.8rem;}

  #m3{padding: 120px 0 140px 0;}
  #m3 .con{font-size: 1.8rem;}

  #m4 .con{font-size: 1.6rem;}
  #m4 .con p{font-size: 1.8rem;}
}
/*---1280---*/
@media (max-width:1365px){
  #m2 .wrap{padding-top: 9%; color: #fff;}
  #m2 .con{font-size: 1.5rem;}
  #m2 .con p{font-size: 1.7rem;}

  #m3{padding: 120px 0 140px 0;}
  #m3 .con{font-size: 1.7rem;}

  #m4 .con{font-size: 1.5rem;}
  #m4 .con p{font-size: 1.7rem;}
}
/*---MP---*/
@media (max-width:1279px){
  #m2-space{height: 0; padding-bottom: 0;}
  #m2{height: auto;}
  #m2 .wrap{padding: 70px 15px 60px 15px;}
  #m2 .wrap .tit{font-size: 3rem;}
  #m2 .wrap .tit-en{font-size: 2.4rem;}
  #m2 .con{width: 100%; padding-left: 83px;}
  #m2 .con::before{width: 63px;}
  #m2 .con p{font-size: 1.5rem;}

  #m3{padding: 70px 0 80px 0;}
  #m3 .tit{font-size: 3rem;}
  #m3 .tit-en{font-size: 1.8rem;}
  #m3 .con{max-width: 100%; text-align: center; font-size: 1.6rem; padding: 0 15px; box-sizing: border-box;}
  #m3 .con::before{width: 63px;}

  #m4{height: auto;}
  #m4 .wrap{padding: 70px 15px 80px 15px;}
  #m4 .wrap .tit{font-size: 3rem;}
  #m4 .wrap .tit-en{font-size: 2.4rem;}
  #m4 .con{width: 100%; padding-right: 83px; float: none;}
  #m4 .con::before{width: 63px;}
  #m4 .con p{font-size: 1.6rem;}
}