body {
  --page-max-width: 100%; --page-gap: 40px; background: #fff
}
header {
  border-top-color: #fff; border-bottom-color: #fff; position: relative
}
header box logo {
  width: calc(var(--page-gap) * 5); height: var(--page-gap); text-align: center
}
header box mainmenu ul {
  justify-content: left
}
header box mainmenu ul li {
  padding: 0px var(--page-gap)
}
header box mainmenu ul li a {
  height: 40px; line-height: 40px; font-size: 2rem; font-weight: normal; color: #222
}
header box mainmenu ul li a::before,
header box mainmenu ul li a::after {
  background: #222 !important
}
container box {
  padding-top: calc(var(--page-gap) / 2)
}
footer bottom {
  background: url(https://www.61ml.com/img/banner.jpg) #eee top center
}
footer bottom box section {
  width: auto; padding-left: calc(var(--page-gap) * 6)
}
footer bottom box section p[type=tel],
footer bottom box section p[type=email] {
  display: flex; align-items: center; gap: calc(var(--page-gap) / 4)
}
footer bottom box section p[type=tel] a,
footer bottom box section p[type=email] a {
  font-size: 2.4rem; color: #222; line-height: 160%; font-weight: lighter
}
footer bottom box section p[type=tel] a:hover,
footer bottom box section p[type=email] a:hover {
  text-decoration: none
}
footer bottom box section p[type=tel] jtbc-svg,
footer bottom box section p[type=email] jtbc-svg {
  width: 24px; height: 24px; --fore-color: #222
}
footer copyright box section {
  width: auto; padding-left: calc(var(--page-gap) * 6); font-size: 1.4rem; color: #999
}
.package_work_list {
  width: 100%; box-sizing: border-box; padding: 0px calc(var(--page-gap) * 3)
}
.package_work_list div.items {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap
}
.package_work_list div.items div.item {
  width: calc(50% - var(--page-gap)); padding-bottom: var(--page-gap)
}
.package_work_list div.items div.item img {
  width: 100%; display: block
}
.package_work_list div.items div.item p[type=title] {
  width: 100%; padding: calc(var(--page-gap) / 4) 0px; font-size: 2.4rem; line-height: 160%
}
.package_work_list div.items div.item p[type=title] a {
  color: #222; font-weight: lighter
}
.package_work_list div.items div.item p[type=size] {
  font-size: 1.2rem; color: #999; line-height: 160%
}
.package_work_detail {
  width: 100%; box-sizing: border-box; padding: 0px calc(var(--page-gap) * 3)
}
.package_work_detail h1 {
  width: 100%; box-sizing: border-box; font-weight: lighter; padding: 0px calc(var(--page-gap) * 3)
}
.package_work_detail div.content {
  width: 100%
}
.package_work_detail div.content p.text {
  width: 50%; box-sizing: border-box; padding: 20px calc(var(--page-gap) * 3); line-height: 160%; font-size: 1.6rem
}
.package_work_detail div.content p.image {
  width: 100%; box-sizing: border-box; padding: 20px 0px
}
.package_work_detail div.content p.image img {
  width: 100%; display: block
}
.package_work_detail div.links {
  width: 100%; display: flex; justify-content: space-between; padding-bottom: var(--page-gap)
}
.package_work_detail div.links dl dt {
  font-size: 1.6rem; padding-bottom: 1rem
}
.package_work_detail div.links dl a {
  font-size: 1.4rem
}
.package_work_detail div.links dl dd:empty::after {
  content: attr(empty); color: #999999
}
.package_work_detail div.links dl:last-child dt,
.package_work_detail div.links dl:last-child dd {
  text-align: right
}
.package_aboutus_detail {
  width: 100%; box-sizing: border-box; padding: 0px calc(var(--page-gap) * 3)
}
.package_aboutus_detail div.content {
  width: 50%; box-sizing: border-box; padding: 0px calc(var(--page-gap) * 3); line-height: 160%; font-size: 1.6rem
}
.package_aboutus_detail div.content div.title {
  font-size: 3.2rem; line-height: 125%
}
.package_aboutus_detail div.content div.intro {
  padding: var(--page-gap) 0px
}
.package_aboutus_detail div.content div.history h3 {
  font-weight: normal; padding-bottom: calc(var(--page-gap) / 2)
}
.package_aboutus_detail div.content div.history ul li {
  width: 100%; padding: calc(var(--page-gap) / 8) 0px; line-height: 160%; display: flex; align-items: flex-start
}
.package_aboutus_detail div.content div.history ul li span {
  display: block; width: 150px
}
.package_aboutus_detail div.content div.history ul li em {
  font-style: normal; flex: 1
}
.package_contactus_detail {
  width: 100%; box-sizing: border-box; padding: 0px calc(var(--page-gap) * 3)
}
.package_contactus_detail div.feedback_form {
  width: 50%; box-sizing: border-box; padding: 0px calc(var(--page-gap) * 3)
}
.package_contactus_detail div.feedback_form h3 {
  font-size: 3.2rem; font-weight: normal
}
.package_contactus_detail div.feedback_form h4 {
  font-size: 2rem; padding: var(--page-gap) 0px; color: #666; font-weight: lighter
}
@media screen and (max-width: 1920px) {
  .package_work_detail div.content p.text {
    width: 60%
  }
  .package_aboutus_detail div.content {
    width: 60%
  }
  .package_contactus_detail div.feedback_form {
    width: 60%
  }
}
@media screen and (max-width: 1680px) {
  .package_work_list {
    padding: 0px calc(var(--page-gap) * 2)
  }
  .package_work_detail {
    padding: 0px calc(var(--page-gap) * 2)
  }
  .package_work_detail div.content p.text {
    width: 75%
  }
  .package_aboutus_detail {
    padding: 0px calc(var(--page-gap) * 2)
  }
  .package_aboutus_detail div.content {
    width: 75%
  }
  .package_contactus_detail {
    padding: 0px calc(var(--page-gap) * 2)
  }
  .package_contactus_detail div.feedback_form {
    width: 75%
  }
}
@media screen and (max-width: 1280px) {
  .package_work_list {
    padding: 0px calc(var(--page-gap) * 1)
  }
  .package_work_detail {
    padding: 0px calc(var(--page-gap) * 1)
  }
  .package_work_detail div.content p.text {
    width: 100%
  }
  .package_aboutus_detail {
    padding: 0px calc(var(--page-gap) * 1)
  }
  .package_aboutus_detail div.content {
    width: 100%
  }
  .package_contactus_detail {
    padding: 0px calc(var(--page-gap) * 1)
  }
  .package_contactus_detail div.feedback_form {
    width: 100%
  }
}
@media screen and (max-width: 960px) {
  body {
    --page-gap: 20px
  }
  header box navicon span {
    background: #222
  }
  header box navicon span::before,
  header box navicon span::after {
    background: #222
  }
  header box navicon.on span {
    background-color: transparent
  }
  header box mainmenu {
    background: #fff; box-shadow: 0px 2px 2px rgb(0 0 0 / 5%)
  }
  header box mainmenu.on {
    height: 100vh
  }
  header box mainmenu ul li a:hover {
    color: #000 !important
  }
  header box mainmenu ul li.on a::before,
  header box mainmenu ul li.on a::after,
  header box mainmenu ul li a:hover:before,
  header box mainmenu ul li a:hover::after {
    background: #000 !important
  }
  header box logo {
    width: auto; height: calc(var(--page-gap) * 1.5); text-align: left
  }
  footer bottom box section,
  footer copyright box section {
    padding-left: 0px
  }
  .package_work_list {
    padding: 0px
  }
  .package_work_list div.items div.item {
    width: 100%
  }
  .package_work_detail {
    padding: 0px
  }
  .package_work_detail h1 {
    padding: 0px
  }
  .package_work_detail div.content p.text {
    padding: 20px 0px
  }
  .package_aboutus_detail {
    padding: 0px
  }
  .package_aboutus_detail div.content {
    padding: 0px
  }
  .package_aboutus_detail div.content div.title {
    font-size: 2.4rem; line-height: 140%
  }
  .package_contactus_detail {
    padding: 0px
  }
  .package_contactus_detail div.feedback_form {
    padding: 0px
  }
  .package_contactus_detail div.feedback_form h3 {
    font-size: 2.4rem
  }
  .package_contactus_detail div.feedback_form h4 {
    font-size: 1.6rem
  }
}