container {
  padding: 0px; background: none
}
container box {
  max-width: none; padding: 0px; padding-bottom: var(--page-gap)
}
.home_banner {
  width: 100%; height: 50vh; min-height: 600px; max-height: 800px; background: #f7f7f7
}
.home_banner jtbc-swiper {
  width: 100%; height: 100%
}
.home_banner div.swiper {
  width: 100%; height: 100%; --swiper-navigation-color: #f7f7f7; --swiper-pagination-color: #f7f7f7
}
.home_banner div.swiper-slide {
  background: none center center no-repeat; background-size: cover
}
.home_banner div.swiper-slide div.bg {
  width: 100%; height: 100%; background: url(../images/bgt.png) rgba(122, 122, 255, .4) top center; position: absolute; top: 0px; left: 0px; z-index: 10
}
.home_banner div.swiper-slide div.mask {
  width: 50%; height: 100%; background: rgba(122, 122, 255, .8); position: absolute; top: 0px; left: 0px; z-index: 50
}
.home_banner div.swiper-slide div.slogan {
  width: 40%; position: absolute; top: 50%; left: 50%; transform: translate(10%, -50%); z-index: 100
}
.home_banner div.swiper-slide div.slogan h2 {
  font-size: 3rem; font-weight: normal; color: #fff6a6; line-height: 160%; padding-bottom: var(--page-gap); position: relative
}
.home_banner div.swiper-slide div.slogan h2 span.triangle {
  display: block; position: absolute; top: -10px; left: -30px; z-index: 200
}
.home_banner div.swiper-slide div.slogan h2 span.triangle::before {
  display: block; content: ''; width: 0px; height: 0px; border-left: 24px solid #fff6a6; border-top: 8px solid transparent; border-bottom: 8px solid transparent; transform: rotate(45deg)
}
.home_banner div.swiper-slide div.slogan h2 span.triangle::after {
  display: block; content: ''; width: 0px; height: 0px; border-left: 14px solid #fff6a6; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: rotate(-10deg)
}
.home_banner div.swiper-slide div.slogan p {
  width: 100%; max-width: 480px; font-size: 1.6rem; line-height: 160%; color: #fff
}
.home_banner div.swiper-slide div.slogan div.more {
  padding-top: calc(var(--page-gap) * 2)
}
.home_banner div.swiper-slide div.slogan div.more a {
  display: inline-block; padding: calc(var(--page-gap) / 2) var(--page-gap); font-size: 1.4rem; color: #fff; border: #fff 1px solid; text-decoration: none; transition: all .3s ease
}
.home_banner div.swiper-slide div.slogan div.more a:hover {
  background: rgba(122, 122, 255, .9); border-color: rgba(122, 122, 255, .9)
}
.home_banner div.swiper-slide:nth-child(even) div.slogan {
  left: auto; right: 50%; transform: translate(-10%, -50%)
}
.home_banner div.swiper-slide:nth-child(odd) div.mask {
  left: auto; right: 0px
}
.home_section {
  width: 100%; box-sizing: border-box; padding: var(--page-outer-padding)
}
.home_section h3 {
  width: 100%; font-size: 3rem; color: #555; text-align: center
}
.home_section h3 em {
  font-style: normal; color: #eeb836
}
.home_section h4 {
  width: 100%; padding: calc(var(--page-gap) / 2) 0px; font-size: 1.6rem; font-weight: normal; color: #999; text-align: center
}
.home_section div.box {
  width: 100%; box-sizing: border-box; max-width: var(--page-max-width); margin: auto; padding: calc(var(--page-gap) * 3) 0px
}
.home_advantage_list {
  width: 100%; margin-top: var(--page-gap); height: 800px; position: relative
}
.home_advantage_list div.central {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 50
}
.home_advantage_list div.central span.photo {
  width: 300px; height: 300px; display: block; background: url(../images/home.advantage.1.jpg) center center no-repeat; background-size: cover; border-radius: 100%; border: #7a7aff 2px solid
}
.home_advantage_list div.central span.photo::before {
  display: block; content: ''; width: 200%; height: 200%; border: rgba(122, 122, 255, .3) 2px solid; border-radius: 100%; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 100
}
.home_advantage_list div.central span.photo::after {
  display: block; content: ''; width: 300%; height: 300%; border: rgba(122, 122, 255, .1) 2px solid; border-radius: 100%; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; z-index: 100
}
.home_advantage_list div.item {
  width: 32%; height: calc(33.33% - var(--page-gap) * 2 / 3); box-sizing: border-box; padding: var(--page-gap); background: url(../images/bg.png) #7a7aff center center; border-radius: var(--page-gap); position: absolute; z-index: 200
}
.home_advantage_list div.item div.content {
  width: 100%; height: 100%; box-sizing: border-box; border: #eeb836 2px dashed; border-radius: calc(var(--page-gap) / 2); padding: var(--page-gap); position: relative
}
.home_advantage_list div.item div.content h5 {
  font-size: 4rem; color: #fff; padding-bottom: var(--page-gap)
}
.home_advantage_list div.item div.content p {
  font-size: 2.4rem; line-height: 160%; color: #fff
}
.home_advantage_list div.item div.content div.triangle {
  display: block; transform: rotate(120deg); position: absolute; top: 60px; right: 15%; z-index: 200
}
.home_advantage_list div.item div.content div.triangle::before {
  display: block; content: ''; width: 0px; height: 0px; border-left: 24px solid #eeb836; border-top: 8px solid transparent; border-bottom: 8px solid transparent; transform: rotate(45deg)
}
.home_advantage_list div.item div.content div.triangle::after {
  display: block; content: ''; width: 0px; height: 0px; border-left: 14px solid #eeb836; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: rotate(-10deg)
}
.home_advantage_list div.item:nth-of-type(1) {
  top: 0px; left: 0px
}
.home_advantage_list div.item:nth-of-type(2) {
  top: 50%; left: 0px; transform: translate(0, -50%)
}
.home_advantage_list div.item:nth-of-type(3) {
  bottom: 0px; left: 0px
}
.home_advantage_list div.item:nth-of-type(4) {
  top: 0px; right: 0px
}
.home_advantage_list div.item:nth-of-type(5) {
  top: 50%; right: 0px; transform: translate(0, -50%)
}
.home_advantage_list div.item:nth-of-type(6) {
  bottom: 0px; right: 0px
}
.home_course_list {
  width: 100%; padding-top: var(--page-gap)
}
.home_course_list div.item {
  width: 100%; display: flex; background: #f8f8f8; margin-bottom: calc(var(--page-gap) * 2); box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1)
}
.home_course_list div.item div.image {
  width: 60%
}
.home_course_list div.item div.image img {
  display: block; width: 100%
}
.home_course_list div.item div.text {
  flex: 1; box-sizing: border-box; padding: calc(var(--page-gap) * 2)
}
.home_course_list div.item div.text h1 {
  font-weight: normal; color: #eeb836; line-height: 140%
}
.home_course_list div.item div.text div.intro {
  padding-top: var(--page-gap); font-size: 1.4rem; line-height: 160%; color: #333
}
.home_course_list div.item:last-of-type {
  margin-bottom: 0px
}
.home_tip_list {
  width: 100%; padding-top: var(--page-gap); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between
}
.home_tip_list div.item {
  width: calc(33.33% - calc(var(--page-gap) * 2 / 3)); min-height: 320px; background: #f8f8f8; box-sizing: border-box; margin-bottom: var(--page-gap); padding: var(--page-gap); padding-bottom: calc(var(--page-gap) * 4); position: relative; box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .1)
}
.home_tip_list div.item div.title {
  font-size: 2rem; color: #eeb836; white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.home_tip_list div.item div.title a {
  color: #eeb836
}
.home_tip_list div.item div.date {
  padding: calc(var(--page-gap) / 2) 0px; font-size: 1.4rem; color: #999
}
.home_tip_list div.item div.content {
  font-size: 1.4rem; color: #333; line-height: 160%
}
.home_tip_list div.item div.more {
  width: 100%; padding: var(--page-gap); position: absolute; left: 0px; bottom: 0px; z-index: 100
}
.home_tip_list div.item div.more a {
  display: inline-block; padding: calc(var(--page-gap) / 4) calc(var(--page-gap) / 2); font-size: 1.4rem; color: #7a7aff ; border: #7a7aff 1px solid; text-decoration: none; transition: all .3s ease
}
.home_tip_list div.item div.more a:hover {
  background: #7a7aff ; color: #fff
}
@media screen and (max-width: 960px) {
  .home_banner {
    height: calc(100vh - 63px)
  }
  .home_banner div.swiper-slide div.mask {
    width: 100%; height: 50%; position: absolute; top: auto; bottom: 0px
  }
  .home_banner div.swiper-slide div.slogan {
    width: 100%; box-sizing: border-box; padding: calc(var(--page-gap) * 2); overflow: hidden; top: 50% !important; left: auto !important; right: auto !important; bottom: 0px !important; transform: none !important
  }
  .home_banner div.swiper-slide div.slogan h2 {
    font-size: 2.4rem
  }
  .home_advantage_list {
    height: auto; margin-top: 0px
  }
  .home_advantage_list div.central {
    display: none
  }
  .home_advantage_list div.item {
    width: 100%; height: auto; position: static; margin-top: var(--page-gap); transform: none !important
  }
  .home_advantage_list div.item div.content h5 {
    font-size: 3rem
  }
  .home_advantage_list div.item div.content p {
    font-size: 1.8rem
  }
  .home_course_list div.item {
    display: block
  }
  .home_course_list div.item div.image {
    width: 100%
  }
  .home_tip_list div.item {
    width: 100%; min-height: auto
  }
}