@media screen and (max-width: 1400px){
  .intro-sec .container {gap: 50px; padding: 0 20px; box-sizing: border-box;}
  .container {padding: 0 20px; box-sizing: border-box;}
}

@media screen and (max-width: 1100px) {
  .intro-sec .left-box .sec_logo {width: 200px;}
  .intro-sec .left-box .txt-box {margin-top: 20px;}
  .intro-sec .left-box .txt-box .txt {font-size: 15px;}
  .link-btn a {height: 45px; padding: 0 10px 0 20px; font-size: 15px;}
  .intro-sec .left-box .link-btn {gap: 10px;}

  .intro-sec .right-box .tit-box {padding-bottom: 20px; margin-bottom: 20px;}
  .intro-sec .right-box .tit-box .tit {font-size: 24px;}
  .intro-sec .right-box .txt-box {margin-bottom: 20px;}
  .intro-sec .right-box .txt-box .tit {font-size: 16px;}
  .intro-sec .right-box .txt-box .txt {font-size: 15px;}

  /* header */
  header .hd-link {gap: 10px;}
  header .hd-link .tit {font-size: 22px;}
  header .hd-link .link-btn {font-size: 16px;}
  header .logo {width: 200px;}
  header .more-btn {width: 300px; height: 40px; padding: 0 10px 0 20px; font-size: 15px;}
  header .more-btn img {width: 20px;}
  header {height: 100px;}

  .view_item ul {gap: 100px;}
  .view_item ul li {width: 300px;}
  .view_item ul li .child-box .img-box img {transform: translate(10px, -10px);}
  .view_item ul li .child-box .img-box .label {top: calc(50% - -13px); left: calc(50% - -1px); width: 100%; height: 45px; font-size: 15px;}
  .view_item ul li .child-box .txt-box .tit {font-size: 18px;}
  .view_item ul li .child-box .txt-box .txt {margin-top: 18px; font-size: 15px;}

  .data-content .tit-box .tit {font-size: 26px;}
}

@media screen and (max-width: 900px) {
  .intro-sec {align-items: flex-start; padding-top: 50px; box-sizing: border-box;}
  .intro-sec .container {flex-flow: column; gap: 20px;}
  .intro-sec .left-box .link-btn {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); margin-top: 0;}
  .intro-sec .left-box .link-btn:hover a {transform: scale(1);}
  .intro-sec .left-box {min-width: 100%;}

  /* header */
  header .hd-link .tit {font-size: 16px;}
  header .hd-link .link-btn {font-size: 14px;}
  header .hd-link {gap: 5px;}
  header .logo {width: 150px;}
  header .more-btn {width: 185px; height: 40px; font-size: 14px;}

  .view_item {margin-top: 50px;}
  .view_item ul {gap: 30px;}

  footer {padding: 50px 0; margin-top: 50px;}
  footer .link-btn {flex-flow: column; gap: 10px;}
  footer .link-btn:hover a {transform: scale(1);}

  .data-content .tit-box .tit {font-size: 22px;}
  .data-content .tit-box .slide-btn {gap: 0;}
  .data-content .tit-box .slide-btn .swiper-pagination {font-size: 15px;}
  .txt-btn_box {margin-top: 20px;}
  .txt-btn_box .txt {gap: 4px;}
  .txt-btn_box .txt .number {font-size: 16px;}
  .txt-btn_box .txt .tit {font-size: 16px;}

  .toggle-item ul {gap: 10px 0; flex-wrap: wrap; margin: 0 -5px;}
  .toggle-item ul li {width: calc(100% / 2); box-sizing: border-box; padding: 0 5px;}
  
}

@media screen and (max-width: 600px) {
  .intro-sec {padding-top: 20px; padding-bottom: 162px;}
  .intro-sec .left-box .link-btn {position: fixed; bottom: 20px;}

  .view_item ul {flex-flow: column;}

  header .container {flex-wrap: wrap;}
  header .more-btn {width: 100%;}

  header {height: 140px;}
  header .logo {width: 120px;}

  .link-btn a {line-height: 1.2;}

  .data-content .tit-box .tit {font-size: 18px; line-height: 1.2;}
  .toggle-item ul {margin: 0;}
  .toggle-item ul li {width: 100%; box-sizing: border-box;}
  .data-content .tit-box .slide-btn {white-space: nowrap;}
}