@media screen and (max-width: 1550px) {
  .container {max-width: 100%; padding: 0 20px; box-sizing: border-box;}
  header {top: 100px;}
  .main-item ul li .child-box:after {top: -50px; width: 100px; height: 100px;}
  .main-item ul li .child-box .txt-box .tit {margin-bottom: 20px; font-size: 30px;}
  .main-item {padding-top: 760px;}
  .main-item ul li .child-box .txt-box .sub {font-size: 20px;}
  .main-item ul li .child-box .txt-box {top: 30px; left: 20px;}

  .top-btn {top: auto; bottom: 20px; right: 20px;}
  .top-btn a {width: 40px;}
}

@media screen and (max-width: 900px) {
  #wrap {padding-bottom: 100px;}
  header .logo {width: 378px;}
  .main-item {padding-top: 660px;}
  .main-item ul li .child-box .txt-box .tit {margin-bottom: 10px;; font-size: 20px;}
  .main-item ul li .child-box .txt-box .sub {font-size: 16px; word-break: keep-all;}

  .main-item ul {gap: 10px;}
}

@media screen and (max-width: 600px) {
  .main-item ul {flex-flow: column; gap: 100px;}
  .main-item ul li {width: 100%;}
  .main-item ul li:nth-child(even) .child-box {top: 0 !important;}
  .main-item {padding-top: 300px;}
  header {width: 100%;}
  header .logo {width: 278px; margin: 0 auto;}
}