@charset "utf-8";

/* 공통 폰트 */
.title {font-family: var(--gm);font-size: 50px;font-weight: 700;color: var(--black);}
.small-title {font-weight: 500;font-size: 18px;color: #aaa;margin-bottom: 14px;text-transform: capitalize;letter-spacing: 0;}

/* main visual */
.main-visual {margin: 0 40px;background: url('../img/main_visual_bg.png') no-repeat;background-size: cover; border-radius: 30px;}
.main-visual .inner {padding: 100px 0 150px;text-align: center;}
.main-visual .title {line-height: 1.3;}
.main-visual .title strong {background: linear-gradient(90deg, #600f21 0%, #440b17 100%);background-clip: text;-webkit-background-clip: text;color: transparent;}
.main-visual .visual-title p {font-size: 25px;margin-top: 32px;}
.main-visual .visual-box {display: flex;gap: 20px;margin-top: 80px;}
.main-visual .visual-box .box-big {width: calc((100% - 40px) * 0.6);border-radius: 30px;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .15);}
.main-visual .visual-box .box {width: calc((100% - 40px) * 0.2);border-radius: 30px;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .15);}

.banner-slider {height: 385px;position: relative;border-radius: 30px;overflow: hidden;}
.banner-slider .swiper-slide {background-repeat: no-repeat;background-size: cover;border-radius: 30px;overflow: hidden;}
.banner-slider .banner1 {background-image: url('../img/banner_1.png');}
.banner-slider .banner2 {background-image: url('../img/banner_2.png');}
.banner-slider .banner3 {background-image: url('../img/banner_3.png');}
.banner-slider .banner4 {background-image: url('../img/banner_4.png');}
.banner-slider .banner5 {background-image: url('../img/banner_5.png');}
.banner-text {background-color: rgba(20, 15, 96, .9);width: 40%;height: 100%;position: absolute;right: 0;top: 0;border-top-left-radius: 30px;backdrop-filter: blur(4px);color: var(--white);text-align: center;padding: 70px 40px;}
.banner-text h6 {font-family: var(--sc);font-size: 35px;font-weight: 300;}
.banner-text h6 strong {font-size: 40px;font-weight: 800;}
.banner-text p {font-weight: 600;font-size: 22px;margin-top: 24px;}
.banner-text a {display: block;width: 180px;background: var(--white);padding: 15px;color: var(--dgray);font-size: 18px;font-weight: 600;margin: 30px auto 0;border-radius: 10px;}
.banner-button {display: flex;gap: 10px;align-items: center;line-height: 1;justify-content: center;position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);z-index: 1;}
.banner-button > a {font-size: 14px;color: var(--brand2);cursor: pointer;}
.banner-pagination .swiper-pagination-bullet {background: var(--black);width: 10px;height: 10px;opacity: 1;margin: 0 5px;}
.banner-pagination .swiper-pagination-bullet-active {background: var(--brand2);}

.main-visual .visual-box .box a {padding: 40px;text-align: left;height: 100%;}
.main-visual .visual-box .box h6 {font-family: var(--sc);font-weight: 300;font-size: 30px;line-height: 1.4;}
.main-visual .visual-box .box h6 strong {font-weight: 800;}
.main-visual .visual-box .box p {font-family: var(--sc);margin-top: 8px;opacity: .5;text-transform: uppercase;font-weight: 500;letter-spacing: 0;line-height: 1.3;}
.main-visual .visual-box .box-a {background: #0017A7 url('../img/banner_a_bg.png') no-repeat center bottom;background-size: contain;color: var(--white);}
.main-visual .visual-box .box-a a {display: block;}
.main-visual .visual-box .box-b {background: var(--brand);color: var(--white);}
.main-visual .visual-box .box-b a {display: flex;flex-direction: column;justify-content: space-between;}
.main-visual .visual-box .box-b .second {text-align: right;}
.main-visual .visual-box .box-b .second p {text-transform: none;opacity: .6;font-size: 15px;}


/* main support */
.main-support {box-shadow: inset 0 -.55px 0 var(--line-gray);padding: 60px 0;margin: 0 40px;}
.main-support .inner {display: flex;}
.main-support .inner article {width: calc(100% / 6);}
.main-support .inner article a {display: flex;align-items: center;gap: 15px;}
.main-support .inner article .icon {width: 60px;height: 60px;text-align: center;background: #EAE1E1;color: #B38D94;border-radius: 20px; transition: all .3s;}
.main-support .inner article .icon i {font-size: 25px;line-height: 60px;}
.main-support .inner article a:hover .icon {background: var(--brand);color: var(--white);}
.main-support .inner article .text h4 {font-size: 20px;font-weight: 500;color: var(--black);}
.main-support .inner article .text p {font-size: 13px;color: #aaa;letter-spacing: 0;text-transform: capitalize;}


/* main classroom */
.main-classroom {padding: 120px 0;background: #fff url('../img/community_bg.png') no-repeat top right;}
.main-classroom .top {display: flex;align-items: flex-end;justify-content: space-between;}
.main-classroom .top .btn-more {display: block;font-size: 18px;color: #505050;padding: 13px 15px;background: var(--white);border: 1px solid #e5e5ec;border-radius: 100px;transition: all .3s;line-height: 1;}
.main-classroom .top .btn-more:hover {color: var(--black);border-color: var(--black);font-weight: 600;}
.main-classroom .bottom {margin-top: 50px;}
.main-classroom .bottom .content-list {display: none;}
.main-classroom .bottom .content-list.on {display: flex;flex-wrap: wrap;gap: 20px;}
.main-classroom .bottom .content-list li {background: #f8f8f8;width: calc((100% - 80px) / 5);border-radius: 20px;transition: all .3s ease;}
.main-classroom .bottom .content-list li:hover {box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);}
.main-classroom .bottom .content-list li a {display: block;padding: 40px;}
.main-classroom .bottom .content-list .cate {border-radius: 3px;padding: 8px;color: var(--white);width: fit-content;font-weight: 500;font-size: 13px;line-height: 1;}
.main-classroom .bottom .content-list .cate.cate-a {background: var(--brand);}
.main-classroom .bottom .content-list .cate.cate-b {background: #33973C;}
.main-classroom .bottom .content-list .cate.cate-c {background: #565656;}
.main-classroom .bottom .content-list h5 {font-weight: 600;font-size: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: var(--black);line-height: 1.3;/*margin-top: 15px;*/min-height: 52px;}
.main-classroom .bottom .content-list .date {font-size: 14px;color: #aaa;margin-top: 30px;}


/* main board */
.main-board {padding: 120px 0;background: #fff url('../img/community_bg.png') no-repeat top right;box-shadow: inset 0 -.55px 0 0 var(--line-gray);margin: 0 40px;}
.main-board .inner {padding: 0;}
.main-board .top {display: flex;align-items: flex-end;justify-content: space-between;}
.main-board .top .cate-list {display: flex;gap: 8px;}
.main-board .top .cate-list li a {display: block;font-size: 18px;color: #505050;padding: 13px 15px;background: var(--white);border: 1px solid #e5e5ec;border-radius: 100px;transition: all .3s;line-height: 1;}
.main-board .top .cate-list li.on a, .main-board .top .cate-list li:hover a {color: var(--black);border-color: var(--black);font-weight: 600;}
.main-board .top .cate-list li:hover a {transition: all .3s;}
.main-board .bottom {margin-top: 50px;min-height: 470px;}
.main-board .bottom .content-list {display: none;}
.main-board .bottom .content-list.on {display: flex;flex-wrap: wrap;gap: 20px;}
.main-board .bottom .content-list li {background: #f8f8f8;width: calc((100% - 60px) / 4);border-radius: 20px;transition: all .3s ease;}
.main-board .bottom .content-list li:hover {box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);}
.main-board .bottom .content-list li a {display: block;padding: 40px;}
.main-board .bottom .content-list .cate {border-radius: 3px;padding: 8px;color: var(--white);width: fit-content;font-weight: 500;font-size: 13px;line-height: 1;}
.main-board .bottom .content-list .cate.cate-a {background: var(--brand);}
.main-board .bottom .content-list .cate.cate-b {background: #33973C;}
.main-board .bottom .content-list .cate.cate-c {background: #565656;}
.main-board .bottom .content-list h5 {font-weight: 600;font-size: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: var(--black);line-height: 1.3;margin-top: 15px;}
.main-board .bottom .content-list .date {font-size: 14px;color: #aaa;margin-top: 30px;}


/* main program */
.main-program {margin: 0 40px;padding: 120px 0;background: url('../img/program_bg.png') no-repeat;background-size: cover;border-radius: 30px;}
.main-program > article:not(.second) {margin-left: 155px;margin-right: 155px;}

.main-program .first {display: flex;align-items: flex-end;justify-content: space-between;}
.main-program .first .title {color: var(--white);}
.main-program .first .small-title {color: var(--white);opacity: .5;}
.main-program .first .p-cate-list {display: flex;gap: 8px;}
.main-program .first .p-cate-list li a {display: block;font-size: 18px;color: var(--white);padding: 13px 15px;border: 1px solid var(--white);border-radius: 100px;opacity: .7;transition: all .3s;line-height: 1;}
.main-program .first .p-cate-list li.on a, .main-program .first .p-cate-list li:hover a {font-weight: 600;opacity: 1;}
.main-program .first .p-cate-list li:hover a {transition: all .3s;}

.main-program .second {margin-top: 50px;}
.program-slider {height: 460px;}
.program-slider .swiper-slide {height: 100%;width: 360px;}
.program-slider .swiper-slide a {display: block;width: 100%;height: 100%;border-radius: 0 50px 0 50px;border: 6px solid transparent;transition: all .3s;overflow: hidden;}
.program-slider .swiper-slide a:hover {border: 6px solid rgba(255, 255, 255, .3);}
.program-slider .swiper-slide .text {padding: 40px;background-color: #fff;height: 317px;}
.program-slider .swiper-slide .image {filter: grayscale(100%);transition: all .3s;}
.program-slider .swiper-slide:hover .image {filter: grayscale(0);}
.program-slider .swiper-slide .image img {max-width: 100%;width: 100%;height: 100%;object-fit: none;}

.program-slider .swiper-slide span {font-weight: 600;color: var(--black);padding: 5px 10px;border: 1px solid var(--black);border-radius: 100px;width: fit-content;display: block;margin-left: auto;line-height: 1;}
.program-slider .swiper-slide h6 {font-weight: 700;color: var(--dgray);font-size: 28px;margin-top: 30px;}
.program-slider .swiper-slide p {font-size: 18px;margin-top: 16px;}
.program-slider .swiper-slide .icon {width: 35px;height: 35px;text-align: center;line-height: 35px;border-radius: 50%;border: 1px solid var(--brand);color: var(--brand);font-size: 14px;margin-top: 24px;transition: all .3s;}
.program-slider .swiper-slide:hover .icon {background: var(--brand);color: var(--white);}

.main-program .third {margin-top: 80px;}
.program-button {display: flex;gap: 10px;align-items: center;line-height: 1;justify-content: center;}
.program-button > a {cursor: pointer;font-size: 14px;color: var(--white);}
.program-pagination {text-align: left;font-size: 0;overflow: hidden;width: auto !important;}
.program-pagination .swiper-pagination-bullet {background: var(--white);width: 10px;height: 10px;opacity: .5;margin: 0 5px;}
.program-pagination .swiper-pagination-bullet-active {background: var(--white);opacity: 1;}


/* main photo */
.main-photo {padding: 90px 0;}
.main-photo .first {display: flex;justify-content: space-between;align-items: center;padding-bottom: 50px;border-bottom: 2px solid var(--black);}
.main-photo .first .btn-more {display: block;font-size: 18px;color: #505050;padding: 13px 15px;background: var(--white);border: 1px solid #e5e5ec;border-radius: 100px;transition: all .3s;line-height: 1;}
.main-photo .first .btn-more:hover {color: var(--black);border-color: var(--black);font-weight: 600;}

.main-photo .second {display: flex;}
.main-photo .second > article {box-shadow: inset 0 -.33px 0 var(--line-gray);padding: 54px 0 60px;}
.main-photo .second .left {width: 33.3333%;box-shadow: inset -.33px -.33px 0 var(--line-gray);padding-right: 60px;}
.main-photo .second .right {width: 66.6666%;padding-left: 60px;}

.main-photo .left .photo-item {height: 100%;}
.main-photo .left .photo-item a {display: flex;height: 100%;}
.main-photo .left .photo-item .txt-wrap {display: none;}

.main-photo .right .right-inner {width: 100%;display: flex;flex-wrap: wrap;gap: 20px 56px;}
.main-photo .right .photo-item {width: calc((100% - 56px) / 2);}
.main-photo .right .photo-item a {display: flex;gap: 30px;}
.main-photo .right .photo-item a > div {width: calc((100% - 30px) / 2);}

.photo-item .img-wrap {overflow: hidden;border-radius: 10px;}
.left .photo-item .img-wrap {max-height: 320px;}
.left .photo-item .img-wrap img {width: 100%;height: auto;object-fit: cover;transition: all .3s;}
.right .photo-item .img-wrap {height: 150px;}
.right .photo-item .img-wrap img {width: auto;height: 100%;object-fit: cover;transition: all .3s;}
.photo-item:hover .img-wrap img {transform: scale(1.1);}

.photo-item .txt-wrap h6 {font-weight: 500;font-size: 20px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: var(--black);line-height: 1.3;transition: all .3s;}
.photo-item .txt-wrap p.con {font-size: 18px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;line-height: 1.3;margin-top: 14px;}
.photo-item .txt-wrap p.date {font-size: 14px;color: #aaa;margin-top: 15px;}
.photo-item:hover .txt-wrap h6 {color: var(--brand);}


/* main partner */
.main-partner {background: #f6f6f6;}
.main-partner-slider .swiper-wrapper {transition-timing-function: linear;}
.main-partner-slider .swiper-slide {width: fit-content;height: auto;padding: 60px 0;}
.main-partner-slider .swiper-slide a {display: block;border-radius: 10px;box-shadow: 4px 4px 13px 0 #A5AAB630;overflow: hidden;}


/* main popup */
body.popup-on {overflow-y: hidden;}

#popupOpen {position: fixed;bottom: 50px;right: 50px;width: 100px;height: 100px;background: var(--brand);color: var(--white);z-index: 100;text-align: center;border-radius: 50%;cursor: pointer;box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .15);line-height: 1.5;font-size: 15px;}
#popupOpen .popup-total {color: yellow;}

#mainPopup {position: fixed;width: 100%;height: 100%;z-index: 110;top: 0;left: 0;overflow: hidden;background: rgba(0, 0, 0, 0.8);}
#mainPopup .inner {display: flex;justify-content: center;align-items: center;height: 100%;}
#mainPopup .title {color: var(--white);text-align: center;}
#mainPopup .small-title {color: var(--line-gray);}

#mainPopup .second {max-width: 760px;margin: 30px auto;position: relative;width: calc(100vw - 120px);}
.popup-slider {height: auto;}
.popup-slider .swiper-slide {width: fit-content;height: auto;}
.popup-slider .swiper-slide a {display: block;}
.popup-slider .swiper-slide a img {display: block;width: 100%;height: 100%;object-fit: cover;}
.popup-slider .swiper-button-next::after, .popup-slider .swiper-button-prev::after {display: none;}
.popup-slider-nav {position: absolute;top: 50%;left: 50%;display: flex;justify-content: space-between;z-index: 0;width: calc(100% + 100px);height: 2rem;transform: translate(-50%, -50%);max-width: 860px;}
.popup-slider-nav > button {cursor: pointer;width: 50px;height: 50px;}
.popup-slider-nav > button > i {color: var(--white);font-size: 20px;}

.popup-bottom-list {display: flex;justify-content: center;gap: 20px;flex-wrap: wrap;}
.popup-bottom-list li {font-size: 18px;color: var(--white);padding: 13px 15px;background: transparent;border: 1px solid #e5e5ec;border-radius: 100px;transition: all .3s ease;line-height: 1;}
.popup-bottom-list li:hover {background: var(--white);color: var(--brand);font-weight: bold;}
.popup-bottom-list li a {display: flex;gap: 8px;}


@media screen and (max-width: 1650px) {
    .main-visual .visual-box {max-width: 760px;flex-wrap: wrap;margin: 80px auto 0;}
    .main-visual .visual-box .box-big {width: 100%;}
    .banner-slider {height: 360px;}
    .banner-text {padding: 60px 40px;}
    .banner-text h6 {font-size: 27px;}
    .banner-text h6 strong {font-size: 32px;}
    .banner-text p {font-size: 18px;}
    .main-visual .visual-box .box {width: calc((100% - 20px) / 2);height: 300px;}
    .main-visual .visual-box .box-a {background-size: cover;}
    .main-visual .visual-box .box h6 {font-size: 26px;}

    .main-support .inner {padding: 0;}
}

@media screen and (max-width: 1440px) {
    .main-support .inner {flex-wrap: wrap;gap: 40px 20px;width: 80%;}
    .main-support .inner article {width: calc((100% - 40px) / 3);}
}

@media screen and (max-width: 1024px) {
    .main-visual .inner {padding: 100px 40px 120px;}
    .title {font-size: 46px;}
    .small-title {font-size: 16px;}
    .main-visual .visual-title p {font-size: 21px;margin-top: 28px;}
    .main-visual .visual-box {margin: 60px auto 0;}

    .main-classroom {padding: 100px 0;}
    .main-classroom .bottom {margin-top: 40px;}
    .main-classroom .bottom .content-list li {width: calc((100% - 20px) / 2);}
    .main-classroom .bottom .content-list h5 {-webkit-line-clamp: 1;min-height: 26px;}

    .main-board {padding: 100px 0;}
    .main-board .bottom {margin-top: 40px;}
    .main-board .bottom .content-list li {width: calc((100% - 20px) / 2);}
    .main-board .bottom .content-list h5 {-webkit-line-clamp: 1;}

    .main-program {padding: 100px 0;}
    .main-program > article:not(.second) {margin-left: 40px;margin-right: 40px;}
    
    .main-photo .second {flex-direction: column;}
    .main-photo .second > article {padding: 40px 0;}
    .main-photo .second .left {padding-right: 0;width: 100%;box-shadow: inset 0 -.33px 0 var(--line-gray);}
    
    .main-photo .second .right {padding-left: 0;width: 100%;box-shadow: inset 0 -.33px 0 var(--line-gray);}
    
    .main-photo .left .photo-item a {gap: 40px;align-items: center;}
    .main-photo .left .photo-item a > div {width: calc((100% - 40px) / 2);}
    .main-photo .left .photo-item {width: 100%;}
    .main-photo .left .photo-item .txt-wrap {display: block;}
    .main-photo .left .photo-item .img-wrap {height: 160px;}
    .main-photo .left .photo-item .img-wrap img {width: 100%;}
    
    .main-photo .right .right-inner {gap: 20px 40px;}
    .main-photo .right .photo-item {width: calc((100% - 40px) / 2);}
    .main-photo .right .photo-item a {gap: 20px;}
    .main-photo .right .photo-item a > div {width: calc((100% - 20px) / 2);}

    .main-program .third {margin-top: 40px;}
}

@media screen and (max-width: 900px) {
    .main-support .inner {width: 100%;}

    .main-program .second {margin-top: 40px;}
    
    .main-photo .second .left {box-shadow: none;border-bottom: 1px solid #e5e5ec;}
    .main-photo .second .right {box-shadow: none;border-bottom: 1px solid #e5e5ec;}
}

@media screen and (max-width: 768px) {
    .title {font-size: 42px;}
    .main-visual .visual-title p {font-size: 17px;margin-top: 24px;}
    .main-visual .visual-box {margin: 50px auto 0;max-width: none;}

    .banner-slider {height: 280px;}
    .banner-text {padding: 60px 20px;}
    .banner-text h6 {font-size: 19px;}
    .banner-text h6 strong {font-size: 24px;}
    .banner-text p {font-size: 14px;margin-top: 16px;}
    .banner-text a {width: fit-content;padding: 10px 15px;font-size: 14px;margin: 20px auto 0;}

    .main-visual .visual-box .box {height: 280px;}
    .main-visual .visual-box .box h6 {font-size: 20px;}
    .main-visual .visual-box .box p {font-size: 14px;}

    .main-program .first {flex-direction: column;align-items: flex-start;row-gap: 20px;}

    #popupOpen {bottom: 40px;right: 40px;}
}

@media screen and (max-width: 640px) {
    .main-visual, .main-support, .main-program {margin: 0 20px;} 

    .title {font-size: 36px;}
    
    .main-support .inner article {width: calc((100% - 20px) / 2);}
    
    .main-classroom .top {flex-direction: column;align-items: flex-start;gap: 20px;}
    .main-classroom .bottom .content-list li {width: 100%;}

    .main-board {margin: 0 20px;}
    .main-board .top {flex-direction: column;align-items: flex-start;gap: 20px;}
    .main-board .bottom .content-list li {width: 100%;}

    .main-photo .first {padding-bottom: 40px;}
    .main-photo .left .photo-item a {flex-direction: column;gap: 20px;}
    .main-photo .left .photo-item a > div {width: 100%;}
    .main-photo .right .photo-item {width: 100%;}
    .main-photo .right .photo-item a {align-items: center;}
}

@media screen and (max-width: 580px) {
    .main-visual .inner {padding: 80px 20px 100px;}
    .main-visual .visual-box .box {width: 100%;height: 160px;}
    .banner-text {width: 50%;}
    .main-visual .visual-box .box-a {background-position: right bottom;background-size: 50%;}
    .main-visual .visual-box .box-b a {flex-direction: row;align-items: flex-end;}
}

@media screen and (max-width: 490px) {
    .main-visual {background-position: center center;}
    .main-visual .inner {padding: 50px 20px;}
    .title {font-size: 31px;}
    .small-title {font-size: 14px;margin-bottom: 8px;}
    .main-visual .visual-title p {font-size: 17px;margin-top: 20px;}
    
    .banner-slider {height: 200px;}
    .banner-text {padding: 30px 20px;width: 60%;}
    .banner-text h6 {font-size: 17px;}
    .banner-text h6 strong {font-size: 17px;}
    .banner-text p {font-size: 14px;margin-top: 10px;}
    .banner-text a {margin: 10px auto 0;}
    .banner-button {bottom: 16px;}

    .main-visual .visual-box {margin: 30px auto 0;}
    .main-visual .visual-box .box {height: auto;}
    .main-visual .visual-box .box a {padding: 30px;}
    .main-visual .visual-box .box-b a {align-items: center;gap: 10px;}
    .main-visual .visual-box .box h6 {font-size: 17px;}
    
    .main-support {padding: 50px 0;}
    .main-support .inner {gap: 20px;}
    .main-support .inner article a {flex-direction: column;justify-content: center;text-align: center;gap: 10px;}
    .main-support .inner article .text h4 {font-size: 17px;}

    .main-classroom {padding: 50px 0;}
    .main-classroom .top .btn-more {font-size: 14px;padding: 10px 12px;}
    .main-classroom .bottom .content-list li a {padding: 30px;}
    .main-classroom .bottom .content-list h5 {font-size: 17px;/*margin-top: 10px;*/min-height: auto;}
    .main-classroom .bottom .content-list .cate {font-size: 11px;}
    .main-classroom .bottom .content-list .date {font-size: 12px;margin-top: 20px;}
    
    .main-board {padding: 50px 0;}
    .main-board .top .cate-list {flex-wrap: wrap;}
    .main-board .top .cate-list li a {font-size: 14px;padding: 10px 12px;}
    .main-board .bottom .content-list li a {padding: 30px;}
    .main-board .bottom .content-list h5 {font-size: 17px;margin-top: 10px;}
    .main-board .bottom .content-list .cate {font-size: 11px;}
    .main-board .bottom .content-list .date {font-size: 12px;margin-top: 20px;}
    
    .main-program {padding: 50px 0;}
    .main-program .first .p-cate-list {flex-wrap: wrap;}
    .main-program .first .p-cate-list li a {font-size: 14px;padding: 10px 12px;}
    .main-program .second {margin-top: 30px;}
    .program-slider {/*height: 380px;*/ height: auto;}
    .program-slider .swiper-slide .text {padding: 30px;height: 230px;}
    .program-slider .swiper-slide span {font-size: 11px;}
    .program-slider .swiper-slide h6 {font-size: 19px;margin-top: 20px;}
    .program-slider .swiper-slide p {font-size: 14px;margin-top: 10px;}
    .program-slider .swiper-slide .icon {margin-top: 10px;width: 28px;height: 28px;line-height: 28px;font-size: 11px;}
    .main-program .third {margin-top: 30px;}

    .main-photo {padding: 50px 0;}
    .main-photo .first {padding-bottom: 20px;align-items: flex-end;}
    .main-photo .first .btn-more {font-size: 14px;padding: 10px 12px;}
    .main-photo .second > article {padding: 20px 0;}
    .main-photo .right .right-inner {gap: 20px;}
    .main-photo .right .photo-item a {flex-direction: column;}
    .main-photo .right .photo-item a > div {width: 100%;}
    .main-photo .right .photo-item a .img-wrap {height: 160px;}
    .main-photo .right .photo-item a .img-wrap img {width: 100%;height: auto;max-width: 100%;}
    .photo-item .txt-wrap h6 {font-size: 17px;}
    .photo-item .txt-wrap p.con {font-size: 14px;margin-top: 10px;}
    .photo-item .txt-wrap p.date {font-size: 12px;margin-top: 10px;}

    .main-partner-slider .swiper-slide {padding: 30px 0;}
    .main-partner-slider .swiper-slide a {width: 120px;}

    #mainPopup .second {margin: 20px auto;}
    .popup-bottom-list {gap: 10px;}
    .popup-bottom-list li {font-size: 16px;}

    #popupOpen {right: 20px;width: 64px;height: 64px;line-height: 1.3;font-size: 12px;}
    #popupOpen span, #popupOpen br {display: none;}
}
@media screen and (max-width: 480px) {
    .main-visual .visual-box .box-b a {flex-direction: column;}
    .main-visual .visual-box .box-b a > div {width: 100%;}

    .main-program > article {margin-left: 30px !important;margin-right: 30px !important;}
}