img {
  max-width: 100%;
  object-fit: cover
}

.common_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover
}

.item_hover {
  overflow: hidden
}

.item_hover:hover img {
  transform: scale(1.05)
}

.item_hover img {
  width: 100%;
  height: 100%;
  transition: .6s ease
}

.banner {
  padding-bottom: 10.9375vw;
  position: relative;
  z-index: 5
}

@keyframes fadeInUp_ {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.fadeInUp_ {
  -webkit-animation-name: fadeInUp_;
  animation-name: fadeInUp_
}

@keyframes fadeInUp__ {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}

.develop1 {
  margin-top: -10.41667vw;
  padding: 0 0 8.75vw;
  position: relative;
  z-index: 6
}

.develop1 .en {
  color: #00378B;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase
}

.develop1 .en span {
  font-family: "Montserrat";
  text-shadow: 1.5px 0 0 #00378B, 0 1.5px 0 #00378B, -1.5px 0 0 #00378B, 0 -1.5px 0 #00378B, 1.5px 1.5px 0 #00378B, -1.5px -1.5px 0 #00378B, 1.5px -1.5px 0 #00378B, -1.5px 1.5px 0 #00378B;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff
}

.develop1 .content {
  margin: 2.60417vw 0 0 0;
  padding: 0 6.04167vw;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.develop1 .content .l {
  width: 39.21875vw
}

.develop1 .content .l img {
  width: 21.45833vw;
  display: block;
  margin: 0 0 2.1875vw
}

.develop1 .content .l .text {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.96px
}

.develop1 .content .r {
  width: 35.88542vw;
  height: 25.46875vw;
  border-radius: .52083vw;
  overflow: hidden
}

.develop2 {
  display: flex;
  padding: 4.21875vw 6.25vw 4.58333vw 6.04167vw;
  justify-content: space-between
}

.develop2 .r {
  margin: 3.90625vw 0 0 0;
  width: 35.88542vw;
  height: 25.46875vw;
  border-radius: .52083vw
}

.develop2 .l {
  width: 39.79167vw
}

.develop2 .l .title .p1 {
  color: #000;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: 1.68px;
  margin: 0 0 .625vw
}

.develop2 .l .title .p2 {
  overflow: hidden;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  font-weight: 400;
  line-height: 166%;
  letter-spacing: 0.96px
}

.develop2 .l .content {
  margin: 3.80208vw 0 0 0
}

.develop2 .l .content .p1 {
  color: #000;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  letter-spacing: 1.68px;
  margin: 0 0 1.25vw
}

.develop2 .l .content .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.66667vw 1.51042vw
}

.develop2 .l .content .grid .item {
  position: relative
}

.develop2 .l .content .grid .item:last-child:after,
.develop2 .l .content .grid .item:nth-child(4n):after {
  display: none
}

.develop2 .l .content .grid .item:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 5.20833vw;
  background: #999;
  right: -.88542vw
}

.develop2 .l .content .grid .item .icon {
  width: 2.91667vw;
  height: 2.34375vw;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center
}

.develop2 .l .content .grid .item .icon img {
  width: 100%
}

.develop2 .l .content .grid .item .text {
  margin: 1.19792vw 0 0 0;
  text-align: center;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.96px
}

.develop3 {
  padding: 8.07292vw 10.57292vw 8.07292vw 10.41667vw;
  background: #F8F8F8
}

.develop3 .cut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.09375vw;
  margin: 0 0 2.60417vw
}

.develop3 .cut .list {
  cursor: pointer;
  width: 12.70833vw;
  height: 3.02083vw;
  background: #BDBDBC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  transition: .6s ease
}

.develop3 .cut .list.on {
  background: #C12D31;
  color: #fff
}

.develop3 .content .matter {
  display: none
}

.develop3 .content .matter.on {
  display: block
}

.develop3 .content .matter .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.55208vw 1.5625vw
}

.develop3 .content .matter .grid .item {
  width: 100%
}

.develop3 .content .matter .grid .item .img {
  width: 100%;
  height: 12.08333vw
}

.develop3 .content .matter .grid .item .text {
  margin: .625vw 0 0;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1.2px
}

.common_more {
  width: 12.70833vw;
  height: 3.02083vw;
  position: relative;
  z-index: 1;
  padding: 0 0 0 4.16667vw;
  display: flex;
  align-items: center;
  margin: 0 auto 0
}

.common_more:hover svg path {
  fill: #00378B
}

.common_more svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1
}

.common_more svg path {
  transition: .6s all
}

.common_more p {
  color: #FFF;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase
}

.develop4 {
  padding: 6.25vw 10.41667vw 9.375vw 10.41667vw
}

.develop4 .title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .72917vw
}

.develop4 .title img {
  width: 2.91667vw;
  height: 3.02083vw
}

.develop4 .title p {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.develop4 .common_more {
  margin: 3.54167vw auto 0
}

.develop4 .content {
  margin: 4.6875vw 0 0 0
}

.develop4 .content table {
  width: 100%;
  border-collapse: collapse
}

.develop4 .content table tr:first-child td {
  background: #AD1E23;
  font-size: 1.25vw;
  color: #fff
}

.develop4 .content table tr:first-child td:nth-child(2) {
  text-align: center
}

.develop4 .content table tr:nth-child(2n) td {
  background: transparent
}

.develop4 .content table tr td {
  padding: .83333vw 2.5vw;
  background: #F5DADC;
  border: 1px solid #C4C4C5;
  color: #6E6E6E;
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1.44px
}

.develop4 .content table tr td:first-child {
  width: 7.8125vw;
  text-align: center;
  padding: .83333vw 0
}

.develop5 {
  padding: 0 6.04167vw 8.95833vw 0;
  position: relative
}

.develop5 .bg {
  position: absolute;
  right: 0;
  top: -26.25vw;
  width: 100vw;
  height: fit-content;
  z-index: -1;
  pointer-events: none
}

.develop5 .en {
  color: #00378B;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase
}

.develop5 .en span {
  font-family: "Montserrat";
  text-shadow: 1.5px 0 0 #00378B, 0 1.5px 0 #00378B, -1.5px 0 0 #00378B, 0 -1.5px 0 #00378B, 1.5px 1.5px 0 #00378B, -1.5px -1.5px 0 #00378B, 1.5px -1.5px 0 #00378B, -1.5px 1.5px 0 #00378B;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff
}

.develop5 .list {
  margin: 2.29167vw 0 0 0
}

.develop5 .list .content {
  padding: 0 0 0 6.04167vw;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.develop5 .list .content:first-child {
  margin-bottom: 15.57292vw
}

.develop5 .list .content:nth-child(2n) {
  flex-direction: row-reverse
}

.develop5 .list .content .l {
  width: 39.21875vw
}

.develop5 .list .content .l .dis {
  display: flex;
  align-items: center;
  gap: .72917vw
}

.develop5 .list .content .l .dis img {
  width: 3.22917vw;
  height: 3.02083vw
}

.develop5 .list .content .l .dis p {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.develop5 .list .content .l .text {
  margin: 2.1875vw 0 0 0;
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.96px
}

.develop5 .list .content .r {
  width: 35.88542vw;
  height: 25.46875vw;
  border-radius: .52083vw
}

.develop6 {
  padding: 6.25vw 10.41667vw 9.375vw 10.41667vw
}

.develop6 .title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .72917vw
}

.develop6 .title img {
  width: 2.91667vw;
  height: 3.02083vw
}

.develop6 .title p {
  color: #000;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.develop6 .cut {
  margin: 3.4375vw 0 2.60417vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.09375vw
}

.develop6 .cut .list {
  cursor: pointer;
  width: 12.70833vw;
  height: 3.02083vw;
  background: #BDBDBC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  transition: .6s ease
}

.develop6 .cut .list.on {
  background: #C12D31;
  color: #fff
}

.develop6 .content {
  margin: 0 0 3.48958vw
}

.develop6 .content .matter {
  display: none
}

.develop6 .content .matter.on {
  display: block
}

.develop6 .content .matter .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.04167vw
}

.develop6 .content .matter .grid .item {
  width: 100%;
  height: 22.5vw;
  padding: 1.875vw;
  border-radius: 1.04167vw;
  background: #F8F8F8
}

.develop6 .content .matter .grid .item .headline {
  padding: 0 0 2.1875vw;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 2.1875vw
}

.develop6 .content .matter .grid .item .headline .p1 {
  color: #000;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.46px;
  margin: 0 0 .41667vw
}

.develop6 .content .matter .grid .item .headline .p2 {
  color: #696969;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.46px
}

.develop6 .content .matter .grid .item .text {
  color: #696969;
  font-style: normal;
  font-weight: 400;
  line-height: 167%;
  max-height: 6.1458vw;
  overflow-y: auto;
  letter-spacing: 0.14px;
  text-transform: capitalize;
  margin: 0 0 2.08333vw
}

.develop6 .content .matter .grid .item .text b {
  color: #070707
}

.develop6 .content .matter .grid .item .circle {
  width: 3.75vw;
  height: 3.75vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EFEFEF
}

.develop6 .content .matter .grid .item .circle svg {
  width: 1.25vw;
  height: 1.25vw
}

.develop7 {
  height: 32.65625vw;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 10.3125vw;
  background: #00378B;
  align-items: center
}

.develop7 .l .cut {
  display: flex;
  gap: 1.04167vw
}

.develop7 .l .cut .list {
  color: #FFF;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  opacity: .5;
  cursor: pointer;
  transition: .6s ease
}

.develop7 .l .cut .list.on {
  opacity: 1
}

.develop7 .l .common_more {
  width: 15.3125vw;
  height: 3.59375vw;
  margin: 0
}

.develop7 .l .common_more:hover svg path {
  fill: #C90015
}

.develop7 .l .content {
  margin: 1.77083vw 0 2.55208vw
}

.develop7 .l .content .matter {
  display: none
}

.develop7 .l .content .matter.on {
  display: block
}

.develop7 .l .content .matter .list {
  display: flex;
  align-items: center;
  gap: .83333vw
}

.develop7 .l .content .matter .list:not(:last-child) {
  margin: 0 0 .83333vw
}

.develop7 .l .content .matter .list .icon {
  width: 1.25vw;
  height: 1.25vw;
  display: flex;
  align-items: center;
  justify-content: center
}

.develop7 .l .content .matter .list .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.develop7 .l .content .matter .list p {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.develop7 .r {
  width: 67.65625vw;
  height: 100%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 50% 0)
}

.develop7 .r img {
  width: 100%;
  height: 100%
}

@media screen and (max-width: 768px) {
  .develop1 {
    padding: 60px 5% 30px 5%
  }

  .develop1 .en {
    font-size: 22px
  }

  .develop1 .en span {
    letter-spacing: 2px
  }

  .develop1 .content {
    margin: 40px 0 0 0;
    flex-direction: column;
    padding: 0
  }

  .develop1 .content .l {
    width: 100%
  }

  .develop1 .content .l img {
    width: 180px
  }

  .develop1 .content .l .text {
    margin: 15px 0 0
  }

  .develop1 .content .r {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0 0 0
  }

  .develop2 {
    padding: 30px 5%;
    flex-direction: column
  }

  .develop2 .l {
    width: 100%
  }

  .develop2 .l .title .p1 {
    margin: 0 0 10px
  }

  .develop2 .l .content {
    margin: 25px 0 0 0
  }

  .develop2 .l .content .p1 {
    margin: 0 0 15px
  }

  .develop2 .l .content .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }

  .develop2 .l .content .grid .item {
    width: 100%
  }

  .develop2 .l .content .grid .item:after {
    display: none
  }

  .develop2 .l .content .grid .item .icon {
    width: 40px;
    height: 40px
  }

  .develop2 .r {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0 0 0
  }

  .develop3 {
    padding: 30px 5%
  }

  .develop3 .cut {
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 30px
  }

  .develop3 .cut .list {
    height: 35px;
    width: fit-content;
    padding: 0 10px;
    font-size: 11px
  }

  .develop3 .content .matter .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }

  .develop3 .content .matter .grid .item .img {
    height: auto
  }

  .develop3 .content .matter .grid .item .text {
    margin: 10px 0 0 0;
    font-size: 14px
  }

  .develop4 {
    padding: 30px 5%
  }

  .develop4 .title {
    gap: 10px
  }

  .develop4 .title img {
    width: 30px;
    height: 30px
  }

  .develop4 .content {
    margin: 30px 0 0 0
  }

  .develop4 .content table {
    width: 100%;
    display: block;
    overflow: hidden;
    overflow-x: scroll
  }

  .develop4 .content table tbody {
    display: inline-table;
    width: max-content
  }

  .develop4 .content table tr td {
    font-size: 14px !important;
    padding: 15px 10px
  }

  .develop4 .content table tr td:first-child {
    width: 100px
  }

  .develop4 .content .common_more {
    margin: 30px auto 0
  }

  .common_more {
    width: fit-content !important;
    height: 40px !important;
    padding: 0 60px 0 40px !important;
    margin: 0;
    background: #C90015;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%, 0 0)
  }

  .common_more svg {
    display: none
  }

  .develop5 {
    padding: 70px 5% 30px 5%
  }

  .develop5 .en span {
    letter-spacing: 2px
  }

  .develop5 .list {
    margin: 30px 0 0 0
  }

  .develop5 .list .content {
    padding: 0;
    flex-direction: column !important
  }

  .develop5 .list .content .l {
    width: 100%
  }

  .develop5 .list .content .l .dis {
    gap: 10px
  }

  .develop5 .list .content .l .dis img {
    width: 30px;
    height: 30px
  }

  .develop5 .list .content .l .text {
    margin: 25px 0 0 0
  }

  .develop5 .list .content .r {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0 0 0
  }

  .develop6 {
    padding: 30px 5%
  }

  .develop6 .title {
    gap: 10px
  }

  .develop6 .title img {
    width: 30px;
    height: 30px
  }

  .develop6 .cut {
    gap: 10px;
    flex-wrap: wrap;
    margin: 30px 0
  }

  .develop6 .cut .list {
    width: 100px;
    padding: 8px 0;
    font-size: 14px;
    flex-shrink: 0;
    display: block;
    height: auto;
    text-align: center
  }

  .develop6 .content .matter .grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px
  }

  .develop6 .content .matter .grid .item {
    width: 100%;
    height: auto;
    padding: 20px 5%
  }

  .develop6 .content .matter .grid .item .headline {
    padding: 0 0 20px;
    margin: 0 0 20px
  }

  .develop6 .content .matter .grid .item .headline .p1 {
    margin: 0 0 10px
  }

  .develop6 .content .matter .grid .item .text {
    margin: 0 0 25px;
    max-height: none;
  }

  .develop6 .content .matter .grid .item .circle {
    width: 40px;
    height: 40px
  }

  .develop6 .content .matter .grid .item .circle svg {
    width: 20px;
    height: 20px
  }

  .develop7 {
    padding: 30px 5%;
    height: auto;
    flex-direction: column
  }

  .develop7 .l {
    width: 100%
  }

  .develop7 .l .cut {
    gap: 15px
  }

  .develop7 .l .content {
    margin: 20px 0 0 0
  }

  .develop7 .l .content .matter .list {
    gap: 7px
  }

  .develop7 .l .content .matter .list:not(:last-child) {
    margin: 0 0 7px
  }

  .develop7 .l .content .matter .list .icon {
    width: 20px;
    height: 20px
  }

  .develop7 .l .common_more {
    margin: 30px 0 0 0
  }

  .develop7 .r {
    width: 100%;
    height: auto;
    clip-path: unset;
    margin: 25px 0 0 0
  }
}