@charset "utf-8";

/* common */
.img_list {display: flex; flex-wrap: wrap; --cols: 4;}
.img_list li {width: calc(100% / var(--cols)); aspect-ratio: 4 / 3; position: relative;}
.img_list li img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}

.link_list {display: flex; flex-wrap: wrap; gap: 10px;}
.link_list a {display: inline-block; padding: .5rem 1.5rem; border: 1px solid #ddd; border-radius: 10px; font-size: 1rem; position: relative; transition: .2s;}
.link_list a:hover {border: 1px solid #333;}
.link_list a::after {content: ""; display: inline-block; background: url(/resources/images/site/eng/contents/ico_link_b.svg) center no-repeat; background-size: cover; width: 13px; height: 13px; margin-left: 1rem;}
.link_list a.down::after {background: url(/resources/images/site/eng/contents/ico_download_b.svg) center no-repeat; background-size: cover;}

@media screen and (max-width: 767px) {
    .img_list {--cols: 2;}
}

@media screen and (max-width: 500px) {
    .img_list {--cols: 1;}
}


/* History */
.historyTop {display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin: 7rem 0 3.5rem; padding: 0 3rem;}
.historyTop h5 {font-size: 2.25rem; line-height: 1.5;}
.historyTop h5 span {color: #ea5514;}
.historyTop .controls {display: flex; gap: 1rem;}
.historyTop .controls button {position: static; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid #ccc; color: #666; font-size: 1.2rem; transition: all .2s;}
.historyTop .controls button::after {font-size: 1rem;}
.historyTop .controls button:hover{background: #f54b1e; border: 1px solid #f54b1e;}
.historyTop .controls button:hover::after{color: #fff}
.historySlide {width: 100%;}
.historySlide .box {width: 100%; display: flex; flex-direction: column; text-align: right;}
.historySlide .box .year {font-size: 2.25rem; font-weight: 800; color: #444; margin-bottom: 10px; transition: 0.3s;}
.historySlide .box .title {min-height: 42px; font-size: 1rem; font-weight: 500; line-height: 1.25; color: #444; margin: 0 0 15px;}
.historySlide .box .img {width: 100%; height: 0; padding-top: 75%; overflow: hidden; position: relative; transition: 0.3s;}
.historySlide .box .img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: 0.3s; transform: scale(1.05);}
.historySlide .box:hover .year {color: #ea5514;}
.historySlide .box:hover .img {border-radius: 20px;}
.historySlide .box:hover .img img {filter: grayscale(0%); transform: scale(1);}

.historyModal {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 9999;}
.historyModal .content {background: #fff; width: 90%; max-width: 1120px; padding: 40px; border-radius: 15px; position: relative;}
.historyModal .close {position: absolute; top: 15px; right: 20px; font-size: 2.5rem; z-index: 10;}
.historyModal {width: 100%;}
.historyModal .swiper-slide {display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: flex-start; height: 380px!important;}
.historyModal .lf {width: 45%; flex-shrink: 0;}
.historyModal .rt {width: calc(55% - 40px); height: 100%; text-align: left;}
.historyModal .img {width: 100%; height: 0; padding-top: 66%; overflow: hidden; border-radius: 10px 10px 0 0; position: relative;}
.historyModal .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.historyModal .img_name {padding: .75rem; background: #f6f5f4; font-size: 0.875rem; text-align: center; border-radius: 0 0 10px 10px; color: #444;}
.historyModal .year {display: block; font-size: 1.5rem; font-weight: 800; color: #ea5514;}
.historyModal .title {font-size: 1.625rem; line-height: 1.25; margin: 0 0 20px; word-break: keep-all;}
.historyModal .desc {font-size: 1rem; color: #444; white-space: pre-line; height: calc(100% - 130px); overflow-y: auto;  padding-right: 10px;}
.historyModal .modal-btn {position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #666; z-index: 5; cursor: pointer;}
.historyModal .modal-btn::after {font-size: 1rem;}
.historyModal .modal-prev {left: -20px;}
.historyModal .modal-next {right: -20px;}

@media screen and (max-width: 767px) {
    .historyTop {padding: 0 1rem; margin: 3rem 0 2rem;}
    .historyTop h5 {width: 100%; font-size: 1.75rem;}
    .historyTop .controls {margin-left: auto;}

    .historySlide .box {text-align: left;}
    .historySlide .box .title {min-height: initial;}
    .historySlide .box .year {font-size: 1.75rem;}

    .historyModal .content {height: 80%;}
    .historyModal .modalSwiper,
    .historyModal .swiper-wrapper,
    .historyModal .swiper-slide {height: 100%!important;}
    .historyModal .close {font-size: 2rem; top: 4px;}
    .historyModal .slick-slider,
    .historyModal .slick-list {height: 100%!important;}
    .historyModal .lf {width: 100%;}
    .historyModal .rt {width: 100%; height: calc(100% - 38%);}
    .historyModal .year {font-size: 1rem;}
    .historyModal .title {font-size: 1.25rem;}
}


/* Dongguk at a vision2040 */
.seoul {display: flex; flex-wrap: wrap; gap: 20px 80px; align-items: center; padding: 2rem; border-radius: 10px; background: #f6f6f6;}
.seoul .map {width: 40%; position: relative;}
.seoul .map::before {content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px dotted #fff; background: #E94E1B; position: absolute; top: 48%; right: 43%; z-index: 2;}
.seoul .map::after {content: ""; width: 16px; height: 16px; border-radius: 50%; background: #E94E1B90; position: absolute; top: calc(48% - 3px); right: calc(43% - 3px); transform: scale(1.45) ; animation: ping 2s infinite linear; z-index: 1;}
.seoul .map img {width: 100%; height: 100%; object-fit: contain;}
.seoul .txt {width: calc(60% - 80px);}
.seoul .txt ul + ul {margin-top: 1.875rem;}

.dia_list {display: flex; flex-wrap: wrap; gap: 24px;}
.dia_list > li {width: calc(100% / 2 - 24px); padding: 2rem; border-radius: 10px; background: #f6f6f6; position: relative; z-index: 2;}
.dia_list > li:nth-child(1) {background: rgba(255, 241, 241, 0.67);}
.dia_list > li:nth-child(2) {background: #f1f7ffab;}
.dia_list > li:nth-child(3) {background: #f1fff4ab;}
.dia_list > li:nth-child(4) {background: #fffaf1ab;}
.dia_list > li::before {content: ""; display: block; margin: 0 auto; width: 40px; height: 40px; background-blend-mode: multiply; z-index: -1;}
.dia_list > li:nth-child(1)::before {background: url(/resources/images/site/eng/contents/ico_colleges.png) center no-repeat; background-size: cover;}
.dia_list > li:nth-child(2)::before {background: url(/resources/images/site/eng/contents/ico_students.png) center no-repeat; background-size: cover;}
.dia_list > li:nth-child(3)::before {background: url(/resources/images/site/eng/contents/ico_international.png) center no-repeat; background-size: cover;}
.dia_list > li:nth-child(4)::before {background: url(/resources/images/site/eng/contents/ico_faculty.png) center no-repeat; background-size: cover;}
.dia_list > li .tit {font-family: 'Merriweather', serif; text-align: center; font-size: 1.25rem; font-weight: 700;}
.dia_list > li ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 1.25rem;}
.dia_list > li ul li {width: 30%; display: flex; flex-direction: column; align-items: center; text-align: center;}
.dia_list > li ul li .counting {font-size: 2.5rem; font-weight: 700;}
.dia_list .total {color: #12579f;}
.dia_list > li ul li .txt {font-size: .9375rem; line-height: 1.25; font-weight: 500;}

.accreditation {display: flex; flex-wrap: wrap; gap: 24px;}
.accreditation li {width: calc(100% / 3 - 16px); display: flex; flex-wrap: wrap; justify-content: center; padding: 1rem; border-radius: 10px; border: 1px solid #ddd;}
.accreditation li .img {width: 100%; height: 0; padding-top: 25%; position: relative;}
.accreditation li .img img {width: 150px; height: 100%; object-fit: contain; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.accreditation li .cnt {text-align: center; margin-top: 20px;}
.accreditation li .cnt .tit {font-size: 1.25rem; font-weight: 600;}
.accreditation li .cnt span {font-size: .875rem; color: #444;}

@media screen and (max-width: 767px) {
    .seoul {padding: 1rem;}
    .seoul .map,
    .seoul .txt {width: 100%;}

    .dia_list > li {width: 100%; padding: 1rem;}
    .dia_list > li ul li .counting {font-size: 2.25rem;}
    .dia_list .total {width: 100%;}

    .accreditation li {width: 100%;}
}


/*D-ESG Management Strategy*/
.esg {width: 100%; display: block;}
.wi_size.esg .esg_wrap .con li {flex: 1;}

@media screen and (max-width: 767px) {
    .wi_size.esg .esg_wrap .con li {flex: auto; width: 100%!important;}
}


/* VISION 2040 */
.vision2040 {width: 100%; display: flex; flex-direction: column; gap: 10px;}
.vision2040 .vision2040_tit {width: 100%; height: 0; padding-top: 12.5%;  position: relative; background:url(/resources/images/site/contents/energize_title_bg.png) center no-repeat; background-size: 100%;}
.vision2040 .vision2040_tit > div {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 500; color: #f26522; text-align: center; line-height: 1.25; position: absolute; left: 0; top: 0;}
.vision2040 .vision2040_tit > div small {width: 100%; font-size: 18px; font-weight: 300; margin-bottom: 10px; padding-top: 5px;}
.vision2040 .box {display: flex; flex-wrap: wrap; gap: 10px 20px;}
.vision2040 .box .tit {width: 18%; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; border-radius: 10px; font-size: 1rem; font-weight: 500; text-align: center; padding: 15px 0;}
.vision2040 .box > ul {width: calc(82% - 20px); display: flex; flex-wrap: wrap; gap: 5px;}
.vision2040 .box > ul > li {border-radius: 10px; overflow: hidden; text-align: center;}
.vision2040 .box .vision li {width: 100%; display: flex; align-items: center; justify-content: center; background: #f7b21e; color: #fff; font-size: 20px;}
.vision2040 .box .targets li {width: calc((100% - 10px) / 2); display: flex; align-items: center; justify-content: center; background: #9a918a; color: #fff; font-size: 20px;}
.vision2040 .box .pillars li {width: calc((100% - 20px) / 5); display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; font-size: 15px; color: #805e4a; line-height: 1.5; border: 7px solid #e8e0d9; border-radius: 50%; padding: 20px;}
.vision2040 .box .pillars li > div {width: 100%; font-size: 18px; font-weight: 500; color: #463a31; border-bottom: 1px solid #e8e0d9; padding-bottom: 5px; margin-bottom: 5px;}
.vision2040 .box .core li {width: calc((100% - 15px) / 4); padding: 10px 5px; display: flex; align-items: center; justify-content: center; color: #fff;}
.vision2040 .box .core .blue {background: #3276b6;}
.vision2040 .box .core .indigo {background: #5c7192;}
.vision2040 .box .core .bluegreen {background: #25a7b7;}
.vision2040 .box .core .sky {background: #3c98ef;}
.vision2040 .box .step li {width: calc((100% - 10px) / 3); background: #f4f4f4; padding: 0;}
.vision2040 .box .step li .top {text-align: center; padding: 5px;}
.vision2040 .box .step li .top span:first-child {color: #fff; font-size: 18px;}
.vision2040 .box .step li .top span:last-child {color: #feff00; font-weight: 500;}
.vision2040 .box .step li:nth-child(1) .top {background: #5199A4;}
.vision2040 .box .step li:nth-child(2) .top {background: #5152a4;}
.vision2040 .box .step li:nth-child(3) .top {background: #a45151;}
.vision2040 .box .step li .cnt {padding: 20px;}
.vision2040 .box .step li .cnt h3 {color: #00618d; font-size: 18px; text-align: center; line-height: 1.5; text-decoration: underline; margin-bottom: 10px;}
.vision2040 .box .step li .cnt li {width: 100%; font-size: 15px; text-align: left; padding-bottom: 5px; position: relative;}
.vision2040 .box .step li .cnt li::before {content: ""; display: inline-block; width: 4px; height: 4px; background: #C86516; margin-right: 5px; transform: translateY(-3px);}
.vision2040 .box .step li.refer {width: 100%; font-size: 14px; line-height: 1.5; text-align: left; background: transparent;}

@media screen and (max-width: 1023px) {
    .vision2040 .vision2040_tit {background: url(/resources/images/site/contents/strategy_bg.png) no-repeat center 0; background-size: auto; border: 1px solid #f26522; padding-top: 0; height: initial;}
    .vision2040 .vision2040_tit > div {position: relative; padding: 1.5rem 0;}
    .vision2040 .box .tit {width: 100%;}
    .vision2040 .box > ul {width: 100%;}
    .vision2040 .box > ul > li {padding: 15px 0;}
    .vision2040 .box .vision li,
    .vision2040 .box .targets li {font-size: 16px;}
    .vision2040 .box .pillars li {width: calc((100% - 10px) / 3); border-radius: 10px; padding: 10px;}
    .vision2040 .box .core li {width: calc((100% - 10px) / 2);}
}

@media screen and (max-width: 767px) {
    .vision2040 .box .pillars li {width: calc((100% - 10px) / 2);}
    .vision2040 .box .core li {width: 100%; padding: 0;}
    .vision2040 .box .step li {width: 100%;}
}


/* Global Academic Reputation */
.qs_wrap {display: flex; gap: 50px 100px;}
.qs_wrap .sec {display: flex; flex-wrap: wrap; align-content: space-between;}
.card01 {display: flex; flex-wrap: wrap; gap: 12px;}
.card01 li {width: calc(100% / 4 - 9px); border-radius: 10px; padding: 1.5rem 0; text-align: center; background: #fafafa;}
.card01 li .ico {font-size: 1.875rem; margin-bottom: 12px;}
.card01 li h3 {margin: 10px 0; font-size: 1rem;}
.card01 li .badge {display: inline-block; padding: 5px 15px; border-radius: 20px; font-weight: 700; font-size: 14px; margin-top: 10px;}
.card01 li .badge.top {background: linear-gradient(135deg, #ff6f00, #ff8f00); color: #fff;}
.card01 li .badge.mid {background: #ffe0b2; color: #e65100;}
.card01 li .badge.low {background: #eee; color: #666;}

.card02 {display: flex; flex-wrap: wrap; gap: 12px;}
.card02 li {width: 100%; display: flex; flex-direction: column; padding: 1.5rem 2rem; border-radius: 10px; border: 1px solid #ccc; background: #fbfbfb;}
.card02 li .ico {font-size: 24px;}
.card02 li .cnt h3 {font-size: 1.0625rem;}
.card02 li .cnt p {font-size: 1rem; line-height: 1.25; letter-spacing: .05rem}
.card02 li .rank {font-weight: 700; font-size: 3rem; color: #E94E1B;}

.kpi {background: #fff6eb; border-radius: 10px; padding: 3rem; text-align: center;}
.kpi .tit {font-size: 1.25rem; font-weight: 600;}
.kpi .num {font-size: 3.5rem; font-weight: 900; margin: 10px 0;  color: #E94E1B;}
.kpi .sub {font-size: 13px; opacity: 0.8;}

@media screen and (max-width: 1023px) {
    .qs_wrap {flex-wrap: wrap;}
    .qs_wrap .sec {width: 100%;}
    .card02 {width: 100%;}
    .card02 li {width: calc(100% / 2 - 12px);}
}

@media screen and (max-width: 767px) {
    .card01 li {width: calc(100% / 3 - 16px);}
}

@media screen and (max-width: 500px) {
    .card01 li {width: calc(100% / 2 - 12px);}
    .card02 li {width: 100%;}
}


/* Partner University */
.world_img {width: 100%; padding: 2rem; background: #f6f6f6; border-radius: 10px; overflow: hidden; margin-bottom: 30px; position: relative;}
.world_img .img_list li {width: 100%; height: 0; padding-top: 38%; position: relative; display: none;}
.world_img .img_list li img {width: 100%; height: 100%; object-fit: contain; position: absolute; left: 0; top: 0;}
.world_img .btn_list li button {font-size: 1rem; font-weight: 500; padding: 1rem; position: absolute;}
.world_img .btn_list li.active button {color: #fff;}
.world_img .btn_list li button span {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 13px; color: #fff; border-radius: 50%; background: #897C75; margin: 5px auto 0; position: relative; z-index: 1;}
.world_img .btn_list li.active button span {background: #ffc140; color: #333;}
.world_img .btn_list li.active button span::before {content: ""; width: 30px; height: 30px; border-radius: 50%; background: #ffc140; position: absolute; z-index: -2; transform: scale(1.45) ; animation: ping 2s infinite linear;}
.world_img .btn_list li[data-area="asia"] button {left: 64%; top: 36%;}
.world_img .btn_list li[data-area="america"] button {left: 28%; top: 43%;}
.world_img .btn_list li[data-area="africa"] button {left: 51.5%; top: 55%;}
.world_img .btn_list li[data-area="europe"] button {left: 53.5%; top: 30.5%;}
.world_img .btn_list li[data-area="oceania"] button {left: 67.5%; top: 68.2%;}
.world_cnt li {display: none;}
.world_cnt li.on {display: block;}
.world_cnt .homepage {display: block; width: 28px; height: 28px; margin: 0 auto; background: #9a8679; border-radius: 50%; transition: .3s; position: relative;}
.world_cnt .homepage::after {content: ""; background: url(/resources/images/site/contents/ico_collage_home.png) center no-repeat; background-size: 10px; position: absolute; left: 0; top: 0; width: 28px; height: 28px;}
.world_cnt .homepage:hover {background: #ff6439;}
.world_cnt .tbl th {word-break: keep-all;}
@keyframes ping {0% {-webkit-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: .7;} 100% {-webkit-transform: scale(1.7); -o-transform: scale(1.7); transform: scale(1.7); opacity: 0;} }

@media screen and (max-width: 767px) {
    .world_img {padding: 1rem;}
    .world_img .img_list li {padding-top: 50%;}
    .world_img .btn_list li button {padding: 0; font-size: 15px;}
    .world_img .btn_list li.active button {color: #333;}
    .world_img .btn_list li button span {color: #333!important; background: none!important; width: auto; height: auto; display: inline-block;}
    .world_img .btn_list li.active button span::before {background: none; animation: initial;}
    .world_img .btn_list li[data-area="america"] button {left: 22%;}
    .world_img .btn_list li[data-area="europe"] button {left: 48%;}
}


/* Dongguk Life */
.life {display: flex; flex-wrap: wrap; gap: 10px 50px;}
.life .img {width: 30%;}
.life .img img {width: 100%; border-radius: 10px; overflow: hidden;}
.life .txt {width: calc(70% - 50px); display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 10px; padding-top: 1.5rem;}
.life .txt .ins {display: inline-flex; align-items: center; gap: 5px; padding: 10px 20px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border-radius: 50px; color: #fff; font-size: .9375rem; position: relative; transition: .3s;}
.life .txt .ins:hover {transform: translateY(-5px);}
.life .txt .ins::before {content: ""; display: inline-block; background: url(/resources/images/site/eng/contents/ico_instagram_w.svg) center no-repeat; background-size: cover; width: 18px; height: 18px;}
.life .txt .ins img {width: 1rem;}

@media screen and (max-width: 767px) {
    .life .img,
    .life .txt {width: 100%;}
    .life .txt {flex-direction: column-reverse; align-items: center; padding-top: 0;}
}


/* Convenient Facilities */
.convenient {display: flex; flex-wrap: wrap; gap: 24px;}
.convenient > li {width: calc(100% / 4 - 18px);}
.convenient > li .img p {width: 100%; height: 0; border-radius: 5px; overflow: hidden; padding-top: 62.5%; position: relative;}
.convenient > li .img p img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.convenient > li .img .tit {width: 100%; text-align: center; margin: .75rem 0 .5rem;}
.convenient > li .img .tit .loca {display: block; font-size: 15px; color: #444; line-height: 1.25; margin-top: 5px; position: relative;}
.convenient > li .img .tit .loca::before {content: ""; display: inline-block; background: url(/resources/images/site/contents/icon_map.png) center no-repeat; width: 11px; height: 11px; background-size: contain; margin-right: 3px;}
.convenient > li .img .tit a.loca:hover {text-decoration: underline; text-underline-position: under;}
.convenient .accordion {display: flex; flex-wrap: wrap; gap: 5px;}
.convenient .accordion > li {width: 100%; border: 1px solid #e4e4e4; border-radius: 5px; overflow: hidden;}
.convenient .accordion button {width: 100%; padding: .5rem 1rem; text-align: left; background: #f7f7f7; border: none; cursor: pointer; font-size: 14px; position: relative;}
.convenient .accordion button::after {content: "+"; font-size: 17px; font-weight: 300; line-height: 17px; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) rotate(0); transition: .3s;}
.convenient .accordion button:hover {background: #f4f4f4;}
.convenient .accordion button:hover::after {transform: translateY(-50%) rotate(180deg);}
.convenient .accordion .content {display: none; overflow: hidden; padding: .75rem 1rem; background: #fff; font-size: 15px;}
.convenient .accordion .content p {font-size: 13px;}
.convenient .accordion .content .qr {text-align: center;}

.space {display: flex; flex-wrap: wrap; gap: 30px 100px;}
.space.reverse {flex-direction: row-reverse}
.space .lf {width: 400px;}
.space .lf .img {width: 100%; height: 0; padding-top: 62.5%; position: relative; border-radius: 5px; overflow: hidden;}
.space .lf .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
.space .lf .txt {background: #fff; font-size: 16px; font-weight: 500; text-align: center; padding: .5rem 0 1rem;}
.space .lf .swiper-pagination {bottom: -8px!important;}
.space .lf .swiper-pagination-bullet {width: 6px;!important; height: 6px!important;}
.space .lf .swiper-pagination-bullet-active {background: #333!important;}
.space .rt {width: calc(100% - 500px);}
.space .rt ul {display: flex; flex-wrap: wrap; gap: 24px;}
.space .rt ul li {width: calc(100% / 3 - 16px); padding: .75rem 1rem; border-radius: 5px; border: 1px solid #ddd;}
.space .rt ul li .loca {display: block; font-size: 14px; color: #444; position: relative;}
.space .rt ul li .loca::before {content: ""; display: inline-block; background: url(/resources/images/site/contents/icon_map.png) center no-repeat; width: 11px; height: 11px; background-size: contain; margin-right: 3px;}
.space .rt ul li a.loca:hover {text-decoration: underline; text-underline-position: under;}

.store {display: flex; flex-wrap: wrap; gap: 24px;}
.store li {width: calc(100% / 3 - 16px); display: block; font-size: 14px; color: #444; position: relative; padding: .75rem 1rem; border-radius: 5px; border: 1px solid #ddd;}
.store li::before {content: ""; display: inline-block; background: url(/resources/images/site/contents/icon_map.png) center no-repeat; width: 11px; height: 11px; background-size: contain; margin-right: 3px;}
.store li a:hover {text-decoration: underline; text-underline-position: under;}

@media screen and (max-width: 1023px) {
    .convenient > li {width: calc(100% / 3 - 16px);}

    .space .lf {max-width: 600px; width: 100%; margin: 0 auto;}
    .space .rt {width: 100%;}
}

@media screen and (max-width: 767px) {
    .convenient > li,
    .space .rt ul li,
    .store li {width: calc(100% / 2 - 12px);}
}

@media screen and (max-width: 500px) {
    .convenient > li,
    .space .rt ul li,
    .store li {width: 100%;}
    .convenient > li .img .tit .loca {min-height: inherit;}
}


/* Courses */
.courses .accordion {display: flex; flex-wrap: wrap; gap: 10px;}
.courses .accordion > li {width: 100%; border: 1px solid #e4e4e4; border-radius: 10px; overflow: hidden;}
.courses .accordion button {width: 100%; padding: 1rem 1.5rem; text-align: left; background: #f7f7f7; border: none; cursor: pointer; font-size: 1rem; position: relative;}
.courses .accordion button::after {content: "+"; font-size: 20px; font-weight: 300; line-height: 17px; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) rotate(0); transition: .3s;}
.courses .accordion button:hover { background: #f4f4f4;}
.courses .accordion button:hover::after {transform: translateY(-50%) rotate(180deg);}
.courses .accordion .content {display: none; overflow: hidden; padding: 1.5rem;}


/* Gender Equality Plan(GEP) */
.gep .gep_banner {position: relative; width: 100%; display: flex; align-items: center; justify-content: center; background: url(/resources/images/site/contents/gep_bg.jpg) no-repeat center center/cover; border-radius: 10px; color: #f6f6f6; margin-bottom: 50px; padding: 20px;}
.gep .gep_banner .left {text-align: left; width: 17%;}
.gep .gep_banner .right {text-align: right; width: 17%;}
.gep .gep_banner .left h3,
.gep .gep_banner .right h3 {line-height: 1.3; font-family: Serif, serif; opacity: 0.6; font-weight: 600;}
.gep .gep_banner .center {width: calc(100% - 34%); text-align: center; line-height: 1.3;}
.gep .gep_banner .center .tit {font-size: 2.25rem; font-weight: 600;}
.gep .gep_banner .center h3 {font-size: 1.5rem; opacity: 0.7; font-weight: 400; margin-top: 5px;}
.gep .gep_tit {border: 1px solid #897C75; color: #402e21; border-radius: 5px; font-size: 1.375rem; margin-bottom: 12px;}
.gep .gep_tit .num {display: inline-flex; justify-content: center; background: #897C75; color: #fff; width: 40px; margin-right: 5px;}
.gep .gep_box {margin-top: 10px; padding: 12px 20px 12px 20px; border-radius: 5px; background: #f3f0ee;}
.gep .gep_box .dot_list li {padding-left: 12px;}
.gep .gep_box .dot_list li::before{width: 5px; height: 5px;}
.gep .gep_box .num_list.type_02 li {display: flex; align-items: baseline;}
.gep .gep_box .num_list.type_02 li + li {margin-top: 10px;}
.gep .gep_box .num_list.type_02 li .num {transform: none; width: 25px; height: 25px; border-radius: 50%; background: #795548; color: #fff; font-weight: 500; display: flex; justify-content: center; align-items: center;}
.gep .tbl th {white-space: nowrap;}
.gep .tbl td.border {border: 2px solid #795548; background: #f3f0ee;}
.gep .gep_dec {text-align: center; color: #333;}
.gep .gep_dec p {font-size: 20px;}
.gep .gep_dec .sig {display: flex; align-items: center; justify-content: center; padding-top: 20px; gap:10px;}
.gep .gep_dec .sig .logo {display: inline-block; background: url(/resources/images/site/layout/logo-small.png) no-repeat center; width: 40px; height: 40px; background-size: contain;}
.gep .gep_dec .sig .name i {display: inline-block; font-style: normal; font-size: 23px; font-weight: 600; padding-left: 8px;}
.gep .gep_dec .sig .pre_sig {height: 40px; object-fit: contain;}

@media screen and (max-width: 767px) {
    .gep .gep_banner {justify-content: space-between; height: auto; margin-bottom: 25px;}
    .gep .gep_banner .center h2.tit {font-size: 28px;}
    .gep .gep_banner .left h3,
    .gep .gep_banner .right h3 {font-size: 13px;}
    .gep .gep_dec p {font-size: 1rem;}
    .gep .gep_dec .sig {flex-wrap: wrap; flex-direction: column; gap: 8px;}
    .gep .gep_dec .sig .name {line-height: 1.4;}
    .gep .gep_dec .sig .name i {display: block; padding-left: 0;}
}

@media screen and (max-width: 500px){
    .gep .gep_banner {padding: 10px;}
    .gep .gep_banner .center {flex: none;}
    .gep .gep_banner .center h2.tit {font-size: 22px;}
    .gep .gep_banner .left h3,
    .gep .gep_banner .right h3{font-size: 10px;}
}