@charset "UTF-8";



/* unit



1. Basic

   -font family

   -bt

   -block_margin

   -header

   -footer

   -seo

   -other setting

2. Index

3. Inside

   -detail

4. Home

5. About

6. Applications

7. Product

   -Search

8. Solution

9. News

10. Csr

11. Support

12. Contact



*/



/* 1. Basic */

article,
section,
aside,
div,
ul,
ol,
li,
menu,
p,
a,
nav,
link,
form,
input,
textarea,
button,
select,
option,
label,

img,
map,
area,
picture,
svg,
audio,
video,
table,
caption,
th,
tr,
td,
thead,
tbody,
tfoot,
address {

  margin: 0;

  padding: 0;

}

body {

  margin: 0;

  position: relative;

  color: #ffffff;

  background: #0d0d0d;

}

main {

  float: left;

  width: 100%;

}

address {

  font-style: inherit;

}

li {

  list-style-type: none;

}

picture {

  display: block;

}

img {

  width: 100%;

  max-width: 100%;

  display: block;

  -webkit-transition: all 0.4s ease 0s;

  -moz-transition: all 0.4s ease 0s;

  -ms-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

}

h1,
h2,
h3,
h4,
h5,
h6 {

  -webkit-margin-before: 0;

  -webkit-margin-after: 0;

  margin: 0;

  padding: 0;

  font-weight: inherit;

}

a {

  text-decoration: none;

  color: inherit;

  display: block;

  -webkit-transition: all 0.4s ease 0s;

  -moz-transition: all 0.4s ease 0s;

  -ms-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

}

a:focus {

  outline: none;

}

p {

  -webkit-margin-before: 0;

  -webkit-margin-after: 0;

}

p:focus {

  outline: none;

}

input {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

textarea {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  resize: none;

  overflow: auto;

}

input:focus,
select:focus,
textarea:focus,
button:focus {

  outline: none;

}

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



.wp_ation {

  opacity: 0;

}

.wp_show {

  opacity: 1;

  -webkit-transition: all 0.6s ease-in-out 0s;

  -moz-transition: all 0.6s ease-in-out 0s;

  -ms-transition: all 0.6s ease-in-out 0s;

  -o-transition: all 0.6s ease-in-out 0s;

  transition: all 0.6s ease-in-out 0s;

}



/* font family */

@font-face {

  font-family: 'CenturyGothicRegular';

  src: url("../font/CenturyGothic/Regular/CenturyGothicRegular.eot") format("embedded-opentype"), url("../font/CenturyGothic/Regular/CenturyGothicRegular.ttf") format("truetype"), url("../font/CenturyGothic/Regular/CenturyGothicRegular.woff") format("woff");

  font-weight: normal;

  font-style: normal;
}

@font-face {

  font-family: 'CenturyGothicBold';

  src: url("../font/CenturyGothic/Bold/CenturyGothicBold.eot") format("embedded-opentype"), url("../font/CenturyGothic/Bold/CenturyGothicBold.ttf") format("truetype"), url("..font/CenturyGothic/Bold/CenturyGothicBold.woff") format("woff");

  font-weight: normal;

  font-style: normal;
}

@font-face {

  font-family: 'MyriadPro-Light';

  src: url("../font/MyriadPro/Light/MyriadPro-Light.eot") format("embedded-opentype"), url("../font/MyriadPro/Light/MyriadPro-Light.ttf") format("truetype"), url("../font/MyriadPro/Light/MyriadPro-Light.woff") format("woff");

  font-weight: normal;

  font-style: normal;
}

@font-face {

  font-family: 'MyriadPro-Regular';

  src: url("../font/MyriadPro/Regular/MyriadPro-Regular.eot") format("embedded-opentype"), url("../font/MyriadPro/Regular/MyriadPro-Regular.ttf") format("truetype"), url("../font/MyriadPro/Regular/MyriadPro-Regular.woff") format("woff");

  font-weight: normal;

  font-style: normal;
}



body {

  width: 100%;

  font-family: '微軟正黑體';

  font-size: 1rem;

  line-height: 1.625rem;

}

.st_font_shadow {

  text-shadow: #000000 0.1em 0.1em 0.2em;

}

.st_font_01 {

  font-size: 3.375rem;

  line-height: 4.063rem;

  letter-spacing: 0.125rem;

  font-weight: bolder;

  margin: 0 0 5px 0;

}

.st_font_02 {

  font-size: 2rem;

  line-height: 2.75rem;

  font-weight: bolder;

  margin: 0 0 5px 0;

}

.st_font_03 {

  font-size: 1.375rem;

  line-height: 2rem;

  font-weight: bolder;

  color: #e5e5e5;

}

.st_font_04 {

  font-size: 1.25rem;

  line-height: 2rem;

  color: #e5e5e5;

}

.st_font_05 {

  font-size: 1.125rem;

  line-height: 1.875rem;

}

.st_font_06 {

  font-size: 1rem;

  color: #808080;

  text-transform: uppercase;

  letter-spacing: 0.063rem;

  font-weight: bold;

}

.st_font_07 {

  font-size: 0.938rem;

}

.st_font_08 {

  font-size: 0.875rem;

  line-height: 1.625rem;

  color: #dbcfa4;

  margin-bottom: 3px;

}

.st_font_menu {

  font-size: 1.25rem;

  font-weight: bold;

  text-transform: uppercase;

}

.st_list li {

  float: left;

  width: calc(100% - 20px);

  padding-left: 20px;

  margin-bottom: 5px;

  background: url(../images/li.svg) 5px 10px no-repeat;

  background-size: 4px auto;

}

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

  .st_font_01 {

    font-size: 2.75rem;

    line-height: 3.5rem;

  }

}

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

  .st_font_02 {

    font-size: 1.75rem;

    line-height: 2.5rem;

  }

  .st_font_04 {

    font-size: 1.125rem;

    line-height: 1.875rem;

  }

}

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

  .st_font_03 {

    font-size: 1.25rem;

    line-height: 1.875rem;

  }

  .st_font_07 {

    font-size: 0.813rem;

  }

}

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

  body {

    font-size: 0.938rem;

    line-height: 1.563rem;

  }

  .st_font_01 {

    font-size: 1.75rem;

    line-height: 2.375rem;

    letter-spacing: 0;

  }

  .st_font_02 {

    font-size: 1.375rem;

    line-height: 2rem;

  }

  .st_font_03 {

    font-size: 1.125rem;

    line-height: 1.625rem;

  }

  .unit_li_sl_3 .st_font_03 {

    font-size: 0.875rem;

    line-height: 1.25rem;

  }

  .st_font_04 {

    font-size: 1rem;

    line-height: 1.5rem;

  }

  .st_font_06 {

    font-size: 0.813rem;

    line-height: 1.313rem;

  }

  .st_font_08 {

    font-size: 0.75rem;

    line-height: 1.25rem;

  }

  .st_font_menu {

    font-size: 1rem;

  }

}



/* bt */

.slick_bt {

  position: relative;

}

.slick_bt .bt {

  width: 110px;

  height: 110px;

  border-radius: 200px;

  display: inline-block;

  cursor: pointer;

  position: absolute;

  z-index: 1;

  overflow: hidden;

}

.slick_bt .bt::before {

  content: '';

  position: absolute;

  width: 0;

  height: 0;

  left: 50%;

  top: 50%;

  border-radius: 200px;

  background: #ffffff;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -ms-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}

.slick_bt .icon {

  display: block;

  position: absolute;

  color: #ffffff;

  top: 50%;

  left: 50%;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -ms-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}

.slick_bt .bt .bg {

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  background: url(../images/round_bt_bg.svg) 100%;

  -webkit-transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -ms-transition: all 0.3s ease 0s;

  -o-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

  -webkit-transition-property: -webkit-transform;

  -webkit-transition-duration: 1s;

  -moz-transition-property: -moz-transform;

  -moz-transition-duration: 1s;

}

.slick_bt .prev_bg {

  -webkit-animation: prev_bt 5s linear infinite;

  -moz-animation: prev_bt 5s linear infinite;

  -o-animation: prev_bt 5s linear infinite;

  animation: prev_bt 5s linear infinite;

}

@-webkit-keyframes prev_bt {

  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(-360deg)
  }

}

@-moz-keyframes prev_bt {

  from {
    -moz-transform: rotate(0deg)
  }

  to {
    -moz-transform: rotate(-359deg)
  }

}

@-o-keyframes prev_bt {

  from {
    -o-transform: rotate(0deg)
  }

  to {
    -o-transform: rotate(-359deg)
  }

}

@keyframes prev_bt {

  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(-359deg)
  }

}

.slick_bt .next_bg {

  -webkit-animation: next_bt 5s linear infinite;

  -moz-animation: next_bt 5s linear infinite;

  -o-animation: next_bt 5s linear infinite;

  animation: next_bt 5s linear infinite;

}

@-webkit-keyframes next_bt {

  from {
    -webkit-transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(360deg)
  }

}

@-moz-keyframes next_bt {

  from {
    -moz-transform: rotate(0deg)
  }

  to {
    -moz-transform: rotate(359deg)
  }

}

@-o-keyframes next_bt {

  from {
    -o-transform: rotate(0deg)
  }

  to {
    -o-transform: rotate(359deg)
  }

}

@keyframes next_btt {

  from {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(359deg)
  }

}



.menu_bt_link {

  position: relative;

  color: #cccccc;

  overflow: hidden;

}

.menu_bt_link::before {

  position: absolute;

  z-index: -1;

  left: 0;

  top: 0;

  content: '';

  width: 0;

  height: 80px;

  background: #ffffff;

  -webkit-transition: all 0.2s ease 0s;

  -moz-transition: all 0.2s ease 0s;

  -ms-transition: all 0.2s ease 0s;

  -o-transition: all 0.2s ease 0s;

  transition: all 0.2s ease 0s;

}

.bk_bt_link {

  display: inline-block;

  background: #ffffff;

  color: #171717;

  padding: 6px 40px;

  margin-top: 20px;

  border-radius: 50px;

}

.bk_photo_link {

  display: block;

  position: relative;

  padding-top: 75%;

  background-size: 100% auto;

  background-position: center;

  -webkit-transition: all 0.5s ease 0s;

  -moz-transition: all 0.5s ease 0s;

  -ms-transition: all 0.5s ease 0s;

  -o-transition: all 0.5s ease 0s;

  transition: all 0.5s ease 0s;

}

.bk_photo_link::after {

  position: absolute;

  content: '';

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  background: #000000;

  opacity: 0.5;

  -webkit-transition: all 0.5s ease 0s;

  -moz-transition: all 0.5s ease 0s;

  -ms-transition: all 0.5s ease 0s;

  -o-transition: all 0.5s ease 0s;

  transition: all 0.5s ease 0s;

}

.bk_photo_link .logo {

  position: absolute;

  z-index: 1;

  left: 25px;

  bottom: 25px;

  width: 90px;

  opacity: 0.6;

}

.flex_bt {

  position: fixed;

  z-index: 3;

  box-shadow: -2px 2px 9px 2px #1a1a1a;

  -moz-writing-mode: vertical-lr;

  -webkit-writing-mode: vertical-lr;

  -o-writing-mode: vertical-lr;

  -ms-writing-mode: vertical-lr;

  writing-mode: vertical-lr;

  opacity: 0;

  right: -60px;

  top: 50%;

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  -webkit-transition: all 0.4s ease 0s;

  -moz-transition: all 0.4s ease 0s;

  -ms-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

}

.flex_bt a {

  background: #3d3d3d;

  padding: 30px 15px;

  letter-spacing: 0.125rem;

}

.flex_bt.on_flex {

  opacity: 1;

  right: 0;

}

@media (min-width: 769px) {

  .slick_bt .prev_bt:hover,
  .slick_bt .next_bt:hover {

    z-index: 5;

  }

  .slick_bt .prev_bt:hover::before,
  .slick_bt .next_bt:hover::before {

    width: 100%;

    height: 100%;

  }

  .slick_bt .prev_bt:hover .icon,
  .slick_bt .next_bt:hover .icon {

    color: #0d0d0d;

  }

  .slick_bt .prev_bt:hover .bg,
  .slick_bt .next_bt:hover .bg {

    opacity: 0;

  }

  .menu_bt_link:hover {

    color: #0d0d0d;

  }

  .menu_bt_link:hover:before {

    width: 100%;

  }

  .bk_bt_link:hover {

    background: #737373;

    color: #ffffff;

  }

  .bk_photo_link:hover {

    background-size: 110% auto;

  }

  .bk_photo_link:hover:after {

    opacity: 0;

  }

  .flex_bt a:hover {

    background: #ffffff;

    color: #0d0d0d;

  }

}

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

  .slick_bt .bt {

    width: 80px;

    height: 80px;

  }

  .slick_bt .bt i {

    font-size: 0.813rem;

  }

}



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

  .bk_bt_link {

    padding: 4px 30px;

  }

  .bk_photo_link .logo {

    left: 15px;

    bottom: 15px;

    width: 60px;

    opacity: 0.6;

  }

}



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

  .slick_bt .bt {

    width: 65px;

    height: 65px;

  }

  .bk_bt_link {

    padding: 4px 30px;

  }

  .bk_photo_link::after {

    opacity: 0;

  }

  .flex_bt {

    box-shadow: -2px 2px 9px 2px #1a1a1a;

    -moz-writing-mode: initial;

    -webkit-writing-mode: initial;

    -o-writing-mode: initial;

    -ms-writing-mode: initial;

    writing-mode: initial;

    right: 0;

    bottom: -60px;

    top: initial;

    -moz-transform: initial;

    -webkit-transform: initial;

    -o-transform: initial;

    -ms-transform: initial;

    transform: initial;

    width: 100%;

  }

  .flex_bt a {

    padding: 13px 10px;

    width: calc(100% - 20px);

    text-align: center;

  }

  .flex_bt.on_flex {

    bottom: 0;

  }

}































/* block_margin */

.bk_mg_01 {

  margin-left: 100px;

  margin-right: 100px;

  width: calc(100% - 200px);

}

.bk_mg_stand {

  margin-left: 100px;

  margin-right: 100px;

  padding-left: 130px;

  padding-right: 130px;

  width: calc(100% - 460px);

}

.bk_full {

  float: left;

  width: 100%;

  height: 100vh;

}

.bk_tb_01 {

  margin-top: 170px;

  margin-bottom: 170px;

}

.bk_tb_02 {

  margin-top: 240px;

}

.bk_tb_fh {

  min-height: 768px;

}

.bk_tb_fh .slick-list,
.bk_tb_fh .slick-track {

  height: 100%;

}

.bk_tb_cont {

  margin-top: 80px;

  margin-bottom: 130px;

}

.bk_tb_row {

  margin-bottom: 130px;

}

.bk_mg_menu {

  width: 0;

  overflow: hidden;

  -webkit-transition: all 0.3s ease;

  -moz-transition: all 0.3s ease;

  -ms-transition: all 0.3s ease;

  -o-transition: all 0.3s ease;

  transition: all 0.3s ease;

}

.menu_box.on_menu .bk_mg_menu {

  padding-left: 150px;

  padding-right: 100px;

  width: calc(800px - 250px);

}

.unit_t_box {

  position: relative;

  width: 100%;

  margin-bottom: 20px;

}

.unit_t_box span {

  display: inline-block;

  width: 0;

  height: 1px;

  background: #808080;

  vertical-align: top;

  margin-top: 11px;

  -webkit-transition: all 0.3s ease-in .3s;

  -moz-transition: all 0.3s ease-in .3s;

  -ms-transition: all 0.3s ease-in .3s;

  -o-transition: all 0.3s ease-in .3s;

  transition: all 0.3s ease-in .3s;

}

.wp_show .unit_t_box span {

  width: 40px;

}

.unit_t_box .unit_title {

  display: inline-block;

  margin-left: 25px;

  position: relative;

  left: 20px;

  opacity: 0;

  -webkit-transition: all 0.4s ease-in-out .6s;

  -moz-transition: all 0.4s ease-in-out .6s;

  -ms-transition: all 0.4s ease-in-out .6s;

  -o-transition: all 0.4s ease-in-out .6s;

  transition: all 0.4s ease-in-out .6s;

}

.wp_show .unit_t_box .unit_title {

  left: 0;

  opacity: 1;

}

.unit_li_box {

  display: inline-block;

  vertical-align: top;

}

.unit_li_box .photo {

  float: left;

  width: 100%;

}

.unit_li_box .cont {

  float: left;

  margin: 25px 20px;

  width: calc(100% - 40px);

  text-align: left;

}

.unit_li_box .cont .sub_title,
.unit_li_box .cont .title,
.unit_li_box .cont .text,
.unit_li_box .cont a {

  float: left;

  clear: both;

}

.unit_li_box .cont a .more_link {

  float: left;

  margin: 14px 0 0 0;

  opacity: 0.9;

}

.unit_li_box .cont .text {

  margin-top: 15px;

  color: #999999;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  white-space: normal;

}

.unit_li_sl_st {

  display: flex;

  flex-flow: row wrap;

}

.unit_li_sl_2 {

  width: calc(100% / 2 - 40px);

  margin-bottom: 40px;

}

.unit_li_sl_2:nth-child(odd) {

  margin-right: 40px;

}

.unit_li_sl_2:nth-child(even) {

  margin-left: 40px;

}

.unit_li_sl_3 {

  width: calc(100% / 3 - 40px);

  margin-left: 20px;

  margin-right: 20px;

  margin-bottom: 40px;

}

.bk_saying {

  float: left;

  padding: 100px 50px;

  width: calc(100% - 100px);

  background: #333333;

  text-align: center;

}

.bk_saying div {

  display: inline-block;

  width: 100%;

  max-width: 800px;

}

.bk_saying .text {

  margin-top: 20px;

  color: #999999;

}

.bk_saying .from span {

  display: inline-block;

  width: 100px;

  height: 1px;

  margin-right: 30px;

  margin-bottom: 5px;

  background: #999999;

  vertical-align: middle;

}

.bk_saying .name {

  width: auto;

  max-width: initial;

  font-style: italic;

}

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

  .bk_mg_01 {

    margin-left: 50px;

    margin-right: 50px;

    width: calc(100% - 100px);

  }

  .bk_mg_stand {

    margin-left: 50px;

    margin-right: 50px;

    width: calc(100% - 360px);

  }

  .bk_tb_02 {

    margin-top: 200px;

  }

  .menu_box.on_menu .bk_mg_menu {

    padding-left: 100px;

    padding-right: 50px;

    width: calc(800px - 150px);

  }

}

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

  .bk_tb_01 {

    margin-top: 120px;

    margin-bottom: 120px;

  }

  .bk_mg_stand {

    padding-left: 80px;

    padding-right: 80px;

    width: calc(100% - 260px);

  }

  .unit_li_sl_2 {

    width: calc(100% / 2 - 25px);

  }

  .unit_li_sl_2:nth-child(odd) {

    margin-right: 25px;

  }

  .unit_li_sl_2:nth-child(even) {

    margin-left: 25px;

  }

}

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

  .bk_tb_02 {

    margin-top: 160px;

  }

  .bk_tb_cont {

    margin-top: 60px;

    margin-bottom: 70px;

  }

  .bk_tb_row {

    margin-bottom: 70px;

  }

  .menu_box.on_menu .bk_mg_menu {

    width: calc(50% - 150px);

  }

  .unit_t_box {

    margin-bottom: 15px;

  }

  .unit_li_sl_3 {

    width: calc(100% / 2 - 40px);

  }

  .bk_saying {

    padding: 60px 40px;

    width: calc(100% - 80px);

  }

}

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

  .bk_mg_stand {

    padding-left: 30px;

    padding-right: 30px;

    width: calc(100% - 160px);

  }

  .bk_tb_01 {

    margin-top: 90px;

    margin-bottom: 90px;

  }

}

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

  .bk_mg_01 {

    margin-left: 25px;

    margin-right: 25px;

    width: calc(100% - 50px);

  }

  .bk_mg_stand {

    margin-left: 25px;

    margin-right: 25px;

    padding-left: 0;

    padding-right: 0;

    width: calc(100% - 50px);

  }

  .bk_tb_01 {

    margin-top: 60px;

    margin-bottom: 60px;

  }

  .bk_tb_02 {

    margin-top: 140px;

  }

  .bk_tb_fh {

    min-height: auto;

  }

  .bk_tb_cont {

    margin-top: 50px;

    margin-bottom: 20px;

  }

  .bk_tb_row {

    margin-bottom: 20px;

  }

  .menu_box.on_menu .bk_mg_menu {

    padding-left: 25px;

    padding-right: 25px;

    width: calc(100% - 50px);

  }

  .unit_t_box {

    margin-bottom: 10px;

  }

  .unit_t_box span {

    margin-top: 12px;

  }

  .unit_t_box .unit_title {

    margin-left: 15px;

  }

  .unit_li_box .cont {

    margin: 20px 0;

    width: 100%;

  }

  .unit_li_box .cont .sub_title,
  .unit_li_box .cont .title {

    float: left;

    clear: both;

  }

  .unit_li_box .cont .text {

    margin-top: 10px;

  }

  .unit_li_sl_2 {

    width: 100%;

    margin-bottom: 25px;

  }

  .unit_li_sl_2:nth-child(odd) {

    margin-right: 0;

  }

  .unit_li_sl_2:nth-child(even) {

    margin-left: 0;

  }

  .unit_li_sl_3 {

    width: calc(100% / 2 - 16px);

    margin-left: 8px;

    margin-right: 8px;

    margin-bottom: 10px;

  }

  .bk_saying {

    padding: 50px 25px;

    width: calc(100% - 50px);

  }

  .bk_saying .from span {

    display: none;

  }

}



.bk_photo_book {

  float: left;

  margin-left: 100px;

  width: calc(100% - 100px);

}

.bk_photo_book .title_cont {

  float: left;

  margin-left: 130px;

  margin-right: 230px;

  padding-left: 50px;

  padding-right: 50px;

  width: calc(100% - 460px);

  text-align: center;

  position: relative;

}

.bk_photo_book .title_cont .box {

  float: left;

  width: calc(100% - 150px);

  text-align: left;

}

.bk_photo_book .title_cont .box .s_title {

  float: left;

}

.bk_photo_book .title_cont .bt {

  position: absolute;

  right: 0;

  bottom: 0;

  margin-right: 50px;

}

.bk_photo_book .list_cont {

  float: left;

  width: 100%;

  position: relative;

}

.bk_photo_book .list_cont .photo_book_bt {

  position: absolute;

  z-index: 1;

  top: 50%;

  left: 0;

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.bk_photo_book .list_cont .photo_book_bt .prev_bt {

  top: calc(50% - 48px);

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.bk_photo_book .list_cont .photo_book_bt .next_bt {

  top: calc(50% + 48px);

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.bk_photo_book .list_cont .list {

  float: right;

  margin-top: 30px;

  margin-left: 130px;

  padding-left: 50px;

  width: calc(100% - 180px);

  overflow: hidden;

}

.bk_photo_book .list_cont .list .photo_number {

  float: left;

  width: 100%;

  margin-bottom: 15px;

  color: #cccccc;

  font-weight: bolder;

  opacity: 0.9;

}

.bk_photo_book .list_cont .list .photo_book_slick {

  float: left;

  width: 120%;

}

.bk_photo_book .list_cont .list .photo_book_slick .box {

  display: inline-block;

  margin-right: 40px;

  width: calc(33.3% - 40px);

}

.slick-track {

  float: left;

}

@media (min-width: 769px) {}

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

  .bk_photo_book {

    margin-left: 50px;

    width: calc(100% - 50px);

  }

  .bk_photo_book .title_cont {

    margin-right: 180px;

    width: calc(100% - 410px);

  }

}

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

  .bk_photo_book .title_cont {

    margin-left: 80px;

    margin-right: 130px;

    width: calc(100% - 210px);

  }

  .bk_photo_book .list_cont .photo_book_bt .prev_bt {

    top: calc(50% - 35px);

  }

  .bk_photo_book .list_cont .photo_book_bt .next_bt {

    top: calc(50% + 35px);

  }

  .bk_photo_book .list_cont .list {

    margin-top: 20px;

    margin-left: 80px;

    width: calc(100% - 130px);

  }

}

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

  .bk_photo_book {

    margin-left: 25px;

    margin-right: 25px;

    width: calc(100% - 50px);

  }

  .bk_photo_book .title_cont {

    margin-left: 0;

    margin-right: 0;

    padding-left: 0;

    padding-right: 0;

    width: 100%;

  }

  .bk_photo_book .title_cont .box {

    width: 100%;

    text-align: center;

  }

  .bk_photo_book .title_cont .bt {

    position: initial;

    right: initial;

    bottom: initial;

    margin-right: initial;

    display: inline-block;

    width: 100%;

  }

  .bk_photo_book .list_cont .photo_book_bt {

    width: 100%;

  }

  .bk_photo_book .list_cont .photo_book_bt .bt {

    width: 50px;

    height: 50px;

  }

  .bk_photo_book .list_cont .photo_book_bt .prev_bt {

    top: calc(50% - 20px);

    left: 5px;

    -moz-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

  }

  .bk_photo_book .list_cont .photo_book_bt .next_bt {

    top: calc(50% - 20px);

    right: 5px;

    -moz-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

  }

  .bk_photo_book .list_cont .list {

    margin-top: 50px;

    margin-left: 0;

    padding-left: 0;

    width: 100%;

  }

  .bk_photo_book .list_cont .list .photo_number {

    display: none;

  }

  .bk_photo_book .list_cont .list .photo_book_slick {

    width: 100%;

  }

  .bk_photo_book .list_cont .list .photo_book_slick .box {

    margin-right: 0;

    width: 100%;

  }

}









/* loading */

body {

  height: 100vh;

  overflow: hidden;

}

body.on {

  height: initial;

  overflow: initial;

}

.detail #loading {

  display: none;

}

#loading {

  width: 100%;

  height: 100%;

  position: fixed;

  z-index: 999;

  background-color: #0d0d0d;

}

#loading div {

  position: absolute;

  top: 50%;

  left: 50%;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

#loading svg {

  width: 270px;

  overflow: initial;

}

#loading svg path {

  stroke-dasharray: 900;

  stroke-dashoffset: 900;

  stroke: #ffffff;

  stroke-width: 3px;

  fill-opacity: 0;

  -webkit-animation: logo_play 1.0s ease-in-out forwards;

  -moz-animation: logo_play 1.0s ease-in-out forwards;

  -o-animation: logo_play 1.0s ease-in-out forwards;

  animation: logo_play 1.0s ease-in-out forwards;

}

#loading svg path:nth-child(1) {

  -moz-transform: translateX(-100px);

  -webkit-transform: translateX(-100px);

  -o-transform: translateX(-100px);

  -ms-transform: translateX(-100px);

  transform: translateX(-100px);

  -webkit-animation: path_b 1.0s ease-in-out forwards;

  -moz-animation: path_b 1.0s ease-in-out forwards;

  -o-animation: path_b 1.0s ease-in-out forwards;

  animation: path_b 1.0s ease-in-out forwards;

}

#loading svg path:nth-child(3) {

  -moz-transform: translateX(100px);

  -webkit-transform: translateX(100px);

  -o-transform: translateX(100px);

  -ms-transform: translateX(100px);

  transform: translateX(100px);

  -webkit-animation: path_a 1.0s ease-in-out forwards;

  -moz-animation: path_a 1.0s ease-in-out forwards;

  -o-animation: path_a 1.0s ease-in-out forwards;

  animation: path_a 1.0s ease-in-out forwards;

}

@keyframes logo_play {

  0% {

    stroke-dashoffset: 900;

  }

  30% {

    stroke-dashoffset: 0;

    stroke: #ffffff;

    fill: #ffffff;

    fill-opacity: 0;

    stroke-opacity: 1;

  }

  60% {

    stroke-dashoffset: 0;

    fill-opacity: 1;

    stroke-opacity: 0;

    fill: #ffffff;

  }

  80% {

    fill: #ffffff;

    fill-opacity: 1;

  }

  100% {

    stroke-dashoffset: 0;

    stroke: transparent;

  }

}

@keyframes path_b {

  0% {

    stroke-dashoffset: 900;

  }

  30% {

    stroke-dashoffset: 0;

    stroke: #ffffff;

    fill: #ffffff;

    fill-opacity: 0;

    stroke-opacity: 1;

  }

  60% {

    stroke-dashoffset: 0;

    fill-opacity: 1;

    stroke-opacity: 0;

    fill: #ffffff;

    stroke-opacity: 1;

    -moz-transform: translateX(-100px);

    -webkit-transform: translateX(-100px);

    -o-transform: translateX(-100px);

    -ms-transform: translateX(-100px);

    transform: translateX(-100px);

  }

  80% {

    fill: #ffffff;

    fill-opacity: 1;

    -moz-transform: translateX(0);

    -webkit-transform: translateX(0);

    -o-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }

  100% {

    stroke-dashoffset: 0;

    stroke: transparent;

    -moz-transform: translateX(0);

    -webkit-transform: translateX(0);

    -o-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }

}

@keyframes path_a {

  0% {

    stroke-dashoffset: 900;

  }

  30% {

    stroke-dashoffset: 0;

    stroke: #ffffff;

    fill: #ffffff;

    fill-opacity: 0;

    stroke-opacity: 1;

  }

  60% {

    stroke-dashoffset: 0;

    fill-opacity: 1;

    stroke-opacity: 0;

    fill: #ffffff;

    stroke-opacity: 1;

    -moz-transform: translateX(100px);

    -webkit-transform: translateX(100px);

    -o-transform: translateX(100px);

    -ms-transform: translateX(100px);

    transform: translateX(100px);

  }

  80% {

    fill: #ffffff;

    fill-opacity: 1;

    -moz-transform: translateX(0);

    -webkit-transform: translateX(0);

    -o-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }

  100% {

    stroke-dashoffset: 0;

    stroke: transparent;

    -moz-transform: translateX(0);

    -webkit-transform: translateX(0);

    -o-transform: translateX(0);

    -ms-transform: translateX(0);

    transform: translateX(0);

  }

}

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

  #loading svg {

    width: 80px;

  }

}





/* header */

header {

  width: 100%;

  position: fixed;

  z-index: 100;

}

header section {

  float: left;

  position: relative;

  margin-top: 50px;

  z-index: 100;

}

header section .logo {

  float: left;

  width: 90px;

  margin: 0 50px 0 0;

  overflow: hidden;

  opacity: 0;

  -webkit-transition: all 0.6s ease 0s;

  -moz-transition: all 0.6s ease 0s;

  -ms-transition: all 0.6s ease 0s;

  -o-transition: all 0.6s ease 0s;

  transition: all 0.6s ease 0s;

}

header.wp_show section .logo {

  overflow: initial;

  opacity: 1;

}

header section .logo .name {

  height: 0;

  overflow: hidden;

}

.home header section .logo {

  overflow: hidden;

  opacity: 0;

}

.home header section .logo.show {

  overflow: initial;

  opacity: 1;

}

header section .menu_bt {

  position: absolute;

  cursor: pointer;

  margin: 0 0 0 40px;

  right: 0;

  top: 50%;

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

  -webkit-transition: all .3s ease;

  -moz-transition: all .3s ease;

  -ms-transition: all .3s ease;

  -o-transition: all .3s ease;

  transition: all .3s ease;

}

header section .menu_bt span {

  height: 2px;

  width: 0;

  margin: 0 0 5px 0;

  display: block;

  background: #ffffff;

  -webkit-transition: all .3s ease;

  -moz-transition: all .3s ease;

  -ms-transition: all .3s ease;

  -o-transition: all .3s ease;

  transition: all .3s ease;

}

header.wp_show section .menu_bt span {

  width: 25px;

}

header section .menu_bt span:last-child {

  margin: 0;

}

header section .menu_bt.on_close {

  padding: 2px 0;

}

header section .menu_bt.on_close span {

  width: 26px;

}

header section .menu_bt.on_close span:nth-child(1) {

  margin: 0 0 8px 0;

  -moz-transform: rotate(-45deg) translate(-5px, 4px);

  -webkit-transform: rotate(-45deg) translate(-5px, 4px);

  -o-transform: rotate(-45deg) translate(-5px, 4px);

  -ms-transform: rotate(-45deg) translate(-5px, 4px);

  transform: rotate(-45deg) translate(-5px, 4px);

}

header section .menu_bt.on_close span:nth-child(2) {

  height: 0;

  margin: 0;

  opacity: 0;

}

header section .menu_bt.on_close span:nth-child(3) {

  -moz-transform: rotate(45deg) translate(-2px, -2px);

  -webkit-transform: rotate(45deg) translate(-2px, -2px);

  -o-transform: rotate(45deg) translate(-2px, -2px);

  -ms-transform: rotate(45deg) translate(-2px, -2px);

  transform: rotate(45deg) translate(-2px, -2px);

}

@media screen and (min-width: 769px) {

  header section .menu_bt:hover {

    padding: 2px 0;

  }

  header section .menu_bt:hover span:nth-child(1) {

    margin: 0 0 8px 0;

  }

  header section .menu_bt:hover span:nth-child(2) {

    height: 0;

    margin: 0;

    opacity: 0;

  }

}

header .menu_box {

  position: absolute;

  z-index: 10;

  width: 0;

  overflow: hidden;

  height: 100vh;

  left: 0;

  top: 0;

  transition-delay: .5s;

}

header .menu_box.on_menu {

  width: 100%;

  transition-delay: 0s;

}

header .menu_box .menu {

  position: absolute;

  z-index: 10;

  right: 0;

  height: 100%;

  background: #1a1a1a;

}

header .menu_box .menu .list {

  float: left;

  margin-top: 200px;

  opacity: 0;

}

header .menu_box.on_menu .menu .list {

  opacity: 1;

  -webkit-transition: all .2s ease .4s;

  -moz-transition: all .2s ease .4s;

  -ms-transition: all .2s ease .4s;

  -o-transition: all .2s ease .4s;

  transition: all .2s ease .4s;

}

header .menu_box .menu .list a {

  display: block;

  float: left;

  clear: both;

  margin-bottom: 30px;

  padding: 5px 15px;

}

header .menu_box .menu .list a .en,
header .menu_box .menu .list a .tw {

  float: left;

}

header .menu_box .menu .list a .tw {

  float: left;

  margin-left: 20px;

}

header .menu_box .bg {

  float: left;

  width: 100%;

  height: 100vh;

  background: #000000;

  opacity: 0;

  -webkit-transition: all .4s ease;

  -moz-transition: all .4s ease;

  -ms-transition: all .4s ease;

  -o-transition: all .4s ease;

  transition: all .4s ease;

}

header .menu_box.on_menu .bg {

  opacity: 0.6;

}

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

  header {

    top: 0;

    -webkit-transition: all 0.4s ease 0s;

    -moz-transition: all 0.4s ease 0s;

    -ms-transition: all 0.4s ease 0s;

    -o-transition: all 0.4s ease 0s;

    transition: all 0.4s ease 0s;

  }

  header.off_header {

    top: -80px;

  }

  header section {

    margin-top: 25px;

  }

  header.scrol_header {

    background: #0d0d0d;

  }

  header.scrol_header section {

    margin-bottom: 15px;

  }

  header section .logo {

    width: 75px;

    margin: 0 50px 0 0;

  }

  .home header section .logo {

    height: initial;

    overflow: initial;

    opacity: 0;

  }

  .home header section .logo.show {

    height: initial;

    overflow: initial;

    opacity: 1;

  }

  header .menu_box .menu .list {

    margin-top: 150px;

  }

  header .menu_box .menu .list a {

    margin-bottom: 15px;

    padding: 0;

  }

}



/* footer */

footer,
footer article {

  float: left;

}

footer article {

  width: 100%;

  margin-bottom: 80px;

  overflow: hidden;

}

footer .contant_bk {

  float: left;

  width: calc(37% - 100px);

  padding-right: 100px;

}

footer .contant_bk .box .title {

  position: relative;

  left: 20px;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in 0s;

  -moz-transition: all 0.6s ease-in 0s;

  -ms-transition: all 0.6s ease-in 0s;

  -o-transition: all 0.6s ease-in 0s;

  transition: all 0.6s ease-in 0s;

}

footer .contant_bk.wp_show .box .title {

  left: 0;

  opacity: 1;

}

footer .contant_bk .box .text {

  margin-top: 20px;

  color: #999999;

  position: relative;

  left: 20px;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in 0.4s;

  -moz-transition: all 0.6s ease-in 0.4s;

  -ms-transition: all 0.6s ease-in 0.4s;

  -o-transition: all 0.6s ease-in 0.4s;

  transition: all 0.6s ease-in 0.4s;

}

footer .contant_bk.wp_show .box .text {

  left: 0;

  opacity: 1;

}

footer .contant_bk .bt {

  margin-top: 30px;

}

footer .info {

  float: left;

  width: 63%;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in 0.3s;

  -moz-transition: all 0.6s ease-in 0.3s;

  -ms-transition: all 0.6s ease-in 0.3s;

  -o-transition: all 0.6s ease-in 0.3s;

  transition: all 0.6s ease-in 0.3s;

}

footer .info.wp_show {

  opacity: 1;

}

footer .info .logo {

  float: left;

  width: 100%;

  text-align: left;

  margin-top: 55px;

  margin-bottom: 20px;

}

footer .info .logo img {

  display: inline-block;

  width: 130px;

}

footer .info .box {

  float: left;

  width: calc(88% / 2 - 30px);

  padding-right: 30px;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in 0.5s;

  -moz-transition: all 0.6s ease-in 0.5s;

  -ms-transition: all 0.6s ease-in 0.5s;

  -o-transition: all 0.6s ease-in 0.5s;

  transition: all 0.6s ease-in 0.5s;

}

footer .info.wp_show .box {

  opacity: 1;

}

footer .info .box .title {

  float: left;

  margin-bottom: 20px;

}

footer .info .box .text,
footer .info .box .icon,
footer .info .box .text span {

  float: left;

  clear: both;

  width: 100%;

}

footer .info .box .text span {

  margin-bottom: 5px;

}

footer .info .box .text {

  color: #9e9e9e;

}

footer .info .box .icon a {

  float: left;

  margin-right: 18px;

  margin-bottom: 18px;

  position: relative;

  width: 36px;

  height: 36px;

  border-radius: 50px;

  background: #9e9e9e;

  color: #0d0d0d;

  overflow: hidden;

}

footer .info .box .icon a i {

  position: absolute;

  top: 50%;

  left: 50%;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%);

  -o-transform: translate(-50%);

  -ms-transform: translate(-50%);

  transform: translate(-50%, -50%);

}

footer .info .top_bt {

  float: right;

  width: 12%;

  position: relative;

  top: 20px;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in 0.7s;

  -moz-transition: all 0.6s ease-in 0.7s;

  -ms-transition: all 0.6s ease-in 0.7s;

  -o-transition: all 0.6s ease-in 0.7s;

  transition: all 0.6s ease-in 0.7s;

}

footer .info.wp_show .top_bt {

  top: 0;

  opacity: 1;

}

footer .info .top_bt .bt {

  right: 0;

}

footer .copyright {

  float: left;

  width: 100%;

  height: 0;

  overflow: hidden;

}

footer .copyright .company {

  float: left;

}

footer .copyright .designer {

  float: right;

}

@media screen and (min-width: 769px) {

  footer .info .box .icon a:hover {

    background: #ffffff;

    color: #0d0d0d;

  }

}

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

  footer .contant_bk {

    width: calc(40% - 80px);

    padding-right: 80px;

  }

  footer .contant_bk .bt {

    margin-top: 20px;

  }

  footer .info {

    width: 60%;

  }

  footer .info .logo img {

    width: 110px;

  }

  footer .info .box {

    width: calc(50% - 30px);

    padding-right: 30px;

  }

  footer .info .icon_box {

    width: calc(35% - 30px);

  }

}

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

  footer article {

    margin-bottom: 30px;

  }

  footer .contant_bk {

    width: 100%;

    padding-right: 0;

  }

  footer .contant_bk .bt {

    margin-top: 10px;

  }

  footer .info {

    width: 100%;

  }

  footer .info .logo {

    margin-top: 55px;

    margin-bottom: 20px;

  }

  footer .info .logo img {

    width: 90px;

  }

  footer .info .box {

    width: 100%;

    padding-right: 0;

  }

  footer .info .icon_box {

    width: 100%;

    margin-top: 30px;

  }

  footer .info .box .title {

    margin-bottom: 10px;

  }

  footer .info .box .icon {

    margin-top: 5px;

  }

  footer .info .box .text span {

    margin-bottom: 0;

  }

  footer .info .box .icon a {

    margin-right: 15px;

    margin-bottom: 15px;

    width: 30px;

    height: 30px;

  }

  footer .info .top_bt {

    float: right;

    width: 12%;

  }

  footer .info .top_bt .bt {

    right: 0;

    bottom: 7px;

    width: 50px;

    height: 50px;

  }

  footer .copyright .company {

    width: calc(100% - 75px);

  }

  footer .copyright .designer {

    float: left;

    width: calc(100% - 75px);

    margin-top: 3px;

  }

}



/* seo */

.seo_info {

  display: block;

  width: 0;

  height: 0;

  overflow: hidden;

  opacity: 0;

}



/* 2. Index */



/* 3. Inside */

.top_full_banner {

  float: left;

  width: 100%;

  height: 100vh;

  overflow: hidden;

  position: relative;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in 0s;

  -moz-transition: all 0.6s ease-in 0s;

  -ms-transition: all 0.6s ease-in 0s;

  -o-transition: all 0.6s ease-in 0s;

  transition: all 0.6s ease-in 0s;

}

.top_full_banner.wp_show {

  opacity: 1;

}

.top_full_banner .block_cont {

  position: absolute;

  z-index: 1;

  text-align: center;

  width: 60%;

  min-width: 800px;

  top: 50%;

  left: 50%;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.top_full_banner .block_cont .logo {

  display: inline-block;

  margin: 0 0 25px 0;

  width: 180px;

  position: relative;

  top: 20px;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in .3s;

  -moz-transition: all 0.6s ease-in .3s;

  -ms-transition: all 0.6s ease-in .3s;

  -o-transition: all 0.6s ease-in .3s;

  transition: all 0.6s ease-in .3s;

}

.top_full_banner.wp_show .block_cont .logo {

  top: 0;

  opacity: 1;

}

.top_full_banner .block_cont .cont {

  float: left;

  width: 100%;

  margin: 0 0 70px 0;

}

.top_full_banner .block_cont .cont .sub_title,
.top_full_banner .block_cont .cont .title,
.top_full_banner .block_cont .cont .text {

  float: left;

  width: 100%;

  position: relative;

  top: 20px;

  opacity: 0;

}

.top_full_banner .block_cont .cont .sub_title {

  -webkit-transition: all 0.6s ease-in .5s;

  -moz-transition: all 0.6s ease-in .5s;

  -ms-transition: all 0.6s ease-in .5s;

  -o-transition: all 0.6s ease-in .5s;

  transition: all 0.6s ease-in .5s;

}

.top_full_banner .block_cont .cont .title {

  -webkit-transition: all 0.6s ease-in .7s;

  -moz-transition: all 0.6s ease-in .7s;

  -ms-transition: all 0.6s ease-in .7s;

  -o-transition: all 0.6s ease-in .7s;

  transition: all 0.6s ease-in .7s;

}

.top_full_banner .block_cont .cont .text {

  -webkit-transition: all 0.6s ease-in .9s;

  -moz-transition: all 0.6s ease-in .9s;

  -ms-transition: all 0.6s ease-in .9s;

  -o-transition: all 0.6s ease-in .9s;

  transition: all 0.6s ease-in .9s;

}

.top_full_banner.wp_show .block_cont .cont .sub_title,
.top_full_banner.wp_show .block_cont .cont .title,
.top_full_banner.wp_show .block_cont .cont .text {

  top: 0px;

  opacity: 1;

}

.top_full_banner .block_cont .cont .sub_title {

  margin-bottom: 20px;

  font-weight: initial;

}

.top_full_banner .block_cont .cont .text {

  margin-top: 10px;

}

.top_full_banner.wp_sho .block_cont .cont .text {

  opacity: 0.8;

}

.top_full_banner .block_cont .banner_bt {

  display: inline-block;

  width: 100%;

}

.top_full_banner .block_cont .banner_bt .prev_bt {

  top: 50%;

  left: calc(50% - 80px);

  opacity: 0;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  -webkit-transition: all 0.6s ease-in-out 0.7s;

  -moz-transition: all 0.6s ease-in-out 0.7s;

  -ms-transition: all 0.6s ease-in-out 0.7s;

  -o-transition: all 0.6s ease-in-out 0.7s;

  transition: all 0.6s ease-in-out 0.7s;

}

.top_full_banner.wp_show .block_cont .banner_bt .prev_bt {

  left: calc(50% - 48px);

  opacity: 1;

}

.top_full_banner .block_cont .banner_bt .next_bt {

  top: 50%;

  left: calc(50% + 80px);

  opacity: 0;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  -webkit-transition: all 0.6s ease-in-out 0.7s;

  -moz-transition: all 0.6s ease-in-out 0.7s;

  -ms-transition: all 0.6s ease-in-out 0.7s;

  -o-transition: all 0.6s ease-in-out 0.7s;

  transition: all 0.6s ease-in-out 0.7s;

}

.top_full_banner.wp_show .block_cont .banner_bt .next_bt {

  left: calc(50% + 48px);

  opacity: 1;

}

.top_full_banner .scroll_bt {

  position: absolute;

  bottom: 100px;

  left: 50%;

}

.top_full_banner .scroll_bt .bt {

  top: 50%;

  left: 50%;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

.top_full_banner .list {

  position: relative;

  width: 100vw;

  height: 100%;

  opacity: 0.6;

}

.top_full_banner .list section,
.top_full_banner .list .pc_photo,
.top_full_banner .list .phone_photo {

  float: left;

  width: 100%;

  height: 100%;

}

.top_full_banner .list section.slick-active div {

  /*-webkit-animation: photo 8s linear infinite;*/

  /*-moz-animation: photo 8s linear infinite;*/

  /*-o-animation: photo 8s linear infinite;*/

  /*animation: photo 8s linear infinite;*/

}

@-webkit-keyframes photo {

  from {
    background-size: 100% auto;
  }

  to {
    background-size: 110% auto;
  }

}

@-moz-keyframes photo {

  from {
    background-size: 100% auto;
  }

  to {
    background-size: 110% auto;
  }

}

@-o-keyframes photo {

  from {
    background-size: 100% auto;
  }

  to {
    background-size: 110% auto;
  }

}

@keyframes photo {

  from {
    background-size: 100% auto;
  }

  to {
    background-size: 110% auto;
  }

}

.top_full_banner .list section .phone_photo {

  display: none;

}

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

  .top_full_banner .block_cont .logo {

    margin: 0 0 20px 0;

    width: 130px;

  }

  .top_full_banner .block_cont .cont {

    margin: 0 0 60px 0;

  }

  .top_full_banner .block_cont .banner_bt .prev_bt {

    left: calc(50% - 60px);

  }

  .top_full_banner.wp_show .block_cont .banner_bt .prev_bt {

    left: calc(50% - 35px);

  }

  .top_full_banner .block_cont .banner_bt .next_bt {

    left: calc(50% + 60px);

  }

  .top_full_banner.wp_show .block_cont .banner_bt .next_bt {

    left: calc(50% + 35px);

  }

}

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

  .top_full_banner .block_cont {

    min-width: 500px;

  }

}

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

  .top_full_banner .block_cont .logo {

    margin: 0 0 20px 0;

    width: 120px;

  }

}

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

  .top_full_banner .block_cont {

    width: calc(100% - 50px);

    padding: 0 25px;

    min-width: initial;

  }

  .top_full_banner .block_cont .logo {

    margin: 0 0 15px 0;

    width: 90px;

  }

  .top_full_banner .block_cont .cont {

    margin: 0 0 50px 0;

  }

  .top_full_banner .block_cont .cont .text {

    margin-top: 0;

  }

  .top_full_banner .block_cont .banner_bt .prev_bt {

    left: calc(50% - 40px);

  }

  .top_full_banner.wp_show .block_cont .banner_bt .prev_bt {

    left: calc(50% - 28px);

  }

  .top_full_banner .block_cont .banner_bt .next_bt {

    left: calc(50% + 40px);

  }

  .top_full_banner.wp_show .block_cont .banner_bt .next_bt {

    left: calc(50% + 28px);

  }

  .top_full_banner .list section .pc_photo {

    display: none;

  }

  .top_full_banner .list section .phone_photo {

    display: block;

  }

}



.inside_banner_01 {

  float: left;

  text-align: center;

  position: relative;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in 0s;

  -moz-transition: all 0.6s ease-in 0s;

  -ms-transition: all 0.6s ease-in 0s;

  -o-transition: all 0.6s ease-in 0s;

  transition: all 0.6s ease-in 0s;

}

.inside_banner_01.wp_show {

  opacity: 1;

}

.inside .top_title_cont {

  display: inline-block;

  width: 800px;

}

.inside .top_title_cont .box {

  float: left;

  width: 100%;

}

.inside .top_title_cont .box .title {

  position: relative;

  top: 20px;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in .4s;

  -moz-transition: all 0.6s ease-in .4s;

  -ms-transition: all 0.6s ease-in .4s;

  -o-transition: all 0.6s ease-in .4s;

  transition: all 0.6s ease-in .4s;

}

.wp_show .top_title_cont .box .title {

  top: 0;

  opacity: 1;

}

.inside .top_title_cont .box .text {

  margin-top: 20px;

  color: #999999;

  position: relative;

  top: 20px;

  opacity: 0;

  -webkit-transition: all 0.6s ease-in .8s;

  -moz-transition: all 0.6s ease-in .8s;

  -ms-transition: all 0.6s ease-in .8s;

  -o-transition: all 0.6s ease-in .8s;

  transition: all 0.6s ease-in .8s;

}

.wp_show .top_title_cont .box .text {

  top: 0;

  opacity: 1;

}

.inside_banner_01 .sub_menu {

  float: left;

  text-align: center;

  margin-top: 90px;

  padding: 10px 15px;

  width: calc(100% - 30px);

  background: #191919;

}

.inside_banner_01 .sub_menu .m_sub_bar {

  height: 0;

  overflow: hidden;

}

.inside_banner_01 .sub_menu .list {

  float: left;

  width: 100%;

}

.inside_banner_01 .sub_menu .box {

  display: inline-block;

}

.inside_banner_01 .sub_menu .box .point {

  float: left;

  display: block;

  margin-top: 10px;

  margin-left: 16px;

  margin-right: 18px;

  width: 4px;

  height: 4px;

  border-radius: 50px;

  background: #ffffff;

}

.inside_banner_01 .sub_menu .box:nth-child(1) .point {

  display: none;

}

.inside_banner_01 .sub_menu .box .title {

  position: relative;

  float: left;

  color: #666666;

  font-weight: bolder;

}

.inside_banner_01 .sub_menu .box .title::before {

  position: absolute;

  content: '';

  width: 0;

  height: 4px;

  left: 0;

  bottom: -15px;

  background: #ffffff;

  -webkit-transition: all 0.4s ease 0s;

  -moz-transition: all 0.4s ease 0s;

  -ms-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

}

.inside_banner_01 .sub_menu .box.on .title {

  color: #ffffff;

}

.inside_banner_01 .sub_menu .box.on .title::before {

  width: 100%;

}

.inside_bk_cont {

  float: left;

}

.inside_row_02 {

  float: left;

}

.inside_row_02 .st_row {

  float: right;

  width: calc(50% - 60px);

  margin-left: 60px;

}

.inside_row_02 .st_row:nth-child(2) {

  margin-left: initial;

  margin-right: 60px;

}

.bk_project_item {

  float: left;

  margin-top: 130px;

  margin-bottom: 50px;

}

.bk_project_item .box {

  float: left;

  margin-left: 100px;

  margin-right: 100px;

  margin-bottom: 50px;

  width: calc(100% - 200px);

}

.bk_project_item .box .title {

  float: left;

  width: 30%;

  text-align: right;

}

.bk_project_item .box .instruction {

  float: left;

  width: calc(70% - 100px);

  margin-left: 100px;

  color: #808080;

}

.bk_project_item .box .instruction .cont {

  float: left;

  width: 100%;

  padding-bottom: 25px;

}

.bk_project_item .box .instruction .cont:last-child {

  padding-bottom: 50px;

  border-bottom: 1px solid #808080;

}

.bk_project_item .box:last-child .instruction .cont:last-child {

  padding-bottom: inherit;

  border-bottom: initial;

}

.bk_project_item .box .instruction .cont .sub_title,
.bk_project_item .box .instruction .cont .text,
.bk_project_item .box .instruction .cont .list {

  float: left;

  width: 100%;

}

.bk_project_item .box .instruction .cont .sub_title {

  margin-bottom: 10px;

}

.bk_project_item .box .instruction .cont .text {

  margin-bottom: 15px;

}

@media screen and (min-width: 769px) {

  .inside_banner_01 .sub_menu .box .title:hover {

    color: #ffffff;

  }

  .inside_banner_01 .sub_menu .box .title:hover::before {

    width: 100%;

  }

}

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

  .inside .top_title_cont {

    width: 600px;

  }

  .bk_project_item {

    margin-bottom: initial;

  }

}

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

  .inside .top_title_cont {

    width: 100%;

  }

  .inside_banner_01 .sub_menu {

    margin-top: 60px;

  }

  .inside_row_02 .st_row {

    width: calc(50% - 30px);

    margin-left: 30px;

  }

  .inside_row_02 .st_row:nth-child(2) {

    margin-right: 30px;

  }

  .bk_project_item {

    margin-top: 80px;

  }

  .bk_project_item .box {

    margin-left: 40px;

    margin-right: 40px;

    width: calc(100% - 80px);

  }

}

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

  .inside_row_02 .st_row {

    width: 100%;

    margin-left: initial;

  }

  .inside_row_02 .st_row:nth-child(2) {

    margin-right: initial;

  }

  .bk_project_item {

    margin-top: 60px;

  }

  .bk_project_item .box .title {

    width: 100%;

    text-align: left;

    margin-bottom: 15px;

  }

  .bk_project_item .box .instruction {

    width: 100%;

    margin-left: initial;

  }

}

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

  .inside_banner_01 .sub_menu {

    margin-top: 50px;

    position: relative;

  }

  .inside_banner_01 .sub_menu .m_sub_bar {

    height: auto;

    overflow: initial;

    float: left;

    width: 100%;

    position: relative;

  }

  .inside_banner_01 .sub_menu .m_sub_bar .title {

    float: left;

    margin-right: 40px;

    margin-left: 40px;

    margin-bottom: 3px;

    width: calc(100% - 80px);

  }

  .inside_banner_01 .sub_menu .m_sub_bar .icon {

    position: absolute;

    right: 0;

    width: 20px;

    margin-top: 12px;

  }

  .inside_banner_01 .sub_menu .m_sub_bar .icon span {

    display: block;

    position: absolute;

    left: 0;

    width: 3px;

    height: 3px;

    border-radius: 50px;

    background: #ffffff;

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

  }

  .inside_banner_01 .sub_menu .m_sub_bar .icon span:nth-child(2) {

    left: 50%;

    -moz-transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

  }

  .inside_banner_01 .sub_menu .m_sub_bar .icon span:nth-child(3) {

    left: calc(100% - 3px);

  }

  .inside_banner_01 .sub_menu .m_sub_bar.show_bar .icon span,
  .inside_banner_01 .sub_menu .m_sub_bar.show_bar .icon span:nth-child(3) {

    left: 50%;

    -moz-transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

  }

  .inside_banner_01 .sub_menu .list {

    position: absolute;

    z-index: 1;

    background: inherit;

    left: 0;

    top: 100%;

    padding-top: 0;

    padding-bottom: 0;

    height: 0;

    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

  }

  .inside_banner_01 .sub_menu .list.show_box {

    padding-bottom: 15px;

    height: auto;

    overflow: hidden;

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -ms-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

  }

  .inside_banner_01 .sub_menu .box {

    display: initial;

    float: left;

    width: 100%;

    margin-top: 5px;

    margin-bottom: 5px;

  }

  .inside_banner_01 .sub_menu .box .point {

    display: none;

    text-align: center;

  }

  .inside_banner_01 .sub_menu .box .title {

    width: 100%;

  }

  .inside_banner_01 .sub_menu .box .title::before {

    display: none;

  }

  .inside_banner_01 .sub_menu .box.on {

    display: none;

  }

  .bk_project_item .box {

    margin-left: initial;

    margin-right: initial;

    margin-bottom: 40px;

    width: 100%;

  }

  .bk_project_item .box .instruction .cont:last-child {

    padding-bottom: 30px;

  }

}



/* detail */

.detail_cont {

  width: 100%;

}

.bk_paragraph {

  float: left;

  width: 100%;

  text-align: center;

  color: #999999;

}

.bk_paragraph .cont {

  text-align: left;

}

.bk_paragraph .title,
.bk_paragraph .text,
.bk_paragraph .list,
.bk_paragraph .pg_lo_01 .photo,
.bk_paragraph .pg_lo_01 .iframe {

  float: left;

  width: 100%;

}

.bk_paragraph .title {

  color: #ffffff;

  margin-top: 20px;

  margin-bottom: 15px;

}

.bk_paragraph .text,
.bk_paragraph .list {

  margin-bottom: 18px;

}

.bk_paragraph .link {

  float: left;

  clear: both;

  color: #dbcfa4;

  margin-top: 5px;

  margin-bottom: 25px;

}

.bk_paragraph .link i,
.bk_paragraph .link div {

  float: left;

}

.bk_paragraph .link i {

  margin-top: 4px;

}

.bk_paragraph .link div {

  margin-left: 15px;

}

.bk_paragraph .photo {

  position: relative;

}

.bk_paragraph .pg_lo_01 .youtube {

  float: left;

  width: 100%;

  position: relative;

  padding-bottom: 56.25%;

  height: 0;

  overflow: hidden;

}

.bk_paragraph .pg_lo_01 .youtube iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

body.project .bk_paragraph {

  margin-top: 40px;

  margin-bottom: 80px;

}

body.project .pg_lo_01,
body.project .pg_lo_02,
body.project .pg_lo_03,
body.project .pg_lo_06,
body.project .pg_lo_08 {

  float: left;

  margin-left: 100px;

  margin-right: 100px;

  padding-left: 130px;

  padding-right: 130px;

  width: calc(100% - 460px);

}

body.project .pg_lo_02,
body.project .pg_lo_03 {

  margin-top: 50px;

  margin-bottom: 50px;

}

body.project .pg_lo_01 .photo {

  margin-top: 20px;

  margin-bottom: 100px;

}

body.project .pg_lo_01 .map iframe {

  width: 100%;

  height: 500px;

}

body.project .pg_lo_04 {

  float: left;

  width: 100%;

  margin-top: 40px;

  margin-bottom: 100px;

}

body.project .pg_lo_01 .cont {

  display: inline-block;

  width: 80%;

}

body.project .text_photo .cont {

  width: calc(50% - 150px);

}

body.project .text_photo .photo {

  width: calc(50% - 50px);

}

body.project .pg_lo_02 .cont {

  float: left;

  margin-left: 50px;

  margin-right: 100px;

}

body.project .pg_lo_03 .cont {

  float: right;

  margin-right: 50px;

  margin-left: 100px;

}

body.project .pg_lo_02 .photo {

  float: left;

  margin-left: 50px;

}

body.project .pg_lo_03 .photo {

  float: right;

  margin-right: 50px;

}

body.project .pg_lo_04 .photo {

  float: left;

  width: calc(50% - 100px);

}

body.project .pg_lo_04 .photo:nth-child(1) {

  margin-right: 100px;

}

body.project .pg_lo_04 .photo:nth-child(2n) {

  margin-top: 150px;

  margin-left: 100px;

}

body.project .pg_lo_05,
body.project .pg_lo_07 {

  float: left;

  position: relative;

  margin-left: 230px;

  margin-right: 230px;

  width: calc(100% - 460px);

}

body.project .pg_lo_05 {

  margin-top: 20px;

  margin-bottom: 100px;

}

body.project .pg_lo_05 .photo {

  float: left;

  width: 100%;

}

body.project .pg_lo_05 .photo img {

  -webkit-transition: initial;

  -moz-transition: initial;

  -ms-transition: initial;

  -o-transition: initial;

  transition: initial;

}

body.project .pg_lo_06 {

  text-align: left;

}

body.project .pg_lo_06 .title {

  width: calc(50% - 100px);

  padding-left: 50px;

  padding-right: 50px;

  margin-right: 50%;

}

body.project .pg_lo_06 .cont,
body.project .pg_lo_06 .list,
body.project .pg_lo_08 .cont {

  float: left;

  width: calc(50% - 100px);

  margin-left: 50px;

  margin-right: 50px;

}

body.project .pg_lo_07 {

  margin-bottom: 100px;

}

body.project .pg_lo_07 .photo {

  float: left;

  width: calc(50% - 30px);

}

body.project .pg_lo_07 .photo:nth-child(1) {

  margin-right: 20px;

}

body.project .pg_lo_07 .photo:nth-child(2) {

  margin-left: 30px;

}

body.project .pg_lo_08 {}

@media screen and (min-width: 769px) {

  .bk_paragraph .link:hover {

    color: #da9367;

  }

}

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

  body.project .pg_lo_01,
  body.project .pg_lo_02,
  body.project .pg_lo_03,
  body.project .pg_lo_06,
  body.project .pg_lo_08 {

    margin-left: 50px;

    margin-right: 50px;

    padding-left: 130px;

    padding-right: 130px;

    width: calc(100% - 360px);

  }

  body.project .pg_lo_04 .photo {

    width: calc(50% - 60px);

  }

  body.project .pg_lo_04 .photo:nth-child(1) {

    margin-right: 60px;

  }

  body.project .pg_lo_04 .photo:nth-child(2n) {

    margin-left: 60px;

  }

  body.project .pg_lo_05,
  body.project .pg_lo_07 {

    margin-left: 180px;

    margin-right: 180px;

    width: calc(100% - 360px);

  }

}

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

  body.project .bk_paragraph {

    margin-bottom: 50px;

  }

  body.project .text_photo .cont {

    width: calc(50% - 100px);

    margin-top: initial;

  }

  body.project .pg_lo_02 .cont {

    margin-left: 50px;

    margin-right: 50px;

  }

  body.project .pg_lo_03 .cont {

    margin-right: 50px;

    margin-left: 50px;

  }

}

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

  body.project .pg_lo_01,
  body.project .pg_lo_02,
  body.project .pg_lo_03,
  body.project .pg_lo_06,
  body.project .pg_lo_08 {

    padding-left: 80px;

    padding-right: 80px;

    width: calc(100% - 260px);

  }

  body.project .pg_lo_01 .map iframe {

    height: 300px;

  }

  body.project .pg_lo_04 .photo {

    width: calc(50% - 40px);

  }

  body.project .pg_lo_04 .photo:nth-child(1) {

    margin-right: 40px;

  }

  body.project .pg_lo_04 .photo:nth-child(2n) {

    margin-left: 40px;

  }

  body.project .pg_lo_05,
  body.project .pg_lo_07 {

    margin-left: 80px;

    margin-right: 80px;

    width: calc(100% - 160px);

  }

}

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

  body.project .pg_lo_01,
  body.project .pg_lo_02,
  body.project .pg_lo_03,
  body.project .pg_lo_06,
  body.project .pg_lo_08 {

    padding-left: initial;

    padding-right: initial;

    width: calc(100% - 100px);

  }

  body.project .pg_lo_02,
  body.project .pg_lo_03 {}

  body.project .pg_lo_01 .photo {

    margin-bottom: 80px;

  }

  body.project .pg_lo_04 {

    margin-bottom: 80px;

  }

  body.project .text_photo .cont {

    width: calc(50% - 50px);

  }

  body.project .pg_lo_02 .cont {

    margin-right: initial;

  }

  body.project .pg_lo_03 .cont {

    margin-left: initial;

  }

  body.project .pg_lo_04 .photo:nth-child(2n) {

    margin-top: 80px;

  }

  body.project .pg_lo_05,
  body.project .pg_lo_07 {

    margin-left: 50px;

    margin-right: 50px;

    width: calc(100% - 100px);

  }

  body.project .pg_lo_05 {

    margin-bottom: 80px;

  }

  body.project .pg_lo_06 {}

  body.project .pg_lo_07 {

    margin-bottom: 80px;

  }

  body.project .pg_lo_08 {}

}

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

  body.project .bk_paragraph {

    margin-top: 0;

    margin-bottom: 40px;

  }

  .bk_paragraph .link {

    margin-bottom: 20px;

  }

  .bk_paragraph .link i {

    margin-top: 5px;

  }

  .bk_paragraph .link div {

    margin-left: 12px;

  }

  body.project .pg_lo_01,
  body.project .pg_lo_02,
  body.project .pg_lo_03,
  body.project .pg_lo_06,
  body.project .pg_lo_08 {

    margin-left: 25px;

    margin-right: 25px;

    width: calc(100% - 50px);

  }

  body.project .pg_lo_02,
  body.project .pg_lo_03 {

    margin-top: initial;

    margin-bottom: initial;

  }

  body.project .pg_lo_01 .photo {

    margin-bottom: 40px;

  }

  body.project .pg_lo_01 .map iframe {

    height: 250px;

  }

  body.project .pg_lo_04 {

    width: calc(100% - 50px);

    margin-top: 20px;

    margin-bottom: 40px;

    margin-left: 25px;

    margin-right: 25px;

  }

  body.project .pg_lo_01 .cont {

    display: initial;

    width: 100%;

    float: left;

  }

  body.project .text_photo .cont {

    width: 100%;

    margin-top: initial;

  }

  body.project .text_photo .photo {

    width: 100%;

  }

  body.project .pg_lo_02 .cont {

    margin-left: initial;

    margin-right: initial;

  }

  body.project .pg_lo_03 .cont {

    margin-right: initial;

    margin-left: initial;

  }

  body.project .pg_lo_02 .photo {

    margin-left: initial;

    margin-top: 20px;

    margin-bottom: 40px;

  }

  body.project .pg_lo_03 .photo {

    margin-right: initial;

    margin-top: 20px;

    margin-bottom: 40px;

  }

  body.project .pg_lo_04 .photo {

    width: 100%;

  }

  body.project .pg_lo_04 .photo:nth-child(1) {

    margin-right: initial;

    margin-bottom: 40px;

  }

  body.project .pg_lo_04 .photo:nth-child(2n) {

    margin-top: initial;

    margin-left: initial;

  }

  body.project .pg_lo_05,
  body.project .pg_lo_07 {

    margin-left: 25px;

    margin-right: 25px;

    margin-bottom: 40px;

    width: calc(100% - 50px);

  }

  body.project .pg_lo_06 {}

  body.project .pg_lo_06 .title {

    width: 100%;

    padding-left: initial;

    padding-right: initial;

    margin-right: initial;

  }

  body.project .pg_lo_06 .cont,
  body.project .pg_lo_06 .list,
  body.project .pg_lo_08 .cont {

    width: 100%;

    margin-left: initial;

    margin-right: initial;

  }

  body.project .pg_lo_08 {}

  body.project .pg_lo_07 .photo {

    width: 100%;

  }

  body.project .pg_lo_07 .photo:nth-child(1) {

    margin-right: initial;

    margin-bottom: 40px;

  }

  body.project .pg_lo_07 .photo:nth-child(2) {

    margin-left: initial;

  }

}



body.blog .bk_paragraph {

  margin-top: 40px;

  margin-bottom: 60px;

}

body.blog .pg_lo_01,
body.blog .pg_lo_02,
body.blog .pg_lo_03,
body.blog .pg_lo_04,
body.blog .pg_lo_05,
body.blog .pg_lo_06,
body.blog .pg_lo_07 {

  float: left;

  margin-left: 100px;

  margin-right: 100px;

  margin-bottom: 60px;

  padding-left: 260px;

  padding-right: 260px;

  width: calc(100% - 720px);

  text-align: left;

}

body.blog .text_photo {

  margin-top: 40px;

}

body.blog .pg_lo_02 .cont {

  float: left;

  width: calc(50% - 40px);

  margin-right: 40px;

  margin-top: 40px;

}

body.blog .pg_lo_02 .photo {

  float: right;

  width: calc(50% - 40px);

}

body.blog .pg_lo_03 .cont {

  float: right;

  width: calc(50% - 40px);

  margin-left: 40px;

  margin-top: 40px;

}

body.blog .pg_lo_03 .photo {

  float: left;

  width: calc(50% - 40px);

}

body.blog .pg_lo_04 .photo,
body.blog .pg_lo_07 .photo {

  float: left;

  width: calc(50% - 20px);

  margin-right: 20px;

  margin-bottom: 30px;

}

body.blog .pg_lo_04 .photo:nth-child(2n),
body.blog .pg_lo_07 .photo:nth-child(2n) {

  margin-right: initial;

  margin-left: 20px;

}

body.blog .pg_lo_05 .photo {

  float: left;

  width: 100%;

}

body.blog .pg_lo_05 .photo img {

  -webkit-transition: initial;

  -moz-transition: initial;

  -ms-transition: initial;

  -o-transition: initial;

  transition: initial;

}

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

  body.blog .pg_lo_01,
  body.blog .pg_lo_02,
  body.blog .pg_lo_03,
  body.blog .pg_lo_04,
  body.blog .pg_lo_05,
  body.blog .pg_lo_06,
  body.blog .pg_lo_07 {

    margin-left: 50px;

    margin-right: 50px;

    margin-bottom: 40px;

    padding-left: 130px;

    padding-right: 130px;

    width: calc(100% - 360px);

  }

}

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

  body.blog .bk_paragraph {

    margin-top: initial;

    margin-bottom: initial;

  }

  body.blog .pg_lo_01,
  body.blog .pg_lo_02,
  body.blog .pg_lo_03,
  body.blog .pg_lo_04,
  body.blog .pg_lo_05,
  body.blog .pg_lo_06,
  body.blog .pg_lo_07 {

    padding-left: 80px;

    padding-right: 80px;

    width: calc(100% - 260px);

  }

  body.blog .pg_lo_02 .cont {

    margin-top: initial;

  }

  body.blog .pg_lo_03 .cont {

    margin-top: initial;

  }

}

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

  body.blog .pg_lo_01,
  body.blog .pg_lo_02,
  body.blog .pg_lo_03,
  body.blog .pg_lo_04,
  body.blog .pg_lo_05,
  body.blog .pg_lo_06,
  body.blog .pg_lo_07 {

    padding-left: 40px;

    padding-right: 40px;

    margin-bottom: 30px;

    width: calc(100% - 180px);

  }

}

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

  body.blog .bk_paragraph {

    margin-bottom: 40px;

  }

  body.blog .pg_lo_01,
  body.blog .pg_lo_02,
  body.blog .pg_lo_03,
  body.blog .pg_lo_04,
  body.blog .pg_lo_05,
  body.blog .pg_lo_06,
  body.blog .pg_lo_07 {

    margin-left: 25px;

    margin-right: 25px;

    padding-left: initial;

    padding-right: initial;

    margin-bottom: 30px;

    width: calc(100% - 50px);

  }

  body.blog .text_photo {

    margin-top: 20px;

  }

  body.blog .pg_lo_02 .cont {

    width: 100%;

    margin-right: initial;

    margin-top: initial;

  }

  body.blog .pg_lo_02 .photo {

    width: 100%;

  }

  body.blog .pg_lo_03 .cont {

    width: 100%;

    margin-left: initial;

    margin-top: initial;

  }

  body.blog .pg_lo_03 .photo {

    width: 100%;

  }

  body.blog .pg_lo_04 .photo,
  body.blog .pg_lo_07 .photo {

    width: 100%;

    margin-right: initial;

    margin-bottom: initial;

  }

  body.blog .pg_lo_04 .photo:nth-child(2n),
  body.blog .pg_lo_07 .photo:nth-child(2n) {

    margin-left: initial;

    margin-top: 30px;

  }

}





















.detail .bk_photo_book .list .box .photo {

  position: relative;

}

.watermark_logo {

  position: absolute;

  z-index: 1;

  left: 20px;

  bottom: 20px;

  opacity: 0.2;

  width: 100px;

}

.detail .bk_photo_book .list .box .cont .text {

  margin-top: initial;

}

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

  .detail .bk_photo_book {

    margin-bottom: 40px;

  }

  .detail .bk_photo_book .list {

    margin-top: 25px;

  }

  .watermark_logo {

    width: 60px;

  }

}



/* 4. Home */

.home main .about_bk {

  position: relative;

  overflow: hidden;

}

.home main .about_bk .bg {

  float: left;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  opacity: 0.8;

}

.home main .about_bk .cont {

  position: absolute;

  z-index: 1;



  right: 100px;

  margin-right: 130px;

  padding-left: 50px;

  padding-right: 50px;

  width: calc(50% - 330px);



  top: 50%;

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

.home main .team_bk .cont {

  top: calc(50% - 8%);

}

.home main .about_bk .cont .sub_title,
.home main .about_bk .cont .title,
.home main .about_bk .cont .text,
.home main .about_bk .cont .bt {

  float: left;

  clear: both;

  width: 100%;

}

.home main .about_bk .cont .sub_title {

  opacity: 0.8;

}

.home main .about_bk .cont .title {

  color: #da9367;

}

.home main .about_bk .cont .text {

  margin-top: 20px;

  color: #999999;

}

.home main .about_bk .cont .bt {

  margin-top: 30px;

}

.home main .about_bk .cont .team_list {

  position: absolute;

  right: 100px;

  top: calc(100% + 80px);

  width: 130%;

}

.home main .about_bk .cont .team_list .box {

  float: left;

  width: calc(100% / 3 - 70px);

  margin-left: 35px;

  margin-right: 35px;

  text-align: center;

}

.home main .about_bk .cont .team_list .box .sign,
.home main .about_bk .cont .team_list .box .job_title {

  display: inline-block;

}

.home main .about_bk .cont .team_list .box .sign,
.home main .about_bk .cont .team_list .box .sign img {

  width: 100%;

}

.home main .about_bk .cont .team_list .box .job_title {

  margin-top: 15px;

}

.home main .blog_bk {

  float: left;

  text-align: center;

}

.home main .blog_bk .title_cont {

  float: left;

  width: 100%;

}

.home main .blog_bk .list_cont {

  float: left;

  width: 100%;

  margin-top: 50px;

}

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

  .home main .about_bk .cont {

    margin-right: 80px;

    padding-left: 50px;

    padding-right: 0;

    width: calc(50% - 230px);

  }

}

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

  .home main .about_bk .cont {

    right: 50px;

    width: calc(50% - 180px);

  }

}

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

  .home main .about_bk .cont {

    margin-right: 80px;

    padding-left: 0;

    padding-right: 0;

    width: calc(50% - 130px);

  }

  .home main .about_bk .cont .team_list {

    right: 0;

    width: 170%;

  }

}

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

  .home main .about_bk .cont {

    right: 50px;

    margin-right: 30px;

    width: calc(50% - 80px);

  }

  .home main .about_bk .cont .team_list {

    top: calc(100% + 60px);

    width: 200%;

  }

  .home main .about_bk .cont .team_list .box {

    width: calc(100% / 3 - 80px);

    margin-left: 40px;

    margin-right: 40px;

  }

}

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

  .home main .blog_bk {

    margin-bottom: 80px;

  }

}

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

  .home main .about_bk {

    overflow: initial;

    height: auto;

  }

  .home main .about_bk .bg {

    float: initial;

    position: relative;

    padding-top: 56%;

  }

  .home main .about_bk .cont {

    position: initial;

    right: initial;

    margin-right: 25px;

    width: calc(100% - 50px);

    top: initial;

    -moz-transform: initial;

    -webkit-transform: initial;

    -o-transform: initial;

    -ms-transform: initial;

    transform: initial;

    float: left;

    margin-left: 25px;

    margin-top: 35px;

    margin-bottom: 60px;

  }

  .home main .team_bk .cont {

    top: initial;

    margin-bottom: 0;

  }

  .home main .about_bk .cont .text {

    margin-top: 15px;

  }

  .home main .about_bk .cont .bt {

    margin-top: 20px;

  }

  .home main .about_bk .cont .team_list {

    position: initial;

    right: initial;

    top: initial;

    width: 100%;

    text-align: center;

    float: left;

    margin-top: 50px;

  }

  .home main .about_bk .cont .team_list .box {

    float: initial;

    width: calc(80% - 60px);

    margin-left: 30px;

    margin-right: 30px;

    margin-bottom: 30px;

    display: inline-block;

  }

  .home main .about_bk .cont .team_list .box .sign,
  .home main .about_bk .cont .team_list .box .sign img {

    width: 80%;

    display: inline-block;

  }

  .home main .about_bk .cont .team_list .box .job_title {

    margin-top: 5px;

    font-size: 95%;

  }

  .home main .blog_bk {

    margin-bottom: 20px;

  }

}











/* 5. About */

body.about .first_box {

  float: left;

  margin-top: 20px;

  margin-bottom: 40px;

  text-align: center;

}

body.about .first_box .cont {

  float: left;

  margin-top: 100px;

  margin-left: 50px;

  margin-right: 50px;

  padding-right: 120px;

  width: calc(50% - 220px);

  text-align: left;

}

body.about .first_box .cont.title,
body.about .first_box .cont .text {

  float: left;

  width: 100%;

}

body.about .first_box .cont .text,
body.about .second_box .cont .text,
body.about .our_team .top_box .cont .text {

  color: #999999;

  margin-top: 15px;

}

body.about .first_box .left_photo {

  float: right;

  width: 50%;

}

body.about .first_box .center_photo {

  display: inline-block;

  width: 60%;

  margin-top: -100px;

}

body.about .saying_box {

  float: left;

  margin-top: 50px;

  margin-bottom: 50px;

}

body.about .saying_box .bk_saying {

  background: initial;

}

body.about .second_box {

  float: left;

  width: 100%;

  margin-top: 50px;

}

body.about .second_box .cont {

  float: right;

  margin-top: 150px;

  margin-right: 100px;

  padding-right: 230px;

  padding-left: 50px;

  width: calc(50% - 380px);

}

body.about .second_box .cont .title,
body.about .second_box .cont .text {

  float: left;

  width: 100%;

}

body.about .second_box .left_photo {

  float: left;

  width: calc(50% - 180px);

}

body.about .second_box .right_photo {

  float: right;

  margin-top: 150px;

  width: calc(50% + 60px);

}

body.about .our_team {

  float: left;

  width: 100%;

}

body.about .our_team .top_box {

  float: left;

  width: 100%;

  margin-top: 250px;

  position: relative;

}

body.about .our_team .top_box .bg_title {

  position: absolute;

  z-index: 0;

  left: 100px;

  top: -350px;

  width: calc(50% - 100px - 170px);

  opacity: 0.05;

  text-transform: uppercase;

  font-size: 200px;

  line-height: 200px;

}

body.about .our_team .top_box .cont {

  float: right;

  margin-right: 100px;

  padding-right: 230px;

  width: calc(50% - 330px);

}

body.about .our_team .top_box .cont .title,
body.about .our_team .top_box .cont .text {

  float: left;

  width: 100%;

}

body.about .our_team .list {

  float: left;

  margin-top: 110px;

}

body.about .our_team .list .box {

  float: left;

  width: calc(100% / 3 - 40px);

  margin-right: 60px;

  margin-bottom: 40px;

}

body.about .our_team .list .box:nth-child(3n) {

  margin-right: initial;

}

body.about .our_team .list .box .bk_photo_link {

  padding-top: 117%;

}

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

  body.about .first_box .cont {

    margin-bottom: 80px;

  }

  body.about .first_box .center_photo {

    margin-top: 20px;

  }

  body.about .our_team .top_box {

    margin-top: 200px;

  }

  body.about .our_team .top_box .bg_title {

    top: -250px;

    width: calc(50% - 100px - 80px);

    font-size: 150px;

    line-height: 150px;

  }

  body.about .our_team .top_box .cont {

    margin-right: 100px;

    padding-right: 150px;

    width: calc(50% - 250px);

  }

}

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

  body.about .second_box {

    margin-top: 40px;

  }

  body.about .second_box .cont {

    margin-top: 80px;

    margin-right: 50px;

    padding-right: 160px;

    width: calc(50% - 260px);

  }

  body.about .our_team {

    text-align: center;

  }

  body.about .our_team .top_box .cont {

    float: initial;

    margin-right: initial;

    padding-right: initial;

    width: 60%;

    display: inline-block;

  }

}

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

  body.about .first_box .cont {

    margin-top: 80px;

    margin-left: initial;

    padding-right: 80px;

    width: calc(50% - 130px);

    margin-bottom: 80px;

  }

  body.about .first_box .center_photo {

    margin-top: 60px;

  }

}

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

  body.about .first_box .cont {

    margin-top: initial;

    padding-right: 40px;

    width: calc(50% - 90px);

    margin-bottom: 80px;

  }

  body.about .second_box .cont {

    margin-top: 40px;

    margin-right: 50px;

    padding-right: 80px;

    padding-left: 25px;

    width: calc(50% - 155px);

  }

  body.about .second_box .left_photo {

    width: calc(50% - 120px);

  }

  body.about .second_box .right_photo {

    margin-top: 100px;

    width: calc(50% + 30px);

  }

  body.about .our_team .list {

    margin-top: 80px;

  }

}

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

  body.about .first_box .center_photo {

    margin-top: 10px;

  }

  body.about .our_team .top_box {

    margin-top: 120px;

  }

  body.about .our_team .top_box .bg_title {

    font-size: 130px;

    line-height: 130px;

  }

  body.about .our_team .list .box {

    width: calc(100% / 3 - 18px);

    margin-right: 25px;

  }

}

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

  body.about .top_full_banner .block_cont .cont .sub_title {

    font-size: 100%;

    margin-bottom: 5px;

  }

  body.about .top_full_banner .block_cont .cont .title {

    font-size: 150%;

  }

  body.about .top_full_banner .block_cont .cont .text {

    height: 0;

    overflow: hidden;

  }

  body.about .first_box {

    margin-top: initial;

    margin-bottom: initial;

  }

  body.about .first_box .cont {

    margin-right: initial;

    padding-right: initial;

    width: 100%;

    margin-bottom: 40px;

  }

  body.about .first_box .left_photo {

    width: 100%;

  }

  body.about .first_box .center_photo {

    display: initial;

    width: 100%;

    margin-top: 25px;

    float: left;

  }

  body.about .saying_box {

    margin-top: 30px;

    margin-bottom: initial;

  }

  body.about .second_box {

    width: calc(100% - 50px);

    margin-top: initial;

    margin-left: 25px;

    margin-right: 25px;

  }

  body.about .second_box .cont {

    margin-top: 40px;

    margin-right: initial;

    padding-right: initial;

    padding-left: initial;

    width: 100%;

    margin-bottom: 40px;

  }

  body.about .second_box .left_photo {

    width: 100%;

  }

  body.about .second_box .right_photo {

    margin-top: 25px;

    width: 100%;

  }

  body.about .our_team .top_box {

    width: calc(100% - 50px);

    margin-top: 80px;

    margin-left: 25px;

    margin-right: 25px;

    text-align: left;

  }

  body.about .our_team .top_box .bg_title {

    display: none;

  }

  body.about .our_team .top_box .cont {

    float: left;

    width: 100%;

    display: initial;

  }

  body.about .our_team .list {

    margin-top: 60px;

  }

  body.about .our_team .list .box {

    width: 100%;

    margin-right: initial;

    margin-bottom: 40px;

  }

}



/* 6. Team */

body.team .team_top_title {

  float: left;

  width: calc(100% - 100px);

  padding-left: 50px;

  padding-right: 50px;

  position: relative;

}

body.team .team_top_title .photo {

  float: left;

  width: 40%;

  position: relative;

}

body.team .team_top_title .photo svg {

  position: absolute;

  width: 70%;

  z-index: 1;

  bottom: 5px;

  left: 50%;

  -moz-transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  -o-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}

body.team .team_top_title .photo svg path,
body.team .team_top_title .photo svg line {

  fill: none;

  stroke-width: 5;

  stroke-miterlimit: 10;

  stroke: #b26512;

  stroke-dasharray: 2000;

  stroke-dashoffset: 2000;

  animation: sign 1.5s linear forwards;

}

@keyframes sign {

  to {

    stroke-dashoffset: 0;

  }

  from {

    stroke-dashoffset: 2000;

  }

}

body.team .team_top_title .box {

  position: absolute;

  text-align: left;

  width: calc(60% - 180px - 50px);

  margin-left: 180px;

  right: 50px;

  top: 50%;

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

body.team .team_top_title .box .back_bt,
body.team .team_top_title .box .cont {

  float: left;

  width: 100%;

}

body.team .team_top_title .box .cont {

  margin-top: 180px;

}

body.team .team_top_title .box .cont .text {

  float: left;

  width: 100%;

  color: #808080;

  margin-top: 10px;

}

body.team .team_top_title .box .cont .icon {

  float: left;

  width: 100%;

  margin-top: 40px;

}

body.team .team_top_title .box .cont .icon a {

  float: left;

  color: #808080;

  margin-right: 30px;

  font-size: 110%;

}

body.team .team_cont {

  float: left;

  width: 100%;

}

body.team .team_cont .autobiography {

  margin-top: 40px;

}

body.team .team_cont .autobiography .describe,
body.team .team_cont .autobiography .saying_box,
body.team .team_cont .autobiography .item {

  float: left;

}

body.team .team_cont .autobiography .describe {

  margin-left: 100px;

  margin-right: 100px;

  margin-bottom: 50px;

  width: calc(100% - 200px);

}

body.team .team_cont .autobiography .describe .cont {

  float: left;

  width: 100%;

  margin-bottom: 20px;

}

body.team .team_cont .autobiography .describe .cont .title {

  float: left;

  width: 100%;

  margin-bottom: 10px;

}

body.team .team_cont .autobiography .describe .cont .text {

  float: left;

  width: 100%;

  color: #808080;

}

body.team .team_cont .autobiography .saying_box {

  float: left;

  width: 100%;

  text-align: center;

}

body.team .team_cont .autobiography .saying_box .bk_saying {

  float: initial;

  display: inline-block;

  max-width: 800px;

}

body.team .team_cont .autobiography .item {

  margin-bottom: 100px;

}

@media screen and (min-width: 769px) {

  body.team .team_top_title .box .cont .icon a:hover {

    color: #ffffff;

  }

}

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

  body.team .team_top_title .box {

    width: calc(60% - 140px - 50px);

    margin-left: 140px;

  }

  body.team .team_top_title .box .back_bt .bt {

    width: 80px;

    height: 80px;

  }

  body.team .team_top_title .box .cont {

    margin-top: 120px;

  }

}

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

  body.team .team_top_title {

    width: 100%;

    padding-left: initial;

    padding-right: initial;

  }

  body.team .team_top_title .box {

    width: calc(60% - 80px);

    margin-left: 80px;

    right: 0;

  }

  body.team .team_top_title .box .back_bt .bt {

    width: 60px;

    height: 60px;

  }

  body.team .team_top_title .box .cont {

    margin-top: 100px;

  }

  body.team .team_cont .autobiography .describe {

    margin-left: 50px;

    margin-right: 50px;

    margin-bottom: 50px;

    width: calc(100% - 100px);

  }

}

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

  body.team .team_cont .autobiography .item {

    margin-bottom: 60px;

  }

}

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

  body.team .team_top_title .photo {

    float: left;

    width: 100%;

  }

  body.team .team_top_title .box {

    position: initial;

    width: 100%;

    margin-left: initial;

    right: initial;

    top: initial;

    -moz-transform: initial;

    -webkit-transform: initial;

    -o-transform: initial;

    -ms-transform: initial;

    transform: initial;

    float: left;

    margin-top: 50px;

  }

  body.team .team_top_title .box .back_bt .bt {

    width: 50px;

    height: 50px;

  }

  body.team .team_top_title .box .cont {

    margin-top: 80px;

  }

  body.team .team_top_title .box .cont .icon {

    margin-top: 30px;

  }

  body.team .team_cont .autobiography {

    margin-top: 10px;

  }

  body.team .team_cont .autobiography .describe {

    margin-left: initial;

    margin-right: initial;

    margin-bottom: 30px;

    width: 100%;

  }

  body.team .team_cont .autobiography .item {

    margin-bottom: 30px;

  }

}



/* 7. Product */



/* Search */



/* 9. Blog */

body.blog .top_title_cont {

  float: left;

  text-align: left;

  margin-bottom: 50px;

  margin-left: 130px;

  margin-right: 130px;

  width: calc(100% - 260px);

  position: relative;

}

body.blog .detail_cont {

  position: relative;

}

body.blog .back_bt {

  position: absolute;

  left: 100px;

  top: 55px;

}

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

  body.blog .top_title_cont {

    margin-bottom: 50px;

    margin-left: initial;

    margin-right: initial;

    width: 100%;

  }

  body.blog .back_bt {

    position: initial;

    left: initial;

    top: initial;

    float: left;

    width: 100%;

    height: 110px;

    margin-left: 180px;

    margin-bottom: 20px;

  }

}

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

  body.blog .back_bt {

    height: 110px;

    margin-left: 130px;

    margin-bottom: 60px;

  }

}

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

  body.blog .back_bt {

    height: 100px;

    margin-bottom: 40px;

  }

}

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

  body.blog .back_bt {

    height: 80px;

    margin-left: 80px;

    margin-bottom: 30px;

  }

}

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

  body.blog .back_bt {

    height: 80px;

    margin-left: 25px;

    margin-bottom: 20px;

  }

}



/* 10. Service */

body.service .service_cont {

  position: relative;

}

body.service .service_cont .bg_box {

  position: absolute;

  height: 100%;

  left: 50%;

  -moz-transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  -o-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}

body.service .service_cont .bg_box span {

  display: block;

  position: absolute;

  left: 50%;

  -moz-transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  -o-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  transform: translateX(-50%);

}

body.service .service_cont .bg_box .line {

  top: 0;

  width: 1px;

  height: 100%;

  border-left: 1px dashed #ffffff;

}

body.service .service_cont .bg_box .big_point,
body.service .service_cont .bg_box .s_point {

  width: 30px;

  height: 30px;

  border-radius: 100px;

  background: #ffffff;

}

body.service .service_cont .bg_box .s_point {

  width: 20px;

  height: 20px;

  bottom: 0;

}

body.service .service_cont .list {

  float: left;

  width: 100%;

  margin-top: 80px;

  margin-bottom: 20px;

}

body.service .service_cont .list .box {

  float: left;

  margin-right: 100px;

  margin-bottom: 60px;

  width: calc(50% - 100px);

}

body.service .service_cont .list .box:nth-child(2) {

  margin-top: 100px;

}

body.service .service_cont .list .box:nth-child(even) {

  float: right;

  margin-right: initial;

  margin-left: 100px;

}

body.service .service_cont .list .box .cont .text,
body.recruiting .features_list .box .cont .text {

  float: left;

  width: 100%;

  overflow: initial;

  white-space: initial;

  text-overflow: initial;

  display: initial;

  -webkit-line-clamp: initial;

  -webkit-box-orient: initial;

  white-space: initial;

}

body.service .service_cont .list .box .photo {

  margin-top: 10px;

}

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

  body.service .service_cont .list {

    margin-top: 60px;

  }

  body.service .service_cont .list .box {

    margin-right: 80px;

    margin-bottom: 40px;

    width: calc(50% - 80px);

  }

  body.service .service_cont .list .box:nth-child(2) {

    margin-top: 80px;

  }

  body.service .service_cont .list .box:nth-child(even) {

    margin-left: 80px;

  }

  body.service .service_cont .list .box .photo {

    margin-top: 0;

  }

}

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

  body.service .service_cont .bg_box .big_point,
  body.service .service_cont .bg_box .s_point {

    width: 20px;

    height: 20px;

  }

  body.service .service_cont .bg_box .s_point {

    width: 10px;

    height: 10px;

  }

  body.service .service_cont .list {

    margin-top: 30px;

  }

  body.service .service_cont .list .box {

    margin-right: 40px;

    margin-bottom: 30px;

    width: calc(50% - 40px);

  }

  body.service .service_cont .list .box:nth-child(2) {

    margin-top: 60px;

  }

  body.service .service_cont .list .box:nth-child(even) {

    margin-left: 40px;

  }

}

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

  body.service .service_cont .bg_box {

    display: none;

  }

  body.service .service_cont .list {

    margin-top: initial;

  }

  body.service .service_cont .list .box {

    margin-right: initial;

    margin-bottom: 30px;

    width: 100%;

  }

  body.service .service_cont .list .box:nth-child(2) {

    margin-top: initial;

  }

  body.service .service_cont .list .box:nth-child(even) {

    margin-left: initial;

  }

}



/* 11. Recruiting */

body.recruiting .features_list {

  float: left;

  margin-top: 20px;

}

body.recruiting .features_list .box {

  float: left;

  width: calc(25% - 45px);

  margin-right: 60px;

  margin-bottom: 40px;

}

body.recruiting .features_list .box:nth-child(4n) {

  margin-right: initial;

}

body.recruiting .features_list .box .cont {

  margin: 25px 0;

  width: 100%;

}

body.recruiting .features_list .box .photo img {

  width: auto;

  max-width: initial;

  height: 90px;

  opacity: 0.8;

}

body.recruiting .vacancies_cont,
body.recruiting .vacancies_cont .banner {

  float: left;

  width: 100%;

}

body.recruiting .vacancies_cont {

  margin-top: 60px;

}

body.recruiting .vacancies_cont .banner .photo {

  float: left;

  width: 100%;

  height: 700px;

  background-size: cover;

  background-position: center;

}

body.recruiting .vacancies_cont .banner .banner_cont {

  float: left;

}

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

  body.recruiting .vacancies_cont .banner .photo {

    height: 600px;

  }

}

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

  body.recruiting .features_list .box {

    width: calc(50% - 30px);

    margin-right: 30px;

    margin-bottom: 30px;

  }

  body.recruiting .features_list .box:nth-child(4n) {

    margin-right: inherit;

  }

  body.recruiting .features_list .box:nth-child(even) {

    margin-right: initial;

    margin-left: 30px;

  }

  body.recruiting .features_list .box .photo img {

    height: 60px;

  }

}

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

  body.recruiting .features_list {

    margin-top: initial;

  }

  body.recruiting .features_list .box {

    width: 100%;

    margin-right: initial;

    margin-bottom: 30px;

  }

  body.recruiting .features_list .box:nth-child(even) {

    margin-left: initial;

  }

  body.recruiting .features_list .box:last-child {

    margin-bottom: 20px;

  }

  body.recruiting .features_list .box .photo {

    width: calc(80px - 20px);

    margin-right: 20px;

    text-align: center;

  }

  body.recruiting .features_list .box .cont {

    margin: initial;

    width: calc(100% - 80px);

  }

  body.recruiting .features_list .box .photo img {

    height: 40px;

    display: inline-block;

  }

  body.recruiting .vacancies_cont .banner .photo {

    height: 250px;

  }

  body.recruiting .vacancies_cont .banner .banner_cont {

    margin-left: initial;

    margin-right: initial;

    width: 100%;

  }

  body.recruiting .vacancies_cont .item {

    margin-bottom: 40px;

  }

}



/* 12. Contact */

body.contact .flex_bt {

  width: 0;

  overflow: hidden;

}

body.contact .service_list {

  float: left;

  width: 100%;

}

body.contact .service_list .box {

  float: left;

  width: 100%;

  margin-bottom: 20px;

}

body.contact .service_list .box .number {

  float: left;

  width: calc(70px - 10px);

  height: calc(70px - 10px);

  border: 5px solid #dbcfa4;

  border-radius: 200px;

  text-align: center;

  position: relative;

}

body.contact .service_list .box .number div {

  position: absolute;

  line-height: 20px;

  top: 50%;

  left: 50%;

  -moz-transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);

  -o-transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

}

body.contact .service_list .box .number span {

  font-weight: bolder;

}

body.contact .service_list .box .cont {

  float: left;

  width: calc(100% - 70px - 20px);

  margin-left: 20px;

}

body.contact .service_list .box .cont .title,
body.contact .service_list .box .cont .text,
body.contact .service_list .box .cont .list {

  float: left;

  width: 100%;

}

body.contact .service_list .box .cont .title {

  font-weight: bolder;

}

body.contact .service_list .box .cont .text,
body.contact .service_list .box .cont .list li {

  color: #999999;

}

body.contact .service_list .box .cont .text,
body.contact .service_list .box .cont .list {

  margin-top: 10px;

}

body.contact .inquiry,
body.contact .inquiry .inquiry_title,
body.contact .inquiry .list {

  float: left;

  width: 100%;

}

body.contact .inquiry .list {

  margin-top: 20px;

  color: #808080;

}

body.contact .inquiry .list .cont {

  float: left;

  padding-left: 30px;

  padding-right: 10px;

  padding-bottom: 8px;

  margin-bottom: 15px;

  border-bottom: 1px solid #868686;

  position: relative;

}

body.contact .inquiry .list .cont.select {

  padding-bottom: 13px;

}

body.contact .inquiry .list .input_left {

  margin-right: 8px;

  width: calc(50% - 40px - 8px);

}

body.contact .inquiry .list .input_right {

  margin-left: 8px;

  width: calc(50% - 40px - 8px);

}

body.contact .inquiry .list .input_full {

  width: calc(100% - 40px);

}

body.contact .inquiry .list input,
body.contact .inquiry .list textarea {

  float: left;

  width: 100%;

  height: 35px;

  background: #0d0d0d;

  border: 0;

  color: #ffffff;

}

body.contact .inquiry .list textarea {

  min-height: 150px;

}

body.contact .inquiry .list .code {

  width: calc(100% - 100px);

}

body.contact .inquiry .list .number {

  float: right;

}

body.contact .inquiry .list .number img {

  height: 35px;

  width: auto;

}

body.contact .inquiry .list .important {

  position: absolute;

  left: 10px;

  top: 8px;

  color: #da9367;

}

body.contact .inquiry .list .title {

  float: left;

  width: 100%;

  color: #ffffff;

  font-weight: bolder;

  margin-bottom: 10px;

}

body.contact .inquiry .list .box {

  float: left;

  margin-right: 20px;

  padding-bottom: 5px;

}

body.contact .inquiry .list .cont.select .box input {

  display: none;

}

body.contact .inquiry .list .cont.select .box label {

  float: left;

  cursor: pointer;

  padding-left: 20px;

  position: relative;

}

body.contact .inquiry .list .radio .box label::after {

  position: absolute;

  content: '';

  width: 6px;

  height: 6px;

  border-radius: 50px;

  border: 3px solid #808080;

  left: 0;

  top: 50%;

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

body.contact .inquiry .list .checkbox .box label::before {

  position: absolute;

  content: '';

  width: 8px;

  height: 8px;

  border-radius: 2px;

  border: 2px solid #808080;

  left: 0;

  top: 50%;

  -moz-transform: translateY(-50%);

  -webkit-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  transform: translateY(-50%);

}

body.contact .inquiry .list .checkbox .box input[type="checkbox"]:checked+label,
body.contact .inquiry .list .radio .box input[type="radio"]:checked+label {

  color: #ffffff;

}

body.contact .inquiry .list .checkbox .box input[type="checkbox"]:checked+label::after {

  position: absolute;

  content: '';

  left: 3px;

  top: 6px;

  width: 3px;

  height: 6px;

  border: solid #0d0d0d;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}

body.contact .inquiry .list .checkbox .box input[type="checkbox"]:checked+label::before {

  border: 2px solid #ffffff;

  background: #ffffff;

}

body.contact .inquiry .list .radio .box input[type="radio"]:checked+label::after {

  border: 3px solid #ffffff;

  background: #ffffff;

}

body.contact .inquiry .bt {

  float: left;

  width: 100%;

  text-align: center;

}

body.contact .inquiry .bt button {

  border: 0;

  margin-left: 10px;

  margin-right: 10px;

  padding-top: 10px;

  padding-bottom: 10px;

  cursor: pointer;

  -webkit-transition: all 0.4s ease 0s;

  -moz-transition: all 0.4s ease 0s;

  -ms-transition: all 0.4s ease 0s;

  -o-transition: all 0.4s ease 0s;

  transition: all 0.4s ease 0s;

}

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

  body.contact .inquiry .bt button {

    margin-left: 0;

    margin-right: 0;

  }

}

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

  body.contact .service_list .box {

    float: left;

    width: calc(50% - 15px);

  }

  body.contact .service_list .box:nth-child(odd) {

    margin-right: 15px;

  }

  body.contact .service_list .box:nth-child(even) {

    margin-left: 15px;

  }

  body.contact .service_list .box .number {

    width: 50px;

    height: 50px;

    border: initial;

    background: #dbcfa4;

    color: #0d0d0d;

    font-size: 70%;

  }

  body.contact .service_list .box .number div {

    line-height: 15px;

  }

  body.contact .service_list .box .cont {

    width: calc(100% - 50px - 20px);

  }

  body.contact .inquiry {

    margin-top: 60px;

  }

}

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

  body.contact .service_list .box {

    width: 100%;

    margin-bottom: 20px;

  }

  body.contact .service_list .box:nth-child(odd) {

    margin-right: initial;

  }

  body.contact .service_list .box:nth-child(even) {

    margin-left: initial;

  }

  body.contact .inquiry {

    margin-bottom: 60px;

  }

  body.contact .inquiry .list {

    margin-top: 20px;

  }

  body.contact .inquiry .list .cont {

    padding-left: 20px;

    padding-right: 5px;

    margin-bottom: 13px;

  }

  body.contact .inquiry .list .cont.select {

    padding-bottom: 11px;

  }

  body.contact .inquiry .list .input_left {

    margin-right: initial;

    width: calc(100% - 25px);

  }

  body.contact .inquiry .list .input_right {

    margin-left: initial;

    width: calc(100% - 25px);

  }

  body.contact .inquiry .list .input_full {

    width: calc(100% - 25px);

  }

  body.contact .inquiry .list textarea {

    min-height: 130px;

  }

  body.contact .inquiry .list .important {

    left: 5px;

    top: 7px;

  }

  body.contact .inquiry .list .checkbox .box input[type="checkbox"]:checked+label::after {

    top: 7px;

  }

}