.chapter {
  text-align: center;
}

.chapter > p {
  color: #262626;
  font-size: 25px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.chapter > h2 {
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: var(--IoT, linear-gradient(91deg, #249fe6 16.85%, #13315a 83.4%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient {
  background: linear-gradient(91deg, #249fe6 16.85%, #13315a 83.4%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ts_gradient {
  background: linear-gradient(91deg, #249fe6 16.85%, #13315a 83.4%);
  background-clip: content-box;
  -webkit-background-clip: content-box;
  -webkit-text-fill-color: #fff;
}

#section_1 {
  height: 664px;
  background: url(/image/section1_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.left_black_box {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: inherit;
  background: linear-gradient(to left, transparent, #000);
}

.right_black_box {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: inherit;
  background: linear-gradient(to right, transparent, #000);
}

.section1_content {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px;
  padding-left: 231px;
  color: #fff;
  background: linear-gradient(to left, transparent, #000);
}

.section1_content > h2 {
  font-family: "Raleway", sans-serif;
  letter-spacing: -1px;
  font-size: 50px;
  margin-top: 5px;
}

.section1_content > p {
  font-size: 25px;
}

/* ------ SECTION 2 ---------*/

#section_2 {
  font-weight: 600;
  padding-bottom: 200px;
}

#section_2 > h2 {
  padding: 172px 0 96px;
  font-size: 30px;
  text-align: center;
}

#section_2 > h2 > span {
  color: #249fe6;
}

.gradient {
  color: #249fe6;
  background: linear-gradient(90deg, #249fe6 0%, #13315a 75.05%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section_2_tabs {
  display: flex;
  justify-content: center;
  width: inherit;
  color: #a6a6a6;
  cursor: pointer;
}

.section_2_tab {
  display: block;
  padding: 15px 0;
  width: 300px;
  text-align: center;
}

.section_2_tab.active {
  color: #249fe6;
  font-weight: 600;
}

.section_2_tabs_underbar {
  display: flex;
}

.section_2_tabs_underbar > div {
  flex: 1;
  height: 3px;
  transform: scaleY(0.01);
  transition: transform 0.4s ease-in;
}

.section_2_tabs_underbar > .active {
  background: #249fe6;
  transform: scaleY(1);
}

.section2_content > .children {
  display: flex;
  justify-content: center;
  margin-top: 40px;
  padding: 0 150px;
}
.section2_content > .children > img,
.section2_content > .children > p {
  flex: 1;
}

.section2_content > .children > p {
  align-self: center;
  text-align: center;
  font-size: 20px;
  color: #737373;
  line-height: 1.8;
}

/* ------------- section3 --------------*/

.section_3_chapter {
  margin-bottom: -35px;
}

#section_3 {
  padding: 130px 170px;
  background: linear-gradient(
    180deg,
    rgba(36, 159, 230, 0.16) 0%,
    rgba(255, 255, 255, 0) 30%
  );
}

.section3_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #249fe6;
  border-radius: 25px;
  padding: 20px;
  padding-bottom: 200px;
  box-shadow: 0px 4px 37.5px 0px rgba(36, 159, 230, 0.16);
}

#section3_worker {
  width: 347px;
  height: 264px;
  align-self: flex-start;
}

.section3_text_wrap {
  position: relative;
  width: 900px;
  padding: 0 50px;
}

.svg_wrap {
  position: absolute;
  left: -10px;
}

.section3_text_wrap p {
  font-size: 21px;
  color: #585755;
  line-height: 2.2;
}

.section3_text_wrap p.section3_text_strong {
  position: relative;
  display: inline-block;
  font-size: 25px;
  font-weight: 600;
  color: #346c9c;
}

p.section3_text_strong:before {
  content: "";
  position: absolute;
  left: -35px;
  top: 20px;
  width: 14px;
  height: 15px;
  background: #249fe6;
  border-radius: 50%;
}

#section3_com {
  position: absolute;
  right: 0;
  top: -50px;
}

/* section_4 */

#section_4 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section4_title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -75px);
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  background: linear-gradient(91deg, #249fe6 16.85%, #13315a 83.4%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section4_title > span {
  font-size: 35px;
  -webkit-text-fill-color: #000;
}

.section4_content {
  width: 1329px;
  height: 942px;
}

.active.section4_card {
  opacity: 1;
  transform: translateY(0px);
  filter: blur(0px);
}

.section4_card {
  position: absolute;
  transform: translateY(-50px);
  border-radius: 40px;
  background: #fff;
  box-shadow: 4px 4px 31.7px -9px rgba(0, 0, 0, 0.58);
  padding: 55px 46px;
  text-align: center;
  opacity: 0;
  filter: blur(9px);
  transition: opacity 0.4s ease-out 0.2s, transform 0.4s ease-out 0.2s,
    filter 0.6s ease-out 0.2s;
}

.section4_card > p {
  color: #000;
  font-size: 20px;
  font-style: normal;
  line-height: normal;
}

.section4_card > p > span {
  background: linear-gradient(91deg, #249fe6 16.85%, #13315a 83.4%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.wjs {
  left: 251px;
  top: 19px;
}

.hdd {
  left: 80px;
  top: 274px;
}

.cpm {
  left: 51px;
  bottom: 239px;
}

.cpm > p {
  font-size: 25px;
}

.tkw {
  right: 385px;
  bottom: 23px;
}

.tkw > p {
  font-size: 25px;
}

.hc {
  right: 37px;
  bottom: 185px;
}

.sb {
  right: 73px;
  top: 43px;
  flex-shrink: 0;
}

.sb > p {
  font-size: 25px;
}
/* section_5 */

#section_5 {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
}

.section5_content p {
  text-align: center;
  line-height: 2;
  font-size: 21px;
  color: #555;
}

.section5_content p > span {
  font-size: 25px;
  color: #249fe6;
}
#section_5 .animation {
  display: inline-block;
  opacity: 0;
  transform: translateY(-20px);
  filter: blur(9px);
}

#section_5.active .animation {
  opacity: 1;
  transform: translateY(0px);
  transition: all 0.4s ease-in-out calc(var(--i) * 0.25s);
  filter: blur(0);
}

/* section_6 */

#section_6 {
  height: 80dvh;
  background: linear-gradient(
    0deg,
    rgba(36, 159, 230, 0) 0.36%,
    rgba(36, 159, 230, 0.62) 28.79%,
    rgba(36, 159, 230, 0) 99.6%
  );
}

.section6_content {
  width: inherit;
  height: inherit;
  display: flex;
  padding: 0 150px 0 290px;
  justify-content: center;
  align-items: center;
  column-gap: 50px;
}

.section6_content > div {
  flex: 1;
  margin-top: -150px;
}

.section6_content > div > p {
  text-shadow: 7px 8px 50px rgba(0, 0, 0, 0.46);
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}

.section6_content > div > p > span {
  font-size: 40px;
  font-weight: 600;
  color: #ffef64;
}

.section6_content > img {
  flex: 1;
  width: 496px;
}

/* section_7 */

#section_7 {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section7_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 45px;
}

.section7_content > h2 {
  font-size: 40px;
  font-weight: 600;
  color: #000;
  text-align: center;
}

.section7_content > h2 > span {
  background: #000;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section7_cardWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 96px;
}

.section7_card {
  width: 386px;
}

#section7_plus {
  width: 79px;
}

/* section_8 */

#section_8 {
  min-height: 65dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section8_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 350px;
  width: inherit;
}

.section8_content > div {
}

.section8_content > p {
  color: #000;
  text-align: center;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.section8_content > p > span {
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  background: linear-gradient(91deg, #249fe6 16.85%, #13315a 83.4%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section8_content > div {
  padding: 5px 15px;
  background: #249fe6;
  font-size: 21px;
  color: #fff;
  text-align: center;
}

.section8_content > div > span {
  font-size: 27px;
  font-weight: 600;
  color: #fff;
}

#section_8 .animation {
  filter: blur(9px);
  opacity: 0;
}

#section_8 div.animation {
  transform: translateY(-20px);
  filter: blur(0);
}

#section_8.active .animation {
  filter: blur(0px);
  opacity: 1;
  transition: all 0.6s ease-in-out calc(var(--i) * 0.1s);
}

#section_8.active div.animation {
  filter: blur(0px);
  opacity: 1;
  transform: translateY(0px);
}

/* section_9 */

#section_9 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 250px 0;
  background: linear-gradient(
    to bottom,
    transparent,
    transparent,
    rgba(36, 159, 230, 0.46) 100%
  );
}

.section9_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 15px;
}

.section9_content > p {
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #000;
}

.section9_content > p > span {
  font-size: 30px;
}

.section9_content > img {
  width: 577px;
}

/* section_10 */

#section_10 {
  padding: 150px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0) 0.06%,
    rgba(36, 159, 230, 0.46) 90.63%
  );
}

.section10_content {
  width: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 153px;
  row-gap: 68px;
}

.section10_content_text_wrap {
  text-align: right;
  margin-left: auto;
}

.section10_content_text_wrap > p {
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.section10_content_text_wrap > p > span {
  background: linear-gradient(270deg, #5196bd 1.78%, #13315a 29.94%);

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.section10_video_wrap {
  display: flex;
  column-gap: 75px;
}

.section10_video > iframe {
  border-radius: 25px;
}

.section10_video > p {
  text-indent: 10px;
  font-weight: 600;
}

.section10_video.mo {
  display: none;
}

/* section_11 */

#section_11 {
  min-height: 100dvh;
  padding: 156px 0;
}

#section_11 > h2 {
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  color: #585755;
}

.tel {
  margin: 30px auto 10px;
  text-align: center;
  color: #000;
  font-family: Noto Sans KR;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 13px; /* 65% */
}

.inform {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 23px;
  width: inherit;
  margin-top: 90px;
  padding: 0 148px;
}

.inputBox {
  display: flex;
  align-items: center;
  column-gap: 20px;
  width: 100%;
  min-height: 93px;
  padding: 0 50px;
  border-radius: 25px;
  background: #fff;
  border: 1px solid #249fe6;
}

.inputBox:has(input:focus),
.inputBox:has(textarea:focus) {
  box-shadow: 0px 0px 40px 10px rgba(79, 119, 141, 0.25);
}

.inputBox > span {
  display: block;
  width: 150px;
  font-size: 25px;
  color: #587555;
  white-space: nowrap;
}

.inputBox > input,
.inputBox > textarea {
  outline: none;
  border: none;
  font-size: 25px;
}

.inputBox > input {
  flex: 1;
  height: 100%;
}

.inputBox > textarea {
  flex: 1;
  height: 375px;
  font-family: "Noto Sans KR", sans-serif;
}

.inform_submit {
  outline: none;
  border: none;
  background: #249fe6;
  color: #fff;
  font-size: 21px;
  align-self: flex-end;
  padding: 15px 30px;
  border-radius: 15px;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.inform_submit:active {
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3) inset;
}

footer {
  padding: 145px 0 99px 101px;
  background: rgba(0, 0, 0, 0.56);
}

footer > h2 {
  color: #fff;
  font-family: Noto Sans KR;
  font-size: 40px;
  -style: normal;
  font-weight: 700;
  line-height: normal;
}

footer > h2 > span {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 107.27%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

footer > p {
  margin-top: 27px;
  color: #fff;
  font-family: Noto Sans KR;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

@media screen and (max-width: 768px) {
  #section_1 {
    height: 45dvh;
  }

  .section1_content {
    padding: 20px;
  }

  .section1_content > h2 {
    font-size: 32px;
  }

  .section1_content > p {
    font-size: 14px;
  }

  #section_2 {
  }

  #section_2 > h2 {
    padding: 20dvh 20px;
    font-size: 20px;
  }

  .section_2_tabs {
    column-gap: 0px;
    justify-content: space-around;
    padding: 0 12px;
  }

  .section_2_tab {
    font-size: 16px;
  }

  .section2_content > .children {
    flex-direction: column;
    align-items: center;
    row-gap: 25px;
    padding: 0 15px;
  }

  .section2_content > .children > p {
    /* display: none; */
    font-size: 14px;
    width: auto;
  }

  .section2_content > .children > p > br {
    display: none;
  }

  /* section_3 */
  .chapter {
    margin-bottom: -50px;
  }

  .chapter > p {
    font-size: 16px;
  }

  .chapter > h2 {
    font-size: 32px;
  }

  #section_3 {
    margin-top: 30px;
    padding: 50px 10px;
  }

  .section3_bg .cloud:nth-child(2) {
    right: 0px;
    bottom: 0px;
    width: 100dvw;
    height: 300px;
  }

  .section3_bg .cloud > p {
    font-size: 14px;
  }

  .section3_bg .cloud > h2 {
    font-size: 24px;
  }

  #section3_worker {
    width: 50dvw;
    height: auto;
    align-self: none;
    margin-right: auto;
    transform: translateX(-40px);
  }

  .section3_content {
    padding: 30px;
  }

  .section3_text_wrap {
    width: 100%;
    padding: 0;
    padding-left: 23px;
  }

  .svg_wrap {
    top: -18px;
  }

  .svg_wrap > svg {
    width: 25px;
  }

  .section3_text_wrap.mo {
  }

  .section3_text_wrap p.section3_text_strong {
    position: relative;
    font-size: 18px;
    margin-bottom: 15px;
  }

  p.section3_text_strong:before {
    left: -20px;
    top: 5px;
    width: 10px;
    height: 11px;
  }

  .section3_text_wrap p {
    font-size: 14px;
    color: #585755;
    line-height: 1.2;
  }

  #section3_com {
    position: static;
    width: 20dvh;
    float: right;
  }

  /* section_4 */

  #section_4 {
    padding: 50px 0;
  }

  .section4_content {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    padding: 0 30px;
  }

  .section4_content > img {
    width: 80%;
  }

  .section4_content > p {
    font-size: 16px;
  }

  .section4_title {
    position: static;
    transform: none;
    font-size: 32px;
    text-align: center;
    margin-bottom: 50px;
  }

  .section4_title > span {
    font-size: 16px;
  }

  .section4_card {
    padding: 15px;
    border-radius: 15px;
    position: static;
    width: fit-content;
  }

  .section4_card:nth-child(2n -1) {
    align-self: flex-end;
  }

  .section4_card > p {
    font-size: 12px;
  }

  /* section_5*/

  .section5_content p {
    font-size: 16px;
    line-height: 1.8;
  }

  .section5_content p > span {
    font-size: 20px;
  }

  .section6_content {
    padding: 0;
    flex-direction: column;
  }

  .section6_content_text {
    position: absolute;
    bottom: 25dvh;
    right: 20px;
    text-align: right;
  }

  .section6_content > div > p {
    text-align: right;
    font-size: 16px;
    color: #fff;
  }

  .section6_content > img {
    width: 90%;
    flex: none;
  }

  .section6_content > div > p > span {
    font-size: 20px;
  }

  /* section_7 */

  .section7_content {
    row-gap: 45px;
    padding: 50px 0;
  }

  .section7_content > h2 {
    font-size: 24px;
  }

  .section7_cardWrap {
    flex-direction: column;
    row-gap: 15px;
  }

  .section7_card {
    width: 60dvw;
  }

  #section7_plus {
    width: 10dvw;
  }

  /* section_8 */

  .section_8 {
  }

  .section8_content {
    row-gap: 100px;
    padding: 0 30px;
  }

  .section8_content > p {
    font-size: 18px;
  }

  .section8_content > p > span {
    font-size: 18px;
    color: #249fe6;
  }

  /* section_9 */

  .section9_content > p {
    font-size: 18px;
  }

  .section9_content > img {
    width: 80dvw;
  }

  /* section_10 */

  .section10_content {
    padding: 0 30px;
    row-gap: 40px;
  }

  .section10_content_text_wrap > p {
    font-size: 14px;
  }

  .section10_content_text_wrap > p > svg {
    width: 20px;
    height: 21px;
  }

  .section10_content_text_wrap > p > span {
    font-size: 18px;
  }
  .section10_video_wrap {
    margin-left: auto;
    column-gap: 25px;
  }

  .section10_video {
    display: none;
  }
  .section10_video.mo {
    display: block;
  }

  .section10_video > a > img {
    border-radius: 15px;
  }

  .section10_video > p {
    text-indent: 5px;
    font-size: 12px;
  }

  #section_11 {
    padding: 50px 0;
  }

  #section_11 > h2 {
    font-size: 20px;
  }

  .tel {
    margin: 30px auto 10px;
    padding: 0 30px;
    text-align: center;
    color: #000;
    -family: Noto Sans KR;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .inform {
    margin-top: 40px;
    padding: 0 30px;
  }

  .inputBox {
    column-gap: 20px;
    min-height: 60px;
    padding: 0 20px;
  }
  .inputBox > span {
    font-size: 14px;
    width: 60px;
  }

  .inputBox > input,
  .inputBox > textarea {
    font-size: 14px;
  }

  .inform_submit {
    font-size: 14px;
    border-radius: 10px;
  }

  footer {
    padding-left: 30px;
  }

  footer > h2 {
    font-size: 30px;
  }
  footer > p {
    font-size: 14px;
  }
}