/* =============================================================== */
/* ======================================================= Header  */
/* =============================================================== */
.gnb {position: fixed; width:100%; top:0; z-index: var(--header-z); background: var(--white); border-bottom: 1px solid #E0E0E0; transition: 0.2s;}

.gnb.on {background-color: transparent; border: 0;}
/* .main-page .gnb.on .link {color: var(--white);} */
.gnb.on .lng img{filter:brightness(5);}

/* GNB */
.gnb-wrap {padding:21px 0;}
.gnb-wrap .logo {width: auto; margin:0;}
.gnb-inner {display: flex; justify-content: space-between; align-items: center;  padding: var(--safe-padding); max-width: var(--max-width); margin:0 auto; }
.gnb-list {display: flex; gap:100px;}
.gnb-item.lng {margin-left: 58px; position: relative;}

.gnb-item .link {position: relative;}
.gnb-item .link:hover {color: #378186; font-weight: bold;}
.gnb-item .link::before {content: ''; display: block; position: absolute; width: 6px; height: 6px; background: transparent; border-radius: 100%; top: 50%; transform: translateY(-50%); left: -16px; }
.gnb-item .link:hover::before {background: #378186}

.gnb-item.on {color: var(--primary);}
.gnb-item.on .link {color: var(--primary); font-weight: bold}
.gnb-item.on .link::before {background: #378186}

.gnb-item.lng .langSlide {position: absolute; background: #fff; border: 1px solid #F0F0F0; border-radius: 5px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); padding: 20px; right: 0; width: 100px; top: 135%; display: none;}
.gnb-item.lng .langSlide li {}
.gnb-item.lng .langSlide li + li {margin-top: 20px}
.gnb-item.lng .langSlide li input {display: none}
.gnb-item.lng .langSlide li input + label {color: #888888; font-size: 16px; cursor: pointer;}
.gnb-item.lng .langSlide li input:checked + label {color: #378186; font-weight: bold;}

@media screen and (max-width: 768px) {
    .gnb-item.lng .langSlide {padding: 12px;}
    .gnb-item.lng .langSlide li + li {margin-top: 10px}
}


/* =============================================================== */
/* ==================================================== Float nav  */
/* =============================================================== */
.fixed-sns { position: fixed; right: 0%; top:50%; z-index: 1001; background: white; border-radius: 40px; transform: translate(-20px,-50%); box-shadow: 0px 5px 15px #3333331a; z-index: var(--fixed-menu);}
.fixed-list {display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 20px 8px;}
.fixed-item .link {display: flex; flex-direction: column; align-items: center;}
.fixed-item .title {color:#666666; font-size: 15px; text-align: center;}
.fixed-item .img {width:24px; filter: invert(48%) sepia(0%) saturate(30%) hue-rotate(171deg) brightness(91%) contrast(100%);}
.fixed-item .move-top .img {filter: none; width: auto;}
.fixed-item:hover .link:not(.move-top) .img {filter: invert(57%) sepia(17%) saturate(1200%) hue-rotate(136deg) brightness(86%) contrast(86%);}
.fixed-item:hover .title {color:var(--primary);}

/* =============================================================== */
/* ======================================================= Footer  */
/* =============================================================== */
.footer {background: #222222;}
.footer .section.footer-section {padding:50px 20px;}
.footer-item.top{display: flex; width: 100%; justify-content: space-between; align-items: center; padding-bottom: 20.5px; margin-bottom: 22.5px; border-bottom: 1px solid rgba(255,255,255,0.1);}
.footer-item.top .info-sns {display: flex; gap: 8px;}
/* 999999 */
.footer-item.bottom { color:var(--white);}
.footer-item.bottom .footer-info-text {color:#999999; margin-bottom: 30px;}
.footer-item.bottom .copyright {color:#CCCCCC;}


/* =============================================================== */
/* ===================================================== Main PAGE */
/* =============================================================== */

/* sub-banner-intro */
/* common */
.title-wrap { text-align: center; margin-bottom: 30px;}
.primary-title {font-size:20px; font-weight: bold; text-transform: uppercase; color: var(--secondary); }
.title-wrap .h3 {font-size: 35px; color: var(--text-primary); font-weight: bold; line-height: 50px;}
.description-text-wrap { text-align: center; font-size:18px;}
.description-text-wrap .description-text {font-size: inherit; font-weight: 300;}
.description-text-wrap .description-text:last-child {margin-top: 35px;}
.gnb {position: fixed;width:100%;}
.gnb.on .link {color:white;}
.section {padding-top: 150px;  padding-bottom: 150px;}
.section2 {padding-top:80px;  padding-bottom: 80px;}
.section.carousel {padding:0; max-width: 100%;}

.slick-wrap {position: relative;}
.main-carousel {height: 100vh}
.main-carousel .slick-list {height: 100%}
.main-carousel .slick-slide img {height: 100%; object-fit: cover;}
.main-carousel__controller { position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%); width: 100%;}
.main-carousel__controller--inner {max-width:1200px; width: 100%; padding: var(--safe-padding);max-width: var(--max-width); margin:0 auto;}

.controller__top {font-weight: bold; color: var(--white); margin-bottom: 96px;}
.controller__top .link {display: flex; align-items: center; gap:10px; color:inherit; margin-bottom: 19px;}
.controller__top .link-title {font-size:20px;}
.controller__top .icon {width:26px;}
.controller__top .description {font-size: 60px; line-height: 72px; font-weight: initial;}
.controller__top .description .strong {font-weight: bold; font-size: inherit; vertical-align: baseline;}

.controller__top.entop .description {line-height: 65px; font-size: 55px;}

.controller__bottom {display: flex; align-items: center; gap: 30px;}
.controller__bottom .custom-dots-list {display: flex; gap: 6px;}
.controller__bottom .custom-dot {display: inline-block; width: 82px; height: 4px;background: linear-gradient(to right, white 50%, #707070 50%);background-size: 200% 100%;background-position: bottom right;transition: all 2s ease-out;}
.controller__bottom .slick-active .custom-dot {animation: test 2s forwards; }
/* .controller__bottom .slick-active .custom-dot {background-position: bottom left; } */
.controller__bottom .slick-slider-nav {display: flex; align-items: center; gap: 20px;}

@keyframes test {
  0% {background-position: bottom right;}
  100% {background-position: bottom left;}
}

.map-wrap {width: 100%; height:100%; border-radius: 10px; overflow: hidden;}
.root_daum_roughmap .wrap_map {height: 100% !important;}


/* section - battery */
.primary-icon {width: 100%; max-width: 70px; margin-bottom: 12px;}
.battery .text-wrap {margin-bottom: 100px;}
.hover-box__list {display: flex; align-items: baseline; gap:39.5px;}
.hover-box__list--item {flex:1;}
.hover-box__list--item .img-box {aspect-ratio: 8/5; margin-bottom: 20px; border-radius: 10px; border: 3px solid transparent; border-style: inset; position: relative; transition: 0.4s;}
.hover-box__list--item .img-box .float-icon {width: 44px; position: absolute; left: 0; bottom: 0; transform: translate(-50%,45%);}
.hover-box__list--item.battery-01 .img-box {background:url('../img/main/battery-info-01.jpg'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center;}
.hover-box__list--item.battery-02 .img-box {background:url('../img/main/battery-info-02.jpg'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center;}
.hover-box__list--item.battery-03 .img-box {background:url('../img/main/battery-info-03.jpg'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center;}
.hover-box__list--item .img-box:hover {border: 3px solid var(--primary); background-size: 110% 110%;}
.hover-box__list--item .strong {font-weight: bold; vertical-align: baseline;}

.section.battery .more-link { display: flex; justify-content: center; align-items: center; margin-top: 100px}
.section.battery .more-link .link {border: 1px solid var(--text-link); background: var(--white); color:var(--text-link); font-weight: 300;}
.section.battery .more-link .link:hover {border-color: var(--primary); background: var(--light-brand-color); color: var(--primary)}

/* section - education */
.section.education {background:#F1F7F6; border-top-left-radius: 120px; max-width: 100%;}
.section.education .article {max-width:var(--max-width); margin:0 auto;}
.education-info {margin-bottom: 40px;}
.education-info__list {display: flex; gap:40px;}
.education-info__list--item {flex:1; background: var(--white);border:1px solid var(--border-01); border-radius: var(--common-radius); position: relative;
  background: linear-gradient(to right, #39B592 50%, white 50%);background-size: 200% 100%;background-position: bottom right;transition: all 0.2s ease-out;
}
.education-info__list--item .link {display: inline-block; width: 100%; padding: 34px 60px 34px 40px;}

.education-info__list--item .item-inner {display: flex; gap:20px; justify-content: space-between; align-items: center;}

.education-info__list--item .text-area .h4 {color: var(--quaternary); transition: 0.2s; font-size: 15px;}
.education-info__list--item .text-area .sub-title {font-size:28px; font-weight: bold; transition: 0.2s; display: flex; gap:70px; align-items: center;}
.education-info__list--item .text-area .sub-title .icon {width: 26px;}
.education-info__list--item .text-area__top {}
.education-info__list--item .text-area__bottom .description-text {color: var(--gray-05); transition: 0.2s;}
.education-info__list--item .img-area {width: 90px;}

.education-info__list--item:hover {background-position: bottom left;}
/* .education-info__list--item:hover .img-area {opacity: 0;} */
.education-info__list--item:hover .h4,
.education-info__list--item:hover .sub-title,
.education-info__list--item:hover .description-text  {color:var(--white);}

.education-slide {position: relative; margin-bottom: 60px; padding-bottom: 40px;}
.education-slide .edu_swiper {overflow: hidden;}
.education-slide .edu_swiper .swiper-slide {border-radius: 10px; overflow: hidden;}
.education-slide .edu_pg {left: 50%; transform: translateX(-50%); bottom: 0; display: flex; gap: 10px;}
.education-slide .edu_pg .swiper-pagination-bullet {width: 10px; height: 10px; background: #C2C2C2; opacity: 1;}
.education-slide .edu_pg .swiper-pagination-bullet-active {background: #52B9C0}
.education-slide .edu_prev,
.education-slide .edu_next {width: 40px; height: 40px;}
.education-slide .edu_prev::after,
.education-slide .edu_next::after {display: none;}
.education-slide .edu_prev {background: url('../img/main/edu_slide_prev_off.png') no-repeat center/contain; left: -20px; top: 45%;}
.education-slide .edu_next {background: url('../img/main/edu_slide_next_off.png') no-repeat center/contain; right: -20px; top: 45%;}
.education-slide .edu_prev:hover {background: url('../img/main/edu_slide_prev_on.png') no-repeat center/contain;}
.education-slide .edu_next:hover {background: url('../img/main/edu_slide_next_on.png') no-repeat center/contain;}
.education-slide .admBtn {position: absolute; display: inline-block; right: 0; bottom: 0; background: var(--secondary); color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 14px;}

.section .links-list {display: flex; justify-content: space-between; align-items: center; gap:10px;}
.section .link-item {flex:1; max-width: 190px;}
.section .link-item.first-item { max-width: 290px;}


.section .link-item .link.call:hover {background: #387E83;}
.section .link-item .link.blog:hover {background:#03C75A ;}
.section .link-item .link.cafe:hover {background: #00AB57;}
.section .link-item .link.youtube:hover {background: #E30B13;}
.section .link-item .link.instagram:hover {background: #804FBF;}
.section .link-item .link.facebook:hover {background: #3987C8;}

/* section - news */
.section.news {background:#F1F7F6; max-width: 100%; position: relative;}
.section.news::after {content: ''; width:100%;height: 100%; background-color:var(--white) ; position: absolute; right: 0;top:0; z-index: -1;border-top-right-radius: 120px; }
.section.news .article {max-width:var(--max-width); margin:0 auto;}

.news-info .hover-box__list--item {margin-bottom: 100px;}
.news-info .hover-box__list--item:hover .img-box .img {transform: scale(1.2);}
.news-info .hover-box__list--item .img-box {border:none; overflow: hidden; transition: 0.3s;}
.news-info .hover-box__list--item .img-box:hover {border: none;}
.news-info .hover-box__list--item .img-box img {transition: 0.3s;}
.news-info .hover-box__list--item .img-box:hover img {transform: scale(1.1);}
.news-info .hover-box__list--item .toggle-line {display: inline-block; width: 100%; height: 2px; margin:30px 0px 10px 0px;background: linear-gradient(to right, var(--secondary) 50%, var(--border-01) 50%);background-size: 200% 100%;background-position: bottom right;transition: all 0.2s ease-out;}
.news-info .hover-box__list--item:hover .toggle-line{background-position: bottom left;}
.news-info .hover-box__list--item .info-text .text {font-size:20px; font-weight: bold; min-height: 64px;}
.news-info .hover-box__list--item .info-text .info-date {color: var(--gray-06);}
.news-info .more-link { display: flex; justify-content: center; align-items: center;}
.news-info .more-link .link {border: 1px solid var(--text-link); background: var(--white); color:var(--text-link); font-weight: 300;}
.news-info .more-link .link:hover {border-color: var(--primary); background: var(--light-brand-color); color: var(--primary)}

/* section - flow */
.section.flow {width: 100%; max-width: 100%; overflow: hidden; padding: 0; padding-bottom: 80px}
.section.flow .flowWrap {}
.section.flow .flowArea {display: flex; gap: 12px; width: 10000px}
.section.flow .flowWrap li {width: 230px;}

/* section - map */
.section.map { max-width: 100%; padding-bottom: 250px; overflow: hidden; padding-top: 0;}
.section.map .article {max-width:1720px; height: 550px; margin:0 auto; position: relative; padding:0;}
.company-info {width: 100%;max-width: 980px; background: var(--white); position: absolute; right: 0%; bottom:0%; transform: translate(10%,50%); padding:70px 0px 28px 100px;border-radius: 50px 0 0 50px;z-index: var(--mapInfo-z);}

.company-info__top {margin-bottom: 38px;}
.company-info__top .address-01 {color:var(--quaternary);}
.company-info__top .address-02 {font-size: 25px; color:var(--text-secondary); font-weight: bold;}

.company-info__center {margin-bottom: 30px;}
.company-info__center .info-flex-box {width: 100%; display: flex;align-items: baseline; margin-bottom: 21px;}
.company-info__center .info-flex-box .title {min-width: 110px; font-weight: bold; color:var(--text-tertiary)}
.company-info__center .info-flex-box .title.en {min-width: 183px}
.company-info__center .info-flex-box .description {flex:1; color:var(--gray-05)}
.inner .info-flex-box {margin-bottom:10px;}
.inner .info-flex-box .title {font-weight: 400; min-width: 70px;}
.inner .info-flex-box .title.en {min-width: 121px}

.company-info__bottom {display: flex; gap: 10px;}
.company-info__bottom .link.secondary {max-width: 180px; padding: 17px 0;}
.company-info__bottom .find-path {background:var(--primary);}
.company-info__bottom .show-map {border:2px solid var(--primary); background:var(--white); color:var(--primary); }
.company-info__bottom .show-map img {
  filter: invert(49%) sepia(51%) saturate(401%) hue-rotate(136deg) brightness(92%) contrast(93%);
}

/* =============================================================== */
/* ====================================================== Sub PAGE */
/* =============================================================== */

/* =============================================================== */
/* =============================================== Sub PAGE - GRID */
/* =============================================================== */
/* BASE col - 3 / row - 2 */
.grid-wrap {position: relative;}
.no-data {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
.grid-list {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(2, auto); column-gap: 40px; row-gap: 60px;}
.grid-item { min-height: 400px; box-shadow: 0px 5px 15px #3333331a; border-radius: var(--common-radius); transition: 0.2s; overflow: hidden;}
.grid-item:hover {transform: translate(0,-3%);}
.grid-item .text-box {padding: 20px 20px 40px 20px;}
.grid-item .img-box {aspect-ratio: 8/5;}
.grid-item .img {border-radius:  var(--common-radius)  var(--common-radius) 0 0;}
.grid-item .heading {font-size: 20px; font-weight: bold; min-height: 64px; margin-bottom: 20px;}
.grid-item .text-info {display: flex; align-items: center; gap:5px; color: #aaa}
.grid-item .text-info .count {display: inline-block; margin-left: 5px; vertical-align: baseline;}

.grid-item .heading.gradu_heading {min-height: 30px; margin: 0;}

.grid-item.photo-item {min-height: 258px; position: relative;}
.grid-item.photo-item .photo_btn {position: absolute; top: 5px; right: 8px;}
.grid-item.photo-item .photo_btn a {background: var(--secondary); color: #fff; padding: 1px 4px; font-size: 14px;}

.gallery_board .grid-item .img-box {}
.gallery_board .grid-item .img-box img {min-height: 290px; object-fit: cover;}
.gallery_board2 .grid-item .img-box {}
.gallery_board2 .grid-item .img-box img {min-height: 250px; object-fit: cover;}

.grid-list2 {display: flex; flex-wrap: wrap; gap: 20px 27px;}
.grid-list2 .grid-item {width: calc((100% - 81px) / 4); min-height: auto; box-shadow: none; border-radius: 0;}
.grid-list2 .grid-item:hover {transform: none}
.grid-list2 .grid-item .img-box {border-radius: 10px; overflow: hidden;}
.grid-list2 .grid-item .text-box {text-align: center; padding: 0; padding-top: 20px;}
.grid-list2 .grid-item .text-box .heading {margin: 0; min-height: auto; line-height: 130%;}

/* =============================================================== */
/* ========================================= Sub PAGE - PAGINATION */
/* =============================================================== */
.pagination-list {display: flex; justify-content: center; align-items: center; gap:10px;}
.pagination-list .pagination-item .link.active {background: var(--quaternary); color: white;}
.pagination-item {width:28px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%;}

.pagination-item.prev-item {margin-right: 20px;}
.pagination-item.next-item {margin-left: 20px;}

.pagination-item .next,
.pagination-item .end-next {transform: rotateZ(180deg);}

.pagination-item .link {display: flex; align-items: center; justify-content: center; border-radius: inherit; width: 100%; height: 100%; line-height: initial;}







/* common */
.sub-banner {max-width: 1720px; margin:0 auto; padding-top: 130px; margin-bottom: 0; padding-bottom: 0;}
.intro-page .sub-banner .img-box {width: 100%; height: 350px; position: relative; background: url('../img/banner/sub-banner-intro.jpg') no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center;}
.education-guide-page .sub-banner .img-box {width: 100%; height: 350px; position: relative; background: url('../img/banner/sub-banner-education-guide.jpg') no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center;}
.activity-details-page .sub-banner .img-box {width: 100%; height: 350px; position: relative; background: url('../img/banner/sub-banner-activity-details.jpg') no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center;}
.book-publish-detail-page .sub-banner .img-box {width: 100%; height: 350px; position: relative; background: url('../img/banner/sub-banner-activity-details.jpg') no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center;}
.news-page .sub-banner .img-box {width: 100%; height: 350px; position: relative; background: url('../img/banner/sub-banner-news.jpg') no-repeat; background-size: 100% 100%; display: flex; justify-content: center; align-items: center;}
.sub-banner-title {font-size: 55px; font-weight: bold; color: var(--white);}
.paragraph {margin-bottom: 30px; font-size: 18px; color: #545454}
.paragraph_etc {color: #777}
.paragraph .strong {font-weight: bold; font-size: inherit;vertical-align:baseline;}

/* sub-banner-intro */
/* .scroll-container {background: orange; } */
.scroll-container {padding-top: 60px}
.scroll-nav {position: sticky; top:90px; background: white; z-index: var(--sticky-z);}
.scroll-list {width: 100%; height: 70px; display: flex; align-items: center; border:1px solid var(--gray-07); border-radius: var(--btn-radius);}
.scroll-item {flex:1; height: 100%; position: relative;}
.scroll-item + .scroll-item::before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: #D7D7D7}
.scroll-item .inner-link { height:100%; display: flex; align-items: center; justify-content: center; padding:0 25px; color: var(--gray-05); border:1px solid transparent; border-radius: var(--btn-radius); transition: 0.2s; position: relative; text-align: center;}
/* .scroll-item .inner-link::after {content: ''; width:1px; height: 10px; border-right:1px solid var(--gray-05); position:absolute; right:0; top:50%; transform: translate(100%,-50%);} */
.scroll-item:last-child .inner-link::after {display: none;}
.scroll-item.on .inner-link::after {display: none;}
.scroll-item .inner-link:visited {color:var(--gray-05);}
/* .scroll-item .inner-link:hover {background-color: var(--primary); color:var(--white); box-shadow: 0px 3px 10px #3333331a;} */
.scroll-item.on .inner-link {background-color: var(--primary); color:var(--white); box-shadow: 0px 3px 10px rgba(51,51,51,0.2);}
/* .scroll-item .inner-link:hover::after {border-color: transparent;} */


.scroll-inner .article { scroll-margin-top: 160px; margin-bottom: 150px;}
.scroll-inner .article-heading {padding-top: 100px; font-size: 40px; font-weight: bold; margin-bottom: 50px;}

/* intro  */
.intro .inner-top{display: flex; justify-content: space-between; margin-bottom: 100px;}
.intro .text-wrap {flex:1;}
.intro .img-box {flex:1; max-width: 460px;}
.intro .h4 {font-size: 30px; font-weight: 400; margin-bottom: 30px;}
.intro .h4 .strong {font-size: inherit; vertical-align: baseline; font-weight: bold;}
.intro .paragraph_name {font-size: 18px; line-height: 1; gap: 4px; display: flex; align-items: center;}
.intro .paragraph_name span {font-weight: 600; font-size: 24px; top: -2px; position: relative;}

.figcaption {text-align: right; margin-top: 10px;}
.figcaption b {font-weight: bold; vertical-align: baseline;}

.intro .preview-img-wrap {display: flex;}
.intro .preview-img-wrap .img-box {flex:1; max-width: 100%;}
.intro .preview-img-wrap .figcaption {text-align: left; margin-top: 0px; font-size: 20px; font-weight: bold; padding-left: 20px;}

.gradu-slide {position: relative; margin-bottom: 60px; padding-bottom: 40px;}
.gradu-slide .gradu_swiper {overflow: hidden;}
.gradu-slide .gradu_swiper .swiper-slide {}
.gradu-slide .gradu_swiper .swiper-slide .img {border-radius: 10px; overflow: hidden;}
.gradu-slide .gradu_swiper .swiper-slide .txt {text-align: center; font-size: 16px; font-weight: bold; padding-top: 20px;}
.gradu-slide .gradu_prev,
.gradu-slide .gradu_next {width: 40px; height: 40px;}
.gradu-slide .gradu_prev::after,
.gradu-slide .gradu_next::after {display: none;}
.gradu-slide .gradu_prev {background: url('../img/main/edu_slide_prev_off.png') no-repeat center/contain; left: -20px; top: 40%;}
.gradu-slide .gradu_next {background: url('../img/main/edu_slide_next_off.png') no-repeat center/contain; right: -20px; top: 40%;}
.gradu-slide .gradu_prev:hover {background: url('../img/main/edu_slide_prev_on.png') no-repeat center/contain;}
.gradu-slide .gradu_next:hover {background: url('../img/main/edu_slide_next_on.png') no-repeat center/contain;}
.gradu-slide .admBtn {position: absolute; display: inline-block; right: 0; bottom: 0; background: var(--secondary); color: #fff; padding: 2px 6px; border-radius: 3px; font-size: 14px;}


/* history  */

.history .contents-inner {width: 100%;display: flex; background-color: white;}
.history .contents-item {flex:1;}
.history .contents-item.inner-right {flex: 2.2;}
.history .inner-left .sticky-box {position: sticky; top:170px;}
.history .sticky-box {display: flex; flex-direction: column; gap:30px;}
.history .sticky-box .link {font-size:30px; color: #E1E1E1; font-weight: bold;}
.history .sticky-box .link.on {font-size:55px; color: var(--primary); font-weight: bold;}

.scrollable-item { scroll-margin-top: 200px; margin-bottom: 130px;}
.scrollable-item:last-child {margin:0;}
.vertical-line {width:1px; height: auto; display: block; margin:0 100px; background: #E0E0E0}
.scrollable-item .h4 {font-size: 40px; font-weight: bold; margin-bottom: 30px;}
.scrollable-item .date-list {display: flex;gap:40px; margin-bottom: 35px;}
.scrollable-item .date-heading {font-size: 18px; font-weight: bold;}
.scrollable-item .date-list-contents {display: flex; flex-direction: column; gap:15px; color: #777}
.scrollable-item .date-list-contents p {line-height: 30px}


/* vision  */
.vision .paragraph.heading {font-size: 20px; color:var(--text-primary);}
.vision .paragraph:last-child {color: #777777; margin-bottom: 50px;}
.vision .preview-img-wrap .img-box .img {border-radius: 20px;}

/* association-branch */
.association-branch .h4 {font-size: 30px;margin-bottom: 30px;}
.association-branch .h4 .strong {font-size: inherit; vertical-align: baseline; font-weight: bold;}
.association-branch .map-wrap {background:#FAFAFA; aspect-ratio: 32/13; border-radius: 20px;display: flex; justify-content: center; align-items: center; padding: 40px 20px; margin-bottom: 30px; height: auto;}
.association-branch .map-box {background: url('../img/sub/map.png') no-repeat;aspect-ratio: 21/11; background-size:100%; background-position: center; max-width: 840px; width: 100%; }

.association-branch .plus {position: relative;}
.association-branch .plus p {font-size: 18px; color: #777777; padding-top: 10px;}
.association-branch .plus .call_link {padding: 20px 40px; color: #fff; background: #52B9C0; border-radius: 40px; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.association-branch .plus .call_link:hover {color: #52B9C0; font-weight: bold; border: 3px solid #52B9C0; background: transparent;}

.marker-list {width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5, auto);grid-template-rows: repeat(2, auto);}
.marker-item {position: relative;}
.marker-item .button {position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);}
.marker-item .button .img-bg {display: inline-block; width: 23px; height:23px; background-color: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.marker-item .button:hover .img-bg,
.marker-item .button.active .img-bg{width: 31px; height: 31px; background:var(--primary);}
.marker-item .button .img {width: 8px; height: 12px;}

.map-btns .marker-list {gap:20px;}
.map-btns .marker-item {border:none;}
.map-btns .marker-item .button {position: relative; font-size:18px; transition: 0.2s;border:1px solid var(--border-01); width: 100%; height: 100%; height:80px;  border-radius: var(--common-radius);}
.map-btns .button.active {background:var(--primary); color: white; box-shadow: 0px 5px 5px #3333331a; font-weight: bold; border-color:var(--primary) ;}

.map-box {position: relative;}
.map-box .button {position: absolute;}
.map-box .button .img-bg {display: inline-block; width: 23px; height:23px; background-color: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s;}
.map-box .button:hover .img-bg,
.map-box .button.active .img-bg{width: 31px; height: 31px; background:var(--primary);}
.map-box .button .img {width: 8px; height: 12px;}
.map-box .button .img-bg2 .img {width: 31px; height: 31px; cursor: default;}

.global-inner {margin-bottom: 50px;}
.map-box .canada {top: 23%; left: 15%;}
.map-box .USA {top: 36%; left: 18%;}
.map-box .uk {top: 35%; left: 45%;}
.map-box .uzbekistan {top: 38%; right: 35%;}
.map-box .china {bottom: 52%; right: 23%;}
.map-box .japan {top: 47%; right: 11%;}
.map-box .argentina {bottom: 16%; left: 27%;}
.map-box .bahrain {bottom: 40%; left: 56%;}
.map-box .singapore {bottom: 36%; right: 22%;}
.map-box .australia {right: 14%; bottom: 19%;}

/* ko map */
.association-branch .local .map-box {background: url('../img/sub/map-ko.png') no-repeat; aspect-ratio: 0.7/1; max-width: 323px; background-size:contain ;}
.association-branch .local .map-box .marker-list {grid-template-columns:initial; grid-template-rows: repeat(5, auto);}
.map-box .cheongju {top: 34%; left: 44%;}
.map-box .deagu {bottom: 43%; right: 27%;}
.map-box .pohang {right: 5%; bottom: 45%;}
.map-box .ulsan {bottom: 35%; right: 9%;}
.map-box .naju {bottom: 29%; left: 24%;}

/* partnership  */
.contents-top {margin-bottom: 50px;}
.contents-bottom {position: relative; display: flex; gap: 10px; justify-content: center;}
.contents-bottom .link:visited {color:#000;}
.contents-bottom .link.write:visited {color:var(--white);}
.link.secondary {max-width: 180px; padding: 17px 0;}
.contents-bottom .write {}
.contents-bottom .more {color: #fff !important}

/* ci  */
.ci .img-wrap {display: flex; align-items: center; justify-content: center; gap:20px;}
.ci .img-box {flex:1;}
.ci .img-box .pcView {display: block;}
.ci .img-box .moView {display: none;}


/* qualification-course */
.education-guide-page .text-item {display: flex; gap:10px; align-items: baseline; margin-bottom: 100px;}
.education-guide-page .text-box {flex:1;}
.education-guide-page .text-item .text-left {align-self: flex-start;}
.education-guide-page .text-item .text-left .img {width: 25px;}
.education-guide-page .text-item .h4 {font-size: 20px; font-weight: bold; margin-bottom: 20px;}
.article-banner-wrap {position: relative; margin-bottom: 70px;}
.float-box {width:60%; position: absolute; bottom:0; left:0; display: flex; justify-content: space-between; align-items: flex-end; background:var(--white); transform: translate(0,10px);}
.float-box .button {padding: 30px 0 30px 40px; background:var(--secondary); width: 100%; max-width: 260px; display: flex; align-items: center; gap:20px; border-radius: 0 0 20px 20px;}
.float-box .button .btn-text {font-size: 18px; font-weight: bold; color: var(--white);}
.float-box .button .img {width:30px;  transition: 0.2s;}
.float-box .button:hover .img{margin-left: 10px;}
.float-heading {font-size: 30px; font-weight: bold;}

/*  */
.education-guide-page .text-item.flex-wrap {flex-wrap: wrap;}
.education-guide-page .text-item.flex-wrap .text-box{flex:initial; width:100%;}
/*  */


.curriculum-list {width: 100%; display: grid; grid-template-columns: repeat(4,auto); }
.curriculum-item {width: 100%; display: flex; align-items: center; gap:10px; flex-direction: column; border:1px solid #E7E7E7; padding: 45px 0; text-align: center}
.curriculum-item .img {max-width: 80px;}
.curriculum-item .title {display: inline-flex; font-size:18px; align-items: center; gap: 5px;}
.curriculum-item .title .img {max-width:18px;}

/* completion-course */
.completion-course .text-item {flex-wrap: wrap; margin-bottom: 50px;}
.completion-course .curriculum-box {width: 100%; border:1px solid #E0E0E0;  border-radius: 20px; padding:50px 0px 50px 70px;display: flex; align-items: center; gap:80px;}
.curriculum-left .img {max-width: 160px;}
.curriculum-right {width: 76%; display: flex; justify-content: space-between;}
.curriculum-right .list {flex:1; max-width: 460px; list-style-type: disc; display: flex; flex-direction: column; gap:15px;}
.curriculum-right .list-item { font-size: 18px;}
.curriculum-right .list-item::marker {color:var(--secondary);}
.curriculum-right .list-item .desc {color:#777777;}

/* recruitment */
.grid-list.col-4 {grid-template-columns:1fr 1fr 1fr 1fr;}
.grid-item.col-4 .img-box {aspect-ratio: 1/1;}
.grid-item.col-4 .img-box .img {height: 100%;}


/* activity-details */
.tabcontent {}
.tab-nav .tablinks {width: 100%;}
.tab-nav .tablinks.active {background-color: var(--primary);color: var(--white); color: 18px; font-weight: bold;}
.info-left .count {color: var(--primary); vertical-align: baseline;}
.top-info {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.input-wrap { display: flex; align-items: center; padding:13px 20px; border-radius: 50px; background: #F3F3F3; gap: 5px;}
.input-box .input {background:transparent;}

.category-wrap {margin-bottom: 30px;}
.category-list {display: flex; gap:10px;}
.category-item {width: 100%; max-width: 110px; display: flex; align-items: center; justify-content: center; }
.category-btn {width: 100%; height: 100%;padding:10px 0; background:#FAFAFA; border-radius: var(--btn-radius); color: #AAAAAA; font-size: 20px; text-align: center;}
.category-btn.active {background:var(--primary); color: var(--white);}
.category-btn#bo_cate_on {background:var(--primary); color: var(--white);}


/* book-publish-detail */

.book-publish-detail .heading-wrap {padding:40px; border-top: 1px solid #333333; border-bottom:1px solid #AAAAAA;}
.book-publish-detail .heading-wrap .title {font-size: 30px; margin-bottom: 20px;}
.book-publish-detail .heading-wrap .text-info {display: flex; gap:5px; color:#AAAAAA;}
.book-publish-detail .heading-wrap .text-info .count {vertical-align: baseline;}
.book-publish-detail .contents-top {margin:0;}
.book-publish-detail .contents-box {padding:70px 0;}
.book-publish-detail .contents-box .img-box {max-width: 700px; margin-bottom: 50px;}


.write-nav-box {margin-bottom: 30px;}
.write-nav {display: flex; gap: 50px; padding: 20px 0; border-top:1px solid #AAAAAA;}
.write-nav-left {display: flex; gap:10px;}
.write-nav-left .img {width: 14px;}
.write-nav-box .next .img {transform: rotateZ(180deg);}
.write-nav .no-contents {color:#CCCCCC;}
.write-nav:last-child {border-bottom: 1px solid #aaaaaa; border-top: 1px solid #E0E0E0;}

.write-btns-wrap {display: flex; align-items: center; justify-content: space-between;}
.write-btns-wrap .move-list{ background:var(--primary);}
.write-btns-wrap .move-edit {background:var(--white); border:2px solid var(--primary); color: var(--primary);}

/* news */
.news-wrap { border-top:2px solid #000;}
.news-wrap .news-item {display: grid; grid-template-columns: 1fr 9fr 2fr; text-align: center; font-size: 18px; padding:30px 0; border-bottom: 1px solid #E0E0E0; align-items: center}
.news-wrap .news-item .number,
.news-wrap .news-item .news-link,
.news-wrap .news-item .date {font-size: 18px; color: inherit;}
.news-wrap .news-item .news-link {text-align: left; padding-left: 20px;}
.news-wrap .news-item .notice {padding:5px 20px; display: flex; align-items: center; justify-content: center; background: var(--primary); color:var(--white); border-radius: var(--btn-radius); max-width: 70px; margin:0 auto;}
.news-wrap .news-item .number,
.news-wrap .news-item .date {color: #777777;}


/* Start about common functions style */
/* ====================================================== Function */

/* =============================================================== */
/* =============================================== Accordion Menu  */
/* =============================================================== */
.accordion-wrap{display: flex; flex-direction: column; gap:16px;}
.accordion-item {background: var(--blue-07); padding: 15px 18px; border: 1px solid transparent; border-radius: var(--faq-radius); }
.accordion-item__title {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.accordion-item__title .title {font-size:18px; font-weight: 500; flex:1; text-align: left;}
.accordion-item__title .arr-img {width:24px;}
.accordion-item__desc {max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
.accordion-item__desc .desc {font-size: 14px; margin-top:18px;}





#myInput {background-image: url('/css/searchicon.png'); /* Add a search icon to input */background-position: 10px 12px; /* Position the search icon */background-repeat: no-repeat; /* Do not repeat the icon image */width: 100%; /* Full-width */font-size: 16px; /* Increase font-size */padding: 12px 20px 12px 40px; /* Add some padding */border: 1px solid #ddd; /* Add a grey border */margin-bottom: 12px; /* Add some space below the input */
}
#myUL {/* Remove default list styling */list-style-type: none;padding: 0;margin: 0;}

#myUL li a {border: 1px solid #ddd; /* Add a border to all links */margin-top: -1px; /* Prevent double borders */background-color: #f6f6f6; /* Grey background color */padding: 12px; /* Add some padding */text-decoration: none; /* Remove default text underline */font-size: 18px; /* Increase the font-size */color: black; /* Add a black text color */display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}



/* =============================================================== */
/* =============================================== Filter DropDown */
/* =============================================================== */

  /* .container {overflow-x: hidden;} */

  .filterDiv {float: left;background-color: #2196F3;color: #ffffff;width: 100px;line-height: 100px;text-align: center;margin: 2px;display: none; /* Hidden by default */ }

  /* The "show" class is added to the filtered elements */
  .show { display: block; }

  /* Style the buttons */
  .btn {border: none;outline: none;padding: 12px 16px;background-color: #f1f1f1;cursor: pointer; }

  /* Add a light grey background on mouse-over */
  .btn:hover {background-color: #ddd;}

  /* Add a dark background to the active button */
  .btn.active {background-color: #666;color: white;}




/* =============================================================== */
/* ================================================== Custom Input */
/* =============================================================== */

input.custom-input {padding: 10px; border:none; border-radius:8px;
    box-shadow: 0px 0px 3px #000;
}
.input-area {margin-bottom: 20px;}
.input-box {display: flex; gap:10px; align-items: center;}
.input-box label {flex:1; min-width: 50px; max-width: 100px;}
.input-error {display: none;}
.input-error.active {display: block;border:1px solid red;}
input:focus {color: #1e1e1e;box-shadow: 0px 0px 3px var(--blue-05);}
input:read-only {color: var(--wbg-dg);background: var(--gray-03);border-color: var(--gray-05);}
input:disabled {color: var(--wbg-lg);background: var(--primary-white-bg);border-color: var(--gray-03);}
input.error {box-shadow: 0px 0px 3px var(--red); color: var(--red);}

@media all and (max-width: 880px){
    .section {padding: 60px 0;}
    .section {padding: 40px 0;}
}