@charset "utf-8";
main { width: 100%; height: 600px; background: url(../img/main/image1.jpg) no-repeat center 85%/cover; }

.intro h1 { margin-bottom: 50px; text-align: center; padding: 0 20px; }
.intro h1 a { display: block; }
.intro h1 a span { font-weight: 400; }
.intro h1 .mbr { display: none; }
.intro> div { display: flex; justify-content: space-between; align-items: center; }
.intro div .lefts { width: 48%; }
.intro div .lefts ul { display: flex; }
.intro div .lefts .top { margin-bottom: 60px; justify-content: space-between; }
.intro div .lefts .bottom { justify-content: space-evenly; }
.intro div .lefts ul li { display: flex; justify-content: center; align-items: center; width: 150px; aspect-ratio: 1/1; border-radius: 50%; }
.intro div .lefts ul li a { display: block; width: 100%; font-size: 24px; font-weight: 700; line-height: 1.5em; text-align: center; }
.intro div .lefts .top> :first-child { background: #DDE7ED; }
.intro div .lefts .top> :nth-child(2) { background: #DDE2ED; }
.intro div .lefts .top> :last-child { background: #DDECED; }
.intro div .lefts .bottom> :first-child { background: #DDDDED; }
.intro div .lefts .bottom> :last-child { background: #E2DDED; }
.intro div p { margin-right: 8%; width: 35%; font-size: 17px; line-height: 1.8em; }

.intro .counselbtn { display: block; margin: 0 auto 80px; width: fit-content; padding: 20px 30px; background: #17347D; animation: floaty 2s ease-in-out infinite; border: 2px solid rgba(23, 52, 125, 0); }
.intro .counselbtn:hover { animation: none; background: #FCFCFC; border: 2px solid rgba(23, 52, 125, 1); }
.intro .counselbtn:hover p { color: #17347D; font-weight: 500; }
.intro .counselbtn p { color: #fff; font-size: 20px; display: inline-block; margin-right: 30px;  }
.intro .counselbtn i { font-size: 20px; color: #fff; }
.intro .counselbtn:hover i { color: #17347D; }
@keyframes floaty {
  0%, 70%, 100% { transform: translateY(0); }
  80% { transform: translateY(-10px); }
}


.programs { background: #FCFCFC; }
.programs h1 { text-align: center; margin-bottom: 50px; }
.programs h1 span { font-weight: 400; }
.programs ul { display: flex; flex-wrap: wrap; }
.programs ul li { width: 50%; aspect-ratio: 2/1; color: #fff; }
.programs ul li a { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.programs ul li a::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); transition: 0.3s ease-in-out; }
.programs ul li a:hover::after { background: rgba(0, 0, 0, 0.4); }
.programs ul> :first-child { background: url(../img/main/image2.jpg) no-repeat center/cover; }
.programs ul> :nth-child(2) { background: url(../img/main/image3.jpg) no-repeat center/cover; }
.programs ul> :nth-child(3) { background: url(../img/main/image4.jpg) no-repeat center/cover; }
.programs ul> :last-child { background: url(../img/main/image5.jpg) no-repeat center/cover; }
.programs ul li span { display: block; font-size: 60px; font-weight: 600; line-height: 1.5em; color: #fff; opacity: 0.3; margin-bottom: 10px; z-index: 1; }
.programs ul li h2 { color: #fff; z-index: 1; text-align: center; width:100%; padding: 0 20px; }


.outro> div { display: flex; justify-content: space-between; }
.outro> div> div { width: calc(50% - 20px); }
.outro div .lefts div { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.outro div .lefts div a i { font-size: 15px; line-height: 1.5em; }
.outro div .lefts div a:hover { font-weight: 600; }
.outro div .lefts div a:hover i { transform: rotate(180deg); }
.outro div .lefts ul li a { display: flex; align-items: center; padding: 20px; width: 100%; border-bottom: 1px solid #999; }
.outro div .lefts ul li a span { flex-shrink: 0; width: 40px; height: 40px; background: #ddd; border-radius: 50%; font-size: 24px; font-weight: 600; line-height: 40px; margin-right: 30px; text-align: center; line-height: 40px;}
.outro div .rights { display: flex; flex-direction: column; }
.outro div .rights .imgbox { width: 100%; height: 100%; background: url(../img/main/image6.jpg) no-repeat center/cover; margin-bottom: 20px; }
.outro div .rights a { text-align: center; width: 100%; padding: 40px; background: #F3F5F9; border-radius: 20px; }
.outro div .rights a i { font-size: 40px; margin-bottom: 15px; }
.outro div .rights a p { font-size: 24px; font-weight: 600; }


footer { background: #333; padding: 50px 0; }
footer div .logo { display: block; width: 130px; margin-bottom: 40px; }
footer div .logo img { width: 100%; object-fit: cover;}
footer div .inner { display: flex; justify-content: space-between; align-items:  flex-end; }
footer div .inner .lefts { color: #9f9f9f;  }
footer div .inner .lefts> :first-child { margin-bottom: 40px; }
footer div .inner .lefts ul li a { color: #9f9f9f; }
footer div .inner> ul { display: flex; align-items: center; background: #FDFDFD; border-radius: 20px; padding: 20px 0; width: 48.571%; }
footer div .inner> ul> :first-child { border-right: 1px solid #999; }
footer div .inner> ul li { width: 50%; }
footer div .inner> ul li div { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
footer div .inner> ul li div span { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: rgba(153, 153, 153, 0.15); border-radius: 50%; margin-right: 15px; }
footer div .inner> ul li div span i { text-align: center; font-size: 24px; width: 100%; }
footer div .inner> ul li div span svg { width: 24px; height: 24px; }
footer div .inner> ul li div p { font-size: 24px; font-weight: 600; }
footer div .inner> ul li a { display: block; font-size: 18px; text-align: center; }
footer div .inner> ul> :first-child> :nth-child(2) { margin-bottom: 8px; }
footer div .inner> ul li> p { font-size: 18px; text-align: center; }


@media screen and (max-width: 1024px) {
    main { height: 450px; }

    .intro div .lefts { width: 47%; }
    .intro div .lefts ul li { width: 120px; }
    .intro div .lefts ul li a { font-size: 20px; }
    .intro div p { margin: 0; width: 50%; }

    .programs ul li a span { line-height: 1em; font-size: 50px; }

    .outro div .lefts ul li a { padding: 15px; }
    .outro div .lefts ul li a span { margin-right: 20px; }
    .outro div .rights a p { font-size: 20px; }

    footer div .inner> ul li div p { font-size: 20px; }
    footer div .inner> ul li a { font-size: 16px; }
    footer div .inner> ul li> p { font-size: 16px; }
}

@media screen and (max-width: 840px) {
    main { height: 400px; }

    .intro> div { flex-direction: column; }
    .intro div .lefts { width: 60%; margin-bottom: 40px; }
    .intro div .lefts ul li { width: 100px; }
    .intro div .lefts ul li a { font-size: 18px; }
    .intro div p { width: 100%; font-size: 15px; text-align: justify; }
    .intro div p br { display: none;}


    .programs ul li { aspect-ratio: 1.414/1; }
    .programs ul li a span { font-size: 32px; }

    .outro> div { flex-direction: column; }
    .outro> div> div { width: 100%; }
    .outro div .rights a { padding: 20px; }
    .outro div .rights a i { font-size: 32px; }

    footer div .logo { width: 100px; margin: 0 auto 30px; }
    footer div .inner { flex-direction: column-reverse; align-items: center; }
    footer div .inner .lefts { text-align: center; }
    footer div .inner> ul { width: 65%; margin-bottom: 30px; }
}

@media screen and (max-width: 600px) {
    .intro h1 { margin-bottom: 50px; }
    .intro h1 .mbr { display: block; }
    /* .intro> div { flex-direction: column; } */
    .intro div .lefts { width: 80%; }
    .intro div .lefts .top { margin-bottom: 30px; }
    .intro div .lefts ul li { width: 80px; }
    .intro div .lefts ul li a { font-size: 16px; }
    /* .intro p { width: 100%; } */
    /* .intro p br { display: none;} */

    .programs ul li { width: 100%; }
    .programs ul> :not(:last-child) { margin-bottom: 20px; }
    .programs ul li a span { font-size: 24px; }

    .outro div .lefts ul li a { padding: 15px 12px; }
    .outro div .lefts ul li a span { margin-right: 15px; width: 32px; height: 32px; line-height: 32px; font-size: 20px; }

    footer div .inner> ul { width: 80%; flex-direction: column; padding: 20px; }
    footer div .inner> ul li { width: 100%; }
    footer div .inner> ul> :first-child { padding-bottom: 10px; margin-bottom: 10px; border: none; }
    footer div .inner .lefts> :first-child { margin-bottom: 20px; }
}

@media screen and (max-width: 360px) {
    .intro h1 { font-size: 24px; }
    .intro div .lefts { width: 100%; }
}