@charset "utf-8";
html { scroll-behavior: smooth; }
body { min-width:320px; background-color: #fff; word-break: keep-all; }

#wrap {  }
.container { max-width: 1700px; width: 92%; margin: 0 auto; position: relative; box-sizing: border-box; }

.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 10em; z-index: 100; background-color: transparent;
  ;
  -webkit-transition: all .75s cubic-bezier(.48,0,.12,1); /* Safari */
  transition: all .75s cubic-bezier(.48,0,.12,1);
}
.site-header > .inner { display: table; width: 92%; height: 100%; margin: 0 auto;
  -webkit-transition: all .5s cubic-bezier(.48,0,.12,1); /* Safari */
  transition: all .5s cubic-bezier(.48,0,.12,1);
}
.site-header > .inner > * { display: table-cell; vertical-align: middle; }

.site-header .site-header-logo { width: 10em; text-align: left; line-height: 0; }
.site-header .site-header-logo a { display: inline-block; position: relative; }
.site-header .site-header-logo .black { display: block; }
.site-header .site-header-logo .white { display: none; }
.site-header .site-header-logo .full {
  -webkit-transition: all .5s cubic-bezier(.48,0,.12,1); /* Safari */
  transition: all .5s cubic-bezier(.48,0,.12,1);
}
.site-header .site-header-logo .half { position: absolute; top: 2px; left: -7px; visibility: hidden;
  -webkit-transform:scale(0.64);
  transform:scale(0.64);
  -webkit-transition: all .5s cubic-bezier(.48,0,.12,1); /* Safari */
  transition: all .5s cubic-bezier(.48,0,.12,1);
}

.site-header .site-header-menu {
  -webkit-transition: all .5s cubic-bezier(.48,0,.12,1); /* Safari */
  transition: all .5s cubic-bezier(.48,0,.12,1);
}
.site-header .site-header-menu > ul { display: table; width: 100%; height: 100%; max-width: 640px; margin: 0 auto; }
.site-header .site-header-menu > ul > li { display: table-cell; vertical-align: middle; text-align: center; }
.site-header .site-header-menu > ul > li a { font-size: 18px; color: #333; }
.site-header .site-main-menu > ul > li a:hover { color: #333; }

.site-header .site-menu-btn { width: 9.375em; text-align: right; }
.site-header .site-menu-btn > a { width: 40px; height: 1.250em; position: relative; border-top: 2px solid #222; border-bottom: 2px solid #222; display: inline-block; box-sizing: border-box; vertical-align: middle; }
.site-header .site-menu-btn > a:before { content: ''; position: absolute; top: 0; left: 0; border-bottom: 2px solid #222; width: 100%; height: 50%; margin-top: -1px; }

.site-header.fixed  { background-color: transparent; }
.site-header.fixed > .inner { width: 96%; }
.site-header.fixed .site-header-menu { opacity: 0; }
.site-header.fixed .site-header-logo .full { opacity: 0; }
.site-header.fixed .site-header-logo .half { visibility: visible; transform:scale(1); -webkit-transform:scale(1); }
.site-header.hide { top: -10em; }
.site-header.white .site-header-menu > ul > li a { color: #fff; }
.site-header.white .site-header-logo .black { display: none; }
.site-header.white .site-header-logo .white { display: block; }
.site-header.white .site-menu-btn > a { border-color: #fff; }
.site-header.white .site-menu-btn > a:before { border-color: #fff; }

body.menu_show { overflow: hidden; }
body.menu_show .site-header-menu { display: none; }
body.menu_show .site-header-logo .black { display: none; }
body.menu_show .site-header-logo .white { display: block; }
body.menu_show .site-menu-btn > a { border-color: #fff; }
body.menu_show .site-menu-btn > a:before { border-color: #fff; }

.site-body { padding-top: 10em; }

.site-footer { background-color: #000; }
.site-footer > .inner { display: table; padding: 30px 0 50px; }
.site-footer > .inner > * { display: table-cell; vertical-align: middle; }
.site-footer > .inner > * + * { margin-top: 20px; }
.site-footer .site-footer-logo { vertical-align: top; width: 200px; }
.site-footer .site-footer-logo a { display: inline-block; }
.site-footer .site-footer-cont {  }
.site-footer .site-footer-cont .tit { color: #838383; margin-bottom: 10px; }
.site-footer .site-footer-cont p { font-size: 13px; color: #494949; }
.site-footer .site-footer-menu { width: 400px; }
.site-footer .site-footer-menu > ul { display: table; width: 100%; height: 100%; margin-left: auto; }
.site-footer .site-footer-menu > ul > li { display: table-cell; vertical-align: middle; text-align: right; }
.site-footer .site-footer-menu > ul > li a { font-size: 13px; color: #838383; text-transform: uppercase; }
.site-footer .site-footer-menu > ul > li a:hover { color: #fff; }

.site-menu { position: fixed; top: 0; left: 100%; width: 100%; height: 100%; z-index: 90; visibility: hidden; }
.site-menu:before { content: ''; position: fixed; top: 0; right: 0; width: 0%; height: 100%; background-color: #000;
  -webkit-transition: width ease .4s .3s;
  -ms-transition: width ease .4s .3s;
  transition: width ease .4s .3s;
}
.site-menu > .inner { height: 100%; position: relative; }
.site-menu .nav { display: table; width: 300px; height: 100%; margin-left: auto;  opacity: 0;
  -webkit-transition: opacity ease .4s .3s;
  -ms-transition: opacity ease .4s .3s;
  transition: opacity ease .4s .3s;
}
.site-menu .nav ul { display: table-cell; vertical-align: middle; }
.site-menu .nav ul > li { text-align: right; margin-bottom: 30px; }
.site-menu .nav ul > li a { font-size: 3em; color: #fff; }
body.menu_show .site-menu { left: 0; visibility: visible; }
body.menu_show .site-menu:before { width: 100%; }
body.menu_show .site-menu .nav { opacity: 1; }

#main {  }
#main .main_section {  }
#main .main_section > .inner { width: 92%; max-width: 1700px; margin: 0 auto; padding: 4.375em 0; position: relative; }
#main .main_section .section_tit { margin-bottom: 3.125em; padding: 0 30px; }
#main .main_section .section_tit h2 { font-size: 4.375em; color: #222; display: inline-block; font-family: 'Abril Fatface', cursive; letter-spacing: 0.5px; margin-right: 0.5em; }
#main .main_section .section_tit p { font-size: 1.250em; color: #949494; display: inline-block; margin-top: 10px; }
#main .main_section .section_cont {  }

#main .main_visual { position: relative; background-color: #222; overflow: hidden; }
#main .main_visual .img { position: absolute; top: 50%; left: 50%; width: 1920px; margin-left: -960px; margin-top: -342.5px; }
#main .main_visual .img img { width: 100%; }
#main .main_visual .cover { position: static; top: 0; left: 0; width: 100%; height: 100%;  }
#main .main_visual .text { display: table; width: 90%; height: 100%; max-width: 1200px; margin: 0 auto; color: #fff; }
#main .main_visual .text > .inner { display: table-cell; vertical-align: middle; padding: 15% 0; }
#main .main_visual .text p { font-size: 1.875em; margin-bottom: 10%; position: relative; }
#main .main_visual .text p:after { content: ''; position: absolute; top: -15px; left: -100px; width: 75px; height: 100%; border-bottom: 1px solid #fff; }
#main .main_visual .text p span { color: #34e0ff; }
#main .main_visual .text ul li { font-size: 1.250em; font-weight: lighter; padding-left: 40px; text-indent: -40px; }
#main .main_visual .text ul li + li { margin-top: 10px; }

#main .naming { text-align: center; font-size: 1.250em; color: #b0b0b0; font-weight: bold; letter-spacing: 2px; padding: 1.875em 0; }
#main .naming strong { color: #000; }

#main .services_grid { margin: -1.5%; overflow: hidden; }
#main .services_grid li { width: 25%; padding: 1.5%; float: left; box-sizing: border-box; }
#main .services_grid li > .inner { height: 0; padding-bottom: 164%; background-color: #f1f1f1; overflow: hidden; }
#main .services_grid li img { width: 100%; display: block; }

#main .projects_grid { overflow: hidden; position: relative; }
#main .projects_grid li { float: left; }
#main .projects_grid li > .inner { height: 0; background-color: #f1f1f1; overflow: hidden; }
#main .projects_grid li img { width: 100%; display: block; }
#main .projects_grid li:nth-child(1) { width: 42%; }
#main .projects_grid li:nth-child(1) > .inner { padding-bottom: 95%; }
#main .projects_grid li:nth-child(2) { width: 58%; }
#main .projects_grid li:nth-child(2) > .inner { padding-bottom: 23%; }
#main .projects_grid li:nth-child(3) { width: 29%; margin-right: 29%; }
#main .projects_grid li:nth-child(3) > .inner { padding-bottom: 46%; }
#main .projects_grid li:nth-child(4) { width: 29%; position: absolute; right: 0; bottom: 0; }
#main .projects_grid li:nth-child(4) > .inner { padding-bottom: 92%; }
#main .projects_grid li:nth-child(5) { width: 29%; margin-right: 29%; }
#main .projects_grid li:nth-child(5) > .inner { padding-bottom: 46%; }

#main .cotact_text_form { padding: 0 30px; max-width: 400px; }
#main .cotact_text_form .btn { width: 157px; }
#main .contact_map_area { position: absolute; top: 7em; bottom: 7em; right: 0; width: 58%; }
#main .contact_map_area > .inner { display: table; width: 100%; height: 100%; }
#main .contact_map_area > .inner > * { display: table-cell; vertical-align: middle; }
#main .contact_map_area .map { background-color: #f1f1f1; overflow: hidden; }

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

}

@media screen and (max-width: 1200px){
  #main .contact_map_area { position: static; width: 100%; height: 300px; margin-top: 4.375em; }
}

@media screen and (max-width: 768px){
  body { font-size: 13px; }

  #site-cover { background: #fff url(/images/common/site-logo.png) center no-repeat }
  #site-cover:after { background-color: #222; }

  .site-header { height: 7em; }
  .site-header.fixed > .inner { width: 92%; }
  .site-header .site-header-menu { display: none; }

  .site-body { margin-top: 7em; }

  .site-footer > .inner > * { display: block; }
  .site-footer .site-footer-menu { width: 100%; }
  .site-footer .site-footer-menu > ul > li { text-align: left; }

  #main .services_grid li { width: 50%; }
  #main .main_section .section_tit { padding: 0; }
  #main .main_section .section_tit p { display: block; }

  #main .projects_grid li:nth-child(1) { width: 100%; }
  #main .projects_grid li:nth-child(2) { width: 100%; }
  #main .projects_grid li:nth-child(3) { width: 50%; margin-right: 50%; }
  #main .projects_grid li:nth-child(4) { width: 50%; }
  #main .projects_grid li:nth-child(5) { width: 50%; margin-right: 50%; }

  #main .cotact_text_form { padding: 0; }
}

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

}

@media screen and (max-width: 399px){
  #main .projects_grid li:nth-child(3) { width: 100%; margin-right: 0; }
  #main .projects_grid li:nth-child(4) { width: 100%; position: static; }
  #main .projects_grid li:nth-child(5) { width: 100%; margin-right: 0; }
}

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

}