.contact-us {
  /* box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3); */
  border-radius: 50% 0 0 50%;
  position: fixed;
  bottom: 100px;
  right: 0;
  z-index: 1000;
}

.contact-us img {
  width: 200px;
  height: 190px;
  display: block;
}

@keyframes bannerAni {
  0% {
    background-image: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/img/cover-01.png");
  }

  30% {
    background-image: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/img/cover-01.png");
  }

  33% {
    background-image: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/img/cover-02.png");
  }

  62% {
    background-image: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/img/cover-02.png");
  }

  66% {
    background-image: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/img/cover-03.png");
  }

  100% {
    background-image: url("https://gentleone.oss-cn-hongkong.aliyuncs.com/hk/static/img/cover-03.png");
  }
}

.banner-container {
  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  animation: bannerAni 15s linear infinite;
}

.mobile-home {
  position: relative;
}

.mobile-home>h1 {
  font-size: 20px;
  line-height: 30px;
  position: absolute;
  padding-left: 10%;
  top: 50%;
}

.title-mobile {
  position: relative;
}

.title-mobile .text-mobile {
  width: 100%;
  position: absolute;
  bottom: 50px;
}

.introduce {
  margin-top: 120px;
  font-size: 18px;
  line-height: 30px;
}

.introduce .title {
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 10px;
}

/* 关于我们 */
.about-us .resources:nth-of-type(1) {
  margin-top: 80px;
}

.about-us .resources img {
  width: 320px;
  height: 230px;
}

.about-us .resources .content {
  position: relative;
  width: calc(100% - 320px);
  box-sizing: border-box;
  padding-left: 80px;
  font-size: 18px;
  line-height: 40px;
}

.about-us .resources .important {
  padding-left: 20px;
}

.about-us .resources .important::before {
  content: "•";
  display: inline-block;
  width: 1em;
  margin-left: -1.3em;
  margin-right: 0.3em;
}

.about-us .resources .content .name {
  font-size: 20px;
}

.about-us .content-line {
  position: absolute;
  /* left: -80px; */
  left: 0;
  width: calc(100% + 0px);
  bottom: 0;
  border-bottom: 1px solid var(--purple);
}

.line-green {
  margin: 20px 0;
  background-color: var(--green);
  display: inline-block;
  height: 6px;
  width: 220px;
  position: relative;
}

.about-us .guiding-values {
  margin-top: 120px;
}

.about-us .guiding-values .row .item {
  width: 30%;
}

.about-us .guiding-values .row .item .row-content {
  opacity: 0.4;
}

.about-us .guiding-values .row .item .row-content:hover {
  opacity: 1;
}

.about-us .mission {
  margin-top: 120px;
}

.about-us .mission .box {
  margin-top: 80px;
  padding: 0 40px;
}

.about-us .mission .box .box-l {
  font-size: 40px;
  width: 400px;
  min-width: 400px;
  line-height: 56px;
}

.about-us .mission .box .box-r {
  max-width: 500px;
}

.values {
  width: 100%;
  margin: 200px 0;
  position: relative;
}

.values .values-image {
  position: relative;
  margin: 0 auto;
  width: 40%;
  height: auto;
  /* transform: rotate(-60deg); */
}

.values .values-image img {
  width: 100%;
  height: auto;
}

.values .values-image>div:not(img) {
  position: absolute;
  width: 40%;
  height: 12%;
  color: white;
  transform-origin: center center;
  cursor: pointer;
}

/* 每个位置不同的旋转角度 */
.values-1 {
  transform: rotate(0deg);
  top: 5%;
  left: 30%;
}

.values-2 {
  transform: rotate(63deg);
  top: 22%;
  left: 64%
}

.values-3 {
  transform: rotate(117deg);
  bottom: 26%;
  left: 64%
}

.values-4 {
  transform: rotate(0deg);
  bottom: 7%;
  left: 30%;
}

.values-5 {
  transform: rotate(63deg);
  bottom: 26%;
  right: 64%
}

.values-6 {
  transform: rotate(117deg);
  top: 22%;
  right: 64%;
}

[class^="values-content-"] {
  font-size: 18px;
  line-height: 30px;
  position: absolute;
  width: 30%;
  opacity: 0.5;
  cursor: pointer;
}

[class^="values-content-"]:hover {
  opacity: 1;
  background: #fff;
}

.values-content-1 {
  width: 40%;
  bottom: calc(100% + 20px);
  left: 30%;
}

.values-content-2 {
  top: 10%;
  left: 70%;
}

.values-content-3 {
  top: 60%;
  left: 70%;
}

.values-content-4 {
  width: 40%;
  top: calc(100% + 20px);
  left: 30%;
}

.values-content-5 {
  top: 60%;
  right: 70%;
}

.values-content-6 {
  top: 10%;
  right: 70%;
}

/* ncaa */


#sports,
#choose-ncaa,
#understand-ncaa {
  scroll-margin-top: 180px;
}

.sports {
  background-color: #f2f2f2;
  padding: 40px;
}

.sports .item {
  font-size: 18px;
}

.sports .content,
.sports .content .detail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sports .content .detail {
  grid-template-columns: repeat(1, 1fr);
}

.sports .content span {
  padding-left: 30px;
}

.choose-ncaa {
  font-size: 20px;
  line-height: 30px;
  margin-top: 120px;
}

.choose-ncaa .tip {
  font-style: 20px;
  line-height: 30px;
}

.data-ncaa {
  margin-top: 80px;
}

.choose-ncaa .row {
  gap: 10px;
}

.choose-ncaa .row [class^="item-"] {
  font-size: 18px;
  width: 45% !important;
  box-sizing: border-box;
  padding-left: 20px;
}

.choose-ncaa .row .item::before {
  content: "•";
  display: inline-block;
  width: 1em;
  margin-left: -1.3em;
  margin-right: 0.3em;
}

.understand-ncaa {
  margin-top: 120px;
}

.understand-ncaa .title {
  font-size: 20px;
  line-height: 30px;
  margin-bottom: 20px;
}

.understand-ncaa .content {
  font-size: 20px;
  line-height: 30px;
}

.understand-ncaa .ncaa-3 {
  position: relative;
}

.understand-ncaa .ncaa-3 .text {
  font-size: 28px;
  position: absolute;
  top: 25%;
  right: 0;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.understand-ncaa .ncaa-3 .text .ncaa-num {
  font-size: 64px;
}

.understand-ncaa .ncaa-3 .text:hover {
  transform: scale(1.1);
}

.understand-ncaa .w30 {
  width: 30%;
}

.understand-ncaa .border-line {
  margin-top: 30px;
  margin-bottom: 30px;
  border-bottom: 2px solid #8d8d8d;
}

.understand-ncaa .square {
  width: 30%;
  /* height: 280px; */
  position: relative;
  padding: 30px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.understand-ncaa .row:hover .square {
  transform: scale(1.1);
}

.know-ncaa-4 {
  margin-top: 80px;
}

.understand-ncaa .represent {
  font-size: 18px;
  margin-top: 80px;
}

.represent-detail .left {
  width: 30%;
}

.represent-detail .action {
  width: 65%;
}

.represent-detail .action .row .item {
  width: 50%;
  box-sizing: border-box;
}

.represent-detail .action {
  line-height: 36px;
}

.represent-detail .action .row {
  width: 100%;
  gap: 0;
}

.represent-detail .action.row .item {
  width: 50%;
  box-sizing: border-box;
}

.represent-detail .action .row>.action-l {
  padding-right: 40px;
}

.opacity {
  opacity: 0;
}

.data-box {
  height: 515px;
  background: url("/static/img/Exploring\ the\ NCAA.png") no-repeat 15% top;
}

.data-box .row .item {
  width: 30%;
  text-align: center;
  color: #9afe00;
  transition: transform 0.5s ease;
  cursor: pointer;
  position: relative;
}

.data-box .row .item .name {
  margin-top: 6px;
}

.data-box .row .item .num {
  position: relative;
}

.data-box .row .item .num .top {
  position: absolute;
  top: -30px;
  margin-left: -60px;
}

.data-box .row .item:hover {
  transform: scale(1.1);
}

.data-box .row .item div {
  gap: 0;
}

.graduation {
  font-size: 28px;
}

.graduation.row .item {
  width: 18%;
}

.graduation.row .chart {
  width: 150px;
  height: 150px;
  transition: transform 0.5s ease;
  cursor: pointer;
}

.graduation.row .chart:hover {
  transform: scale(1.1);
}


.navbar {
  font-size: 28px;
  margin-top: 60px;
  position: sticky;
  top: 90px;
  z-index: 900;
  padding: 20px 40px;
  background-color: #fff;
}

.navbar .row {
  gap: 0px;
  align-items: center
}

.ncaa {
  margin: 80px 40px 0;
}

.navbar .row .item {
  width: 33%;
  position: relative;
}
.solution .navbar .row .item {
  width: 45%;
}

.ncaa .row.sports .item {
  width: 30%;
}

.navbar .row .item a {
  display: inline;
  padding: 0 20px 10px;
  cursor: pointer;
  color: #999;
  text-decoration: none;
}

.navbar .row {
  flex-wrap: nowrap;
}

.navbar .row .active a {
  display: inline !important;
  color: #333;
}

.navbar .row .active::before {
  content: "";
  width: 80%;
  height: 8px;
  background-color: var(--purple);
  position: absolute;
  bottom: -10px;
  left: 10%;
}

.solution .Educational {
  margin-top: 120px;
}

.solution .nav-content {
  margin-top: 120px;
}

.solution .nav-content .image {
  margin-top: 80px;
}

.solution .nav-content .row .item {
  position: relative;
  width: 35%;
}

.solution .nav-content .row .item.min {
  width: 20% !important;
}


#Team,
#Educational {
  scroll-margin-top: 180px;
}

.solution .Team,
.solution .Educational {
  font-size: 18px;
  line-height: 30px;
}

.solution .Team .name,
.solution .Educational .name {
  font-size: 20px;
  margin-bottom: 20px;
}

.solution .Educational .logo {
  margin-top: 80px;
  font-size: 18px;
  gap: 0;
}

.solution .Educational .logo .item.one {
  width: 450px;
}

.solution .Educational .logo .item.two {
  width: 240px;
}

.solution .Educational .logo .item.three {
  width: 180px;
}

.solution .Educational .logo .one img {
  max-width: 100%;
  width: 450px;
}

.solution .Educational .logo .two img {
  max-width: 100%;
  width: 180px;
}

.solution .Educational .logo .three img {
  max-width: 100%;
  width: 110px;
}

.img .item:not(:last-child)::after {
  /* 除了最后一个 .item 外的所有 .item 后面添加竖线 */
  content: '';
  position: absolute;
  right: -40px;
  /* 根据需要调整距离 */
  top: -40px;
  bottom: 0;
  width: 1px;
  /* 线条宽度 */
  height: 160px;
  background-color: #333;
  /* 线条颜色 */
}

.support {
  margin-top: 120px;
}

.support .support-box {
  gap: 80px;
}

.support .support-box .item {

  width: calc(50% - 40px);
  gap: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.support .support-box .item img {
  width: 125px;
  height: 125px;
}

.support .support-box .item:hover {
  transform: scale(1.1);
}

.support .support-box .item .name {
  font-size: 28px;
  margin-bottom: 20px;
}

.support .support-box .item .info {
  font-size: 18px;
  line-height: 30px;
}