@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800&display=swap");
body {
  word-break: keep-all;
}
/* sub_header */
header {
  background: #fff;
}
header .header .logo {
  background: url(/img/header_logo_fixed.png) no-repeat center center;
  background-size: cover;
  width: 56px;
  height: 58px;
}
header .header nav ul.gnb > li > a {
  color: #171d21;
}
header .header nav ul.gnb > li > ul.sub {
  background: #fff;
}
header .header nav ul.gnb > li > ul.sub > li > a {
  color: #000;
}

/* about */
.content.about {
}
.content.about > .top {
  padding: 140px 0;
  margin: 0 auto;
  background: #f3f7fa;
}
.content .top > h2 {
  font-family: "Kanit", sans-serif;
  font-size: 62px;
  font-weight: 500;
  line-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  padding-bottom: 126px;
}
.content.about .top .top_inbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 116px;
}
.content.about .top .top_inbox .left {
  max-width: 636px;
  max-height: 688px;
}
.content.about .top .top_inbox .right {
}
.content.about .top .top_inbox .right h4 {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
}
.content.about .top .top_inbox .right h2 {
  max-width: 534px;
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
  padding: 16px 0 40px 0;
}
.content.about .top .top_inbox .right span {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.content.about .top .top_inbox .right span p {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: #6e6b6a;
}
.content.about .top .top_inbox .right span p b {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #6e6b6a;
}
.content.about .top .top_inbox .right span p:last-child {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: #4f4c4a;
}
.content.about .top .top_inbox .right span p b.blue {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #015ca5;
}
.content.about .bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 120px 0 140px 0;
  display: flex;
  /* flex-direction: column; */
  gap: 81px;
  justify-content: center;
}
.content.about .bottom .txt_box {
  display: flex;
  gap: 60px;
  align-items: end;
  justify-content: center;
  flex-direction: column;
}
.content.about .bottom .txt_box .left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.content.about .bottom .txt_box .left h4 {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
}
.content.about .bottom .txt_box .left h2 {
  word-break: keep-all;
  max-width: 534px;
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
}
.content.about .bottom .txt_box .right {
  max-width: 547px;
}
.content.about .bottom .txt_box .right span {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: #6e6b6a;
}
.content.about .bottom .txt_box .right span b {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  color: #6e6b6a;
}
.content.about .bottom .con_box {
}
.content.about .bottom .con_box .box {
  display: flex;
  gap: 60px;
}
.content.about .bottom .con_box .box .hide {
  max-width: 366px;
  width: 100%;
}
.content.about .bottom .con_box .box .hide.active {
  opacity: 1;
  z-index: 9;
}
.content.about .bottom .con_box .box .hide > .txt {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  background: #f3f7fa;
}
.content.about .bottom .con_box .box .hide h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}
.content.about .bottom .con_box .box .hide span p {
  font-size: 18px;
  font-weight: 400;
  line-height: 36px;
  color: #6e6b6a;
}
.content.about .bottom .con_box .box .img {
  max-width: 346px;
  max-height: 460px;
}
.content.about .bottom .con_box .box > .txt {
  padding-top: 24px;
}
.content.about .bottom .con_box .box > .txt span {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #000000;
  padding-bottom: 4px;
}
.content.about .bottom .con_box .box > .txt p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
}

/* history */
.content .t_txt {
  background: #f3f7fa;
}
.content .t_txt > h2 {
  font-family: "Kanit", sans-serif;
  font-size: 62px;
  font-weight: 500;
  line-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  padding: 140px 0;
  padding-top: 240px;
  text-decoration: underline;
  text-decoration-color: #c8c9cb;
  text-decoration-thickness: 1px;
  text-underline-offset: 12px;
}
.content.history {
  padding-bottom: 140px;
}
.content.history .con_box {
  display: flex;
  gap: 160px;
  padding-top: 120px;
}
.content.history .con_box .left {
  width: 39.27%;
  height: 744px;
}
.content.history .con_box .left .mySwiper.history {
  width: 100%;
  height: 100%;
}
.content.history .con_box .left .mySwiper.history .parallax-bg {
  width: 100%;
  height: 100%;
}
.content.history .con_box .left .mySwiper.history .slide_1 {
  background: url(/img/sub/history_1.png) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}
.content.history .con_box .left .mySwiper.history .slide_2 {
  background: url(/img/sub/history_2.png) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}
.content.history .con_box .left .mySwiper.history .slide_3 {
  background: url(/img/sub/history_3.png) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}
.content.history .con_box .right {
  padding-top: 40px;
  width: 791px;
  max-height: 800px;
  height: 100%;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.content.history .con_box .right::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera*/
}
.content.history .con_box .right img {
  object-position: top;
}

/* sales */
.content.sales {
  width: 100%;
}
.content.sales .con {
  max-width: 1400px;
  width: 100%;
  margin: 120px auto 140px auto;
  max-height: 534px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.content.sales .con h4 {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: #6e6b6a;
}
.content.sales .con .con_inbox {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  max-height: 490px;
}
.content.sales .con .con_inbox .left {
  max-width: 760px;
  width: 100%;
}
.content.sales .con .con_inbox .right {
  max-width: 600px;
  width: 100%;
}
.content.sales .con .con_inbox .right table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #e6e6e6;
}
.content.sales .con .con_inbox .right > table > thead > tr {
  /* border: 1px solid #E6E6E6; */
}
.content.sales .con .con_inbox .right > table > thead > tr > th {
  width: 20%;
  padding: 19px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 120%;
  text-align: center;
  background: #f3f7fa;
  /* box-shadow: 0 0 0 1px #E6E6E6 inset; */
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
.content.sales .con .con_inbox .right > table > tbody > tr > td {
  text-align: center;
  padding: 15px 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
  /* box-shadow: 0 0 0 1px #E6E6E6 inset; */
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
.content.sales .con .con_inbox .right > table > tbody > tr > td:first-child {
  font-weight: 500;
  color: #171d21;
}
.content.sales .con .con_inbox .right > table > tbody > tr.bl > td {
  font-weight: 500;
  color: #171d21;
  background: #f3f7fa;
}

/* business */
.content.business .t_txt {
  background: none;
}
.content.business .t_txt > h2 {
  padding: 140px 0 120px 0;
}
.content.business .con .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 120px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.content.business .con .top .left {
}
.content.business .con .top .left h4 {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
}
.content.business .con .top .left h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 64px;
  padding: 16px 0 40px 0;
  max-width: 638px;
}
.content.business .con .top .left p {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  color: #6e6b6a;
  max-width: 609px;
}
.content.business .con .top .right {
  max-width: 646px;
  width: 100%;
}
.content.business .con .top .right table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #e6e6e6;
}
.content.business .con .top .right table tr td {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
  border: 1px solid #e6e6e6;
  padding: 10px 0 10px 24px;
}
.content.business .con .top .right table tr td.bl {
  font-weight: 500;
  color: #171d21;
  background: #f3f7fa;
  text-align: center;
  padding: 0;
  width: 18.575%;
}
.content.business .con .bottom {
  width: 100%;
  background: #f3f7fa;
}
.content.business .con .bottom .inbox {
  max-width: 1400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px;
  margin: 0 auto;
  padding: 120px 0 140px 0;
}

/* product */
.content.product .t_txt {
  background: none;
}
.content.product .t_txt > h2 {
  padding: 140px 0 126px 0;
}
.content.product .con {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 140px;
}
.content.product .con .menu {
  display: flex;
  gap: 24px;
  align-items: center;
  padding-bottom: 82px;
}
.content.product .con .menu li {
}
.content.product .con .menu li a {
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: #6e6b6a;
}
.content.product .con .menu li a.active {
  color: #171d21;
  border-bottom: 2px solid #015ca5;
}
.content.product .con .con_box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}
.content.product .con .con_box a {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.content.product .con .con_box a .img {
  max-height: 360px;
}
.content.product .con .con_box a .txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.content.product .con .con_box a .txt h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}
.content.product .con .con_box a .txt p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
}
.content.product .con .menu {
  padding-bottom: 12px;
}
.content.product .con .sub_menu {
  display: flex;
  align-items: center;
  gap: 24px;
}
.content.product .con .sub_menu span {
  width: 1px;
  height: 16px;
  display: block;
  background: #959595;
}
.content.product .con .sub_menu li a {
  font-family: "Kanit", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: #6e6b6a;
}
.content.product .con .sub_menu li a.active {
  color: #171d21;
  font-weight: 400;
}

/* product_connector_detail */
.content.product.connector.detail .con {
  max-width: 100%;
  width: 1400px;
}
.content.product.connector.detail .con .sub_menu li a.active {
  color: #015ca5;
}
.content.product.connector.detail .con .main_content_01 {
  display: flex;
  flex-direction: column;
  gap: 126px;
  width: 100%;
}
.content.product.connector.detail .con .main_content_01 .top {
  display: flex;
  justify-content: center;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  gap: 50px;
  max-height: 560px;
}
.content.product.connector.detail .con .main_content_01 .top .left {
  max-width: 730px;
  display: flex;
  gap: 50px;
}
.content.product.connector.detail .con .main_content_01 .top .left .l_img {
  max-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.content.product.connector.detail .con .main_content_01 .top .left .r_img {
}
.content.product.connector.detail .con .main_content_01 .top .right {
}
.content.product.connector.detail .con .main_content_01 .top .right h4 {
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  font-family: "Kanit", sans-serif;
}
.content.product.connector.detail .con .main_content_01 .top .right span {
  font-size: 22px;
  font-weight: 400;
  line-height: 36px;
  color: #4f4c4a;
  padding-bottom: 24px;
  display: inline-block;
}
.content.product.connector.detail .con .main_content_01 .top .right p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
  padding-top: 20px;
  text-align: center;
}
.content.product.connector.detail .con .main_content_01 .top .right form a {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: #ffffff;
  padding: 20px 48px;
  border: none;
  background: #015ca5;
  width: fit-content;
}
.content.product.connector.detail .con .main_content_01 .bottom {
  max-width: 1420px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 55px;
}
.content.product.connector.detail .con .main_content_01 .bottom .tab {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 562px;
}
.content.product.connector.detail .con .main_content_01 .bottom .tab li {
  width: 50%;
}
.content.product.connector.detail .con .main_content_01 .bottom .tab li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
  background: #f3f7fa;
  padding: 19px 0;
  text-align: center;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .tab
  li
  a.active {
  background: #ffffff;
  border-top: 2px solid #000000;
}
.content.product.connector.detail .con .main_content_01 .bottom .bottom_con {
  display: flex;
  justify-content: center;
  gap: 50px;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .bottom_con
  .left {
  max-width: 780px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .bottom_con
  .left
  .img {
  border: 1px solid #e6e6e6;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .bottom_con
  .right {
  max-width: 590px;
  width: 100%;
  height: 100%;
  position: sticky;
  right: 0;
  top: 120px;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .bottom_con
  .right
  table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #e6e6e6;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .bottom_con
  .right
  table
  tr
  > th {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  text-align: center;
  background: #f3f7fa;
  width: 25%;
  padding: 10px 0;
  border: 1px solid #e6e6e6;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .bottom_con
  .right
  table
  tr
  > td {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
  text-align: center;
  padding: 10px 0;
  border: 1px solid #e6e6e6;
}
.content.product.connector.detail
  .con
  .main_content_01
  .bottom
  .bottom_con
  .right
  table
  tr
  > td:first-child {
  font-weight: 500;
  color: #171d21;
  background: #f3f7fa;
}
.content.product.connector.detail .con .main_content_02 {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 126px 0 0 0;
}
.content.product.connector.detail .con .main_content_02 .tab {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 562px;
  padding-bottom: 55px;
}
.content.product.connector.detail .con .main_content_02 .tab li {
  width: 50%;
}
.content.product.connector.detail .con .main_content_02 .tab li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
  background: #f3f7fa;
  padding: 19px 0;
  text-align: center;
}
.content.product.connector.detail .con .main_content_02 .tab li a.active {
  background: #ffffff;
  border-top: 2px solid #000000;
}
.content.product.connector.detail .con .main_content_02 table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #e6e6e6;
}
.content.product.connector.detail
  .con
  .main_content_02
  table
  tr
  td:first-child {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  background: #f3f7fa;
  padding: 12px 0 12px 30px;
  max-width: 640px;
  width: 45.714%;
  border: 1px solid #e6e6e6;
}
.content.product.connector.detail .con .main_content_02 table tr td:last-child {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
  padding: 12px 0 12px 30px;
  max-width: 760px;
  width: 54.286%;
  border: 1px solid #e6e6e6;
}

/* notice */
.content.notice {
  background: #f3f7fa;
}
.content.notice .con {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.content.notice .con .box a {
  display: flex;
  max-height: 480px;
}
.content.notice .con .box a .img {
  width: 45.714%;
}
.content.notice .con .box a .txt {
  padding: 80px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.content.notice .con .box a .txt h4 {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
  color: #ffffff;
  padding: 4px 24px;
  background: #015ca5;
  width: fit-content;
}
.content.notice .con .box a .txt h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 38px;
  padding: 24px 0;
  max-width: 352px;
}
.content.notice .con .box a .txt p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
  width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content.notice .con .box a .txt .line {
  width: 60px;
  height: 1px;
  background: #6e6b6a;
  margin: 39px 0;
}
.content.notice .con .box a .txt span {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #959595;
}
.content.notice .num_box {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 48px 0 140px 0;
}
.content.notice .num_box a {
  width: fit-content;
}
.content.notice .num_box a .num {
  font-size: 16px;
  font-weight: 600;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid #e1e5ec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content.notice .num_box a .num.active {
  border: none;
  background: #000000;
  color: #ffffff;
}

/* notice_detail */
.content.notice.detail .banner {
  background: url(/img/sub/notice_detail_banner.png) no-repeat center center;
  background-size: cover;
  width: 100%;
  display: flex;
  justify-content: center;
}
.content.notice.detail .banner .txt {
  width: fit-content;
  padding: 154px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content.notice.detail .banner .txt h4 {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
  color: #ffffff;
  padding: 4px 24px;
  background: #015ca5;
  width: fit-content;
}
.content.notice.detail .banner .txt h2 {
  font-size: 62px;
  font-weight: 700;
  line-height: 80px;
  padding: 24px 0;
  max-width: 497px;
  color: #e6e6e6;
}
.content.notice.detail .banner .txt span {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: #e6e6e6;
}
.content.notice.detail .con {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  gap: 0;
  padding: 120px 0 140px 0;
}
.content.notice.detail .con > p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 50px;
  margin-bottom: 50px;
}
.content.notice.detail .con .pn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content.notice.detail .con .pn a {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.content.notice.detail .con .pn p {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #959595;
  display: flex;
  align-items: center;
  gap: 13px;
}
.content.notice.detail .con .pn svg {
  width: 6px;
  height: 12px;
}
.content.notice.detail .con .pn span {
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
}

/* contact */
.content.contact .con .top {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 120px 0;
}
.content.contact .con .top .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.content.contact .con .top .box .img {
  width: 59px;
  height: 58px;
}
.content.contact .con .top .box.call .img {
  width: 62px;
  height: 58px;
}
.content.contact .con .top .box .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.content.contact .con .top .box .txt h4 {
  font-family: "Kanit", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 36px;
  color: #000000;
}
.content.contact .con .top .box .txt span {
  display: flex;
  flex-direction: column;
}
.content.contact .con .top .box .txt span p,
.content.contact .con .top .box .txt span a p {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
  color: #6e6b6a;
}
.content.contact .con .top .box .txt span p.line,
.content.contact .con .top .box .txt span a p.line {
  cursor: pointer;
  width: fit-content;
  margin: 0 auto;
  text-decoration: underline;
}
.content.contact .con .bottom {
  height: 753px;
  position: relative;
  top: 0;
  display: flex;

  width: 94%;
  margin: 0 auto;
  margin-bottom: 80px;
}
.content.contact .con .bottom iframe {
  width: 70%;
  height: 100%;
}
.content.contact .con .bottom .contact_us {
  position: absolute;
  top: 23%;
  right: 2%;
  background: #ffffff;
  padding: 48px 48px;
  max-width: 360px;
  width: 100%;
}
/* .content.contact .con .bottom .contact_us:hover {
  opacity: 0.9;
} */
.content.contact .con .bottom .right {
  width: 35%;
  height: 100%;
  padding-left: 20px;
  box-sizing: border-box;
}
.content.contact .con .bottom .contact_us h4 {
  font-family: "Kanit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0.4rem;
}
.content.contact .con .bottom .contact_us h2 {
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  max-width: 330px;
  padding: 16px 0 20px 0;
}
.content.contact .con .bottom .contact_us form {
}
.content.contact .con .bottom .contact_us form .inbox {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.content.contact .con .bottom .contact_us form .inbox .input_box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
}
.content.contact .con .bottom .contact_us form .inbox input {
  border: none;
  border-bottom: 1px solid #e6e6e6;
  background: none;
  padding: 10px 0;
}
.content.contact .con .bottom .contact_us form .inbox input:focus {
  outline: none;
}
.content.contact .con .bottom .contact_us form .inbox input::placeholder {
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: #6e6b6a;
}
.content.contact .con .bottom .contact_us form .inbox input.content {
  width: 100%;
}
.content.contact .con .bottom .contact_us form button {
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  color: #fff;
  padding: 20px 48px;
  background: #015ca5;
  border: none;
  margin-top: 60px;
}

.product .main .r_img {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}
.product .main .r_img.lga .sub {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
.product .main .r_img.lga .sub img {
  width: 50%;
  height: 50%;
}
.product .main .r_img img {
  object-fit: unset;
  max-width: 700px;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.product .main .r_img.lga .sub {
  align-items: center;
}
.content.product.connector.detail .con .main_content_01 .top {
  display: flex;
  flex-wrap: wrap;
  max-height: fit-content;
}
.content.product.connector.detail .con .main_content_01 .top .left {
  width: 100%;
  max-width: 1400px;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img1 {
  position: relative;
}

.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img2 {
  position: relative;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img1
  .bg {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.3s;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img1 {
  position: relative;
  height: 100%;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img2 {
  position: relative;
  height: 100%;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img1
  .bg {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.3s;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img1
  .bg:hover {
  opacity: 1;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img2
  .bg {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.3s;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img2
  .bg:hover {
  opacity: 1;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img1
  .bg
  h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img
  .img2
  .bg
  h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img1
  .bg.active {
  opacity: 1;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img2 {
  width: 50%;
  height: 50%;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img2
  img {
  width: 100%;
  height: 100%;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img2
  .bg {
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.3s;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img2
  .bg.active {
  opacity: 1;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img1
  .bg
  h2 {
  color: #fff;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .left
  .r_img.lga
  .img2
  .bg
  h2 {
  color: #fff;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content.product.connector.detail .con .main_content_01 .top .right {
  max-width: 1400px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.content.product.connector.detail .con .main_content_01 .top .right .title {
  width: 50%;
  text-align: center;
}
.content.product.connector.detail .con .main_content_01 .top .right .char {
  width: 50%;
}

.main.main_content_01 a.button {
  font-size: 18px;
  font-weight: 700;
  padding: 16px;
  background: #015ca5;
  border: none;
  margin-top: 60px;
  width: 72px;
  text-align: center;
  color: #fff;
}

.content.product.connector.detail
  .con
  .main_content_01
  .top
  .right
  .title
  .subcont {
  width: 80%;
  text-align: left;
  margin: 0 auto;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .right
  .char
  .subcont {
  width: 80%;
  text-align: left;
  margin: 0 auto;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .right
  .title
  .subcont
  p {
  text-align: left;
}
.content.product.connector.detail
  .con
  .main_content_01
  .top
  .right
  .char
  .subcont
  p {
  text-align: left;
}