main section {position: relative;padding: 3.75rem 0 2.5rem;}
.main-section01 {padding: 2.5rem 0;}
.main-section01 .textBox h1 {font-size: 1.63rem;}
.main-section01 .textBox .notice {margin-top: 2.5rem;}
.main-section01 .textBox .notice h5 {line-height: 175%;}
.main-section01 .textBox .notice ul {margin-bottom: 2.5rem;}
.hanaschool .sub-title {color: #fff;text-align: center;}
.hanaschool .sub-title .tag-wrap {display: block;text-align: left;}
.hanaschool .sub-title .tag-wrap .tag {display: block;margin: 0 2rem;font-size: 18px;font-weight: 700;}
.hanaschool .sub-title .tag-wrap .tag::before {color: #fff;}

.main-section02,.main-section03,.main-section04,.main-section05,.main-section06,.main-section08 {background: #000;}
/* main section1 */
.main-banner {list-style: none;padding: 0;}
.main-banner > li {position: relative;font-size: 0;}
.main-banner > li > div {aspect-ratio: 336 / 290;}
.main-banner > li > a {display: inline-block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;font-size: 0;}
/* notice */
.notice h5 {position: relative;}
.notice h5 a {position: absolute; right: 0;top: 0; font-size: 16px;}
.notice ul {list-style: none;padding: 1rem 0 0;border-top: 1px solid #000;}
.notice ul li {width: 100%;margin-bottom: .25rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 1rem;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 20px !important;}
.banner-slider .swiper-pagination-bullet{background: #fff; opacity: 1;}
.banner-slider .swiper-pagination-bullet-active {background: #7BFFA3;}
.banner-slider .swiper-button-next,.banner-slider .swiper-button-prev {color: #7BFFA3;}
@media (min-width: 768px)  {
    main section {padding: 5rem 0;}
    .hanaschool .sub-title .tag-wrap{display: flex;justify-content: center;}
    .main-section01 {padding: 3rem 0;}
    .main-section01 .container {display: flex;justify-content: space-between;align-items: center;}
    .main-section01 .textBox {width: 45%;}
    .main-section01 .textBox h1 {font-size: calc(1.375rem + 1.5vw);}
    .main-section01 .textBox .notice {margin-top: 0;}
    .main-section01 .textBox .notice h5 {line-height: 1.2;}
    .main-section01 .banner-slider {width: 50%;margin-right: 0;}
}
@media (min-width: 1200px)  {
    .main-section01 .textBox h1 {font-size: 2.5rem;}
}

/* main-section03 */
.main-section03-nav {display: grid;grid-template-columns: repeat(1,1fr);grid-gap: 3%;margin: 0 auto 1rem;}
.main-section03-nav > span {display: inline-block;width: 100%;padding: .8rem 1rem;background: #ffb400;text-align: center;line-height: 1;color: #000;transition: background-color .3s;cursor: pointer;}
.main-section03-nav > span:hover,
.main-section03-nav > span.active{background: #ff5000;transition: background-color .3s;}
.main-section03-con {height: 500px;transition: background .3s;}
.main-section03-con > div {display: none;padding: 60px 12px;color: #fff;}
.main-section03-con > div.active {display: block;}
.main-section03-con > div h3 {margin-bottom: 36px;font-size: 35px;}
.main-section03-con0 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.hana-edu.co.kr/hanaschool/bg_main02.jpg') no-repeat center center;background-size: cover;}
.main-section03-con1 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.hana-edu.co.kr/hanaschool/bg_main03.jpg') no-repeat center center;background-size: cover;}
.main-section03-con2 {background: url('https://s3.ap-northeast-2.amazonaws.com/img.hana-edu.co.kr/hanaschool/bg_main04.png') no-repeat center center;background-size: cover;}

@media (min-width: 768px) {
    .main-section03-nav {grid-template-columns: repeat(3,1fr);width: 80%;}
    .main-section03-con > div > div {width: 50%;}
}
/* main-section04 */
.main-section04 {width: 99vw; overflow: hidden;}
.main-section04 .container {padding-bottom: 0;}
.main-section04-con {max-width: 100vw;width: 100%;}
.main-section04-con .faculty-list {list-style: none;padding: 0;}
.main-section04-con .slick-prev,
.main-section04-con .slick-next {display: inline-block;position: absolute;top: 50%;left: 10%;transform: translateY(-50%);font-size: 1.5rem;color: #fff;background: #999;border: none;z-index: 10;}
.main-section04-con .slick-next {right: 10%;left: auto;}
.slick-dots {display: none;}
.main-section04-con .slick-prev::before,
.main-section04-con .slick-next::before {display: none;}
.main-section04-con .faculty-list li {padding:0 1rem;}
.main-section04-con .faculty-list .image {display: inline-block;width: 100%;height: 100%; aspect-ratio: 350 / 263; margin-bottom: .5rem;}
.main-section04-con .faculty-list .image img {width: 100%;height: 100%;}
.main-section04-con .faculty-list .textBox {text-align: left;color: #fff;}
.main-section04-con .faculty-list .textBox h3 {font-weight: 400;}

/* main-section05 */
.main-section05 {color: #fff;}
.main-section05 ul {
    list-style: none;
    padding: 0;
}
.main-section05-con {
    max-width: 800px;
    margin: 0 auto 16px;
}
.main-section05-con .youtube-wrap {
    margin-bottom: 12px;
}
.main-section05-con h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}
.main-section05-con h3 p small {
    font-size: 15px;
}

.main-section05-nav ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 8px;
    max-width: 800px;
    margin: 0 auto;
}
.main-section05-nav img {
    width: 100%;
    cursor: pointer;
}
.main-section05-nav h3 {
    display: none;
}
.main-section05-nav p {
    display: none;
}
@media (min-width: 768px) {
    .main-section05-con h3 {
        font-size: 22px;
        font-weight: 700;
    }
    .main-section05-con h3 p small {
        font-size: 18px;
    }
    .main-section05-nav ul {
        grid-gap: 24px;
    }
}


/* main-section07 */
.main-section07 {text-align: center;font-size: 16px;}
.main-section07 img {height: 66px;}
@media (min-width: 768px) {
    .main-section07 {font-size: 26px;}
}

/* main-section08 */
.main-section08 .container {padding: 0 1.25rem;}
.main-section08 .sub-title {margin-bottom: 1.5rem;letter-spacing: -.5px;}
.main-section08 .sub-title h2 {line-height: 127%;}
.main-section08 .sub-title p {margin-bottom: 0;line-height: 132%;}
.main-section08 .list-why {display: grid;gap: 1rem; margin: 0;padding: 0;}
.main-section08 .list-why > li {padding: 1rem;background-color: #fff;border: 1px solid #E4E8F1;border-radius: 12px;list-style: none;}
.main-section08 .list-why .tagText {display: inline-block;padding: 0 3px;border-radius: 4px;background-color: #FC1D01;font-size: .875rem;font-style: normal;font-weight: 700;line-height: 157%;vertical-align: top;color: #fff;}
.main-section08 .list-why h3 {margin: .4rem 0 .5rem;font-size: 1.13rem;font-weight: 600;line-height: 150%;letter-spacing: -1px;color: #000;}
.main-section08 .list-why h3 strong {font-weight: 600;color: #FC1D01;}
.main-section08 .list-why .text {margin: 0;letter-spacing: -1px;color: #333;}
@media (min-width: 576px) {
    .main-section08 .container {padding: 0;}
}
@media (min-width: 769px) {
    .main-section08 .sub-title {margin-bottom: 2.5rem;letter-spacing: normal;}
    .main-section08 .sub-title h2 {line-height: 150%;}
    .main-section08 .sub-title p {line-height: 150%;}
    .main-section08 .list-why {max-width: 1048px;margin: 0 auto;grid-template-columns: repeat(2,1fr);gap: 1.5rem;}
    .main-section08 .list-why > li {padding: 1.5rem;border-radius: 12px;}
    .main-section08 .list-why .tagText {padding: 0 6px;font-size: 1rem;line-height: 150%;}
    .main-section08 .list-why h3 {margin: .5rem 0;font-size: 1.25rem;letter-spacing: normal;}
    .main-section08 .list-why .text {letter-spacing: normal;}
}
/* 팝업 */
[class*=ui-layout] {position:relative;display:inline-block;width:2rem;height:2rem;background:url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/sp-ui-kit-x2.png) no-repeat;background-position:0 0;background-size:19.5rem;font-size:0;line-height:0;text-indent:-999px;vertical-align:middle;overflow:hidden;}
.ui-layout-close {background-position:0 -3rem;}
.area-layer-popup-fixbody {display:none;position:fixed;top:0;left:0;width:100%;height:100%;overflow-y:scroll;background:rgba(0,0,0,0.7);z-index:100;}
.area-layer-popup {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:100;}
.area-layer-popup.open {display:block;}
.area-layer-popup .small-popup {width: 28%;}

@media (min-width: 768px) {
    .pc body.fixed {margin-right:17px;}
    .pc body.fixed:before {content:'';display:block;width:17px;height:100%;positoin:absolute;top:0;right:0;background:#ccc;}
    .pc body.fixed .layout-aside {margin-right:17px;}
}
@media (min-width: 320px) and (max-width: 480px) {
    .area-layer-popup .small-popup {width: 60%;}
}

.london .popup-container {max-width:40rem;}
.popup-container {position:absolute;top:50%;left:50%;width:90%;max-width:36rem;/*margin:4rem 0;*/transform:translate(-50%, -50%);background:#fff;}
.main-popup {

}
.main-popup .popup-content {
    width:100%;
}
.main-popup .popup-content > div{
    position: relative;
}
.main-popup .popup-all-close-x {
    position: absolute;
    right: 0;
    bottom: 100%;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.popup-container .popup-content{font-size:.8rem;}
.popup-content {padding:1.5rem;box-sizing:border-box;}
.popup-sample .small-popup .popup-content{font-size:1rem;}

.popup-slider {position:absolute;top:50%;left:50%;width:90%;max-width:22rem;transform:translate(-50%, -50%);background:#fff;visibility:hidden;opacity:0;}
.popup-slider .popup-content {padding:0;}
.popup-slider .bx-controls-direction {display:none;}
.popup-slider .bx-pager .bx-pager-item a {width:.55rem;height:.55rem;}

.popup-title {position:relative;min-height:4rem;box-sizing:border-box;border-bottom:1px solid #c5c5c5;}
.popup-title .heading-text:only-child {position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);box-sizing:border-box;padding:1rem;font-size:1.1rem;font-weight:400;}
.popup-close-x {position:absolute;top:0;right:0;padding:1rem;cursor:pointer;}
.popup-container .popup-close {position:absolute;top:0;right:0;padding:1rem;cursor:pointer;}
.popup-condition-wrap {display:flex;}
.popup-condition-wrap [class^=popup-] {flex:auto;border:1px solid #ccc;padding:1rem 0;font-size:.9rem;}
.popup-condition-wrap [class^=popup-] ~ [class^=popup-] {border-left:none;}
.popup-condition-wrap .popup-close {}
.popup-condition-wrap .popup-slider-auto:before {content:'';position:relative;display:inline-block;width:1rem;height:1rem;background:url(https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/common/sp-ui-kit-x2.png) no-repeat;background-position:-8rem -6rem;background-size:19.5rem;font-size:0;line-height:0;text-indent:-999px;vertical-align:middle;overflow:hidden;}
.popup-condition-wrap .popup-slider-auto.stop:before {background-position:-8rem -5rem;}
.review .popup-title .heading-text {padding-right:1.5rem;}