.main-visual  { width: 100%; height: 100vh; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 59.88%, rgba(0, 0, 0, 0.4) 100%); padding-top: 150px;}
.main-visual .swiper { width: 100%; height: 100%;}
.main-visual .swiper-slide { width: 100%; height: 100%; display: flex; align-items: flex-end;}
.main-visual .pagination { position: absolute; right: 80px; bottom: 86px; z-index: 2; width: max-content; left: auto; gap: 6px;}
.main-visual .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.4); width: 12px; height: 12px;}
.main-visual .swiper-pagination-bullet-active { background-color: #fff;}
.main-visual .visual-img { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;}
.main-visual .visual-img > div { width: 100%; height: 100%;}
.main-visual .visual-img img { width: 100%; height: 100%; object-fit: cover;}
.main-visual .visual-text { color: #fff; padding: 76px 80px;}
.main-visual .visual-label { font-weight: 500; font-size: 28px; margin-bottom: 10px;}
.main-visual .visual-title { font-weight: 600; font-size: 40px; line-height: 1.4;}
@media screen and (max-width: 1024px) {
  .main-visual { padding-top: 80px; height: 80vh;}
  .main-visual .visual-text { padding: 70px 30px;}
  .main-visual .visual-title { font-size: 30px;}
  .main-visual .visual-label { font-size: 20px;}
}
@media screen and (max-width: 767px) {
  .main-visual .visual-text { padding: 60px 20px;}
  .main-visual .visual-label { font-size: 16px;}
  .main-visual .visual-title { font-size: 24px;}
  .main-visual .pagination { right: auto; left: 20px; bottom: 40px;}
  .main-visual .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 !important;}
}

.main-magazine { position: relative;}
.main-magazine .magazine-wrap { padding: 0 40px; display: flex;}
.main-magazine .magazine-wrap .line.vertical { height: 130%; z-index: -1;}
.main-magazine .magazine-area { width: 50%;}
.main-magazine .magazine-area.right { display: flex;}
.main-magazine .magazine-area.right > div { width: 50%; padding: 323px 0 160px;}
.main-magazine .magazine-text { position: relative; padding: 200px 40px; display: flex; flex-direction: column; height: 100%;}
.main-magazine .magazine-text .heading { font-size: 86px; font-weight: bold; line-height: 1.4; margin-bottom: 16px;}
.main-magazine .magazine-text .text { font-size: 24px; font-weight: bold;}
.main-magazine .magazine-text .magazine-desc { font-size: 20px; color: #666; margin-top: auto; padding-left: 50px;}
.main-magazine .magazine-category li { position: relative; border-bottom: 1px solid rgba(237, 237, 237, 1);}
.main-magazine .magazine-category li a { padding: 26px 40px; font-size: 32px; display: block;}
.main-magazine .magazine-category li:after { content: ''; display: block; position: absolute; top: 50%; right: 28px; width: 28px; height: 28px; background: url(/images/ico-arrow-white.svg) no-repeat center/auto 100%; opacity: 0; transform: translateY(-50%);}
.main-magazine .magazine-category li:first-child { border-top: 1px solid rgba(237, 237, 237, 1);}
.main-magazine .magazine-area.right > div.magazine-imgs { padding: 323px 65px 160px; position: relative;}
.main-magazine .magazine-img { opacity: 0; visibility: hidden; height: 0;}
.main-magazine .magazine-img a { display: block; height: inherit;}
.main-magazine .magazine-img figure { padding-bottom: 129%; margin-bottom: 20px;}
.main-magazine .magazine-img .img-label { color: #666; }
@media screen and (max-width: 1024px) {
  .main-magazine .magazine-wrap { flex-wrap: wrap; padding: 0 30px;}
  .main-magazine .magazine-area { width: 100%;}
  .main-magazine .magazine-text { padding: 100px 0;}
  .main-magazine .magazine-text .heading { font-size: 60px; margin-bottom: 20px;}
  .main-magazine .magazine-text .text { margin-bottom: 15px;}
  .main-magazine .magazine-area.right > div { padding: 30px 0;}
  .main-magazine .magazine-area.right > div.magazine-imgs { padding: 30px;}
  .main-magazine .magazine-category li a { padding: 20px 40px; font-size: 24px;}
  .main-magazine .magazine-wrap .line.vertical { height: 100%;}
}
@media screen and (max-width: 767px) {
  .main-magazine .magazine-wrap { padding: 0 20px;}
  .main-magazine .magazine-text { padding: 60px 0;}
  .main-magazine .magazine-text .heading { font-size: 30px;}
  .main-magazine .magazine-text .magazine-desc { padding: 0px;}
  .main-magazine .magazine-text .text { font-size: 20px;}
  .main-magazine .magazine-text .magazine-desc { font-size: 16px;}
  .main-magazine .magazine-wrap .line.vertical { display: none;}
  .main-magazine .magazine-area.right { flex-wrap: wrap;}
  .main-magazine .magazine-area.right > div { padding: 0; width: 100%;}
  .main-magazine .magazine-category li a { font-size: 18px; padding: 10px 20px;}
  .main-magazine .magazine-category li:after { right: 10px;}
  .main-magazine .magazine-area.right > div.magazine-imgs { padding: 0;}
  .main-magazine .magazine-img figure { padding-bottom: 70%; margin-top: 20px;}
}

.magazine-category li.active { background: #000; color: #fff;}
.magazine-category li.active:after { opacity: 1;}
.magazine-img.active { opacity: 1; visibility: visible; y: 0; height: 100%; transition: opacity 0.5s ease-in-out;}

.main-articles { padding: 40px 0 180px;}
.main-articles .inner { position: relative;}
.main-articles .articles-top { margin-bottom: 60px; position: absolute; top: 0; left: 80px;}
.main-articles .heading { margin-bottom: 20px;}
.main-articles .articles-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 120px 74px;}
.main-articles .articles-item { position: relative;}
.main-articles .articles-item:nth-child(1) { width: 25.8%; top: 260px;}
.main-articles .articles-item:nth-child(2) { width: 25.8%; top: 130px;}
.main-articles .articles-item:nth-child(4) { width: 25.8%; top: 130px;}
.main-articles .articles-item:nth-child(6) { width: 25.8%;}
.main-articles .articles-item:nth-child(3),
.main-articles .articles-item:nth-child(5) { flex-grow: 1; width: 30%;}
.main-articles .articles-list figure { padding-bottom: 142.3%; margin-bottom: 32px;}
.main-articles .articles-list .articles-sbj { font-size: 24px; margin-bottom: 24px;}
.main-articles .articles-list dl { display: flex; align-items: center;}
.main-articles .articles-list .articles-label { font-weight: 500;}
.main-articles .articles-list .articles-date { position: relative; padding-left: 20px; color: #999;}
.main-articles .articles-list .articles-date::before { content: ''; display: block; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 1px; height: 10px; background: #D9D9D9;}
.main-articles .articles-item:nth-child(3) .articles-sbj,
.main-articles .articles-item:nth-child(5) .articles-sbj { font-size: 34px;}
@media screen and (max-width: 1024px) {
  .main-articles { padding: 100px 0;}
  .main-articles .articles-top { left: 30px;}
  .main-articles .articles-list { gap: 60px 20px;}
  .main-articles .articles-list .articles-sbj { font-size: 20px;}
  .main-articles .articles-item:nth-child(3) .articles-sbj, .main-articles .articles-item:nth-child(5) .articles-sbj { font-size: 20px;}
}
@media screen and (max-width: 767px) {
  .main-articles { padding: 0 0 60px;}
  .main-articles .articles-list { gap: 30px 10px;}
  .main-articles .articles-item { width: calc(50% - 5px) !important; top: 0 !important;}
  .main-articles .articles-list figure { padding-bottom: 100%; margin-bottom: 20px;}
  .main-articles .articles-list .articles-sbj { font-size: 16px !important;}
}

.main-teachers { height: 100vh;}
.main-teachers .sticky { display: flex; align-items: center; height: 100vh; top: 0; overflow: hidden;}
.main-teachers .teachers-title { width: 40.4%; height: 100%; padding: 60px 80px; flex-shrink: 0;}
.main-teachers .teachers-title .heading { margin-bottom: 20px;}
.main-teachers .teachers-title .text { font-size: 20px; color: #666;}
.main-teachers .teachers-wrap { width: auto; overflow: hidden; display: flex; flex-shrink: 0; height: 100%; align-items: center;}
.main-teachers .teachers-list {  width: 100%;}
.main-teachers .teachers-item { width: 44vw; max-height: 95%; height: 100%; position: relative; flex-shrink: 0;}
.main-teachers .teachers-item .bg { height: 100%;}
.main-teachers .teachers-item img { display: block; position: relative; z-index: -1; height: 100%; width: 100%; object-fit: cover;}
.main-teachers .teachers-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 60px 3.13vw 40px; color: #fff;}
.main-teachers .teachers-text .teachers-num { font-size: 40px; font-weight: 500; margin-bottom: auto;}
.main-teachers .teachers-text .teachers-label { margin-bottom: 10px;}
.main-teachers .teachers-text .teachers-sbj { margin-bottom: 30px;}
.main-teachers .teachers-text .teachers-date { color: rgba(255, 255, 255, 0.6);}
@media screen and (max-width: 1024px) {
  .main-teachers { height: auto;}
  .main-teachers .sticky { flex-wrap : wrap; height: auto;}
  .main-teachers .teachers-wrap { width: 100%; padding: 0 30px;}
  .main-teachers .teachers-title { width: 100%; padding: 60px 30px;}
  .main-teachers .teachers-item { height: auto;; width: auto;}
  .main-teachers .teachers-text { padding: 30px;}
  .main-teachers .teachers-text .teachers-sbj { font-size: 20px;}
}
@media screen and (max-width: 767px) {
  .main-teachers .teachers-title { padding: 60px 20px 30px;}
  .main-teachers .teachers-title .text { font-size: 16px;}
  .main-articles .articles-top { position: static;}
  .main-teachers .teachers-text { padding: 20px;}
  .main-teachers .teachers-text .teachers-num { font-size: 30px;}
  .main-teachers .teachers-text .teachers-sbj { font-size: 18px;}
}

.main-news { padding: 160px 0;}
.main-news .heading { margin-bottom: 20px; line-height: 1.2;}
.main-news .view-more { margin-top: 40px; }
.main-news .news-wrap { display: flex;}
.main-news .news-area { width: 50%;}
.main-news .news-list li a { display: block; padding: 40px 0 28px;}
.main-news .news-list li .news-label { font-weight: 500;}
.main-news .news-list li .news-sbj { font-size: 34px; font-weight: bold; margin-bottom: 40px; margin-top: 8px;}
.main-news .news-list li .news-date { color: #999;}
.main-news .news-list li:first-child a { padding-top: 0;}
.main-news .news-list li:not(:first-child) a { border-top: 1px solid #ddd;}
@media screen and (max-width: 1024px) {
  .main-news { padding: 100px 0;}
  .main-news .news-wrap { flex-wrap: wrap;}
  .main-news .news-area  { width: 100%;}
  .main-news .news-list li .news-sbj { font-size: 24px;}
}
@media screen and (max-width: 767px) {
  .main-news { padding: 60px 0;}
  .main-news .news-list { margin-top: 30px;}
  .main-news .news-list li .news-sbj { font-size: 18px; margin-bottom: 25px;}
  .main-news .news-list li a { padding: 20px 0;}
}
