html {
  overflow: hidden
}
body {
  background: #fff
}
.container {
  width: 100%; height: 100vh; min-height: 660px; position: relative
}
.container div.logo {
  position: absolute; top: calc(var(--page-gap) * 2); left: calc(var(--page-gap) * 2); z-index: 1000
}
.container div.logo img {
  height: 40px; cursor: pointer
}
.container div.menu {
  position: absolute; top: calc(var(--page-gap) * 2); left: calc(50% + var(--page-gap) * 4); z-index: 1000
}
.container div.menu ul {
  display: flex; gap: calc(var(--page-gap) * 2)
}
.container div.menu ul li {
  line-height: 40px; font-size: 2rem; color: #fff; font-weight: lighter; letter-spacing: 0.5rem; transition: color .3s ease; cursor: pointer
}
.container div.menu ul li.on,
.container div.menu ul li:hover {
  color: #3e868f
}
.container div.bg {
  width: 100%; height: 100%; position: relative; z-index: 100
}
.container div.bg div.item {
  width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background: none center center no-repeat; background-size: cover; opacity: 0; transition: opacity .3s ease
}
.container div.bg div.item[type=home] {
  background-image: url(../images/bg.home.jpg)
}
.container div.bg div.item[type=aboutus] {
  background-image: url(../images/bg.aboutus.jpg)
}
.container div.bg div.item[type=service] {
  background-image: url(../images/bg.service.jpg)
}
.container div.bg div.item[type=contactus] {
  background-image: url(../images/bg.contactus.jpg)
}
.container div.bg div.item.on {
  opacity: 1
}
.container div.page {
  width: 50%; height: 100%; position: absolute; top: 0px; right: -50%; opacity: 0; z-index: 500; transition: right .6s ease, opacity .3s ease
}
.container div.page::before {
  content: ''; width: 200%; height: 100%; transform: skew(-12.5deg); background: rgba(0, 0, 0, .65); position: absolute; top: 0px; left: -10%; z-index: 100
}
.container div.page div.content {
  width: calc(50vw - var(--page-gap)); max-width: calc(var(--page-max-width) / 2 - var(--page-gap)); box-sizing: border-box; padding: calc(var(--page-gap) * 2); transform: translate(0, calc(-50% + var(--page-gap))); position: absolute; top: 50%; left: 0px; z-index: 100
}
.container div.page div.content h1 {
  padding-bottom: var(--page-gap); color: #fff; border-bottom: #fff 1px dashed; font-weight: lighter
}
.container div.page div.content p.text {
  padding: var(--page-gap) 0px; font-size: 1.4rem; line-height: 160%; color: #fff
}
.container div.page div.content div.team {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: var(--page-gap)
}
.container div.page div.content div.team div.item {
  width: calc(25% - var(--page-gap) * 3 / 4)
}
.container div.page div.content div.team div.item p[type=img] img {
  width: 100%; border-radius: 100%
}
.container div.page div.content div.team div.item p[type=title] {
  padding-top: calc(var(--page-gap) / 2); text-align: center; color: #fff; font-size: 1.4rem; line-height: 160%
}
.container div.page div.content div.team div.item p[type=subtitle] {
  text-align: center; color: #999; font-size: 1.2rem; line-height: 160%
}
.container div.page div.content div.service div.item {
  display: flex; gap: var(--page-gap); padding-top: var(--page-gap)
}
.container div.page div.content div.service div.item div[type=icon] {
  width: 50px
}
.container div.page div.content div.service div.item div[type=icon] jtbc-svg {
  width: 100%; --fore-color: rgba(255, 255, 255, .9)
}
.container div.page div.content div.service div.item div[type=text] {
  flex: 1
}
.container div.page div.content div.service div.item div[type=text] h3 {
  color: #fff; font-weight: lighter; padding-bottom: calc(var(--page-gap) / 2)
}
.container div.page div.content div.service div.item div[type=text] p {
  color: #999; font-size: 1.4rem; line-height: 160%
}
.container div.page div.content div.feedback_form {
  width: 100%; padding-top: calc(var(--page-gap) / 2)
}
.container div.page div.content div.feedback_form ul li {
  padding: calc(var(--page-gap) / 2) 0px
}
.container div.page div.content div.feedback_form ul li input,
.container div.page div.content div.feedback_form ul li textarea {
  width: 100%; border: 0px; padding-left: 0px; padding-right: 0px; background: transparent; font-size: 1.4rem; color: #fff; border-bottom: #ccc 1px solid
}
.container div.page div.content div.feedback_form ul li input:focus,
.container div.page div.content div.feedback_form ul li textarea:focus {
  box-shadow: none
}
.container div.page div.content div.feedback_form div.button {
  width: 100%; padding-top: calc(var(--page-gap) / 2); text-align: right
}
.container div.page div.content div.feedback_form div.button button {
  height: auto; padding: 10px 20px; background: rgba(255, 255, 255, .9); font-size: 1.4rem; border: 0px; line-height: 100%; letter-spacing: 2px; color: #3e868f; border-radius: 5px; cursor: pointer; transition: all .3s ease
}
.container div.page div.content div.feedback_form div.button button:hover {
  background: rgba(62, 134, 143, .9); color: #fff
}
.container div.page div.content div.more {
  padding-top: var(--page-gap)
}
.container div.page div.content div.more span {
  padding: 10px 20px; background: rgba(255, 255, 255, .9); font-size: 1.4rem; line-height: 100%; letter-spacing: 2px; color: #3e868f; border-radius: 5px; cursor: pointer; transition: all .3s ease
}
.container div.page div.content div.more span:hover {
  background: rgba(62, 134, 143, .9); color: #fff
}
.container div.page.on {
  right: 0%; opacity: 1; z-index: 800
}
.container div.copyright {
  color: #fff; font-size: 1.4rem; position: absolute; bottom: var(--page-gap); right: var(--page-gap); z-index: 1000
}
.container div.copyright a {
  color: #fff
}
@media screen and (max-width: 800px) {
  html {
    overflow-y: scroll
  }
  body {
    background: #000
  }
  .container {
    width: 100%; height: auto; min-height: 100vh; box-sizing: border-box; padding-top: calc(var(--page-gap) * 2); padding-bottom: calc(var(--page-gap) * 5); overflow-x: hidden
  }
  .container div.logo {
    width: auto; margin: auto; padding-bottom: calc(var(--page-gap) * 2); position: relative; top: auto; left: auto; text-align: center
  }
  .container div.logo img {
    height: 32px
  }
  .container div.menu {
    width: 100%; margin: auto; margin-bottom: calc(var(--page-gap) * 8); position: relative; top: auto; left: auto; box-sizing: border-box; padding-left: calc(var(--page-gap) * 4); padding-right: calc(var(--page-gap) * 4); padding-top: calc(var(--page-gap) / 2); padding-bottom: calc(var(--page-gap) / 2)
  }
  .container div.menu ul {
    gap: 0px; justify-content: space-between
  }
  .container div.menu ul li {
    text-shadow: 1px 1px #2b2b2b
  }
  .container div.menu ul li.on,
  .container div.menu ul li:hover {
    text-shadow: 1px 1px rgba(62, 134, 143, .1)
  }
  .container div.bg {
    width: 100%; height: 100%; position: absolute; top: 0px; left: 0px
  }
  .container div.page {
    width: 100%; height: auto; padding-top: calc(var(--page-gap) * 2); padding-bottom: calc(var(--page-gap) * 6); position: relative; top: auto; right: auto; display: none
  }
  .container div.page::before {
    width: 100%; height: 100%; transform: skew(0deg, -12.5deg); left: 0px; top: calc(0px - var(--page-gap) * 2)
  }
  .container div.page div.content {
    width: 100%; position: relative; transform: none; max-width: none
  }
  .container div.page div.content div.team div.item {
    width: calc(50% - var(--page-gap)); padding-bottom: calc(var(--page-gap) * 2)
  }
  .container div.page.on {
    display: block; right: auto
  }
}
@media screen and (max-height: 600px) {
  html {
    overflow-y: scroll
  }
}